/*
 * Juntson Haldus — custom front-end CSS
 * Only utility/component styles that theme.json can't express.
 */

:root {
  --juntson-shadow-card: 0 1px 2px 0 rgba(9, 32, 44, 0.05), 0 1px 3px 0 rgba(9, 32, 44, 0.1);
  --juntson-shadow-card-hover: 0 4px 6px -1px rgba(9, 32, 44, 0.1), 0 2px 4px -1px rgba(9, 32, 44, 0.06);
  --juntson-shadow-strong: 0 10px 15px -3px rgba(9, 32, 44, 0.1), 0 4px 6px -2px rgba(9, 32, 44, 0.05);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 768px) {
  body { padding-bottom: 5rem; }
}

/* Sticky mobile bar */
.juntson-sticky-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-top: 1px solid rgba(9, 32, 44, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .juntson-sticky-mobile-bar { display: none; }
}

.juntson-sticky-mobile-bar .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.juntson-sticky-mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.75rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-decoration: none;
}

.juntson-sticky-mobile-bar a:nth-child(1) { color: var(--wp--preset--color--brand-orange); }
.juntson-sticky-mobile-bar a:nth-child(2) {
  color: var(--wp--preset--color--brand-mint-deep);
  border-left: 1px solid rgba(9, 32, 44, 0.1);
  border-right: 1px solid rgba(9, 32, 44, 0.1);
}
.juntson-sticky-mobile-bar a:nth-child(3) { color: var(--wp--preset--color--brand-blue); }

.juntson-sticky-mobile-bar .icon { font-size: 1.25rem; }

/* Hero phone CTA digit-wrapping prevention */
.juntson-phone-nowrap { white-space: nowrap; }

/* Card hover lift */
.juntson-card {
  background: #ffffff;
  border: 1px solid rgba(9, 32, 44, 0.1);
  border-radius: 1rem;
  box-shadow: var(--juntson-shadow-card);
  padding: 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.juntson-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--juntson-shadow-card-hover);
}

.juntson-card--orange { border: 2px solid var(--wp--preset--color--brand-orange); }
.juntson-card--navy   { background: var(--wp--preset--color--brand-navy); color: #ffffff; }
.juntson-card--navy * { color: inherit; }

/* Bullet-less lists inside cards (✓ checkmark is the affordance). */
.juntson-card ul,
.juntson-card .wp-block-list,
.juntson-hero-cards ul,
.juntson-hero-cards .wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.juntson-card ul li,
.juntson-hero-cards ul li {
  padding-left: 0;
}

/* Default link styling inside cards — navy, no underline, hover orange. */
.juntson-card a,
.juntson-card .wp-block-post-title a {
  color: var(--wp--preset--color--brand-navy) !important;
  text-decoration: none !important;
}

.juntson-card a:hover,
.juntson-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--brand-orange) !important;
  text-decoration: underline !important;
}

/* Category-term pill keeps brand-blue tint, no underline. */
.juntson-card .wp-block-post-terms,
.juntson-card .wp-block-post-terms a {
  color: var(--wp--preset--color--brand-blue) !important;
  text-decoration: none !important;
}
.juntson-card .wp-block-post-terms a:hover {
  color: var(--wp--preset--color--brand-blue-deep) !important;
}

/* Section-level "Vaata kõiki uudiseid →" / "Vaata kogu hinnakirja →" —
 * these are paragraph links rendered with .has-brand-blue-color. Navy
 * by default, orange + underline on hover. */
section .has-brand-blue-color a {
  color: var(--wp--preset--color--brand-navy) !important;
  text-decoration: none !important;
}
section .has-brand-blue-color a:hover {
  color: var(--wp--preset--color--brand-orange) !important;
  text-decoration: underline !important;
}

/* Exception: hero CTA cards keep their bold brand colours.
 * .juntson-card--orange (Avarii) → orange CTA
 * .juntson-card--navy (Hakka halduspartneriks) → orange CTA on dark bg */
.juntson-card--orange a {
  color: var(--wp--preset--color--brand-orange) !important;
}
.juntson-card--orange a:hover {
  color: var(--wp--preset--color--brand-orange-deep) !important;
}

.juntson-card--navy a {
  color: var(--wp--preset--color--brand-orange) !important;
}
.juntson-card--navy a:hover {
  color: #ffffff !important;
}

/* ============================================
 * Link decoration overrides
 * ============================================
 * Default: WordPress underlines all links. We strip underlines from
 * navigation / footer / button contexts where the visual styling
 * (color, weight, background) is the affordance — and keep underlines
 * only for inline body links inside post content.
 */

/* Header navigation + CTA buttons — no underline */
.juntson-header a,
.juntson-nav a,
.juntson-header-ctas a,
.juntson-sticky-mobile-bar a {
  text-decoration: none;
}

/* Navigation block items — consistent padding + hover */
.juntson-nav .wp-block-navigation-item__content,
.juntson-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.juntson-nav .wp-block-navigation-item__content:hover,
.juntson-nav a:hover {
  text-decoration: none;
  background: rgba(9, 32, 44, 0.04);
}

/* Avarii item — orange + bold (visual emergency affordance).
 * The "juntson-nav-avarii" className is set on the wp:navigation-link block. */
.juntson-nav .wp-block-navigation-item.juntson-nav-avarii .wp-block-navigation-item__content,
.juntson-nav .wp-block-navigation-item.juntson-nav-avarii a {
  color: var(--wp--preset--color--brand-orange) !important;
  font-weight: 700 !important;
}

.juntson-nav .wp-block-navigation-item.juntson-nav-avarii .wp-block-navigation-item__content:hover,
.juntson-nav .wp-block-navigation-item.juntson-nav-avarii a:hover {
  color: var(--wp--preset--color--brand-orange-deep) !important;
}

/* Footer link colour — navy by default, hover gives orange + underline.
 * !important needed because theme.json elements.link applies brand-blue
 * via a more specific :is(...) selector that we'd otherwise have to mirror. */
footer.wp-block-group a,
footer.wp-block-group a:visited {
  text-decoration: none;
  color: var(--wp--preset--color--brand-navy) !important;
}

footer.wp-block-group a:hover {
  text-decoration: underline;
  color: var(--wp--preset--color--brand-orange) !important;
}

/* Footer phone — keep brand-orange even at rest (CTA affordance). */
footer.wp-block-group a[href^="tel:"] {
  color: var(--wp--preset--color--brand-orange) !important;
  font-weight: 700;
}

footer.wp-block-group a[href^="tel:"]:hover {
  color: var(--wp--preset--color--brand-orange-deep) !important;
}

/* Emergency "Avarii kodus" link in "Kiired teed" footer column stays orange. */
footer.wp-block-group .wp-block-list a[href="/avarii/"] {
  color: var(--wp--preset--color--brand-orange) !important;
  font-weight: 700;
}

/* Remove ugly bullets + indent from footer lists.
 * The Astro original showed clean stacked text lines without bullets. */
footer.wp-block-group ul,
footer.wp-block-group .wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

footer.wp-block-group ul li,
footer.wp-block-group .wp-block-list li {
  padding-left: 0;
}

/* WP block buttons — strip underline (the button is the affordance) */
.wp-block-button__link {
  text-decoration: none !important;
}

/* Site-logo wrapper — kill default underline that wraps logo image */
.wp-block-site-logo a {
  text-decoration: none;
}

/* ============================================
 * Hinnakiri page — Üldtingimused rules box list
 * ============================================
 * The bullet list inside the orange-border rules box should sit left-aligned
 * to the box's inner padding, not pushed to the constrained center.
 */
.juntson-pricing-rules-box .wp-block-list,
.juntson-pricing-rules-box ul.juntson-pricing-rules {
  margin: 0 !important;
  padding-left: 1.25rem !important;
  list-style: disc !important;
  color: var(--wp--preset--color--brand-navy);
}

.juntson-pricing-rules-box .wp-block-list li,
.juntson-pricing-rules-box ul.juntson-pricing-rules li {
  margin: 0.25rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* H2 section headings on hinnakiri page have generous top spacing */
.page-template-default h2.wp-block-heading {
  margin-top: 2rem;
}

/* ============================================
 * Hero cards (Esileht) — CTA baseline alignment
 * ============================================
 * The 3 hero fork cards have variable body lengths; the CTA paragraph at the
 * bottom of each card should sit on the same baseline across all 3.
 */
.juntson-hero-cards .juntson-card {
  display: flex;
  flex-direction: column;
}
.juntson-hero-cards .juntson-card > p:last-child {
  margin-top: auto;
}

/* Hero card CTA links inherit their paragraph color (orange/blue/orange) and
 * keep that color on hover. Underline appears on hover as a subtle affordance. */
.juntson-hero-cards .juntson-card a,
.juntson-hero-cards .juntson-card a:hover,
.juntson-hero-cards .juntson-card a:focus {
  color: inherit !important;
}
.juntson-hero-cards .juntson-card a {
  text-decoration: none !important;
}
.juntson-hero-cards .juntson-card a:hover,
.juntson-hero-cards .juntson-card a:focus {
  text-decoration: underline !important;
}

/* ============================================
 * Halduspartner service cards — coloured arrow bullets
 * ============================================
 * Items inside cards with the `juntson-service-card` class get a brand-blue
 * arrow prepended via CSS — no literal "→" text in the source.
 */
.juntson-service-card ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0.5rem 0 0 0 !important;
}
.juntson-service-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0.35rem 0;
  color: var(--wp--preset--color--brand-purple);
}
.juntson-service-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--brand-blue);
  font-weight: 700;
}
/* Same arrow on the navy Täishaldus card — but arrow + text white-ish */
.juntson-service-card.juntson-card--navy ul li {
  color: rgba(255, 255, 255, 0.85);
}
.juntson-service-card.juntson-card--navy ul li::before {
  color: var(--wp--preset--color--brand-orange);
}

/* ============================================
 * Fluent Forms — match brand styling
 * ============================================
 * FF default styling clashes with brand-cream / brand-mint section
 * backgrounds and uses generic blue buttons. Override to navy labels,
 * cream-friendly inputs, brand-orange submit button.
 */

/* Form container — generous spacing */
.frm-fluent-form {
  font-family: inherit;
}

.frm-fluent-form .ff-t-container,
.frm-fluent-form .ff-el-group {
  margin-bottom: 1.25rem;
}

/* Labels — brand-navy, bold, slightly larger */
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form label {
  color: var(--wp--preset--color--brand-navy);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.375rem;
  display: block;
}

/* Required asterisk — brand-orange (not default red) */
.frm-fluent-form .ff-el-is-required.asterisk-right label::after,
.frm-fluent-form label .ff-el-is-required {
  color: var(--wp--preset--color--brand-orange);
}

/* Inputs / selects / textareas */
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="number"],
.frm-fluent-form select,
.frm-fluent-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--wp--preset--color--brand-navy);
  background-color: #ffffff;
  border: 1px solid rgba(9, 32, 44, 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(9, 32, 44, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form input:focus,
.frm-fluent-form select:focus,
.frm-fluent-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand-blue);
  box-shadow: 0 0 0 3px rgba(31, 142, 196, 0.15);
}

.frm-fluent-form textarea {
  min-height: 6rem;
  resize: vertical;
}

.frm-fluent-form ::placeholder {
  color: rgba(9, 32, 44, 0.4);
  opacity: 1;
}

/* Hide the browser's native datalist indicator (the ▼ Chrome/Edge add
 * to inputs with `list=`). The autocomplete suggestions appear as the
 * user types — clicking the ▼ doesn't reveal anything useful, so the
 * arrow just adds noise next to our ✓ confirmation icon. */
.frm-fluent-form input[list="juntson-ku-list"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* KÜ-autocomplete confirmation state.
 * The juntson-ku-router REST endpoint feeds the autocomplete; once the
 * typed value matches a known KÜ name (case-insensitive), the JS adds
 * .juntson-ku-confirmed to the .ff-el-group wrapper and we paint a
 * green outline + a checkmark inside the field so users know we
 * recognized their ühistu. See assets/ku-autocomplete.js. */
.frm-fluent-form .ff-el-group.juntson-ku-confirmed .ff-el-input--content {
  position: relative;
}
.frm-fluent-form .ff-el-group.juntson-ku-confirmed input[type="text"] {
  border-color: var(--wp--preset--color--brand-mint-deep) !important;
  box-shadow: 0 0 0 3px rgba(108, 191, 148, 0.18) !important;
  padding-right: 2.25rem; /* room for the checkmark */
}
.frm-fluent-form .ff-el-group.juntson-ku-confirmed .ff-el-input--content::after {
  content: "✓";
  position: absolute;
  /* Anchored to the INPUT row (the first child of .ff-el-input--content)
   * not the full wrapper, because in below_field help-message mode the
   * wrapper also contains .ff-el-help-message below the input and
   * top:50% would land on the help text.
   * Input total height = padding(0.75rem*2) + line-height(1.5*1rem) = 3rem,
   * so center is at 1.5rem from the wrapper top. */
  top: 1.5rem;
  right: 0.9rem;
  transform: translateY(-50%);
  color: var(--wp--preset--color--brand-mint-deep);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
}

/* Submit button — brand-orange CTA, rounded, white text. Sized to match
 * the other inline CTAs on the site (compact, not in-your-face). */
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff-btn,
.frm-fluent-form button[type="submit"] {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff !important;
  background-color: var(--wp--preset--color--brand-orange) !important;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(239, 87, 44, 0.25);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn:hover,
.frm-fluent-form button[type="submit"]:hover {
  background-color: var(--wp--preset--color--brand-orange-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(239, 87, 44, 0.3);
}

/* Help / hint text under fields */
.frm-fluent-form .ff-el-help-message,
.frm-fluent-form .ff-help {
  font-size: 0.85rem;
  color: var(--wp--preset--color--brand-purple);
  margin-top: 0.25rem;
}

/* Validation error message — restrained red */
.frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: #d04545;
  box-shadow: 0 0 0 3px rgba(208, 69, 69, 0.12);
}

.frm-fluent-form .error,
.frm-fluent-form .ff-el-input--label .text-danger,
.frm-fluent-form .ff_t_error {
  color: #d04545;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Success message after submit — navy text on subtle mint background */
.frm-fluent-form .ff-message-success,
.frm-fluent-form .ff_response_message {
  background: var(--wp--preset--color--brand-mint);
  color: var(--wp--preset--color--brand-navy);
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border-left: 4px solid var(--wp--preset--color--brand-mint-deep);
  font-size: 1rem;
}

/* ============================================
 * Mobile: collapse all multi-column grids to 1 column
 * ============================================
 * Every wp:group with `{"type":"grid","columnCount":N}` renders as
 * `.wp-block-group.is-layout-grid` with grid-template-columns set
 * for N columns. Without this rule, mobile viewports keep N cards
 * side-by-side and squeeze text into 80–120px strips (titles get
 * clipped, body text wraps to single words per line).
 *
 * The trust-bar pattern uses minimumColumnWidth instead of columnCount
 * so it auto-stacks already — this rule still applies but is a no-op
 * because grid-template-columns is already 1fr at narrow widths.
 *
 * Breakpoint 640px: tightest 2-col grid would still get ~310px per
 * card minus gap — workable. Below that, stack. */
@media (max-width: 640px) {
  .wp-block-group.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  /* The header has two stacked CTA buttons (24/7 avarii + Esita näidud)
   * which duplicate the always-visible bottom sticky bar on mobile.
   * Hide them on phones to keep the header compact — desktop unaffected.
   * The hamburger menu (≡) stays visible so users can still reach
   * /uudised, /meist, etc. via the nav drawer. */
  .juntson-header-ctas {
    display: none !important;
  }

  /* Homepage hero h1 mobile behaviour was previously overridden to squish
   * a longer 2-line headline. Now every page's hero H1 shares the same
   * clamp(2.5rem, 5vw + 0.5rem, 3.75rem) — no per-page override needed. */
}

/* --- Trust bar (rigid 4-column grid) -----------------------------------
 * 4 icon+text cells with fixed 2.5rem icon slots so titles start at the
 * same X regardless of icon width. Stacks 2 columns on mobile, 4 on md+.
 * Emoji icons and the EKKL <img> both occupy the same slot geometry. */
.juntson-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .juntson-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.juntson-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.juntson-trust-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.juntson-trust-icon .juntson-trust-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.juntson-trust-icon img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
.juntson-trust-text {
  min-width: 0;
}
.juntson-trust-title {
  font-weight: 700;
  color: var(--wp--preset--color--brand-navy);
  line-height: 1.2;
  font-size: 0.875rem;
}
.juntson-trust-sub {
  font-size: 0.75rem;
  color: var(--wp--preset--color--brand-purple);
  line-height: 1.2;
  margin-top: 0.15rem;
}

/* --- Mobile side-drawer nav pattern -------------------------------------
 * Hamburger button top-right → tapping slides a navy panel in from the
 * RIGHT covering ~78% of viewport with a satisfying 320ms slide, dimming
 * the rest with a scrim. Items stack vertically inside, hairline
 * dividers, all visible without scrolling on any phone height.
 *
 * The drawer stays in the DOM at translateX(100%) even when closed so
 * the transform actually animates (display:none → display:block would
 * pop; keeping it displayed but off-screen slides). */
@media (max-width: 991px) {
  /* Hamburger open button */
  .juntson-nav .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--brand-navy);
    padding: 0.5rem;
  }
  .juntson-nav .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
  }

  /* Drawer container geometry only. No transform / transition here —
   * transform is driven imperatively by JS (Web Animations API) in
   * juntson_drawer_animator() so we bypass WP's display:none → block
   * toggle entirely and get consistent slide-in/out behaviour. */
  html body .juntson-nav .wp-block-navigation__responsive-container,
  html body .juntson-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(82vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 4.5rem 0 2rem !important;
    z-index: 100000 !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    /* Initial off-screen position — JS moves it in/out. */
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  html body .juntson-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    pointer-events: none;
  }

  /* Scrim behind the drawer — animates its own opacity in sync. */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease-out, visibility 0s 320ms;
    z-index: 99999;
    pointer-events: none;
  }
  body.has-modal-open::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 320ms ease-out, visibility 0s 0s;
  }
  /* Scroll-lock without triggering a viewport reflow: use touch-action
   * instead of overflow:hidden. overflow:hidden on <body> can cause the
   * iOS URL bar to redraw mid-transition, snapping the drawer's width
   * recalculation halfway through the slide (the "opens → jerks →
   * opens" glitch). touch-action stops touch-scroll without reflow. */
  body.has-modal-open {
    touch-action: none !important;
    -webkit-touch-callout: none;
  }

  /* Force WP's nested wrappers to fill drawer width so the ul spans. */
  .juntson-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
  .juntson-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog,
  .juntson-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
  }

  /* Close (×) — fixed to the drawer's top-right corner, above content. */
  .juntson-nav .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    color: #ffffff !important;
    z-index: 100001 !important;
    padding: 0.5rem !important;
  }
  .juntson-nav .wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
  }

  /* Vertical item stack with hairline dividers. */
  .juntson-nav .wp-block-navigation__responsive-container ul.wp-block-navigation__container {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }
  .juntson-nav .wp-block-navigation__responsive-container .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
  }
  .juntson-nav .wp-block-navigation__responsive-container .wp-block-navigation-item__content,
  .juntson-nav .wp-block-navigation__responsive-container .wp-block-navigation-item a {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    padding: 1.25rem 2rem !important;
    display: block !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }
  .juntson-nav .wp-block-navigation__responsive-container .juntson-nav-avarii .wp-block-navigation-item__content,
  .juntson-nav .wp-block-navigation__responsive-container .juntson-nav-avarii a {
    color: var(--wp--preset--color--brand-orange) !important;
    font-weight: 700 !important;
  }
}

/* --- Cookie-consent reopen: hidden on mobile ----------------------------
 * `.cc-revoke` is the "Küpsiste seaded" reopen pill from Beautiful &
 * Responsive Cookie Consent. Rauno's call: most sites just show the
 * banner once, then hide the persistent reopen affordance. Footer has a
 * /andmekaitse link that satisfies the GDPR "revisit choice" requirement.
 * Desktop keeps the pill (plenty of screen real estate). */
@media (max-width: 767px) {
  .cc-revoke {
    display: none !important;
  }
}