/* =========================================================================
 * Spoak - Help Scout Docs theme
 * =========================================================================
 *
 * A STANDALONE flattening of the Margot (margot-web) design system for the
 * Help Scout Docs site. Margot's real source is Tailwind v4 (@theme /
 * @utility) and cannot run on Help Scout, so the tokens below are plain CSS
 * custom properties and the type/color "styles" are applied directly to
 * Help Scout's markup instead of via utility classes.
 *
 * Tokens are kept as close to Margot as possible (same names, same values)
 * so this file is easy to keep in sync with margot-web/src/styles/.
 *
 * -- HOSTING --------------------------------------------------------------
 * The @font-face URLs below are ABSOLUTE and point at our CDN:
 *   https://cdn.spoak.com/fonts/faire%20sprig/
 *
 * The font files (.woff2) MUST be served with a CORS header
 * (Access-Control-Allow-Origin: *) - browsers refuse cross-origin font
 * loads otherwise. See README.md for details.
 * ========================================================================= */


/* --------------------------------------------------------------------------
 * 1. Fonts - self-hosted FAIRE Sprig family (from margot-web)
 *
 * url() cannot read a CSS variable, so the host is hard-coded to
 * https://cdn.spoak.com/fonts/faire%20sprig/. font-display: swap renders a
 * system fallback immediately, then swaps in the woff2 (no invisible-text
 * flash).
 * -------------------------------------------------------------------------- */

/* FAIRE Sprig - display serif (headings) */
@font-face {
  font-family: 'FAIRE Sprig';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-Sprig-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FAIRE Sprig';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-Sprig-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* FAIRE Sprig Sans - body */
@font-face {
  font-family: 'FAIRE Sprig Sans';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-SprigSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FAIRE Sprig Sans';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-SprigSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FAIRE Sprig Sans';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-SprigSans-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'FAIRE Sprig Sans';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-SprigSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* FAIRE Sprig Sans Mono - labels / code */
@font-face {
  font-family: 'FAIRE Sprig Sans Mono';
  src: url('https://cdn.spoak.com/fonts/faire%20sprig/FAIRE-SprigSansMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
 * 2. Color primitives  (margot-web/src/styles/tokens.css)
 * -------------------------------------------------------------------------- */
:root {
  /* Olive */
  --color-olive: #9e8e43;
  --color-olive-dark: #73662e;
  /* Citron */
  --color-citron: #ece398;
  /* Blue */
  --color-denim: #425c85;
  --color-bluebell: #3660d6;
  --color-cornflower: #7d9ed1;
  --color-periwinkle: #d4e4fa;
  /* Pink */
  --color-plum: #54152a;
  --color-fuchsia: #d62545;
  --color-blush: #db9d9e;
  /* Green */
  --color-green: #7b8c00;
  --color-green-dark: #525923;
  --color-sage: #bbc098;
  --color-sage-light: #e3e5d1;
  /* Brown / Khaki */
  --color-khaki: #5b4722;
  --color-khaki-dark: #3a2d15;
  --color-khaki-light: #d9cbb6;
  --color-khaki-lighter: #f3ede4;
  /* Cream - light surface scale (1 = darkest cream) */
  --color-cream-1: #fffcf5;
  --color-cream-2: #fffdf7;
  --color-cream-3: #fffdf8;
  --color-cream-4: #fffefb;
  --color-cream-5: #fffefd;
  /* Charcoal - neutral text/surface scale (1 = darkest) */
  --color-charcoal-1: #231711;
  --color-charcoal-2: #49413c;
  --color-charcoal-3: #77706a;
  --color-charcoal-4: #a49e99;
  --color-charcoal-5: #d2cdc7;
  /* Alerts */
  --color-alert-green: #7b8c00;
  --color-alert-yellow: #ebc934;


  /* ------------------------------------------------------------------------
   * 3. Semantic tokens  (margot-web/src/styles/theme.css)
   * ------------------------------------------------------------------------ */
  --color-base: var(--color-cream-1);
  --color-base-light: var(--color-cream-4);
  --color-base-dark: var(--color-khaki-lighter);
  --color-foreground: var(--color-charcoal-1);

  --color-disabled: var(--color-charcoal-4);
  --color-disabled-dark: var(--color-charcoal-3);

  /* Product accents */
  --color-accent-plan: var(--color-olive);
  --color-accent-vibe: var(--color-bluebell);
  --color-accent-mockup: var(--color-plum);
  --color-accent-daydream: var(--color-blush);

  /* Status / feedback */
  --color-status-success: var(--color-green);
  --color-status-warning: var(--color-alert-yellow);
  --color-status-critical: var(--color-fuchsia);
  --color-status-info: var(--color-denim);

  /* Borders & dividers */
  --color-divider: var(--color-charcoal-5);
  --color-border-default: var(--color-charcoal-5);
  --color-border-strong: var(--color-charcoal-4);
  --color-border-focus: var(--color-cornflower);

  /* Docs-specific role tokens (not in Margot - defined here for this site).
   * Links use bluebell, the closest thing Margot has to an interactive blue. */
  --color-link: var(--color-bluebell);
  --color-link-hover: var(--color-denim);
  --color-code-bg: var(--color-khaki-lighter);
  --color-callout-bg: var(--color-cream-4);


  /* ------------------------------------------------------------------------
   * 4. Type scale  (margot-web/src/styles/tokens.css - Typography Primitives)
   *    MOBILE defaults; desktop overrides in the @media block at the bottom.
   *    rem (px / 16) so type scales with the user's root font size.
   * ------------------------------------------------------------------------ */
  --font-sans:
    'FAIRE Sprig Sans', ui-sans-serif, system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'FAIRE Sprig', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:
    'FAIRE Sprig Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --text-3xs: 0.5rem;     /* 8px */
  --text-2xs: 0.5rem;     /* 8px  (mobile) */
  --text-xs: 0.625rem;    /* 10px (mobile) */
  --text-sm: 0.75rem;     /* 12px (mobile) */
  --text-md: 0.875rem;    /* 14px (mobile) */
  --text-lg: 1rem;        /* 16px (mobile) */
  --text-xl: 1.125rem;    /* 18px (mobile) */
  --text-2xl: 1.25rem;    /* 20px (mobile) */
  --text-3xl: 1.5rem;     /* 24px (mobile) */
  --text-4xl: 2rem;       /* 32px (mobile) */
  --text-5xl: 3rem;       /* 48px (mobile) */

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing scale (margot tokens.css) - px to match Figma 1:1, MOBILE. */
  --space-2xs: 1px;
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 6px;
  --space-lg: 8px;
  --space-xl: 12px;
  --space-2xl: 16px;

  /* Radius (MOBILE) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 8px 16px -4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px -4px rgba(0, 0, 0, 0.08);
}


/* --------------------------------------------------------------------------
 * 5. Base - page + canonical text
 *
 * Targeted at Help Scout's "launch" theme (Bootstrap 2 markup). The body
 * font cascades into article text via inheritance, but the theme re-styles
 * articles with ID-scoped rules (`#fullArticle p {...}`), so 6 must match
 * that specificity to win. Source order also matters: this file must load
 * AFTER the theme's launch CSS (it does - Help Scout injects custom CSS last).
 * -------------------------------------------------------------------------- */
html {
  font-size: 100%; /* anchor 1rem = 16px so px/16 math holds */
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-foreground);
  background-color: var(--color-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* --------------------------------------------------------------------------
 * 6. Article typography  (#fullArticle / .contentWrapper)
 *
 * Every rule is scoped under `#fullArticle` (or `.contentWrapper`) so it
 * matches - and, loading later, beats - the launch theme's own
 * `#fullArticle ...` rules (specificity 0,1,0,x). Bare element selectors would
 * lose to them.
 * -------------------------------------------------------------------------- */

/* Article title + h1/h2 - Sprig serif (Margot Headline). Theme paints these
 * `.contentWrapper h1` / `#fullArticle h1..h5` in #222, sans, 30px. */
#fullArticle h1,
#fullArticle .title,
#fullArticle h2,
.contentWrapper h1 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
#fullArticle h1,
#fullArticle .title,
.contentWrapper h1 { font-size: var(--text-4xl); margin: 0 0 0.5em; }
#fullArticle h2 { font-size: var(--text-3xl); margin: 1.5em 0 0.4em; line-height: 1.1; }

/* h3h6 - Sprig Sans bold (Margot Subhead), legible at small sizes. */
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}
#fullArticle h3 { font-size: var(--text-2xl); margin: 1.4em 0 0.35em; }
#fullArticle h4 { font-size: var(--text-xl);  margin: 1.3em 0 0.3em; }
#fullArticle h5,
#fullArticle h6 { font-size: var(--text-lg); margin: 1.2em 0 0.3em; }

/* Body copy - override theme's 14px / #585858. */
#fullArticle p,
#fullArticle li,
#fullArticle dd,
#fullArticle dt,
#fullArticle div,
#fullArticle table,
#fullArticle blockquote {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-charcoal-2);
}
#fullArticle p { margin-bottom: 1.2em; }
#fullArticle ul,
#fullArticle ol { margin: 0 0 1.2em; padding-left: 1.5em; }
#fullArticle li { margin-bottom: 0.5em; }
#fullArticle strong,
#fullArticle b { font-weight: var(--font-weight-bold); }

/* Links - bluebell, underline on hover. */
#fullArticle a,
.contentWrapper a {
  color: var(--color-link);
  text-decoration: none;
}
#fullArticle a:hover,
.contentWrapper a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Inline code + blocks - Sprig Sans Mono. */
#fullArticle code,
#fullArticle kbd,
#fullArticle pre,
#fullArticle samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
#fullArticle code {
  background: var(--color-code-bg);
  color: var(--color-plum); /* override the theme's Bootstrap-red inline code */
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}
#fullArticle pre {
  background: var(--color-code-bg);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}
#fullArticle pre code { color: var(--color-charcoal-2); }
#fullArticle pre code { background: none; padding: 0; }

/* Blockquote - theme uses italic + grey left border; reskin to Spoak callout. */
#fullArticle blockquote {
  font-style: normal;
  margin: 1.5em 0;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-callout-bg);
  border-left: 4px solid var(--color-accent-plan);
  border-radius: var(--radius-md);
}

#fullArticle img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
#fullArticle hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 2em 0;
}

/* Tables */
#fullArticle table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
#fullArticle th,
#fullArticle td {
  border: 1px solid var(--color-border-default);
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
}
#fullArticle th { background: var(--color-base-dark); font-weight: var(--font-weight-bold); }

/* Article meta (last-updated, helpful text) - Margot "Label" mono. */
.articleFoot,
time.lu,
p.help,
.articleRatings-question {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-disabled-dark);
}


/* --------------------------------------------------------------------------
 * 7. Site chrome - launch theme
 *
 * Verified against https://spoak3.helpscoutdocs.com (May 2026). If the theme
 * is ever switched, re-inspect: these ids/classes are theme-specific.
 * -------------------------------------------------------------------------- */

/* ----- Top nav (header#mainNav.navbar) - dark Spoak bar with cream text -----
 * The theme's color picker injects a light bar inline; these override it.
 * The brand image is the *charcoal* wordmark, so we invert it to cream so it
 * reads on the dark bar. (Alternatively, upload a cream/white logo in
 * Help Scout admin and delete the `filter` line.) */
.navbar .navbar-inner {
  background: var(--color-charcoal-1);
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.navbar .brand img {
  display: block;               /* drop inline baseline gap so it centers cleanly */
  max-height: 32px;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1); /* charcoal wordmark -> cream */
}
.navbar .nav li a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream-1);
  text-shadow: none;
}
.navbar .nav li a:hover,
.navbar .nav .active a { color: var(--color-cornflower); }
/* Private-collection lock icon sits before the label; Help Scout's color
 * setting paints it dark (invisible on our dark bar), so force it cream. */
.navbar .nav .icon-private-w { color: var(--color-cream-1); margin-right: 0.35em; }
/* Dropdown carets (Bootstrap border-triangles) - tint cream so they show. */
.navbar .nav .caret {
  border-top-color: var(--color-cream-1);
  border-bottom-color: var(--color-cream-1);
  opacity: 0.55;
}
/* Mobile hamburger bars */
.navbar .btn-navbar { background: transparent; border: none; box-shadow: none; }
.navbar .btn-navbar .icon-bar { background-color: var(--color-cream-1); box-shadow: none; }

/*  Navbar responsive strategy 
 * The launch theme lays the navbar out with Bootstrap floats and only
 * collapses to the hamburger below 980px. With 7 collections (each widened
 * by a lock icon, a caret, and our mono/uppercase styling) that leaves a
 * wide band (980-1200px) where the items can't fit beside the logo and
 * overlap it.
 *
 * Mirroring help.spoak.com, we (1) shrink the links and (2) collapse to the
 * hamburger below the desktop breakpoint - so the inline row only shows when
 * there's real room, and everything else gets the tidy hamburger menu.
 *
 * BREAKPOINT: 1024px (Margot's desktop boundary). Desktop = >=1024;
 * hamburger = <=1023. Keep the two queries (1024 / 1023) in sync if changed.
 *
 * EASY TO ADJUST:
 *   - the 1024 / 1023 values: where the hamburger kicks in.
 *   - link font-size / letter-spacing / padding: how tight the inline row is.
 *  */

/* Bootstrap's clearfix pseudo-elements on .container-fluid (display:table)
 * turn into stray flex items the moment we flex the bar, hijacking
 * space-between and adding phantom gaps. Remove them at every width. */
#mainNav .navbar-inner .container-fluid::before,
#mainNav .navbar-inner .container-fluid::after { display: none !important; }

/* DESKTOP (>=1024px): flex row - logo left, nav right, wraps without overlap. */
@media (min-width: 1024px) {
  #mainNav .navbar-inner { padding: 0 32px; }
  #mainNav .navbar-inner .container-fluid {
    /* launch caps this at max-width:1080px centered; stretch it full-width */
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 32px;
  }
  #mainNav .container-fluid > .brand {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }
  #mainNav .container-fluid > .btn-navbar { display: none !important; }
  #mainNav .container-fluid > .nav-collapse {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0; /* allow the flex item to shrink so the ul can't overflow */
    flex: 1 1 auto;
  }
  #mainNav .nav-collapse > nav { width: 100%; }
  #mainNav .nav-collapse .nav {
    float: none !important;
    position: static !important; /* kill Bootstrap's relative-left offset */
    left: auto !important;
    width: 100% !important;       /* stay inside the parent, don't shrink-wrap */
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;    /* right-align; wraps to a 2nd line if needed */
    gap: 2px 4px;
  }
  #mainNav .nav-collapse .nav > li { float: none !important; }
  #mainNav .nav-collapse .nav > li > a {
    padding: 6px 7px;             /* tighter so 7 items fit beside the logo */
    font-size: var(--text-xs);    /* ~12px */
    letter-spacing: 0.04em;
  }
}

/* BELOW DESKTOP (<=1023px): hamburger menu.
 * Bootstrap's height-based collapse leaves the container at height:0 and
 * renders the menu bottom-anchored (only the last item peeks out), so instead
 * we drive open/close with DISPLAY keyed off the `.in` class that Help Scout's
 * collapse JS toggles. The menu drops full-width below the bar as a clean
 * vertical stack. !important beats Bootstrap's own !important desktop rules. */
@media (max-width: 1023px) {
  /* Compact bar: logo + hamburger on one centered row, menu wraps below.
   * flex-wrap + the nav-collapse at flex-basis:100% (order 3) means the menu
   * drops to its own full-width row when open and takes no space when closed. */
  /* min-height:0 kills launch's 40px floor (it left asymmetric dead space
   * below the logo since the flex row sits at the top of that floor). */
  #mainNav .navbar-inner { padding: 8px 16px; min-height: 0 !important; }
  #mainNav .navbar-inner .container-fluid {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  #mainNav .container-fluid > .brand {
    order: 1;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mainNav .container-fluid > .btn-navbar {
    order: 2;
    display: block !important;
    float: none !important;
    margin: 0 !important;
  }
  #mainNav .container-fluid > .nav-collapse {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    float: none !important;
    height: auto !important;
    overflow: visible !important;
    display: none !important;    /* closed */
  }
  #mainNav .nav-collapse.in { display: block !important; } /* opened by the toggle */
  #mainNav .nav-collapse > nav { width: 100% !important; height: auto !important; }
  #mainNav .nav-collapse .nav {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 4px !important;
  }
  #mainNav .nav-collapse .nav > li { float: none !important; display: block !important; }
  #mainNav .nav-collapse .nav > li > a { display: block; padding: 10px 2px; } /* full-width tap targets */
}

/* ----- Search hero on the home page (section#docsSearch) -----
 * The launch theme's #docsSearch has no heading element, so we add one with
 * ::before. Solid olive surface. */
#docsSearch {
  background: var(--color-olive);
  border: none;
  margin-bottom: 4em;
  padding: 3.5em 1em 4em;
}
#docsSearch::before {
  content: 'How can we help you today?';
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}

/* ----- Search field (form#searchBar) -----
 * Margot Search component: a rounded-RECT input (radius-md, not a pill), 1px
 * border, Sprig Sans placeholder. The hero variant adds a left magnifier
 * icon (Margot puts the glyph on the left). */
#searchBar .search-query {
  font-family: var(--font-sans);
  font-size: max(1rem, var(--text-md)); /* >=16px: stops iOS focus-zoom */
  height: 52px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-base);
  color: var(--color-foreground);
  box-shadow: none;
}
#searchBar .search-query:focus {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px var(--color-periwinkle);
}

/* Hero search: left magnifier icon + a Margot "Black" submit button.
 * The button is a charcoal rounded-RECT (same radius family as the input),
 * uppercase Sprig Mono label, cornflower hover. Position is set EXPLICITLY to
 * override the launch theme's hardcoded `top:18px; height:50px; right:-1px`. */
#docsSearch #searchBar { position: relative; }
#docsSearch #searchBar .search-query {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2377706a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 18px 18px;
  padding-left: 2.8em;
  padding-right: 8em;
}
#docsSearch #searchBar button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: auto;
  margin: 0;
  padding: 0.7em 1.4em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--color-charcoal-1);
  color: var(--color-cream-1);
  border: none;
  border-radius: var(--radius-sm);
  text-shadow: none;
}
#docsSearch #searchBar button:hover { background: var(--color-cornflower); }
#docsSearch #searchBar button .icon-search { display: none; } /* left magnifier covers this */

/* Sidebar search (form#searchBar.sm) - small field with its icon-only button. */
#searchBar.sm button,
#searchBar.sm button:hover { background: transparent; color: var(--color-foreground); }
#searchBar.sm .icon-search { color: inherit; }

/* ----- Article surface (.contentWrapper) ----- */
.contentWrapper {
  background: var(--color-base-light);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  color: var(--color-foreground);
}

/* ----- Category cards (.category-list .category) ----- */
.category-list .category {
  background: var(--color-base-light);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
}
.category-list .category:hover { background: var(--color-periwinkle); }
.category-list .category h3,
.category-list h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-2xl);
}
.category-list .category .article-count { color: var(--color-link); }

/* ----- Popular-articles list (.most-pop-articles) ----- */
.most-pop-articles h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
}
.most-pop-articles .popArticles a { color: var(--color-link); }
.icon-article-doc { display: none; } /* matches prior site - hide the doc glyph */

/* ----- Sort dropdown / selects ----- */
select,
#sortBy {
  font-family: var(--font-sans);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
}

/* ----- Footer ----- */
footer,
footer.center {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-disabled-dark);
}
footer a { color: var(--color-link); }


/* --------------------------------------------------------------------------
 * 8. Desktop overrides (>=1024px) - bump the type scale one step, matching
 *    Margot's mobile->desktop responsive tokens (tokens.css @media block).
 * -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --text-2xs: 0.625rem; /* 10px */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-md: 1rem;      /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 2rem;     /* 32px */
    --text-4xl: 3rem;     /* 48px */
    --text-5xl: 4rem;     /* 64px */

    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 16px;
    --space-2xl: 24px;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
  }
}