/* ==========================================================================
   Flatrock System — Zendesk Help Center theme
   Token layer generated from the Figma file. Every custom property below has
   a matching Figma variable of the same name. Do not hand-edit values here
   that the manifest controls — change them in Settings instead.
   ========================================================================== */

/* --- Web fonts ---------------------------------------------------------- */
/* Care Sans VF — one variable file covering the whole family. Three axes:
   wght 400–900, wdth 50–150, opsz 10–24. The family's Condensed / Text /
   Display cuts are WIDTH stops, not optical sizes: Condensed is wdth 50,
   Text is wdth 100, Display is wdth 150. Every named instance ships at
   opsz 10, so optical size is left on the browser default (auto).
   Assets are referenced with Zendesk's $assets- prefix, which is the
   filename with every dot and separator flattened to a hyphen. */
@font-face {
  font-family: 'Care Sans VF';
  src: url(/hc/theming_assets/01M0V76GGQAGB63Q02K1PQRBH3) format('woff2');
  font-weight: 400 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
/* Italic is a second file rather than an axis on the Roman, so it needs its
   own face. Same three axes and the same ranges; only the named instances
   differ (the italic ships Text cuts only). Without this, browsers synthesise
   a slanted Roman for <em> in article bodies. */
@font-face {
  font-family: 'Care Sans VF';
  src: url(/hc/theming_assets/01M0V76GGA4SM6JYGBEE8EZ9M0) format('woff2');
  font-weight: 400 900;
  font-stretch: 50% 150%;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens: settings-driven ------------------------------------------- */
:root {
  --color-brand-primary:      #000000;
  --color-brand-secondary:    #66AEA2;
  --color-action-default:     #000000;

  --color-surface-page:       #FAF8F5;
  --color-surface-raised:     #FFFFFF;
  --color-surface-muted:      #EDEBE9;
  --color-surface-tint:       #ECF1E5;
  --color-surface-tint-soft:  #ECF1E5;
  --color-surface-topbar:     #FAF8F5;
  --color-surface-footer:     #FAF8F5;

  --color-text-primary:       #000000;
  --color-text-secondary:     #636363;
  --color-text-muted:         #707070;
  --color-text-subtle:        #979797;
  --color-text-inverse:       #FFFFFF;
  --color-text-link:          #000000;
  --color-text-on-footer:     #000000;

  --color-border-default:     #E1DFDC;
  --color-border-strong:      #DDDDDD;
  --color-border-warm:        #F0DAC3;

  --radius-none:  0px;
  --radius-sm:    2px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-xxl:   32px;
  --radius-full:  999px;
  --layout-border-width: 1px;

  --font-base:    'Care Sans VF', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.35;

  /* Width axis stops — the family's named cuts, as font-stretch values */
  --font-width-condensed: 50%;
  --font-width-text:      100%;
  --font-width-display:   150%;

  --layout-container-max: 1200px;
  --section-rhythm: 120px;

  /* --- Tokens: fixed ---------------------------------------------------- */
  --color-feedback-info:    #5bc0de;
  --color-feedback-success: #00cc99;
  --color-feedback-warning: #ffae1b;
  --color-feedback-danger:  #ff5252;

  --spacing-0: 0;    --spacing-1: 4px;  --spacing-2: 8px;   --spacing-3: 12px;
  --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px;  --spacing-7: 32px;
  --spacing-8: 40px; --spacing-9: 48px; --spacing-10: 64px; --spacing-11: 80px;
  --spacing-12: 120px;

  /* Height of the search input and its submit; the submit uses it for width
     too, so the icon button is a circle. One knob keeps the two aligned. */
  --search-control: 52px;

  --layout-gutter: 30px;
  --layout-margin-mobile: 15px;
  --layout-margin-desktop: 30px;

  /* Type ramp — mirrors the twelve Figma text styles */
  --type-display-hero:        70px;
  --type-display-hero-mobile: 32px;
  --type-heading-page:        50px;
  --type-heading-section:     32px;
  --type-heading-card:        24px;
  --type-heading-sub:         18px;
  --type-body-large:          20px;
  --type-body-small:          16px;
  --type-meta:                12px;
  --type-label:               10px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-stretch: var(--font-width-text);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }
ul,ol { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--layout-container-max);
  margin: 0 auto;
  padding: 0 var(--layout-margin-mobile);
}
@media (min-width: 768px) { .container { padding: 0 var(--layout-margin-desktop); } }

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

/* --- Button — Figma: Button -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-full);
  font-size: var(--type-body-small); font-weight: 600; line-height: 1.5;
  text-decoration: none; cursor: pointer; border: var(--layout-border-width) solid transparent;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .82; text-decoration: none; }
.btn--primary { background: var(--color-action-default); color: var(--color-text-inverse); }
.btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-brand-primary); }
.btn--ghost { background: transparent; color: var(--color-text-link); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn--small { padding: var(--spacing-2) var(--spacing-4); }
.btn[disabled], .btn--disabled { opacity: .4; pointer-events: none; }

/* --- Top bar — Figma: Top Bar ------------------------------------------ */
.topbar { background: var(--color-surface-topbar); }
.topbar__inner { display: flex; align-items: center; gap: var(--spacing-6); padding: var(--spacing-5); }
.topbar__logo { font-size: var(--type-heading-card); font-weight: 600; text-decoration: none; }
.topbar__logo img { max-height: 32px; width: auto; }
.topbar__spacer { flex: 1; }
.topbar__nav { display: flex; align-items: center; gap: var(--spacing-6); }
.topbar__nav a { font-size: var(--type-body-small); text-decoration: none; }
.topbar__nav a:hover { text-decoration: underline; }
/* No burger: the bar carries its two items at every width. Below 768px the
   locale link drops and the contact button shrinks to the --small padding, so
   it still fits beside the logo on a narrow screen. */
@media (max-width: 767px) {
  .topbar__inner { gap: var(--spacing-4); padding: var(--spacing-5); }
  .topbar__locale { display: none; }
  .topbar__cta { padding: var(--spacing-2) var(--spacing-4); }
}

/* --- Callout ------------------------------------------------------------ */
.callout { margin: var(--spacing-6) 0 0; padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-surface-tint); border-radius: var(--radius-lg);
  font-size: var(--type-body-small); }

/* --- Hero — Figma: Hero Unit ------------------------------------------- */
.hero { background: var(--color-surface-page); padding: var(--spacing-10) 0; text-align: center; }
@media (min-width: 768px) { .hero { padding: var(--section-rhythm) 0; } }
.hero-compact { background: var(--color-surface-page); padding: var(--spacing-4) 0; text-align: center; }
.hero__title { font-size: var(--type-display-hero-mobile); line-height: 1.2; font-weight: 400; }
@media (min-width: 768px) { .hero__title { font-size: var(--type-display-hero); line-height: 1.1; } }
.hero__subtitle { font-size: var(--type-body-large); color: var(--color-text-secondary); margin: var(--spacing-4) 0 0; }

/* --- Search box — Figma: Search Box ------------------------------------ */
.search-box { display: flex; align-items: stretch; max-width: 640px; margin: var(--spacing-8) auto 0; gap: var(--spacing-2);}
/* Zendesk's {{search}} helper renders the submit as <input type="submit">, not
   a <button>. These selectors must therefore be typed: a bare `.search-box
   input` would also catch the submit and stretch it to half the bar. */
.search-box input[type="search"] {
  flex: 1; min-width: 0; height: var(--search-control); padding: 0 var(--spacing-5);
  font-family: inherit; font-size: var(--font-size-base); color: var(--color-text-primary);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
}
.search-box input[type="search"]::placeholder { color: var(--color-text-subtle); }
.search-box input[type="search"]:focus { outline: 1px solid var(--color-brand-secondary); outline-offset: -2px; }
/* The clear (x) control on input[type=search] is drawn by the browser in its
   own shadow DOM — it is not in our markup, and DevTools hides it unless
   "Show user agent shadow DOM" is on. It cannot be recoloured with `color`,
   so the native glyph is switched off and replaced with a mask, which lets
   background-color carry the token. WebKit/Blink only; Firefox draws no
   control at all, so there is nothing to override there. Only the mask's
   alpha channel is used, so the stroke colour inside the SVG is irrelevant. */
.search-box input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: var(--spacing-4); height: var(--spacing-4);
  cursor: pointer;
  background-color: var(--color-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 12 12M12 4 4 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 12 12M12 4 4 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-box input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--color-text-primary); }
/* Covers both forms: the <button> our preview stub emits and the
   <input type="submit"> Zendesk actually renders. appearance:none stops iOS
   and Safari applying native control chrome to the input variant. */
.search-box button, .search-box input[type="submit"] {
  flex: 0 0 auto; -webkit-appearance: none; appearance: none;
  border: 0; border-radius: var(--radius-full); background: var(--color-action-default); color: var(--color-text-inverse);
  padding: var(--spacing-3) var(--spacing-6); font-family: inherit; font-size: var(--type-body-small);
  font-weight: 600; cursor: pointer;
}
/* Icon-only submit. An <input type="submit"> can hold no child element and
   supports no pseudo-element, so the glyph has to be a background image —
   the mask trick used on the clear button above is not available here.
   That also means the stroke colour cannot be a var(): a custom property
   cannot be interpolated into a url(). It is set to #ffffff to match
   --color-text-inverse, which is itself a fixed token; change both together.
   The height is not set — align-items:stretch on .search-box already matches
   it to the text input, so it is preserved automatically. font-size:0 hides
   the "Search" value text while leaving it as the accessible name. */
.search-box button, .search-box input[type="submit"] {
  font-size: 0;
  /* Square, from the same token as the input's height. aspect-ratio cannot do
     this: with font-size 0 the content box is zero wide, so there is no
     definite axis for it to resolve against and the button collapses. */
  width: var(--search-control); height: var(--search-control); padding: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 21L15 15M3 10C3 10.9193 3.18106 11.8295 3.53284 12.6788C3.88463 13.5281 4.40024 14.2997 5.05025 14.9497C5.70026 15.5998 6.47194 16.1154 7.32122 16.4672C8.1705 16.8189 9.08075 17 10 17C10.9193 17 11.8295 16.8189 12.6788 16.4672C13.5281 16.1154 14.2997 15.5998 14.9497 14.9497C15.5998 14.2997 16.1154 13.5281 16.4672 12.6788C16.8189 11.8295 17 10.9193 17 10C17 9.08075 16.8189 8.1705 16.4672 7.32122C16.1154 6.47194 15.5998 5.70026 14.9497 5.05025C14.2997 4.40024 13.5281 3.88463 12.6788 3.53284C11.8295 3.18106 10.9193 3 10 3C9.08075 3 8.1705 3.18106 7.32122 3.53284C6.47194 3.88463 5.70026 4.40024 5.05025 5.05025C4.40024 5.70026 3.88463 6.47194 3.53284 7.32122C3.18106 8.1705 3 9.08075 3 10Z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--spacing-6) var(--spacing-6);
}
.search-box--compact { border-width: var(--layout-border-width); margin: 0; max-width: 480px; }

/* --- Breadcrumbs — Figma: Breadcrumbs ---------------------------------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--spacing-2); font-size: var(--type-body-small); padding: var(--spacing-8) 0 0; }
.breadcrumbs li { color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--color-text-subtle); margin-right: var(--spacing-2); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* --- Page header — Figma: Page Header ---------------------------------- */
.page-header { padding: var(--spacing-8) 0 var(--spacing-8); }
.page-header h1 { font-size: var(--type-heading-section); font-weight: 400; }
@media (min-width: 768px) { .page-header h1 { font-size: var(--type-display-hero); line-height: 1.15; } }
.page-header__description { font-size: var(--type-body-large); color: var(--color-text-secondary); margin: var(--spacing-3) 0 0; max-width: 62ch; }
/* Split header — title on the left, search alongside it on the right. */
.page-header--split { display: grid; gap: var(--spacing-6); }
@media (min-width: 768px) {
  .page-header--split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-8); }
  .page-header--split .search-box { width: 340px; max-width: 100%; }
}

/* --- Category cards — Figma: Category Card ----------------------------- */
.category-grid { display: grid; gap: var(--spacing-8) var(--layout-gutter); grid-template-columns: 1fr; padding: 0 0 var(--spacing-12); }
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .category-grid { grid-template-columns: repeat(var(--category-columns, 3), 1fr); } }
.category-card { display: block; text-decoration: none; color: inherit; }
.category-card__image { aspect-ratio: 1 / 1; background: var(--color-surface-tint); border-radius: var(--radius-lg); margin-bottom: var(--spacing-4); object-fit: cover; width: 100%; }
.category-card__title { font-size: var(--type-heading-card); margin-bottom: var(--spacing-2); }
.category-card:hover .category-card__title { text-decoration: underline; }

/* --- Article list — Figma: Article List Item --------------------------- */
.article-list__item { padding: var(--spacing-8) 0; border-bottom: var(--layout-border-width) solid var(--color-border-default); }
.article-list__item--promoted { background: var(--color-surface-tint-soft); padding-left: var(--spacing-5); padding-right: var(--spacing-5); border-bottom: 0; border-radius: var(--radius-lg); }
.article-list__title { font-size: var(--type-heading-card); font-weight: 500; text-decoration: none; display: inline-flex; gap: var(--spacing-2); align-items: baseline; }
.article-list__title:hover { text-decoration: underline; }
.article-list__badge { color: var(--color-brand-secondary); }
.article-list__snippet { font-size: var(--type-body-small); color: var(--color-text-secondary); margin: var(--spacing-2) 0 0; }
.article-list__more { font-size: var(--type-meta); color: var(--color-text-muted); text-decoration: none; display: inline-block; margin-top: var(--spacing-2); }
/* When the link sits inside the snippet paragraph it runs on from the text
   rather than sitting under it, so it picks up the paragraph's size. */
.article-list__snippet .article-list__more {
  font-size: inherit; color: var(--color-text-primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  margin: 0 0 0 var(--spacing-2);
}

/* --- Section blocks ----------------------------------------------------- */
.section-block { margin-bottom: var(--spacing-12); }
/* Tracks .page-header h1, which steps down to --type-heading-section below
   768px. A flat --type-heading-page here left the h2 larger than the h1 on
   every page that has both. */
.section-block__title { font-size: var(--type-heading-section); margin-bottom: var(--spacing-5); text-decoration: none; display: inline-block; font-weight: 400; }
@media (min-width: 768px) { .section-block__title { font-size: var(--type-heading-page); } }
.section-block__title:hover { text-decoration: underline; }

/* --- Sidebar — Figma: Sidebar Category List / Article Sidebar ---------- */
.layout-with-sidebar { display: grid; gap: var(--spacing-10); grid-template-columns: 1fr; padding-bottom: var(--section-rhythm); }
@media (min-width: 992px) { .layout-with-sidebar { grid-template-columns: 1fr 280px; gap: var(--spacing-10) 60px; padding-top: var(--spacing-8) } }
/* Sidebar on the left. Main content stays first in the DOM so mobile and
   screen-reader order lead with the articles, not the nav; only the desktop
   grid placement is flipped. */
@media (min-width: 992px) {
  .layout-with-sidebar--left { grid-template-columns: 280px minmax(0, 1fr); }
  .layout-with-sidebar--left > .sidebar { grid-column: 1; grid-row: 1; }
  .layout-with-sidebar--left > :not(.sidebar) { grid-column: 2; grid-row: 1; }
}

/* Base sidebar — the panelled variant used by article, section and request
   pages ("Articles in this topic"). */
.sidebar { background: var(--color-surface-muted); padding: var(--spacing-8); align-self: start; border-radius: var(--radius-lg) }
.sidebar__label { font-size: var(--type-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 0; margin-bottom: var(--spacing-6); }
.sidebar li { margin-bottom: var(--spacing-3); }
.sidebar li:last-child { margin-bottom: none; }
.sidebar a { font-size: var(--type-body-small); color: var(--color-text-muted); text-decoration: none; }
.sidebar a:hover, .sidebar .is-current a { color: var(--color-text-primary); text-decoration: none; }

/* Plain variant — no panel, nav-scale type, for use as a primary page nav
   (the category page). Must stay AFTER the base block: these selectors carry
   the same specificity as their .sidebar counterparts, so source order is the
   only thing that lets them win. */
.sidebar--plain { background: none; padding: 0; }
.sidebar--plain li { margin-bottom: var(--spacing-5); }
.sidebar--plain a { font-size: var(--type-body-large); }
.sidebar--plain .is-current a { font-weight: 600; text-decoration: underline; text-underline-offset: 8px; }

/* --- Article — Figma: Article Header / body ---------------------------- */
.article__header { padding: var(--spacing-8) 0; border-bottom: var(--layout-border-width) solid var(--color-border-default); }
.article__title { font-size: var(--type-heading-page); font-weight: 400; }
.article__meta { display: flex; align-items: center; gap: var(--spacing-3); margin-top: var(--spacing-4); font-size: var(--type-body-small); }
.article__meta time { color: var(--color-text-muted); font-size: var(--type-meta); }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-surface-tint); border: var(--layout-border-width) solid var(--color-border-default); }
.avatar--sm { width: 24px; height: 24px; }
.avatar--lg { width: 64px; height: 64px; }
.article__body { padding: var(--spacing-8) 0; font-size: var(--type-body-large); color: var(--color-text-primary); line-height: 140%; }
.article__body h2 { font-size: var(--type-heading-card); margin: var(--spacing-10) 0 var(--spacing-4); color: var(--color-text-primary); }
.article__body h3 { font-size: var(--type-heading-sub); margin: var(--spacing-8) 0 var(--spacing-2); color: var(--color-text-primary); }
.article__body p { margin: 0 0 var(--spacing-5); }
.article__body ul, .article__body ol { margin: 0 0 var(--spacing-5) var(--spacing-5); list-style: revert; }
.article__body li { margin-bottom: var(--spacing-2); }
.article__body code { background: var(--color-surface-muted); padding: 2px 6px; font-size: .9em; }

/* --- Attachments — Figma: Attachment Item ------------------------------ */
.attachment { display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4); border: var(--layout-border-width) solid var(--color-border-default); }
.attachment__name { flex: 1; font-size: var(--type-body-small); }
.attachment__size { font-size: var(--type-meta); color: var(--color-text-muted); }

/* --- Vote — Figma: Article Vote ---------------------------------------- */
.article-vote { background: var(--color-surface-muted); padding: var(--spacing-6); text-align: center; margin: var(--spacing-8) 0; border-radius: var(--radius-lg); }
.article-vote__question { font-size: var(--type-heading-sub); font-weight: 600; }
.article-vote__controls { display: flex; gap: var(--spacing-3); justify-content: center; margin: var(--spacing-4) 0; }
.article-vote__count { font-size: var(--type-meta); color: var(--color-text-muted); }

/* --- Comments — Figma: Comment / Comment Form -------------------------- */
.comment { display: flex; gap: var(--spacing-4); padding: var(--spacing-6) 0; border-bottom: var(--layout-border-width) solid var(--color-border-default); }
.comment--official { background: var(--color-surface-tint-soft); padding: var(--spacing-6); border-bottom: 0; }
.comment__body { flex: 1; }
.comment__author { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--type-body-small); margin-bottom: var(--spacing-2); }
.comment__time { font-size: var(--type-meta); color: var(--color-text-muted); }
.badge { font-size: var(--type-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px var(--spacing-2); border-radius: var(--radius-sm); background: var(--color-brand-secondary); color: var(--color-text-inverse); }
.comment-form textarea { width: 100%; min-height: 110px; padding: var(--spacing-4);
  border: var(--layout-border-width) solid var(--color-border-strong); border-radius: var(--radius-none);
  font-family: inherit; font-size: var(--font-size-base); resize: vertical; }
.comment-form textarea:focus { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; }

/* --- Status labels — Figma: Status Label ------------------------------- */
.status-label { display: inline-block; font-size: var(--type-label); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-sm); color: var(--color-text-inverse); }
.status-label--open, .status-label--new { background: var(--color-feedback-info); }
.status-label--solved, .status-label--answered { background: var(--color-feedback-success); }
.status-label--pending { background: var(--color-feedback-warning); color: var(--color-text-primary); }
.status-label--closed { background: var(--color-text-muted); }

/* --- Search results — Figma: Search Result / Search Filter ------------- */
.search-results__count { font-size: var(--type-heading-sub); font-weight: 600; margin: var(--spacing-8) 0 var(--spacing-5); }
.search-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-8); }
.search-filter { display: inline-flex; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--type-body-small); text-decoration: none; color: var(--color-text-secondary); border-radius: var(--radius-none); }
.search-filter.is-selected { background: var(--color-surface-tint); color: var(--color-text-primary); }
.search-filter__count { color: var(--color-text-muted); }
.search-result { padding: var(--spacing-8) 0; border-bottom: var(--layout-border-width) solid var(--color-border-default); }
.search-result__title { font-size: var(--type-heading-card); font-weight: 500; text-decoration: none; }
.search-result__title:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Mirrors .breadcrumbs: flex with a gap for spacing, and a "/" on each step
   after the first. The divider hangs off the span, not the anchor. */
.search-result__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2);
  font-size: var(--type-meta); color: var(--color-text-muted); margin: var(--spacing-2) 0; }
.search-result__meta span + span::before { content: "/"; color: var(--color-text-subtle); margin-right: var(--spacing-2); }
.search-result__meta a { color: var(--color-text-muted); text-decoration: none; }
.search-result__meta a:hover { text-decoration: underline; }
.search-result__snippet { font-size: var(--type-body-small); color: var(--color-text-secondary); margin: 0; }
.search-result em { font-style: normal; background: var(--color-surface-tint); }

/* --- Quick answer (generative search) ---------------------------------- */
.quick-answer { background: var(--color-surface-muted); border-radius: var(--radius-lg);
  padding: var(--spacing-8); margin: var(--spacing-8) 0; }
.quick-answer__label { font-size: var(--type-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.quick-answer__body { margin: var(--spacing-3) 0; font-size: var(--type-body-large); }
.quick-answer__disclosure { font-size: var(--type-meta); color: var(--color-text-muted); margin: 0; }

/* --- Pagination — Figma: Pagination ------------------------------------ */
.pagination { display: flex; gap: var(--spacing-2); padding: var(--spacing-8) 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: var(--spacing-2) var(--spacing-3); font-size: var(--type-body-small); color: var(--color-text-muted);
  text-decoration: none; border: none; background: var(--color-surface-muted); border-radius: var(--radius-md); }
.pagination a:hover { color: var(--color-text-primary); }
.pagination .is-current { background: var(--color-brand-primary); color: var(--color-text-inverse); border-color: var(--color-brand-primary); }

/* --- Requests — Figma: Request Row / My Activities Nav ----------------- */
.activities-nav { display: flex; gap: 0; border-bottom: var(--layout-border-width) solid var(--color-border-default); overflow-x: auto; }
.activities-nav a { padding: var(--spacing-3) var(--spacing-5); font-size: var(--type-body-small);
  color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.activities-nav .is-current { color: var(--color-text-primary); box-shadow: inset 0 -3px 0 var(--color-brand-secondary); }
.request-row { display: flex; align-items: center; gap: var(--spacing-5); padding: var(--spacing-5) 0;
  border-bottom: var(--layout-border-width) solid var(--color-border-default); }
.request-row__main { flex: 1; }
.request-row__subject { font-size: var(--type-heading-sub); font-weight: 600; text-decoration: none; }
.request-row__meta { font-size: var(--type-meta); color: var(--color-text-muted); margin-top: var(--spacing-1); }

/* --- Forms — Figma: Form Field ----------------------------------------- */
.field { margin-bottom: var(--spacing-6); }
.field label { display: block; font-size: var(--type-body-small); margin-bottom: var(--spacing-2); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; padding: var(--spacing-3) var(--spacing-4); font-family: inherit; font-size: var(--font-size-base);
  border: var(--layout-border-width) solid var(--color-border-strong); border-radius: var(--radius-none);
  background: var(--color-surface-raised); color: var(--color-text-primary);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; }
.field__error { font-size: var(--type-meta); color: var(--color-feedback-danger); margin-top: var(--spacing-2); }

/* --- Blocks: featured, contact, CTA ------------------------------------ */
.featured-block { display: grid; gap: var(--spacing-8); background: var(--color-surface-tint);
  padding: var(--spacing-9) var(--spacing-7); align-items: center; }
@media (min-width: 768px) { .featured-block { grid-template-columns: 420px 1fr; gap: var(--spacing-8) 40px; } }
.featured-block__media { aspect-ratio: 16 / 9; background: var(--color-surface-raised); }
.featured-block__title { font-size: var(--type-heading-section); }
/* Contact page: cards stacked in one column, with a single image filling the
   column beside them. The media cell stretches to the row height, so the image
   can take height:100% and cover. */
/* align-items:start, not stretch: the image is square rather than matched to
   the height of the card stack, so the media cell should hug it. */
.contact-layout { display: grid; gap: var(--spacing-8); padding: var(--spacing-10) 0 0 0; align-items: start; }
@media (min-width: 992px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: var(--spacing-10); } }
/* Fills the column width and takes its height from a 1:1 ratio. object-fit
   still crops, so any source aspect works without distortion. */
.contact-layout__media img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; display: block; border-radius: var(--radius-lg); }

/* No gap: the rhythm comes from each row's own vertical padding, so the
   dividers sit evenly between rows rather than floating in a gutter. */
.contact-block { display: grid; gap: 0; align-content: start; }
.contact-block__card { padding: var(--spacing-6) 0; }
/* First row aligns flush with the top of the image beside it. */
.contact-block__card:first-child { padding-top: 0; }
/* Rule between adjacent rows only — nothing above the first or below the last.
   Using the adjacent sibling selector avoids depending on :last-child, which
   is unreliable here because each card is conditional on its heading. */
.contact-block__card + .contact-block__card { border-top: var(--layout-border-width) solid var(--color-border-default); }
.contact-block__title { font-size: var(--type-heading-card); margin-bottom: var(--spacing-2); }
.contact-block__detail { font-size: var(--type-body-small); color: var(--color-text-secondary); margin-bottom: 0; }
/* The card no longer carries a stretched link, so the button is the only
   interactive target and needs its own separation from the copy. */
.contact-block__action { margin-top: var(--spacing-4); }

/* Request form view. Zendesk's React app renders the fields themselves using
   Garden components, which carry their own styling — this only sets the
   container width and the way back to the contact options. */
.request-form { max-width: 720px; }
/* Shared by the page-level back link and the form's own. block, not
   inline-block: .section-block__title is inline-block, so an inline back link
   sits alongside the heading instead of above it. */
.page-back { display: block; font-size: var(--type-body-small); margin-bottom: var(--spacing-12); }
.request-form [hidden] { display: none; }
.request-form__error { color: var(--color-feedback-danger); }
/* Matches .article-vote — same surface, padding, radius and centring — so the
   two blocks at the foot of an article read as one pair. */
.more-questions { background: var(--color-surface-muted); padding: var(--spacing-6); text-align: center; margin: var(--spacing-8) 0 0; border-radius: var(--radius-lg); }
.more-questions__title { font-size: var(--type-heading-sub); font-weight: 600; margin-bottom: var(--spacing-4); }

/* --- Footer — Figma: Footer -------------------------------------------- */
.footer { background: var(--color-surface-footer); color: var(--color-text-on-footer); padding: var(--spacing-9) 0; text-align: center; }
.footer a { color: var(--color-text-on-footer); }
/* Text links and social icons share a single centred row above the copyright. */
.footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--spacing-5) var(--spacing-8); margin-bottom: var(--spacing-5); }
/* No underline at rest here — position carries the affordance, as it does in
   the top bar. The child selector keeps the hover underline on the text links
   only, so it never appears under an icon. */
.footer__links a { text-decoration: none; }
.footer__links > a:hover { text-decoration: underline; }
.footer__social { display: inline-flex; align-items: center; gap: var(--spacing-5); }
.footer__social a { display: inline-flex; }
/* currentColor ties the marks to --color-text-on-footer, so they follow the
   footer text rather than needing their own colour setting. */
.footer__social svg { width: var(--spacing-6); height: var(--spacing-6); fill: currentColor; display: block; }
.footer__copyright { font-size: var(--type-meta); margin: 0; }

/* --- Prefers reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}