/* HyperDispatch site: shared styles.
   Most of the look lives inline on the elements in src/pages/.
   This file holds the page basics, the phone menu and the form states. */

/* Fonts are hosted with the site (open licence, see assets/fonts/OFL-*.txt). */
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/onest.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/unbounded.woff') format('woff');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #08132D;
  background: #FFFFFF;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }

a { color: #0F5E9C; }
a:hover { color: #08132D; }
header a:hover, #contact a:hover, #start a:hover { color: #FFFFFF; }

input:focus, select:focus, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #228CD3;
  outline-offset: 2px;
}

/* Questions: plus sign turns when a question is open */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary > span[aria-hidden] { transition: transform 0.15s ease; font-size: 22px; line-height: 1; }
details[open] > summary > span[aria-hidden] { transform: rotate(45deg); }

/* Anchor links land a little below the top edge */
section[id], div[id="top"] { scroll-margin-top: 16px; }

/* Forms */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
[data-form-fields] { display: contents; }
[data-form-done] { display: none; }
form.is-sent [data-form-fields] { display: none; }
form.is-sent [data-form-done] { display: contents; }
/* The thank-you message sits in the middle of the box */
form.is-sent { justify-content: center; }
form.is-sent [role="status"] { align-items: center; text-align: center; }
form.is-sending button[type="submit"] { opacity: 0.6; cursor: progress; }
.form-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  background: #FDECEC;
  color: #8A1C1C;
}

/* Phone menu */
.menu-btn {
  display: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: transparent;
  border: 1.5px solid #5A6C8F;
  border-radius: 8px;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
}

@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .site-nav {
    display: none !important;
    order: 10;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-top: 1px solid #24345A;
    padding-top: 8px;
  }
  .site-nav.is-open { display: flex !important; }
  .site-nav a { padding: 14px 0 !important; font-size: 17px; border-bottom: 0 !important; }
  .header-tools { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 12px !important; }
}

@media (max-width: 640px) {
  /* Less empty space between sections on a phone */
  section[style*="padding: 96px 24px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section > div[style*="padding: 96px 24px"],
  section > div[style*="padding: 88px 24px"] { padding-top: 64px !important; padding-bottom: 56px !important; }
  form[data-lead-form] { padding: 24px !important; max-width: none !important; }
}

@media (max-width: 480px) {
  /* The two dropdowns sit under each other so long words are not cut */
  form[data-lead-form] div[style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  summary > span[aria-hidden] { transition: none; }
}