/**
 * Efe Obada Foundation — theme variant overrides
 * ==============================================================================
 *
 * Loaded ONLY on pages using the "Efe Obada Foundation" page template
 * (page-efeobada.php), after css/app.css, and scoped entirely under the
 * `.theme--efeobada` body class (see config/config-efeobada.php).
 *
 * Nothing here leaks into the default NFL Foundation theme.
 *
 * This is a hand-authored plain-CSS override (NOT compiled by Tailwind). The
 * base theme bakes its palette/fonts directly into component selectors
 * (e.g. `.heading { color: rgba(1,51,105,…) }`), so overriding standalone
 * `.bg-blue` utilities would not work — instead we re-declare the same
 * component selectors, prefixed with `.theme--efeobada` to win the cascade.
 *
 * HOW TO CUSTOMISE
 *   1. Palette  -> edit the CSS variables in the `:root`-style block below.
 *   2. Fonts    -> drop web fonts into /fonts/efeobada/, wire up the @font-face
 *                  blocks, then point the --eo-font-* variables at them.
 *   3. Masks    -> section 3 neutralises the image "mask" treatment.
 *   4. Block bg -> section 4 restyles block backgrounds.
 *
 * Base values are noted in comments as `was: <original>` for reference.
 * Values marked TODO are placeholders pending final Efe Obada brand assets.
 * ==============================================================================
 */

/* ==========================================================================
   0. Design tokens (single source of truth for the variant)
   ========================================================================== */

.theme--efeobada {
  --eo-white: #ffffff;

  --eo-legblue-100: #f7f7f8;
  --eo-legblue-200: #d1dae5;
  --eo-legblue-300: #bfcedb;
  --eo-legblue-400: #9ebad2;
  --eo-legblue-500: #4282bd;
  --eo-legblue-600: #2b68a1;
  --eo-legblue-700: #001d3c;
  --eo-legblue-800: #002751;
  --eo-legblue-900: #0a1929;
  --eo-legacyblue: var(--eo-legblue-700);

  --eo-panthblue-100: #064d74;
  --eo-panthblue-200: #b6e7ff;
  --eo-panthblue-300: #75d4ff;
  --eo-panthblue-400: #2cc1ff;
  --eo-panthblue-500: #00abf3;
  --eo-panthblue-600: #008fd4;
  --eo-panthblue-700: #0071ab;
  --eo-panthblue-800: #005e8d;
  --eo-panthblue-900: #064d74;

  --eo-green-100: #b4fed9;
  --eo-green-200: #79fcbb;
  --eo-green-300: #38f096;
  --eo-green-400: #0ed976;
  --eo-green-500: #05b45f;
  --eo-green-600: #088d4d;
  --eo-green-700: #0c6f40;
  --eo-green-800: #0c5b37;
  --eo-green-900: #004d2b;

  --eo-accent: var(--eo-green-900);
  --eo-accent-100: #e6f7fe;
  --eo-accent-200: #cceefd;

  --eo-action: var(--eo-green-900);
  --eo-action-hover: var(--eo-panthblue-500);

  --eo-menu-trigger: #64a70b;
  --eo-menu-trigger-hover: #d50a0a;

  --eo-surface: #ffffff;
  --eo-on-primary: #ffffff;
  --eo-on-green: #ffffff;
  --eo-text: var(--eo-legblue-700);

  /* --- Typography ----------------------------------------------------------*/
  --eo-font-body: "All-Pro Sans Regular", sans-serif;
  --eo-font-bold: "All-Pro Sans Bold", sans-serif;
  --eo-font-heavy: "All-Pro Sans Heavy", sans-serif;
  --eo-font-black: "All-Pro Sans Black", sans-serif;
}

/* Headline weight — the only face not already declared by css/app.css.
   Ships as OpenType only; converting to woff2/woff later would trim load size. */
@font-face {
  font-family: "All-Pro Sans Black";
  src: url("../fonts/all-prosans-black-webfont.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "All-Pro Sans Heavy";
  src: url("../fonts/all-prosans-heavy-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   1. Typography — fonts
   ========================================================================== */

/* Body copy — All-Pro Sans Regular, sentence case */
.theme--efeobada:not(.no-theme *),
.theme--efeobada p:not(.no-theme *),
.theme--efeobada ul:not(.no-theme *),
.theme--efeobada ol:not(.no-theme *),
.theme--efeobada .text--caption:not(.no-theme *),
.theme--efeobada .text--caption p:not(.no-theme *),
.theme--efeobada .text--small:not(.no-theme *),
.theme--efeobada .text--lead:not(.no-theme *),
.theme--efeobada .heading--h5:not(.no-theme *) {
  font-family: var(--eo-font-body);
}

/* Secondary — All-Pro Sans Bold, all caps */
.theme--efeobada .heading--h3:not(.no-theme *),
.theme--efeobada .heading--h4:not(.no-theme *),
.theme--efeobada .heading--h6:not(.no-theme *),
.theme--efeobada .list--number li:not(.no-theme *)::before,
.theme--efeobada .pagination a:not(.no-theme *) {
  font-family: var(--eo-font-bold);
}

/* Headlines — All-Pro Sans Black, all caps */
.theme--efeobada .heading--h1:not(.no-theme *),
.theme--efeobada .heading--h2:not(.no-theme *),
.theme--efeobada .heading--arrow:not(.no-theme *),
.theme--efeobada .btn:not(.no-theme *),
.theme--efeobada .card p:not(.citation):not(.no-theme *),
.theme--efeobada .splitlines--arrow:not(.no-theme *),
.theme--efeobada .pagination__title:not(.no-theme *) {
  font-family: var(--eo-font-bold);
}

@media (min-width: 960px) {
  .card {
    padding: 4.063rem 3.125rem;
  }
  .card blockquote:before,
  .card blockquote:after {
    width: 3.188rem;
    height: 3.813rem;
  }
  .card blockquote:before {
    top: -1.438rem;
    left: -3.875rem;
  }
  .card blockquote:after {
    bottom: -1.096rem;
    right: -3.875rem;
  }
  .card p:not(.citation) {
    font-size: 19px;
  }
}

/* ==========================================================================
   2. Palette — colour surfaces
   Re-declares every base selector that carries a hard-coded blue/red/green.
   ========================================================================== */

/* --- Body copy — near-black on light surfaces (base used primary blue) --- */
.theme--efeobada,
.theme--efeobada p,
.theme--efeobada ul,
.theme--efeobada ol {
  color: var(--eo-text);
}

/* --- Headings & primary-coloured marks ----------------------------------- */
.theme--efeobada .heading,
.theme--efeobada .list--number li:before {
  color: var(--eo-text);
}

.theme--efeobada .accordion__panel-heading p,
.theme--efeobada .accordion__panel-heading:hover svg,
.theme--efeobada .accordion__panel-heading svg {
  color: var(--eo-white);
}

.theme--efeobada .heading--h6,
.theme--efeobada .accordion__panel-heading.is-open svg {
  color: var(--eo-accent);
}

/* --- Links --------------------------------------------------------------- */
.theme--efeobada .link--fancy:after {
  background-color: var(--eo-action);
}
.theme--efeobada .link--fancy:hover,
.theme--efeobada .link--fancy:hover:after,
.theme--efeobada .social-sharing .copy-link:after {
  color: var(--eo-accent);
}
.theme--efeobada .link--fancy:hover:after {
  background-color: var(--eo-accent);
}
.theme--efeobada .link--simple {
  color: var(--eo-action);
}
.theme--efeobada .link--simple:hover {
  color: var(--eo-accent);
}

/* --- Accent shapes (keylines, list bullets, labels, dividers) ------------ */
.theme--efeobada .keyline:not(.no-theme *)::before,
.theme--efeobada .keyline:not(.no-theme *)::after,
.theme--efeobada .list--fancy li:not(.no-theme *)::after,
.theme--efeobada .card > p:first-child:not(.no-theme *)::before,
.theme--efeobada .block--image .text--caption:not(.no-theme *)::before {
  background-color: var(--eo-accent);
}
.theme--efeobada .pinned-label:not(.no-theme *) {
  background-color: var(--eo-accent-100);
}

/* --- Buttons ------------------------------------------------------------- */
.theme--efeobada .btn:not(.no-theme *),
.theme--efeobada a:not(.no-theme *) button.btn {
  background-color: var(--eo-action);
  color: var(--eo-on-primary);
}

/* On hover the fill becomes bright Panthers Blue, so switch text to dark
   Legacy Blue to keep it legible. */
.theme--efeobada .btn:not(.no-theme *):hover,
.theme--efeobada a:not(.no-theme *):hover button.btn {
  background-color: var(--eo-action-hover);
  color: var(--eo-white);
}
.theme--efeobada .btn:not(.no-theme *):hover .btn--arrow svg,
.theme--efeobada .btn--arrow:not(.no-theme *):hover svg {
  color: var(--eo-white);
}
.theme--efeobada .btn--arrow:not(.no-theme *) svg {
  color: var(--eo-on-primary);
}

.theme--efeobada .btn.btn--inverted:not(.no-theme *),
.theme--efeobada a:not(.no-theme *) button.btn.btn--inverted {
  background-color: var(--eo-white);
  color: var(--eo-green-900);
}

.theme--efeobada .btn.btn--inverted:not(.no-theme *):hover,
.theme--efeobada a:not(.no-theme *) button.btn.btn--inverted:hover {
  background-color: var(--eo-panthblue-500);
  color: var(--eo-white);
}

/* --- Heading "arrow" pill ------------------------------------------------ */
.theme--efeobada .heading--arrow {
  background-color: var(--eo-accent);
  color: var(--eo-on-primary);
}

/* --- Header (masthead + primary nav) -------------------------------------
   The Efe Obada pages keep the standard NFL navy masthead and primary nav
   from css/app.css (per the Figma frames) — only the section sub-navigation
   bar below is green. So no colour overrides here. */

#nav__subnav {
  border-bottom: 1px solid var(--eo-green-800);
}

/* Remove border on Efe-obada pages, as there is a subnav bar within the menu, and we don't want this border. */
#masthead:not(.no-theme *) {
  border-bottom: none;
}

/* Keep both burger states in the standard Foundation green, with the standard
   red rollover. These ID-specific rules override the variant button palette. */
.theme--efeobada #offcanvas--trigger {
  background-color: var(--eo-menu-trigger);
  transition: background-color 200ms ease;
}

.theme--efeobada #offcanvas--trigger:hover,
.theme--efeobada #offcanvas--trigger:focus-visible {
  background-color: var(--eo-menu-trigger-hover);
}

/* Mobile menu sub-navigation uses the Efe theme tokens. */
@media (max-width: 719px) {
  .theme--efeobada #menu-header .sub-menu li:not(.no-theme *) {
    background-color: var(--eo-green-900);
    border-color: var(--eo-green-800);
  }

  .theme--efeobada #menu-header .sub-menu a:not(.no-theme *) {
    font-family: var(--eo-font-bold);
  }

  .theme--efeobada #menu-header .sub-menu li:hover:not(.no-theme *),
  .theme--efeobada #menu-header .sub-menu .current-menu-item:not(.no-theme *) {
    background-color: var(--eo-green-700);
  }

  .theme--efeobada #menu-header .sub-menu .current-menu-item a::after:not(.no-theme *) {
    background-color: var(--eo-white);
  }
}

/* --- Header — section sub-navigation (SubNav) ----------------------------
   Structure, layout and default (NFL blue) palette live in css/subnav.css,
   loaded site-wide. Here we only re-skin the bar to Efe Obada green — the
   Figma "SubNav": green bar, hairline #0c5b37 dividers, lighter-green current
   fill (the white strike is inherited from the base). */
.theme--efeobada .subnav:not(.no-theme *) {
  background-color: var(--eo-green-900);
  border-top: none;
}
.theme--efeobada .subnav__item:not(.no-theme *) {
  border-left-color: var(--eo-green-800);
}
.theme--efeobada .subnav__link:hover:not(.no-theme *) {
  background-color: var(--eo-green-700);
}
.theme--efeobada .subnav__item.is-current .subnav__link:not(.no-theme *) {
  background-color: var(--eo-green-800);
}

/* A child that repeats its section parent's destination remains in the mobile
   accordion, but is redundant in the desktop sub-navigation. */
@media (min-width: 720px) {
  .theme--efeobada .subnav__item--section-root {
    display: none;
  }
}

/* --- Footer --------------------------------------------------------------
   Kept as the standard NFL navy footer (union-jack flag pattern) from
   css/app.css, matching the Figma frames — no colour overrides. */

/* --- Cards & features ---------------------------------------------------- */
.theme--efeobada .card,
.theme--efeobada .feature__content,
.theme--efeobada .callout--overlay {
  background-color: var(--eo-surface);
}
.theme--efeobada .feature a:hover .feature__content {
  background-color: var(--eo-accent-200);
}
.theme--efeobada .img--fallback {
  background-color: var(--eo-legblue-100);
}

/* --- Social buttons / amplify / sharing ---------------------------------- */

/* .theme--efeobada .social__item,  when not within .no-theme: */
.theme--efeobada .social__item:not(.no-theme *) {
  background-color: var(--eo-legblue-600);
  color: var(--eo-on-primary);
}

/*.theme--efeobada .social__item {
  background-color: var(--eo-legblue-600);
  color: var(--eo-on-primary);
}*/

.theme--efeobada .social-amplify,
.theme--efeobada .social-amplify__inner {
  background-color: var(--eo-action);
}
.theme--efeobada .social-amplify .social__item,
.theme--efeobada .social-amplify .btn {
  background-color: var(--eo-surface);
}
.theme--efeobada .social-amplify .btn:hover {
  background-color: var(--eo-accent);
}
.theme--efeobada .social-amplify .btn svg {
  color: var(--eo-action);
}
.theme--efeobada .social-amplify .btn:hover svg {
  color: var(--eo-on-primary);
}
.theme--efeobada .social-sharing:before,
.theme--efeobada .social-sharing:after,
.theme--efeobada .social-sharing svg {
  color: var(--eo-legblue-400);
}
.theme--efeobada .social-sharing:before,
.theme--efeobada .social-sharing:after {
  background-color: var(--eo-legblue-400);
}
.theme--efeobada .social-sharing .heading {
  color: var(--eo-legblue-500);
}
.theme--efeobada .social-sharing a:hover svg {
  color: var(--eo-legacyblue);
}

/* --- Splitlines (hero animated headline bands) --------------------------- */

.theme--efeobada .splitlines__line .splitlines__line-inner {
  color: var(--eo-on-green);
}
.theme--efeobada .splitlines__line .splitlines__line-inner:after {
  background-color: var(--eo-green-900);
}

/* --- Accordion block ----------------------------------------------------- */
.theme--efeobada .accordion__panel-heading {
  background-color: var(--eo-green-900);
  border-color: var(--eo-legblue-300);
}
.theme--efeobada .accordion__panel-heading.is-open,
.theme--efeobada .accordion__panel-content {
  background-color: var(--eo-surface);
}
.theme--efeobada .accordion__panel-heading:not(.is-open):hover {
  background-color: var(--eo-green-700);
}

/* --- CTA block ----------------------------------------------------------- */
.theme--efeobada .block--cta .blob__header .heading,
.theme--efeobada .block--cta .blob__content,
.theme--efeobada .block--cta .blob__footer {
  background-color: var(--eo-legblue-100);
}
.theme--efeobada .block--cta {
  .heading--h1,
  .heading--h2,
  .heading--h3,
  .heading--h4,
  .heading--h5,
  .heading--h6 {
    font-family: var(--eo-font-heavy);
  }
}
.theme--efeobada .block--cta p {
  color: var(--eo-legblue-900);
}

/* --- Image block caption ------------------------------------------------- */
.theme--efeobada .block--image .text--caption,
.theme--efeobada .block--image .text--caption * {
  color: var(--eo-legblue-500);
}

/* --- People block -------------------------------------------------------- */
.theme--efeobada .block--people article,
.theme--efeobada .block--people .post__content {
  background-color: var(--eo-surface);
}
.theme--efeobada .block--people .post__header {
  background-color: var(--eo-legacyblue);
}
.theme--efeobada .block--people .post__header-inner .heading {
  color: var(--eo-on-primary);
}

/* --- Video block play overlay -------------------------------------------- */
.theme--efeobada .block--video .callout__image:before {
  opacity: 0.8;
  background-color: var(--eo-action);
}
.theme--efeobada .block--video .mask--hover:hover .callout__image:before {
  opacity: 1;
  background-color: var(--eo-panthblue-500);
}

/* --- Donate block -------------------------------------------------------- */
.theme--efeobada .donate__cta {
  background-color: var(--eo-legacyblue);
}
.theme--efeobada .donate__cta h1 {
  background-color: var(--eo-action);
  color: var(--eo-on-primary);
}
.theme--efeobada .donate__cta p {
  color: var(--eo-on-primary);
}
.theme--efeobada .donate__cta a:hover h1 {
  background-color: var(--eo-accent);
}

/* --- News block ---------------------------------------------------------- */
.theme--efeobada .blob__news--small a {
  background-color: var(--eo-surface);
}

/* ==========================================================================
   3. Image mask effect — REMOVED
   The base theme tints images with a blue background, a hard-light blend mode
   and a translucent white overlay, plus angled clip-path cuts. The variant
   shows images plainly.
   ========================================================================== */

/* Kill the blue backing, the blend mode and the white overlay */
.theme--efeobada .mask {
  background-color: transparent;
}
.theme--efeobada .mask img {
  mix-blend-mode: normal;
}
.theme--efeobada .mask::after {
  content: none;
  display: none;
}

/* ==========================================================================
   4. Block backgrounds
   ========================================================================== */

/* Plain content blocks */
.theme--efeobada .block.bg-white {
  background-color: var(--eo-surface);
}

.theme--efeobada .bg-pattern-1:not(.no-theme *) {
  background: url("../images/green-bg-swirl.svg") no-repeat center center;
  background-color: var(--eo-green-900);
}

.theme--efeobada .bg-pattern-2:not(.no-theme *) {
  background: url("../images/green-bg-swirl.svg") no-repeat center center;
  background-color: var(--eo-green-900);
}

/* Keep text legible on the (now dark, solid) primary blocks */
.theme--efeobada .bg-pattern-1 .heading:not(.no-theme *),
.theme--efeobada .bg-pattern-1 .heading--h2:not(.no-theme *),
.theme--efeobada .block--header.bg-pattern-1 .heading:not(.no-theme *),
.theme--efeobada .block--news.bg-pattern-1 .block__header .heading:not(.no-theme *),
.theme--efeobada .block--image.bg-pattern-1 .text--caption:not(.no-theme *),
.theme--efeobada .block--image.bg-pattern-1 .text--caption *:not(.no-theme *) {
  color: var(--eo-on-primary);
}

/* ==========================================================================
   Obada Masthead block
   ========================================================================== */

.block--obada-masthead {
  background-color: var(--eo-green-900);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px 0px;

  svg {
    width: auto;
    height: 51px;
  }

  @media (min-width: 960px) {
    svg {
      width: auto;
      height: 77px;
    }
  }

  @media (min-width: 1440px) {
    padding: 18px 0px;
    svg {
      width: auto;
      height: 107px;
    }
  }

  .block__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.theme--efeobada .block--hero {
  @media (min-width: 1920px) {
    .splitlines {
      max-width: 39.375rem; /* matching the max-with set by app.css for the previous breakpoint */
    }
  }
}

/* ==========================================================================
   Other block overrides
   ========================================================================== */

/* Override for chevron ::before pseudo-element in Hero block */

.theme--efeobada .block--hero * {
  transition-property: none;
}

.theme--efeobada .block--hero:before {
  background-image: url("../images/icn-chevron-overlap-efe.svg");

  /* Prevent app.css global element transitions (via body *, body *:before, body *:after) from occurring on Hero image */
  .block__background {
    transition-property: none;
  }
}

.theme--efeobada .block--hero .block__content {
  .heading--h1 {
    font-family: var(--eo-font-black);
  }
  /* Force the hero content to be 100% to allow the splitlines text more space */
  .splitlines--short {
    .heading--h1 {
      width: 100% !important;
    }
  }

  .heading--h1 {
    font-size: 20px;
    line-height: 48px;
    @media (min-width: 960px) {
      font-size: 40px;
      line-height: 93px;
    }
    @media (min-width: 1440px) {
      font-size: 55px;
      line-height: 80px;
    }
  }

  .splitlines--parallelogram .splitlines__line {
    line-height: 2.7;
    @media (min-width: 720px) {
      line-height: 2.6;
    }
    @media (min-width: 960px) {
      line-height: 1.9;
    }
    @media (min-width: 1200px) {
      line-height: 1.9;
    }
    @media (min-width: 1440px) {
      line-height: 1.65;
    }
  }

  .splitlines--parallelogram {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .splitlines--parallelogram .splitlines__line-inner {
    /* 16 20 24 */
    padding: 10px 0 11px;
    @media (min-width: 720px) {
      padding: 9px 0 10px;
    }
    @media (min-width: 960px) {
      padding: 6px 0 11px;
    }
  }

  .splitlines--parallelogram .splitlines__line-inner:after {
    width: calc(100% + 1.25rem + 1.25rem);
    -webkit-clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
    clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
  }
}

.block--video {
  .card p:not(.citation) {
    font-size: 19px;
  }
  @media (min-width: 960px) {
    .card p:not(.citation) {
      font-size: 31px;
    }
  }
}

.theme--efeobada .block--content {
  p {
    font-weight: 600;
  }
  .heading--h1,
  .heading--h2,
  .heading--h3,
  .heading--h4,
  .heading--h5,
  .heading--h6 {
    font-family: var(--eo-font-black);
  }
}

/* ==========================================================================
   Accordion block overrides
   ========================================================================== */

.theme--efeobada .block--accordion {
  .heading--h1,
  .heading--h2,
  .heading--h3,
  .heading--h4,
  .heading--h5,
  .heading--h6 {
    font-family: var(--eo-font-black);

    @media (min-width: 960px) {
      max-width: 880px;
    }
    @media (min-width: 1200px) {
      max-width: 1120px;
    }
    @media (min-width: 1920px) {
      max-width: 1200px;
    }
  }
}

.theme--efeobada .accordion__panel-heading svg {
  height: 27px;
}

.theme--efeobada .accordion__panel-heading .heading--h6:empty {
  display: none;
}

@media (min-width: 720px) {
  .theme--efeobada .accordion__panel-heading svg {
    height: 31px;
    margin-bottom: -12px !important;
    margin-left: calc(50% - 26px);
  }
}
@media (min-width: 960px) {
  .theme--efeobada .accordion__panel-heading svg {
    margin-bottom: -2px !important;
    margin-left: calc(50% - 30px);
  }
}
@media (min-width: 1200px) {
  .theme--efeobada .accordion__panel-heading svg {
    margin-bottom: 0px !important;
    margin-left: calc(50% - 28px);
  }
}
@media (min-width: 1920px) {
  .theme--efeobada .accordion__panel-heading svg {
    margin-bottom: 10px !important;
    margin-left: calc(50% - 29px);
  }
}