/**
 * @file
 * HABD site shell: header, main navigation, the collapsed nav panel, footer,
 * toolbar and preview offsets. Library beauty/habd, theme group, weight 42.
 *
 * Markup: templates/includes/habd/habd-header.html.twig,
 * templates/includes/habd/habd-footer.html.twig and the two menu templates in
 * templates/navigation. Behaviour: js/habd/habd-nav.js.
 *
 * Link colours are set with .habd.habd-<block> selectors so they outrank the
 * reset's .habd.habd a rule (habd-base.css).
 */

/* ==========================================================================
   Root scroll offset. One rule for fragment jumps, scrollIntoView (e.g. the
   bp-revamp jump links) and focus scrolling. It only affects the root
   scroller, so nested scrollers (Chosen lists, modal bodies) are unaffected.
   It overrides core's inline toolbar-only value with a superset.
   ========================================================================== */
html {
  scroll-padding-top: calc(var(--habd-offset-top, 0px) + var(--habd-header-h) + 12px) !important;
}

/* The landmark is focused by the skip link; it is not a control. */
#main-content:focus {
  outline: none;
}

/* Core's skip link becomes position:static on focus; pin it above the header
   instead, below the toolbar. */
body a.skip-link.visually-hidden.focusable:focus,
body a.skip-link.visually-hidden.focusable:active {
  position: fixed !important;
  top: var(--habd-offset-top, 0px);
  left: var(--habd-offset-left, 0px);
  z-index: 495;
  width: auto !important;
  height: auto !important;
  padding: 12px 18px;
  background: var(--habd-forest);
  color: var(--habd-ink-light);
  font: 500 15px/1.2 var(--habd-sans);
  text-decoration: none;
  outline: 2px solid var(--habd-gold);
  outline-offset: -4px;
}

/* Scroll lock while the nav panel is open. */
html.habd-nav-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ==========================================================================
   Header
   ========================================================================== */
.habd.habd-header {
  position: -webkit-sticky;
  position: sticky;
  top: var(--habd-offset-top, 0px);
  /* Keeps the header clear of core's fixed preview bar at scroll 0. */
  margin-top: var(--habd-preview-h, 0px);
  z-index: var(--habd-z-header);
  width: 100%;
  background: var(--habd-forest);
  border-bottom: 1px solid var(--habd-forest-line);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--habd-ink-light-quiet);
  --habd-nav-gap: 22px;
}
/* Fallbacks until habd-nav.js has measured the toolbar (measured in Chrome:
   bar 39px; bar plus open horizontal tray 79px). toolbar-fixed is only set
   from 38.125em up, so phones fall back to 0. */
body.toolbar-fixed .habd.habd-header {
  top: var(--habd-offset-top, 39px);
}
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .habd.habd-header {
  top: var(--habd-offset-top, 79px);
}

/* The header only sticks where that pays. It scrolls with the page:
   - without JS below 1280px, where the wrapped header is 150-225px tall and
     nothing measures it;
   - on short viewports (landscape phones, 400% zoom), where a sticky header
     would cover 30-50% of the screen.
   The root scroll-padding follows, so anchors and focus do not stop short.
   top needs !important to beat the toolbar fallbacks above (0,3,1+). */
@media (max-width: 1279px) {
  html:not(.habd-js) {
    scroll-padding-top: 12px !important;
  }
  html:not(.habd-js) .habd.habd-header {
    position: relative;
    top: auto !important;
  }
}
@media (max-height: 500px) {
  html {
    scroll-padding-top: calc(var(--habd-offset-top, 0px) + 12px) !important;
  }
  .habd.habd-header {
    position: relative;
    top: auto !important;
  }
}

.habd-header__bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--habd-nav-gap);
  max-width: var(--habd-max);
  margin: 0 auto;
  padding: 20px var(--habd-gutter);
}

.habd.habd-header .habd-header__logo {
  display: block;
  flex: none;
  line-height: 0;
}
.habd.habd-header .habd-header__logo img {
  width: 126px;
  height: auto;
}

/* The menu: nav list, divider and account link. At 1280px and up it sits in
   the bar; below that (html.habd-collapse) it is the disclosure panel. */
.habd-header__menu {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--habd-nav-gap);
  margin-left: auto;
}
.habd-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--habd-nav-gap);
}
.habd-nav__item {
  flex: none;
}
.habd.habd-header .habd-nav__link,
.habd.habd-header .habd-header__account-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--habd-ink-light-quiet);
  text-decoration: none;
  transition: color 0.2s ease;
}
.habd.habd-header .habd-nav__link:hover,
.habd.habd-header .habd-header__account-link:hover,
.habd.habd-header .habd-nav__link--lead {
  color: var(--habd-nav-active);
}
/* Current page: brighter text and a gold underline, so it is not signalled by
   colour alone. */
.habd.habd-header .habd-nav__link[aria-current="page"] {
  color: var(--habd-nav-active);
  text-decoration: underline;
  text-decoration-color: var(--habd-gold-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.habd-header__divider {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--habd-forest-line);
}

.habd-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}
.habd.habd-header .habd-header__pill {
  min-height: 44px;
  padding: 13px 22px;
  box-shadow: none;
}

/* The Menu toggle only exists for the collapsed layout. */
.habd.habd-header .habd-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--habd-forest-line);
  border-radius: var(--habd-radius-pill);
  background: transparent;
  color: var(--habd-nav-active);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.habd.habd-header .habd-header__toggle:hover {
  border-color: var(--habd-gold-deep);
}
.habd-header__toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}
.habd-header__toggle-icon line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-origin: 9px 9px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.habd-header__toggle[aria-expanded="true"] .habd-header__toggle-icon line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.habd-header__toggle[aria-expanded="true"] .habd-header__toggle-icon line:nth-child(2) { opacity: 0; }
.habd-header__toggle[aria-expanded="true"] .habd-header__toggle-icon line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 1280-1439: tighter gutters and a gap that scales from 12px to 22px. */
@media (max-width: 1439px) {
  .habd.habd-header {
    --habd-nav-gap: clamp(12px, calc(12px + (100vw - 1280px) * 0.0629), 22px);
  }
  .habd-header__bar {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* 1279 and below: smaller bar (the collapse itself is html.habd-collapse). */
@media (max-width: 1279px) {
  .habd.habd-header {
    --habd-nav-gap: 16px;
  }
  .habd-header__bar {
    padding: 14px 32px;
  }
  .habd.habd-header .habd-header__logo img {
    width: 104px;
  }
}
@media (max-width: 640px) {
  .habd-header__bar {
    padding: 12px 20px;
    gap: 12px;
  }
  .habd.habd-header .habd-header__logo img {
    width: 88px;
  }
  .habd.habd-header .habd-header__pill {
    padding: 11px 16px;
    font-size: 13px;
  }
  .habd-header__actions {
    gap: 8px;
  }
}
@media (max-width: 380px) {
  .habd.habd-header .habd-header__logo img {
    width: 80px;
  }
  .habd.habd-header .habd-header__pill {
    padding: 10px 14px;
  }
  .habd.habd-header .habd-header__toggle {
    padding: 0 12px;
  }
  .habd-header__toggle-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
}

/* Without JS: nothing collapses; the full list wraps under the bar and every
   link stays visible. */
html:not(.habd-js) .habd-header__bar {
  flex-wrap: wrap;
}
html:not(.habd-js) .habd-nav__list {
  flex-wrap: wrap;
  row-gap: 8px;
}
@media (max-width: 1279px) {
  html:not(.habd-js) .habd-header__menu {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0;
    row-gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   Collapsed: html.habd-collapse, set before first paint below 1280px by the
   inline head script, and by the JS overflow guard when the full row does
   not fit (zoom, vertical toolbar tray, fallback fonts).
   -------------------------------------------------------------------------- */
html.habd-collapse .habd.habd-header .habd-header__toggle {
  display: inline-flex;
}
html.habd-collapse .habd-header__menu {
  display: none;
  position: fixed;
  top: var(--habd-panel-top, calc(var(--habd-offset-top, 0px) + var(--habd-header-h)));
  left: var(--habd-offset-left, 0px);
  right: 0;
  bottom: 0;
  z-index: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 24px 32px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--habd-forest-deep);
  border-top: 1px solid var(--habd-forest-line);
}
html.habd-collapse .habd-header__menu[data-open] {
  display: flex;
}
html.habd-collapse .habd-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
html.habd-collapse .habd-nav__item {
  border-bottom: 1px solid var(--habd-forest-line);
}
html.habd-collapse .habd.habd-header .habd-nav__link,
html.habd-collapse .habd.habd-header .habd-header__account-link {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
  font-size: 18px;
}
html.habd-collapse .habd-header__divider {
  display: none;
}
html.habd-collapse .habd-header__account {
  margin-top: 12px;
}
@media (max-width: 640px) {
  html.habd-collapse .habd-header__menu {
    padding: 20px 20px 32px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.habd.habd-footer {
  background: var(--habd-footer);
  color: var(--habd-ink-light-soft);
  font-size: 16px;
}
.habd-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 52px;
  max-width: var(--habd-max);
  margin: 0 auto;
  padding: 68px var(--habd-gutter) 36px;
}
.habd-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.habd-footer__brand {
  display: flex;
  flex: 0 1 300px;
  flex-direction: column;
  gap: 20px;
  max-width: 300px;
  min-width: 0;
}
.habd.habd-footer .habd-footer__logo {
  display: block;
  width: 168px;
  line-height: 0;
}
.habd.habd-footer .habd-footer__logo img {
  width: 168px;
  height: auto;
}
.habd.habd-footer .habd-footer__strapline {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--habd-meta-dark);
}
.habd-footer__nav {
  display: flex;
  gap: 56px;
}
.habd-footer__col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}
.habd.habd-footer .habd-footer__heading {
  font-family: var(--habd-sans) !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.habd-footer__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.habd.habd-footer .habd-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--habd-ink-light-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.habd.habd-footer .habd-footer__link:hover {
  color: var(--habd-ink-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.habd.habd-footer .habd-footer__link[aria-current="page"] {
  color: var(--habd-ink-light);
}
.habd.habd-footer .habd-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--habd-forest-line-2);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--habd-meta-dark);
}

/* Subscribe (webform.custom_form via block.block.webform). The form id and
   element ids are replaced in beauty_form_webform_submission_custom_form_form_alter()
   so the legacy id-based rules in custom.css no longer apply; these rules
   only have to beat Bootstrap's .form-group/.form-control. */
.habd-footer__subscribe {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 4px;
}
.habd.habd-footer .habd-footer__subscribe .block {
  margin: 0;
}
.habd.habd-footer .habd-subscribe__form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 5px;
  /* The field's only visible edge: #8FA396 on #0A1F15 is 6.4:1 (the forest
     line colour was 1.5:1). */
  border: 1px solid var(--habd-meta-dark);
  border-radius: var(--habd-radius-pill);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease;
}
.habd.habd-footer .habd-subscribe__form:focus-within {
  border-color: var(--habd-gold-deep);
}
.habd.habd-footer .habd-subscribe__form .form-item,
.habd.habd-footer .habd-subscribe__form .form-group {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
/* style.css:19079 gives the email field order:2 (an eight-class selector);
   the button simply goes after it. */
.habd.habd-footer .habd-subscribe__form .form-actions {
  flex: none;
  display: flex;
  order: 3;
  margin: 0;
}
.habd.habd-footer .habd-subscribe__form .habd-subscribe__input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--habd-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--habd-ink-light);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
.habd.habd-footer .habd-subscribe__form .habd-subscribe__input::placeholder {
  color: var(--habd-meta-dark);
  opacity: 1;
}
.habd.habd-footer .habd-subscribe__form .habd-subscribe__input:focus {
  outline: none;
  box-shadow: none;
}
.habd.habd-footer .habd-subscribe__form .habd-subscribe__input:focus-visible {
  outline: 2px solid var(--habd-gold);
  outline-offset: 2px;
}
.habd.habd-footer .habd-subscribe__form .habd-subscribe__submit {
  min-height: 44px;
  padding: 0 20px;
  font-size: 13px;
}

/* 1279 and below: brand block above a four-column grid; 44px tap targets. */
@media (max-width: 1279px) {
  .habd-footer__top {
    flex-direction: column;
    gap: 40px;
  }
  .habd-footer__brand {
    flex-basis: auto;
    max-width: none;
  }
  .habd-footer__nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
  .habd-footer__list {
    gap: 0;
  }
  .habd.habd-footer .habd-footer__link {
    min-height: 44px;
  }
}
@media (max-width: 1024px) {
  .habd-footer__inner {
    padding-top: 56px;
    padding-bottom: 32px;
    gap: 44px;
  }
  .habd-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .habd-footer__inner {
    padding-top: 48px;
    padding-bottom: 28px;
    gap: 36px;
  }
  .habd-footer__nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .habd.habd-footer .habd-footer__legal {
    flex-direction: column;
  }
}

/* ==========================================================================
   Legacy header compensation (audited). Offsets that assumed the old
   header#navbar. Nothing else in legacy content is restyled here.
   - Front page (node 314) at 998px and up: the old header was
     position:absolute over the hero (custom.css:4622), and the hero's 210px
     top padding (custom.css:2120) reserved room for it. The new header is in
     flow, so that padding would be a second gap. Measured on the baseline:
     old header 215px, first hero text 51px below it (1440 and 1100); with
     the padding removed the text sits 56px below the new header.
   - Below 998px the old header was already in flow: no change.
   - /search's 210px top padding (custom.css:3424) is page design (the
     background image band), not header compensation: kept.
   ========================================================================== */
@media (min-width: 998px) {
  body.path-frontpage .home-hero-banner {
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   Legacy stacking containment. Persistent legacy layers with z-index above
   the header's 490 would paint over it once it is sticky. Isolating their
   containers keeps the z-index local. Transient overlays (contextual links,
   autocomplete, Chosen, Bootstrap modals and dropdowns) stay above the
   header on purpose.
   ========================================================================== */
.paragraph--type--partner-block,
.leaflet-container {
  isolation: isolate;
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .habd.habd-header {
    position: static;
    margin-top: 0;
  }
  .habd.habd-header .habd-header__toggle {
    display: none !important;
  }
  html.habd-collapse .habd-header__menu {
    display: none !important;
  }
  .habd-footer__subscribe {
    display: none;
  }
}