/**
 * Chrome for layouts/application: top bar, primary navigation, footer and the
 * exit-intent dialog. Pages never restyle anything in here.
 *
 * The header has two modes, carried over from the Astro build:
 *  .page-header           sits in the flow above the page (solid gradient bar)
 *  .page-header--overlay  floats over a full-bleed hero (transparent bar)
 */
@layer layout {
  /* ----- header ----- */
  .page-header {
    position: relative;
    inset-inline: 0;
    top: 0;
    z-index: var(--z-header);
  }

  .page-header--overlay {
    position: absolute;
  }

  .top-bar {
    display: none;
    background-color: var(--neutral-100);
    box-shadow: var(--shadow);
  }

  .top-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .top-bar__link {
    display: flex;
    align-items: center;
    min-height: calc(var(--leading-lg) + 2 * var(--space-1));
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    font-weight: var(--weight-semibold);
  }

  .top-bar__link .icon { font-size: var(--text-base); }
  .top-bar__link:hover { background-color: var(--neutral-300); }

  .top-bar__link--facebook {
    margin-left: auto;
    color: var(--neutral-100);
    background-color: var(--social-facebook);
  }

  .top-bar__link--facebook .icon { font-size: var(--text-lg); }
  .top-bar__link--facebook:hover { background-color: var(--social-facebook-hover); }

  .main-bar {
    position: relative;
    color: var(--neutral-100);
    background-color: var(--primary-400);
  }

  .main-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: var(--space-4);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    padding-left: var(--space-6);
    max-width: max-content;
    filter: var(--drop-shadow);
  }

  .brand:hover { filter: var(--drop-shadow) brightness(1.25); }

  .brand__logo { width: 3rem; }

  .brand__wordmark {
    display: none;
    text-align: center;
  }

  .brand__camelot {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 100;
    line-height: 0.9rem;
    -webkit-text-fill-color: var(--white);
    -webkit-text-stroke: 0.5px var(--brand-stroke);
  }

  .brand__properties {
    display: block;
    font-family: sans-serif;
    font-size: var(--text-sm);
    font-weight: var(--weight-light);
    text-transform: uppercase;
    scale: 1 0.75;
  }

  .nav-toggle {
    display: flex;
    justify-content: center;
    font-size: var(--text-4xl);
    line-height: var(--leading-none);
    color: var(--white);
  }

  /* ----- navigation: mobile first ----- */
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
  }

  .nav.is-open { display: block; }

  .nav__list {
    min-height: 75vh;
    padding-block: var(--space-4);
    background-color: var(--neutral-100);
    filter: var(--drop-shadow);
  }

  .nav-item {
    position: relative;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--neutral-900);
  }

  .nav-item__row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav-item--has-menu .nav-item__row {
    grid-template-columns: 1fr 1fr;
  }

  .nav-item__link {
    padding: var(--space-2) var(--space-8);
  }

  a.nav-item__link:hover,
  .nav-item__toggle:hover {
    background-color: var(--neutral-200);
  }

  .nav-item__toggle {
    padding: var(--space-2) var(--space-8);
    text-align: right;
  }

  .nav-item__toggle-glyph {
    display: inline-block;
    transition: rotate var(--duration) var(--ease);
  }

  .nav-item.is-open .nav-item__toggle-glyph { rotate: -90deg; }

  .submenu {
    display: none;
    padding-bottom: var(--space-4);
  }

  .submenu::before {
    content: "";
    display: block;
    height: var(--space-1);
    width: calc(100% - var(--space-16));
    margin-inline: auto;
    background-color: var(--primary-400);
  }

  .nav-item.is-open .submenu { display: block; }

  .submenu__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-12);
  }

  .submenu__link:hover { background-color: var(--neutral-200); }
  .submenu__link .icon { font-size: var(--text-xs); }

  /* ----- navigation: desktop ----- */
  @media (min-width: 48em) {
    .top-bar { display: block; }

    .main-bar { background-image: var(--header-gradient); }

    .page-header--overlay .main-bar {
      background-color: transparent;
      background-image: none;
    }

    .main-bar__inner { grid-template-columns: auto 1fr; }

    .brand { padding-left: 0; }

    .brand__wordmark { display: inline-block; }

    .nav-toggle { display: none; }

    .nav,
    .nav.is-open {
      display: block;
      position: relative;
      top: 0;
    }

    .nav__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      min-height: 0;
      padding-block: 0;
      background-color: transparent;
    }

    .nav-item {
      font-size: var(--text-base);
      color: var(--neutral-100);
      filter: var(--drop-shadow);
    }

    .nav-item:hover { z-index: 1; }

    .nav-item__row,
    .nav-item--has-menu .nav-item__row {
      grid-template-columns: 1fr;
      border-bottom: var(--border) solid transparent;
    }

    .nav-item--has-menu:hover .nav-item__row { border-color: var(--primary-400); }

    .nav-item__link { padding: var(--space-2) var(--space-4); }

    .nav-item:hover .nav-item__link {
      color: var(--neutral-900);
      background-color: var(--neutral-100);
    }

    .nav-item__toggle { display: none; }

    .submenu,
    .nav-item.is-open .submenu {
      display: none;
      position: absolute;
      top: 100%;
      min-width: 100%;
      width: max-content;
      padding-bottom: 0;
      color: var(--neutral-900);
      background-color: var(--neutral-100);
    }

    .submenu::before { display: none; }

    .nav-item:hover .submenu { display: block; }

    .submenu__link { padding: var(--space-2) var(--space-4); }
  }

  /* ----- footer ----- */
  .site-footer {
    isolation: isolate;
    padding-top: var(--space-16);
    color: var(--white);
    background-color: var(--neutral-800);
  }

  .site-footer__logo {
    width: 6rem;
    margin: -7rem auto 0;
  }

  .site-footer__columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4) var(--space-32);
    padding-block: var(--space-8);
    text-align: center;
  }

  .site-footer__column {
    font-weight: var(--weight-semibold);
    color: var(--muted-text);
  }

  .site-footer__heading {
    margin-bottom: var(--space-4);
    font-weight: var(--weight-bold);
    color: var(--neutral-100);
  }

  .site-footer__link {
    display: block;
  }

  .site-footer__link:hover {
    color: var(--neutral-100);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    gap: var(--space-4);
  }

  .site-footer__badge {
    width: 3.5rem;
    filter: invert(1);
  }

  .site-footer__badge .badge-backdrop { fill: transparent; }

  .site-footer__rule {
    border-top-width: var(--border);
    border-color: var(--hairline-inverse);
  }

  .site-footer__legal {
    padding-block: var(--space-4);
    text-align: center;
  }

  .site-footer__credit {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
  }

  .site-footer__credit a:hover {
    color: var(--neutral-100);
    text-decoration: underline;
  }

  /* ----- exit-intent dialog ----- */
  .exit-dialog {
    padding-bottom: var(--space-4);
  }

  .exit-dialog__header {
    padding: var(--space-4);
    color: var(--white);
    text-align: center;
    background-color: var(--primary-400);
  }

  .exit-dialog__region {
    text-transform: uppercase;
  }

  .exit-dialog__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
  }

  .exit-dialog__services {
    padding: var(--space-2) var(--space-4) 0;
    margin-top: var(--space-4);
  }

  .exit-dialog__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .exit-dialog__option input {
    position: absolute;
    opacity: 0;
  }

  .exit-dialog__option label {
    display: block;
    height: 100%;
    padding: var(--space-4);
    cursor: pointer;
    border: var(--border) solid var(--neutral-400);
    border-radius: var(--radius);
  }

  .exit-dialog__option input:checked + label { border-color: var(--primary-200); }
  .exit-dialog__option input:focus-visible + label { outline: 2px solid var(--primary-200); }

  .exit-dialog__option-title {
    display: block;
    font-weight: var(--weight-bold);
  }

  .exit-dialog__option-note {
    display: block;
    font-size: var(--text-xs);
  }

  .exit-dialog__email {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .exit-dialog__email input {
    padding: var(--space-4);
    border: var(--border) solid var(--black);
    border-radius: var(--radius);
  }

  .exit-dialog__consent {
    max-width: 100ch;
    padding: var(--space-4);
    font-size: var(--text-xs);
  }

  .exit-dialog__consent a { text-decoration: underline; }

  .exit-dialog__submit {
    display: block;
    width: calc(100% - var(--space-8));
    margin-inline: auto;
  }

  .exit-dialog__note {
    margin-top: var(--space-4);
    padding-inline: var(--space-6);
    font-size: var(--text-xs);
  }
}