/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* Spenser & Williams brand colors */
  --color-ink: #12293d;
  --color-brand: #0b6bcb;
  --color-brand-dark: #084f97;
  --color-accent: #14b87a;
  --color-accent-dark: #0e8f5e;
  --color-sand: #f5f1ea;

  /* Text ramp — ink for headings, body for prose, muted/subtle for support.
     Body copy deliberately stops short of near-black so long passages read
     softer; every step still clears WCAG AA on white. */
  --color-body: #44566a;
  --color-muted: #5a6b7d;
  --color-subtle: #7c8b9b;

  /* Text on ink/photo surfaces. Pure white vibrates against the dark navy,
     so the darkest tint of the sand is used instead. */
  --color-on-dark: #f4f7fa;
  --color-on-dark-muted: rgb(244 247 250 / 76%);

  /* Hairlines, tinted toward the navy so they sit in the palette */
  --color-border: #dfe5ec;
  --color-border-strong: #c6d0da;
  --color-overlay: rgb(18 41 61 / 72%);

  /* semantic aliases (keep existing variable names working) */
  --background-color: #fff;
  --light-color: var(--color-sand);
  --dark-color: var(--color-muted);
  --text-color: var(--color-body);
  --heading-color: var(--color-ink);
  --link-color: var(--color-brand);
  --link-hover-color: var(--color-brand-dark);

  /* fonts */
  --body-font-family: inter, inter-fallback, roboto, system-ui, sans-serif;
  --heading-font-family: fraunces, fraunces-fallback, georgia, serif;

  /* shared text styling */
  --label-letter-spacing: 0.08em;
  --heading-letter-spacing: -0.015em;
  --display-letter-spacing: -0.025em;
  --body-line-height: 1.65;
  --heading-line-height: 1.2;

  /* Type role → token ladder (do not invent new px values — always pick from here)
     Display / page h1     → --heading-font-size-xxl
     Section h2            → --heading-font-size-xl
     Spotlight / h3        → --heading-font-size-l
     Quote / h4            → --heading-font-size-m
     Card / tile title     → --heading-font-size-s
     Lead / hero subtitle  → --body-font-size-l
     Page body             → --body-font-size-m
     UI chrome (nav, search, buttons, footer links) → --body-font-size-s  (see --font-size-ui)
     Meta / captions       → --body-font-size-xs
     Eyebrow / copyright   → --body-font-size-xxs */

  /* Semantic alias so header, search, and footer all reference the same chrome step */
  --font-size-ui: var(--body-font-size-s);

  /* body sizes — mobile-first; desktop values grow at width >= 900px */
  --body-font-size-l: 18px;
  --body-font-size-m: 17px;
  --body-font-size-s: 15px;
  --body-font-size-xs: 13px;
  --body-font-size-xxs: 12px;

  /* heading sizes — mobile-first */
  --heading-font-size-xxl: 36px;
  --heading-font-size-xl: 29px;
  --heading-font-size-l: 24px;
  --heading-font-size-m: 21px;
  --heading-font-size-s: 18px;
  --heading-font-size-xs: 16px;

  /* corner radii — rounded rectangles, one step per surface size */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* every interactive control (button, input, select) shares one radius */
  --radius-control: var(--radius-m);

  /* elevation */
  --shadow-xs: 0 1px 2px rgb(18 41 61 / 6%);
  --shadow-s: 0 2px 8px rgb(18 41 61 / 7%);
  --shadow-m: 0 8px 24px rgb(18 41 61 / 9%);
  --shadow-l: 0 18px 48px rgb(18 41 61 / 14%);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 28%, transparent);

  /* layout — the rail every section, the header and the footer share, plus a
     tighter measure for runs of authored text so lines stay readable */
  --content-max-width: 1080px;
  --prose-max-width: 720px;
  --content-gutter: 24px;

  /* nav heights */
  --nav-height: 64px;
  --breadcrumbs-height: 34px;
  --header-height: var(--nav-height);
}

@media (width >= 900px) {
  :root {
    /* body sizes grow on desktop */
    --body-font-size-l: 20px;
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;
    --body-font-size-xxs: 12px;

    /* heading sizes grow on desktop */
    --heading-font-size-xxl: 52px;
    --heading-font-size-xl: 40px;
    --heading-font-size-l: 30px;
    --heading-font-size-m: 24px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 17px;

    /* layout */
    --content-gutter: 32px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  font-weight: 400;
  line-height: var(--body-line-height);
  font-synthesis-weight: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.appear {
  display: block;
}

header {
  height: var(--header-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

@media (width >= 900px) {
  body[data-breadcrumbs] {
    --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  color: var(--heading-color);
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-wrap: balance;

  /* Clear the fixed header so in-page anchors don't land under the nav */
  scroll-margin: calc(var(--header-height) + 24px);
}

h1 {
  font-size: var(--heading-font-size-xxl);
  letter-spacing: var(--display-letter-spacing);
}

h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }

/* h6 doubles as a small caps-label rather than a sixth heading level */
h6 {
  font-family: var(--body-font-family);
  font-size: var(--heading-font-size-xs);
  font-weight: 700;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

p {
  text-wrap: pretty;
}

/* Bold runs read as emphasis against the softened body colour */
strong,
b {
  color: var(--color-ink);
  font-weight: 600;
}

small {
  font-size: var(--body-font-size-xs);
  color: var(--color-muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2em 0;
}

code,
pre {
  font-size: var(--body-font-size-s);
  font-family: ui-monospace, "sf mono", monaco, "cascadia mono", menlo, monospace;
}

code {
  border-radius: var(--radius-xs);
  padding: 0.15em 0.4em;
  background-color: var(--light-color);
}

pre {
  padding: 16px;
  border-radius: var(--radius-s);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

pre code {
  padding: 0;
  background: none;
}

main > div {
  margin: 40px 16px;
}

::selection {
  background-color: color-mix(in srgb, var(--color-brand) 18%, transparent);
  color: var(--color-ink);
}

/* Global brand focus ring */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Suppress focus ring on mouse / touch interactions that support :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  word-break: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* form controls */
input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

/* Deliberately kept at element-level specificity: the Algolia autocomplete and
   InstantSearch widgets ship their own field styling, and a single class of
   theirs has to be able to win without !important. */
input,
textarea,
select {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  padding: 0.6em 0.9em;
  background-color: var(--background-color);
  color: var(--color-ink);
  font-size: var(--body-font-size-s);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Controls the browser draws itself keep their native box */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="color"],
input[type="file"] {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  accent-color: var(--color-brand);
}

textarea {
  resize: vertical;
}

::placeholder {
  color: var(--color-subtle);
  opacity: 1;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-subtle);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 6px 0;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  padding: 0.6em 1.4em;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  background-color: var(--link-color);
  color: var(--background-color);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

a.button:hover,
button:hover {
  background-color: var(--link-hover-color);
  color: var(--background-color);
  box-shadow: var(--shadow-s);
  text-decoration: none;
  cursor: pointer;
}

a.button:active,
button:active {
  transform: translateY(1px);
  box-shadow: none;
}

a.button:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  background-color: var(--link-hover-color);
}

button:disabled,
button:disabled:hover {
  background-color: var(--color-border);
  border-color: transparent;
  color: var(--color-subtle);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

a.button.secondary:any-link,
button.secondary {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-ink);
  box-shadow: none;
}

a.button.secondary:hover,
button.secondary:hover {
  background-color: color-mix(in srgb, var(--color-brand) 6%, transparent);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

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

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 40px 0;
}

main > .section > div {
  max-width: var(--content-max-width);
  margin: auto;
  padding: 0 var(--content-gutter);
}

main > .section:first-of-type {
  margin-top: 0;
}

/* Blocks (cards, tiles, tables, spotlights) use the full rail, but authored
   prose stops at a comfortable line length instead of stretching to it.
   Paragraphs wrapping an image are left alone — those are full-bleed media. */
main > .section > .default-content-wrapper > :is(
    h1, h2, h3, h4, h5, h6, ul, ol, blockquote,
    p:not(:has(picture, img))
  ) {
  max-width: var(--prose-max-width);
}

/* The page-metadata block is authored in the document body and is only meant
   to feed <head>. Document Authoring passes it through to the body, where it
   would otherwise render as a stray "title / <value>" table above the footer. */
main > .section.metadata-container,
main .metadata {
  display: none;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

main .section.sand {
  background-color: var(--color-sand);
  margin: 0;
  padding: 40px 0;
}

main .section.ink {
  background-color: var(--color-ink);
  color: var(--color-on-dark-muted);
  margin: 0;
  padding: 40px 0;
}

main .section.ink a:any-link {
  color: var(--color-accent);
}

main .section.ink h1,
main .section.ink h2,
main .section.ink h3,
main .section.ink h4,
main .section.ink h5,
main .section.ink h6,
main .section.ink strong,
main .section.ink b {
  color: var(--color-on-dark);
}

main .section.ink small {
  color: var(--color-on-dark-muted);
}

/* Buttons inside .ink sections stay white-outline */
.section.ink a.button:any-link {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.section.ink a.button:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-ink);
}

.section.ink a.button.secondary:any-link {
  background-color: transparent;
  border-color: rgb(255 255 255 / 45%);
  color: var(--color-on-dark);
}

.section.ink a.button.secondary:hover {
  border-color: var(--color-on-dark);
  background-color: rgb(255 255 255 / 10%);
  color: var(--color-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}