/* Custom styles for the Kauno Žalgiris header & footer.
   Written by hand (not Tailwind-generated) because this theme's style.css
   is a static, pre-compiled file and cannot pick up new utility classes. */

/* ---------- Shared brand tokens ---------- */
:root {
  --zg-bg: #001009;
  --zg-bg-soft: #1f2937;
  --zg-border: rgba(255, 255, 255, 0.1);
  --zg-text: #ffffff;
  --zg-text-muted: #d1d5db;
  --zg-text-faint: #9ca3af;
  --zg-accent: #b1ff29; /* Žalgiris "Digital yellow" CTA colour */
  --zg-accent-hover: #8ecc21;
  --zg-green: #1ca256; /* Žalgiris green brand colour */
  --zg-green-hover: #16803f;
  --zg-font: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* zalgiris.lt's own typeface */
}

/* zalgiris.lt is built on Inter; the base theme otherwise falls back to the
   generic Tailwind system-font stack. Loaded via Google Fonts in
   document_head.hbs (replaces NordVPN's proprietary "Aurora" CDN font). */
html {
  font-family: var(--zg-font);
}

/* Defensive safety net: several of the customisations above (full-bleed
   header, wider .container, sidebar language switcher, etc.) push elements
   right up to the viewport edge, and it only takes one of them being a
   fraction of a pixel too wide on some screen size to introduce horizontal
   scrolling on mobile. Nothing on this site intentionally scrolls
   sideways, so clip it at the document level rather than chasing every
   individual overflow source.
   Using `clip` rather than `hidden` here matters: per the CSS Overflow
   spec, setting only `overflow-x` to anything other than `visible` forces
   the browser to compute `overflow-y` as `auto` too - i.e. `hidden` here
   would silently turn html/body into scroll containers on both axes. Any
   scroll-container ancestor breaks `position: sticky` for every descendant
   (that's exactly why the article page's TOC sidebar never stuck), so
   `clip` is used instead: it still prevents horizontal scrolling, but
   doesn't carry that same forced-`overflow-y` side effect. */
html,
body {
  overflow-x: clip;
}

/* Applied by handleSidebarScrollLock.js for as long as the mobile burger
   menu is open - freezes the page in place so the fixed-position sidebar +
   backdrop behind it can't clip/detach on mobile browsers while the page
   scrolls underneath (see that file for the full explanation). `body`
   itself becomes the thing that's pinned (via `top`, set inline by the
   script to the negative of the scroll position being frozen at) rather
   than `html`, since `html` still needs to stay a normal block for that
   `top` offset to have anything meaningful to sit inside of. */
html.zg-scroll-locked,
html.zg-scroll-locked body {
  overflow: hidden;
}

html.zg-scroll-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* Replaces NordVPN's "mountain-background.png" CDN image on the 404/error
   page with a flat brand-green gradient so nothing points at their CDN. */
.Error-page__main-section {
  background-image: linear-gradient(180deg, rgba(28, 162, 86, 0.08), rgba(28, 162, 86, 0) 60%) !important;
}

/* ---------- Language switcher ---------- */
/* Lives inline in the header's own action row (both the >=1440px desktop
   copy and the sub-1440px mobile copy - see header.hbs) instead of a
   separate bar above it, so it reads as part of the header rather than a
   strip sitting on top of it. A single toggle button shows the current
   locale's own name (current_locale.name, e.g. "Lietuvi\u0173") and expands
   an accordion-style panel listing every other locale Zendesk has enabled
   for this Help Center (alternative_locales) - nothing here is hardcoded to
   LT/EN, so it scales automatically if more locales are turned on later. */
.zg-lang-switcher {
  position: relative;
}

.zg-lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 7.5rem;
  padding: 6px 8px;
  border-radius: 9999px;
  border: 1px solid var(--zg-border);
  background-color: transparent;
  color: var(--zg-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.zg-lang-switcher__current {
  overflow: hidden;
  text-overflow: ellipsis;
  /* The parent toggle's line-height:1 is exactly font-size, which several
     glyphs - lowercase descenders like the "g" in "English", or the nosinė
     under "ų" in "Lietuvių" - render slightly outside of. Harmless on its
     own, but combined with `overflow: hidden` right here (needed for the
     ellipsis truncation of long locale names) it visibly clips them.
     A taller line box gives every glyph enough room without affecting the
     toggle button's own height, which is set by its padding regardless. */
  line-height: 1.4;
}

.zg-lang-switcher__toggle:hover {
  border-color: var(--zg-accent);
}

.zg-lang-switcher__toggle:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
}

.zg-lang-switcher__toggle[aria-expanded='true'] {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--zg-accent);
}

.zg-lang-switcher__chevron {
  color: var(--zg-text-faint);
  transform: rotate(90deg);
  transition: transform 0.15s ease-in-out;
  flex-shrink: 0;
}

.zg-lang-switcher__toggle[aria-expanded='true'] .zg-lang-switcher__chevron {
  transform: rotate(-90deg);
  color: var(--zg-text);
}

/* The panel expands directly under the toggle rather than pushing the rest
   of the header row down, since a reflowing accordion inside a fixed-height
   header bar would shift the logo/nav every time it opened. */
.zg-lang-switcher__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--zg-bg-soft);
  border: 1px solid var(--zg-border);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

/* Applied both to the <a> for each alternative locale and directly to the
   <li> for the current one (which isn't a link - see header.hbs). */
.zg-lang-switcher__option {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--zg-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

a.zg-lang-switcher__option:hover,
a.zg-lang-switcher__option:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--zg-text);
}

a.zg-lang-switcher__option:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: -2px;
}

.zg-lang-switcher__option.is-current {
  color: var(--zg-text);
  font-weight: 700;
  cursor: default;
}

/* Sidebar (light) variant - injected by handleLocaleSwitcher.js into the
   mobile slide-out menu (`#sidebar`), which is a light `bg-secondary` panel
   floating on top of the dark header bar (see the `[data-toggle-sidebar]
   .text-tertiary` comment below in the Header section) rather than part of
   the bar itself, so every colour above (chosen for a dark background)
   needs a light-mode counterpart here instead of inheriting it as-is. */
.zg-lang-switcher--sidebar {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(42, 43, 50, 0.1);
}

.zg-lang-switcher--sidebar .zg-lang-switcher__toggle {
  max-width: none;
  width: 100%;
  justify-content: space-between;
  padding: 10px 12px;
  border-color: rgba(42, 43, 50, 0.16);
  color: #2a2b32; /* .text-primary, matches the other sidebar nav links */
  font-size: 1rem;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__toggle:hover {
  border-color: #1ca256; /* .text-accent / brand green - the light-bg accent */
}

.zg-lang-switcher--sidebar .zg-lang-switcher__toggle:focus-visible {
  outline-color: #1ca256;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__toggle[aria-expanded='true'] {
  background-color: rgba(42, 43, 50, 0.06);
  border-color: #1ca256;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__chevron {
  color: #6c6d75; /* .text-tertiary */
}

.zg-lang-switcher--sidebar .zg-lang-switcher__toggle[aria-expanded='true'] .zg-lang-switcher__chevron {
  color: #2a2b32;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__panel {
  position: static;
  margin-top: 8px;
  background-color: #f7f7f8;
  border-color: rgba(42, 43, 50, 0.1);
  box-shadow: none;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__option {
  color: #4d4e56; /* .text-secondary */
}

.zg-lang-switcher--sidebar a.zg-lang-switcher__option:hover,
.zg-lang-switcher--sidebar a.zg-lang-switcher__option:focus-visible {
  background-color: rgba(42, 43, 50, 0.08);
  color: #2a2b32;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__option.is-current {
  color: #2a2b32;
}

/* ---------- Locale suggestion banner ---------- */
/* Sits above the header bar (see the markup + comment in header.hbs) using
   the same `bg-accent-subtle` / `text-accent` / `border-accent` utility
   classes as the admin-configurable notification banner just below it in
   the same file, so it reads as "part of the theme's banner system" rather
   than a one-off component with its own colour scheme. Only the bits those
   utilities don't cover - the CTA "button", the dismiss control, and the
   flex layout between the two - need custom rules here. */
.zg-locale-banner {
  flex-wrap: wrap;
}

.zg-locale-banner__text {
  margin: 0;
}

.zg-locale-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.zg-locale-banner__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: #1ca256;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.zg-locale-banner__cta:hover,
.zg-locale-banner__cta:focus-visible {
  background-color: #054a29;
  color: #fff;
}

.zg-locale-banner__cta:focus-visible {
  outline: 2px solid #054a29;
  outline-offset: 2px;
}

.zg-locale-banner__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: transparent;
  color: #1ca256;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.zg-locale-banner__dismiss:hover {
  background-color: rgba(28, 162, 86, 0.12);
}

.zg-locale-banner__dismiss:focus-visible {
  outline: 2px solid #1ca256;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .zg-locale-banner__text {
    flex-basis: 100%;
  }
}

/* ---------- Header ---------- */
/* The base theme renders the header as a boxed, floating "pill" (container +
   rounded-full) at the xl breakpoint. With a solid dark background that boxed
   layout leaves large empty gutters on either side and looks broken, so we
   force the bar to always run full-bleed edge-to-edge instead. */
.zg-header {
  background-color: var(--zg-bg) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The bar above is full-bleed, but the row of content *inside* it (logo,
   nav links, search, language switcher) still sits in Zendesk's own
   ".container" utility - which never grows past 1168px no matter how wide
   the browser window is (confirmed in the compiled style.css: its last
   defined breakpoint is 1200px -> max-width:1168px, nothing wider). That
   1168px ceiling is the actual reason the language switcher + search box
   keep running out of room even on ordinary laptop screens - raising the
   burger-menu breakpoint alone can't fix it, since the content row is
   capped at the same width regardless of viewport.
   Uncapping it completely (max-width: none) fixes the fit but overcorrects
   on wide/ultra-wide monitors: the logo+nav cluster and the search+language
   cluster both stay their natural (compact) width, so the row just gets a
   large dead gap stretched between them instead of actually needing it -
   and it stops lining up with the narrower column the page body below it
   uses. A fixed, moderate cap - matching the 1440px breakpoint below,
   comfortably past the old 1168px ceiling without inviting that gap -
   avoids both problems. */
.zg-header .container {
  max-width: 1440px !important;
}

.zg-header .text-tertiary {
  /* Was var(--zg-text-muted) (grey) - now matches the plain white
     .zg-header__nav links (Insider/Bilietai/...) right next to these two,
     rather than standing out as a dimmer shade among otherwise same-weight
     header text. */
  color: var(--zg-text) !important;
  /* Both "Pagalbos centras" and the "Return to zalgiris.lt" label (which
     also carries this class - see handleReturnLink.js) render at md:text-lg
     (18px+) from their own Tailwind classes, noticeably larger than the
     0.875rem/14px .zg-header__nav links right next to them. Matching that
     size here reads as one consistent header rather than two font scales
     competing for attention, and frees up a bit more width for the search
     box + language switcher besides. */
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

/* "Pagalbos centras" (back-to-help-center link next to the logo) wraps its
   text in a .text-tertiary <p>, which the blanket rule above pins to a
   fixed colour regardless of state. Give hover/focus a higher-specificity
   rule so it glows the same accent colour as every other header link. */
.zg-header a.js-localized-link-title:hover .text-tertiary,
.zg-header a.js-localized-link-title:focus-visible .text-tertiary {
  color: #b1ff29 !important;
}

/* Same treatment for the "Return to zalgiris.lt" label added next to the
   crest by handleReturnLink.js - keeps it visually consistent with
   "Pagalbos centras" right beside it, both at rest and on hover/focus. */
.zg-header #header-hp-link:hover .text-tertiary,
.zg-header #header-hp-link:focus-visible .text-tertiary {
  color: #b1ff29 !important;
}

/* The mobile sidebar is a light (bg-secondary) panel that floats on top of
   the dark header bar - it is NOT part of the dark bar itself, so text
   inside it must keep the theme's native dark colours instead of the
   white/muted colours meant for the bar. */
.zg-header [data-toggle-sidebar] .text-tertiary {
  color: #6c6d75 !important;
}

.zg-header .bg-tertiary {
  background-color: var(--zg-border) !important;
}

.zg-header .js-header-height > a#skip-to-main-content {
  background-color: #fff;
}

/* Mobile hamburger toggle: its icon is dark-on-dark by default (designed for
   a light header background), making it invisible against the new dark bar. */
.zg-header #mobile-sidebar-open svg path {
  fill: var(--zg-text) !important;
}

.zg-header #mobile-sidebar-open:hover svg path,
.zg-header #mobile-sidebar-open:active svg path {
  fill: var(--zg-accent) !important;
}

/* ---------- Desktop nav / mobile burger switch ---------- */
/* The theme's own JS toggles .desktop-header / .mobile-header based on
   measured pixel widths, but it has no idea our extra zg-header__nav links
   exist, so its calculations don't line up with them. That mismatch let the
   header "lose" the nav links on many phone/tablet sizes (JS picked desktop
   mode, our CSS hid the links, and no burger appeared to replace them).
   We make the breakpoint fully deterministic in CSS instead, so the nav
   links, the categories dropdown and the burger always switch together.
   The switch is set at 1440px (raised from the original 1280px once the
   "Return to zalgiris.lt" label and the language switcher were added to
   this same row - those alone add roughly 250-300px of extra width). This
   only controls *when* the row switches to desktop mode though - the
   ".zg-header .container { max-width: none }" rule above is what actually
   fixes the fit, by letting the row use a wide viewport's real width
   instead of Zendesk's own 1168px ceiling. Gaps throughout this row are
   also kept tight (see below) to claw back as much width as possible
   before falling back to burger mode on narrower screens. */
.zg-header .js-logo {
  flex-shrink: 0;
  gap: 0.75rem !important;
}

.zg-header__nav {
  display: none;
}

.zg-header .zg-header__desktop-actions {
  display: none !important;
  position: static !important;
  opacity: 1 !important;
  bottom: auto !important;
}

.zg-header .zg-header__mobile-actions {
  display: flex !important;
  position: static !important;
  opacity: 1 !important;
  bottom: auto !important;
}

/* The theme's own JS also directly toggles a "hidden" class on the .Toggle
   element (the actual burger button + its slide-out panel) based on the same
   unreliable width measurement. Force it to follow our breakpoint too,
   otherwise the wrapper above can be visible while the button inside it
   is still hidden - i.e. an empty, click-less gap where the burger should be. */
.zg-header .zg-header__mobile-actions .Toggle {
  display: flex !important;
}

@media (min-width: 1440px) {
  /* Was margin-inline-end: auto on .zg-header__nav below, deliberately
     pushing the search box + language switcher flush against the
     container's right edge. Once the container was widened past its old
     1168px ceiling (see .zg-header .container above), that auto margin
     started eating all the extra width itself, stranding the
     search/switcher way out past the nav links with a large dead gap in
     between - and simply switching to a fixed gap just moved the same dead
     gap to the container's right edge instead (logo+links+search+switcher
     all bunched at the left, nothing after them). Centering the whole row
     as one group here is what actually gives an even margin on *both*
     sides, regardless of how much spare width the container ends up with. */
  .zg-header nav[aria-label='Main Menu'] {
    justify-content: center;
  }

  .zg-header__nav {
    display: flex;
    align-items: center;
    margin-inline-start: 1rem;
    margin-inline-end: 2rem;
  }

  .zg-header .zg-header__desktop-actions {
    display: flex !important;
    /* Cancels the flex-1 Tailwind class already on this element in
       header.hbs, which would otherwise grow to consume all remaining
       container width and right-align its own contents inside that -
       fighting the justify-content: center above by re-creating a lopsided
       gap one level down. */
    flex-grow: 0 !important;
  }

  .zg-header .zg-header__mobile-actions {
    display: none !important;
  }

  .zg-header .zg-header__mobile-actions .Toggle {
    display: none !important;
  }
}

.zg-header__nav ul {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zg-header__nav a {
  color: var(--zg-text);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.zg-header__nav a:hover {
  color: var(--zg-accent);
}

/* ---------- Header search (article pages only) ---------- */
/* Replaces the old "Kategorijos" categories dropdown/accordion that used to
   sit in this same slot - it only duplicated the homepage's own category
   browsing and, unlike this search box, gave visitors nothing once they'd
   opened an article. header.hbs renders two copies (one for the >=1440px
   desktop layout inside .zg-header__desktop-actions, one for the sub-1440px
   bar under the nav), both hidden by default; handleHeaderSearch.js reveals
   them only on article pages, since the Header template has no way to know
   the page type itself. Colours reuse the same dark-bar tokens as the rest
   of the header (see --zg-* above) so contrast stays consistent with it. */
.zg-header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--zg-bg-soft);
  border: 1px solid var(--zg-border);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}

/* `.zg-header-search` above and the browser's built-in `[hidden]` rule are
   the same specificity (one class vs. one attribute selector), so without
   this the author rule would win the tie and keep the pill visible even
   while handleHeaderSearch.js leaves the `hidden` attribute on outside
   article pages - which is exactly what made it show up on every page. */
.zg-header-search[hidden] {
  display: none;
}

.zg-header-search__icon {
  flex-shrink: 0;
  color: var(--zg-text-faint);
}

/* Zendesk's `{{search}}` helper only ever applies the `class` parameter to
   the <form> it renders, never to the <input> inside it (see the search
   helper reference) - so `zg-header-search__form` below styles that form,
   while the actual text field is reached the only way it can be: by its
   `type="search"` attribute, which Zendesk always sets and never themes.
   Left unstyled it keeps the browser's own opaque white input background,
   which is exactly the stray "white box" this pill used to show. */
.zg-header-search__form {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.zg-header-search input[type='search'] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: inherit;
  color: var(--zg-text);
}

.zg-header-search input[type='search']::placeholder {
  color: var(--zg-text-faint);
}

.zg-header-search input[type='search']:focus {
  outline: none;
}

/* Chrome/Safari draw their own decorative icon + "clear" button inside
   type="search" inputs; both render in the browser's light UI style and
   would otherwise show up as stray light shapes on this dark pill. */
.zg-header-search input[type='search']::-webkit-search-decoration,
.zg-header-search input[type='search']::-webkit-search-cancel-button,
.zg-header-search input[type='search']::-webkit-search-results-button,
.zg-header-search input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* :focus-within (rather than :focus on the input) so the whole pill - icon
   included - gets the visible focus ring, and border-radius match keeps the
   ring from looking clipped at the rounded corners. */
.zg-header-search:focus-within {
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
  border-radius: 9999px;
}

/* Instant Search suggestions dropdown (Zendesk's own <zd-autocomplete-*>
   custom elements - light DOM, not shadow DOM, so they're reachable here).
   Zendesk only ships a bare box-shadow reset for these out of the box, so
   left alone they fall back to an opaque white card that looks completely
   disconnected from this dark pill once a visitor starts typing. */
.zg-header-search zd-autocomplete-multibrand {
  display: block;
  margin-top: 8px;
  background-color: var(--zg-bg-soft);
  border: 1px solid var(--zg-border);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
  color: var(--zg-text);
}

.zg-header-search zd-autocomplete-title-multibrand {
  color: var(--zg-accent) !important;
}

.zg-header-search zd-autocomplete-title-multibrand:hover {
  color: var(--zg-accent-hover) !important;
}

.zg-header-search--desktop {
  width: 200px;
}

/* Keep the desktop action cluster (lang + article search) from shoving the
   nav when the locale label is longer, e.g. before JS shortens it. Also
   tightens the gap between the language switcher and the search box below
   the gap-3 Tailwind class already on this element in header.hbs, to help
   it fit within the 1440px breakpoint above. */
.zg-header__desktop-actions {
  flex-shrink: 0;
  max-width: min(100%, 22rem);
  gap: 0.5rem !important;
}

/* Mirrors the .zg-header__desktop-actions / .zg-header__mobile-actions
   breakpoint above (1440px) so the two copies never show at the same time. */
.zg-header-search--mobile {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
}

.zg-header-search--mobile[data-zg-header-search]:not([hidden]) {
  display: flex;
}

@media (min-width: 1440px) {
  .zg-header-search--mobile {
    display: none !important;
  }
}

/* ---------- Table of contents card ---------- */
/* The sticky sidebar copy of the TOC (desktop, >=768px - see
   .Article_page__toc-sidebar in article_page.hbs) sits directly under the
   header bar with almost no gap above it, which reads as cramped against
   the dark bar. Its `position: sticky; top: 104px` (base theme) only
   matters once you've scrolled past that point - this margin is what
   actually creates breathing room at the top of the page. */
.Article_page__toc-sidebar {
  margin-top: 24px;
}

/* Base theme's `top: 104px` sticky offset assumes one fixed header height.
   On article pages under 1440px, the extra search row that lives inside
   the header (.zg-header-search--mobile above) makes the *real* header
   taller than that - so once you scroll far enough for the sidebar to
   stick, its top edge ends up tucked behind the header instead of sitting
   just below it. `:has()` (rather than guessing purely from viewport
   width) means this only kicks in while that row is actually visible -
   i.e. it still leaves the base 104px alone if "Enable article header
   search" is ever switched off. 158px = the header's height with that row
   showing (130px, measured) plus the same ~28px breathing room the base
   104px already leaves below the shorter header without it. */
@media (max-width: 1439.98px) {
  body:has(.zg-header-search--mobile[data-zg-header-search]:not([hidden]))
    .Article_page__toc-sidebar {
    top: 158px;
  }
}

/* Base theme's spacing here (24px padding, 16px gap, 16px between items)
   reads as cramped for a card with a heading - loosen it up a bit. */
.Article_page__tableOfContents {
  padding: 28px 24px;
  gap: 20px;
}

.Article_page__tableOfContents-content .mainItems {
  padding-top: 20px;
}

.Article_page__tableOfContents-content .mainItems:first-of-type {
  padding-top: 0;
}

.Article_page__tableOfContents-content.isHidden .mainItems:first-of-type {
  padding-top: 20px;
}

.Article_page__tableOfContents-content .nestedItems {
  padding-top: 10px;
}

.Article_page__tableOfContents-content .mainItems + .nestedItems {
  margin-top: 10px;
}

/* ---------- Article page ---------- */
/* Base theme renders these as plain body-coloured text (#2a2b32, no
   underline - see .Article_page__article-translations in style.css), which
   doesn't read as a link at all. #16803f (rather than the brighter brand
   green used elsewhere, --zg-green/--zg-accent) is used here specifically
   because it's the shade that clears WCAG AA's 4.5:1 contrast ratio for
   normal-sized text on this section's white background - the brighter
   greens only clear the lower 3:1 bar required for large text. */
/* No margin here on purpose - article_page.hbs now has exactly one literal
   space character between this label and the link wrapper right after it
   in the markup (previously a newline was left between the two <span>s,
   which HTML also collapses to a single space, stacked on top of this
   margin - the two combined is what read as an oddly large gap before the
   translated-language link). */
.Article_page__article-translations-label {
  margin-right: 0;
}

.Article_page__article-translations a {
  color: #16803f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.Article_page__article-translations a:hover {
  color: #0f5c2d;
}

.Article_page__article-translations a:focus-visible {
  outline: 2px solid #16803f;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Header "return to zalgiris.lt" link ---------- */
/* #header-hp-link went from an icon-only link to icon + label; keep the
   crest from getting squashed by the flex row now that there's text
   beside it. The label itself uses .text-tertiary (same muted grey as
   "Pagalbos centras" right next to it) rather than inheriting this link's
   own text-accent green, so both read as one consistent header label. */
#header-hp-link svg {
  flex-shrink: 0;
}

/* ---------- Article contact CTA ---------- */
/* This theme's style.css is a purged Tailwind build - only utility classes
   actually used somewhere in the original theme survive the purge. The
   template now sticks to `md:flex-row md:items-center` (both confirmed
   present elsewhere in the compiled CSS already), but nothing controls
   cross-axis alignment *below* md - flex's own default (effectively
   "stretch") would otherwise stretch both the heading and the button to
   the section's full width once stacked, which read as noticeably
   "off-centre" on narrower/mid-width screens. Centering unconditionally
   here (rather than only >=768px) fixes that stacked case and is a no-op
   once md:items-center takes over anyway. */
.Article_page__article-contact {
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .Article_page__article-contact {
    text-align: left;
  }
}

/* The base theme's own "variant-accent appearance-fill" pill (#1ca256 bg,
   white text) only clears ~3.3:1 contrast - fine for large text, not for
   this button's label. Reuses the same darker shade already established
   above for WCAG AA 4.5:1 (see .Article_page__article-translations a). */
.zg-article-contact__button,
.zg-article-contact__button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 9999px;
  background-color: #16803f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
}

.zg-article-contact__icon {
  flex-shrink: 0;
}

/* Re-assert white text on every interactive state explicitly (rather than
   relying on it cascading from the base rule above) - a plain mailto: link
   is otherwise exactly the kind of element base/reset link styles (hover,
   :visited, etc.) tend to target, and any such rule loaded after this
   stylesheet only needs equal specificity to win on that one state. */
.zg-article-contact__button:hover {
  background-color: #0f5c2d;
  color: #fff;
}

.zg-article-contact__button:active {
  background-color: #0a4020;
  color: #fff;
}

.zg-article-contact__button:focus-visible {
  outline: 2px solid #16803f;
  outline-offset: 2px;
  color: #fff;
}

/* ---------- IKB filter checkbox (staff only) ---------- */
/* Lives under the main Banner__search on home + search results. Markup is
   only emitted for signed-in agents/managers/admins (Curlybars), so end-users
   never see it. Red accent matches the internal-article highlight. */
.zg-ikb-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(224, 47, 31, 0.35);
  background-color: rgba(224, 47, 31, 0.05);
  color: #9e1c10;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.zg-ikb-filter--results {
  margin-top: -1.25rem;
  margin-bottom: 1.5rem;
}

.zg-ikb-filter__input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #e02f1f;
  cursor: pointer;
}

.zg-ikb-filter__icon {
  flex-shrink: 0;
  color: #9e1c10;
}

.zg-ikb-filter:focus-within {
  outline: 2px solid #e02f1f;
  outline-offset: 2px;
}

.zg-ikb-filter__count {
  margin-left: 0.25rem;
  color: #9e1c10;
  font-weight: 700;
}

/* While the IKB filter is on, handleIkbSearch.js hides non-matching rows
   inside Zendesk's own Instant Search dropdown (<zd-autocomplete-multibrand>)
   rather than building a second dropdown, so the existing search box just
   previews IKB-only matches as you type. */
.zg-ikb-suggestion-hidden {
  display: none !important;
}

.zg-ikb-suggest-empty {
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #6c6d75;
}

/* ---------- Footer ---------- */
.zg-footer {
  background-color: var(--zg-bg);
  color: var(--zg-text-muted);
  padding: 2.5rem 1rem;
}

@media (min-width: 992px) {
  .zg-footer {
    padding: 4rem 1.5rem 2.5rem;
  }
}

.zg-footer a {
  color: inherit;
}

.zg-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.zg-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 992px) {
  .zg-footer__top {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }
}

.zg-footer__brand {
  display: flex;
  justify-content: center;
}

@media (min-width: 992px) {
  .zg-footer__brand {
    justify-content: flex-start;
  }
}

.zg-footer__logo-img {
  height: 4.5rem;
  width: auto;
}

.zg-footer__col-title {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.zg-footer__col-title--accent {
  color: var(--zg-accent);
}

.zg-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zg-footer__col a {
  font-size: 0.875rem;
  color: var(--zg-text-muted);
  text-decoration: none;
}

/* Text-only colour change on hover fails WCAG 1.4.1 (Use of Color) for a
   real text link - add an underline, same treatment as the other link-style
   controls on the site (Quick Help, article links, footer legal links). */
.zg-footer__col a:focus,
.zg-footer__col a:focus-visible,
.zg-footer__col a:hover {
  color: var(--zg-text);
  text-decoration: underline;
}

.zg-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.zg-footer__social a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--zg-bg-soft);
  color: var(--zg-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.zg-footer__social a:hover {
  background-color: #374151;
  color: var(--zg-text);
}

.zg-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.zg-footer__divider {
  border-top: 1px solid var(--zg-border);
  margin: 2.5rem 0;
  padding-top: 2.5rem;
}

.zg-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 992px) {
  .zg-footer__newsletter {
    flex-direction: row;
    align-items: center;
  }
}

.zg-footer__newsletter-title {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.zg-footer__contacts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.zg-footer__contacts-head h2 {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1.75rem;
  margin: 0;
}

@media (min-width: 992px) {
  .zg-footer__contacts-head h2 {
    font-size: 2.5rem;
  }
}

.zg-footer__contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  .zg-footer__contacts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.zg-footer__contact-title {
  color: var(--zg-text);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.zg-footer__contact p {
  font-size: 0.875rem;
  margin: 0.25rem 0;
  color: var(--zg-text-muted);
}

.zg-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .zg-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* #6b7280 only reaches ~3.7:1 on the dark footer background, below the
   4.5:1 minimum for this 12px text (WCAG 1.4.3) - reuse the muted token
   already used elsewhere in the footer, which clears 12:1. */
.zg-footer__legal {
  font-size: 0.75rem;
  color: var(--zg-text-muted);
  margin: 0.25rem 0;
}

.zg-footer__legal a {
  color: var(--zg-text-muted);
  text-decoration: underline;
}

.zg-footer__legal a:hover {
  color: var(--zg-text);
}

.zg-footer__badges {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.zg-footer__badges img {
  height: 2.5rem;
  width: auto;
}

.zg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* !important is needed here: the more general ".zg-footer a{color:inherit}"
   rule above has higher CSS specificity (class + element vs. a single class)
   and was silently winning, leaving these buttons with light, near-invisible
   text on a light-yellow background - a WCAG contrast failure. */
.zg-btn--accent {
  background-color: var(--zg-accent);
  color: #111827 !important;
}

.zg-btn--accent:hover {
  background-color: var(--zg-accent-hover);
  color: #111827 !important;
}

.zg-btn--outline {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

.zg-btn--outline:hover {
  background-color: #ffffff;
  color: #111827 !important;
}

/* ---------- Breadcrumbs ---------- */
/* The base theme stacks breadcrumbs into a column on small screens
   (flex-direction:column + a fixed min-height), which reads as a squashed,
   compressed list. Keep them a single horizontal, wrapping row instead. */
.breadcrumbs {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 0 !important;
}

/* --zg-green (#1ca256) only reaches ~3.3:1 on a white background, below the
   4.5:1 minimum for normal-size text (WCAG 1.4.3) - use the darker
   --zg-green-hover token here instead, which clears 4.5:1 comfortably. */
.breadcrumbs li a:hover,
.breadcrumbs li a:focus-visible {
  color: var(--zg-green-hover);
}

/* ---------- WCAG 1.4.1 - underline in-text hyperlinks ----------
   Links inside body copy (article content, disclaimer/consent text) must
   not rely on colour alone to be told apart from the surrounding text.
   (.zg-footer__legal a is already underlined - see the WCAG contrast fixes
   below.) This is deliberately scoped to prose rather than every <a> in the
   theme: nav items, cards, buttons, breadcrumbs and pagination already have
   strong non-colour affordances (position, icons, borders, backgrounds) and
   underlining those too would be visual noise, not an accessibility gain. */
.Article_page__article-body a,
.zg-cookie-consent__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- WCAG AA audit fixes (base theme) ---------- */
/* The pre-compiled style.css ships white button labels on the brand-green
   accent buttons ("Siųsti", "Pradėti pokalbį", etc.) and green labels for
   the outline variant. Both combinations only reach ~2.4-3.3:1 contrast,
   below the 4.5:1 minimum for normal-size text (WCAG 1.4.3). The `:active`
   state already uses a near-black green with white text and passes, so it
   is intentionally left untouched below. */
a.variant-accent.appearance-fill,
a[data-variant='accent'][data-appearance='fill'],
button.variant-accent.appearance-fill,
button[data-variant='accent'][data-appearance='fill'],
a.variant-accent.appearance-fill:hover,
a[data-variant='accent'][data-appearance='fill']:hover,
button.variant-accent.appearance-fill:hover,
button[data-variant='accent'][data-appearance='fill']:hover {
  color: #062814 !important;
}

a.variant-accent.appearance-outline,
a[data-variant='accent'][data-appearance='outline'],
button.variant-accent.appearance-outline,
button[data-variant='accent'][data-appearance='outline'] {
  color: var(--zg-green-hover) !important;
}

a.variant-accent.appearance-outline:hover,
a[data-variant='accent'][data-appearance='outline']:hover,
button.variant-accent.appearance-outline:hover,
button[data-variant='accent'][data-appearance='outline']:hover {
  color: #062814 !important;
}

/* These buttons ship with display:flex but no `gap`, so an icon placed next
   to a text <span> (e.g. the chat button on the request form) renders with
   the two touching with no breathing room. */
a.variant-accent,
a[data-variant='accent'],
button.variant-accent,
button[data-variant='accent'] {
  gap: 0.5rem;
}

/* The search box's empty/placeholder state lightens the border to #c8c9cb
   (~1.7:1 against white), failing the 3:1 minimum for UI components
   (WCAG 1.4.11). Keep the same border used once text is entered. */
.Banner__search input:placeholder-shown,
.Banner__search input:-moz-placeholder {
  border-color: #8d8e96;
}

/* The self-service success/alert border (#37c871 on #ecf9ee) is under 2:1,
   failing 1.4.11's 3:1 minimum for UI component boundaries. */
.alert[data-variant='success'],
.SelfService-section__form--success-message {
  border-color: var(--zg-green-hover) !important;
}

/* Icon-only controls with no visible focus style of their own (WCAG 2.4.7),
   and a rendered target smaller than the 24x24px minimum (WCAG 2.5.8). */
#Article-page__share-icon,
#share-copy-link,
#close-dialog-btn,
.Article_page__article-body-codeBlock button {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#Article-page__share-icon:focus-visible,
#share-copy-link:focus-visible,
#close-dialog-btn:focus-visible,
.Article_page__article-body-codeBlock button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zg-green-hover);
  border-radius: 4px;
}

/* A sticky header can otherwise cover the top of whatever the user just
   tabbed/scrolled to (WCAG 2.4.11 Focus Not Obscured). */
html {
  scroll-padding-top: 5rem;
}

:focus-visible {
  scroll-margin-top: 5rem;
}

/* Respect the user's OS-level request to reduce motion (WCAG 2.2.2) - spin
   animations (e.g. the request form's submit spinner) otherwise animate
   indefinitely with no way to pause or hide them. */
@media (prefers-reduced-motion: reduce) {
  .animate-spin {
    animation: none;
  }
}

/* The article image lightbox previously had no keyboard-reachable close
   control at all (WCAG 2.1.1/4.1.2) - position the new close button in the
   top-right corner, above the darkened backdrop. */
.js-Article_page__imgModal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  min-width: 24px;
  min-height: 24px;
  padding: 0.5rem;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.js-Article_page__imgModal-close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 0 0 4px #fff;
}

/* The lightbox centers its content with flexbox, but without a size cap a
   large source image renders at native resolution and overflows the
   viewport. Overflowing flex content anchors to the top-left instead of
   staying centered, which is what made the zoomed image look off-center.
   Capping the image to the viewport lets the flex centering work as
   intended at any image size. */
.Article_page__imgModal-img-wrapper img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Focus rings: brand green everywhere, never the browser default
   gray/blue ring. Specific components below (buttons, dialog close, etc.)
   already set their own colour; this is the sitewide fallback so nothing
   slips through with a mismatched ring. ---------- */
:focus-visible {
  outline-color: var(--zg-green-hover);
}

/* The Quick Help FAQ accordion (.Home-page__section__accordion__title) ships
   with a plain dark-grey hover/focus colour from the base theme, which looks
   inconsistent next to the green hover used everywhere else. Match it up,
   and give the homepage category buttons the same green text glow on
   hover/focus (they previously only highlighted their border), so both
   lists feel consistent. */
.Home-page__section__accordion__title:focus,
.Home-page__section__accordion__title:focus-visible,
.Home-page__section__accordion__title:hover,
.zg-accordion__category-title:focus,
.zg-accordion__category-title:focus-visible,
.zg-accordion__category-title:hover {
  color: var(--zg-green-hover) !important;
}

/* Unlike the category/section buttons above, .Home-page__section__accordion__title
   is a real <a> link (see handleQuickHelp.js) - WCAG 1.4.1 (Use of Color) means
   a colour-only hover/focus cue isn't enough for it, same as the article links
   below already handle with an underline. */
.Home-page__section__accordion__title:focus,
.Home-page__section__accordion__title:focus-visible,
.Home-page__section__accordion__title:hover {
  text-decoration: underline;
}

/* Quick Help was previously bumped to match the category buttons' size and
   given bold weight to stand out - that made it read as more important than
   the categories above it. Scale it back down to a clearly secondary list:
   smaller than the category buttons, and back to the base theme's normal
   (non-bold) weight. */
.Home-page__section__accordion__title {
  font-size: 1rem;
  line-height: 1.5;
}

/* This theme's `font-bold` Tailwind utility is customized to font-weight
   600 (see .font-bold in style.css), so the "Kuo galime padėti?" heading and
   the "Populiarus klausimai" heading - which both use it - never actually
   render bold. Bump just these two hero headings to true bold (700). */
[data-section='SearchBanner'] h1,
[data-section='QuickHelp'] h2 {
  font-weight: 700;
}

.Home-page__section__accordion__title:focus-visible,
.zg-accordion__category-title:focus-visible,
.zg-accordion__section-title:focus-visible,
.zg-accordion__article-link:focus-visible,
.zg-chat-cta:focus-visible {
  outline: 2px solid var(--zg-green-hover);
  outline-offset: 2px;
}

/* Mobile burger menu (#sidebar) - the base theme's own hover/focus colours
   for its nav links are barely-perceptible dark-grey shifts (#2a2b32 ->
   #3c3d44) and carry no non-colour cue at all, which reads as static at a
   glance and fails WCAG 1.4.1 (Use of Color) for what are real <a> links -
   same treatment already applied to the homepage/footer links above. */
#sidebar a.sidebar-item:hover,
#sidebar a.sidebar-item:focus-visible {
  color: var(--zg-green-hover);
  text-decoration: underline;
}

/* The close (X) button's icon is an <svg fill="currentColor">, which only
   ever tracks the CSS `color` property - but the base theme's hover/active
   state on it (hover:fill-neutral-700 / active:fill-neutral-700) sets
   `fill` instead, so those classes have never actually changed anything
   visible here. Setting `color` directly is what makes the icon respond at
   all, and matches the green feedback used for every other interactive
   element in the header/sidebar. */
.sidebar-close-trigger:hover,
.sidebar-close-trigger:focus-visible {
  color: var(--zg-green-hover);
}

/* ---------- "Populiaru" badge for promoted articles ---------- */
.zg-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

.zg-badge--promoted {
  background-color: var(--zg-green);
  color: #ffffff;
}

/* ---------- Homepage category -> section -> article accordion ---------- */
.zg-accordion__category-title {
  cursor: pointer;
  background-color: #fff;
}

.zg-accordion__chevron {
  transition: transform 0.2s ease-in-out;
  flex-shrink: 0;
}

.zg-accordion__category-title[aria-expanded='true'] .zg-accordion__chevron,
.zg-accordion__section-title[aria-expanded='true'] .zg-accordion__chevron {
  transform: rotate(90deg);
}

.zg-accordion__panel {
  padding: 0.75rem 0.5rem 0.5rem 1rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

/* Toggled by handleCategoryAccordion.js. [hidden] is only ever applied once
   the collapse transition has finished, so the animation is always visible
   both opening and closing; the large max-height cap accommodates any
   amount of dynamically-loaded content without needing to measure it. */
.zg-accordion__panel.is-open {
  max-height: 2000px;
  opacity: 1;
}

.zg-accordion__panel--sections {
  border-left: 2px solid var(--zg-green);
  margin-left: 1.5rem;
}

.zg-accordion__section-list,
.zg-accordion__article-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zg-accordion__section-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  color: #171717;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.zg-accordion__section-title:hover {
  border-color: var(--zg-green);
  color: var(--zg-green-hover);
}

.zg-accordion__panel--articles {
  border-left: 2px solid var(--zg-accent-hover, #8ecc21);
  margin-left: 1.25rem;
  padding-left: 1rem;
}

.zg-accordion__article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #171717;
  text-decoration: none;
}

.zg-accordion__article-link:hover {
  background-color: #f7f7f8;
  text-decoration: underline;
}

.zg-accordion__state {
  color: #6b7280;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

/* ---------- Global "need help?" chat CTA ----------
   This is the theme's single chat entry point (the per-page self-service
   chat cards were removed as duplicates), so it's styled to feel more like
   a substantial, always-available action button rather than a small
   secondary icon: bigger padding/type, a distinct icon badge, and a slow
   attention-drawing pulse that pauses on hover/focus and is skipped
   entirely for visitors who prefer reduced motion. */
.zg-chat-cta {
  position: fixed;
  z-index: 40;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.5rem 0.875rem 0.75rem;
  border-radius: 9999px;
  border: none;
  background-color: var(--zg-accent);
  color: #062814;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(177, 255, 41, 0.45);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  animation: zg-chat-cta-pulse 2.6s ease-in-out infinite;
}

.zg-chat-cta:hover,
.zg-chat-cta:focus-visible {
  background-color: var(--zg-accent-hover);
  transform: translateY(-2px);
  animation-play-state: paused;
}

.zg-chat-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: #062814;
}

.zg-chat-cta__icon img {
  flex-shrink: 0;
  /* icon-comments.svg is drawn in dark strokes; invert it to white so it
     reads clearly on the dark icon badge above. */
  filter: brightness(0) invert(1);
}

.zg-chat-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}

.zg-chat-cta__title {
  font-weight: 700;
  font-size: 0.9375rem;
}

.zg-chat-cta__subtitle {
  font-weight: 500;
  font-size: 0.8125rem;
}

@keyframes zg-chat-cta-pulse {
  0%,
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(177, 255, 41, 0.45);
  }
  50% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(177, 255, 41, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zg-chat-cta {
    animation: none;
  }
}

@media (max-width: 640px) {
  .zg-chat-cta {
    right: 1rem;
    bottom: 1rem;
    padding: 0.625rem;
  }

  .zg-chat-cta__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .zg-chat-cta__text {
    display: none;
  }
}

/* While the cookie banner is open, lift the floating chat CTA above it so
   the two never overlap. Toggled by handleCookieConsent.js. */
body.zg-cookie-consent-open .zg-chat-cta {
  bottom: 7.5rem;
}

@media (max-width: 640px) {
  body.zg-cookie-consent-open .zg-chat-cta {
    bottom: 9.5rem;
  }
}

/* ---------- Cookie consent banner ---------- */
.zg-cookie-consent {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--zg-bg);
  border-top: 1px solid var(--zg-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

.zg-cookie-consent[hidden] {
  display: none;
}

.zg-cookie-consent__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.zg-cookie-consent__text {
  flex: 1 1 20rem;
  color: var(--zg-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.zg-cookie-consent__text a {
  color: var(--zg-accent);
  text-decoration: underline;
}

.zg-cookie-consent__text a:hover {
  color: var(--zg-accent-hover);
}

.zg-cookie-consent__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.zg-cookie-consent__actions .zg-btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .zg-cookie-consent__inner {
    padding: 1rem;
  }

  .zg-cookie-consent__actions {
    width: 100%;
  }

  .zg-cookie-consent__actions .zg-btn {
    flex: 1 1 0;
  }
}