/* -----------------------------------------------------------------------------
   YCG site-wide styles. Skin-level layout + shared component styles.
   Module-specific styles live inside each module's module.css.
   ----------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Raleway:wght@400;600;700&family=Inter:wght@400;500;700&display=swap');

/* Border-box, scoped to our own wrapper rather than applied with a bare `*`.

   DNN injects its editing chrome into this same document - the control panel,
   the Add Module tray, module action menus - and main.css loads after DNN's own
   stylesheets, so a global `*` reset silently restyles all of it. Everything the
   skin owns lives inside .ycg-site, so scoping costs us nothing. */
.ycg-site,
.ycg-site *,
.ycg-site *::before,
.ycg-site *::after { box-sizing: border-box; }

/* DNN's default.css resets `font: inherit` on every element including strong, em,
   b, i, small, sub, sup, code, kbd and pre - wiping their browser defaults.
   Restore them inside the skin so editor-written rich text renders correctly. */
.ycg-site strong, .ycg-site b { font-weight: 700; }
.ycg-site em, .ycg-site i { font-style: italic; }
.ycg-site small { font-size: 80%; }
.ycg-site sub, .ycg-site sup { font-size: 75%; }
.ycg-site code, .ycg-site kbd, .ycg-site samp, .ycg-site pre { font-family: monospace; }

/* -----------------------------------------------------------------------------
   Guard: authored sections must not bleed past the viewport

   The 30 authored page-title sections carry `margin:0 -32px` inline, written
   against the prototype's container, which had 32px of side padding to bleed
   into. Our panes have none, so the section ends up 64px wider than the page:
   a 32px horizontal scrollbar at EVERY width, and on a phone the browser
   responds by zooming the whole page out to fit - which is what "the site is not
   mobile responsive" turned out to mean.

   Dropping the negative margin gives exactly the intended result: background
   full width, text on the 32px gutter. Inline styles need !important to beat.

   Editors are told to build new pages by copying an existing page's Source (see
   docs/YCG-Website-User-Guide.md), so this pattern will keep arriving. Guarding
   it here rather than editing 30 rows means the copies are covered too.
   ----------------------------------------------------------------------------- */
.ycg-main section[style*="margin:0 -32px"],
.ycg-main section[style*="margin: 0 -32px"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Same story, different shape: authored content also carries pixel widths taken
   off the desktop prototype - the homepage "Our Kaupapa" card holds
   `<h2 style="width:439px; flex-shrink:0">`, which cannot shrink and so held the
   page open to 495px on a 390px phone. Capping rather than clearing the width
   leaves it alone wherever it already fits, and lets it wrap where it does not.
   Desktop is untouched: this only applies below the breakpoint. */
@media (max-width: 768px) {
  .ycg-main [style*="width:"] { max-width: 100% !important; }
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ycg-font-body);
  font-size: var(--ycg-body);
  color: var(--ycg-text-default);
  background: var(--ycg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------------
   Element-level styling is SCOPED to .ycg-site, not applied bare.

   DNN renders its editing chrome into this same document - the control panel,
   the Add Module tray, module action menus, its own dialogs - and main.css loads
   after DNN's stylesheets, so a bare `h2 { margin: 0 }` or
   `a { text-decoration: none }` silently restyles all of it. DNN's UI is built
   expecting browser defaults, and this is a strong candidate for the reported
   "Add Module loads at the bottom of the page and is hard to use".

   Everything the skin owns lives inside .ycg-site, so scoping costs us nothing.
   The one thing that must stay unscoped is html/body above: the page background
   belongs to the document, not to our wrapper.
   ----------------------------------------------------------------------------- */
.ycg-site h1, .ycg-site h2, .ycg-site h3,
.ycg-site h4, .ycg-site h5, .ycg-site h6 {
  font-family: var(--ycg-font-heading);
  font-weight: 700;
  margin: 0;
}

.ycg-site h1 { font-size: var(--ycg-h1); line-height: 1.1; }
.ycg-site h2 { font-size: var(--ycg-h2); line-height: 1.3; letter-spacing: -0.28px; }
.ycg-site h3 { font-size: var(--ycg-h3); line-height: 1.3; letter-spacing: -0.22px; }

.ycg-site p { margin: 0; line-height: 1.5; }
.ycg-site a { color: inherit; text-decoration: none; }

/* `display: block` on every image was the worst offender when it leaked: DNN's
   own toolbars lay their icons out inline. */
.ycg-site img { max-width: 100%; height: auto; display: block; }

/* -----------------------------------------------------------------------------
   Layout helpers
   ----------------------------------------------------------------------------- */
.ycg-container {
  width: 100%;
  max-width: var(--ycg-content-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.ycg-container-narrow { max-width: var(--ycg-content-narrow); }

.ycg-section { width: 100%; padding: 64px 0; }
.ycg-section--muted { background: var(--ycg-surface-light); }
.ycg-section--lighter { background: var(--ycg-surface-lighter); }

/* -----------------------------------------------------------------------------
   Buttons (shared across modules)
   ----------------------------------------------------------------------------- */
.ycg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--ycg-radius-button);
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-small);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.7px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: none;
}
/* :visited variants are explicit on every button class to override DNN's
   default.css `a, a:visited { color: #028bff }` rule (same specificity but
   DNN loads first). Without :visited, buttons flip to DNN blue after the
   user has clicked them once. */
.ycg-btn--primary,
.ycg-btn--primary:link,
.ycg-btn--primary:visited {
  background: var(--ycg-red);
  color: #ffffff;
}
.ycg-btn--primary:hover,
.ycg-btn--primary:focus,
.ycg-btn--primary:active {
  background: var(--ycg-red-hover);
  color: #ffffff;
}

.ycg-btn--outline,
.ycg-btn--outline:link,
.ycg-btn--outline:visited {
  background: var(--ycg-white);
  color: var(--ycg-red);
  border: 2px solid var(--ycg-red);
}
.ycg-btn--outline:hover,
.ycg-btn--outline:focus,
.ycg-btn--outline:active {
  background: var(--ycg-red);
  color: #ffffff;
}

.ycg-btn--outline-white,
.ycg-btn--outline-white:link,
.ycg-btn--outline-white:visited {
  background: transparent;
  color: #ffffff;
  border: 2px solid var(--ycg-white);
}
.ycg-btn--outline-white:hover,
.ycg-btn--outline-white:focus,
.ycg-btn--outline-white:active {
  background: var(--ycg-white);
  color: var(--ycg-red);
}

/* -----------------------------------------------------------------------------
   Pill (small red pill used in Hero eyebrow, dropdown headings)
   ----------------------------------------------------------------------------- */
.ycg-pill {
  display: inline-flex;
  align-items: center;
  background: var(--ycg-red);
  border-radius: var(--ycg-radius-pill);
  padding: 6px 10px;
  font-family: var(--ycg-font-body);
  font-size: var(--ycg-xsmall);
  font-weight: 700;
  color: var(--ycg-white);
  letter-spacing: 0;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Floating Donate button
   ----------------------------------------------------------------------------- */
.ycg-donate-float,
.ycg-donate-float:link,
.ycg-donate-float:visited {
  position: fixed;
  right: 32px;
  top: 430px;
  z-index: 200;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--ycg-red);
  border: 3px solid var(--ycg-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--ycg-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.22px;
  color: #ffffff;
  text-align: center;
  padding-top: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ycg-donate-float:hover,
.ycg-donate-float:active,
.ycg-donate-float:focus {
  background: var(--ycg-red-hover);
  border-color: var(--ycg-red-hover);
  color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Header (site nav)
   ----------------------------------------------------------------------------- */
/* White sticky header - designer prototype v0.7, values taken verbatim from
   NavBar.tsx lines 148-156.

   This replaced a transparent dark-gradient bar that floated OVER the hero.
   The header is now in normal flow and sticks from the outset, so the hero
   starts beneath it rather than behind it - which is the prototype's layout.

   Because it no longer overlays the hero there is no "scrolled" state to
   change to: the bar looks the same at every scroll position. The --solid and
   --stuck modifiers below are kept only so existing markup and the sticky JS
   keep working; they deliberately no longer alter the appearance. */
.ycg-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: #ffffff;
  border-top: 3px solid var(--ycg-red);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Inner-page header (Inner.ascx). Now identical to the base treatment - every
   page carries the same white bar. */
.ycg-header--solid {
  position: sticky;
  top: 0;
  padding: 16px 32px;
  background: #ffffff;
}
/* Toggled by js/main.js initStickyHeader() past 100px of scroll. Retained as a
   no-op: the header is already sticky and already white, so there is nothing
   left for this state to do. Overriding it explicitly matters - the previous
   rule set position:fixed, which would now pull the bar out of flow and let
   the hero slide up underneath it. */
.ycg-header--stuck {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 16px 32px;
}
.ycg-header__logo { width: 81px; height: 61px; flex-shrink: 0; }
.ycg-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ycg-nav-link {
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-small);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ycg-white);
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.ycg-nav-link:hover,
.ycg-nav-link[aria-current="page"] {
  background: rgba(255,255,255,0.8);
  color: var(--ycg-red);
}
.ycg-nav-link[aria-expanded="true"] {
  background: rgba(255,255,255,0.8);
  color: var(--ycg-red);
}

.ycg-nav-donate,
.ycg-nav-donate:link,
.ycg-nav-donate:visited {
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-small);
  font-weight: 700;
  letter-spacing: 0.7px;
  color: #ffffff;
  background: var(--ycg-red);
  border-radius: var(--ycg-radius-button);
  padding: 8px 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.ycg-nav-donate:hover,
.ycg-nav-donate:active,
.ycg-nav-donate:focus {
  background: var(--ycg-red-hover);
  color: #ffffff;
}

.ycg-nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--ycg-black);
  border-radius: var(--ycg-radius-card);
  padding: 32px;
  display: none;
  flex-direction: column;
  gap: 16px;
  width: 600px;
  z-index: 300;
  box-shadow: var(--ycg-shadow-dropdown);
}
.ycg-nav-dropdown--open { display: flex; }
.ycg-nav-dropdown__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ycg-nav-dropdown__item {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.28px;
  color: var(--ycg-white);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.ycg-nav-dropdown__item:hover { opacity: 0.7; }

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */
.ycg-footer {
  background: var(--ycg-white);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  padding: 44px 32px;
  width: 100%;
  box-sizing: border-box;
}
/* Grid is exactly 1000px wide, centred by parent's align-items:center. Two
   blocks (leftblock 536px + rightblock 432px + 32px gap = 1000px) sit
   side-by-side, matching App.tsx line 155-213. */
.ycg-footer__grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
  max-width: var(--ycg-content-narrow);
  flex-wrap: wrap;
}
.ycg-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
}
.ycg-footer__col-title {
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-xsmall);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  color: var(--ycg-navy);
}
.ycg-footer__col-rule {
  height: 1px;
  width: 200px;
  border-top: 1px solid var(--ycg-red);
}
.ycg-footer__link {
  display: block;
  font-family: var(--ycg-font-body);
  font-size: var(--ycg-small);
  font-weight: 400;
  line-height: 28px;
  color: var(--ycg-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
/* Footer HTML modules render inside .Normal wrappers - ensure our links still stack */
.ycg-footer__col .Normal .ycg-footer__link { display: block; }
.ycg-footer__legal .Normal { display: flex; gap: 32px; align-items: center; }
.ycg-safeguarding .Normal { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ycg-footer__link--strong { font-weight: 700; }
.ycg-footer__link:hover {
  color: var(--ycg-red);
  padding-left: 4px;
}
.ycg-footer__charity-notice {
  font-family: var(--ycg-font-body);
  font-size: var(--ycg-small);
  line-height: 28px;
  color: var(--ycg-black);
}
.ycg-safeguarding {
  background: var(--ycg-surface-muted);
  border-radius: var(--ycg-radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.ycg-safeguarding__label {
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-xsmall);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  color: var(--ycg-navy);
}
.ycg-footer__legal {
  display: flex;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: var(--ycg-content-narrow);
  margin: 0 auto;
}
.ycg-footer__legal-link {
  font-family: var(--ycg-font-heading);
  font-size: var(--ycg-xsmall);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  color: var(--ycg-navy);
  text-decoration: none;
}
.ycg-footer__rule {
  width: 100%;
  max-width: var(--ycg-content-narrow);
  margin: 32px auto;
  height: 1px;
  border-top: 1px solid var(--ycg-red);
}

/* -----------------------------------------------------------------------------
   Header content-pane wrappers (editors drop modules into these)
   ----------------------------------------------------------------------------- */
.ycg-header__navpane {
  display: flex;
  align-items: center;
  gap: 16px;   /* Figma NavBar line 426 - gap: 16 */
}
/* Top-level nav (matches Figma NavBar - white 14px/700, 1px tracking, 8px padding pill) */
.ycg-header__navpane > div > ul,
.ycg-header__navpane [id$="mainNav"] > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.ycg-header__navpane [id$="mainNav"] > ul > li {
  position: relative;
  list-style: none;
}
/* Dark text on the white bar - prototype NavBar.tsx line 182. */
.ycg-header__navpane [id$="mainNav"] li a,
.ycg-header__navpane [id$="mainNav"] li > span{
  color: #1a1a1a;
  text-decoration: none;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 14px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
/* Hover: faint red wash, red text - prototype .nav-link:hover, line 125.
   The old white wash is invisible against a white bar. */
.ycg-header__navpane [id$="mainNav"] li a:hover,
.ycg-header__navpane [id$="mainNav"] li > span:hover{
  color: var(--ycg-red);
  background: rgba(226,22,26,0.06);
}
/* Active page pill - prototype line 183, the HOME treatment. Slightly stronger
   than hover so the current page still reads as current while hovered. */
.ycg-header__navpane [id$="mainNav"] li.selected > a,
.ycg-header__navpane [id$="mainNav"] li.breadcrumb > a {
  color: var(--ycg-red);
  background: rgba(226,22,26,0.08);
}

/* WHAT WE OFFER dropdown children - hidden by default, shown on parent hover.
   Restyled with the white header (prototype v0.7): the panel is now white with
   a soft shadow rather than a black tile - NavBar.tsx lines 220-223. A black
   panel hanging off a white bar read as a different component entirely. */
/* Three tiers now: L1 in the bar, an L2 column in the panel, an L3 list flying
   out beside the hovered L2 item. Selectors are depth-explicit (`> ul > li >
   ul`) rather than the old generic `li > ul`, which matched every level at once
   and so cannot style two tiers differently.

   The panel is LEFT-anchored. The prototype revised this three times
   (v0.4-v0.6): right-anchoring made the L2 column jump sideways as the L3
   flyout widened the panel. Left-anchoring holds the column still and lets L3
   grow rightward. Do not "tidy" it back to right-aligned.

   The old hardcoded 'WHAT WE OFFER' pill is gone - with several dropdowns it
   captioned every one of them, so About and Resources would have announced
   themselves as What We Offer. */

/* ---- L2 panel ---- */
.ycg-header__navpane [id$="mainNav"] > ul > li > ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  width: 300px;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  list-style: none;
  flex-direction: column;
  gap: 2px;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);

  /* Was display:none/flex. Use visibility+opacity so a brief hover-loss can be
     forgiven with a close delay - display cannot be transitioned. */
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.15s ease 0.25s;
}
.ycg-header__navpane [id$="mainNav"] > ul > li:hover > ul,
.ycg-header__navpane [id$="mainNav"] > ul > li:focus-within > ul {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.15s ease;   /* open immediately */
}

/* Keep the rightmost menus on screen. */
.ycg-header__navpane [id$="mainNav"] > ul > li:nth-last-child(-n+2) > ul {
  left: auto;
  right: 0;
}

.ycg-header__navpane [id$="mainNav"] li > ul li { list-style: none; position: relative; }

/* ---- L2 items ---- */
/* 28px suited a single 600px tier; as a three-tier column this is a list rather
   than a headline stack, so it steps down to 16px. */
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > a,
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > span{
  color: #1a1a1a;
  background: transparent;
  text-transform: none;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  padding: 10px 12px;
  border-radius: 6px;
  white-space: normal;   /* labels wrap, keeping the column narrow - v0.6 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > a:hover,
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:hover > a,
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:hover > span {
  color: var(--ycg-red);
  background: rgba(226,22,26,0.06);
}

/* ---- L3 flyout ---- */
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul {
  position: absolute;
  top: -16px;              /* line up with the parent panel's padding box */
  left: 100%;
  width: 300px;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 310;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:hover > ul,
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:focus-within > ul { display: flex; }

/* Flip the flyout leftward when its panel is right-anchored, or it opens
   off-screen. */
.ycg-header__navpane [id$="mainNav"] > ul > li:nth-last-child(-n+2) > ul > li > ul {
  left: auto;
  right: 100%;
}

.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > a {
  color: #1a1a1a;
  background: transparent;
  text-transform: none;
  font-family: 'Raleway', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  padding: 9px 12px;
  border-radius: 6px;
  white-space: normal;
  display: block;
  width: 100%;
}
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > a:hover {
  color: var(--ycg-red);
  background: rgba(226,22,26,0.06);
}

/* L3 pages with a page icon (the News articles). YCGNav.xslt emits the icon as
   a bare <img>, which filled the panel width, so a handful of articles ran off
   the bottom of the screen. Thumbnail beside the title instead. */
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > a:has(> img) {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > a > img {
  flex: 0 0 72px;
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
/* Every new News article joins this list, so cap it at the screen height and
   let it scroll. Desktop only - on mobile it sits inside the drawer, which
   already scrolls. */
@media (min-width: 769px) {
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* Right-pointing chevron on L2 items that own an L3 list. */
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:has(> ul) > a::after,
.ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:has(> ul) > span::after{
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Down-chevron on TOP-LEVEL items with a dropdown (Figma line 449).
   Scoped to `> ul > li` deliberately: unscoped, it also matched L2 items and
   fought the right-pointing chevron defined above for those. */
.ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul) > a::after,
.ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul) > span::after{
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-left: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 0.2s;
}
.ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul):hover > a::after,
.ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul):hover > span::after{
  transform: rotate(180deg);
}

/* -----------------------------------------------------------------------------
   Footer content-pane wrappers (structural columns; content comes from HTML
   modules editors place in FooterCol1Pane..FooterCol4Pane etc.)
   ----------------------------------------------------------------------------- */
/* App.tsx line 158: leftblock is `flexShrink: 0` with inner cols row width 536 */
.ycg-footer__leftblock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 536px;
}
/* App.tsx line 187: rightblock is width 432, alignSelf stretch, justify-between */
.ycg-footer__rightblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  width: 432px;
}
/* Inner cols row - inside leftblock the row is width 536; inside rightblock
   the row is width 100% of its 432px parent */
.ycg-footer__cols {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
/* Column 1 (WHAT WE OFFER) uses flex-grow so it takes remaining width in
   its 536 row - App.tsx line 162 `flex: 1 0 0`. Other cols keep natural width.
   Scoped to the desktop row width (min-width: 901px, matching the stack
   breakpoint below) - this selector is more specific than the mobile
   `.ycg-footer__col` rule below it, so left unscoped it always won: the
   column shrank to ~40px and sat squeezed beside its sibling instead of
   wrapping onto its own line, reading as the two columns overlapping. */
@media (min-width: 901px) {
  .ycg-footer__leftblock .ycg-footer__cols > .ycg-footer__col:first-child {
    flex: 1 0 0;
    min-width: 0;
  }
}
@media (max-width: 900px) {
  /* Below 900px the two 536+432 blocks won't fit at 1000px max-width; let
     them stack. This is standard footer responsive collapse. */
  .ycg-footer__leftblock,
  .ycg-footer__rightblock { width: 100%; }

  /* Stacking the blocks was not enough: each still held a nowrap row of two
     columns, and two 200px columns plus a 32px gap need 432px. On a 390px phone
     the fourth column ran 74px past the right edge. Let the row wrap, and stop
     the 200px rule under each column heading holding the column open. */
  .ycg-footer__cols { flex-wrap: wrap; }
  .ycg-footer__col { flex: 1 1 200px; min-width: 0; }
  .ycg-footer__col-rule { width: 100%; }
}
.ycg-footer__charity {
  font-family: var(--ycg-font-body);
  font-size: var(--ycg-small);
  line-height: 28px;
  color: var(--ycg-black);
}

/* -----------------------------------------------------------------------------
   Partners marquee - matches App.tsx line 235 (30s linear infinite,
   pauses on hover). Track is duplicated in the HTML so translateX(-50%)
   loops seamlessly.
   ----------------------------------------------------------------------------- */
@keyframes ycg-partners-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.partners-track {
  display: flex;
  gap: 16px;
  align-items: center;
  animation: ycg-partners-marquee var(--ycg-marquee-duration, 30s) linear infinite;
  width: max-content;
}
.partners-track:hover { animation-play-state: paused; }
@media (max-width: 768px) {
  /* The track is the same fixed width on every device - a phone only shows
     1-2 logos at once where a desktop shows 5-6, so the configured speed
     that looks right on desktop reads as sluggish on mobile: there is far
     less visible motion per second to begin with. Run the marquee at a
     fifth of the configured duration here so mobile reads as similarly
     lively (raised from a third per client feedback - still looked slow
     there). Tune the divisor, not the admin setting, if it still needs
     adjusting after a visual check. */
  .partners-track { animation-duration: calc(var(--ycg-marquee-duration, 30s) / 5); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* -----------------------------------------------------------------------------
   Utility - number formatting (lining, proportional)
   ----------------------------------------------------------------------------- */
.ycg-lnum {
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum", "pnum";
}

/* -----------------------------------------------------------------------------
   Hero entrance animation (scope 3.1 - "any animation effects render
   smoothly"). Fades hero contents up on load with a small stagger.
   ----------------------------------------------------------------------------- */
@keyframes ycg-hero-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ycg-pane--full > .DnnModule > * > * > * > * h1,
.ycg-pane--full h1 { animation: ycg-hero-fade-in 0.7s ease-out 0.1s both; }
.ycg-pane--full h1 + p,
.ycg-pane--full h1 ~ p { animation: ycg-hero-fade-in 0.7s ease-out 0.25s both; }
.ycg-pane--full a[class*="btn"] { animation: ycg-hero-fade-in 0.7s ease-out 0.4s both; }
@media (prefers-reduced-motion: reduce) {
  .ycg-pane--full h1,
  .ycg-pane--full h1 + p,
  .ycg-pane--full h1 ~ p,
  .ycg-pane--full a[class*="btn"] { animation: none; }
}

/* -----------------------------------------------------------------------------
   Blog Carousel navigation controls (scope 3.4 - "pagination and
   navigation controls"). Prev/next arrows scroll the row by one card
   width. Dots reflect the current scroll position. JS in main.js
   (initBlogCarousel) wires it all up.
   ----------------------------------------------------------------------------- */
.ycg-carousel { position: relative; }
.ycg-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #e2161a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ycg-carousel__nav:hover { transform: translateY(-50%) scale(1.08); }
.ycg-carousel__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.ycg-carousel__nav--prev { left: 8px; }
.ycg-carousel__nav--next { right: 8px; }
.ycg-carousel__nav svg { width: 22px; height: 22px; }
.ycg-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}
.ycg-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ycg-carousel__dot--active {
  background: #e2161a;
  transform: scale(1.3);
}
@media (max-width: 600px) {
  .ycg-carousel__nav { display: none; }
}

/* -----------------------------------------------------------------------------
   Feature Content prominence indicator (scope 3.7 - "prominence
   indicators (styling variants for editors)"). Add class
   "article-title-link--featured" to any article-row to make it prominent.
   ----------------------------------------------------------------------------- */
.article-title-link--featured {
  padding: 32px;
  background: linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
  border: 2px solid #e2161a;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(226, 22, 26, 0.08);
  gap: 40px !important;
}
.article-title-link--featured .blog-card-img-wrap {
  width: 480px !important;
  height: 320px !important;
}
.article-title-link--featured h3 {
  font-size: 32px !important;
}
.article-title-link--featured::before {
  content: "FEATURED";
  position: absolute;
  top: -12px;
  left: 24px;
  background: #e2161a;
  color: #fff;
  font-family: var(--ycg-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 3px;
}
.article-title-link--featured { position: relative; }
@media (max-width: 900px) {
  .article-title-link--featured .blog-card-img-wrap {
    width: 100% !important;
    aspect-ratio: 16/9;
    height: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   Feature Box grid (scope 3.6 - "grid of contained highlight boxes").
   Configurable columns via data-columns="2|3|4" on .ycg-feature-box-grid.
   Boxes have three style variants: default, prominent, inverse (data-variant).
   ----------------------------------------------------------------------------- */
.ycg-feature-box-section {
  padding: 64px 32px;
  background: #fff;
}
.ycg-feature-box-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ycg-feature-box-heading {
  font-family: var(--ycg-font-heading);
  font-size: 32px;
  font-weight: 700;
  color: #003057;
  margin: 0 0 12px;
  text-align: center;
}
.ycg-feature-box-sub {
  font-family: var(--ycg-font-body);
  font-size: 16px;
  color: #5c6668;
  margin: 0 0 48px;
  text-align: center;
}
.ycg-feature-box-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ycg-feature-box-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.ycg-feature-box-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.ycg-feature-box-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .ycg-feature-box-grid[data-columns="2"],
  .ycg-feature-box-grid[data-columns="3"],
  .ycg-feature-box-grid[data-columns="4"] {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
.ycg-feature-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
  background: #f7f7f5;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ycg-feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.ycg-feature-box__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #e2161a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--ycg-font-heading);
}
.ycg-feature-box__title {
  font-family: var(--ycg-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #003057;
  margin: 0;
  line-height: 1.3;
}
.ycg-feature-box__body {
  font-family: var(--ycg-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: #5c6668;
  margin: 0;
  flex: 1;
}
.ycg-feature-box__link {
  font-family: var(--ycg-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #e2161a;
}
.ycg-feature-box[data-variant="prominent"] {
  background: #003057;
  color: #fff;
}
.ycg-feature-box[data-variant="prominent"] .ycg-feature-box__title,
.ycg-feature-box[data-variant="prominent"] .ycg-feature-box__body { color: #fff; }
.ycg-feature-box[data-variant="prominent"] .ycg-feature-box__link { color: #fff; }
.ycg-feature-box[data-variant="inverse"] {
  background: #e2161a;
  color: #fff;
}
.ycg-feature-box[data-variant="inverse"] .ycg-feature-box__icon {
  background: #fff;
  color: #e2161a;
}
.ycg-feature-box[data-variant="inverse"] .ycg-feature-box__title,
.ycg-feature-box[data-variant="inverse"] .ycg-feature-box__body,
.ycg-feature-box[data-variant="inverse"] .ycg-feature-box__link { color: #fff; }

/* -----------------------------------------------------------------------------
   Listing toolbar - search + result count + Load More
   Used on /News, /Articles, and any other paginated content list.
   JS in main.js (initListingPagination) wires up filtering + pagination.
   ----------------------------------------------------------------------------- */
.ycg-listing__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1000px;
  margin: 0 0 32px;
  flex-wrap: wrap;
}
.ycg-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
}
.ycg-search__label {
  display: block;
  font-family: var(--ycg-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #262e44;
  margin: 0 0 8px;
}
.ycg-search__field {
  position: relative;
  display: flex;
  align-items: center;
}
.ycg-search__icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #8b8b8b;
  pointer-events: none;
  z-index: 1;
}
.ycg-search__input {
  width: 100%;
  padding: 12px 44px 12px 42px;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  font-family: var(--ycg-font-body);
  font-size: 15px;
  color: #000;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.ycg-search__input::-webkit-search-cancel-button { display: none; }
.ycg-search__input::placeholder { color: #8b8b8b; }
.ycg-search__input:focus {
  outline: none;
  border-color: #e2161a;
  box-shadow: 0 0 0 3px rgba(226, 22, 26, 0.15);
}
.ycg-search__clear {
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #5c6668;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.ycg-search__clear:hover { background: rgba(0, 0, 0, 0.06); color: #000; }
.ycg-search--active .ycg-search__clear { display: inline-flex; }

.ycg-listing__count {
  font-family: var(--ycg-font-body);
  font-size: 14px;
  color: #5c6668;
  padding-bottom: 12px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .ycg-listing__count { padding-bottom: 0; }
}

.ycg-listing__empty {
  display: none;
  font-family: var(--ycg-font-body);
  font-size: 16px;
  color: #5c6668;
  padding: 40px 0;
  text-align: center;
}

.ycg-listing__loadmore {
  display: none;
  justify-content: center;
  margin: 40px 0 0;
}
.ycg-load-more-btn {
  padding: 12px 32px;
  border: 2px solid #e2161a;
  background: transparent;
  color: #e2161a;
  font-family: var(--ycg-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ycg-load-more-btn:hover, .ycg-load-more-btn:focus {
  background: #e2161a;
  color: #fff;
  outline: none;
}

/* -----------------------------------------------------------------------------
   Mobile menu toggle (hamburger)

   Hidden on desktop, revealed at <=768px. When clicked, JS toggles
   .ycg-header--menu-open on the <header>, which flips the nav from
   hidden-off-screen to a full-width drawer overlay under the header.
   ----------------------------------------------------------------------------- */
.ycg-nav-toggle {
  display: none; /* hidden above 768px */
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
/* Dark bars - prototype .nav-hamburger-dark, NavBar.tsx line 135. White bars
   are invisible now the bar is white. This holds when the menu is open too:
   the drawer is dark but sits BELOW the header bar, so the hamburger itself is
   always on white. */
.ycg-nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ycg-header--menu-open .ycg-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ycg-header--menu-open .ycg-nav-toggle__bar:nth-child(2) { opacity: 0; }
.ycg-header--menu-open .ycg-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   Responsive breakpoints
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ycg-header { padding: 20px; }
  .ycg-header__nav { gap: 8px; }
  .ycg-donate-float { width: 80px; height: 80px; font-size: 14px; right: 16px; }
  .ycg-nav-dropdown { width: calc(100vw - 40px); max-width: 480px; }
}
@media (max-width: 768px) {
  /* Show the hamburger; nav collapses into a drawer below the header. */
  .ycg-nav-toggle { display: flex; }
  .ycg-header { flex-wrap: wrap; align-items: center; }
  .ycg-header__nav {
    order: 10;
    flex: 0 0 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    margin-top: 12px;
  }
  .ycg-header--menu-open .ycg-header__nav {
    max-height: 80vh;
    overflow-y: auto;
    padding: 12px 0;
  }
  /* Individual nav links stack + get a bigger tap target. Colour matches the
     desktop bar per client feedback (white background, dark text, red for
     hover/selected) - only the drawer's open/close and expand/collapse
     functionality differs from desktop, not its colours. */
  .ycg-header__nav .ycg-nav-link,
  .ycg-header__nav a {
    padding: 14px 20px;
    font-size: 15px;
    letter-spacing: 1px;
    border-radius: 0;
    background: transparent;
    color: #1a1a1a;
    width: 100%;
    justify-content: flex-start;
  }
  /* The rule above loses to the desktop "dark text on white bar" rule
     (.ycg-header__navpane [id$="mainNav"] li a, li > span - higher
     specificity, see main.css search). That rule already sets the same
     #1a1a1a we want, so this override is only needed to guarantee the
     mobile value stays correct and self-contained if the desktop rule ever
     changes - not to fight it. */
  .ycg-header__navpane [id$="mainNav"] > ul > li > a,
  .ycg-header__navpane [id$="mainNav"] > ul > li > span {
    color: #1a1a1a;
  }
  /* The top-level list is still the desktop `display:flex` row (line ~500)
     with no mobile override - items wrapped onto shared rows at whatever
     width was left over, so Contact and Resources/New Home Page landed
     side-by-side instead of stacking. Force a single column. */
  .ycg-header__navpane [id$="mainNav"] > ul {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .ycg-nav-donate { margin: 8px 20px 4px; align-self: flex-start; width: auto; }
  /* The white flyout panel belongs to the desktop header only. Inside the dark
     drawer the submenu renders inline and inherits the drawer's light-on-dark
     treatment - otherwise a white card would sit in the middle of a black
     overlay. The prototype keeps the mobile menu dark and unchanged. */
  /* Both tiers flatten. Selectors mirror the desktop rules' depth on purpose:
     the desktop L2/L3 rules are deeper than a generic `li > ul li a` and would
     otherwise out-specify these and keep the text dark on the dark drawer. */
  /* L2 (the submenu directly under a top-level item) is a real collapsed-by-
     default accordion panel: main.js (initMobileNavAccordion) toggles
     .ycg-mnav-open on the <li> on click. It is NOT driven by :hover/
     :focus-within - a touch tap can leave a pseudo-class stuck on, which is
     exactly what made this look like a broken accordion before (see the
     chevron note further down). visibility/opacity neutralise the desktop
     rule's own hover-gated opacity transition (line ~565); max-height/
     overflow do the actual collapsing. */
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul {
    position: static;
    display: flex;
    width: 100%;
    max-width: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 8px 20px;
    gap: 0;
    visibility: visible;
    opacity: 1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .ycg-header__navpane [id$="mainNav"] > ul > li.ycg-mnav-open > ul {
    max-height: 4000px; /* generous cap well above any real submenu height */
  }
  /* L3 (nested inside an open L2 column) stays flattened and unconditionally
     listed - one level of accordion is enough; everything under an open
     top-level item is otherwise just a static list, same as before. */
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul {
    position: static;
    display: flex;
    width: 100%;
    max-width: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 8px 20px;
    gap: 0;
  }
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > a,
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > a,
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > span,
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > span {
    color: #1a1a1a;
    font-size: 16px;
    padding: 10px 20px;
    display: block;
  }
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > a:hover,
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:hover > a,
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li > ul > li > a:hover {
    color: var(--ycg-red);
    background: rgba(226,22,26,0.06);
  }
  /* L2's right-pointing chevron is still a desktop-only affordance - that
     tier stays flattened (no toggle), so a chevron implying further
     expansion would be misleading. */
  .ycg-header__navpane [id$="mainNav"] > ul > li > ul > li:has(> ul) > a::after {
    display: none;
  }
  /* Top-level down-chevron: the desktop rule (main.css ~line 705) rotates it
     on :hover only. On a touch device a tap can simulate :hover and leave it
     stuck rotated once focus moves elsewhere without a real mouse to
     un-hover it - that mismatch (chevron state vs actual panel state) was
     reported as "icon still showing expanded". Reset to resting position
     here and drive the rotation purely from .ycg-mnav-open, the same class
     main.js uses to open/close the panel, so the two can never disagree.
     !important is deliberate: the desktop :hover rule's selector carries one
     more pseudo-class than this one (:hover itself), so it is MORE specific
     and would otherwise keep winning here whenever :hover happens to be set -
     confirmed live, a real pointer click (not just touch) still triggers
     :hover and left the chevron rotated with no panel open. */
  .ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul) > a::after,
  .ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul) > span::after {
    transform: rotate(0deg) !important;
  }
  .ycg-header__navpane [id$="mainNav"] > ul > li.ycg-mnav-open > a::after,
  .ycg-header__navpane [id$="mainNav"] > ul > li.ycg-mnav-open > span::after {
    transform: rotate(180deg) !important;
  }
  /* Dropdowns render inline inside the drawer rather than as a floating pill */
  .ycg-nav-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    padding: 0 12px 12px 32px;
    background: transparent;
  }
}
@media (max-width: 600px) {
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }
  .ycg-section { padding: 40px 0; }
  /* /Articles article row image is fixed at 360px width - override so it
     scales inside the 375px iPhone viewport without horizontal scroll. */
  .article-title-link .blog-card-img-wrap,
  .blog-card-img-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
  .article-title-link { gap: 16px !important; }
  .article-title-link h3 { font-size: 22px !important; line-height: 1.25 !important; }
}

/* =============================================================================
   Text and Media + Meet the Team section styles
   -----------------------------------------------------------------------------
   These sections are authored as HTML in DNN's standard HTML module, so their
   styles have to live in the skin - DNN only loads a module's own module.css
   when an instance of that module is on the page, and there is none.

   The rules are identical to
     DesktopModules/MVC/YCG/TextMedia/module.css
     DesktopModules/MVC/YCG/MeetTheTeam/module.css
   and are kept so the markup is interchangeable: if the configurable modules
   are ever fixed, they emit the same classes and the styling still applies.
   ============================================================================= */
.ycg-tm {
  position: relative;
  width: 100%;
  padding: 72px 32px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  font-family: 'Raleway', 'Segoe UI', Arial, sans-serif;
}

/* Tint over image backgrounds, for legibility. Sits under the content. */
.ycg-tm__tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ycg-tm__inner {
  position: relative;   /* lifts content above the tint */
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Split: two equal columns -------------------------------------------
   50/50 is a settled design decision (prototype 5.11), not a default to tune. */
.ycg-tm--split .ycg-tm__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ycg-tm--media-left  .ycg-tm__media { order: 1; }
.ycg-tm--media-left  .ycg-tm__text  { order: 2; }
.ycg-tm--media-right .ycg-tm__media { order: 2; }
.ycg-tm--media-right .ycg-tm__text  { order: 1; }

.ycg-tm--center .ycg-tm__text { text-align: center; }
.ycg-tm--center .ycg-tm__buttons { justify-content: center; }

/* ---- Media frame ---------------------------------------------------------
   A fixed-ratio box: padding-top (set inline from the chosen ratio) holds the
   height open, and the image is absolutely positioned and cropped to fill.
   This is the author-proofing - whatever staff upload, the columns stay
   balanced. "natural" opts out for posters and infographics. */
.ycg-tm__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
}
.ycg-tm__frame .ycg-tm__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ycg-tm__frame--natural { padding-top: 0 !important; }
.ycg-tm__frame--natural .ycg-tm__img {
  position: static;
  height: auto;
  object-fit: contain;
}

.ycg-tm__caption {
  margin: 12px 0 0;
  text-align: left;          /* left-aligned regardless of the block - 5.3 */
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
}

/* ---- Play button ---------------------------------------------------------
   States are here, not inline, so hover and focus actually apply. */
.ycg-tm__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border: none;
  border-radius: 50%;
  background: var(--ycg-red, #e2161a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.ycg-tm__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.ycg-tm__play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.ycg-tm__play-icon {
  width: 0; height: 0;
  margin-left: 6px;                       /* optically centres the triangle */
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid #fff;
}

/* ---- Text ---------------------------------------------------------------- */
.ycg-tm__eyebrow {
  display: inline-block;
  background: var(--ycg-red, #e2161a);
  color: #fff;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.ycg-tm__title {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
}
/* Heading level sets size as well as tag - prototype 5.5 */
h1.ycg-tm__title { font-size: 44px; }
h2.ycg-tm__title { font-size: 34px; }

.ycg-tm__quote {
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 4px solid var(--ycg-red, #e2161a);
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
}

.ycg-tm__body {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.ycg-tm__body:last-of-type { margin-bottom: 0; }

/* ---- Buttons ------------------------------------------------------------- */
.ycg-tm__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.ycg-tm__btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 12px 22px;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Every colour rule below is scoped with .ycg-tm, and it has to be.
   These buttons are <a> elements, and the site-wide

       .ycg-site a { color: inherit; }

   is one class plus an element - specificity (0,1,1) - so it beats any
   single-class rule like .ycg-tm__btn--primary (0,1,0) and forces the button to
   inherit its section's colour. That is why the primary button rendered dark
   text on red, and why a secondary written as one class rendered white on white
   and vanished. Adding the container class takes these to (0,2,0), above the
   link rule. Anything that sets colour on these buttons needs the same. */
.ycg-tm .ycg-tm__btn--primary {
  background: var(--ycg-red, #e2161a);
  color: #fff;
}
.ycg-tm .ycg-tm__btn--primary:hover { background: var(--ycg-red-hover, #c0100f); color: #fff; }
/* Secondary: white fill, red text, red border; fills red on hover.
   Reported from testing as "secondary button is of white background and turns
   red when hover over, whereas it shows transparent with white border and turns
   white on hover".

   It used to inherit the section's light/dark choice - transparent with a white
   outline on dark backgrounds, transparent with a dark outline on light ones -
   which is a different button from the one every other module draws. The shared
   helper has always said white fill, red text, red border (Markup.Button, the
   "outline" variant), so this stops Text and Media being the odd one out rather
   than inventing a third treatment.

   Deliberately not split by light/dark any more. A white-filled button reads on
   a dark background, and on a light one the red border and red text carry it -
   the same way the shared button behaves everywhere else on the site. */
.ycg-tm .ycg-tm__btn--secondary {
  background: #fff;
  color: var(--ycg-red, #e2161a);
  border-color: var(--ycg-red, #e2161a);
}
.ycg-tm .ycg-tm__btn--secondary:hover {
  background: var(--ycg-red, #e2161a);
  color: #fff;
  border-color: var(--ycg-red, #e2161a);
}
.ycg-tm__btn:focus-visible { outline: 3px solid var(--ycg-red, #e2161a); outline-offset: 2px; }

/* ---- Light / dark text --------------------------------------------------
   Chosen server-side from the background (see MediaHelpers). Text and caption
   follow the section's choice; the secondary button no longer does - see above. */
.ycg-tm--dark  { color: #1a1a1a; }

.ycg-tm--light { color: #ffffff; }
.ycg-tm--light .ycg-tm__title,
.ycg-tm--light .ycg-tm__body,
.ycg-tm--light .ycg-tm__quote,
.ycg-tm--light .ycg-tm__caption { color: #ffffff; }

/* ---- Video lightbox ------------------------------------------------------
   Markup is created by js/main.js on first use. */
.ycg-tm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  padding: 24px;
}
.ycg-tm-lightbox[hidden] { display: none; }
.ycg-tm-lightbox__player {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.ycg-tm-lightbox__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ycg-tm-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.ycg-tm-lightbox__close:hover { color: var(--ycg-red, #e2161a); }
.ycg-tm-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Responsive ----------------------------------------------------------
   The prototype stacks at 820px and left the breakpoint to us ("whatever is
   safest"). Using 768px to match the breakpoint the rest of the site already
   uses, rather than introducing a third one between 900 and 768.

   Media goes ON TOP when stacked, regardless of MediaPosition - prototype 5.7. */
@media (max-width: 768px) {
  .ycg-tm { padding: 48px 20px; }
  .ycg-tm--split .ycg-tm__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ycg-tm--split .ycg-tm__media,
  .ycg-tm--media-left .ycg-tm__media,
  .ycg-tm--media-right .ycg-tm__media { order: 1; }
  .ycg-tm--split .ycg-tm__text,
  .ycg-tm--media-left .ycg-tm__text,
  .ycg-tm--media-right .ycg-tm__text { order: 2; }

  h1.ycg-tm__title { font-size: 32px; }
  h2.ycg-tm__title { font-size: 26px; }
  .ycg-tm__body { font-size: 16px; }
  .ycg-tm__play { width: 60px; height: 60px; }
  .ycg-tm__play-icon { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 17px; }
}

.ycg-mtt {
  padding: 72px 0;
  font-family: 'Raleway', 'Segoe UI', Arial, sans-serif;
  overflow: hidden;      /* contains the full-bleed row */
}

/* Heading block is constrained; the row below is not. This is what lines the
   first card up under the heading while the row still bleeds off-screen. */
.ycg-mtt__head {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 32px;
}

.ycg-mtt__eyebrow {
  display: inline-block;
  background: var(--ycg-red, #e2161a);
  color: #fff;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.ycg-mtt__title {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #1a1a1a;
}

.ycg-mtt__intro {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  max-width: 720px;
}

/* ---- Scroll row ---------------------------------------------------------- */
.ycg-mtt__scroller { position: relative; max-width: 1200px; margin: 0 auto; }

.ycg-mtt__row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  /* Left inset aligns the first card with the heading; the row itself runs to
     the right edge. Vertical padding gives the card shadows room. */
  padding: 12px 32px 24px;
  max-width: 1200px;
  margin: 0 auto;

  /* Hide the scrollbar - the prev/next buttons are the affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ycg-mtt__row::-webkit-scrollbar { display: none; }


/* ---- Card ---------------------------------------------------------------- */
.ycg-mtt__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ycg-mtt__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

.ycg-mtt__portrait {
  position: relative;
  width: 100%;
  padding-top: 118%;         /* fixed portrait frame - any upload size works */
  overflow: hidden;
  background: #f0f0f0;
}
.ycg-mtt__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Bio panel ----------------------------------------------------------
   Slides up over the portrait. Shows the bio only - name and role are already
   on the card below (v0.8). */
.ycg-mtt__bio {
  position: absolute;
  inset: 0;
  background: rgba(38, 46, 68, 0.96);
  color: #fff;
  padding: 22px;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.28s ease;
}
.ycg-mtt__bio[hidden] {
  display: block;            /* keep it laid out so it can animate */
  transform: translateY(100%);
}
.ycg-mtt__card--open .ycg-mtt__bio { transform: translateY(0); }

.ycg-mtt__bio-text { font-size: 15px; line-height: 1.6; }
.ycg-mtt__bio-text p { margin: 0 0 12px; }
.ycg-mtt__bio-text p:last-child { margin-bottom: 0; }

/* ---- Card meta ----------------------------------------------------------- */
.ycg-mtt__meta { padding: 18px 22px 22px; }

.ycg-mtt__name {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #1a1a1a;
}
.ycg-mtt__role {
  font-size: 14px;
  color: #5c6668;
  margin: 0 0 14px;
}

.ycg-mtt__biobtn {
  background: transparent;
  border: 2px solid var(--ycg-red, #e2161a);
  color: var(--ycg-red, #e2161a);
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ycg-mtt__biobtn:hover { background: var(--ycg-red, #e2161a); color: #fff; }
.ycg-mtt__biobtn:focus-visible { outline: 3px solid var(--ycg-red, #e2161a); outline-offset: 2px; }

/* ---- Prev / next (overlaid, same style as Blog Carousel) ----------------- */
.ycg-mtt__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #e2161a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ycg-mtt__nav:hover { transform: translateY(-50%) scale(1.08); }
.ycg-mtt__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.ycg-mtt__nav--prev { left: 8px; }
.ycg-mtt__nav--next { right: 8px; }
.ycg-mtt__nav svg { width: 22px; height: 22px; }
.ycg-mtt__nav:focus-visible { outline: 3px solid var(--ycg-red, #e2161a); outline-offset: 3px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .ycg-mtt { padding: 48px 0; }
  .ycg-mtt__head { padding: 0 20px; }
  .ycg-mtt__row { padding: 12px 20px 24px; }
  .ycg-mtt__nav { display: none; }
  .ycg-mtt__title { font-size: 26px; }
  .ycg-mtt__card { flex-basis: 240px; }
}

/* =============================================================================
   DNN edit mode - get our own chrome out of DNN's way

   DNN puts .dnnEditState on <body> whenever a page is being edited. Two pieces
   of this skin are positioned out of the document flow and sit exactly where DNN
   wants to work:

     .ycg-header       sticky at the top, z-index 200 - it covers the action
                       icons and the settings menu of whichever module is first
                       on the page.
     .ycg-donate-float fixed at right: 32px, top: 430px, 120x120 - it sits over
                       the right-hand side of the page where DNN opens panels.

   Neither matters while editing, so neither is shown. Visitors are unaffected:
   this block only applies inside the editor.
   ============================================================================= */
body.dnnEditState .ycg-header,
.dnnEditState .ycg-header {
  position: static;
}

body.dnnEditState .ycg-donate-float,
.dnnEditState .ycg-donate-float {
  display: none;
}

/* -----------------------------------------------------------------------------
   Bring DNN's own module dialog back on screen

   "Add Module" opens .dnnModuleDialog, which DNN styles position:absolute and
   then centres in the DOCUMENT rather than the viewport. Measured on dev: a
   5,981px homepage put the dialog 2,750px down - exactly half the document - so
   an editor at 100% zoom saw nothing at all, and at 25% zoom saw a small box
   floating in the middle of the page.

   Not our doing: it reproduces on DNN's stock Aperture theme on a page that
   loads none of our CSS or JavaScript, and the platform and Persona Bar packages
   are both 10.2.5, so it is not a version mismatch either. It only becomes
   visible on long pages, which is why a normal DNN site rarely shows it - and
   why this site shows it on every page.

   Fixing it here rather than waiting on a platform upgrade: the dialog is
   pinned to the viewport instead. left is a calc rather than a transform because
   the dialog carries its own width, and the mask is pinned too or it scrolls
   away from the dialog it is meant to be masking.

   Scoped to edit mode, so no visitor ever loads a rule that touches DNN's UI.
   If a DNN upgrade fixes the positioning, this block can go - check by removing
   it and clicking Add Module on the homepage.
   ----------------------------------------------------------------------------- */
body.dnnEditState .dnnModuleDialog {
  position: fixed !important;
  top: 6vh !important;
  left: calc(50% - 323px) !important;   /* dialog is 646px wide */
  max-height: 85vh !important;
  overflow-y: auto !important;
}

body.dnnEditState .dnnDialogMask {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 760px) {
  body.dnnEditState .dnnModuleDialog {
    left: 2% !important;
    width: 96% !important;
  }
}

/* =============================================================================
   Text and Media - fixed height treatments

   So the module can stand in for a hero or a slim banner, which is why the
   client retired the separate Hero Banner module. The numbers are theirs.

   min-height, not height: content taller than the band grows it rather than
   spilling out. The inner block centres itself vertically in the space.
   ============================================================================= */
.ycg-tm--h-hero,
.ycg-tm--h-small { display: flex; align-items: center; }

.ycg-tm--h-hero > .ycg-tm__inner,
.ycg-tm--h-small > .ycg-tm__inner { width: 100%; }

.ycg-tm--h-hero { min-height: 578px; }
.ycg-tm--h-small { min-height: 221px; }

@media (max-width: 768px) {
  /* A 578px band on a phone is most of the screen before any content shows.
     Keep the treatment, lose the excess. */
  .ycg-tm--h-hero { min-height: 380px; }
  .ycg-tm--h-small { min-height: 160px; }
}

/* -----------------------------------------------------------------------------
   Small label (eyebrow) - let a long one wrap

   Reported from testing: "when added a big phrase in Small label the label
   background didn't adjust on the page accordingly". The pill was
   white-space: nowrap, so a long phrase ran straight out of its own background
   instead of wrapping inside it.
   ----------------------------------------------------------------------------- */
.ycg-pill,
.ycg-fc__eyebrow,
.ycg-tm__eyebrow {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* =============================================================================
   Edit mode: show modules that have no content yet

   "I select a pane, add module, it runs a progress bar and closes. But nothing."

   The module was being added correctly every time. It was invisible. A newly
   added module has no content, and our containers are none.ascx - no title bar,
   no border, no chrome - so it renders as literally this:

       <div class="DnnModule DnnModule-DNN_HTML DnnModule-621"><a name="621"></a></div>

   A zero-height empty div. Nothing to see, and nothing to hover over to get the
   pencil, so an editor cannot even reach the action menu to give it content. Both
   the tester and Barend read that as "add module does not work", which is a fair
   reading of what the screen showed them.

   In edit mode only: outline every module so its extent is visible, and give an
   empty one a labelled block big enough to hover and click. The :has() selector
   matches a module whose only child is DNN's anchor - which is exactly what an
   empty one renders as.

   Visitors see none of this.
   ============================================================================= */
body.dnnEditState .DnnModule {
  outline: 1px dashed rgba(38, 46, 68, 0.35);
  outline-offset: 2px;
  min-height: 24px;
}

body.dnnEditState .DnnModule:has(> a[name]:only-child) {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg,
              rgba(226, 22, 26, 0.04) 0 12px, rgba(226, 22, 26, 0.10) 12px 24px);
  outline-color: var(--ycg-red, #e2161a);
}

body.dnnEditState .DnnModule:has(> a[name]:only-child)::after {
  content: "Empty module - hover here and use the pencil to add content";
  font-family: var(--ycg-font-body, sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: #262e44;
  text-align: center;
  padding: 0 16px;
}

/* -----------------------------------------------------------------------------
   The same problem again, for our own modules.

   The rule above matches a module whose only child is DNN's anchor, which is
   what an unconfigured HTML module renders as. Our custom modules do not look
   like that. A freshly added News module renders its full wrapper chain with
   nothing inside it:

       <div class="DnnModule DnnModule-630"><a name="630"></a>
         <div id="dnn_ctr630_ContentPane">
           <div id="dnn_ctr630_ModuleContent" class="DNNModuleContent ModYCGArticleListC">   </div>
         </div></div>

   The anchor is not an only child, so the rule above misses it and the module
   falls back to the plain 24px outline - a thin blank strip. Invisible again,
   for the same reason, one layer along.

   Match on the content wrapper having no elements in it instead. `:empty` is no
   use here: the wrapper holds whitespace, which counts as a child node.
   `:not(:has(*))` asks the question that actually matters - is there any element
   inside - and whitespace does not trip it. `:has()` cannot be nested inside
   another `:has()`, which is why this targets `.DNNModuleContent` directly
   rather than the module that contains it.

   This covers every custom module, not just News: any of them added and not yet
   configured renders exactly this shape.
   ----------------------------------------------------------------------------- */
body.dnnEditState .DNNModuleContent:not(:has(*)) {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg,
              rgba(226, 22, 26, 0.04) 0 12px, rgba(226, 22, 26, 0.10) 12px 24px);
  outline: 1px dashed var(--ycg-red, #e2161a);
  outline-offset: 2px;
}

/* Named by main.js when it can, so four empty News modules read as four
   different things rather than four identical stripes. The generic sentence
   stays as the fallback for when the script has not run yet. */
body.dnnEditState .DNNModuleContent:not(:has(*))[data-empty-label]::after {
  content: attr(data-empty-label);
}

body.dnnEditState .DNNModuleContent:not(:has(*))::after {
  content: "Module added but not configured yet - hover here and use the pencil to set it up";
  font-family: var(--ycg-font-body, sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: #262e44;
  text-align: center;
  padding: 0 16px;
}

/* =============================================================================
   News index (YCG - News Index module)

   Search, category pills, a three-wide card grid and numbered pages, matching
   Alex's design for /News. Class names are emitted by NewsListingView.cs and
   read by initNewsListing() in main.js - structure, not decoration.

   Every colour rule on an <a> here is scoped by an ancestor class on purpose:
   .ycg-site a { color: inherit } is (0,1,1) and beats any single-class rule, so
   a bare .ycg-news__more would silently inherit its section colour. That already
   cost us a white-on-white button once.
   ============================================================================= */
.ycg-news__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.ycg-news__title {
  font-family: var(--ycg-font-heading, 'Montserrat', sans-serif);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.ycg-news__intro {
  font-size: 16px;
  line-height: 1.5;
  color: #5c6668;
  margin: 0 0 24px;
}

/* ---- Controls ---- */
.ycg-news__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0 8px;
}

.ycg-news__search { flex: 0 1 380px; min-width: 220px; }

.ycg-news__input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 15px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #d7dbdd;
  border-radius: 999px;
}
.ycg-news__input:focus-visible {
  outline: 3px solid var(--ycg-red, #e2161a);
  outline-offset: 2px;
}

.ycg-news__srOnly {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ycg-news__filters { display: flex; flex-wrap: wrap; gap: 8px; }

.ycg-news__pill {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #d7dbdd;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ycg-news__pill:hover { border-color: var(--ycg-red, #e2161a); }
.ycg-news__pill.is-active {
  background: var(--ycg-red, #e2161a);
  border-color: var(--ycg-red, #e2161a);
  color: #fff;
}

.ycg-news__count {
  font-size: 14px;
  color: #5c6668;
  margin: 16px 0 20px;
  min-height: 1em;      /* holds its line so the grid does not jump when it clears */
}

/* ---- Grid ---- */
.ycg-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1000px) { .ycg-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ycg-news__grid { grid-template-columns: 1fr; } }

.ycg-news__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.05);
}
.ycg-news__card[hidden] { display: none; }

.ycg-news__imgWrap { display: block; aspect-ratio: 16 / 10; background: #e9ecee; }
.ycg-news__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ycg-news__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }

.ycg-news__meta { display: flex; align-items: center; gap: 10px; margin: 0; }

.ycg-news__chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--ycg-red, #e2161a);
  padding: 4px 10px;
  border-radius: 4px;
}

.ycg-news__date { font-size: 13px; color: #5c6668; }

.ycg-news__heading { font-family: var(--ycg-font-heading, 'Montserrat', sans-serif);
  font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; }
.ycg-news .ycg-news__heading a { color: #1a1a1a; text-decoration: none; }
.ycg-news .ycg-news__heading a:hover { text-decoration: underline; }

.ycg-news__excerpt {
  font-size: 15px; line-height: 1.55; color: #5c6668; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.ycg-news .ycg-news__more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ycg-red, #e2161a);
  text-decoration: none;
}
.ycg-news .ycg-news__more:hover { text-decoration: underline; }

.ycg-news__empty { font-size: 16px; color: #5c6668; padding: 32px 0; margin: 0; }

/* ---- Numbered pages ---- */
.ycg-news__pager { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 36px 0 0; }

.ycg-news__page {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  min-width: 40px;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid #d7dbdd;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}
.ycg-news__page:hover:not(:disabled) { border-color: var(--ycg-red, #e2161a); }
.ycg-news__page.is-current {
  background: var(--ycg-red, #e2161a);
  border-color: var(--ycg-red, #e2161a);
  color: #fff;
}
.ycg-news__page:disabled { opacity: .45; cursor: default; }

/* -----------------------------------------------------------------------------
   News carousel: hide the horizontal scrollbar.

   The module sets overflow-x:auto inline so the row can be swiped, which on
   desktop leaves a scrollbar sitting under the cards. The prev/next buttons and
   the dots are the affordance here, so the bar is noise - and it drew a grey
   line across the full width of the section.

   Scrolling itself is untouched: swipe, trackpad and the arrow buttons all still
   work. Same treatment as .ycg-mtt__row.
   ----------------------------------------------------------------------------- */
.blog-scroll {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge */
}
.blog-scroll::-webkit-scrollbar { display: none; }

/* -----------------------------------------------------------------------------
   Footer columns built with the Footer Column module.

   The links themselves already have styling - .ycg-footer__link, set to
   display:block so they stack. These rules only handle the list wrapper and its
   markers, which the hand-written HTML never had: it used <ul><li> but the
   block-level anchors meant no bullet was ever visible, so "no bullets" is the
   current look and stays the default.

   Bullets are drawn with ::before rather than list-style, because the anchor is
   display:block and a real marker sits awkwardly against it - and because dash
   and arrow are not list-style values at all.
   ----------------------------------------------------------------------------- */
.ycg-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ycg-footer__list li { margin: 0; padding: 0; }

.ycg-footer__list--bullet li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ycg-footer__list--bullet li::before {
  color: var(--ycg-red, #e2161a);
  font-size: 12px;
  line-height: 28px;          /* matches .ycg-footer__link so the marker sits on the text */
  flex: 0 0 auto;
}

.ycg-footer__list--disc   li::before { content: "\2022"; }   /* • */
.ycg-footer__list--circle li::before { content: "\25E6"; }   /* ◦ */
.ycg-footer__list--square li::before { content: "\25AA"; }   /* ▪ */
.ycg-footer__list--dash   li::before { content: "\2013"; }   /* – */
.ycg-footer__list--arrow  li::before { content: "\2192"; }   /* → */

/* The hover nudge on a link would otherwise shift the text away from its marker. */
.ycg-footer__list--bullet .ycg-footer__link:hover { padding-left: 0; }

/* =============================================================================
   Floating side button (YCG - Floating Button module)

   The module version of .ycg-donate-float above. That one is a line in Home.ascx
   with its wording and address baked in, so it exists on one page and cannot be
   edited; this one goes wherever an editor puts it.

   Colour, size and side vary per instance, so they arrive as custom properties on
   the element itself - a module cannot write a rule into this stylesheet, and two
   buttons on one page would need two rules.

   position:fixed takes it out of the flow, so the pane it is dropped into makes no
   difference to where it appears.
   ============================================================================= */
.ycg-float,
.ycg-float:link,
.ycg-float:visited {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--ycg-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.22px;
  padding: 6px 12px 0;
  background: var(--float-bg, var(--ycg-red));
  border: 3px solid var(--float-bg, var(--ycg-red));
  color: var(--float-fg, #ffffff);
  transition: filter .15s ease, transform .15s ease;
}

.ycg-float--right { right: 32px; }
.ycg-float--left  { left: 32px; }

.ycg-float--circle {
  width: var(--float-size, 120px);
  height: var(--float-size, 120px);
  border-radius: 50%;
}

/* A pill sizes to its wording rather than to a diameter, so long text stays on
   one line instead of being squeezed into a circle. */
.ycg-float--pill {
  height: var(--float-size, 56px);
  min-width: var(--float-size, 56px);
  border-radius: 999px;
  padding: 0 28px;
  font-size: 18px;
}

/* Darken whatever colour was chosen rather than swapping to a fixed hover colour -
   the module allows any colour, so a hard-coded hover would clash with most. */
.ycg-float:hover,
.ycg-float:active,
.ycg-float:focus {
  filter: brightness(0.88);
  color: var(--float-fg, #ffffff);
}

.ycg-float:focus-visible {
  outline: 3px solid var(--ycg-navy, #262e44);
  outline-offset: 3px;
}

/* On a phone the resting position and a 120px circle both get in the way of the
   content, so it shrinks and sits near the bottom corner. */
@media (max-width: 768px) {
  .ycg-float--circle {
    width: min(var(--float-size, 120px), 88px);
    height: min(var(--float-size, 120px), 88px);
    font-size: 16px;
  }
  .ycg-float--right { right: 16px; }
  .ycg-float--left  { left: 16px; }
}

/* Footer column rows that are not links.
   Reported from testing: a column could only hold links, so an address or a
   sentence had to be written as raw HTML - which is what the module replaced. */
.ycg-footer__text {
  display: block;
  font-family: var(--ycg-font-body);
  font-size: var(--ycg-small);
  font-weight: 400;
  line-height: 28px;
  color: var(--ycg-text-secondary);
}

/* A button row needs room around it; the links either side sit on a 28px line
   height and a button against that looks wedged in. */
.ycg-footer__btnRow { padding: 8px 0; }

/* =============================================================================
   Shared buttons: hover states

   Markup.Button writes the resting appearance inline - a module cannot write into
   this stylesheet, and a button relying entirely on skin CSS renders as a bare
   link if the CSS is missing. Hover cannot be expressed inline, so it lives here.

   Every rule is scoped with .ycg-site, and it has to be: the site-wide
   .ycg-site a { color: inherit } is specificity (0,1,1) and beats a single class
   at (0,1,0). A bare .xp-btn-secondary:hover would lose its colour and the button
   would appear to do nothing on hover. That exact mistake cost an afternoon on the
   Text and Media buttons - see LESSONS.md.

   Reported from testing: buttons had no hover state at all. There was no CSS for
   xp-btn-* anywhere.
   ============================================================================= */
.ycg-site .xp-btn {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}

/* Primary: red fill, darkens. */
.ycg-site .xp-btn-primary:hover,
.ycg-site .xp-btn-primary:focus-visible {
  background-color: var(--ycg-red-hover, #c0100f) !important;
  border-color: var(--ycg-red-hover, #c0100f) !important;
  color: #fff !important;
}

/* Secondary: white fill with a red border, fills red. */
.ycg-site .xp-btn-secondary:hover,
.ycg-site .xp-btn-secondary:focus-visible {
  background-color: var(--ycg-red, #e2161a) !important;
  border-color: var(--ycg-red, #e2161a) !important;
  color: #fff !important;
}

/* Tertiary: red fill with a white border, fills white with red text. */
.ycg-site .xp-btn-tertiary:hover,
.ycg-site .xp-btn-tertiary:focus-visible {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--ycg-red, #e2161a) !important;
}

/* Outline-white, for buttons over a photo: fills white. */
.ycg-site .xp-btn-outline-white:hover,
.ycg-site .xp-btn-outline-white:focus-visible {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--ycg-red, #e2161a) !important;
}

.ycg-site .xp-btn:focus-visible {
  outline: 3px solid var(--ycg-navy, #262e44);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   "Read the story" on carousel cards

   The rule above at .ycg-news .ycg-news__more is scoped to the news index, so the
   same link inside a carousel card inherited nothing and rendered as plain body
   text - reported from testing as "the style of the link is different".

   Unscoping it would put it below .ycg-site a { color: inherit } on specificity,
   so it is scoped to the carousel as well rather than loosened.
   ----------------------------------------------------------------------------- */
.ycg-site .ycg-news__more {
  display: inline-block;
  margin-top: auto;
  font-family: var(--ycg-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ycg-red, #e2161a);
  text-decoration: none;
}
.ycg-site .ycg-news__more:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Footer text rows: honour "emphasise"

   .ycg-footer__text set font-weight:400 and sits later in this file than
   .ycg-footer__link--strong, so at equal specificity it won and bold never
   applied to a text row. Reported from testing.
   ----------------------------------------------------------------------------- */
.ycg-footer__text.ycg-footer__link--strong { font-weight: 700; }

/* -----------------------------------------------------------------------------
   Story cards: the whole card is the link

   From the design, and reported from testing: the image should be clickable and
   should zoom on hover, with the card reacting as one thing rather than as a
   heading that happens to be a link.

   The zoom is on the image inside a clipping wrapper, so the card itself does not
   change size and the row does not reflow. Scaling the card instead would nudge
   every neighbouring card on a horizontal scroller.
   ----------------------------------------------------------------------------- */
.ycg-card--linked { transition: box-shadow .2s ease, transform .2s ease; }

.ycg-card--linked:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  transform: translateY(-2px);
}

.ycg-card__imglink { display: block; }

.ycg-card--linked .blog-card-img-wrap img {
  transition: transform .35s ease;
  will-change: transform;
}

.ycg-card--linked:hover .blog-card-img-wrap img { transform: scale(1.06); }

/* The read-more underlines when the card is hovered, not only the link itself -
   the card is one target, so it should react as one. */
.ycg-site .ycg-card--linked:hover .ycg-news__more { text-decoration: underline; }

/* Someone who has asked for less motion gets the card, without the movement. */
@media (prefers-reduced-motion: reduce) {
  .ycg-card--linked,
  .ycg-card--linked .blog-card-img-wrap img { transition: none; }
  .ycg-card--linked:hover { transform: none; }
  .ycg-card--linked:hover .blog-card-img-wrap img { transform: none; }
}

/* Feature Content body: let the editor's own paragraphs inherit the card's text
   colour. The wrapper used to be a <p>, and a <p> start tag closes an open <p>, so
   rich-text bodies escaped the colour entirely and rendered black on a red card -
   reported from testing as "light text still shows black content". */
.ycg-fc__body > :first-child { margin-top: 0; }
.ycg-fc__body > :last-child { margin-bottom: 0; }
.ycg-fc__body p,
.ycg-fc__body li,
.ycg-fc__body span { color: inherit; font: inherit; }
.ycg-fc__body p { margin: 0 0 12px; }
.ycg-fc__body a { color: inherit; text-decoration: underline; }

/* Text and Media: an embedded form or widget in place of the picture.
   The iframe is forced to fill its box - services hand out fixed width/height
   attributes that would otherwise leave it a fraction of the column. */
.ycg-tm__embed { width: 100%; border-radius: var(--ycg-radius-card, 8px); overflow: hidden; }
.ycg-tm__embed iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }

/* Background video sits at z-index:0 (inline); tint above it, content above tint. */
.ycg-tm__bg-video {
    z-index: 0;
}

.ycg-tm__tint {
    z-index: 1;
}

.ycg-tm__inner {
    position: relative; /* lifts content above the tint */
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}
/* Hover bridge: the panel sits 4px below the bar (top: calc(100% + 4px)), which
   leaves a 4px dead strip with nothing to hover. Moving the cursor down quickly
   crosses it, :hover drops for a frame and the CSS-only menu snaps shut - the
   "submenu works intermittently" report. This invisible strip keeps the whole
   path hoverable so the panel stays open. */
.ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul) {
    position: relative;
}

    .ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul)::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 8px; /* covers the 4px gap with a little margin */
        display: none;
    }

    .ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul):hover::before,
    .ycg-header__navpane [id$="mainNav"] > ul > li:has(> ul):focus-within::before {
        display: block;
    }