/*
Theme Name: Entergy CDC
Theme URI: https://entergycdc.com
Description: Block theme for the Entergy Community Development Corporation. Built to the DUX build specification dated 2026-08-31. Design system lives in theme.json; this file carries only what theme.json cannot express.
Author: Strong
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary — transfers to Entergy at handoff
Text Domain: entergy-cdc
*/

/* -------------------------------------------------------------------------
   1. Accessibility primitives — spec section 9
   These are approval-gate requirements, not styling preferences.
   ---------------------------------------------------------------------- */

/* Visible focus indicator meeting the WCAG 2.2 focus appearance requirement.
   Two-tone ring so it stays visible on light and dark backgrounds alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--wp--custom--focus-ring, 3px) solid var(--wp--preset--color--violet);
  outline-offset: 2px;
  border-radius: 2px;
}
.has-midnight-plum-background-color :focus-visible,
.cdc-band--dark :focus-visible {
  outline-color: #FFFFFF;
}

/* Skip to main content — first in tab order, spec section 9 */
.cdc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.875rem 1.5rem;
  background: var(--wp--preset--color--deep-plum);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.cdc-skip-link:focus {
  /* .screen-reader-text clips this element; every one of those properties has
     to be undone or the link moves on screen but stays invisible. */
  left: 0;
  clip-path: none;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  white-space: normal;
}

/* Minimum tap target, spec section 2B */
@media (max-width: 900px) {
  :where(nav a, nav button, .wp-block-button__link, .cdc-nav a, .cdc-nav button) {
    min-block-size: var(--wp--custom--tap-target, 44px);
    min-inline-size: var(--wp--custom--tap-target, 44px);
    display: inline-flex;
    align-items: center;
  }
}

/* Reduced motion, spec section 9 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* No horizontal scroll at 320px or at 200% zoom, spec section 9 */
html, body { overflow-x: clip; }
img, svg, video, iframe, table, pre { max-inline-size: 100%; }

/* Screen-reader-only utility */
.screen-reader-text {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   2. Typography refinements — spec section 3C
   theme.json carries size and weight. Line-height deltas between desktop and
   mobile, and the measure cap, live here.
   ---------------------------------------------------------------------- */

/* Body copy spans the content container, aligned to its LEFT EDGE — the same
   edge every banded and constrained section uses.

   Two things are happening here:
   1. Width — capped at contentSize (not the 68ch reading measure). DUX dropped
      §3C's 68-character measure for body copy site-wide on 2026-09-10, so the
      body runs the full container like the section headings. See SPEC-FLEX
      item 8. Opt a single block back into the 68ch measure with .cdc-measure.
   2. Left edge — the constrained layout centres a block within the full content
      width; a block narrower than that (e.g. one still using .cdc-measure, or on
      a wide viewport) would drift inward. We offset it by exactly the amount a
      full-contentSize block is centred by — (100% - contentSize) / 2 — so its
      left edge lands on the container. `100%` is the containing block's width,
      so it self-corrects at every viewport; max(0px, …) collapses the offset
      once the viewport is narrower than contentSize. margin-right:auto takes the
      slack on the right. !important + our specificity (0,1,1) beats WordPress's
      constrained-layout centring (`margin:auto !important`, specificity 0,1,0). */
.entry-content > p,
.wp-block-post-content > p {
  max-inline-size: var(--wp--style--global--content-size, 1200px);
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
  margin-right: auto !important;
}

/* Opt-in narrow reading measure (§3C, 68ch), for any block that wants the
   readable column back. Same container-left alignment as body copy above. */
.cdc-measure {
  max-inline-size: var(--wp--custom--measure, 68ch);
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
  margin-right: auto !important;
}

/* Section header — spec section 3B / the approved mockup's ".sec-head".
   Entergy Red is permitted here because the heading is 27px (>=24px large
   text: 3.79:1 passes WCAG 2.2 AA). A trailing hairline rule fills the row.
   The top margin carries the section rhythm between module blocks. */
h2.cdc-sec-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-start: var(--wp--preset--spacing--70);
  color: var(--wp--preset--color--red-display);
  font-size: 1.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}
/* When the section header opens a band, the band's own padding sets the top
   space — the section-rhythm margin here would stack on top of it and make the
   band top-heavy (double the bottom). Zero it; the band pads evenly. */
.cdc-band--quiet > .cdc-inner > .cdc-sec-head:first-child {
  margin-block-start: 0;
}

h2.cdc-sec-head::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: #F2B9C9;
}

/* Lead paragraph — one per page, directly under the H1 */
.cdc-lead {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.55;
  font-weight: 400;
  max-inline-size: var(--wp--custom--measure, 68ch);
}

/* Kicker / eyebrow — spec: 12px, 0.16em, SemiBold, uppercase, Action Pink */
.cdc-kicker {
  font-size: var(--wp--preset--font-size--kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--action-pink);
  display: block;
  margin-block-end: 0.75rem;
}

/* Mobile line-height deltas the spec calls out explicitly */
@media (max-width: 782px) {
  .cdc-hero__headline { line-height: 1.1; }   /* 1.05 desktop -> 1.1 mobile */
  h1, .wp-block-post-title { line-height: 1.15; } /* 1.1 desktop -> 1.15 mobile */
  body { line-height: 1.6; }                   /* 1.65 desktop -> 1.6 mobile */
}

/* Hero headline is the only place Entergy Red display type is permitted at
   scale. Guard rail: see inc/brand-guard.php for the build-time check. */
.cdc-hero__headline {
  font-size: var(--wp--preset--font-size--hero);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--wp--preset--color--deep-plum);
}

/* -------------------------------------------------------------------------
   3. Layout — spec section 3D
   12 columns, 1200px max, 24px gutters. Section rhythm widened from the
   spec's 80/48 to 104/64 (DUX request 2026-09-10, docs/SPEC-FLEX.md item 9);
   the --wp--preset--spacing--70 token carries it.
   ---------------------------------------------------------------------- */

/* blockGap (1.5rem) is wanted between modules inside the page, but not around
   the page frame — the header, <main>, and footer meet flush. WP applies it as
   `:where(.wp-site-blocks) > * { margin-block-start }` at zero specificity. */
.wp-site-blocks > * {
  margin-block-start: 0;
}

.cdc-section {
  padding-block: var(--wp--preset--spacing--70);
}
/* The quiet band reads calmer than the full section rhythm — 60px, even top
   and bottom (DUX, 2026-09-10). */
.cdc-band--quiet.cdc-section {
  padding-block: 3.75rem;
}
.cdc-band--quiet { background: var(--wp--preset--color--surface); }
.cdc-band--dark {
  background: var(--wp--preset--color--midnight-plum);
  color: #FFFFFF;
}
.cdc-band--dark :where(h1, h2, h3, h4, p) { color: #FFFFFF; }

/* Links on a dark band. The default link colour is Action Pink #E01050, which
   is 3.15:1 on Midnight Plum #2F1B4C and fails WCAG 2.2 AA — every footer link
   tripped both axe and the contrast harness. White clears AA (15.2:1) and the
   underline keeps the link distinguishable from the white text around it. Spec
   sections 3B and 9. */
.cdc-band--dark a,
.has-midnight-plum-background-color a {
  color: #FFFFFF;
  text-decoration: underline;
}
.cdc-band--dark a:hover,
.has-midnight-plum-background-color a:hover {
  text-decoration: none;
}

/* Card grid — the five program cards on the programs index and the home icon
   cards. auto-fit collapses to one column on narrow viewports; min(260px,100%)
   keeps a single card from overflowing below 260px (no scroll at 320px). */
.cdc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--wp--custom--gutter, 24px);
}

/* The group defaults to WordPress flow layout, whose core rule
   (:where(.is-layout-flow) > *) injects margin-block-start between children.
   With display:grid that margin fights the gap — it drops the first card's
   row-mates by 24px (first card looks "raised") and pushes them past the
   band's bottom padding. The grid gap already spaces the cards, so zero it. */
.cdc-card-grid > * {
  margin-block: 0;
}

/* Five-card grids (home "How can we help", programs index) hold one row on
   desktop — the approved mockup's .quick-grid — then step down in factors that
   never orphan the fifth card the way auto-fit's 4+1 wrap does. */
.cdc-card-grid.cdc-card-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) {
  .cdc-card-grid.cdc-card-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .cdc-card-grid.cdc-card-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .cdc-card-grid.cdc-card-grid--5 { grid-template-columns: 1fr; }
}

/* Full-bleed band, content held to the grid */
.alignfull > :where(.wp-block-group__inner-container, .cdc-inner) {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

/* -------------------------------------------------------------------------
   3a. Header — spec section 2B, laid out to the approved mockup's .nav-wrap:
   white bar, primary lockup at left, nav + one pill button at right, sticky
   to the top of the viewport on scroll. Below --nav-collapse (900px) the nav
   folds to a hamburger + full-screen panel; the pill stays in the bar.
   ---------------------------------------------------------------------- */

:root {
  --cdc-header-h: 5.75rem;   /* 92px, mockup .nav-wrap height */
}
@media (max-width: 900px) {
  :root { --cdc-header-h: 4.5rem; }   /* 72px collapsed bar */
}

/* Sticky. Pure CSS — no JS. position:sticky pins an element within its PARENT's
   box, and WordPress wraps the template part in <header class="wp-block-template
   -part"> which shrink-wraps to the bar's height — so sticky must sit on that
   wrapper, not on .cdc-header (whose parent would then be too short to stick in).
   Works with html/body overflow-x:clip, which clips but is not a scroll
   container, so sticky still resolves against the viewport. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.cdc-header {
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(24, 12, 44, 0.10);
  /* The group has has-background, whose core rule adds 1.25em padding all round.
     The bar sizes itself from --cdc-header-h instead. */
  padding-block: 0;
}

/* In-page anchors (e.g. footer -> /about#our-mission) must clear the sticky bar. */
html { scroll-padding-top: calc(var(--cdc-header-h) + 0.5rem); }

.cdc-header__inner {
  min-block-size: var(--cdc-header-h);
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2.125rem);
  /* Mockup: logo alone at the left, nav + pill grouped at the right. The auto
     margin after the logo overrides the group's space-between distribution. */
  justify-content: flex-start;
}

/* Logo — constrained by HEIGHT like the mockup (.brand img { height:52px }),
   not width, so the bar height is predictable whatever the asset's ratio.
   `img[width][height]` (the §7C responsive-image rule) is (0,2,1) and would
   otherwise pin height:auto here, so this one element opts out with important. */
/* .cdc-header prefix beats WP's `.is-layout-flex > :is(*,div) { margin:0 }`
   (0,1,1), which would otherwise zero the auto margin. */
.cdc-header .cdc-header__logo {
  flex: 0 0 auto;
  margin-inline-end: auto;   /* pushes nav + pill to the right */
  line-height: 0;
}
.cdc-header__logo img {
  block-size: 2.75rem !important;   /* 44px collapsed bar */
  inline-size: auto !important;
  max-inline-size: none;
}
@media (min-width: 901px) {
  .cdc-header__logo img { block-size: 3.25rem !important; }   /* 52px, mockup */
}

/* Nav links — Deep Plum (spec 3B: "nav text"), 500, ~16.5px, with a 3px
   underline slot that fills on hover / for the current page. Hover colour is
   Action Pink #E01050 (4.82:1 on white) — NOT the mockup's #FF1A58, which
   fails AA below 24px (CLAUDE.md rule 4).
   The base colour is set on .cdc-nav, not the link: WP pins the link to
   `color:inherit` with a (0,3,0) doubled-class rule, so the link takes its
   colour from the nav via inheritance rather than a rule we'd have to out-
   specify. The hover/current rules below carry :hover / a 3rd class to reach
   (0,3,0) and win on source order. */
.cdc-nav {
  gap: clamp(1.25rem, 0.4rem + 2vw, 2.125rem);
  color: var(--wp--preset--color--deep-plum);
}
.cdc-nav .wp-block-navigation-item__content {
  font-size: 1.03125rem;
  font-weight: 500;
  padding-block: 0.375rem;
  border-block-end: 3px solid transparent;
  transition: color var(--wp--custom--transition, 180ms ease),
              border-color var(--wp--custom--transition, 180ms ease);
}
.cdc-nav .wp-block-navigation-item__content:hover,
.cdc-nav .wp-block-navigation-item__content:focus-visible,
.cdc-nav .current-menu-item > .wp-block-navigation-item__content,
.cdc-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--action-pink);
  border-block-end-color: currentColor;
}

/* Dropdowns (Programs, Grants and funding) — white card off the bar.
   WP's own submenu rules set a physical `min-width:200px` / `width` with high
   specificity; overriding needs matching physical props + important. */
.cdc-nav .wp-block-navigation__submenu-container {
  padding-block: 0.5rem;
  min-width: 17rem !important;
  width: max-content !important;
  max-width: 22rem;
  background: #FFFFFF;
  border: 1px solid var(--wp--preset--color--surface-border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(24, 12, 44, 0.14);
}
.cdc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.5rem 1rem;
  border-block-end: 0;
  line-height: 1.35;
}

/* Pill button — theme.json elements.button already styles it (Action Pink,
   999px, Deep Plum hover). Just keep it whole in the flex row. */
.cdc-header__cta { flex: 0 0 auto; }
.cdc-header__cta .wp-block-button__link { white-space: nowrap; }

/* --- Collapsed bar: spec 2B says below 900px, the block default is 600px.
   Re-collapse across the 600–900 band: hide the inline menu, show the toggle.
   The pill is a sibling of the nav, not inside it, so it stays in the bar. --- */
@media (min-width: 600px) and (max-width: 900px) {
  .cdc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .cdc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}
@media (max-width: 900px) {
  /* logo left, then [pill] [hamburger] as a right-hand cluster */
  .cdc-header__inner { gap: 0.75rem; }
  .cdc-header__cta { order: 2; }
  .cdc-nav { order: 3; }

  /* Full-screen panel: white, left-aligned, generous targets. */
  .cdc-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: #FFFFFF;
    padding: 1.5rem var(--wp--custom--gutter) 3rem;
  }
  .is-menu-open .wp-block-navigation__container { align-items: stretch; }
  .is-menu-open .wp-block-navigation-item { width: 100%; }
  .is-menu-open .wp-block-navigation-item__content {
    border-block-end: 0;
    font-size: 1.125rem;
    padding-block: 0.625rem;
    justify-content: flex-start;
    text-align: start;
  }

  /* Submenus render as inline, always-open sections under their parent link —
     undo the desktop floating card. (The WP nav block does not expose a working
     collapse toggle for open-on-hover-click submenus inside the overlay; the
     menu is short enough that showing them open is fine. SPEC-FLEX item 11.) */
  .is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    inline-size: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.25rem 0 0.25rem 1rem;
    gap: 0;
  }
  .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 1rem;
    padding-block: 0.5rem;
    color: var(--wp--preset--color--body);
  }
  /* Hairline between top-level groups for scannability. */
  .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
    border-block-start: 1px solid var(--wp--preset--color--surface-border);
  }
}

/* -------------------------------------------------------------------------
   3b. Footer — spec section 2C (Midnight Plum), laid out to the approved
   mockup: centred tagline, pill search, reverse lockup, four mini-rule
   columns, and a bottom legal row.
   ---------------------------------------------------------------------- */
.cdc-footer { padding-block: 4.5rem 2.25rem; color: #FFFFFF; }

.cdc-footer__tag {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.cdc-footer__search { max-inline-size: 650px; margin-block-start: 2rem; }
/* No overflow:hidden on the pill — it would clip the focus ring of the input
   and button inside it (a WCAG 2.2 focus-appearance failure). Round the
   wrapper and inset the children with padding instead. */
.cdc-footer__search .wp-block-search__inside-wrapper {
  background: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 4px;
}
.cdc-footer__search .wp-block-search__input {
  border: 0;
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: transparent;
  color: var(--wp--preset--color--body);
}
.cdc-footer__search .wp-block-search__button {
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding-inline: 2rem;
  background: var(--wp--preset--color--action-pink);
  color: #FFFFFF;
  font-weight: 600;
}
.cdc-footer__search .wp-block-search__button:hover,
.cdc-footer__search .wp-block-search__button:focus-visible {
  background: var(--wp--preset--color--deep-plum);
}
/* Explicit focus ring for the search field. The global :focus-visible rule does
   not resolve an outline on the core search input reliably, so this guarantees
   a visible indicator (WCAG 2.2 focus appearance, spec section 9). */
.cdc-footer__search .wp-block-search__input:focus,
.cdc-footer__search .wp-block-search__button:focus {
  outline: 3px solid var(--wp--preset--color--violet);
  outline-offset: 2px;
}

/* Footer logo is a plain Image block (parts/footer.html), not wp:site-logo, so
   the footer's reverse lockup is independent of the header's primary Site Logo. */
.cdc-footer__logo { margin-block-start: 2.75rem; }

.cdc-footer__cols { margin-block-start: 3.5rem; gap: 2.75rem; }
.cdc-footer__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 1.25rem;
  font-size: var(--wp--preset--font-size--h3);
  font-weight: 700;
  color: #FFFFFF;
}
.cdc-footer__heading::after {
  content: "";
  flex: 1 1 auto;
  max-inline-size: 84px;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.cdc-footer__links { list-style: none; margin: 0; padding: 0; }
.cdc-footer__links li { margin-block-end: 0.75rem; }

.cdc-footer__legal {
  margin-block-start: 3.375rem;
  padding-block-start: 1.625rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.28);
  align-items: center;
  gap: 1rem;
}
.cdc-footer__copyright {
  margin: 0;
  font-size: var(--wp--preset--font-size--caption);
  color: rgba(255, 255, 255, 0.92);
}
.cdc-footer__legal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--caption);
}
.cdc-footer__legal-links a {
  margin-inline-start: 14px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.4);
}
.cdc-footer__legal-links li:first-child a {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* Footer links stand alone in their columns, so they do not need the
   always-underline that prose links on a dark band get — underline on hover
   only. This rule follows the .cdc-band--dark link rule above and wins on
   source order. */
.cdc-footer a { color: #FFFFFF; text-decoration: none; }
.cdc-footer a:hover,
.cdc-footer a:focus-visible { text-decoration: underline; }

/* -------------------------------------------------------------------------
   4. Images — spec section 7C
   Explicit width and height are set in markup to prevent layout shift; this
   keeps them responsive without reintroducing it.
   ---------------------------------------------------------------------- */
img[width][height] { height: auto; }