/*
Theme Name: Heritage Live
Theme URI: https://heritagelive.com
Author: Heritage Gateway
Description: Diaspora news, culture and record. Custom theme built for Heritage Live — split hero, 4:5 image/video grid, editorial layout.
Version: 1.0
Requires PHP: 7.4
Text Domain: heritage-live
*/

:root{
  --cream:#F7F5F0;
  --charcoal:#1A1A1A;
  --gold:#C6A85B;
  --forest:#1F3A2E;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Montserrat',sans-serif;
  font-size:16px;
  line-height:1.5;
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- Header ---------- */
.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 60px;
}
.site-header .logo{
  font-family:'Fraunces',serif;font-size:26px;font-weight:700;
}
.site-header nav ul{
  display:flex;gap:30px;list-style:none;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#555;
}
.site-header nav a:hover,
.site-header nav .current-menu-item a{color:var(--gold);}
.site-header nav a.nav-cta{
  background:var(--forest);color:var(--cream) !important;
  padding:7px 16px;border-radius:20px;letter-spacing:1px;
}
.site-header nav a.nav-cta:hover{background:var(--gold);color:var(--charcoal) !important;}

/* ---------- Header actions (search + hamburger) ---------- */
.header-actions{display:flex;align-items:center;gap:10px;}
.search-toggle{
  background:none;border:none;cursor:pointer;padding:8px;color:var(--charcoal);
  display:flex;align-items:center;justify-content:center;
}
.search-bar{
  display:none;background:var(--forest);padding:18px 60px;
}
.search-bar.is-open{display:block;}
.search-bar form{display:flex;max-width:1400px;margin:0 auto;gap:10px;}
.search-bar input{
  flex:1;padding:12px 16px;border:none;font-family:'Montserrat',sans-serif;font-size:15px;
  background:#fff;color:var(--charcoal);
}
.search-bar button{
  background:var(--gold);border:none;padding:0 18px;cursor:pointer;color:var(--charcoal);
  display:flex;align-items:center;
}

/* ---------- More stories / pagination / no results ---------- */
.more-stories-cta{
  text-align:center;padding:36px 60px;
}
.more-stories-cta a{
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:var(--forest);border-bottom:2px solid var(--gold);padding-bottom:4px;
}
.more-stories-cta a:hover{color:var(--gold);}

.pagination-wrap,
.pagination{
  display:flex;justify-content:center;gap:10px;padding:20px 60px 70px;
  flex-wrap:wrap;
}
.pagination-wrap .page-numbers,
.pagination .page-numbers{
  padding:8px 14px;font-size:13px;color:var(--charcoal);border:1px solid #ddd3bd;
}
.pagination-wrap .page-numbers.current,
.pagination .page-numbers.current{
  background:var(--forest);color:var(--cream);border-color:var(--forest);
}

.no-results{
  grid-column:1/-1;padding:20px 0;color:#555;font-size:15px;line-height:1.6;
}
.no-results a{color:var(--forest);font-weight:700;text-decoration:underline;}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;z-index:1002;
}
.nav-toggle span{width:24px;height:2px;background:var(--charcoal);display:block;transition:0.25s;}
.nav-overlay{display:none;}

@media (max-width:900px){
  .nav-toggle{display:flex;}
  .site-header{position:relative;flex-wrap:wrap;}
  .site-header nav{
    position:fixed;top:0;right:-100%;
    width:80%;max-width:320px;height:100vh;
    background:var(--forest);
    padding:90px 30px 30px;
    transition:right 0.3s ease;
    z-index:1001;
    overflow-y:auto;
  }
  .site-header nav.is-open{right:0;}
  .site-header nav ul{
    flex-direction:column;align-items:flex-start;gap:22px;
  }
  .site-header nav a{color:var(--cream);font-size:14px;}
  .site-header nav a.nav-cta{
    background:var(--gold);color:var(--charcoal) !important;
  }
  .nav-overlay.is-open{
    display:block;position:fixed;inset:0;
    background:rgba(0,0,0,0.45);z-index:1000;
  }
}

/* ---------- Hero (3/4 text - 1/4 image) ---------- */
.hero{
  display:grid;grid-template-columns:3fr 1fr;
  align-items:stretch;min-height:400px;
}
.hero-content{
  background:var(--forest);color:var(--cream);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:60px;
}
.hero-content .eyebrow{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:14px;
}
.hero-content h1{
  font-family:'Fraunces',serif;font-size:34px;line-height:1.2;
  font-weight:600;margin-bottom:14px;max-width:640px;
}
.hero-content p{font-size:16px;line-height:1.5;color:#EDE7DA;max-width:560px;}
.hero-content .meta{
  margin-top:22px;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:#c9c0ac;
}
.hero-image{
  position:relative;background:linear-gradient(135deg,var(--gold),#3a2a1c);
  background-size:cover;background-position:center;
  aspect-ratio:4/5;align-self:start;
}
.hero-image .badge{
  position:absolute;bottom:16px;left:16px;right:16px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,0.4);padding:6px 10px;border-radius:4px;
}
.hero-image .play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,0.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}

/* ---------- Section label ---------- */
.section-label{display:flex;align-items:center;gap:16px;padding:60px 60px 24px;}
.section-label h2{
  font-family:'Fraunces',serif;font-size:22px;letter-spacing:1px;
  text-transform:uppercase;white-space:nowrap;
}
.section-label .line{flex:1;height:1px;background:#ddd3bd;}

/* ---------- Feature grid (3-col, 4:5 cards) ---------- */
.feature-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px;
  padding:0 60px 70px;
}
.feature{display:block;}
.feature .media{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--forest));
  margin-bottom:18px;
}
.feature .media img{width:100%;height:100%;object-fit:cover;}
.feature .media .play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,0.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.feature .tag{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.feature h3{
  font-family:'Fraunces',serif;font-size:24px;line-height:1.2;margin:10px 0 8px;
}
.feature p{font-size:16px;color:var(--charcoal);line-height:1.55;}

/* ---------- Strip (secondary links) ---------- */
.strip{
  background:var(--forest);color:var(--cream);padding:50px 60px;
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px;
}
.strip a{display:block;}
.strip .tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}
.strip h4{font-family:'Fraunces',serif;font-size:19px;margin-top:8px;line-height:1.25;}

/* ---------- Single article/video ---------- */
.single-wrap{max-width:760px;margin:0 auto;padding:60px 24px 90px;}
.single-wrap .tag{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;
}
.single-wrap h1{
  font-family:'Fraunces',serif;font-size:38px;line-height:1.15;margin:14px 0 18px;
}
.single-wrap .meta{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#999;margin-bottom:26px;
}
.single-wrap .featured-media{
  width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:30px;background:var(--gold);
}
.single-wrap .video-embed{
  position:relative;width:100%;aspect-ratio:16/9;margin-bottom:30px;background:#000;
}
.single-wrap .video-embed iframe{width:100%;height:100%;border:0;}
.single-wrap .entry-content{font-size:17px;line-height:1.7;color:var(--charcoal);}
.single-wrap .entry-content p{margin-bottom:18px;}

.follow-cta{
  margin-top:40px;padding:26px 30px;border:1px solid #ddd3bd;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.follow-cta .tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;}
.follow-cta-text p{font-family:'Fraunces',serif;font-size:19px;margin-top:6px;}

.social-icons{display:flex;gap:14px;}
.social-icons a{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--forest);color:var(--cream);
  transition:background 0.2s;
}
.social-icons a:hover{background:var(--gold);color:var(--charcoal);}

/* ---------- Comments ---------- */
.comments-wrap{max-width:760px;margin:0 auto;padding:50px 24px 90px;}
.comments-title{font-family:'Fraunces',serif;font-size:24px;margin-bottom:26px;}
.comment-list{list-style:none;}
.comment-list .children{list-style:none;margin-left:40px;}
.comment-body{
  display:flex;gap:16px;padding:20px 0;border-bottom:1px solid #ddd3bd;
}
.comment-author .avatar{border-radius:50%;display:block;}
.comment-meta{flex:1;}
.comment-author .fn{
  font-family:'Fraunces',serif;font-size:16px;font-style:normal;font-weight:600;color:var(--charcoal);
}
.comment-metadata{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#999;margin-bottom:8px;}
.comment-metadata a{color:#999;}
.comment-content p{font-size:15px;line-height:1.6;color:var(--charcoal);}
.comments-closed{color:#777;font-size:14px;padding:20px 0;}

#respond{margin-top:36px;}
.comment-reply-title{font-family:'Fraunces',serif;font-size:22px;margin-bottom:18px;}
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input{
  width:100%;padding:12px 14px;border:1px solid #ddd3bd;background:#fff;
  font-family:'Montserrat',sans-serif;font-size:15px;color:var(--charcoal);margin-bottom:16px;
}
.follow-cta-submit,
#respond .form-submit input{
  background:var(--forest);color:var(--cream);
  border:none;padding:14px 28px;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;
}
.follow-cta-submit:hover,
#respond .form-submit input:hover{background:var(--charcoal);}
.comment-notes,.logged-in-as{font-size:13px;color:#777;margin-bottom:16px;}

/* ---------- Contact page ---------- */
.contact-wrap{max-width:640px;margin:0 auto;padding:60px 24px 90px;}
.contact-wrap h1{font-family:'Fraunces',serif;font-size:34px;margin-bottom:14px;}
.contact-wrap p.intro{font-size:16px;color:var(--charcoal);margin-bottom:34px;}
.contact-form label{
  display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:#777;margin-bottom:6px;margin-top:20px;
}
.contact-form input,
.contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid #ddd3bd;background:#fff;
  font-family:'Montserrat',sans-serif;font-size:15px;color:var(--charcoal);
}
.contact-form button{
  margin-top:26px;background:var(--forest);color:var(--cream);
  border:none;padding:14px 28px;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;
}
.contact-form button:hover{background:var(--charcoal);}
.contact-success{background:#eef4ee;border:1px solid var(--forest);padding:16px;font-size:14px;margin-bottom:20px;}

/* ---------- Events page ---------- */
.events-list{max-width:900px;margin:0 auto;padding:0 24px 90px;}
.event-card{
  display:flex;align-items:center;gap:26px;
  padding:26px 0;border-bottom:1px solid #ddd3bd;
}
.event-card .event-date{
  flex:none;width:120px;font-family:'Fraunces',serif;font-size:15px;
  color:var(--forest);font-weight:600;
}
.event-body{flex:1;}
.event-body .tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:700;}
.event-body h3{font-family:'Fraunces',serif;font-size:24px;margin:6px 0 4px;}
.event-body p{font-size:15px;color:var(--charcoal);}
.event-link{
  flex:none;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--forest);font-weight:700;
}
.event-link:hover{color:var(--gold);}
@media (max-width:700px){
  .event-card{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid #ddd3bd;padding:40px 60px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#999;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .site-header, .hero-content, .feature-grid, .section-label, .strip, .site-footer, .search-bar, .more-stories-cta, .pagination-wrap, .pagination{padding-left:24px;padding-right:24px;}
  .hero{grid-template-columns:1fr;}
  .hero-image{min-height:220px;}
  .feature-grid{grid-template-columns:1fr;}
  .strip{grid-template-columns:1fr 1fr;}
  .site-header nav ul{gap:16px;flex-wrap:wrap;}
}