/* Owner: civic-editorial foundation. Sections: fonts, tokens, reset, typography, accessibility. */
@font-face {
  font-display: swap;
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/lora-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/lora-bold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/source-sans-pro-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/source-sans-pro-bold.woff2") format("woff2");
}

:root {
  /* Buyer-specified brand palette. No hue outside this set exists in the theme. */
  --rmh-dark: #0e3253;
  --rmh-cyan: #0097ce;
  --rmh-light-blue: #97caeb;
  --rmh-cool-gray: #98989a;
  --rmh-white: #ffffff;

  /* Documented accessible neutrals. See official-v2/DESIGN-SYSTEM.md. */
  --rmh-ink: #102c45;
  --rmh-muted-ink: #3e566b;
  --rmh-surface: #f5f8fa;
  --rmh-line: #cad4db;
  --rmh-danger-surface: #e8f4fb;

  --rmh-radius-sm: 4px;
  --rmh-radius-md: 8px;
  --rmh-shell: 75rem;
  --rmh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-nav: 20;

  --rmh-font-display: "Lora", Georgia, serif;
  --rmh-font-sans: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --rmh-heading-inner: clamp(2.25rem, 5vw, 3.5rem);
  --rmh-heading-section: clamp(1.75rem, 3.5vw, 2.5rem);

  /* --- Wave 1 elevation: derived surfaces (rgba of the brand blues only) --- */
  --rmh-radius-pill: 999px;
  --rmh-veil-solid: rgba(14, 50, 83, 0.94);
  --rmh-veil-strong: rgba(14, 50, 83, 0.78);
  --rmh-veil-soft: rgba(14, 50, 83, 0.55);
  --rmh-hairline: rgba(14, 50, 83, 0.14);
  --rmh-hairline-strong: rgba(14, 50, 83, 0.28);
  --rmh-hairline-reverse: rgba(151, 202, 235, 0.4);
  --rmh-wash-reverse: rgba(151, 202, 235, 0.08);

  /* --- Wave 1 elevation: fluid modular type scale --- */
  /* Steps 1-5 climb on a ~1.2 ratio; step 6 is the deliberate display break. */
  --rmh-type-1: 0.78rem;
  --rmh-type-2: 0.9rem;
  --rmh-type-3: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --rmh-type-4: clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --rmh-type-5: clamp(1.45rem, 1.28rem + 0.8vw, 2rem);
  --rmh-type-6: var(--rmh-heading-inner);
  --rmh-type-display: clamp(3rem, 7vw, 4.75rem);

  /* --- Wave 1 elevation: fluid 4px spacing scale --- */
  --rmh-space-1: 0.25rem;
  --rmh-space-2: 0.5rem;
  --rmh-space-3: 0.75rem;
  --rmh-space-4: 1rem;
  --rmh-space-5: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --rmh-space-6: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --rmh-space-7: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  --rmh-space-8: clamp(2.5rem, 1.5rem + 4vw, 4rem);

  /* Semantic aliases for the same eight steps, plus one band-scale step above them. */
  --rmh-space-3xs: var(--rmh-space-1);
  --rmh-space-2xs: var(--rmh-space-2);
  --rmh-space-xs: var(--rmh-space-3);
  --rmh-space-sm: var(--rmh-space-4);
  --rmh-space-md: var(--rmh-space-5);
  --rmh-space-lg: var(--rmh-space-6);
  --rmh-space-xl: var(--rmh-space-7);
  --rmh-space-2xl: var(--rmh-space-8);
  --rmh-space-3xl: clamp(3rem, 2rem + 5vw, 5rem);

  /* --- Wave 1 elevation: shadow trio, dark-blue derived only --- */
  --rmh-shadow-sm: 0 1px 2px rgba(14, 50, 83, 0.06), 0 2px 6px rgba(14, 50, 83, 0.07);
  --rmh-shadow-md: 0 2px 4px rgba(14, 50, 83, 0.07), 0 10px 24px rgba(14, 50, 83, 0.13);
  --rmh-shadow-lg: 0 4px 10px rgba(14, 50, 83, 0.1), 0 26px 56px rgba(14, 50, 83, 0.22);

  /* --- Wave 1 elevation: motion register (civic premium) --- */
  --rmh-duration-fast: 120ms;
  --rmh-duration-base: 220ms;
  --rmh-duration-slow: 420ms;
  --rmh-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rmh-ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);

  /* --- Wave 1 elevation: content-addressed civic icon sprite (one file, 24px grid) --- */
  /* Consumed as a mask so every glyph inherits `currentColor` and adds no new hue. */
  --rmh-icon-search: url("../assets/icons.ea6e855e3585.svg#view-search");
  --rmh-icon-alert: url("../assets/icons.ea6e855e3585.svg#view-alert");
  --rmh-icon-roads: url("../assets/icons.ea6e855e3585.svg#view-roads");
  --rmh-icon-water: url("../assets/icons.ea6e855e3585.svg#view-water");
  --rmh-icon-waste: url("../assets/icons.ea6e855e3585.svg#view-waste");
  --rmh-icon-permit: url("../assets/icons.ea6e855e3585.svg#view-permit");
  --rmh-icon-tax: url("../assets/icons.ea6e855e3585.svg#view-tax");
  --rmh-icon-recreation: url("../assets/icons.ea6e855e3585.svg#view-recreation");
  --rmh-icon-council: url("../assets/icons.ea6e855e3585.svg#view-council");
  --rmh-icon-document: url("../assets/icons.ea6e855e3585.svg#view-document");
  --rmh-icon-phone: url("../assets/icons.ea6e855e3585.svg#view-phone");
  --rmh-icon-mail: url("../assets/icons.ea6e855e3585.svg#view-mail");
  --rmh-icon-arrow: url("../assets/icons.ea6e855e3585.svg#view-arrow");
  --rmh-icon-external: url("../assets/icons.ea6e855e3585.svg#view-external");
  --rmh-icon-check: url("../assets/icons.ea6e855e3585.svg#view-check");
  --rmh-icon-clock: url("../assets/icons.ea6e855e3585.svg#view-clock");
  --rmh-icon-resident: url("../assets/icons.ea6e855e3585.svg#view-resident");
  --rmh-icon-business: url("../assets/icons.ea6e855e3585.svg#view-business");
  --rmh-icon-visitor: url("../assets/icons.ea6e855e3585.svg#view-visitor");
  --rmh-icon-administrator: url("../assets/icons.ea6e855e3585.svg#view-administrator");
  --rmh-icon-editor: url("../assets/icons.ea6e855e3585.svg#view-editor");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color: var(--rmh-ink);
  font-family: var(--rmh-font-sans);
  font-size: 100%;
  line-height: 1.55;
  scroll-behavior: auto;
}

body {
  background: var(--rmh-white);
  font-family: var(--rmh-font-sans);
  font-size: var(--rmh-type-3);
  margin: 0;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: var(--rmh-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
input[type="submit"] {
  cursor: pointer;
  touch-action: manipulation;
}

:focus-visible {
  box-shadow: 0 0 0 6px var(--rmh-dark);
  outline: 3px solid var(--rmh-white);
  outline-offset: 3px;
}

::selection {
  background: var(--rmh-light-blue);
  color: var(--rmh-dark);
}

h1,
h2 {
  color: var(--rmh-dark);
  font-family: var(--rmh-font-display);
  line-height: 1.08;
  margin-block: 0 0.6em;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

h3 {
  color: var(--rmh-dark);
  line-height: 1.15;
  margin-block: 0 0.6em;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

h1 {
  font-size: var(--rmh-heading-inner);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--rmh-heading-section);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--rmh-type-4);
  letter-spacing: -0.015em;
}

p {
  margin-block: 0 1rem;
  max-width: 72ch;
  text-wrap: pretty;
}

/* Section eyebrow. Small, tracked, always paired with a visible rule. */
.context-label {
  align-items: center;
  color: var(--rmh-muted-ink);
  display: flex;
  gap: var(--rmh-space-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.context-label::before {
  background: var(--rmh-cyan);
  content: "";
  flex: 0 0 auto;
  height: 3px;
  width: 2.25rem;
}

.shell {
  margin-inline: auto;
  max-width: var(--rmh-shell);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  width: 100%;
}

.shell--narrow {
  max-width: 52rem;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background: var(--rmh-white);
  color: var(--rmh-dark);
  font-weight: 700;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: 0;
  transform: translateY(-120%);
  transition: transform 180ms var(--rmh-ease);
  z-index: calc(var(--z-nav) + 1);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (max-width: 35rem) {
  :root {
    --rmh-heading-inner: clamp(1.125rem, 10vw, 2.75rem);
    --rmh-heading-section: clamp(1rem, 8vw, 2rem);
  }

  .context-label {
    display: block;
    overflow-wrap: anywhere;
  }

  .context-label::before {
    display: block;
    margin-bottom: var(--rmh-space-xs);
  }
}