/* ABOUTME: Site chrome styles: header heights and shrink, mobile drawer, skip link, lockup and the footer/404 menus; tokens come from style.css and no Global Class is assumed. */

/* Ownership of the header. C2's Global Classes own ffdh-header's background, border and inline padding and the flex layout of
   ffdh-header-nav and ffdh-header-actions. The C5.5 part style.css owns the nav-menu items' look (type, the Resources card,
   hover and aria-current colours). This file owns the heights, the shrink, stickiness, the admin-bar offset, the drawer and
   its toggle, hiding the nav at tablet, the keyboard submenu reveal, the skip link, .ffdh-main:focus and the menu columns.

   Cascade: Elementor emits each Global Class as ".elementor .<label>" at (0,2,0), and its sheet's place relative to this one
   varies by document type, so a rule here that must win against a C2 class on the same element reaches (0,3,0) instead of
   relying on order. */

html {
  /* Anchors and focus targets land below the fixed bar instead of under it. */
  scroll-padding-top: calc(var(--header-h-scrolled) + var(--wp-admin--admin-bar--height, 0px) + var(--sp-4));
}

/* ---------- Header bar ---------- */
/* The location holds a constant 72px of flow, so the bar can shrink without moving the page (no layout shift). The bar itself
   is fixed, which is also what keeps it stuck. No transform or filter on the bar: either would trap the fixed drawer inside it. */
.elementor-location-header {
  height: var(--header-h);
}
.elementor-location-header .ffdh-header {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 50;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
  transition: height var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
html.ffdh-scrolled .elementor-location-header .ffdh-header {
  height: var(--header-h-scrolled);
  box-shadow: var(--sh-sm);
}

/* Below 600px WP's admin bar scrolls away (position: absolute) while its height variable still reports 46px, so once the page has scrolled the
   fixed bar sits flush to the top instead of leaving a gap. */
@media (max-width: 600px) {
  html.ffdh-scrolled .elementor-location-header .ffdh-header {
    top: 0;
  }
}

/* The nav-menu wrapper is hidden up to 1080px (the drawer carries the links). C2's ffdh-header-nav sets display: flex as ".elementor .ffdh-header-nav"
   at (0,2,0). Its sheet loads before this file on the pages measured, but Elementor orders a document's CSS and its Global Class
   sheet differently by document type, so the rule outranks the class instead of relying on order: the location class is doubled onto the
   wrapper, (0,3,0). The offline tests load the Global Classes last for the same reason (tests/e2e/helpers/live-classes.mjs). */
@media (max-width: 1080px) {
  .elementor.elementor-location-header .ffdh-header-nav {
    display: none;
  }
}
/* At 360px the logo, a header CTA and the toggle cannot share the bar; the drawer carries the CTA. */
@media (max-width: 479px) {
  .elementor-location-header .ffdh-header-actions .ffdh-btn-primary {
    display: none;
  }
}

/* Keyboard users reach the Resources links. SmartMenus sets inline display and visibility on the submenu and only opens it for
   pointer and arrow-key input, so the reveal needs !important to beat those inline styles. Visibility only: the card's look is C5.5's. */
.elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---------- Skip link and main target ---------- */
.skip-link:focus {
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sp-3));
  left: var(--sp-3);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 44px;
  padding-inline: var(--sp-5);
  clip: auto;
  clip-path: none;
  border-radius: var(--r-pill);
  background: var(--c-ink-900);
  color: var(--c-text-on-dark);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ring);
}
/* main is a programmatic target only. C2's base focus ring is a box-shadow on [tabindex], so clear both. */
.ffdh-main:focus {
  outline: none;
  box-shadow: none;
}

/* ---------- Lockup ---------- */
/* An inline box on its parent's text baseline would carry the line's descent below it and sit above the bar's centre, so it aligns to the line's top. */
.ffdh-logo {
  display: inline-flex;
  flex: none;
  vertical-align: top;
  line-height: 0;
  border-radius: var(--r-xs);
}
.ffdh-logo img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}

/* ---------- Drawer toggle ---------- */
/* Hello's reset gives [type=button] a pink border and a pink hover fill, so every state is stated here at three-class strength. */
.ffdh-drawer-root .ffdh-drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--sp-4);
  border: 2px solid var(--c-ink-900);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-900);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ffdh-drawer-root .ffdh-drawer-toggle:focus {
  background: transparent;
  color: var(--c-ink-900);
}
/* Touch screens keep :hover after a tap, which would leave the toggle filled once the drawer closes. */
@media (hover: hover) {
  .ffdh-drawer-root .ffdh-drawer-toggle:hover {
    background: var(--c-ink-900);
    color: var(--c-text-on-dark);
  }
}
.ffdh-drawer-toggle__icon {
  display: inline-flex;
}
@media (min-width: 1081px) {
  .ffdh-drawer-root .ffdh-drawer-toggle {
    display: none;
  }
}

/* ---------- Drawer sheet ---------- */
html.ffdh-drawer-open {
  overflow: hidden;
}
.ffdh-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--c-ink-900) 60%, transparent);
  animation: ffdh-scrim-in var(--dur) var(--ease-out) both;
}
/* [hidden] must win over the display above. */
.ffdh-drawer[hidden] {
  display: none;
}
@media (min-width: 1081px) {
  .ffdh-drawer {
    display: none;
  }
}
.ffdh-drawer__panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(88vw, 360px);
  height: 100%;
  padding-inline: var(--sp-4);
  padding-block: var(--sp-3) var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
  animation: ffdh-sheet-in var(--dur) var(--ease-out) both;
}
@keyframes ffdh-scrim-in {
  from { opacity: 0; }
}
@keyframes ffdh-sheet-in {
  from { transform: translateX(var(--sp-7)); opacity: 0; }
}
.ffdh-drawer__head {
  display: flex;
  justify-content: flex-end;
  padding-inline-end: var(--sp-1);
}
.ffdh-drawer .ffdh-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink-900);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ffdh-drawer .ffdh-drawer__close:focus {
  background: var(--c-surface);
  color: var(--c-ink-900);
}
@media (hover: hover) {
  .ffdh-drawer .ffdh-drawer__close:hover {
    border-color: var(--c-ink-900);
    background: var(--c-surface-mist);
    color: var(--c-ink-900);
  }
}
.ffdh-drawer__nav {
  flex: 1;
  margin-block: var(--sp-3) var(--sp-5);
}
.ffdh-drawer .ffdh-menu__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffdh-drawer .ffdh-menu__item {
  margin: 0;
  list-style: none;
}
.ffdh-drawer .ffdh-menu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-md);
  color: var(--c-ink-900);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ffdh-drawer .ffdh-menu__link:hover {
  background: var(--c-surface-mist);
  color: var(--c-fuchsia-700);
}
.ffdh-drawer .ffdh-menu__link[aria-current="page"] {
  background: var(--c-fuchsia-50);
  color: var(--c-fuchsia-700);
}
/* A group is a labelled set of links, set off by a hairline instead of a card. */
.ffdh-drawer .ffdh-menu__item--group {
  margin-block: var(--sp-3);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--c-border);
}
.ffdh-drawer .ffdh-menu__group-label {
  margin: 0 0 var(--sp-1);
  padding-inline: var(--sp-4);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}
.ffdh-drawer .ffdh-menu__sublist {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffdh-drawer .ffdh-menu__sublist .ffdh-menu__link {
  min-height: 48px;
  font-size: 1.0625rem;
  font-weight: 500;
}
/* The CTA is styled in full here, never through a Global Class. */
.ffdh-drawer .ffdh-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-fuchsia-600);
  color: var(--c-text-on-dark);
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: var(--sh-cta);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.ffdh-drawer .ffdh-drawer__cta:hover {
  background: var(--c-fuchsia-700);
  color: var(--c-text-on-dark);
  transform: translateY(-2px);
}
.ffdh-drawer .ffdh-drawer__cta:active {
  transform: none;
}

/* ---------- [ffdh_menu]: footer columns and the 404 recovery list, on the ghost ground ---------- */
.ffdh-menu__label {
  margin: 0 0 var(--sp-3);
  color: var(--c-ink-900);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.ffdh-menu > .ffdh-menu__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffdh-menu .ffdh-menu__item {
  margin: 0;
  list-style: none;
}
.ffdh-menu .ffdh-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text-body);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.ffdh-menu .ffdh-menu__link:hover {
  color: var(--c-fuchsia-700);
  text-decoration: underline;
}
.ffdh-menu .ffdh-menu__link[aria-current="page"] {
  color: var(--c-fuchsia-700);
  font-weight: 600;
}
.ffdh-menu .ffdh-menu__group-label {
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
}
.ffdh-menu .ffdh-menu__sublist {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Forced colors ---------- */
/* Backgrounds and shadows are dropped in this mode, so each state that is only a background or a shadow gets a system-colour cue. */
@media (forced-colors: active) {
  html.ffdh-scrolled .elementor-location-header .ffdh-header {
    border-block-end: 1px solid CanvasText;
  }
  .ffdh-drawer__panel {
    border-inline-start: 1px solid CanvasText;
  }
  .ffdh-drawer .ffdh-menu__link[aria-current="page"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .elementor-location-header .ffdh-header,
  .ffdh-drawer-root .ffdh-drawer-toggle,
  .ffdh-drawer,
  .ffdh-drawer__panel,
  .ffdh-drawer .ffdh-drawer__close,
  .ffdh-drawer .ffdh-menu__link,
  .ffdh-drawer .ffdh-drawer__cta,
  .ffdh-menu .ffdh-menu__link {
    animation: none !important;
    transition: none !important;
  }
  .ffdh-drawer .ffdh-drawer__cta:hover {
    transform: none;
  }
}