/* ══════════════════════════════════════════════════════════════════════════
   Soffguiden — site identity (chrome)
   ==========================================================================

   Applies the Soffguiden brand system to everything Astra and Spectra render:
   header, navigation, typography, links, content blocks, forms, buttons that
   are not affiliate CTAs, the homepage layout and the footer.

   THESIS
   Soffguiden sells nothing. It is a measuring instrument — dimensions,
   materials, prices, comparisons. The site therefore reads as a specification
   sheet, not a showroom. Authority comes from precision, not taste.

   SIGNATURE — måttbandet
   A hairline carrying graduation marks, like the edge of a tape measure. It is
   the only decorative element and it encodes what the brand does: it marks
   where we measure. Here it is the structural divider — under the header, at
   the top of the footer, in place of every separator, as the underline of the
   page title, as the nav's graduation scale, and rotated 90° down the side of
   a blockquote. Nothing else decorates.

   COLOUR DISCIPLINE
   Loden and ochre are NOT spent here. Loden carries endorsement and affiliate
   action inside the card system; ochre carries verified money claims. If the
   navigation were loden the CTA would stop meaning anything. The chrome is
   built entirely from the neutral ramp — linne, yta, grafit, linjal.
   The single exception is the keyboard focus ring, which the design system
   itself specifies as loden: it is transient, appears on one element at a
   time, and matching the components is correct.

   BUTTON HIERARCHY (three tiers, no ambiguity)
     filled loden    — money moves. Affiliate CTAs only, inside .sg. Untouched.
     filled grafit   — the terminal action of a form. Newsletter submit only.
     outlined        — you stay on the site. Every other button on the page.

   SPECIFICITY CONTRACT — read before editing
   The .sg card/toplist/table system is already correct and must never lose a
   specificity fight to this file. Two guarantees keep that true:
     1. Content typography uses BARE ELEMENT selectors (0,0,1). Astra sets the
        same properties through `h2, .entry-content :where(h2)` — `:where()`
        contributes zero specificity, so a bare selector loaded later beats
        Astra while still losing to `.sg h2` (0,1,1).
     2. Everything else targets classes that exist only OUTSIDE .sg —
        `.uagb-*`, `.wp-block-*`, `.ast-*`, `.entry-content > *`. The .sg
        wrapper is never a `.wp-block-*` element and its children all carry
        `sg-` classes, so these selectors cannot reach into the components.
   Do not add `.entry-content p`, `.entry-content a` or `.entry-content table`
   style rules: those DO reach inside .sg and would repaint the cards.

   PERFORMANCE
   No @import, no webfont request, no image. The typeface is the stack the
   design system specifies, which is resident on every target device. This
   file replaces the Google Fonts request Astra was making for Poppins, so it
   removes a render-blocking third-party dependency rather than adding one.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────────────
   Values lifted verbatim from docs/brand/designsystem.html. Prefixed --sgi-
   so they can never collide with the components' --sg-* tokens (declared on
   .sg) or with Astra/Spectra custom properties.                             */

:root {
  --sgi-linen:      #F8FAF7;  /* page ground — green-biased cool neutral      */
  --sgi-surface:    #FFFFFF;  /* cards, tables, menus                         */
  --sgi-sunken:     #EFF2ED;  /* recessed panels, inputs                      */
  --sgi-graphite:   #171C18;  /* body text                                    */
  --sgi-soft:       #5C6961;  /* secondary text                               */
  --sgi-faint:      #68756D;  /* tertiary text, metadata                      */
  --sgi-rule:       #CFD7CF;  /* hairlines                                    */
  --sgi-rule-firm:  #A6B2A8;  /* structural hairlines                         */
  --sgi-loden:      #2F4739;  /* focus ring only in this file                 */
  --sgi-loden-ink:  #FAFBF8;
  --sgi-tick:       #A6B2A8;  /* graduation marks                             */

  /* The måttband, as reusable paint. Minor graduations every 20px; major
     graduations every 100px, twice as tall. */
  --sgi-matt:       repeating-linear-gradient(to right, var(--sgi-tick) 0 1px, transparent 1px 20px);
  --sgi-matt-major: repeating-linear-gradient(to right, var(--sgi-tick) 0 1px, transparent 1px 20px),
                    repeating-linear-gradient(to right, var(--sgi-rule-firm) 0 1px, transparent 1px 100px);

  --sgi-font: "Helvetica Neue", Inter, "Segoe UI", system-ui, sans-serif;

  /* Reading measure. A specification sheet is read, not scanned; unconstrained
     1240px lines run ~190 characters. */
  --sgi-measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sgi-linen:     #121611;
    --sgi-surface:   #191E1A;
    --sgi-sunken:    #0D110C;
    --sgi-graphite:  #E7ECE6;
    --sgi-soft:      #9EAAA1;
    --sgi-faint:     #78857C;
    --sgi-rule:      #2C352E;
    --sgi-rule-firm: #465046;
    --sgi-loden:     #93BFA3;
    --sgi-loden-ink: #0D110C;
    --sgi-tick:      #465046;
  }
}

/* An explicit data-theme on <html> always wins, in both directions. */
:root[data-theme="dark"] {
  --sgi-linen:     #121611;
  --sgi-surface:   #191E1A;
  --sgi-sunken:    #0D110C;
  --sgi-graphite:  #E7ECE6;
  --sgi-soft:      #9EAAA1;
  --sgi-faint:     #78857C;
  --sgi-rule:      #2C352E;
  --sgi-rule-firm: #465046;
  --sgi-loden:     #93BFA3;
  --sgi-loden-ink: #0D110C;
  --sgi-tick:      #465046;
}
:root[data-theme="light"] {
  --sgi-linen:     #F8FAF7;
  --sgi-surface:   #FFFFFF;
  --sgi-sunken:    #EFF2ED;
  --sgi-graphite:  #171C18;
  --sgi-soft:      #5C6961;
  --sgi-faint:     #68756D;
  --sgi-rule:      #CFD7CF;
  --sgi-rule-firm: #A6B2A8;
  --sgi-loden:     #2F4739;
  --sgi-loden-ink: #FAFBF8;
  --sgi-tick:      #A6B2A8;
}

/* ── 2. Astra palette remap ─────────────────────────────────────────────────
   Astra and Spectra reference --ast-global-color-N by var() in roughly 200
   rules across the theme, the Pro addon and the per-page block CSS. Remapping
   the palette at its source retints the whole site without a single
   specificity fight, and it keeps working for blocks on pages this file has
   never seen.

   Each slot is replaced with a value that reads correctly in BOTH the roles
   Astra uses it in, because several are used as foreground in one rule and
   background in another:
     0/1  accent → grafit. Was #0067FF. Deliberately not loden.
     2    headings → grafit.
     3    body → grafit.
     4    secondary ground → linne.
     5    primary ground / light text over photography → yta.
     6    subtle ground → sunken.
     7/8  alternate dark ground → grafit.                                     */

:root {
  --ast-global-color-0: var(--sgi-graphite);
  --ast-global-color-1: var(--sgi-soft);
  --ast-global-color-2: var(--sgi-graphite);
  --ast-global-color-3: var(--sgi-graphite);
  --ast-global-color-4: var(--sgi-linen);
  --ast-global-color-5: var(--sgi-surface);
  --ast-global-color-6: var(--sgi-sunken);
  --ast-global-color-7: var(--sgi-graphite);
  --ast-global-color-8: var(--sgi-graphite);
  --ast-global-color-primary: var(--sgi-surface);
  --ast-global-color-secondary: var(--sgi-linen);
  --ast-global-color-subtle-background: var(--sgi-sunken);
  --ast-global-color-alternate-background: var(--sgi-graphite);
  --ast-border-color: var(--sgi-rule);
  --ast-search-border-color: var(--sgi-rule);
  --ast-widget-bg-color: var(--sgi-surface);
  --ast-comment-inputs-background: var(--sgi-surface);
  --ast-code-block-background: var(--sgi-sunken);
}

/* ── 3. Ground and page frame ───────────────────────────────────────────── */

/* Astra sets html to 93.75%, which shrinks the visitor's own font-size
   preference. Returning it to 100% both honours that preference and makes the
   rem scale below mean what it says. */
html { font-size: 100%; }

body {
  background-color: var(--sgi-linen);
  color: var(--sgi-graphite);
  font-family: var(--sgi-font);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea,
.ast-button, .ast-custom-button {
  font-family: var(--sgi-font);
}

#page, #content, .site-content, .ast-container,
.ast-plain-container .site-content,
.ast-separate-container .site-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  background-color: transparent;
}

/* No shadows anywhere in the system: the affiliate CTA is the only raised
   object on any page. Spectra writes per-block shadows into its generated CSS,
   so this has to be broad. .sg carries no wp-block-/uagb- class, so the
   components are untouched. */
[class*="wp-block-uagb-"],
[class*="uagb-block-"],
.wp-block-uagb-container,
.wp-block-button__link,
.uagb-forms-main-form,
.ast-separate-container .ast-article-single,
.site-header, .site-footer,
.main-header-menu .sub-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  box-shadow: none !important;
}

/* ── 4. Typography ──────────────────────────────────────────────────────────
   Personality is the tension between very tight headings (−0.032em) and very
   open uppercase labels (+0.155em). Bare element selectors on purpose: see the
   specificity contract at the top of this file.                              */

/* Astra writes `h2, .entry-content :where(h2)`. `:where()` contributes nothing,
   so that second selector scores (0,1,0) — one class — and beats a bare `h2`.
   These rules therefore mirror Astra's shape exactly: (0,1,0) inside content,
   (0,0,1) everywhere else. Both still lose to `.sg h2` (0,1,1), which is the
   whole point.                                                               */
h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.site-title, .site-title a {
  font-family: var(--sgi-font);
  font-weight: 660;
  letter-spacing: -0.032em;
  color: var(--sgi-graphite);
  text-wrap: balance;
}
h1, .entry-content :where(h1) { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.02; }
h2, .entry-content :where(h2) { font-size: clamp(1.55rem, 3.1vw, 2.1rem); line-height: 1.1; }
h3, .entry-content :where(h3) { font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.22; letter-spacing: -0.02em; }
h4, .entry-content :where(h4) { font-size: 1.05rem; line-height: 1.3;  letter-spacing: -0.018em; }
h5, .entry-content :where(h5) { font-size: .95rem;  line-height: 1.35; letter-spacing: -0.012em; }

/* h6 is the eyebrow slot in this site's blocks, so it takes the label
   treatment rather than a heading size. */
h6, .entry-content :where(h6), .uagb-ifb-title-prefix {
  font-size: .68rem;
  line-height: 1.4;
  font-weight: 640;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--sgi-soft);
}

/* Numerals are display type: on a measurement brand the number is the content.
   Applied to every element that carries a measured value in the chrome. */
.uagb-heading-text, .uagb-ifb-title, .wp-block-table td, .wp-block-table th,
.entry-content > table td, .entry-content > table th {
  font-variant-numeric: tabular-nums;
}

/* ── 5. Links and focus ─────────────────────────────────────────────────────
   Content links are grafit with a linjal underline, never a colour. The site
   holds exactly one coloured link — the affiliate one — and it lives in .sg. */

.entry-content > p a,
.entry-content > ul a, .entry-content > ol a,
.wp-block-paragraph a, .wp-block-list a,
.wp-block-table a,
.uagb-desc-text a, .uagb-ifb-desc a {
  color: var(--sgi-graphite);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sgi-rule-firm);
  text-underline-offset: .18em;
  transition: text-decoration-color .15s;
}
.entry-content > p a:hover,
.entry-content > ul a:hover, .entry-content > ol a:hover,
.wp-block-paragraph a:hover, .wp-block-list a:hover,
.wp-block-table a:hover,
.uagb-desc-text a:hover, .uagb-ifb-desc a:hover {
  color: var(--sgi-graphite);
  text-decoration-color: var(--sgi-graphite);
}

/* Visible keyboard focus everywhere. The design system specifies loden for
   this and it is the one transient exception to the colour discipline above —
   it appears on a single element, only while a keyboard is being used, and
   matching the ring the components already draw is worth more than the
   purity of the rule. Astra ships its own 3px ring at a higher specificity,
   so this is written compound to make the outcome deterministic rather than
   an accident of source order. */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html summary:focus-visible,
html [tabindex]:focus-visible {
  outline: 2px solid var(--sgi-loden);
  outline-offset: 3px;
  border-radius: 0;
}

.skip-link.screen-reader-text:focus {
  background: var(--sgi-graphite);
  color: var(--sgi-linen);
  font-family: var(--sgi-font);
  font-size: .82rem;
  font-weight: 640;
  letter-spacing: .06em;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 20px;
}

/* ── 6. Header ──────────────────────────────────────────────────────────────
   The header sits on the page ground rather than floating on a white bar, and
   its bottom edge is the måttband. That is the first thing a visitor sees and
   it states what the site is before a word is read.                          */

/* Astra paints these bars from `.ast-above-header.ast-above-header-bar`, which
   is two classes, so the compound forms are repeated here to match it. */
.site-header,
.ast-main-header-wrap,
.ast-above-header-wrap,
.ast-above-header.ast-above-header-bar,
.ast-primary-header.ast-primary-header-bar,
.ast-desktop-header .ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-wrap .ast-above-header-bar {
  background-color: var(--sgi-linen);
  border-bottom: 0;
}

.ast-above-header.ast-above-header-bar { border-bottom: 1px solid var(--sgi-rule); }

/* The måttband under the header. */
.ast-main-header-wrap { position: relative; }
.ast-main-header-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -13px;
  height: 13px;
  pointer-events: none;
  border-top: 1px solid var(--sgi-rule-firm);
  background-image: var(--sgi-matt-major);
  background-size: 100% 5px, 100% 11px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
/* The scale needs room to sit in before the content starts. */
.site-content { padding-top: 13px; }

/* The logotype is a palette PNG with no alpha channel — black wordmark on an
   opaque white plate — so it cannot simply be dropped onto either ground.
   Blending solves it without touching the asset: multiply erases the white
   plate against linne, and inverting then lightening erases the (now black)
   plate against the dark ground while the wordmark stays light. */
.custom-logo { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .custom-logo { filter: invert(1); mix-blend-mode: lighten; }
}
:root[data-theme="dark"] .custom-logo { filter: invert(1); mix-blend-mode: lighten; }
:root[data-theme="light"] .custom-logo { filter: none; mix-blend-mode: multiply; }

/* Navigation — sentence case, quiet, and graduated. Hovering or landing on an
   item drops a single graduation mark onto the måttband below it: the nav is
   the ruler and each item is a mark on it. */
.main-header-menu .menu-link,
.main-header-menu > .menu-item > .menu-link {
  font-family: var(--sgi-font);
  font-size: .95rem;
  font-weight: 520;
  letter-spacing: -0.008em;
  color: var(--sgi-graphite);
  text-transform: none;
}
.ast-desktop .main-header-menu > .menu-item { position: relative; }
.ast-desktop .main-header-menu > .menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  background: var(--sgi-graphite);
  opacity: 0;
  transition: opacity .15s;
}
.ast-desktop .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-desktop .main-header-menu > .menu-item:focus-within > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-item > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-ancestor > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-parent > .menu-link::after { opacity: 1; }

.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link,
.main-header-menu > .current-menu-parent > .menu-link { font-weight: 660; }

/* Sub-menus are hairline-ruled panels, not floating cards. */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
  background-color: var(--sgi-surface);
  border: 1px solid var(--sgi-rule);
  border-radius: 0;
  padding: 4px 0;
}
.main-header-menu .sub-menu .menu-link {
  font-size: .9rem;
  font-weight: 480;
  color: var(--sgi-graphite);
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 44px;          /* 44px tap target, measured not assumed */
  display: flex;
  align-items: center;
}
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-item:focus-within > .menu-link {
  background-color: var(--sgi-sunken);
  color: var(--sgi-graphite);
}

/* Search: a hairline field, not a pill. */
.ast-search-menu-icon .search-field,
.ast-search-menu-icon.slide-search .search-field {
  background-color: var(--sgi-surface);
  border: 1px solid var(--sgi-rule);
  border-radius: 0;
  color: var(--sgi-graphite);
  font-family: var(--sgi-font);
}
/* The search trigger and the logotype are inline anchors, so their hit area
   collapses to a line box. Both are given a real one. */
.ast-search-menu-icon .search-submit,
.ast-search-menu-icon .astra-search-icon {
  color: var(--sgi-graphite);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.custom-logo-link,
.ast-custom-button-link { display: inline-flex; align-items: center; }
.ast-search-menu-icon .search-field::placeholder { color: var(--sgi-faint); }

/* Header action button. Outlined — it navigates within the site, so it must
   not look like the affiliate CTA. */
.ast-custom-button-link .ast-custom-button,
.site-header .ast-custom-button,
.site-header .ast-button {
  background-color: transparent;
  color: var(--sgi-graphite);
  border: 1px solid var(--sgi-rule-firm);
  border-radius: 0;
  font-family: var(--sgi-font);
  font-size: .88rem;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background-color .15s, color .15s;
}
.ast-custom-button-link:hover .ast-custom-button,
.site-header .ast-custom-button:hover,
.site-header .ast-button:hover {
  background-color: var(--sgi-graphite);
  color: var(--sgi-linen);
  border-color: var(--sgi-graphite);
}

/* Mobile header: 44px targets, hairline panel, no rounded chrome. */
.ast-mobile-header-wrap .ast-above-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar { background-color: var(--sgi-linen); }

.menu-toggle.main-header-menu-toggle,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-minimal {
  background-color: transparent !important;
  color: var(--sgi-graphite) !important;
  border: 1px solid var(--sgi-rule-firm) !important;
  border-radius: 0 !important;
  min-width: 44px;
  min-height: 44px;
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  background-color: var(--sgi-linen);
  border-left: 1px solid var(--sgi-rule);
}
.ast-mobile-popup-drawer .menu-toggle-close {
  color: var(--sgi-graphite);
  min-width: 44px;
  min-height: 44px;
}
.ast-mobile-popup-drawer .main-header-menu .menu-link,
.ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--sgi-rule);
}
.ast-mobile-popup-drawer .main-header-menu .sub-menu {
  background-color: transparent;
  border: 0;
}
.ast-mobile-popup-drawer .ast-menu-toggle { min-width: 44px; min-height: 44px; }

/* ── 7. Breadcrumbs ─────────────────────────────────────────────────────────
   Not currently emitted by the site. Styled here so that the day breadcrumbs
   are switched on — in Astra, Rank Math or Yoast — they arrive already
   dressed, as a graduated trail rather than a chain of blue links.           */

.ast-breadcrumbs, .ast-breadcrumbs-inner,
.rank-math-breadcrumb, .yoast-breadcrumb, .breadcrumbs, .trail-items {
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--sgi-soft);
  padding: 14px 0;
  margin: 0;
  list-style: none;
}
.ast-breadcrumbs a, .rank-math-breadcrumb a, .yoast-breadcrumb a, .trail-items a {
  color: var(--sgi-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--sgi-rule);
}
.ast-breadcrumbs a:hover, .rank-math-breadcrumb a:hover,
.yoast-breadcrumb a:hover, .trail-items a:hover {
  color: var(--sgi-graphite);
  border-bottom-color: var(--sgi-graphite);
}
.ast-breadcrumbs .separator, .rank-math-breadcrumb .separator {
  color: var(--sgi-rule-firm);
  padding: 0 .5em;
}

/* ── 8. Content ─────────────────────────────────────────────────────────────
   Every selector below is a wp-block- or uagb- class, or an .entry-content
   direct child. None of them can match inside .sg.                           */

.entry-content > p,
.wp-block-paragraph,
.uagb-desc-text,
.uagb-ifb-desc {
  max-width: var(--sgi-measure);
  color: var(--sgi-graphite);
}

/* Spectra pins lists to `max-width: -webkit-fill-available` from a six-part
   descendant selector, so the reading measure needs !important to survive it.
   `.wp-block-list` never occurs inside .sg, so this cannot reach the
   components. */
.entry-content > ul, .entry-content > ol,
.entry-content ul.wp-block-list, .entry-content ol.wp-block-list {
  box-sizing: border-box;   /* the marker gutter sits inside the measure … */
  width: 100%;              /* … and the item fills, rather than fits, its parent */
  max-width: var(--sgi-measure) !important;
  /* Spectra's containers are flex with align-items:center, and in that mode a
     list's 20px inline margin is not subtracted from the width it is given —
     so a full-width list overhung the container by exactly that margin and ran
     off the right edge of a phone. The gutter is moved into padding, where it
     is inside the border box and cannot overhang. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1.35em;
}
/* Native markers are kept — removing them costs the list its announcement in
   VoiceOver — but graduated down to linjal so the text carries the line. */
.wp-block-list > li::marker,
.entry-content > ul > li::marker,
.entry-content > ol > li::marker { color: var(--sgi-rule-firm); }
.wp-block-list > li + li,
.entry-content > ul > li + li,
.entry-content > ol > li + li { margin-top: .45em; }
.wp-block-list > li > strong:first-child { font-weight: 640; }

/* Separators become the måttband. This is the only decorative element in the
   system and it replaces every rule the page authors reached for. */
.entry-content hr,
.wp-block-separator,
.entry-content > .wp-block-separator,
.wp-block-uagb-separator .wp-block-uagb-separator__inner {
  width: 100% !important;
  max-width: none !important;
  height: 13px;
  border: 0 !important;
  border-top: 1px solid var(--sgi-rule-firm) !important;
  background-color: transparent;
  background-image: var(--sgi-matt-major);
  background-size: 100% 5px, 100% 11px;
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 1;
  margin: 40px 0;
}
.wp-block-uagb-separator { text-align: left; }

/* The page title is measured off against the måttband. This is the signature's
   most important appearance: it is the first thing under the name of the thing
   the page is about. .sg renders no h1, so this cannot reach the components. */
.entry-content h1::after,
.entry-header .entry-title::after {
  content: "";
  display: block;
  height: 13px;
  margin-top: 18px;
  border-top: 1px solid var(--sgi-rule-firm);
  background-image: var(--sgi-matt);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* Content tables: the design system's specification table, verbatim in
   structure. .sg-tw is never .wp-block-table, so the component table is
   untouched. */
figure.wp-block-table, .wp-block-table {
  overflow-x: auto;
  border: 1px solid var(--sgi-rule);
  margin: 28px 0;
  max-width: 100%;
}
.wp-block-table table,
.entry-content > table {
  border-collapse: collapse;
  width: 100%;
  background: var(--sgi-surface);
  font-size: .88rem;
  margin: 0;
  border: 0;
}
.wp-block-table th, .wp-block-table td,
.entry-content > table th, .entry-content > table td {
  text-align: left;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--sgi-rule);
  vertical-align: top;
  color: var(--sgi-graphite);
}
.wp-block-table thead th,
.entry-content > table thead th {
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sgi-soft);
  font-weight: 660;
}
.wp-block-table tbody tr:last-child > *,
.entry-content > table tbody tr:last-child > * { border-bottom: 0; }
.wp-block-table figcaption {
  color: var(--sgi-soft);
  font-size: .8rem;
  padding: 10px 14px;
  text-align: left;
}

/* A blockquote is the måttband turned on its side. Same motif, no new one. */
.entry-content > blockquote,
.wp-block-quote {
  margin: 32px 0;
  padding-left: 22px;
  border: 0;
  border-left: 1px solid var(--sgi-rule-firm);
  background-image: repeating-linear-gradient(to bottom, var(--sgi-tick) 0 1px, transparent 1px 20px);
  background-size: 5px 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-style: normal;
  color: var(--sgi-soft);
  max-width: var(--sgi-measure);
}

.entry-content code, .wp-block-code {
  background: var(--sgi-sunken);
  border: 1px solid var(--sgi-rule);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}

/* Blocks that ship a hard-coded light ground of their own. Every page on the
   site was audited for these (104 generated Spectra stylesheets); this is the
   complete list of rules that would have gone unreadable on the dark ground,
   plus the Spectra defaults that still carry the plugin's own blue. */
.uagb-toc__wrap {
  background: var(--sgi-surface) !important;
  border-color: var(--sgi-rule) !important;
  border-radius: 0 !important;
}
.uagb-toc__wrap .uagb-toc__title,
.uagb-toc__list-wrap li a { color: var(--sgi-graphite) !important; }
.uagb-ifb-icon > span,
.uagb-ifb-content .uagb-ifb-icon-wrap svg,
.uagb-ifb-content .uagb-ifb-left-title-image svg,
.uagb-ifb-content .uagb-ifb-right-title-image svg {
  color: var(--sgi-soft) !important;
  fill: currentColor !important;
}
.uagb-highlight {
  background: var(--sgi-sunken) !important;
  color: var(--sgi-graphite) !important;
  -webkit-text-fill-color: var(--sgi-graphite) !important;
}
.spectra-image-gallery__control-dots li button::before,
.spectra-image-gallery__layout--carousel ul.slick-dots li button::before {
  color: var(--sgi-rule-firm) !important;
}

/* Images are documentation, not decoration: hairline-framed, never rounded,
   never shadowed. */
.wp-block-uagb-image__figure img,
.wp-block-image img,
.entry-content > figure img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── 9. Buttons that are not affiliate CTAs ─────────────────────────────────
   Outlined, always. Filling them with loden would spend the one colour that
   tells a visitor a click leaves the site and costs a merchant money.
   .sg .sg-cta carries no .wp-block-button__link class, so the affiliate CTA
   is not reachable from here.                                               */

/* The face is yta on a hairline rather than a transparent outline. Several of
   these buttons sit on top of photography — the category tiles set
   `* { color: light }` on everything inside them at (0,3,0) — and a
   transparent outline with graphite ink disappeared completely there. A yta
   chip with a firm hairline is legible on the page ground and on any
   photograph, which is the only version of this that cannot break. */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.entry-content .uagb-buttons-repeater,
.entry-content .uagb-infobox-cta-link,
.entry-content .uagb-cta__button-link-wrapper,
.wp-block-button__link.wp-element-button {
  background-color: var(--sgi-surface) !important;
  background-image: none !important;
  white-space: nowrap;
  color: var(--sgi-graphite) !important;
  border: 1px solid var(--sgi-rule-firm) !important;
  border-radius: 0 !important;
  font-family: var(--sgi-font);
  font-size: .95rem !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 13px 22px !important;
  min-height: 46px;
  line-height: 20px;
  box-shadow: none !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover,
.entry-content .uagb-buttons-repeater:hover,
.entry-content .uagb-infobox-cta-link:hover,
.entry-content .uagb-cta__button-link-wrapper:hover,
.entry-content .wp-block-button__link:focus,
.entry-content .uagb-infobox-cta-link:focus {
  background-color: var(--sgi-graphite) !important;
  color: var(--sgi-linen) !important;
  border-color: var(--sgi-graphite) !important;
}

/* ── 10. Forms ─────────────────────────────────────────────────────────────
   The newsletter submit is the one filled-grafit button in the system: it is
   the terminal action of a form, it appears once, and it stays clear of loden
   so the affiliate CTA keeps its monopoly on colour.                        */

.uagb-forms-input,
.uagb-forms-main-form .uagb-forms-input,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="search"],
.entry-content textarea,
.site-footer input[type="email"],
.site-footer input[type="text"] {
  background-color: var(--sgi-surface) !important;
  border: 1px solid var(--sgi-rule) !important;
  border-radius: 0 !important;
  color: var(--sgi-graphite) !important;
  font-family: var(--sgi-font);
  font-size: .95rem;
  min-height: 46px;
  box-shadow: none !important;
}
.uagb-forms-input::placeholder { color: var(--sgi-faint) !important; }
.uagb-forms-input:focus,
.uagb-forms-main-form .uagb-forms-input:focus {
  background-color: var(--sgi-surface) !important;
  border-color: var(--sgi-rule-firm) !important;
}
.uagb-forms-input-label,
.uagb-forms-main-form label {
  font-size: .68rem;
  letter-spacing: .155em;
  text-transform: uppercase;
  font-weight: 640;
  color: var(--sgi-soft);
}

.uagb-forms-main-submit-button,
.uagb-forms-main-submit-button.wp-block-button__link {
  background-color: var(--sgi-graphite) !important;
  color: var(--sgi-linen) !important;
  border: 1px solid var(--sgi-graphite) !important;
  border-radius: 0 !important;
  font-family: var(--sgi-font);
  font-size: .9rem !important;
  font-weight: 640 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 13px 22px !important;
  min-height: 46px;
  box-shadow: none !important;
  white-space: nowrap;
  transition: filter .15s;
}
.uagb-forms-main-submit-button .uagb-forms-main-submit-button-text { white-space: nowrap; }
.uagb-forms-main-submit-button:hover { filter: brightness(1.35); }

/* ── 11. Homepage ──────────────────────────────────────────────────────────
   The homepage is the discovery interface and the topical hub. It cannot be
   restructured from CSS alone — the blocks are authored content — but it can
   be made to state the promise immediately: a quiet ground, a graduated hero,
   category tiles that read as measured entries rather than showroom cards,
   and a måttband closing every section.                                     */

/* Every root section gets the same ground, and the pale accent band the theme
   painted behind the hero goes away. */
.home .uagb-is-root-container,
.home .wp-block-uagb-container.uagb-is-root-container {
  background-color: transparent !important;
  background-image: none !important;
}

/* The måttband closes each homepage section. It is drawn on the section, not
   inserted as markup, so no content changes. */
.home .entry-content > .uagb-is-root-container { position: relative; }
.home .entry-content > .uagb-is-root-container + .uagb-is-root-container::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 13px;
  pointer-events: none;
  border-top: 1px solid var(--sgi-rule-firm);
  background-image: var(--sgi-matt);
  background-size: 100% 5px;
  background-repeat: no-repeat;
}

/* Hero. The eyebrow takes the label treatment, the headline takes the tight
   tracking, and the standfirst drops to a reading measure. */
.home .uagb-ifb-title { letter-spacing: -0.034em; font-weight: 660; }
.home .uagb-ifb-desc { color: var(--sgi-soft); max-width: 34em; }
.home .uagb-ifb-desc strong { color: var(--sgi-graphite); font-weight: 620; }

/* The newsletter panel becomes a hairline-ruled entry instead of a floating
   white card. Selected by what it contains rather than by block id, so it
   survives the page being re-authored. Browsers without :has() simply get the
   form on the page ground, which is a fair degradation. */
.entry-content .uagb-layout-grid:has(.wp-block-uagb-forms) {
  background-color: var(--sgi-surface);
  border: 1px solid var(--sgi-rule);
  border-radius: 0 !important;
}

/* Every container is square-cornered: the site is ruled, not rounded. */
.entry-content .wp-block-uagb-container,
.entry-content .uagb-container-inner-blocks-wrap { border-radius: 0 !important; }

/* Category tiles read as measured entries — a hairline frame around the
   photograph rather than a floating showroom card. Identified structurally as
   the cells of a grid container, which is what a tile is, rather than by block
   id: the homepage is authored content and its block ids change. */
.entry-content .uagb-layout-grid > .wp-block-uagb-container {
  border: 1px solid var(--sgi-rule-firm) !important;
  border-radius: 0 !important;
}

/* Any figure or image block on the homepage loses its rounding so it agrees
   with the frames around it. */
.home .wp-block-uagb-image__figure,
.home .wp-block-uagb-image__figure img { border-radius: 0 !important; }

/* The dotted grid beside the hero is a second decorative motif competing with
   the måttband, and the system allows exactly one. Hidden rather than
   removed: this file changes no page content. */
.entry-content img[src*="dotted-pattern"] { display: none; }
.entry-content .wp-block-uagb-image:has(img[src*="dotted-pattern"]) { display: none; }

/* ── 12. Footer ────────────────────────────────────────────────────────────
   The footer opens with the måttband and then goes quiet. */

.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  background-color: var(--sgi-linen);
  color: var(--sgi-soft);
  border-top: 0;
}

.site-above-footer-wrap { position: relative; padding-top: 26px; }
.site-above-footer-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 13px;
  pointer-events: none;
  border-top: 1px solid var(--sgi-rule-firm);
  background-image: var(--sgi-matt-major);
  background-size: 100% 5px, 100% 11px;
  background-repeat: no-repeat;
}

.site-footer .menu-link,
.astra-footer-horizontal-menu .menu-link {
  font-size: .85rem;
  font-weight: 480;
  color: var(--sgi-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-footer .menu-link:hover { color: var(--sgi-graphite); }

.site-footer .footer-social-inner-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.site-footer .ast-builder-social-element {
  margin: 0 !important;
  color: var(--sgi-soft) !important;
  background: transparent !important;
  border: 1px solid var(--sgi-rule);
  border-radius: 0 !important;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s;
}
.site-footer .ast-builder-social-element:hover {
  color: var(--sgi-graphite) !important;
  border-color: var(--sgi-rule-firm);
}
.site-footer .ast-builder-social-element svg { fill: currentColor; }

.site-footer .ast-builder-html-element h4 {
  font-size: .95rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--sgi-graphite);
  max-width: 30em;
}
/* Soft rather than faint: the affiliate disclosure and the copyright live in
   this strip, and faint on linne measures 2.6:1 — legible enough to look
   deliberate, not legible enough to be a disclosure. Soft measures 4.9:1. */
.site-below-footer-wrap,
.site-below-footer-wrap .ast-builder-html-element p {
  font-size: .75rem;
  color: var(--sgi-soft);
}
.site-below-footer-wrap { border-top: 1px solid var(--sgi-rule); margin-top: 8px; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--sgi-graphite); }

/* ── 13. Accessibility and motion ──────────────────────────────────────── */

/* Deliberately no full-width button rule at mobile. The card system stretches
   the affiliate CTA edge to edge below 640px; leaving chrome buttons at their
   natural width is what keeps the two readable as different kinds of action on
   a phone, which is where most of this traffic is. */

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

@media print {
  .site-header, .site-footer, .ast-mobile-popup-wrapper { display: none; }
}