/* ==========================================================================
   CogniPrism site chrome system  —  v3.1 (10/2026)
   Sixth companion file. Load after icons and surfaces.
   Filename stays cogniprism-nav.css so functions.php does not need editing.

   Covers site chrome: the header bar, the navigation, its dropdown panels,
   the mobile overlay, and the footer.

   CHANGED FROM v2:
     · Header bar: Ivory with a soft shadow underneath, so it separates from
       every hero background (most heroes are Champagne, like the old header).
     · Top-level links: Navy, in the small-caps eyebrow face (Alegreya Sans SC).
       Hover and current page: Baltic with a Robin underline.
     · Dropdown: Ivory panel with a shadow. No top rule, no side rule. Each
       link shows its menu Description on a second line. Hover and current
       page: Robin tint behind the item.
     · Mobile overlay: Ivory to match the bar; no hairlines or side rule;
       descriptions shown under each page.
     · Footer (section 5, v3.1): Ivory to match the header, faint top-edge
       shadow, lighter bottom-bar line. Replaces Pale Oak.

   Palette variables come from cogniprism-icons.css and cogniprism-surfaces.css.
   Nothing is redefined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Header bar
   The header is the Site Editor template part: a Group holding the logo row.
   The Group's own background (set in the editor) is overridden here so this
   file stays the single source for the header's look.
   If the Group is set to Sticky in the editor, it keeps that: position is only
   set when the Group is not sticky.
   -------------------------------------------------------------------------- */

header.wp-block-template-part > .wp-block-group {
  background-color: var(--cp-ivory) !important;
  box-shadow: 0 1px 0 rgba(7, 53, 91, .08), 0 6px 18px -10px rgba(7, 53, 91, .35);
  z-index: 20;
}
header.wp-block-template-part > .wp-block-group:not(.is-position-sticky) {
  position: relative;
}


/* --------------------------------------------------------------------------
   1. Top-level links (desktop)
   Small caps carry the brand into the nav without adding a colour. Navy at
   rest, Baltic on hover, and a 2px Robin underline marks hover and the
   current page. Scoped to the closed menu, so the mobile overlay keeps its
   own rules (section 3).
   -------------------------------------------------------------------------- */

.wp-block-navigation {
  --cp-nav-gap: 28px;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-family: 'Alegreya Sans SC', serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cp-navy);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content {
  color: var(--cp-baltic);
  border-bottom-color: var(--cp-robin);
  text-decoration: none;
}

/* The submenu chevron follows its label. */
.wp-block-navigation__submenu-icon { color: currentColor; }

/* Focus ring. Visible, and in the palette rather than the browser default. */
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--cp-cerulean);
  outline-offset: 3px;
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   2. Dropdown panel (desktop)
   Ivory panel lifted by a shadow. No rules on any edge.

   SPECIFICITY NOTE. WordPress core styles this panel through
     .wp-block-navigation .has-child .wp-block-navigation__submenu-container
   which is three classes deep. The selectors below run deeper to clear it.
   Do not shorten them.

   DESCRIPTIONS. Each link's Description field (set in the Site Editor on the
   link itself) prints under its label. WordPress hides descriptions by
   default, which is why display is forced on here.
   -------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
  min-width: 300px;
  width: max-content;
  max-width: 380px;
  background-color: var(--cp-ivory);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 14px 34px -10px rgba(7, 53, 91, .35);
  padding: 10px;
  margin-top: 14px;
}

/* The gap between the header and the panel would otherwise break the hover
   before the pointer arrives. This bridges it invisibly. */
.wp-block-navigation .wp-block-navigation__container .has-child:hover > .wp-block-navigation__submenu-container::before,
.wp-block-navigation .wp-block-navigation__container .has-child:focus-within > .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 10px 14px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cp-navy);
  white-space: nowrap;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
  background-color: var(--cp-tint-robin);
  color: var(--cp-baltic);
  text-decoration: none;
}

/* Each item fills the panel, so the hover and current-page tint spans the
   full width rather than stopping at the end of the label. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  width: 100%;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  width: 100%;
  box-sizing: border-box;
}

/* The description line under each dropdown link. */
.wp-block-navigation .wp-block-navigation-item__description {
  display: block !important;
  margin-top: 2px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cp-slate);
  white-space: nowrap;
}
.wp-block-navigation .wp-block-navigation-item__label { display: block; }


/* --------------------------------------------------------------------------
   3. Mobile overlay
   Ivory, so the overlay reads as the header expanded. Hierarchy comes from
   type and indentation only: no hairlines, no side rule.
   -------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--cp-ivory);
  padding: 24px 28px 48px;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  padding-top: 12px;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
  gap: 6px;
  align-items: flex-start;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
}

/* Parent items: the same small caps as the desktop bar. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-family: 'Alegreya Sans SC', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cp-navy);
  padding: 12px 0;
  width: 100%;
}

/* Child items: indented, body face, description underneath. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
  min-width: 0;
  width: 100%;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 14px;
  padding: 0 0 0 16px;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  white-space: normal;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--cp-navy);
  padding: 10px 0;
  background: transparent;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: transparent;
  color: var(--cp-baltic);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description {
  white-space: normal;
}

/* Open and close controls. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--cp-navy);
}

.wp-block-navigation__responsive-container-close {
  padding: 8px;
}


/* --------------------------------------------------------------------------
   4. Header CTA button
   The button inherits Cerulean from theme.json. This only stops it
   shrinking below its label when the nav row gets tight.
   -------------------------------------------------------------------------- */

.wp-block-navigation + .wp-block-buttons .wp-block-button__link {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .wp-block-navigation + .wp-block-buttons .wp-block-button__link {
    font-size: .875rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}


/* --------------------------------------------------------------------------
   5. Footer
   Ivory, matching the header, so the page is framed by the same colour at
   the top and the bottom. Pages that end on an Ivory section would blend into
   it, so a faint shadow along the footer's top edge separates the two.

   The footer Group's own background (Pale Oak, set in the editor) is
   overridden here, so this file stays the single source for the footer.
   Links run Baltic (passes body-text contrast on Ivory); body lines Slate.
   theme.json sets links to Cerulean globally, which is why the override
   below exists.
   -------------------------------------------------------------------------- */

.cp-footer {
  font-size: .9375rem;
  background-color: var(--cp-ivory) !important;
  box-shadow: inset 0 12px 16px -14px rgba(7, 53, 91, .28);
}

.cp-footer a {
  color: var(--cp-baltic);
  text-decoration: none;
  transition: color .14s ease;
}

.cp-footer a:hover,
.cp-footer a:focus-visible {
  color: var(--cp-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Column headings. h6 is already the eyebrow style in theme.json: Alegreya
   Sans SC, Baltic, letterspaced. Only the spacing needs setting here. */
.cp-footer h6 {
  margin: 0 0 16px;
}

.cp-footer ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.cp-footer li + li {
  margin-top: 11px;
}

/* Bottom bar. A faint line separates it from the link columns. */
.cp-footer__bottom {
  border-top: 1px solid rgba(7, 53, 91, .12);
  margin-top: 34px;
  padding-top: 21px;
  font-size: .8125rem;
  color: var(--cp-slate);
}

.cp-footer__bottom p {
  margin: 0;
}

.cp-footer__legal a + a {
  margin-left: 18px;
}

/* The social icon set sits optically low next to a line of text. */
.cp-footer .wp-block-social-links {
  margin: 0;
}

@media (max-width: 781px) {
  .cp-footer__bottom {
    text-align: left;
  }
  .cp-footer__legal {
    margin-top: 12px;
  }
}