/*
 * America's Future — 2026 Rebrand stylesheet
 * Source of truth: branding/2026.06.04-AF-Brand_Guidelines.pdf
 *
 * Loaded AFTER style.css (see functions.php) so it wins the cascade.
 * This file is intentionally isolated/additive so the rebrand can be
 * reviewed on staging and reverted by simply dequeuing it.
 *
 * Fast-follow (not required for staging): migrate the scattered
 * hardcoded hex + font-family rules in style.css to consume these vars.
 */

/* ============================================================
 * 1. BRAND TOKENS
 * ========================================================== */
:root {
  /* Primary */
  --af-blue:        #1E72ED;  /* main brand color: logo, headlines, iconography */
  --af-red:         #F64132;  /* co-primary accent (Warm Red) */
  /* Secondary */
  --af-charcoal:    #1B1C1E;  /* body text + dark backgrounds */
  --af-cream:       #FFF9E9;  /* brand cream — palette Pantone 7499 (reads near-white on screen). */
  /* Action — WEB HOVER STATES ONLY per brand guide */
  --af-purple:      #660192;

  /* Tints (blue/red/charcoal only, per guide — use sparingly).
     rgba lets us layer them over any background. */
  --af-blue-10:     rgba(30,114,237,.10);
  --af-blue-20:     rgba(30,114,237,.20);
  --af-blue-60:     rgba(30,114,237,.60);
  --af-red-10:      rgba(246,65,50,.10);
  --af-red-20:      rgba(246,65,50,.20);
  --af-charcoal-10: rgba(27,28,30,.10);
  --af-charcoal-60: rgba(27,28,30,.60);
  --af-charcoal-80: rgba(27,28,30,.80);

  /* Semantic roles (blue-dominant mapping) */
  --af-text:        var(--af-charcoal);
  --af-link:        var(--af-blue);
  --af-link-hover:  var(--af-purple);
  --af-accent:      var(--af-red);
  --af-bg-light:    var(--af-cream);

  /* Type families.
     Display = TT Commons Pro Compact ExtraBlack (via Adobe Fonts embed,
     enqueued in functions.php). Falls back to Signifier Black until the
     Adobe kit is wired, so headlines never render in a system font. */
  --font-display: "tt-commons-pro", "TT Commons Pro", "Signifier", Georgia, serif;
  --font-body:    "Signifier", Georgia, "Times New Roman", serif;
}

/* ============================================================
 * 2. SIGNIFIER @font-face (self-hosted, web-licensed)
 *    Files: helping-hand-child/fonts/*.woff2
 * ========================================================== */
@font-face { font-family:"Signifier"; font-weight:100; font-style:normal;  font-display:swap; src:url("fonts/signifier-thin.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:100; font-style:italic;  font-display:swap; src:url("fonts/signifier-thin-italic.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:200; font-style:normal;  font-display:swap; src:url("fonts/signifier-extralight.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:200; font-style:italic;  font-display:swap; src:url("fonts/signifier-extralight-italic.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:300; font-style:normal;  font-display:swap; src:url("fonts/signifier-light.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:300; font-style:italic;  font-display:swap; src:url("fonts/signifier-light-italic.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:400; font-style:normal;  font-display:swap; src:url("fonts/signifier-regular.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:400; font-style:italic;  font-display:swap; src:url("fonts/signifier-regular-italic.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:500; font-style:normal;  font-display:swap; src:url("fonts/signifier-medium.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:500; font-style:italic;  font-display:swap; src:url("fonts/signifier-medium-italic.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:700; font-style:normal;  font-display:swap; src:url("fonts/signifier-bold.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:700; font-style:italic;  font-display:swap; src:url("fonts/signifier-bold-italic.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:900; font-style:normal;  font-display:swap; src:url("fonts/signifier-black.woff2") format("woff2"); }
@font-face { font-family:"Signifier"; font-weight:900; font-style:italic;  font-display:swap; src:url("fonts/signifier-black-italic.woff2") format("woff2"); }

/* ============================================================
 * 3. TYPOGRAPHY MAPPING
 *    Body + secondary headlines = Signifier
 *    Main display headlines (h1/h2) + logo = TT Commons (display var)
 *    !important is required to beat style.css's existing !important rules.
 * ========================================================== */
body,
p, li, span, a, blockquote,
input, textarea, select, button {
  font-family: var(--font-body) !important;
}

body { color: var(--af-text); }

/* Secondary headlines / sub-headers — Signifier (bolder weights) */
h3, h4, h5, h6 {
  font-family: var(--font-body) !important;
  font-weight: 700;
}

/* Main display headlines — TT Commons Pro Compact ExtraBlack: all-caps, heaviest weight */
h1, h2 {
  font-family: var(--font-display) !important;
  font-weight: 900;
  text-transform: uppercase;
}

/* Body copy leans on the lighter Signifier weights per the guide */
body, p, li { font-weight: 300; }

/* ============================================================
 * 4. COLOR MAPPING (blue-dominant)
 *    Targeted at the brand-colored elements; neutrals (greys/whites)
 *    are left to style.css and cleaned up during QA.
 * ========================================================== */
/* `body a` (specificity 0,0,0,2) beats the parent's Redux-compiled
   static.css `a {}` (0,0,0,1), which loads AFTER branding.css. Without the
   `body` qualifier, equal specificity let static.css win on source order —
   so a stale/teal static.css on staging (or one Redux regenerates from the
   still-teal theme-options in that DB) would override the brand link color.
   Specificity wins regardless of load order, so this holds after a regenerate. */
body a { color: var(--af-link); }
body a:hover, body a:focus { color: var(--af-link-hover); }   /* purple = action/hover only */

/* Footer = brand charcoal (parent sets #footer-top to grey #383b3f). */
#footer-top, #footer-bottom { background-color: var(--af-charcoal) !important; }

/* Header nav + footer sub-links: white -> brand cream on the charcoal bars.
   Extra-specific hover selectors beat the child theme's own !important rules. */
.menu-main-menu > li > a,
.main-header .menu-main-menu > li > a:hover,
.menu__footer .sub-menu a,
#footer-top .menu__footer .sub-menu a:hover {
  color: var(--af-cream) !important;
}

/* DONATE button: remove the white border, button text -> cream.
   Covers both selectors that style it (#26753 and the last menu item). */
.main-header .menu-item-26753 a,
.main-header #menu-primary-menu > li:last-child a {
  border: none !important;
  border-radius: 0 !important;          /* square corners */
}
/* Square DONATE button, 44px tall and vertically centered to match the
   search button + nav links (header center). Desktop only. */
@media (min-width: 992px) {
  .main-header .menu-item-26753 a {
    height: 44px !important;
    box-sizing: border-box;
    display: inline-flex !important;     /* center label both axes, ignore text-align/letter-spacing */
    align-items: center !important;
    justify-content: center !important;
    text-indent: 0.2em;                  /* offset the trailing letter-spacing so glyphs sit dead-center */
    vertical-align: middle !important;   /* align the button to the nav/search center */
  }
  .main-header .sd-menu-search {
    margin-top: 18px !important;   /* nudge search down 2px: center 48 -> 50 */
  }
}
.main-header #menu-item-26753 > a,
.main-header #menu-item-26753 a,
.main-header #menu-primary-menu > li:last-child a,
.main-header #menu-primary-menu > li:last-child a:hover {
  color: var(--af-cream) !important;
}

/* ============================================================
 * IMAGE TREATMENTS (DEMO) — re-treat baked-gradient homepage photos
 * to brand blue without the original images. `background-blend-mode:
 * luminosity` keeps each photo's light/dark and discards the old
 * teal/blue hue, re-tinting it to a single brand color.
 * Targets: the 3 homepage nav-snacks + /media/ snacks (per-image URLs).
 * The hero row is handled generically below via .home-hero (no per-image URL).
 * Swap var(--af-blue) -> var(--af-red) for the red treatment.
 * ========================================================== */
.home__navsnack {
  background-blend-mode: multiply, saturation !important; /* multiply brand color over a desaturated (B&W) base */
  background-size: cover !important;
}
/* Stacked layers per image: [brand color] over [grey=desaturate] over [photo]. */
#eventHomeSnack {
  background-image: linear-gradient(var(--af-blue), var(--af-blue)), linear-gradient(#808080, #808080), url('https://americasfuture.org/wp-content/uploads/2020/10/events-4.jpg') !important;
}
#opportunityHomeSnack {
  background-image: linear-gradient(var(--af-blue), var(--af-blue)), linear-gradient(#808080, #808080), url('https://americasfuture.org/wp-content/uploads/2020/10/opportunities-3-scaled.jpg') !important;
}
#blogHomeSnack {
  background-image: linear-gradient(var(--af-blue), var(--af-blue)), linear-gradient(#808080, #808080), url('https://americasfuture.org/wp-content/uploads/2020/10/media-2-scaled.jpg') !important;
}
/* /media/ page nav-snacks (Commentary/News) — same re-treat; their style.css
   backgrounds are the old baked-duotone exports (news = legacy teal). */
#commentaryMediaSnack {
  background-image: linear-gradient(var(--af-blue), var(--af-blue)), linear-gradient(#808080, #808080), url('https://americasfuture.org/wp-content/uploads/2020/10/Artboard-1-copy-2-50-scaled.jpg') !important;
}
#newsMediaSnack {
  background-image: linear-gradient(var(--af-blue), var(--af-blue)), linear-gradient(#808080, #808080), url('https://americasfuture.org/wp-content/uploads/2020/10/media-2-scaled.jpg') !important;
}
/* Hero row: brand-blue duotone overlay for ANY image set on the row in VC.
   Keyed to the homepage's ONLY full-width (stretch) row, so it needs no class
   and survives both image swaps AND row re-saves — VC regenerates the row's
   .vc_custom_* class on every save, and this theme's "CMS Custom Style" dropdown
   wipes el_class, so neither is a reliable hook.
   Same ::before desaturate (grayscale) + multiply(blue) pattern as .chapter__snack. */
body.home .vc_row[data-vc-full-width="true"] {
  position: relative;
  isolation: isolate;            /* contain the blend to this row */
  background-size: cover !important;
}
body.home .vc_row[data-vc-full-width="true"]::before {
  content: "";
  display: block;                /* override VC's clearfix `.vc_row::before{display:table}`,
                                    which otherwise collapses this abs-positioned overlay */
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--af-blue);
  mix-blend-mode: multiply;
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  pointer-events: none;
}
body.home .vc_row[data-vc-full-width="true"] > .wpb_column,
body.home .vc_row[data-vc-full-width="true"] > .vc_column_container {
  position: relative;
  z-index: 1;                    /* keep the headline + CTA above the overlay */
}

/* Hub + chapter tiles (.chapter__snack, bg-image + overlaid title): generic
   brand multiply for ANY image — ::before desaturates the photo (backdrop-filter)
   and multiplies brand blue. Covers homepage hubs AND the /chapters/ grid, no
   per-image URLs. (title gets z-index above this in its rule below.) */
.chapter__snack { background-size: cover !important; }
.chapter__snack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--af-blue);
  mix-blend-mode: multiply;
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  pointer-events: none;
}

/* Chapters — real <img> with the title below. Desaturate the image and
   multiply it over a brand-blue wrapper (isolated so the blend is contained). */
.carousel-teams .cms-carousel-item .post-thumbnail {
  background-color: var(--af-blue);
  isolation: isolate;
}
.carousel-teams .cms-carousel-item .post-thumbnail img {
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

/* Nav-snack labels + icons (EVENTS / JOIN AF / MEDIA) -> brand cream. */
.home__navsnacks .home__navsnack__content,
.home__navsnacks .home__navsnack__content > span,
.home__navsnacks .home__navsnack__content i {
  color: var(--af-cream) !important;
}

/* Chapter cards: overlay the title ON the image with the brand cream highlight. */
.carousel-teams .cms-carousel-item { position: relative; }
.carousel-teams .cms-carousel-item h3 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  z-index: 3;
  background-color: var(--af-cream);
  color: var(--af-blue) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.2;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

/* Featured Content grid titles (overlaid on images) -> brand cream. */
.vc_gitem-post-data-source-post_title,
.vc_gitem-post-data-source-post_title div {
  color: var(--af-cream) !important;
}

/* Regional Hubs titles: brand cream highlight (blue display text on cream),
   matching the chapter/hero treatment. (Already centered on the image.) */
.chapter__snack .chapter__snack__title {
  background-color: var(--af-cream) !important;
  color: var(--af-blue) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  padding: 0.1em 0.4em !important;
  white-space: nowrap;
  width: auto !important;   /* shrink-to-fit so the cream hugs the text (was width:100%) */
  z-index: 2;               /* above the ::before multiply overlay */
}
/* /chapters/ grid uses narrower fixed-width cards — shrink the label to fit
   long names like "New York City". */
.chapter__snack--fixed .chapter__snack__title {
  font-size: 15px !important;
}

/* === Donate button -> red (hover stays action purple); search -> blue === */
.main-header .menu-item-26753 a,
.main-header #menu-primary-menu > li:last-child a {
  background-color: var(--af-red) !important;
}
.main-header .menu-item-26753 a:hover,
.main-header #menu-primary-menu > li:last-child a:hover {
  background-color: var(--af-purple) !important;
}
.sd-menu-search .sd-search .sd-search-button,
.sd-menu-search .sd-search input {
  background-color: var(--af-blue) !important;
}

/* Header logo: the theme outputs a bare <img> (no <a>) inside .main_logo /
   .sticky_logo. Size that <img> directly. Native PNG is 4000x954 (~4.19:1), so
   the theme's `max-height:80px` makes it ~335px wide — wider than the logo
   column, so the fixed header clips it. Constrain to 44px tall (~184px wide),
   drop the theme's 65px indent, and center it in the 80px bar (line-height +
   vertical-align) so it stays centered in BOTH the top and the scrolled/fixed
   states (header-2 toggles padding-top 45px -> 0 on scroll). */
#cshero-header-logo .main_logo,
#cshero-header-logo .sticky_logo {
  padding-left: 0 !important;
  line-height: 80px !important;
}
#cshero-header-logo .main_logo img,
#cshero-header-logo .sticky_logo img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 100% !important;
  vertical-align: middle;
}
@media (max-width: 991px) {
  #cshero-header-logo .main_logo img,
  #cshero-header-logo .sticky_logo img { height: 38px !important; max-height: 38px !important; }
}
/* At >=1200px Bootstrap shrinks the logo to col-lg-2 (~165px content) — narrower
   than the 190px logo box — and the column clips the overflow, cropping the
   wordmark. Widen the logo column just enough and hand the rest to the nav. */
@media (min-width: 1200px) {
  #cshero-header-logo.col-lg-2 { width: 230px; }
  #cshero-header-navigation.col-lg-10 { width: calc(100% - 230px); }
}

/* VC "vista-blue" buttons (the green "Become a member today!" CTA, etc.)
   -> brand blue, with the action-purple hover. */
.vc_btn3.vc_btn3-color-vista-blue,
.vc_btn3.vc_btn3-color-vista-blue.vc_btn3-style-modern {
  background-color: var(--af-blue) !important;
  background-image: none !important;
  border-color: var(--af-blue) !important;
  color: var(--af-cream) !important;
}
.vc_btn3.vc_btn3-color-vista-blue:hover,
.vc_btn3.vc_btn3-color-vista-blue:focus,
.vc_btn3.vc_btn3-color-vista-blue.vc_btn3-style-modern:hover {
  background-color: var(--af-purple) !important;
  background-image: none !important;
  border-color: var(--af-purple) !important;
  color: var(--af-cream) !important;
}

/* === Mobile === */
/* Hamburger icon -> cream */
.menu-mobile a, .menu-mobile i { color: var(--af-cream) !important; }
/* Mobile dropdown nav background -> charcoal (cream menu links sit on it).
   High z-index so it covers hero content (the subtitle has z-index:2). */
#cshero-header-navigation {
  background-color: var(--af-charcoal) !important;
  z-index: 9999 !important;
}
/* Current-page menu indicator -> blue (covers home's current_page_item, which
   the theme's rule missed and left black). Desktop + mobile. */
#cshero-header .menu-main-menu li.current-menu-item > a,
#cshero-header .menu-main-menu li.current-menu-ancestor > a,
#cshero-header .menu-main-menu li.current_page_item > a,
#cshero-header .menu-main-menu li.current-page-ancestor > a {
  color: var(--af-blue) !important;
}

/* Nav-snacks were a fixed 300px overflowing a ~230px container — fit + center */
@media (max-width: 991px) {
  .home__navsnacks { width: 100% !important; text-align: center !important; }
  .home__navsnack {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    float: none !important;
  }
  /* DONATE menu item: center the label (was padding 10px 0, left-aligned) */
  #menu-item-26753 > a,
  #menu-primary-menu > li:last-child a {
    text-align: center !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Homepage hero CTA ("CONNECT WITH AF") -> TT Commons ExtraBlack, like the nav. */
.home .home-header__cta a {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

/* Featured-content grid hover panel -> action purple (brand hover color). */
.vc_gitem-zone-b[class*="vc_custom"] {
  background-color: var(--af-purple) !important;
}

/* Header search field — typed text + placeholder -> brand cream. */
.sd-menu-search .sd-search input { color: var(--af-cream) !important; }
.sd-menu-search .sd-search input::placeholder { color: var(--af-cream) !important; opacity: 1; }
.sd-menu-search .sd-search input::-webkit-input-placeholder { color: var(--af-cream) !important; }

/* Interior page heroes (.page-title) — generic brand multiply for ANY image:
   ::before desaturates the photo (backdrop-filter) and multiplies brand blue.
   No per-image URL needed; applies to every interior hero. */
.page-title { position: relative; }
.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--af-blue);
  mix-blend-mode: multiply;
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  pointer-events: none;
}
.page-title .container,
.page-title #page-title-text,
.page-title #breadcrumb-text { position: relative; z-index: 2; }

/* ============================================================
 * BRAND "HIGHLIGHT" HEADLINE — blue display text on a cream highlight
 * that hugs each line of text (box-decoration-break: clone). Applied to
 * hero titles (homepage hero h2 + interior page-title h1).
 * ========================================================== */
.vc_cta3-content > header > h2,
.page-title h1 {
  display: inline;
  color: var(--af-blue) !important;
  background-color: var(--af-cream);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.08em 0.35em;
  line-height: 1.6 !important;   /* !important beats the VC inline line-height:1.2 so
                                    the cream bands of wrapped lines don't overlap (mobile) */
}
/* The highlighted (inline) title can't push siblings via margin, so give the
   subtitle that follows clear space below the cream band. */
.home-header h4,
.page-title .header__description {
  margin-top: 1.8em !important;
  position: relative;
  z-index: 2;
}

/* Center the homepage hero content vertically within the hero band,
   offsetting the ~100px absolute nav so it reads centered below the header. */
@media (min-width: 992px) {
  .home .home-header {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 480px;
    padding-top: 200px !important;   /* offsets the ~100px absolute nav so content centers below it */
    padding-bottom: 50px !important;
    box-sizing: border-box;
  }
}

/* Replaces the legacy orange (#fe5d4b) / teal (#7fd1b9) primaries */
.btn, .button, button, input[type="submit"],
.wp-block-button__link, .vc_btn3 {
  background-color: var(--af-blue);
  border-color: var(--af-blue);
  color: #fff;
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover, .vc_btn3:hover {
  background-color: var(--af-purple);   /* hover = action purple */
  border-color: var(--af-purple);
}

/* ============================================================
 * 5. IMAGE TREATMENTS (utility classes — kept for future/manual use)
 *    Per brand guide, these are usually baked in Photoshop by designers,
 *    but here are CSS equivalents for when we want them in-template.
 *    Wrap an image: <span class="af-img af-img--dark"><img ...></span>
 * ========================================================== */
.af-img { position: relative; display: inline-block; line-height: 0; }
.af-img > img { display: block; width: 100%; height: auto; }
.af-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* Dark Overlay — uniform charcoal @ 60% */
.af-img--dark::after { background: var(--af-charcoal-60); }

/* Fading Gradient — charcoal, transparent (top) -> 80% (bottom) */
.af-img--fade::after {
  background: linear-gradient(to bottom, rgba(27,28,30,0) 0%, var(--af-charcoal-80) 100%);
}

/* B&W Fading Gradient — desaturate the image, then fade */
.af-img--bw img { filter: grayscale(1); }
.af-img--bw::after {
  background: linear-gradient(to bottom, rgba(27,28,30,0) 0%, var(--af-charcoal-80) 100%);
}

/* Color Multiply — grayscale image + brand color in Multiply blend */
.af-img--multiply-blue img,
.af-img--multiply-red img { filter: grayscale(1); }
.af-img--multiply-blue::after { background: var(--af-blue); mix-blend-mode: multiply; }
.af-img--multiply-red::after  { background: var(--af-red);  mix-blend-mode: multiply; }