/*
 * StirLight 2026 site chrome — every public page.
 *
 * Tokens match StirLight Brand 2026 / 05_Web_Tokens/stirlight-2026.css.
 * Corpus articles add stirlight-corpus.css on top of this file.
 *
 * Hard rules:
 * 1. Coral #F9B890 is not a background. Paper #FBFAF8 is the light canvas.
 *    Coral is the accent on dark (header, footer, ink bands).
 * 2. Amber #D15410 is a graphic accent, not body text on light.
 *    Links and filled buttons use Amber Deep #A8410A. White on Amber 500
 *    fails AA.
 * 3. On dark, accent is Coral, never Amber.
 *
 * StirLight-one is ExtraLight and must never be synthesised as bold;
 * hierarchy is size. Until the webfont is hosted, headings fall through
 * to Cabin.
 */

:root {
  --sl-navy-500: #4E5A73;
  --sl-navy-600: #3A445A;
  --sl-navy-700: #2A3243;
  --sl-navy-800: #1C2331;
  --sl-navy-900: #141A25;
  --sl-stone-100: #F2F4F7;
  --sl-stone-200: #E6E9EE;
  --sl-stone-300: #D2D6DE;
  --sl-stone-400: #B4BAC6;
  --sl-stone-500: #939BAC;
  --sl-stone-600: #646D7F;
  --sl-stone-700: #4B5364;
  --sl-warm-100: #FFF4E4;
  --sl-warm-200: #FEDEB8;
  --sl-warm-300: #F9B890;
  --sl-warm-400: #D4936B;
  --sl-warm-500: #D15410;
  --sl-warm-600: #A8410A;
  --sl-warm-700: #7C2F06;
  --sl-paper: #FBFAF8;
  --sl-white: #FFFFFF;

  --sl-canvas: #FBFAF8;
  --sl-surface: #FFFFFF;
  --sl-surface-alt: #F2F4F7;
  --sl-surface-warm: #FFF4E4;
  --sl-text: #2A3243;
  --sl-text-muted: #3A445A;
  --sl-text-subtle: #646D7F;
  --sl-text-invert: #FBFAF8;
  --sl-border: #D2D6DE;
  --sl-border-strong: #939BAC;
  --sl-accent: #D15410;
  --sl-accent-text: #A8410A;
  --sl-accent-quiet: #FEDEB8;
  --sl-focus: #D15410;

  --sl-font-head: "StirLight-one", "Cabin", "Trebuchet MS", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sl-font-sans: "Cabin", "Trebuchet MS", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sl-font-mono: Consolas, Menlo, "DejaVu Sans Mono", "Courier New", monospace;
}

/* ------------------------------------------------------------------ canvas */
body,
#page,
.site,
.site-content,
#content {
  background-color: var(--sl-canvas);
}

::selection {
  background-color: var(--sl-warm-200);
  color: var(--sl-navy-900);
}

/* ------------------------------------------------------------------ type */
body,
button,
input,
select,
textarea {
  font-family: var(--sl-font-sans);
}

h1, h2, h3, h4, h5, h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-title,
.site-title,
.uagb-heading-text,
.uagb-ifb-title,
.uagb-cta__title,
.wp-block-heading {
  font-family: var(--sl-font-head);
  font-weight: 400;
}

h6,
.entry-content h6 {
  font-weight: 400;
}

/* ------------------------------------------------------------------ header chrome (ink + Coral)
 * Solid navy bar on every page except the home transparent overlay.
 * The header inner wrap uses .ast-container; page canvases must not
 * paint Paper over it.
 */
body:not(.ast-theme-transparent-header) .ast-primary-header-bar,
body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap,
body:not(.ast-theme-transparent-header) .ast-above-header-bar {
  background-color: var(--sl-navy-700);
}

.site-header .ast-container,
.site-primary-header-wrap.ast-container,
.ast-mobile-header-wrap .ast-container {
  background-color: transparent;
}

.main-header-menu .menu-link:focus-visible,
.ast-builder-menu .menu-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sl-focus);
  outline-offset: 2px;
}

/* Desktop dropdowns: Astra paints a white panel while header links stay
 * Coral, so submenu labels fail contrast. Use Navy 800 with Paper text;
 * Coral remains the on-dark hover and current-item accent. */
.ast-desktop .main-header-menu .sub-menu,
.ast-desktop .ast-builder-menu .sub-menu,
.ast-theme-transparent-header.ast-desktop .main-header-menu .sub-menu,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu {
  background-color: var(--sl-navy-800);
  background-image: none;
  border-color: var(--sl-navy-900);
  box-shadow: 0 0.5rem 1.25rem rgb(20 26 37 / 0.45);
}

.ast-desktop .main-header-menu .sub-menu .menu-link,
.ast-desktop .ast-builder-menu .sub-menu .menu-link,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item .menu-link,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item > .ast-menu-toggle,
.ast-theme-transparent-header.ast-desktop .main-header-menu .menu-item .sub-menu .menu-link {
  color: var(--sl-text-invert);
  background-color: transparent;
  min-height: 44px;
}

.ast-desktop .main-header-menu .sub-menu .menu-link:hover,
.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-item.focus > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-link:hover,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item.focus > .menu-link,
.ast-theme-transparent-header.ast-desktop .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item.current-menu-item > .menu-link {
  color: var(--sl-warm-300);
  background-color: var(--sl-navy-900);
}

/* Mobile flyout is Paper with Navy labels. Nested items must not inherit
 * the desktop Coral colour, which fails on the light panel. */
.ast-header-break-point .main-header-menu .sub-menu .menu-link,
.ast-header-break-point.ast-flyout-menu-enable .main-header-bar-navigation .main-header-menu .menu-item .sub-menu .menu-link,
.ast-header-break-point.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-link {
  color: var(--sl-text);
  background-color: transparent;
}

/* Keep the mobile menu trigger inside the viewport. Astra's inherited 337px
 * logo otherwise consumes the complete header row on small phones. */
@media (max-width: 921px) {
  #ast-mobile-header .custom-logo-link img.custom-logo {
    width: min(240px, 62vw);
    max-width: 100%;
    height: auto;
  }
}

/* Keep the primary menu on a single header row. Between the desktop breakpoint
 * and roughly 1200px the 337px logo leaves too little room for the menu, so the
 * last item wraps to a second row. */
@media (min-width: 922px) and (max-width: 1200px) {
  #ast-desktop-header .custom-logo-link img.custom-logo {
    width: 250px;
    max-width: 100%;
    height: auto;
  }

  /* The tagline sits under the logo and would otherwise wrap once the logo
   * narrows, making the header row taller than the menu needs. */
  #ast-desktop-header .site-description {
    white-space: nowrap;
    font-size: 1.125rem;
  }
}

/* ------------------------------------------------------------------ footer chrome (ink + Coral) */
.site-footer .widget-title,
.site-footer .wp-block-heading,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer .uagb-heading-text {
  color: var(--sl-warm-300) !important;
  font-family: var(--sl-font-head);
  font-weight: 400 !important;
}

.site-footer .widget-title,
.site-footer .wp-block-heading {
  letter-spacing: 0.02em;
}

.footer-widget-area a:hover,
.site-footer .menu-link:hover,
.ast-footer-copyright a:hover {
  color: var(--sl-warm-200);
}

/* ------------------------------------------------------------------ buttons */
.menu-toggle,
button,
.ast-button,
.ast-custom-button,
.button,
input#submit,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-search__button,
.wp-block-file__button,
.search-submit {
  font-family: var(--sl-font-sans);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.ast-outline-button {
  color: var(--sl-accent-text);
  border-color: var(--sl-accent-text);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.ast-outline-button:hover {
  color: var(--sl-white);
  background-color: var(--sl-accent-text);
  border-color: var(--sl-accent-text);
}

/* ------------------------------------------------------------------ Complianz (was WordPress blue) */
.cmplz-cookiebanner {
  --cmplz_button_accept_background_color: #A8410A;
  --cmplz_button_accept_border_color: #A8410A;
  --cmplz_button_accept_text_color: #ffffff;
  --cmplz_hyperlink_color: #A8410A;
  --cmplz_text_color: #2A3243;
}

.cmplz-btn.cmplz-accept,
.cmplz-btn.cmplz-deny,
.cmplz-btn.cmplz-view-preferences,
.cmplz-btn.cmplz-save-preferences,
.cmplz-btn.cmplz-manage-options {
  font-family: var(--sl-font-sans);
  font-weight: 500;
}

.cmplz-btn.cmplz-accept {
  background-color: var(--sl-warm-600) !important;
  border-color: var(--sl-warm-600) !important;
  color: var(--sl-white) !important;
}

.cmplz-btn.cmplz-accept:hover {
  background-color: var(--sl-warm-700) !important;
  border-color: var(--sl-warm-700) !important;
}

.cmplz-cookiebanner a {
  color: var(--sl-accent-text);
}

/* ------------------------------------------------------------------ What is FSW
 * Spectra stored row-gap/column-gap as 0, so the video sat flush against
 * the copy (stacked on small screens, side-by-side on desktop).
 */
.page-id-2212 .entry-content .uagb-block-bfbecc12 > .uagb-container-inner-blocks-wrap,
.page-id-2212 .entry-content .uagb-block-3b3667ea > .uagb-container-inner-blocks-wrap {
  column-gap: 2rem !important;
  row-gap: 1.5rem !important;
}

.page-id-2212 .entry-content .wp-block-columns {
  gap: 1.5rem 2rem;
}

.page-id-2212 .entry-content .wp-block-video {
  margin: 0;
}

.page-id-2212 .entry-content .wp-block-video video {
  display: block;
  width: 100%;
  vertical-align: top;
}

.page-id-2212 .entry-content .uagb-block-bfbecc12 {
  padding-top: 2.5rem !important;
  padding-bottom: 1.5rem !important;
}

.page-id-2212 .entry-content h3.uagb-ifb-title {
  margin-bottom: 0.75rem !important;
}

.page-id-2212 .entry-content .uagb-ifb-desc {
  line-height: 1.55;
}

.page-id-2212 .entry-content h2.wp-block-heading,
.page-id-2212 .entry-content h3.wp-block-heading {
  margin: 0 0 1rem;
  line-height: 1.25;
}

.page-id-2212 .entry-content .uagb-block-3ae6b86d {
  padding-top: 2rem !important;
  padding-bottom: 0.75rem !important;
}

.page-id-2212 .entry-content .wp-block-uagb-icon-list .wp-block-uagb-icon-list-child {
  margin-bottom: 0.85rem;
}

.page-id-2212 .entry-content .uagb-block-ecc22300 .uagb-ifb-desc {
  margin-bottom: 0;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Careers
 * Open Roles empty state plus a Closed Roles disclosure for expired jobs.
 */
.page-id-2392 .awsm-job-listings {
  border: none;
}

.page-id-2392 .awsm-jobs-none-container {
  text-align: center;
  padding: 0.25rem 1.5rem 1.75rem;
}

.page-id-2392 .awsm-jobs-none-container p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--sl-text-muted);
}

.page-id-2392 .stirlight-closed-roles {
  max-width: 1140px;
  margin: 0 auto 1.5rem;
  padding: 0 50px;
}

.page-id-2392 .stirlight-closed-roles > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 0 1rem;
  font-family: var(--sl-font-head);
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--sl-text);
}

.page-id-2392 .stirlight-closed-roles > summary::-webkit-details-marker {
  display: none;
}

.page-id-2392 .stirlight-closed-roles > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--sl-text-subtle);
  border-bottom: 2px solid var(--sl-text-subtle);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.page-id-2392 .stirlight-closed-roles[open] > summary::after {
  margin-top: 0.15rem;
  transform: rotate(225deg);
}

.page-id-2392 .stirlight-closed-roles-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
}

.page-id-2392 .stirlight-closed-roles-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--sl-border);
  color: var(--sl-text-subtle);
}

.page-id-2392 .stirlight-closed-roles-list a {
  color: var(--sl-text-muted);
  text-decoration: none;
}

.page-id-2392 .stirlight-closed-roles-list a:hover,
.page-id-2392 .stirlight-closed-roles-list a:focus-visible {
  color: var(--sl-accent-text);
  text-decoration: underline;
}

@media (max-width: 921px) {
  .page-id-2392 .stirlight-closed-roles {
    padding: 0 32px;
  }
}

@media (max-width: 544px) {
  .page-id-2392 .stirlight-closed-roles {
    padding: 0 24px;
  }

  .page-id-2392 .stirlight-closed-roles > summary {
    font-size: 1.4rem;
  }
}