/* =====================================================================
   UX Polish v1.7.0 (30.09.2026): the site shell of the owner-approved design.
   Astra still renders header, footer and page container; this file restyles
   them so they match reports/design_final_20260930 (components.css sections
   4 header and 13 footer). Every value comes from design/tokens.json through
   the --ds-* aliases of deal-design-system. Figtree 400/600/700 only, sizes
   13/15/18/24/34, no dark mode, no gradients, no emoji.
   Specificity: everything is scoped under body.ds2 (added by deal-design-system)
   plus #masthead / #colophon / #primary ids, so it beats Astra's dynamic CSS
   without !important where possible.
   Sections: 1 overflow guard, 2 page + container, 3 global type, 4 header,
   5 header search, 6 mobile menu, 7 to 9 consent + ads (unchanged, kept
   verbatim), 10 footer, 11 back to top, 12 page templates (404, search,
   About/Contact/FAQ), 13 small fixes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Prevent horizontal page-drag, network-wide safety net.
   overflow-x:clip (not hidden) so it never fights position:sticky.
   --------------------------------------------------------------------- */
html {
    overflow-x: hidden; /* fallback for browsers without overflow-x:clip */
    overflow-x: clip;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

/* Real header height for anything that sticks under it. The header is not
   sticky, so it is 0; if the header ever sticks, set this to its height. */
body.ds2 {
    --bof-sticky-top: 0px;
}

/* ---------------------------------------------------------------------
   2. Page background and unboxed container.
   No white boxed card, no 4em #primary margin: one page colour, one
   920px column with 16px (390) / 24px (1440) gutters. Header, content and
   footer share the same left and right line.
   --------------------------------------------------------------------- */
body.ds2,
body.ds2 #page,
body.ds2 .site-content,
body.ds2 #content {
    background: var(--ds-page, #F3F6F4);
}

body.ds2 #masthead .ast-container,
body.ds2 #content > .ast-container,
body.ds2 #colophon .ast-builder-grid-row-container-inner {
    width: 100%;
    max-width: calc(var(--wrap, 920px) + 2 * var(--gutter, 16px));
    margin-inline: auto;
    padding-inline: var(--gutter, 16px);
    box-sizing: border-box;
}

body.ds2 #content > .ast-container {
    display: block;
}

body.ds2 #primary,
body.ds2 #primary.content-area {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
}

/* the white boxed card of Astra's separate container, on every content type */
body.ds2 .ast-separate-container .ast-article-single,
body.ds2 .ast-separate-container .ast-article-post,
body.ds2 .ast-separate-container .comments-area,
body.ds2 .ast-separate-container .ast-author-box,
body.ds2 .ast-separate-container .ast-related-posts-wrap,
body.ds2 .ast-plain-container .ast-article-single,
body.ds2 .ast-page-builder-template .entry-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ds2 .ast-separate-container #primary,
body.ds2 .ast-plain-container #primary {
    padding: 0 !important;
    margin: 0 !important;
}

/* components that bring their own .wrap live inside this column already */
body.ds2 #primary .wrap {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* short pages: keep the footer at the bottom of the viewport */
body.ds2 #page.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.ds2 #page.site > #content {
    flex: 1 0 auto;
}
body.ds2 #page.site > .site-footer {
    flex: none;
}

/* ---------------------------------------------------------------------
   3. Global type: Figtree 15/22 ink, headings Figtree 700.
   Astra's own font settings are "inherit"; this file owns the family so no
   Google Fonts request is made (Figtree is self hosted by deal-design-system).
   --------------------------------------------------------------------- */
body.ds2 {
    font-family: var(--ds-font);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: var(--ds-ink, #16201B);
    font-variant-numeric: lining-nums tabular-nums;
    -webkit-font-smoothing: antialiased;
}

body.ds2 h1,
body.ds2 h2,
body.ds2 h3,
body.ds2 h4,
body.ds2 h5,
body.ds2 h6 {
    font-family: var(--ds-font);
    font-weight: 700;
    color: var(--ds-ink, #16201B);
}

body.ds2 button,
body.ds2 input,
body.ds2 select,
body.ds2 textarea {
    font-family: var(--ds-font);
}

/* no auto hyphenation anywhere (a stat label once broke mid word) */
body, body * {
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

/* ---------------------------------------------------------------------
   4. Header: ONE lime row, 64px. Logo left (34px high), nav right (white,
   700, 44px targets). Astra's header builder puts logo in primary_left and
   primary menu + search in primary_right (see platform/design_settings.json);
   this only styles what is in #masthead.
   --------------------------------------------------------------------- */
body.ds2 #masthead .ast-primary-header-bar,
body.ds2 #masthead .main-header-bar {
    background: var(--ds-lime, #54B435);
    border: 0;
    box-shadow: none;
}

body.ds2 #masthead .site-primary-header-wrap {
    min-height: 64px;
}

body.ds2 #masthead .ast-builder-grid-row {
    align-items: center;
    gap: 16px;
}

body.ds2 #masthead .site-branding {
    padding: 0;
    margin: 0;
}

body.ds2 #masthead .ast-builder-layout-element {
    margin: 0;
}

body.ds2 #masthead .custom-logo-link {
    display: flex;
    align-items: center;
    min-height: 44px;
}

body.ds2 #masthead .custom-logo-link img,
body.ds2 #masthead .custom-logo {
    height: 34px !important;
    width: auto !important;
    max-width: none !important;
}

/* nav: white 700, 44px targets, no separators */
body.ds2 #masthead .main-header-menu {
    background: transparent;
    border: 0;
    gap: 4px;
}

body.ds2 #masthead .main-header-menu > .menu-item {
    margin: 0;
}

body.ds2 #masthead .main-header-menu > .menu-item > .menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    color: #FFFFFF;
    font-family: var(--ds-font);
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    text-decoration: none;
}

body.ds2 #masthead .main-header-menu > .menu-item > .menu-link:hover,
body.ds2 #masthead .main-header-menu > .menu-item:hover > .menu-link,
body.ds2 #masthead .main-header-menu > .menu-item.current-menu-item > .menu-link {
    background: transparent;
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.ds2 #masthead .main-header-menu > .menu-item > .menu-link .ast-icon svg,
body.ds2 #masthead .main-header-menu .dropdown-menu-toggle .ast-icon svg {
    width: 14px;
    height: 14px;
    fill: #FFFFFF;
}

body.ds2 #masthead :focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* dropdown (Kategooriad): white panel, hairline, ink text */
body.ds2 #masthead .sub-menu {
    background: var(--ds-surface, #FFFFFF);
    border: 1px solid var(--ds-line, #D9E0DC);
    border-radius: var(--ds-r, 12px);
    box-shadow: none;
    padding: 4px 0;
    min-width: 220px;
}

body.ds2 #masthead .sub-menu .menu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    color: var(--ds-ink, #16201B);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    border: 0;
    background: transparent;
}

body.ds2 #masthead .sub-menu .menu-link:hover {
    background: var(--ds-g50, #F0F8F3);
    color: var(--ds-g700, #17643A);
}

body.ds2 #masthead .sub-menu .menu-link .ast-icon {
    display: none;
}

body.ds2 #masthead .sub-menu :focus-visible {
    outline-color: var(--ds-g600, #1F7A46);
}

/* ---------------------------------------------------------------------
   5. Header search: an icon only (44px). The visible input is hidden; the
   button submits an empty query, which is the site search page (?s=).
   No new JS. Header rows other than the primary one, if a site still has
   them, keep their Astra look until platform/design_settings.json is applied.
   --------------------------------------------------------------------- */
body.ds2 #masthead .ast-header-search .ast-search-menu-icon .search-form {
    display: flex;
    align-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    position: static;
}

body.ds2 #masthead .ast-header-search .ast-search-menu-icon .search-form label {
    display: none;
}

body.ds2 #masthead .ast-header-search .ast-search-menu-icon .search-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ds-r-btn, 10px);
    color: #FFFFFF;
    cursor: pointer;
    transform: none;
}

body.ds2 #masthead .ast-header-search .ast-search-menu-icon .search-submit:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.ds2 #masthead .ast-header-search .ast-search-menu-icon .search-submit svg,
body.ds2 #masthead .ast-header-search .ast-search-menu-icon .ast-search-icon svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
    color: #FFFFFF;
}

/* exactly one search per viewport: the header icon shows from 768px up; below
   that the header has the menu button only (the homepage hero has its own field) */
@media (max-width: 767px) {
    body.ds2 #masthead .ast-header-search {
        display: none;
    }
}

/* homepage only: the hero carries the one search on every viewport, so the header
   icon is hidden here (every other page keeps it) */
body.ds2.home #masthead .ast-header-search {
    display: none;
}

/* sites without Astra Pro (LT) use the built-in slide search: same icon,
   the field opens as a white bar under the header */
body.ds2 #masthead .ast-header-search .ast-search-menu-icon.slide-search .ast-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-r-btn, 10px);
    color: #FFFFFF;
}

body.ds2 #masthead .ast-header-search .ast-search-menu-icon.slide-search .search-field {
    background: var(--ds-surface, #FFFFFF);
    color: var(--ds-ink, #16201B);
    border: 1px solid var(--ds-line, #D9E0DC);
    border-radius: var(--ds-r-btn, 10px);
    min-height: 44px;
    font-size: 15px;
}

.search-field::placeholder,
#masthead .search-field::placeholder,
.ast-header-search .search-field::placeholder,
.ast-search-menu-icon .search-field::placeholder {
    color: var(--ds-muted, #56635B) !important;
    -webkit-text-fill-color: var(--ds-muted, #56635B) !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   6. Mobile: 64px bar, logo left, bordered "Menüü" button right (10px
   radius, 1px white at 25 percent), open panel like the approved .hd__panel.
   --------------------------------------------------------------------- */
body.ds2 #ast-mobile-header .ast-primary-header-bar,
body.ds2 #ast-mobile-header .main-header-bar {
    background: var(--ds-lime, #54B435);
    border: 0;
    min-height: 64px;
}

body.ds2 #ast-mobile-header .ast-builder-grid-row {
    align-items: center;
    min-height: 64px;
    padding-inline: var(--gutter, 16px);
}

body.ds2 #ast-mobile-header .menu-toggle,
body.ds2 #ast-mobile-header .ast-button-wrap .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--ds-r-btn, 10px);
    color: #FFFFFF;
    font-family: var(--ds-font);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

body.ds2 #ast-mobile-header .menu-toggle:hover,
body.ds2 #ast-mobile-header .menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
}

body.ds2 #ast-mobile-header .menu-toggle .mobile-menu-toggle-icon svg,
body.ds2 #ast-mobile-header .menu-toggle .ahfb-svg-iconset svg {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
    color: #FFFFFF;
}

body.ds2 #ast-mobile-header .menu-toggle .mobile-menu-wrap,
body.ds2 #ast-mobile-header .menu-toggle .mobile-menu {
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

body.ds2 #ast-mobile-header .ast-mobile-header-content {
    background: var(--ds-lime, #54B435);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0;
    box-shadow: none;
}

body.ds2 #ast-mobile-header .ast-mobile-header-content .main-header-menu,
body.ds2 #ast-mobile-header .ast-mobile-header-content .main-navigation {
    background: transparent;
    border: 0;
}

body.ds2 #ast-mobile-header .ast-mobile-header-content .menu-item {
    border: 0;
}

body.ds2 #ast-mobile-header .ast-mobile-header-content .menu-link {
    display: flex;
    align-items: center;
    border: 0;
    min-height: 48px;
    padding: 0 var(--gutter, 16px);
    background: transparent;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    text-decoration: none;
}

body.ds2 #ast-mobile-header .ast-mobile-header-content .sub-menu {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

body.ds2 #ast-mobile-header .ast-mobile-header-content .sub-menu .menu-link {
    color: #FFFFFF;
    font-weight: 600;
    padding-left: calc(var(--gutter, 16px) + 16px);
}

body.ds2 #ast-mobile-header .ast-mobile-header-content .ast-icon svg {
    fill: #FFFFFF;
}

body.ds2 #ast-mobile-header :focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   7. Cookie/privacy consent panel (wpconsent-cookies-banner-privacy-suite)
   burying offer content on mobile.
   Owner-reported (26.09.2026), evidence in
   reports/ux_review_20260926/after/C/ee_boozt_mobile_top.png and
   ee_home_mobile.png: a panel titled "Kuidas teie andmeid kasutatakse?"
   sits over the first offer card on a short mobile viewport.

   ROOT CAUSE (found by reading the plugin's own source over SSH, not
   guessed): wpconsent renders its banner/preferences UI inside an OPEN
   shadow DOM rooted at #wpconsent-container (see
   wp-content/plugins/wpconsent-cookies-banner-privacy-suite/
   src/frontend/banner.js -> attachShadow({mode:'open'})). Its
   src/frontend/banner.css sets `.wpconsent-banner { max-height:
   calc(100vh - 20px); }` - effectively UNCAPPED. On a short phone
   viewport, wpconsent's own (site-owner-editable, GDPR-required) consent
   text is long enough to push the banner to nearly full viewport height,
   burying the header, hero and first offer card behind it.

   FIX: cap that height. Because the UI lives in a shadow root, ordinary
   selectors like `.wpconsent-banner{...}` from this stylesheet CANNOT
   reach it - shadow DOM blocks normal CSS combinators by design. wpconsent
   deliberately exposes every meaningful element via a `part="..."`
   attribute for exactly this purpose (verified directly in
   includes/class-wpconsent-banner.php: `part="wpconsent-banner"`,
   `part="wpconsent-preferences-content"`, etc.) - `::part()` is the
   ONE sanctioned, update-safe way page CSS can style into an open shadow
   root, and it is what wpconsent's own docs point site owners at.

   This changes ONLY layout (a fixed cap + internal scroll for whatever
   text doesn't fit). It does not touch the plugin's files, does not
   change any consent default, does not remove or relabel any button, and
   does not touch the IAB TCF/AdSense integration - the banner, its
   Accept/Reject/Manage controls and the required legal text all still
   render and function exactly as before; a long paragraph now scrolls
   inside its own box instead of pushing the whole banner over the
   screen. The small always-visible "reopen preferences" icon
   (#wpconsent-consent-floating, a normal light-DOM element, NOT inside
   the shadow root) is untouched - it is already `position:fixed` with a
   24px icon in a small corner button and does not by itself cover
   card-sized content. Deployed only to sites that run this plugin (EE,
   LV, SI, RO - confirmed via `wp plugin list --status=active`; NOT
   present on SK/LT/DK/ES, where this rule is simply inert/no-op since
   #wpconsent-container never exists there).
   --------------------------------------------------------------------- */
#wpconsent-container::part(wpconsent-banner) {
    max-height: min(70vh, 560px) !important;
    overflow-y: auto !important;
}

#wpconsent-container::part(wpconsent-preferences-content) {
    max-height: 85vh !important;
}

/* Give the required consent text room to breathe inside its now-scrollable
   box rather than clipping mid-sentence at the very edge of the panel. */
#wpconsent-container::part(wpconsent-banner-body) {
    padding-bottom: 8px;
}

/* ---------------------------------------------------------------------
   8. Google's own consent panel ("Ako sa používajú vaše údaje" / shield
      icon) overlapping the hero on desktop.
   Owner-reported (27.09.2026), evidence in
   reports/vibecode_audit_20260927/after/E/SK_desktop_home.png: a small
   floating panel with a shield icon sits over the LEFT of the hero on
   SK's desktop homepage. This is NOT wpconsent (confirmed via
   `wp plugin list --status=active` - wpconsent is not active on SK) -
   the "Spravované Googlom. Spĺňa rámec transparentnosti a súhlasu
   združenia IAB." footer line identifies it as Google's own Funding
   Choices / AdSense consent management tool, injected client-side by
   Google's script - the SAME third-party surface CLAUDE.md's
   05.09.2026 dark-mode note and 04_detail.md finding #6 already flag as
   "not fixable from our CSS" for its THEMING. Positioning is a
   different, narrower question: Funding Choices renders its persistent
   icon + panel as plain (non-shadow-root) elements under well-documented
   root classes, so an ordinary CSS rule CAN reach them - it just cannot
   be verified live in this session (the automated browser used for
   verification never triggered the consent flow - no EU-consent cookie
   state, no ad-blocker-free real Chrome session with an EU-geo IP - so
   this is applied defensively, not confirmed against a live render).
   SCOPE, to stay inside "position only, never touch consent logic": no
   selector below is a button, a click handler, or anything that changes
   a default; every rule only constrains WIDTH/POSITION so the panel
   docks to a corner instead of spanning over hero text, exactly like the
   wpconsent fix above. If a given site's Funding Choices version doesn't
   use these class names, this is a silent no-op (same safety property as
   the wpconsent block, which is inert on SK/LT/DK/ES). */
.fc-consent-root {
    max-width: min(360px, calc(100vw - 32px)) !important;
}
.fc-ab-root {
    max-width: min(360px, calc(100vw - 32px)) !important;
}

/* ---------------------------------------------------------------------
   9. Unfilled Google Auto Ads slot leaving a reserved blank band.
   Owner-reported (27.09.2026), evidence in the same screenshot: ~150px
   of blank white space between the header and the nav bar, and ~250px
   between the homepage's closing paragraph and the footer - both are the
   footprint of an Auto Ads container that reserved height before
   resolving, then never got a fill (or Google's own auto-collapse script
   didn't run in time/at all).
   Deal Ad Slots (deal-ad-slots.php, this workstream's own plugin)
   already proved the right pattern for exactly this failure mode
   (v1.3.0, 26.09.2026): watch data-ad-status via MutationObserver and
   collapse the WHOLE container once AdSense marks it unfilled - but that
   plugin only auto-places on BRAND pages (SECTION_END:brand_offers marker)
   and is only active on EE/LV, so it does nothing for a homepage gap on
   SK/other sites. This generalises the same technique network-wide,
   site-wide, for whatever container Auto Ads (not deal-ad-slots) injects,
   without touching a single FILLED ad - a slot Google actually served
   into is completely untouched by this rule.
   Targets the standard Google Publisher Tag / Auto Ads containers
   (documented ids/classes): a `google_ads_iframe_*` wrapper div, an
   `ins.adsbygoogle` left with no rendered ad, and the generic
   `.google-auto-placed` wrapper class Auto Ads uses for its own inserted
   units. Mirrors deal-ad-slots' own collapse condition
   (`data-ad-status="unfilled"`) plus a zero-height fallback for a
   completely empty container (no iframe child at all) so a slot that
   never even attempts to resolve doesn't sit there as permanent dead
   space either. */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}
div[id^="google_ads_iframe_"]:empty,
div.google-auto-placed:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* 27.09.2026 follow-up: reproduced live on dinerabatkode.dk (coordinator,
   real Chrome + getBoundingClientRect) - the actual wrapper is
   `div.google-auto-placed > ins.adsbygoogle[data-ad-status="unfilled"]`,
   which is NEVER `:empty` (it has the <ins> as a child), so the rule
   above never matched it. `:has()` (supported since Chrome 105, i.e.
   effectively all real traffic) closes that gap as a CSS-only backstop;
   js/ux-polish.js's MutationObserver is the primary mechanism (handles
   the case below, and it doesn't need `:has()` support). */
div.google-auto-placed:has(> ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* =====================================================================
   10. Footer: LIGHT, on the page colour, top hairline. The ONLY colour
   values are the three footer tokens (--ds-footer-bg / -ink / -line), so
   the footer can be flipped to the deep green variant by changing those
   three tokens in deal-design-system and nothing here.
   Layout: Abi + Kontakt side by side on mobile, "Oluline info" links in
   two columns below; three columns on desktop, all left aligned.
   ===================================================================== */
body.ds2 #colophon {
    margin-top: var(--gap, 32px);
    background: var(--ds-footer-bg, #F3F6F4);
    color: var(--ds-footer-ink, #16201B);
    border-top: 1px solid var(--ds-footer-line, #D9E0DC);
    font-family: var(--ds-font);
    font-size: 15px;
    line-height: 22px;
}

body.ds2 #colophon .site-primary-footer-wrap,
body.ds2 #colophon .site-below-footer-wrap,
body.ds2 #colophon .site-above-footer-wrap,
body.ds2 #colophon .ast-builder-grid-row-container-inner {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

body.ds2 #colophon .site-primary-footer-wrap {
    padding: var(--gap, 32px) 0 !important;   /* Astra adds 40px left and right; the shared gutter is on the inner wrapper */
}

body.ds2 #colophon .ast-builder-footer-grid-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
    align-items: start;
}

/* the old white logo column has no place on a light footer */
body.ds2 #colophon .site-footer-primary-section-1 {
    display: none;
}

body.ds2 #colophon .site-footer-section {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

body.ds2 #colophon .footer-widget-area,
body.ds2 #colophon .footer-widget-area .widget {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}

/* mobile order: Abi, Kontakt, then the long list across the full row */
body.ds2 #colophon .site-footer-primary-section-3 {
    order: 3;
}
body.ds2 #colophon .site-footer-section:has(.menu > li:nth-child(3)) {
    grid-column: 1 / -1;
}

/* headings: same size and weight whichever block made them */
body.ds2 #colophon .footer-widget-area h1,
body.ds2 #colophon .footer-widget-area h2,
body.ds2 #colophon .footer-widget-area h3,
body.ds2 #colophon .footer-widget-area h4,
body.ds2 #colophon .footer-widget-area h5,
body.ds2 #colophon .footer-widget-area h6,
body.ds2 #colophon .widget-title,
body.ds2 #colophon .uagb-heading-text,
body.ds2 #colophon .uagb-heading-text strong {
    font-family: var(--ds-font) !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    color: var(--ds-footer-ink, #16201B) !important;
}

body.ds2 #colophon .wp-block-uagb-advanced-heading {
    margin: 0 !important;
}

body.ds2 #colophon .widget + .widget {
    margin-top: 0 !important;
}

/* lists and links */
body.ds2 #colophon .menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ds2 #colophon .menu:has(> li:nth-child(3)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

body.ds2 #colophon a,
body.ds2 #colophon .menu-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 !important;
    color: var(--ds-footer-ink, #16201B) !important;
    font-family: var(--ds-font);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    text-decoration: none;
    background: transparent;
}

body.ds2 #colophon a:hover,
body.ds2 #colophon a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.ds2 #colophon :focus-visible {
    outline: 3px solid var(--ds-footer-ink, #16201B);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    body.ds2 #colophon .ast-builder-footer-grid-columns {
        grid-template-columns: repeat(3, 1fr) !important;
        column-gap: 24px !important;
    }
    body.ds2 #colophon .site-footer-primary-section-3 {
        order: 0;
    }
    body.ds2 #colophon .site-footer-section:has(.menu > li:nth-child(3)) {
        grid-column: auto;
    }
    body.ds2 #colophon .menu:has(> li:nth-child(3)) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    body.ds2 #colophon a,
    body.ds2 #colophon .menu-link {
        min-height: 36px;
    }
}

/* legal line printed after the footer by deal-design-system: 13/18 muted,
   same column as the rest of the shell */
body.ds2 .ds-disclosure {
    max-width: calc(var(--wrap, 920px) + 2 * var(--gutter, 16px));
    margin: 0 auto !important;
    padding: 0 var(--gutter, 16px) var(--gap, 32px) !important;
    background: var(--ds-footer-bg, #F3F6F4) !important;
    color: var(--ds-muted, #56635B) !important;
    color: color-mix(in srgb, var(--ds-footer-ink, #16201B) 70%, var(--ds-footer-bg, #F3F6F4)) !important;
    font-family: var(--ds-font);
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: left;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   11. Back to top: small, neutral, hidden near primary actions and while
   the footer is in view (js/ux-polish.js toggles the two classes).
   --------------------------------------------------------------------- */
#ast-scroll-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 15px !important;
    bottom: 24px !important;
    right: 16px !important;
    border-radius: var(--ds-r-btn, 10px) !important;
    background: var(--ds-surface, #FFFFFF) !important;
    color: var(--ds-ink, #16201B) !important;
    border: 1px solid var(--ds-line, #D9E0DC) !important;
    box-shadow: none !important;
    opacity: 0.92;
}

#ast-scroll-top .ast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#ast-scroll-top .ast-icon.icon-arrow svg {
    width: 1em !important;
    fill: currentColor !important;
    color: var(--ds-ink, #16201B) !important;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
    background: var(--ds-subtle, #E8EDEA) !important;
    opacity: 1;
}

#ast-scroll-top:not(.uxp-scrolled) {
    opacity: 0 !important;
    visibility: hidden !important;   /* back to top is pointless (and covers the first offer button) until the page is scrolled */
    pointer-events: none !important;
}

#ast-scroll-top.uxp-cta-near,
#ast-scroll-top.uxp-footer-near,
#ast-scroll-top.uxp-panel-near {
    opacity: 0 !important;
    visibility: hidden !important;   /* not just transparent: a hidden button must not count as a line over a CTA */
    pointer-events: none !important;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

/* 1.7.2: on wide screens park the button in the page gutter, right of the 920px content column, so it
   sits beside the panels instead of on them (js adds uxp-panel-near wherever it would still cover content). */
@media (min-width: 1100px) {
    #ast-scroll-top {
        right: max(16px, calc(50vw - 460px - 76px)) !important;
    }
}

/* ---------------------------------------------------------------------
   12. Page templates: tokens, Figtree, .sec style spacing only.
   --------------------------------------------------------------------- */

/* 404 */
body.ds2.error404 .ast-404-layout-1 {
    padding: var(--gap, 32px) 0 0 !important;
    text-align: left;
}
body.ds2.error404 .page-title {
    font-size: 24px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: var(--ds-ink, #16201B) !important;
    margin: 0 0 8px !important;
}
body.ds2.error404 .page-sub-title {
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    color: var(--ds-muted, #56635B) !important;
}
body.ds2.error404 .ast-404-search .search-form {
    max-width: 560px;
    margin: var(--s2, 16px) 0 0;
}
.uxp-404-home-wrap {
    background: transparent;
    margin: 0 !important;
    padding: var(--s2, 16px) 0 0;
    text-align: left !important;
}
.uxp-404-home {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 !important;
    font-weight: 600;
    color: var(--ds-g700, #17643A);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* About, Contact, FAQ and legal pages */
body.ds2 .uxp-info-page .entry-header {
    margin: var(--s2, 16px) 0 0;
}
body.ds2 .uxp-info-page .entry-title,
body.ds2 .uxp-info-page .entry-content h1 {
    font-size: 24px;
    line-height: 28px;
    margin: 0 0 var(--s1, 8px);
}
body.ds2 .uxp-info-page .entry-content {
    max-width: 66ch;
    margin-top: var(--s2, 16px);
}
body.ds2 .uxp-info-page .entry-content h2 {
    font-size: 18px !important;
    line-height: 24px !important;
    margin: var(--gap, 32px) 0 var(--s1, 8px) !important;
}
body.ds2 .uxp-info-page .entry-content h3:not(.sleek-faq-accordion-question) {
    font-size: 15px;
    line-height: 22px;
    margin: var(--s2, 16px) 0 4px;
}
body.ds2 .uxp-info-page .entry-content > h2:first-child {
    margin-top: 0 !important;
}
body.ds2 .uxp-info-page .entry-content p {
    margin: 0 0 12px;
}
@media (min-width: 768px) {
    body.ds2 .uxp-info-page .entry-title,
    body.ds2 .uxp-info-page .entry-content h1 {
        font-size: 34px;
        line-height: 40px;
    }
    body.ds2 .uxp-info-page .entry-content h2 {
        font-size: 24px !important;
        line-height: 28px !important;
    }
}

/* FAQ chevrons: drawn, not a text glyph */
.sfa-accordion-trigger .sfa-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0 !important;
}
.sfa-accordion-trigger .sfa-icon::before {
    content: "" !important;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* Search results: the approved list style (.sim rows), one column */
.uxp-search-primary {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--s2, 16px) 0 0;
    box-sizing: border-box;
}
.uxp-search-header {
    margin: 0 0 var(--s2, 16px);
}
.uxp-search-title {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ds-ink, #16201B);
    margin: 0;
}
.uxp-search-title span {
    color: var(--ds-g700, #17643A);
}
.uxp-search-count {
    margin: var(--s1, 8px) 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--ds-muted, #56635B);
}
.uxp-search-primary .search-form {
    position: relative;
    display: flex;
    height: 52px;
    max-width: 560px;
    margin: 0 0 var(--s2, 16px);
    gap: 0;
}
.uxp-search-primary .search-form label {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.uxp-search-primary .search-form .search-field {
    width: 100%;
    height: 52px;
    padding: 0 76px 0 20px;
    border: 1px solid var(--ds-line, #D9E0DC);
    border-radius: var(--ds-r-btn, 10px);
    background: var(--ds-surface, #FFFFFF);
    color: var(--ds-ink, #16201B);
    font-size: 15px;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.uxp-search-primary .search-form .search-field:focus {
    outline: 3px solid var(--ds-g600, #1F7A46);
    outline-offset: 1px;
}
.uxp-search-primary .search-form .search-submit {
    position: absolute;
    right: 4px;
    top: 4px;
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ds-r-btn, 10px);
    background: var(--ds-g600, #1F7A46);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}
.uxp-search-primary .search-form .search-submit:hover {
    background: var(--ds-g700, #17643A);
}

.uxp-sr-list {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 var(--pad, 16px);
    background: var(--ds-surface, #FFFFFF);
    border: 1px solid var(--ds-line, #D9E0DC);
    border-radius: var(--ds-r, 12px);
}
.uxp-sr-list a,
.uxp-sr-list a:nth-last-child(2) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ds-line, #D9E0DC);
    text-decoration: none;
}
.uxp-sr-list a:last-child {
    border-bottom: 0;
}
.uxp-sr-logo {
    flex-shrink: 0;
}
.uxp-sr-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.uxp-sr-title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ds-ink, #16201B);
}
.uxp-sr-list a:hover .uxp-sr-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.uxp-sr-excerpt {
    font-size: 13px;
    line-height: 18px;
    color: var(--ds-muted, #56635B);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.uxp-sr-excerpt:empty {
    display: none;
}
.uxp-sr-empty {
    padding: var(--gap, 32px) 0;
    color: var(--ds-muted, #56635B);
}
.uxp-sr-empty-cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin-top: var(--s1, 8px);
    padding: 0 20px;
    border-radius: var(--ds-r-btn, 10px);
    background: var(--ds-g600, #1F7A46);
    color: #FFFFFF !important;
    font-weight: 600;
    text-decoration: none !important;
}
.uxp-sr-empty-cta:hover {
    background: var(--ds-g700, #17643A);
}
.uxp-search-primary :focus-visible {
    outline: 3px solid var(--ds-g600, #1F7A46);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   13. Small fixes kept from earlier passes.
   --------------------------------------------------------------------- */
.site-footer .wp-block-uagb-advanced-heading {
    margin-bottom: 0 !important;
}

/* 1.7.1: Astra Header Builder sets a 40px (20px tablet) bottom margin on .site-header; the approved page starts right under the header. */
body.ds2.ast-hfb-header .site-header{margin-bottom:0;}

/* ---------------------------------------------------------------------
   13. 1.7.2 (design release 2): token-only borders and fills on the 404 search field and the
   previous/next post links (Astra draws them in #ddd and #fafafa, which are not palette colours).
   --------------------------------------------------------------------- */
body.ds2 .search-form .search-field,
body.ds2 .search-form input[type="search"] {
    border-color: var(--ds-line, #D9E0DC) !important;
    background: var(--ds-surface, #FFFFFF) !important;
    border-radius: var(--ds-r-btn, 10px) !important;
}
body.ds2 .post-navigation,
body.ds2 .post-navigation .nav-links,
body.ds2 .post-navigation a {
    border-color: var(--ds-line, #D9E0DC) !important;
}