/*
 * Brand fonts and colours, from the brand guidelines.
 * Loaded last in <head> (after tic.css, page <style> blocks and site CSS), so
 * it overrides them without rebuilding tic.css. Selectors start with `html`
 * so they also win over component CSS Astro bundles later in the page.
 *
 * Colours: amber #FFB603 · charcoal #292523 · background #FFFFFF
 *
 * Type — Montserrat; sizes are the guideline sizes on desktop (≥1024px),
 * the large headings step down on smaller screens:
 *   Main page titles         800  44px   h1
 *   Main subheadings         700  34px   section h2s
 *   Introductory paragraphs  400  19px   the lead paragraph under the h1
 *   Photo headlines          800  29px   white headlines on dark/photo bands
 *   Section headings         700  16px   card, block and footer headings
 *   Descriptions             400  14px   text-sm
 *   Smaller descriptions     400  12px   text-xs
 *   Bottom benefit labels    700  13px   the strip under the homepage hero
 */

/* ---- Fonts ---- */
html, html body, html button, html input, html select, html textarea {
  font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
html h1, html h2, html h3, html h4, html .font-display,
html .prose-content :is(h1, h2, h3, h4, h5, h6, th) {
  font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Main page titles */
html h1, html h1[class] {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Main subheadings */
html h2.text-3xl, html h2.text-2xl {
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Photo headlines */
html h2.text-2xl.text-white, html h2.text-3xl.text-white {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Introductory paragraphs */
html p.tic-hero__lede, html p.tic-ahero__lede, html h1 ~ p.text-lg {
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Section headings */
html h3[class], html h2.text-xl, html h2.text-lg, html h2.text-base, html h2.tic-ahero__sub {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

/* Descriptions (text-sm, 14px) and smaller descriptions (text-xs, 12px)
   already match the guidelines in tic.css. */

/* Bottom benefit labels */
html p.tic-bar__label {
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.35;
}

@media (min-width: 640px) {
  html h1, html h1[class] { font-size: 2.375rem; }
  html h2.text-3xl, html h2.text-2xl { font-size: 1.875rem; }
  html h2.text-2xl.text-white, html h2.text-3xl.text-white { font-size: 1.6875rem; }
  html p.tic-hero__lede, html p.tic-ahero__lede, html h1 ~ p.text-lg { font-size: 1.1875rem; }
}

@media (min-width: 1024px) {
  html h1, html h1[class] { font-size: 2.75rem; }
  html h2.text-3xl, html h2.text-2xl { font-size: 2.125rem; }
  html h2.text-2xl.text-white, html h2.text-3xl.text-white { font-size: 1.8125rem; }
}

/* Montserrat is wider than Inter: keep the header phone and quote buttons on one line. */
html header > .container-page > div > a { white-space: nowrap; }
html header nav[aria-label="Primary"] > ul > li > a { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.9rem; }

/* ---- Colours ---- */
html body { background-color: #FFFFFF; color: #292523; }
html h1, html h2, html h3, html h4 { color: #292523; }
html .prose-content { --tw-prose-headings: #292523; --tw-prose-bold: #292523; --tw-prose-bullets: #FFB603; }

/* charcoal */
html .text-ink,
html .btn-secondary, html .btn-ghost, html .btn-primary,
html .tic-ahero__title, html .tic-ahero__sub, html .tic-ahero__ticks li, html .tic-ahero__form h3,
html .tic-ahero__form .form-input,
html .tic-hero__title, html .tic-hero__offer-title, html .tic-hero__offer-tag, html .tic-bar__label,
html .tic-btn--gold, html .tic-btn--ghost,
html:has(.tic-hero, .tic-ahero) header > .container-page a[href^="tel:"] { color: #292523; }
html .bg-ink, html .btn-secondary:hover { background-color: #292523; }
/* The hero pages restyle the header quote button dark. */
html:has(.tic-hero, .tic-ahero) header > .container-page a[href*="get-a-quote"],
html:has(.tic-hero, .tic-ahero) header > .container-page a[href*="#quote"] { background-color: #292523; color: #FFFFFF; }
html .btn-secondary, html .tic-btn--ghost:hover { border-color: #292523; }
html .btn-secondary:hover { color: #FFFFFF; }

/* amber */
html .text-moss-400, html .tic-hero__accent { color: #FFB603; }
html .bg-moss-400, html .btn-primary,
html .tic-btn--gold, html .tic-hero__offer-tag,
html .tic-ahero__form .btn-primary, html .tic-ahero__form button[type=submit] { background-color: #FFB603; }
html .bg-moss-400\/10 { background-color: rgb(255 182 3 / 0.1); }
html .border-moss-400, html .btn-ghost:hover, html .tic-ahero__form .form-input:focus { border-color: #FFB603; }
html .border-moss-400\/40 { border-color: rgb(255 182 3 / 0.4); }
html .via-moss-400 { --tw-gradient-to: rgb(255 182 3 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FFB603 var(--tw-gradient-via-position), var(--tw-gradient-to); }
html .tic-ahero__form { border-top-color: #FFB603; }
html .tic-hero__offer { border-left-color: #FFB603; }
html .tic-offer__inner { background-color: #292523; border-top-color: #FFB603; }
html .tic-offer__badge, html .tic-offer__cta { background-color: #FFB603; color: #292523; }
html [stroke="#E5A11C"] { stroke: #FFB603; }
html [fill="#E5A11C"] { fill: #FFB603; }

/* Header: phone numbers and menu items on one line, and on large screens the wider header the hero
   pages already use, so the menu fits beside the logo on every page. */
html header a[href^="tel:"], html header nav[aria-label="Primary"] ul > li > a { white-space: nowrap; }
@media (min-width: 1280px) {
  html header > .container-page, html header > div > .container-page { max-width: 1320px; }
  html header nav[aria-label="Primary"] > ul { gap: 0; }
}