/*
Theme Name: Birmingham Together
Theme URI: https://www.birminghamtogether.org
Author: Edu Give UK
Author URI: https://www.birminghamtogether.org
Description: City of Many Voices — a heritage landing theme for Birmingham Together. Deep navy to sunset gradient, bold split solid/outline display type, and a decade-by-decade image timeline of Birmingham's people.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: birmingham-together
Tags: one-column, custom-menu, heritage, community
*/

:root{
  --navy:#1E1839;
  --navy-deep:#14102A;
  --plum:#4A1B44;
  --wine:#7B2044;
  --crimson:#A62C4E;
  --ember:#E0793F;
  --peach:#F2A268;
  --paper:#FFF6EE;
  --paper-dim:rgba(255,246,238,.72);
  --frame:rgba(255,246,238,.28);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--paper);
  background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 22%,var(--plum) 46%,var(--wine) 66%,var(--crimson) 82%,var(--ember) 100%);
  background-attachment:fixed;
  line-height:1.65;
  overflow-x:hidden;
}
.display{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:.95;font-weight:400}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--paper);text-stroke:1.5px var(--paper)}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--peach)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,56px)}

/* Screen reader text (WP a11y convention) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

/* ---------- NAV ---------- */
.bt-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(20px,5vw,56px);
  background:linear-gradient(180deg,rgba(20,16,42,.92),rgba(20,16,42,0));
  backdrop-filter:blur(2px);
}
body.admin-bar .bt-nav{top:32px}
.bt-nav .logo{font-weight:700;font-size:1rem;letter-spacing:.02em;text-decoration:none;color:var(--paper)}
.bt-nav .logo span{color:var(--peach)}
.bt-nav ul{display:flex;gap:28px;list-style:none}
.bt-nav a{color:var(--paper-dim);text-decoration:none;font-size:.85rem;font-weight:600;transition:color .2s}
.bt-nav a:hover,.bt-nav a:focus-visible{color:var(--peach)}
.bt-nav a:focus-visible{outline:2px solid var(--peach);outline-offset:4px}
.nav-cta{border:1.5px solid var(--peach);padding:8px 18px;border-radius:2px;color:var(--paper)!important}
@media(max-width:760px){.bt-nav ul li:not(:last-child){display:none}}

/* ---------- HERO ---------- */
.bt-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:120px 0 80px}
.hero-word{font-size:clamp(3.2rem,12.5vw,11.5rem);white-space:nowrap;margin:18px 0 10px;position:relative;z-index:2}
.hero-tag{font-style:italic;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(.72rem,1.6vw,1rem);color:var(--paper-dim)}
.hero-intro{max-width:560px;margin-top:34px;color:var(--paper-dim);font-size:1.05rem}
.hero-actions{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 30px;border-radius:2px;transition:transform .2s,background .2s,color .2s}
.btn-solid{background:var(--peach);color:var(--navy-deep)}
.btn-solid:hover{transform:translateY(-2px);background:var(--paper)}
.btn-ghost{border:1.5px solid var(--frame);color:var(--paper)}
.btn-ghost:hover{border-color:var(--peach);color:var(--peach)}
.btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.hero-circle{
  position:absolute;top:10vh;right:clamp(16px,6vw,90px);z-index:1;
  width:clamp(170px,24vw,340px);height:clamp(170px,24vw,340px);
}
.hero-circle .disc{
  width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;
  box-shadow:0 24px 70px rgba(20,16,42,.55);
}
.hero-circle img{width:100%;height:100%;object-fit:cover;display:block}
.hero-circle .ring{position:absolute;inset:-14%;pointer-events:none}
@media(max-width:900px){.hero-circle{opacity:.55;top:8vh}}
.scroll-hint{position:absolute;bottom:30px;left:clamp(20px,5vw,56px);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-dim);display:flex;align-items:center;gap:12px}
.scroll-hint::after{content:"";width:56px;height:1px;background:var(--peach)}

/* ---------- SECTION SHELL ---------- */
.bt-section{padding:110px 0;position:relative}
.sec-head{margin-bottom:56px;max-width:760px}
.sec-title{font-size:clamp(2.2rem,6vw,4.2rem);margin-top:14px}
.sec-lede{margin-top:22px;color:var(--paper-dim);font-size:1.05rem;max-width:620px}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:880px){.about-grid{grid-template-columns:1fr}}
.about-copy p{margin-bottom:20px;color:var(--paper-dim)}
.about-copy p strong{color:var(--paper)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:44px;border:1px solid var(--frame)}
.stat{padding:22px 18px;background:rgba(20,16,42,.35)}
.stat b{font-family:'Anton';font-size:2rem;display:block;color:var(--peach);letter-spacing:.02em}
.stat span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim)}

/* ---------- PHOTO FRAME ---------- */
.photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  background:linear-gradient(150deg,#2A1E4E,#5C1E45 55%,#8A2A48);
  display:flex;align-items:flex-end;
}
.photo.landscape{aspect-ratio:16/10}
.photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) contrast(1.03);
}
.photo .tint{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(160deg,rgba(30,24,57,.38),rgba(123,32,68,.22) 55%,rgba(224,121,63,.16));
}
.photo .cap{
  position:relative;z-index:3;width:100%;padding:34px 16px 14px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-dim);background:linear-gradient(0deg,rgba(20,16,42,.9),transparent);
}
.photo .tag{
  position:absolute;top:14px;left:14px;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy-deep);background:var(--peach);padding:5px 10px;border-radius:2px;
}
.vine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9;z-index:3}
.photo-grain::before{
  content:"";position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;z-index:2;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
}
.photo.mono img{filter:grayscale(1) contrast(1.08) brightness(1.02)}
.photo.mono .tint{background:linear-gradient(160deg,rgba(30,24,57,.5),rgba(123,32,68,.42) 55%,rgba(224,121,63,.3))}

/* ---------- TIMELINE ---------- */
.bt-timeline{background:rgba(20,16,42,.25)}
.tl{position:relative;margin-top:20px}
.tl::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--peach),var(--crimson) 40%,var(--peach) 70%,var(--ember));
  opacity:.55;
}
.era{display:grid;grid-template-columns:1fr 120px 1fr;gap:0;align-items:center;padding:70px 0;position:relative}
.era-year{
  grid-column:2;justify-self:center;z-index:2;
  font-family:'Anton';font-size:1.05rem;letter-spacing:.06em;color:var(--navy-deep);
  background:var(--peach);padding:10px 16px;border-radius:2px;white-space:nowrap;
  box-shadow:0 0 0 8px rgba(242,162,104,.15);
}
.era-media{display:grid;gap:18px}
.era-media.duo{grid-template-columns:1.15fr .85fr;align-items:start}
.era-media.duo .photo:last-child{margin-top:56px}
.era-copy h3{font-size:clamp(1.6rem,3.4vw,2.5rem);margin-bottom:6px}
.era-copy h3 .outline{-webkit-text-stroke-width:1.2px}
.era-copy .era-sub{font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--peach);display:block;margin-bottom:16px}
.era-copy p{color:var(--paper-dim);max-width:460px}
.era:nth-child(odd) .era-media{grid-column:1;grid-row:1;padding-right:48px}
.era:nth-child(odd) .era-copy{grid-column:3;grid-row:1;padding-left:48px}
.era:nth-child(even) .era-copy{grid-column:1;grid-row:1;padding-right:48px;justify-self:end;text-align:right}
.era:nth-child(even) .era-copy p{margin-left:auto}
.era:nth-child(even) .era-media{grid-column:3;grid-row:1;padding-left:48px}
.era-ghost{
  position:absolute;font-family:'Anton';font-size:clamp(5rem,14vw,11rem);color:transparent;
  -webkit-text-stroke:1px rgba(255,246,238,.07);z-index:0;top:0;pointer-events:none;user-select:none;
}
.era:nth-child(odd) .era-ghost{right:0}
.era:nth-child(even) .era-ghost{left:0}
@media(max-width:900px){
  .tl::before{left:22px}
  .era{grid-template-columns:1fr;padding:56px 0 56px 56px}
  .era-year{grid-column:1;justify-self:start;grid-row:1;margin-bottom:26px;position:relative;left:-56px;margin-left:56px}
  .era:nth-child(n) .era-copy{grid-column:1;grid-row:2;padding:0;text-align:left;justify-self:start}
  .era:nth-child(n) .era-copy p{margin-left:0}
  .era:nth-child(n) .era-media{grid-column:1;grid-row:3;padding:28px 0 0}
  .era-media.duo .photo:last-child{margin-top:28px}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- ARCHIVE PILLARS ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
@media(max-width:880px){.pillars{grid-template-columns:1fr}}
.pillar{
  border:1px solid var(--frame);border-radius:4px;padding:34px 28px;
  background:linear-gradient(165deg,rgba(255,246,238,.05),rgba(20,16,42,.3));
  transition:transform .25s,border-color .25s;
}
.pillar:hover{transform:translateY(-5px);border-color:var(--peach)}
.pillar .num{font-family:'Anton';color:var(--peach);font-size:.95rem;letter-spacing:.1em;display:block;margin-bottom:18px}
.pillar h3{font-size:1.35rem;margin-bottom:12px;letter-spacing:.02em}
.pillar p{color:var(--paper-dim);font-size:.95rem}

/* ---------- GET INVOLVED ---------- */
.involve{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
@media(max-width:880px){.involve{grid-template-columns:1fr}}
.involve ul{list-style:none;margin-top:26px}
.involve li{padding:16px 0;border-bottom:1px solid var(--frame);display:flex;gap:16px;align-items:baseline;color:var(--paper-dim)}
.involve li::before{content:"—";color:var(--peach);font-weight:700}
.involve li b{color:var(--paper)}

/* ---------- FOOTER ---------- */
.bt-footer{padding:70px 0 40px;border-top:1px solid var(--frame);background:rgba(20,16,42,.5)}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
.foot-word{font-size:clamp(2rem,6vw,3.6rem)}
.foot-meta{font-size:.8rem;color:var(--paper-dim);text-align:right}
.foot-meta a{color:var(--peach);text-decoration:none}
.foot-note{margin-top:36px;font-size:.72rem;color:rgba(255,246,238,.4);letter-spacing:.03em;line-height:1.8}
.foot-note a{color:rgba(255,246,238,.55)}

/* ---------- GENERIC INNER PAGES (blog/pages fallback) ---------- */
.bt-inner{padding:160px 0 100px}
.bt-inner .entry-title{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:24px}
.bt-inner .entry-content p{margin-bottom:20px;color:var(--paper-dim);max-width:720px}
.bt-inner .entry-content a{color:var(--peach)}
.bt-inner .entry-content h2,.bt-inner .entry-content h3{margin:36px 0 14px}
.bt-inner img{max-width:100%;height:auto;border-radius:3px}

/* ---------- CONTACT FORM ---------- */
.bt-contact{background:rgba(20,16,42,.25)}
.contact-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:64px;align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-aside p{color:var(--paper-dim);margin-bottom:6px}
.contact-aside a{color:var(--peach);text-decoration:none}
.bt-form p{margin-bottom:20px}
.bt-form label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:8px}
.bt-form label span{color:var(--peach)}
.bt-form input[type=text],
.bt-form input[type=email],
.bt-form textarea{
  width:100%;padding:14px 16px;border-radius:3px;
  background:rgba(20,16,42,.5);border:1px solid var(--frame);
  color:var(--paper);font-family:'Archivo',system-ui,sans-serif;font-size:1rem;
  transition:border-color .2s,background .2s;
}
.bt-form input::placeholder,.bt-form textarea::placeholder{color:rgba(255,246,238,.35)}
.bt-form input:focus,.bt-form textarea:focus{outline:none;border-color:var(--peach);background:rgba(20,16,42,.7)}
.bt-form textarea{resize:vertical;min-height:150px}
.bt-form button{border:none;cursor:pointer;font-family:'Archivo',system-ui,sans-serif}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.hp-field{position:absolute !important;left:-9999px !important;opacity:0;height:0;overflow:hidden}
.form-notice{padding:18px 22px;border-radius:3px;margin-bottom:28px;font-size:.95rem}
.form-notice a{color:inherit}
.notice-ok{background:rgba(242,162,104,.15);border:1px solid var(--peach);color:var(--paper)}
.notice-err{background:rgba(166,44,78,.25);border:1px solid var(--crimson);color:var(--paper)}

/* ---------- CLICKABLE TIMELINE CARDS ---------- */
.era-copy h3 a{color:inherit;text-decoration:none;transition:color .2s}
.era-copy h3 a:hover,.era-copy h3 a:focus-visible{color:var(--peach)}
.era-copy h3 a:hover .outline{-webkit-text-stroke-color:var(--peach)}
.era-copy h3 a:focus-visible{outline:2px solid var(--peach);outline-offset:4px}
.era-more{display:inline-block;margin-top:18px;font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--peach);text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .2s}
.era-more:hover,.era-more:focus-visible{border-color:var(--peach)}
.photo-link{display:block;text-decoration:none}
.photo-link .photo{transition:transform .3s,box-shadow .3s}
.photo-link:hover .photo{transform:translateY(-4px);box-shadow:0 18px 50px rgba(20,16,42,.5)}

/* ---------- ERA DETAIL PAGE ---------- */
.era-page{padding-top:70px}
.era-hero{position:relative;padding:120px 0 60px;overflow:hidden}
.era-hero-ghost{position:absolute;right:-2vw;top:20px;font-size:clamp(8rem,26vw,20rem);color:transparent;-webkit-text-stroke:1px rgba(255,246,238,.06);pointer-events:none;user-select:none}
.crumbs{font-size:.78rem;letter-spacing:.08em;color:var(--paper-dim);margin-bottom:34px;display:flex;gap:12px;flex-wrap:wrap}
.crumbs a{color:var(--paper-dim);text-decoration:none}
.crumbs a:hover{color:var(--peach)}
.crumbs span:last-child{color:var(--peach)}
.era-year-badge{display:inline-block;font-family:'Anton';font-size:1rem;letter-spacing:.06em;color:var(--navy-deep);background:var(--peach);padding:8px 16px;border-radius:2px;margin-bottom:20px}
.era-title{font-size:clamp(2.6rem,8vw,6rem);margin:10px 0 24px}
.era-lede{max-width:680px;color:var(--paper-dim);font-size:1.1rem}
.era-body{display:grid;grid-template-columns:1.5fr .5fr;gap:64px;padding-bottom:40px;align-items:start}
@media(max-width:900px){.era-body{grid-template-columns:1fr}}
.era-lead-photo{margin-bottom:44px}
.era-lead-photo .photo{aspect-ratio:16/9}
.era-text p{color:var(--paper-dim);font-size:1.05rem;margin-bottom:26px;max-width:70ch}
.era-inline-photo{margin:36px 0 40px}
.era-inline-photo .photo{aspect-ratio:16/10}
.era-side{position:sticky;top:110px;display:grid;gap:26px}
@media(max-width:900px){.era-side{position:static}}
.facts{border:1px solid var(--frame);border-radius:4px;padding:30px 26px;background:linear-gradient(165deg,rgba(255,246,238,.05),rgba(20,16,42,.3))}
.facts-title{font-size:1.5rem;margin-bottom:18px}
.facts ul{list-style:none}
.facts li{padding:12px 0;border-bottom:1px solid var(--frame);color:var(--paper-dim);font-size:.92rem;display:flex;gap:12px}
.facts li::before{content:"\2014";color:var(--peach);flex-shrink:0}
.facts li:last-child{border-bottom:none}
.era-cta{border:1px solid var(--peach);border-radius:4px;padding:30px 26px;background:rgba(242,162,104,.08)}
.era-cta p{color:var(--paper-dim);margin:10px 0 20px}
.era-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding-top:30px;padding-bottom:100px;border-top:1px solid var(--frame);margin-top:30px}
@media(max-width:760px){.era-nav{grid-template-columns:1fr}}
.era-nav-link{text-decoration:none;color:var(--paper);padding:20px;border:1px solid var(--frame);border-radius:4px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}
.era-nav-link:hover{border-color:var(--peach);transform:translateY(-3px)}
.era-nav-link .display{font-size:1.2rem}
.era-nav-link.next{text-align:right;align-items:flex-end}
.era-nav-link.all{text-align:center;align-items:center;justify-content:center}
.era-nav-year{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-dim)}