/* ==========================================================================
   ISM FY27 Brand Layer
   ==========================================================================

   Hand-authored plain CSS. There is NO build step for this file.

   WHY THIS FILE EXISTS
   --------------------
   The SCSS pipeline in /_frontend was abandoned 2022-05-11. Since then the
   shipped bundles (abovethefold.css / cake.css / belowthefold.css) have been
   hand-edited and have drifted ~811 rule-level chunks from their SCSS source.
   Rebuilding from source would silently revert four years of hand fixes, and
   five classes now exist ONLY in the shipped CSS (mag-main-banner,
   mag-main-pre-txt, mag-main-cta, breakingnewsbanner, button--teal).

   So the three legacy bundles are FROZEN. This file layers on top of them.
   The regression guarantee for the whole rebrand is one command:

       git diff --stat origin/Development -- ISM/Static/css/abovethefold.css \
           ISM/Static/css/cake.css ISM/Static/css/belowthefold.css

   That must come back empty. If it does, no pre-existing rule changed and the
   only possible regression lives in this file.

   THE TWO RULES FOR EDITING THIS FILE
   -----------------------------------
   1. SPECIFICITY, NOT DOCUMENT ORDER. cake.css is linked mid-<body>, AFTER
      the <head> link for this file. A head-loaded sheet at equal specificity
      LOSES. So every override is written as:

          body.brand-fy27  +  the original selector, verbatim

      That adds exactly one class and is guaranteed to win. Do not "tidy" a
      selector by shortening it -- `body.brand-fy27 a` is (0,1,2) and would
      LOSE to cake.css's `.cardCollection__link:hover` at (0,2,0).

   2. ALIAS, NEVER RENAME. `button--orange` and `bgColor--orange` are
      persisted CONTENT -- the colour pickers in Business/UIDescriptors store
      the CSS class name as the property value, so published pages, drafts and
      every historical version hold those exact strings. Deleting or renaming
      a class silently breaks live pages. Add new values; never remove one.

   The `brand-fy27` class on <body> is the kill switch. Removing it from a
   layout restores that layout to the pre-refresh site exactly.

   Source of truth: "ISM Style Guide FY27" (August 2026).
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* .mce-content-body is the TinyMCE editable iframe -- a separate document,
   so it needs its own copy of the token block or editors compose blind. */
body.brand-fy27,
body.mce-content-body {

  /* --- Core brand (style guide p.10) ------------------------------------ */
  --ism-primary:        #005195;   /* ISM Blue. 8.04:1 on white -- AA/AAA   */
  --ism-primary-hover:  #003D70;
  --ism-primary-dark:   #002F59;   /* existing $ism-darkblue, nav chrome    */
  --ism-secondary:      #4AB3F0;   /* 2.33:1 -- DECORATIVE ONLY, never text */
  --ism-accent:         #CCA43B;   /* 2.35:1 -- DECORATIVE ONLY, never text */
  --ism-error:          #CC0000;

  --ism-bg-light:       #F2F2F2;
  --ism-bg-dark:        #A2A2A2;
  --ism-ink:            #1E2629;
  --ism-ink-muted:      #D0D0D0;
  --ism-hairline:       #D8D8D8;

  /* --- Audience segments (style guide p.12-16) --------------------------
     Four segments. "For Your Team" is a B2B treatment, not a fifth
     audience -- see .segment--team below.
     The -dark variants exist so the contrast debt logged against this
     rebrand is a one-line token swap, not a redesign.                     */
  --seg-foundation:       #1FB6A6;  /* 2.53:1 -- fails AA as small text     */
  --seg-foundation-light: #A6FFE9;
  --seg-foundation-dark:  #004D45;  /* 9.78:1 -- the AA-safe alternative    */

  --seg-growth:           #1E88C7;  /* 3.89:1 -- large text only           */
  --seg-growth-light:     #A6E1FF;
  --seg-growth-dark:      #003469;

  --seg-leadership:       #543D99;
  --seg-leadership-light: #BAACE6;
  --seg-leadership-dark:  #24174D;

  --seg-executive:        #2D1A40;
  --seg-executive-light:  #CEAAF2;
  --seg-executive-accent: #6C32A6;

  /* --- CTA-box colour veil (mockup section 4, right box: "Become an ISM
     Member") ---------------------------------------------------------------
     rgba twins of the solid brand colours above. Painted as a translucent
     overlay ON TOP of a background photo (see .ctaBox__bg below) so the
     photo tints toward the brand/segment colour without losing its own
     detail -- a full-strength blend mode (multiply, luminosity, ...) either
     muddies the photo or flattens it into a duotone; this reads closer to
     the mockup. .7 alpha confirmed against a live devtools test on
     Integration (started at .45, too weak -- .6 was closer but still let
     too much of the photo's own colour through); nudge here if design comes
     back wanting it lighter/heavier. */
  --ism-veil-primary:    rgba(0, 81, 149, .7);    /* --ism-primary    */
  --ism-veil-secondary:  rgba(74, 179, 240, .7);  /* --ism-secondary  */
  --seg-veil-foundation: rgba(31, 182, 166, .7);  /* --seg-foundation */
  --seg-veil-leadership: rgba(84, 61, 153, .7);   /* --seg-leadership */

  /* --- Gradients (style guide p.17) ------------------------------------- */
  --ism-grad-foundation-growth:    linear-gradient(90deg, #1FB6A6, #1E88C7);
  --ism-grad-growth-leadership:    linear-gradient(90deg, #1E88C7, #543D99);
  --ism-grad-leadership-executive: linear-gradient(90deg, #543D99, #2D1A40);
  --ism-grad-all-segments:         linear-gradient(90deg, #1FB6A6 0%, #1E88C7 33%, #543D99 66%, #2D1A40 100%);
  /* Replaces the retired $gradient-orange on .ctaBoxWithImage */
  --ism-grad-primary:              linear-gradient(#005195, #003D70);

  /* --- Segment theme channel -------------------------------------------
     These three are RE-POINTED by the .segment--* classes below. Because
     custom properties inherit, an element with no segment class falls back
     to the page-level theme with zero conditionals in C# or Razor. This is
     what lets one picker drive card borders, eyebrows, buttons, the persona
     section nav and promo tints.                                          */
  --seg-primary: var(--ism-primary);
  --seg-surface: #fff;
  --seg-ink:     var(--ism-ink);

  /* --- Shape & elevation ----------------------------------------------- */
  --ism-radius-sm:   4px;
  --ism-radius-md:   8px;
  --ism-radius-lg:   16px;   /* matches the existing .ctaBoxWithImage 1rem */
  --ism-radius-pill: 999px;
  --ism-shadow-md:   0 4px 16px rgba(30, 38, 41, .12);
  --ism-shadow-lg:   4px 4px 4rem -2px #ccc;  /* the existing literal, kept */

  /* --- Type (style guide p.7-8) ---------------------------------------- */
  --ism-font-headline: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --ism-font-body:     'Barlow', -apple-system, Helvetica, Arial, sans-serif;
  --ism-border-accent: 4px;
}

/* Segment theme classes. Named after the SEGMENT, never the colour, so a
   recolour is one line here and zero content edits. */
body.brand-fy27 .segment--foundation { --seg-primary: var(--seg-foundation); }
body.brand-fy27 .segment--growth     { --seg-primary: var(--seg-growth); }
body.brand-fy27 .segment--leadership { --seg-primary: var(--seg-leadership); }
body.brand-fy27 .segment--executive  { --seg-primary: var(--seg-executive); }

/* "For Your Team" / Corporate: the inverted ISM Blue card in the mockup.
   This is a STYLE value on the same picker, not an audience segment.
   Modelling the fill as a picker value rather than a separate IsInverted
   bool makes invalid combinations unrepresentable -- e.g. white-on-teal,
   which is 2.53:1 and badly fails AA. */
body.brand-fy27 .segment--team {
  --seg-primary: var(--ism-primary);
  --seg-surface: var(--ism-primary);
  --seg-ink: #fff;
}


/* ==========================================================================
   2. TYPOGRAPHY
   --------------------------------------------------------------------------
   Guide: Barlow Condensed Bold for headlines / subheads / CTAs (ALL CAPS),
   Barlow Condensed Regular for subheadlines, Barlow Regular for body,
   Barlow Bold for paragraph titles. Replaces Noto Sans site-wide.

   Only 12 rules in the shipped bundles name Noto Sans, and 3 of those are
   Bootstrap's stock native-font stack (:root, .tooltip, .popover) where
   "Noto Sans" is a Linux fallback -- those are deliberately left alone.
   The headline family name does not change, so no Barlow Condensed rule
   needs overriding; the loaded weights change instead.
   ========================================================================== */

body.brand-fy27 { font-family: var(--ism-font-body); }

/* abovethefold.css: `button{font-family:Noto Sans,sans-serif}` */
body.brand-fy27 button { font-family: var(--ism-font-body); }

/* abovethefold.css: `.form-control{...font-family:Noto Sans...}` */
body.brand-fy27 .form-control { font-family: var(--ism-font-body); }

/* abovethefold.css: the mobile nav close glyph. Original is (0,3,1). */
body.brand-fy27 [data-nav-main] .navbar-toggler[aria-expanded=true]:after {
  font-family: var(--ism-font-body);
}

/* cake.css re-declares Noto Sans in five places. Each needs the gate class
   because cake.css loads after this file. */
body.brand-fy27 .full-blockquote .full-blockquote__cite,
body.brand-fy27 .full-blockquote cite,
body.brand-fy27 [data-seachWithin-magazine] .searchWithin__label,
body.brand-fy27 .richTextmember__small,
body.brand-fy27 .additionalInfo__tabs .nav.nav-tabs .nav-item .nav-link,
body.brand-fy27 .cartBody__link--cart,
body.brand-fy27 .cartBody__link--email,
body.brand-fy27 .cartBody__link--print {
  font-family: var(--ism-font-body);
}

/* Headings. The reset sets h1-h6 to font-weight:400 and typography.scss then
   sets font-family with NO weight, so today every heading resolves to the
   only loaded face (Barlow Condensed 600). The guide wants Bold, so declare
   700 explicitly rather than leaving it to face-matching. */
body.brand-fy27 h1, body.brand-fy27 h2, body.brand-fy27 h3,
body.brand-fy27 h4, body.brand-fy27 h5, body.brand-fy27 h6 {
  font-family: var(--ism-font-headline);
  font-weight: 700;
}

/* Subheadline = Barlow Condensed Regular (guide p.8) */
body.brand-fy27 .subheadline,
body.brand-fy27 .h2--subheadline {
  font-family: var(--ism-font-headline);
  font-weight: 400;
}

/* Paragraph title = Barlow Bold (guide p.8) */
body.brand-fy27 .paragraph-title {
  font-family: var(--ism-font-body);
  font-weight: 700;
}


/* ==========================================================================
   3. COLOUR -- retiring the orange
   --------------------------------------------------------------------------
   67 rules across the three bundles reference #f04e23. They collapse into
   six patterns, handled in order below. Occurrences number 101; rules are
   what matter, and rules cluster.
   ========================================================================== */

/* --- 3a. Buttons ---------------------------------------------------------
   ~24 selectors, every one a .button--* / .hs-button--* variant. HubSpot
   mirrors every class as .hs-button--*, so both are always listed.        */

body.brand-fy27 .button,
body.brand-fy27 .hs-button {
  border-radius: var(--ism-radius-md);
  font-family: var(--ism-font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .8rem 1.6rem;
}

/* Solid primary. `button--orange` and `.primary` are persisted values --
   aliased, never renamed. `button--primary` and `button--solid` are the new
   semantic names for new markup. */
body.brand-fy27 .button--orange,
body.brand-fy27 .button.primary,
body.brand-fy27 .button--primary,
body.brand-fy27 .button--solid,
body.brand-fy27 .hs-button--orange,
body.brand-fy27 .hs-button.primary {
  background-color: var(--seg-primary);
  border-color: var(--seg-primary);
  color: #fff;
}
body.brand-fy27 .button--orange:hover,   body.brand-fy27 .button--orange:active,
body.brand-fy27 .button--orange:focus,   body.brand-fy27 .button--orange:link,
body.brand-fy27 .button--orange:visited,
body.brand-fy27 .button.primary:hover,   body.brand-fy27 .button.primary:active,
body.brand-fy27 .button.primary:focus,
body.brand-fy27 .button--primary:hover,  body.brand-fy27 .button--primary:active,
body.brand-fy27 .button--primary:focus,
body.brand-fy27 .button--solid:hover,    body.brand-fy27 .button--solid:active,
body.brand-fy27 .button--solid:focus,
body.brand-fy27 .hs-button--orange:hover,
body.brand-fy27 .hs-button--orange:active,
body.brand-fy27 .hs-button--orange:focus {
  background-color: var(--ism-primary-hover);
  border-color: var(--ism-primary-hover);
  color: #fff;
}

/* Outline on light. `button--ghost-orange` is the existing outline class. */
body.brand-fy27 .button--ghost-orange,
body.brand-fy27 .button--outline,
body.brand-fy27 .hs-button--ghost-orange {
  background-color: #fff;
  border-color: var(--seg-primary);
  color: var(--seg-primary);
}
body.brand-fy27 .button--ghost-orange:hover,
body.brand-fy27 .button--ghost-orange:active,
body.brand-fy27 .button--ghost-orange:focus,
body.brand-fy27 .button--outline:hover,
body.brand-fy27 .button--outline:active,
body.brand-fy27 .button--outline:focus,
body.brand-fy27 .hs-button--ghost-orange:hover,
body.brand-fy27 .hs-button--ghost-orange:active,
body.brand-fy27 .hs-button--ghost-orange:focus {
  background-color: var(--seg-primary);
  color: #fff;
}

/* Solid white on a dark/photo/gradient surface. NOTE: abovethefold.css
   defines .button--white TWICE with conflicting rules (button.scss:21 and
   :97) -- the second wins today. This collapses both into one. */
body.brand-fy27 .button--white,
body.brand-fy27 .hs-button--white {
  background-color: #fff;
  border-color: #fff;
  color: var(--ism-primary);
}
body.brand-fy27 .button--white:hover,
body.brand-fy27 .button--white:active,
body.brand-fy27 .button--white:focus,
body.brand-fy27 .hs-button--white:hover,
body.brand-fy27 .hs-button--white:active,
body.brand-fy27 .hs-button--white:focus {
  background-color: var(--ism-bg-light);
  border-color: var(--ism-bg-light);
  color: var(--ism-primary-hover);
}

/* Outline white -- the gradient-band CTA in the mockup. New value, so it
   needs its own definition rather than an alias. */
body.brand-fy27 .button--outline-white {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
body.brand-fy27 .button--outline-white:hover,
body.brand-fy27 .button--outline-white:active,
body.brand-fy27 .button--outline-white:focus {
  background-color: #fff;
  color: var(--ism-primary);
}

/* Text-link styled buttons */
body.brand-fy27 .button--arrow,   body.brand-fy27 .hs-button--arrow,
body.brand-fy27 .button--clear,   body.brand-fy27 .hs-button--clear,
body.brand-fy27 .button--link {
  color: var(--seg-primary);
}

/* Third-party add-to-calendar. The original uses !important, so this must
   too -- one of the few justified uses in this file. */
body.brand-fy27 .button.button--atc,
body.brand-fy27 .hs-button.button--atc {
  color: var(--ism-primary) !important;
  border-color: var(--ism-primary) !important;
  border-radius: var(--ism-radius-md) !important;
}

/* Five orphan button classes are used in views with ZERO css:
   button--green (x10), --blue, --outline, --clean, --teal. Because .button
   sets border-width:2px with no border-color, they inherit currentColor
   from `a{color:orange}` and today render as orange-outlined transparent
   buttons -- a live visual bug. Give them a real appearance. */
body.brand-fy27 .button--green,
body.brand-fy27 .button--blue,
body.brand-fy27 .button--teal,
body.brand-fy27 .button--clean {
  background-color: var(--seg-primary);
  border-color: var(--seg-primary);
  color: #fff;
}


/* --- 3b. Links -----------------------------------------------------------
   The base rule plus ~25 component-specific hovers in cake.css that are all
   the same idea: "link hover goes orange". Grouped rather than repeated.  */

body.brand-fy27 a { color: var(--seg-primary); }

body.brand-fy27 a.dark-link { color: var(--ism-ink); }
body.brand-fy27 a.dark-link:hover,
body.brand-fy27 a.dark-link:active,
body.brand-fy27 a.dark-link:focus { color: var(--seg-primary); }

body.brand-fy27 .link-arrow { color: var(--seg-primary); }

/* cake.css component link cluster. Each original is >=2 classes, so the
   gate class is what wins here -- not document order. */
body.brand-fy27 .cardCollection__link:hover,
body.brand-fy27 .cardCollection__link:active,
body.brand-fy27 .cardCollection__link:focus,
body.brand-fy27 .iconcard__link:hover,
body.brand-fy27 .iconcard__link:focus,
body.brand-fy27 .iconcard__link:hover .iconcard__headline,
body.brand-fy27 .iconcard__link:focus .iconcard__headline,
body.brand-fy27 .speaker__link,
body.brand-fy27 .speaker__link:hover,
body.brand-fy27 .speaker__link:active,
body.brand-fy27 .speaker__link:focus,
body.brand-fy27 .detailHeader__link,
body.brand-fy27 .productHeader__link,
body.brand-fy27 .cartBody__link,
body.brand-fy27 .article__share,
body.brand-fy27 .sessions__button,
body.brand-fy27 .agendaAtAGlance__speaker__name,
body.brand-fy27 .article__headline .article__headline__link:hover,
body.brand-fy27 .articleItemWithList__featured .article__headline a:hover,
body.brand-fy27 .articleItemWithList__featured .article__headline a:active,
body.brand-fy27 .articleItemWithList__featured .article__headline a:focus,
body.brand-fy27 .myAccount__headline a:hover,
body.brand-fy27 .esearchList .cartBody__event__title a:hover,
body.brand-fy27 .printable .cartBody__event__title a:hover,
body.brand-fy27 .author__button--print,
body.brand-fy27 .author__button--print:hover,
body.brand-fy27 .author__button--print:active,
body.brand-fy27 .author__button--print:focus {
  color: var(--seg-primary);
}

/* Pagination -- 12 selectors in cake.css, all the same colour decision. */
body.brand-fy27 .esearchList .pagination__left,
body.brand-fy27 .esearchList .pagination__page,
body.brand-fy27 .esearchList .pagination__right,
body.brand-fy27 .printable .pagination__left,
body.brand-fy27 .printable .pagination__page,
body.brand-fy27 .printable .pagination__right,
body.brand-fy27 .pagination__left--active,
body.brand-fy27 .pagination__page--active,
body.brand-fy27 .pagination__right--active,
body.brand-fy27 .pagination__left:hover,
body.brand-fy27 .pagination__left:active,
body.brand-fy27 .pagination__left:focus,
body.brand-fy27 .pagination__page:hover,
body.brand-fy27 .pagination__page:active,
body.brand-fy27 .pagination__page:focus,
body.brand-fy27 .pagination__right:hover,
body.brand-fy27 .pagination__right:active,
body.brand-fy27 .pagination__right:focus {
  color: var(--seg-primary);
}

/* Tabs */
body.brand-fy27 .additionalInfo__tabs .nav.nav-tabs .nav-item .nav-link.active,
body.brand-fy27 .additionalInfo__tabs .nav.nav-tabs .nav-item .nav-link:after,
body.brand-fy27 div.tabs-container .nav-tabs .nav-link,
body.brand-fy27 .article__boxes .article__box--active {
  color: var(--seg-primary);
}

/* Interior (left rail) nav current page */
body.brand-fy27 [data-nav-interior] .current--page,
body.brand-fy27 [data-nav-interior] .current--page a {
  color: var(--seg-primary);
}

/* My Account nav. The original carries !important. */
body.brand-fy27 .myAccountNav__account .nav-link,
body.brand-fy27 .myAccountNav__account .nav-span {
  color: var(--seg-primary) !important;
}
body.brand-fy27 .myAccountNav__account .nav-link:before {
  color: var(--seg-primary);
}


/* --- 3c. The coloured top-border motif ----------------------------------
   The site's existing "card" signature. All of these hardcode orange; all
   of them now read the segment channel, so a segment-themed page or card
   recolours its own borders with no extra markup.                        */

body.brand-fy27 .CTA,
body.brand-fy27 .card,
body.brand-fy27 .orange-component,
body.brand-fy27 .articleGrid__col--right,
body.brand-fy27 .articleRow__wrapper,
body.brand-fy27 .articleSidebar__wrapper,
body.brand-fy27 .directory__wrapper,
body.brand-fy27 .featuredEvents__wrapper,
body.brand-fy27 .agendaAtAGlance__wrapper {
  border-top-color: var(--seg-primary);
}

body.brand-fy27 .CTA .CTA__eyebrow {
  color: var(--ism-ink-muted);   /* mockup: muted grey eyebrow, not accent */
  font-family: var(--ism-font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.brand-fy27 .card,
body.brand-fy27 .orange-component {
  border-radius: var(--ism-radius-md);
}

body.brand-fy27 .myAccountHeader .orange-component:after {
  background-color: var(--seg-primary);
}


/* --- 3d. Icons ---------------------------------------------------------- */

body.brand-fy27 .icon--orange,
body.brand-fy27 .icon--orange + span,
body.brand-fy27 .esearchList__print i {
  color: var(--seg-primary);
}
body.brand-fy27 .social-bar__icon--orange { fill: var(--seg-primary); }
body.brand-fy27 .loader--orange { border-top-color: var(--seg-primary); }
body.brand-fy27 .burst__wrapper .burst__text { font-family: var(--ism-font-headline); }


/* --- 3e. Utility colour classes ----------------------------------------
   Persisted picker values. Aliased to the new palette; never removed.
   bgColor--grey exists in css but is missing from BackgroundColorFactory
   -- the factory gains it in this change.                                */

body.brand-fy27 .bgColor--orange     { background-color: var(--ism-primary); }
body.brand-fy27 .bgColor--lightblue  { background-color: var(--ism-secondary); }
body.brand-fy27 .bgColor--blue       { background-color: var(--ism-primary); }
body.brand-fy27 .bgColor--green      { background-color: var(--seg-foundation); }
body.brand-fy27 .bgColor--magenta    { background-color: var(--seg-leadership); }
body.brand-fy27 .bgColor--grey       { background-color: var(--ism-bg-light); }
body.brand-fy27 .fgColor--orange     { color: var(--ism-primary); }

/* New picker values -- the gradient band (mockup section 5) */
body.brand-fy27 .bgColor--gradient-segments        { background-image: var(--ism-grad-all-segments); }
body.brand-fy27 .bgColor--gradient-foundation      { background-image: var(--ism-grad-foundation-growth); }
body.brand-fy27 .bgColor--gradient-growth          { background-image: var(--ism-grad-growth-leadership); }
body.brand-fy27 .bgColor--gradient-leadership      { background-image: var(--ism-grad-leadership-executive); }


/* --- 3f. One-offs ------------------------------------------------------- */

/* The only gradient in the legacy CSS. Original is (0,2,0) so it needs the
   gate class to lose -- this is exactly the case that makes rule 1 above
   non-negotiable. */
body.brand-fy27 .ctaBoxWithImage.bgColor--orange { background-image: var(--ism-grad-primary); }
body.brand-fy27 .ctaBoxWithImage.bgColor--green  { background-image: var(--ism-grad-foundation-growth); }
body.brand-fy27 .ctaBoxWithImage { border-radius: var(--ism-radius-lg); }

/* FY27 -- mockup section 4 (right box, "Become an ISM Member"): when a
   background image AND a background colour are both supplied, tint the
   photo toward that colour instead of it sitting invisibly underneath an
   opaque photo. The view puts CTAColor on .ctaBox__bg itself (the element
   carrying the photo), so this maps each solid colour to its rgba veil
   token and paints that veil in a ::before ON TOP of the photo -- tried
   background-blend-mode first, but multiply muddied the photo and
   luminosity flattened it into a duotone; neither matched the mockup as
   well as a plain translucent overlay. Harmless when only one of image/
   colour is present: no colour class means no --ctaBox-veil is set, so the
   ::before paints transparent; no photo means there's nothing under the
   veil to tint. Gradient bgColor--* values aren't mapped to a veil (no
   single colour to derive one from), so that combination is unchanged: no
   tint, same as before this feature existed. */
body.brand-fy27 .ctaBox__bg.bgColor--orange,
body.brand-fy27 .ctaBox__bg.bgColor--blue      { --ctaBox-veil: var(--ism-veil-primary); }
body.brand-fy27 .ctaBox__bg.bgColor--lightblue { --ctaBox-veil: var(--ism-veil-secondary); }
body.brand-fy27 .ctaBox__bg.bgColor--green     { --ctaBox-veil: var(--seg-veil-foundation); }
body.brand-fy27 .ctaBox__bg.bgColor--magenta   { --ctaBox-veil: var(--seg-veil-leadership); }

body.brand-fy27 .ctaBox__bg[class*="bgColor--"] { position: relative; }
body.brand-fy27 .ctaBox__bg[class*="bgColor--"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ctaBox-veil, transparent);
  pointer-events: none;
}
/* Lifted above the veil explicitly -- ::before is a positioned box and would
   otherwise paint over static-flow content regardless of source order. */
body.brand-fy27 .ctaBox__bg .ctaBox__content { position: relative; z-index: 1; }

/* belowthefold.css loads AFTER this file, so these two chapter-footer rules
   need to beat both specificity and document order. Originals are (0,4,0)
   and (0,3,0); the gate class takes us to (0,5,1) and (0,4,1). */
body.brand-fy27 .footer--chapter .footer__row--bottom .social-bar--footer .social-bar__icon:hover,
body.brand-fy27 .footer--chapter .footer__row--bottom .social-bar--footer .social-bar__icon:active,
body.brand-fy27 .footer--chapter .footer__row--bottom .social-bar--footer .social-bar__icon:focus {
  fill: var(--ism-secondary);
}
body.brand-fy27 .footer--chapter .footer__row--bottom .footer__copyright .footer__link,
body.brand-fy27 .footer--chapter .footer__row--bottom .footer__copyright span {
  color: var(--ism-secondary);
}

/* Blue rail note + hero breadcrumb hover */
body.brand-fy27 .blue-rail .blue-rail__note,
body.brand-fy27 .blue-rail .blue-rail__note:after,
body.brand-fy27 [data-hero-memberfee] .breadcrumb-item a:hover {
  color: var(--seg-primary);
}


/* --- 3g. Form controls -------------------------------------------------- */

body.brand-fy27 .form-control {
  border-radius: var(--ism-radius-sm);
  border-color: var(--ism-hairline);
}
body.brand-fy27 .form-control:focus {
  border-color: var(--ism-primary);
  box-shadow: 0 0 0 3px rgba(0, 81, 149, .18);
}


/* ==========================================================================
   4. HOME PAGE NAV -- retiring the transparent-over-hero treatment
   --------------------------------------------------------------------------
   RISK 1 IN THE PLAN, AND THE MOST LIKELY WAY THIS LAUNCH LOOKS BROKEN.

   NavMain.scss gives .HomePage a nav that goes fully transparent while
   :not(.isStuck), because today's home page has a dark full-bleed hero photo
   behind it. Utility links, welcome text and the login button are #fff.

   The FY27 home page top is WHITE. Left alone that is white text on white.

   .HomePage is paired with .ConferencePage in all six of those rules;
   prefixing with .HomePage only is what SPLITS them, so Conference keeps its
   transparent hero treatment untouched.

   DELIBERATELY NOT TOUCHED: `display:flex; height:100vh` on .HomePage and
   `#rootOfObserver{overflow:auto}`. NavMain.js:45 passes #rootOfObserver as
   the IntersectionObserver `root`, which only reports intersections if that
   element is a real scroll container. Breaking it means .isStuck never
   toggles, :not(.isStuck) stays true forever, and the transparent treatment
   becomes permanent -- the exact bug this section fixes. Leave it alone.

   Likewise do NOT rename the HomePage page type or change the body class:
   NavMain.js:4 gates sticky init on it and BackToTop.js:2 reads it.
   ========================================================================== */

/* Keep the nav opaque navy at all times. White nav text is then correct, so
   the colour rules above it are deliberately left in place. */
body.brand-fy27.HomePage [data-nav-main]:not(.isStuck) .nav__wrapper--outer {
  background-color: var(--ism-primary-dark);
}

/* The hero used to be pulled up under the nav. With an opaque nav that would
   hide the first 12.8rem of the page. The nav is position:sticky here (in
   flow), so margin-bottom:0 is correct and .main keeps padding-top:0. */
body.brand-fy27.HomePage [data-nav-main] { margin-bottom: 0; }

/* The other half of the same trick, missed in the first pass: NavMain.scss
   also gives .HomePage's nav `top: -6.4rem` (desktop only, min-width:1024px)
   -- a NEGATIVE sticky offset that let the nav slide up, invisibly, into a
   tall dark hero once scrolled. There is no hero now, and the personalization
   banner in _Banner.cshtml (pre-existing, unrelated to this rebrand) can sit
   directly above the nav on this page. Past ~100px of scroll the nav would
   otherwise jump and overlap/cut into whatever precedes it -- including that
   banner. Zeroing it is the other half of retiring the transparent-hero nav. */
body.brand-fy27.HomePage [data-nav-main] { top: 0; }

/* The hex watermark belongs to the old dark hero. */
body.brand-fy27.HomePage .hex-bg { display: none; }


/* ==========================================================================
   5. NEW HOME PAGE COMPONENTS
   ========================================================================== */

/* --- 5a. Section spacing -------------------------------------------------
   The shared .component wrapper carries `padding-bottom: 12.8rem` (128px),
   which is the site's historical section rhythm. The FY27 home page is much
   tighter, so every new section overrides it. These win at (0,2,1) against
   .component at (0,1,0).                                                  */

body.brand-fy27 .homeHeadline__section { padding-bottom: 0; }
body.brand-fy27 .homeSegments          { padding-bottom: 4.8rem; }
body.brand-fy27 .gradientBand__section { padding-bottom: 0; }
body.brand-fy27 .latestArticles        { padding-bottom: 4.8rem; }
@media (max-width: 767px) {
  body.brand-fy27 .homeSegments   { padding-bottom: 2.4rem; }
  body.brand-fy27 .latestArticles { padding-bottom: 3.2rem; }
}


/* --- 5b. Headline band (mockup section 2) ------------------------------- */

body.brand-fy27 .homeHeadline {
  text-align: center;
}
body.brand-fy27 .homeHeadline__eyebrow {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ism-ink-muted);
  padding-bottom: 2.4rem;
  max-width: 82rem;
  margin: 0 auto;
}
body.brand-fy27 .homeHeadline__title { font-size: 4.8rem; padding-bottom: .8rem; }
body.brand-fy27 .homeHeadline__subtitle {
  font-family: var(--ism-font-headline);
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--ism-ink);
  padding-bottom: 0;
}
/* TeaserText is rich text (XhtmlString), and this hero's stored content
   carries an inline `style="color:white"` on its <h3> -- authored for the old
   dark-photo hero, where white text was correct. An inline style attribute
   (specificity 1,0,0,0) beats any class selector regardless of how specific,
   so the rule above never had a chance; !important is the only way to win
   here. This is the one place in the file that departs from "specificity,
   not document order," because what it's beating is inline style, not
   another stylesheet. Reused/legacy hero content can carry the same pattern,
   so this guards the whole subtitle, not just today's instance. */
body.brand-fy27 .homeHeadline__subtitle,
body.brand-fy27 .homeHeadline__subtitle * {
  color: var(--ism-ink) !important;
}
@media (max-width: 767px) {
  body.brand-fy27 .homeHeadline { padding: 3.2rem 0 2.4rem; }
  body.brand-fy27 .homeHeadline__title { font-size: 3.2rem; }
  body.brand-fy27 .homeHeadline__subtitle { font-size: 2rem; }
}

/* --- 5c. Segment cards (mockup section 3) -------------------------------
   Everything colour-bearing reads --seg-primary / --seg-surface / --seg-ink,
   so the same markup renders all four segments plus the inverted "For Your
   Team" card with no variant classes beyond .segment--*.                  */

body.brand-fy27 .segmentCard__row { padding-bottom: 4.8rem; }
body.brand-fy27 .segmentCard__col { margin-bottom: 2.4rem; display: flex; }

body.brand-fy27 .segmentCard {
  background-color: var(--seg-surface);
  color: var(--seg-ink);
  border-top: var(--ism-border-accent) solid var(--seg-primary);
  box-shadow: var(--ism-shadow-md);
  padding: 2.4rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.brand-fy27 .segmentCard__eyebrow {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--ism-ink-muted);
  padding-bottom: .8rem;
}
body.brand-fy27 .segmentCard__heading {
  font-size: 2.4rem;
  color: var(--seg-ink);
  padding-bottom: .8rem;
}
body.brand-fy27 .segmentCard__teaser {
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--seg-ink);
  flex-grow: 1;
  padding-bottom: 1.6rem;
}
/* Same reasoning as .homeHeadline__subtitle: TeaserText is rich text and can
   carry an inline colour authored for a different context. --seg-ink already
   flips per segment (dark ink on the four segment cards, white on the
   inverted "For Your Team" card), so forcing it here is correct either way --
   it neutralises a stray inline colour without hardcoding light or dark. */
body.brand-fy27 .segmentCard__teaser,
body.brand-fy27 .segmentCard__teaser * {
  color: var(--seg-ink) !important;
}
body.brand-fy27 .segmentCard__link {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--seg-primary);
}
body.brand-fy27 .segmentCard__link:hover,
body.brand-fy27 .segmentCard__link:focus { text-decoration: none; }

/* Inverted card: eyebrow, heading, teaser and link all invert together. */
body.brand-fy27 .segment--team .segmentCard__eyebrow,
body.brand-fy27 .segment--team .segmentCard__link { color: #fff; }
body.brand-fy27 .segment--team { border-top-color: #fff; }

/* --- 5d. Gradient promo band (mockup section 5) ------------------------- */

body.brand-fy27 .gradientBand {
  background-image: var(--ism-grad-all-segments);
  color: #fff;
  padding: 2rem 0;
}
body.brand-fy27 .gradientBand__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}
body.brand-fy27 .gradientBand__headline,
body.brand-fy27 .gradientBand__additional {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 2rem;
  color: #fff;
  padding-bottom: 0;
  margin-bottom: 0;
}
body.brand-fy27 .gradientBand__additional { font-weight: 400; }
/* AdditionalText is rich text and empty on every band today, so there is no
   known bad content yet -- but it is the identical shape of bug as the hero
   subtitle above (a colour authored for some other context landing here),
   so it is guarded pre-emptively rather than waited on. */
body.brand-fy27 .gradientBand__additional,
body.brand-fy27 .gradientBand__additional * {
  color: #fff !important;
}
body.brand-fy27 .gradientBand p { margin-bottom: 0; }
@media (max-width: 767px) {
  body.brand-fy27 .gradientBand__inner { flex-direction: column; gap: 1.6rem; text-align: center; }
}

/* --- 5e. Stat callouts (mockup section 7) -------------------------------
   ByTheNumbersBlock + NumbersBlock are reused as-is; this only restyles.  */

body.brand-fy27 .numbers__text--top {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 1;
  color: var(--ism-ink);
  padding-bottom: .8rem;
}
body.brand-fy27 .numbers__text--bottom {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--ism-ink-muted);
  max-width: 24rem;
  margin: 0 auto;
}
body.brand-fy27 .numbers__list__item { text-align: center; }
@media (max-width: 767px) {
  body.brand-fy27 .numbers__text--top { font-size: 4.8rem; }
  body.brand-fy27 .numbers__list__item { margin-bottom: 3.2rem; }
}

/* --- 5f. Article row (mockup section 8) ---------------------------------
   FeaturedItemWithListBlock rendered 4-up. The mockup drops the teaser
   paragraph and the category pills; both are suppressed in the template
   via flags, so nothing here needs to hide them.                          */

body.brand-fy27 .latestArticles { padding-top: 4.8rem; }
body.brand-fy27 .latestArticles__heading { text-align: center; padding-bottom: 3.2rem; }
body.brand-fy27 .latestArticles__col { margin-bottom: 2.4rem; display: flex; }

/* The card. FeaturedItem.cshtml emits .featuredItem--card in card mode, and
   cake.css already styles the bare .featuredItem, so each override below has
   to out-specify a real existing rule -- noted per rule. */
body.brand-fy27 .featuredItem--card {
  background-color: #fff;
  border-radius: var(--ism-radius-md);
  box-shadow: var(--ism-shadow-md);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;          /* cake.css .featuredItem { padding-bottom: 3.2rem } */
}

/* Image frame. cake.css sets padding-bottom on the wrapper and a drop shadow
   on the image -- both wrong inside a card that has its own shadow.
   The wrapper carries the 16:9 ratio too, so a card whose article has no
   featured image keeps the same height instead of leaving a ragged row. */
body.brand-fy27 .featuredItem--card .featuredItem__img__wrapper {
  padding-bottom: 0;
  margin-bottom: 0;
  aspect-ratio: 16 / 9;
  background-color: var(--ism-bg-light);
  overflow: hidden;
}
body.brand-fy27 .featuredItem--card .featuredItem__img__wrapper a { display: block; height: 100%; }
body.brand-fy27 .featuredItem--card .featuredItem__img__wrapper .featuredItem__img {
  box-shadow: none;           /* cake.css puts a 4rem drop shadow on this img */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta row: date + flags. cake.css gives .featuredItem__row a bottom padding
   and .featuredItem__date a right margin and 1.4rem size. */
body.brand-fy27 .featuredItem--card .featuredItem__row {
  padding: 1.6rem 1.6rem 0;
  min-height: 0;
  flex-wrap: wrap;
}
body.brand-fy27 .featuredItem--card .featuredItem__date {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ism-ink-muted);
  margin-right: 0;
}

body.brand-fy27 .featuredItem--card .article__content { padding: .8rem 1.6rem 1.6rem; }

/* cake.css: .featuredItem__headline { padding-bottom: 1.6rem } */
body.brand-fy27 .featuredItem--card .featuredItem__headline {
  padding-bottom: 0;
  font-size: 1.8rem;
}
/* cake.css has `.article__headline .article__headline__link { font-size: 2.4rem }`
   at (0,2,0), which the h3 rule above cannot beat because it targets the link
   directly. Set the size here, at (0,3,1), or card headlines render 2.4rem.
   Hover colour is already handled by the link cluster in section 3b. */
body.brand-fy27 .featuredItem--card .article__headline__link {
  line-height: 1.25;
  text-decoration: underline;
}
body.brand-fy27 .featuredItem--card .article__headline__link:hover,
body.brand-fy27 .featuredItem--card .article__headline__link:focus { text-decoration: none; }

body.brand-fy27 .latestArticles__more { display: flex; justify-content: center; }

/* Flags. SPONSORED uses the gold accent as a BACKGROUND behind dark ink,
   never as text on white -- #CCA43B is 2.35:1 and would fail AA. */
body.brand-fy27 .featuredItem--card .article__flag {
  display: inline-block;
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: var(--ism-radius-sm);
  margin-left: .8rem;
}
body.brand-fy27 .featuredItem--card .article__flag--member {
  background-color: var(--ism-primary);
  color: #fff;
}
body.brand-fy27 .featuredItem--card .article__flag--sponsored {
  background-color: var(--ism-accent);
  color: var(--ism-ink);
}

/* --- 5g. Two-up plain CTA box (mockup section 4, left half) -------------
   The image-backed variant already exists as .ctaBoxWithImage. This is the
   no-image sibling: heading, paragraph, solid + outline button pair.      */

body.brand-fy27 .ctaBox--plain { padding: 0; }
body.brand-fy27 .ctaBox--plain .ctaBox__text { padding-bottom: 2.4rem; }
body.brand-fy27 .ctaBox--plain .button__wrapper { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* .ctaBox__headline and .ctaBox__text are #fff UNCONDITIONALLY in cake.css --
   correct for the photo-overlay card (.ctaBoxWithImage) with no CTAColor set,
   which assumes a dark photo is always present, and that assumption still
   holds for the ~60 chapter sites' existing content -- so it is intentionally
   NOT touched here. But CTAColor can now also be "White" or left empty on
   THIS block (the plain, no-image variant has no photo at all; the image
   variant can be authored with an explicit White colour), and either would
   render invisible white-on-white without an override. So: invert to ink
   whenever there's no colour (.ctaBox--plain, which has no other surface) or
   colour is explicitly white -- never merely because an image is present
   without a colour, which must stay white per the paragraph above. The
   !important on ctaBox__text also guards against inline colour baked into
   that field's rich text, same reasoning as .homeHeadline__subtitle above. */
body.brand-fy27 .ctaBoxWithImage.bgColor--white .ctaBox__headline,
body.brand-fy27 .ctaBox--plain.bgColor--white .ctaBox__headline,
body.brand-fy27 .ctaBox--plain:not([class*="bgColor--"]) .ctaBox__headline {
  color: var(--ism-ink);
}
body.brand-fy27 .ctaBoxWithImage.bgColor--white .ctaBox__text,
body.brand-fy27 .ctaBoxWithImage.bgColor--white .ctaBox__text *,
body.brand-fy27 .ctaBox--plain.bgColor--white .ctaBox__text,
body.brand-fy27 .ctaBox--plain.bgColor--white .ctaBox__text *,
body.brand-fy27 .ctaBox--plain:not([class*="bgColor--"]) .ctaBox__text,
body.brand-fy27 .ctaBox--plain:not([class*="bgColor--"]) .ctaBox__text * {
  color: var(--ism-ink) !important;
}


/* ==========================================================================
   6. SECTION NAV (persona pages -- phase 5, styled now)
   --------------------------------------------------------------------------
   Reuses the existing .jumpNav shell, which is already a full-bleed sticky
   horizontal bar. Only the colour source and casing change.
   ========================================================================== */

body.brand-fy27 .sectionNav--wrapper {
  background-color: var(--seg-primary);
  position: sticky;
  top: 6.4rem;
  z-index: 2;
}
body.brand-fy27 .sectionNav__link {
  font-family: var(--ism-font-headline);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  padding: 1.4rem 2.4rem;
  display: inline-block;
}
body.brand-fy27 .sectionNav__link:hover,
body.brand-fy27 .sectionNav__link:focus { color: #fff; text-decoration: underline; }
body.brand-fy27 .sectionNav__link[data-selected=true] { box-shadow: inset 0 -4px 0 0 #fff; }
@media (max-width: 1023px) { body.brand-fy27 .sectionNav--wrapper { top: 4.8rem; } }
@media (max-width: 767px)  { body.brand-fy27 .sectionNav--wrapper { display: none; } }