/**
 * CCG Fusion — layout & prototype styles on top of CMS.gov Design System (cmsgov-theme.css).
 * Uses CMS tokens: --color-primary*, --global__font-family, etc.
 */

:root {
  /*
   * Typefaces come from theme.json, which generates them from the Design System
   * (npm run sync:ds). Point the DS's own font hooks at those presets so there
   * is one source of truth: the ~40 `font-family: var(--global__font-family)`
   * declarations across this theme then resolve to the FUSION stack without
   * being edited.
   *
   * This override is deliberate. The DS defaults --global__font-family to
   * Public Sans, where the FUSION design calls for Open Sans body text with
   * Lexend headings. --font-lexend was referenced in five places but never
   * defined anywhere, so those headings silently inherited the body face.
   */
  --global__font-family: var(--wp--preset--font-family--body);
  --font-family-body: var(--wp--preset--font-family--body);
  --font-family-heading: var(--wp--preset--font-family--heading);
  --font-lexend: var(--wp--preset--font-family--heading);

  --fusion-site-max-width: 100rem;
  --fusion-site-padding-x: 1.5rem;
  --fusion-site-padding-x-md: 3rem;
  /* Sticky stack: CCG nav only + Explore breadcrumb (gov banner scrolls away). */
  --ccg-site-nav-height: var(--fusion-nav-sticky-height, 5rem);
  --ccg-breadcrumb-bar-height: 2.75rem;
  --ccg-sticky-stack-top: calc(var(--ccg-site-nav-height) + var(--ccg-breadcrumb-bar-height));
}

/*
 * FUSION brand colours the Design System does not define.
 *
 * theme.json is the one authoritative place the hex is written down (see the
 * FUSION_ADDITIONS list in scripts/build-theme-json.mjs), and WordPress emits it
 * as `--wp--preset--color--fusion-*`. These aliases pull each into the
 * `--color-*` namespace so the section CSS references a FUSION blue exactly the
 * way it references a Design System colour — `var(--color-fusion-blue)` — rather
 * than carrying the raw hex inline. The literal is only a fallback for the
 * editor iframe before global styles load; the preset var is the real source.
 */
:root {
  --color-fusion-blue: var(--wp--preset--color--fusion-blue, #005ea2);
  --color-fusion-blue-dark: var(--wp--preset--color--fusion-blue-dark, #0b3d5c);
  --color-fusion-blue-mid: var(--wp--preset--color--fusion-blue-mid, #4f95c7);
  --color-fusion-blue-light: var(--wp--preset--color--fusion-blue-light, #73b3e7);
  --color-fusion-blue-surface: var(--wp--preset--color--fusion-blue-surface, #e8f1fb);
  --color-fusion-blue-surface-alt: var(--wp--preset--color--fusion-blue-surface-alt, #d9e8f6);
  --color-fusion-gray-line: var(--wp--preset--color--fusion-gray-line, #e6e6e6);
}

/*
 * Template-root edge reset.
 *
 * WordPress's global `:where(.is-layout-flow/constrained) > :first-child` and
 * `> :last-child` gap resets are removed from the generated stylesheet in
 * inc/block-gap-edges.php, because at (0,2,0) they stripped the top/bottom
 * margin off any block that happened to be first or last inside *any* nested
 * group, column or section. The flush behaviour is wanted only at the template's
 * own outer edges, so it is reintroduced here scoped to `.ccg-main`: the first
 * block never pushes off the top and the last never adds a trailing gap, while
 * everything nested keeps the rhythm the theme gives it.
 */
.ccg-main > :first-child {
  margin-block-start: 0;
}

.ccg-main > :last-child {
  margin-block-end: 0;
}

/*
 * Prose rhythm inside converted containers.
 *
 * The Design System puts all vertical rhythm in top margins — h1-h6 get
 * `margin-block: 1.5em 0`, p gets `1em 0`. WordPress's flow layout overrides
 * that with a single uniform gap for every element type, and the `blockGap: 0`
 * these patterns carry removes even that, so headings and body copy end up
 * jammed together. Neither WordPress setting reproduces the design: one gives
 * the same spacing to a heading, a badge and a button row; the other gives none.
 *
 * So the rhythm is restored once, on the template's main wrapper. `.ccg-main` is
 * on all fifteen templates, which keeps this in a single place rather than a
 * list of component containers that would need extending every time a pattern
 * is added.
 *
 * Scoping to `.ccg-main` rather than `body` is deliberate: it excludes the USA
 * banner, the mega nav and the footer, which are Design System components and
 * site chrome that manage their own spacing. Measured on the home page, a
 * body-wide version changed 87 of 154 elements and broke `ds-c-usa-banner`.
 *
 * Two behaviours to keep in mind before editing this:
 *
 *   - The first child of any container keeps `margin-block-start: 0`. WordPress
 *     zeroes it at (0,2,0) on purpose, so a container's first element does not
 *     push away from its own padding. We do not override that.
 *   - This is a prose default only. Headings that carry a BEM component class
 *     (anything with `__`) are laid out by their component, not typeset as body
 *     copy, so they are excluded and keep whatever margin their own rule declares
 *     (or none) — a card or hero title never inherits this 1.5em, and no
 *     per-component opt-out is needed. The exclusion is wrapped in `:where()` so
 *     it adds no specificity: the rule stays at (0,1,1), just enough to beat
 *     WordPress's (0,1,0) flow rule while still yielding to a component's own
 *     (0,2,0) heading rule (e.g. the post title's).
 */
.ccg-main :is(h1, h2, h3, h4, h5, h6):not(:where([class*="__"])) {
  margin-block: 1.5em 0;
}

.ccg-main p {
  margin-block: 1em;
}

/*
 * Elements that are laid out rather than typeset. These sit in flex rows and
 * grids where any vertical margin is wrong.
 *
 * `.ccg-btn-wrap` is `display: contents`, so on the front end its margin is
 * ignored anyway — but it becomes a real box in the editor, where the gap would
 * show. The `__cta-wrap` and `__pill-label` matches are substring selectors
 * because each page vocabulary names its own variant of the same thing.
 *
 * `__action` is the individual action item; `:not([class*="__actions"])` keeps
 * the substring match from also catching the `__actions` container, which lays
 * its buttons out and owns its own top margin.
 */
.ccg-main :is(.ccg-btn-wrap, .sr-only, .kc-breadcrumb-item, .interior-section-nav__link-wrap),
.ccg-main [class*="__cta-wrap"],
.ccg-main [class*="__pill-label"],
.ccg-main [class*="__action"]:not([class*="__actions"]) {
  margin-block: 0;
}

/* Gov banner — scrolls away (separate template part, not inside sticky header) */
.fusion-usa-banner.ds-c-usa-banner,
.ccg-usa-banner-part {
  position: relative;
  z-index: 1;
  background: #f0f0f0;
}

/*
 * Header template part — not sticky (nav wrapper is sticky, like the React prototype).
 * Keeps mega menu dropdown in the same stacking layer as the nav bar.
 */
header.ccg-site-header-part,
header.wp-block-template-part.ccg-site-header-part {
  position: relative;
  z-index: 100;
  width: 100%;
  margin: 0;
  overflow: visible;
  background: transparent;
}

/* Sticky nav shell — mega menu panels are children of this element */
header.ccg-site-header-part .fusion-site-header,
.fusion-site-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
  border-bottom: 1px solid color-mix(in srgb, var(--color-fusion-gray-line, #e6e6e6) 80%, transparent);
  background: color-mix(in srgb, #ffffff 95%, transparent);
  box-shadow:
    0 10px 15px color-mix(in srgb, #000000 6%, transparent),
    0 4px 6px color-mix(in srgb, #000000 5%, transparent);
  padding: 0;
}

header.ccg-site-header-part:has(.fusion-nav-v2--mega-open) .fusion-site-header {
  z-index: 200;
}

/* Prevent WP layout wrappers from breaking position: sticky */
.wp-site-blocks,
.wp-block-template-part,
.ccg-usa-banner-part {
  overflow: visible;
}

@media (min-width: 768px) {
  :root {
    --fusion-site-padding-x: var(--fusion-site-padding-x-md);
  }
}

/* Skip link */
.ccg-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-primary-darkest, #07124a);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.ccg-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/*
 * CMS DS paints focus with --color-focus-dark (#c97532). On pill navs and
 * clipped menus that ring reads as orange side brackets. Drop mouse-focus
 * rings site-wide; keep a primary keyboard ring via :focus-visible.
 */
a:focus:not(:focus-visible),
a:focus:visited:not(:focus-visible),
a:focus:not(.wp-element-button, .ds-c-tooltip__trigger-link):not(:focus-visible) {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  outline: none;
  text-decoration: inherit;
}

button:focus:not(:focus-visible),
button:focus:not(:focus-visible):not(.wp-element-button),
.fusion-site-nav button.fusion-mega-trigger:focus:not(:focus-visible),
.fusion-site-nav button.fusion-site-nav__search-btn:focus:not(:focus-visible),
.fusion-site-nav button.fusion-site-nav__menu-btn:focus:not(:focus-visible),
.interior-section-nav a.interior-section-nav__link:focus:not(:focus-visible) {
  background-color: transparent;
  box-shadow: none;
  outline: none;
}

a:focus-visible:not(.wp-element-button) {
  outline: 2px solid var(--color-primary, #005ea2);
  outline-offset: 2px;
  box-shadow: none;
}

button:focus-visible:not(.wp-element-button) {
  outline: 2px solid var(--color-primary, #005ea2);
  outline-offset: 2px;
  box-shadow: none;
}

.fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__header,
.fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__guidance {
  box-sizing: border-box;
  max-width: var(--fusion-site-max-width);
  margin-inline: auto;
  padding-inline: var(--fusion-site-padding-x);
}

@media (min-width: 768px) {
  .fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__header,
  .fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__guidance {
    padding-inline: var(--fusion-site-padding-x-md);
  }
}

/* USA banner — match CMS DS sizing when WP/theme styles leak in */
.fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__header {
  font-size: var(--usa-banner-heading__font-size, 0.875rem);
  line-height: var(--usa-banner-heading__line-height, 1.1);
}

.fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__guidance {
  font-size: var(--usa-banner-panel__font-size, 1rem);
  line-height: var(--usa-banner-panel__line-height, 1.5);
}

/* Responsive action/button visibility (mirrors CMS DS utilities) */
.fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__action {
  display: flex;
  gap: 0.25rem;
  margin: 0;
}

.fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__button-text {
  display: none;
  gap: 0.25rem;
  align-items: center;
}

/* Shared nav/banner chevron (matches FusionSiteNavV2) */
.ccg-mega-chevron {
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.fusion-usa-banner.ds-c-usa-banner .ccg-mega-chevron {
  margin-left: 0.25rem;
  margin-top: 2px;
}

.ccg-mega-chevron--open {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__action {
    display: none !important;
  }

  .fusion-usa-banner.ds-c-usa-banner .ds-c-usa-banner__button-text {
    display: inline-flex;
    align-items: center;
  }
}

.fusion-site-header__inner {
  max-width: var(--fusion-site-max-width);
  margin: 0 auto;
  gap: 1rem;
  align-items: center;
}

.fusion-site-header__title a {
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary-darkest, #07124a);
  text-decoration: none;
}

.fusion-site-header__nav-placeholder {
  margin: 0;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
}

.fusion-site-header__nav-placeholder a {
  color: var(--color-primary-darker, #0d2499);
  text-decoration: none;
}

.fusion-site-header__nav-placeholder a:hover {
  color: var(--color-primary-darkest, #07124a);
  text-decoration: underline;
}

html.ccg-mega-nav-open {
  overflow: hidden;
}

/* Main content */
.ccg-main {
  max-width: var(--fusion-site-max-width);
  margin: 0 auto;
  padding: 0 var(--fusion-site-padding-x) 3rem;
}

/* Homepage + interior heroes — full-bleed sections (site standard) */
.ccg-main.ccg-main--home,
.ccg-main:has(.ccg-home-page),
.ccg-main:has(.fusion-hero),
.ccg-main:has(.ft-hero),
.ccg-main:has(.init-hero),
.ccg-main:has(.pa-page),
.ccg-main:has(.ss-page),
.ccg-main.pa-page-shell,
.ccg-main.ss-page-shell,
.ccg-main.ccg-landing-page,
.ccg-main.lpl-page,
.ccg-main.ccg-about-sections,
.ccg-main.about-hybrid-cloud-page,
.ccg-main.cst-page,
.ccg-main:has(.ccg-about-sections),
.ccg-main:has(.about-hybrid-cloud-page),
.ccg-main:has(.tpl-2col-hero-band) {
  max-width: none;
  padding: 0;
}

/* Page content stays below open mega menu */
.ccg-main,
.ccg-main .ccg-hero,
.ccg-main .init-hero,
.ccg-main .ft-hero,
.ccg-main .alignfull {
  position: relative;
  z-index: 0;
}

.ccg-main .wp-block-post-title {
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-primary-darkest, #07124a);
  margin: 2rem 0 1rem;
  line-height: 1.1;
}

/* Marketing hero pattern (Fusion Toolkit / Explore style) */
.ccg-hero {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding: clamp(3rem, 8vw, 6rem) var(--fusion-site-padding-x) clamp(2.5rem, 6vw, 4rem);
  background: linear-gradient(
    156deg,
    color-mix(in srgb, var(--color-primary-lightest, #e8f1fb) 88%, #ffffff) 0%,
    #ffffff 52%,
    color-mix(in srgb, var(--color-primary-light, #4f95c7) 22%, transparent) 100%
  );
}

.ccg-hero__title {
  max-width: 16ch;
  margin: 0 auto 0 0;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary-darkest, #07124a);
}

.ccg-hero__lede {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1.125rem, 1.5vw, 1.875rem);
  line-height: 1.45;
  color: var(--color-gray-dark, #5a5a5a);
}

.ccg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.ccg-two-col {
  padding: 2rem 0;
  gap: 2rem;
}

.ccg-two-col__media img {
  border-radius: 0.5rem;
  border: 1px solid var(--color-gray-lighter, #e6e6e6);
}

/* CTA band */
.ccg-cta-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding: 3rem var(--fusion-site-padding-x);
  background: linear-gradient(
    180deg,
    var(--color-primary-darkest, #07124a) 0%,
    var(--color-primary-darker, #0d2499) 100%
  );
  color: #ffffff;
  text-align: center;
}

.ccg-cta-band h2,
.ccg-cta-band p {
  color: #ffffff;
}

.ccg-cta-band__actions {
  margin-top: 1.5rem;
}

/* Footer — prototype CMS three-column */
.fusion-site-footer {
  background-color: #f0f0f0;
  padding: clamp(2.5rem, 5vw, 4rem) var(--fusion-site-padding-x) clamp(2rem, 4vw, 3rem);
}

.fusion-site-footer__inner {
  box-sizing: border-box;
  max-width: var(--fusion-site-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

@media (min-width: 900px) {
  .fusion-site-footer__inner {
    grid-template-columns: minmax(12rem, 1.25fr) 1fr 1fr;
    gap: 2rem 3rem;
    align-items: start;
  }
}

.fusion-site-footer__brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.fusion-site-footer__brand-logo--hhs {
  width: auto;
  height: clamp(3rem, 8vw, 3.75rem);
}

.fusion-site-footer__brand-logo--cms {
  width: auto;
  max-width: min(14rem, 46vw);
  height: clamp(2.75rem, 7vw, 3.25rem);
}

/* The logos are core/image blocks, so the sizing class sits on the <figure>
   while the <img> carries fixed width/height attributes. Without this the image
   renders at that fixed pixel size and can overrun the brand column into the
   link lists. Make it fill the figure's clamped height, keep its aspect, and
   never exceed the available width. */
.fusion-site-footer__brand-logo {
  margin: 0;
  max-width: 100%;
}

.fusion-site-footer__brand-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.fusion-site-footer__brand-body {
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #404040;
  margin: 0;
  max-width: 24rem;
}

.fusion-site-footer__brand-address {
  display: inline-block;
  margin-top: 0.35rem;
}

.fusion-site-footer__heading {
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: #0a0a0a;
  margin: 0 0 0.625rem;
}

.fusion-site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each footer link lives in a paragraph block inside a `tagName: li` group so
   its label and URL stay editable (core/list-item cannot hold blocks). Zero the
   paragraph's own box so the list keeps the geometry a bare <li><a> had. The
   selector includes the element, so it outranks the `blockGap: 0` reset. */
.fusion-site-footer__item {
  margin: 0;
  padding: 0;
}

.fusion-site-footer__list p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.fusion-site-footer__link,
.fusion-site-footer__link:visited {
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 1rem;
  color: var(--color-primary, #005ea2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fusion-site-footer__link:hover {
  color: var(--color-primary-darker, #004479);
}

/* Full-width groups inside constrained main */
.ccg-main > .alignfull {
  max-width: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Two- / three-column interior templates
 * The breadcrumb strip and hero band span edge-to-edge, so the template main
 * runs full width and the column grid is re-constrained by .ccg-page-shell.
 * ────────────────────────────────────────────────────────────────────────── */
.ccg-main.ccg-page-two-column,
.ccg-main.ccg-page-three-column {
  max-width: none;
  padding: 0 0 3rem;
  overflow-x: clip;
}

/* Column grid re-constrained to the site container */
.ccg-page-two-column .ccg-page-shell,
.ccg-page-three-column .ccg-page-shell {
  max-width: var(--fusion-site-max-width);
  margin-inline: auto;
  padding: 2.5rem var(--fusion-site-padding-x) 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .ccg-page-two-column .ccg-page-shell,
  .ccg-page-three-column .ccg-page-shell {
    padding-inline: var(--fusion-site-padding-x-md);
  }
}

/* Title now lives in the content column — trim the default top gap */
.ccg-page-two-column .ccg-page-columns__main > .ccg-page-title.wp-block-post-title,
.ccg-page-three-column .ccg-page-columns__main > .ccg-page-title.wp-block-post-title {
  margin-top: 0;
}

/* The section hero (breadcrumb + init-hero) is a full-bleed template part — its
 * wrapper adds no box of its own. The bar/hero inside carry their own colour. */
.ccg-interior-hero-part {
  margin: 0;
}

/* Current-page crumb rendered by core/post-title inside the breadcrumb trail —
 * strip the heading/post-title defaults so it reads as a plain crumb. */
.kc-breadcrumb-list .wp-block-post-title {
  margin: 0;
  padding: 0;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  color: inherit;
}

/* The hero band is a core/cover part (min-height + overlay set in the block).
 * The page's own H1 lives in the content column, so the cover heading uses the
 * Explore `init-hero` type scale as section chrome rather than a real H1. */
.ccg-interior-hero-part .wp-block-cover__inner-container {
  width: 100%;
}