/*
Theme Name: Bassant Kadry Campaign (Child)
Theme URI: REPLACE_WITH_DOMAIN
Description: Custom child theme for Bassant Kadry — Frederick County Democratic Central Committee. Refined editorial design system with full SEO support.
Author: Alliance Global Tech, Inc.
Version: 1.0.0
Template: twentytwentyfour
*/

/* =========================================================================
   DESIGN TOKENS
   Palette drawn from the headshot: deep teal, warm ivory, soft gold accent.
   ========================================================================= */
:root{
  --bk-teal:#0e4f57;
  --bk-teal-deep:#08363c;
  --bk-teal-soft:#16707b;
  --bk-gold:#c9a14a;
  --bk-gold-soft:#e6d4a3;
  --bk-ivory:#f7f4ed;
  --bk-ivory-2:#efe9dd;
  --bk-ink:#1d2426;
  --bk-muted:#5a6668;
  --bk-white:#ffffff;
  --bk-shadow:0 18px 50px -20px rgba(8,54,60,.45);
  --bk-radius:16px;
  --bk-display:"Fraunces",Georgia,"Times New Roman",serif;
  --bk-body:"Mulish","Segoe UI",system-ui,sans-serif;
}

/* Fonts — distinctive serif display + clean humanist body */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Mulish:wght@400;500;600;700&display=swap');

body{ font-family:var(--bk-body); color:var(--bk-ink); background:var(--bk-white); line-height:1.65; }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.bk-h1,.bk-hero-title{ font-family:var(--bk-display); font-weight:600; letter-spacing:-.02em; line-height:1.05; color:var(--bk-teal-deep); }
.bk-hero-title{ font-size:clamp(2.8rem,7vw,5.2rem); margin:.1em 0 .3em; color:var(--bk-white); text-shadow:0 2px 24px rgba(8,54,60,.5); }
.bk-h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:0; }
.bk-h2{ font-family:var(--bk-display); font-weight:600; font-size:clamp(1.7rem,3.5vw,2.5rem); letter-spacing:-.015em; color:var(--bk-teal-deep); margin:0 0 .6em; }
.bk-eyebrow{ font-family:var(--bk-body); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bk-gold); margin:0 0 .4em; }
.bk-lead{ font-size:1.22rem; color:var(--bk-muted); font-weight:400; }
.bk-hero-sub{ font-size:1.22rem; color:#eef3f2; max-width:44ch; margin:.4em 0 1.6em; }

/* =========================================================================
   HERO
   ========================================================================= */
.bk-hero{ position:relative; }
.bk-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, var(--bk-teal-deep) 0%, rgba(14,79,87,.92) 45%, rgba(14,79,87,.35) 100%);
}
.bk-hero .wp-block-cover__inner-container{ position:relative; z-index:2; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.bk-btn-primary .wp-block-button__link{
  background:var(--bk-gold); color:var(--bk-teal-deep); font-weight:700;
  border-radius:999px; padding:.85em 2em; letter-spacing:.01em;
  box-shadow:0 10px 30px -10px rgba(201,161,74,.7); transition:transform .2s ease, box-shadow .2s ease;
}
.bk-btn-primary .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(201,161,74,.85); }
.bk-btn-ghost .wp-block-button__link{
  border:2px solid rgba(255,255,255,.85); color:#fff; border-radius:999px; padding:.8em 1.9em; font-weight:600; background:transparent;
}
.bk-btn-ghost .wp-block-button__link:hover{ background:rgba(255,255,255,.12); }

/* =========================================================================
   SECTIONS
   ========================================================================= */
.bk-section{ padding:clamp(3rem,8vw,6rem) 1.4rem; }
.bk-section-alt{ background:var(--bk-ivory); }
.bk-page-head{ padding:clamp(3rem,7vw,5rem) 1.4rem 1rem; }

/* Stats */
.bk-stats{ margin-top:2.4rem; gap:1rem; }
.bk-stat-num{ font-family:var(--bk-display); font-size:clamp(2.6rem,6vw,3.6rem); color:var(--bk-gold); margin:0; line-height:1; }
.bk-stat-label{ color:var(--bk-muted); font-size:.98rem; margin:.4em 0 0; }

/* Value cards */
.bk-cards{ gap:1.4rem; margin-top:1.5rem; }
.bk-card{
  background:var(--bk-white); border:1px solid var(--bk-ivory-2); border-radius:var(--bk-radius);
  padding:2rem 1.7rem; box-shadow:var(--bk-shadow); border-top:4px solid var(--bk-gold);
  transition:transform .25s ease;
}
.bk-card:hover{ transform:translateY(-4px); }
.bk-card-title{ font-family:var(--bk-display); font-size:1.35rem; color:var(--bk-teal); margin:0 0 .5em; }

/* CTA band */
.bk-cta{ background:linear-gradient(120deg,var(--bk-teal-deep),var(--bk-teal-soft)); padding:clamp(3rem,7vw,5rem) 1.4rem; }
.bk-cta-title{ color:#fff !important; }
.bk-cta-text{ color:#dfeceb; font-size:1.15rem; margin:0 auto 1.6rem; max-width:46ch; }

/* Bio */
.bk-bio{ padding:1rem 1.4rem clamp(3rem,7vw,5rem); gap:2.4rem; }
.bk-portrait img{ border-radius:var(--bk-radius); box-shadow:var(--bk-shadow); width:100%; }

/* Timeline */
.bk-timeline{ padding:1rem 1.4rem; }
.bk-tl-item{ position:relative; padding:0 0 2rem 1.8rem; border-left:2px solid var(--bk-ivory-2); margin-left:.4rem; }
.bk-tl-item::before{ content:""; position:absolute; left:-9px; top:.35rem; width:16px; height:16px; border-radius:50%; background:var(--bk-gold); box-shadow:0 0 0 4px var(--bk-ivory); }
.bk-tl-date{ font-weight:700; color:var(--bk-gold); letter-spacing:.04em; font-size:.85rem; text-transform:uppercase; margin:0 0 .2em; }
.bk-tl-role{ font-family:var(--bk-display); font-size:1.3rem; color:var(--bk-teal-deep); margin:0 0 .4em; }

/* Contact */
.bk-contact{ padding:1rem 1.4rem clamp(3rem,7vw,5rem); }
.bk-form-note{ background:var(--bk-ivory); border:1px dashed var(--bk-gold); border-radius:12px; padding:1.2rem 1.4rem; color:var(--bk-muted); font-size:.95rem; }

/* Authority line footer */
.bk-authority{ background:var(--bk-teal-deep); color:#cfe0df; text-align:center; padding:1.4rem; font-size:.85rem; letter-spacing:.02em; }

/* Responsive */
@media (max-width:781px){
  .bk-bio{ flex-direction:column; }
  .bk-hero-sub{ max-width:100%; }
}