/* Custom styles for Visi Išvien theme */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Emoji safety net — keeps any already-converted img.emoji/wp-smiley
   (older content, or a plugin that re-enables the conversion) inline at
   text size instead of block-level, so it doesn't land on its own line. */
img.emoji,
img.wp-smiley {
  display: inline !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 0.07em !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  vertical-align: -0.1em !important;
}

/* ── Text-shadow utilities for white text set over photos (hero, maintenance
   page). Defined here rather than as Tailwind arbitrary values so they render
   even between Tailwind rebuilds. ── */
.vi-text-shadow-sm {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.vi-text-shadow {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.vi-text-shadow-lg {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}

/* ── Scroll reveal animations ──
   Scoped to html.js (set by an inline script in wp_head, inc/seo.php):
   with JS off or broken, nothing is ever hidden — content just paints. */
html.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > .reveal:nth-child(1) {
  transition-delay: 0ms;
}
.reveal-stagger > .reveal:nth-child(2) {
  transition-delay: 120ms;
}
.reveal-stagger > .reveal:nth-child(3) {
  transition-delay: 240ms;
}
.reveal-stagger > .reveal:nth-child(4) {
  transition-delay: 360ms;
}

/* Mobile menu – slide-over panel from right */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.3s ease;
}

.mobile-overlay.active {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 320px;
  max-width: 85vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.1);
}

.mobile-panel.open {
  transform: translateX(0);
}

/* Active menu item styling */
.current-menu-item > a,
.current_page_item > a {
  color: var(--vi-blue);
  font-weight: 600;
  position: relative;
}

.current-menu-item > a::after,
.current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--vi-amber);
  border-radius: 1px;
}

/* Language switcher — rendered in header.php as plain <a> links (no <ul>/<li>,
   so no list markers to fight), styled as a compact LT / EN / UK selector. */
.lang-switcher {
  gap: 0.125rem;
}

.lang-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  /* Match the header nav font (Inter body), just slightly smaller and
     uppercase since these are 2-letter language codes. */
  font-family: var(--vi-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vi-muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.lang-link:hover {
  color: var(--vi-blue);
  background: var(--vi-cream);
}

.lang-link.is-active {
  color: var(--vi-blue);
  background: rgba(30, 78, 140, 0.1);
}

.lang-switcher--mobile .lang-link {
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
}

/* Animated counter */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* ── Buttons ────────────────────────────────────────────────────────────
   One CTA component (plain CSS so it deploys without a Tailwind rebuild).
   .vi-btn = default amber CTA; --sm / --lg for size; --ghost for the
   outline button on dark bands; --on-dark switches the focus ring to white.
   Layout utilities (w-full, block, flex-1, sm:w-auto, shadow-lg) still ride
   alongside on the element. ── */
.vi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background-color: var(--vi-amber);
  /* Dark ink stays: on amber #E9A820 it clears WCAG AA + AAA (~7.5:1),
     whereas white would fall to ~2.1:1 and fail. */
  color: var(--vi-ink);
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.vi-btn:hover {
  background-color: var(--vi-amber-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(233, 168, 32, 0.4);
}

.vi-btn:focus-visible {
  outline: 2px solid var(--vi-blue);
  outline-offset: 2px;
}

.vi-btn--sm {
  padding: 0.625rem 1.25rem;
}

.vi-btn--lg {
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.vi-btn--ghost {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.vi-btn--ghost:hover {
  background-color: #ffffff;
  color: var(--vi-blue-deep);
  box-shadow: none;
}

/* Blue-outline variant for light/paper surfaces (cards, inline text) —
   a quieter tier than the amber .vi-btn, not the dark-band --ghost. */
.vi-btn--outline {
  background-color: transparent;
  border: 2px solid var(--vi-blue);
  color: var(--vi-blue);
}

.vi-btn--outline:hover {
  background-color: var(--vi-blue);
  color: #ffffff;
  box-shadow: none;
}

.vi-btn--on-dark:focus-visible {
  outline-color: #ffffff;
}

/* Uppercase emphasis reserved for the header "Paremti" CTA only — the
   in-page CTAs stay normal-case. */
.vi-btn--caps {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Card hover */
.activity-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Skip to content link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.5rem 1rem;
  background: var(--vi-blue);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

/* ── Generic modal (verslo parama popup, etc.) ── */
.vi-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(0, 31, 63, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.vi-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.vi-modal {
  width: 100%;
  max-width: 520px;
  margin: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vi-modal-backdrop.active .vi-modal {
  transform: translateY(0) scale(1);
}

.vi-modal-card {
  position: relative;
  background: var(--vi-paper);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .vi-modal-card {
    padding: 2.5rem 2rem;
  }
}

.vi-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--vi-cream);
  color: var(--vi-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.vi-modal-close:hover {
  background: var(--vi-warm);
  color: var(--vi-ink);
}

/* Share bar (single post) — circular tint icons, not a bank/card-style tile */
.vi-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--vi-warm);
  background: var(--vi-cream);
  color: var(--vi-muted);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.vi-share-btn:hover {
  color: var(--vi-blue);
  border-color: rgba(30, 78, 140, 0.4);
  background: var(--vi-warm);
}

/* Copy button */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vi-warm);
  background: var(--vi-cream);
  color: var(--vi-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  vertical-align: middle;
}

.copy-btn:hover {
  background: var(--vi-warm);
  color: var(--vi-blue);
  border-color: var(--vi-muted);
}

.copy-btn.copy-success {
  background: rgba(51, 105, 93, 0.1);
  border-color: var(--vi-green);
  color: var(--vi-green);
}

/* Copy button inside dark backgrounds (footer) */
.copy-btn-light {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.copy-btn-light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Shared legal-page typography for .vi-content (privacy policy, taisyklės) — keep the two templates in sync, do not fork per-page again. */
.vi-content {
  font-family: var(--vi-font-body);
  color: var(--vi-ink);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.vi-content > *:first-child {
  margin-top: 0;
}

.vi-content h2 {
  font-family: var(--vi-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 2.5rem 0 1rem;
  line-height: 1.3;
}

.vi-content h3 {
  font-family: var(--vi-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  line-height: 1.3;
}

.vi-content h4 {
  font-family: var(--vi-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.vi-content p {
  margin: 0 0 1rem;
}

.vi-content ul,
.vi-content ol {
  margin: 0 0 1rem 1.25rem;
}

.vi-content ul {
  list-style: disc;
}

.vi-content ol {
  list-style: decimal;
}

.vi-content li {
  margin-bottom: 0.3rem;
}

.vi-content a {
  color: var(--vi-blue);
  font-weight: 600;
  text-decoration: none;
}

.vi-content a:hover {
  text-decoration: underline;
}

.vi-content strong {
  font-weight: 700;
}

.vi-content hr {
  border: none;
  border-top: 1px solid var(--vi-warm);
  margin: 2.5rem 0;
}

.vi-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 1.5rem 0;
}

.vi-content th,
.vi-content td {
  border: 1px solid var(--vi-warm);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.vi-content th {
  background: var(--vi-warm);
  font-weight: 600;
}

.vi-content address {
  font-style: normal;
}

/* ══════════════════════════════════════════════════════════════════
   Contact Form 7 styling (Kontaktai page, Verslo parama popup) — shared
   so every CF7 instance across the theme looks the same, not forked per page.
   ══════════════════════════════════════════════════════════════════ */

.vi-cf7 form.wpcf7-form .vi-cf7-row {
  margin-bottom: 1.25rem;
}

.vi-cf7 form.wpcf7-form .vi-cf7-row:last-of-type {
  margin-bottom: 0;
}

/* [tel] and [number] are listed alongside text/email because the car-donation
   form uses them — a type missing here renders as a raw browser input in the
   middle of an otherwise styled form. */
.vi-cf7 form.wpcf7-form input[type="text"],
.vi-cf7 form.wpcf7-form input[type="email"],
.vi-cf7 form.wpcf7-form input[type="tel"],
.vi-cf7 form.wpcf7-form input[type="number"],
.vi-cf7 form.wpcf7-form textarea,
.vi-cf7 form.wpcf7-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vi-warm);
  font-family: var(--vi-font-body);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--vi-ink);
}

.vi-cf7 form.wpcf7-form textarea {
  resize: vertical;
  min-height: 7rem;
}

.vi-cf7 form.wpcf7-form input:focus,
.vi-cf7 form.wpcf7-form textarea:focus,
.vi-cf7 form.wpcf7-form select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--vi-blue);
  border-color: transparent;
}

/* Native select arrow varies by OS and clashes with the field styling —
   replace it with a brand-muted chevron. */
.vi-cf7 form.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6A63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

.vi-cf7 form.wpcf7-form ::placeholder {
  color: var(--vi-muted);
  opacity: 0.65;
}

.vi-cf7 form.wpcf7-form .wpcf7-spinner {
  margin: 0.75rem auto 0;
}

.vi-cf7 form.wpcf7-form input[type="submit"] {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background-color: var(--vi-amber);
  color: var(--vi-ink);
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vi-cf7 form.wpcf7-form input[type="submit"]:hover {
  background-color: var(--vi-amber-hover);
}

.vi-cf7 form.wpcf7-form .wpcf7-not-valid-tip {
  color: var(--vi-red);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

.vi-cf7 form.wpcf7-form .wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--vi-warm);
  border-radius: 0.5rem;
  font-size: 0.85rem;
}

.vi-cf7 form.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--vi-green);
  color: var(--vi-green);
}

.vi-cf7 form.wpcf7-form.invalid .wpcf7-response-output,
.vi-cf7 form.wpcf7-form.failed .wpcf7-response-output,
.vi-cf7 form.wpcf7-form.aborted .wpcf7-response-output {
  border-color: var(--vi-red);
  color: var(--vi-red);
}

/* ── Google Maps embed (Kontaktai page) — the .vi-map container is a
   flex-1 grid cell (min-h set in markup); the iframe fills it completely so
   the map is as tall as the info card beside it. ── */
.vi-map {
  position: relative;
}

.vi-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Donation wizard (Parama page, #paremti-forma)
   ══════════════════════════════════════════════════════════════════ */

/* The wizard deliberately has no card frame: it reads as part of the page
   band and every pixel of the container goes to the form, which matters most
   on phones (a card cost ~34px of a 390px screen). Inner surfaces below are
   therefore tuned against the section's cream background, not paper. */
.vi-wizard {
  scroll-margin-top: 6rem;
}

/* Returning from the payment gateway, this card holds a confirmation, not
   step 1 of 2: no step trail measuring a flow that is over, and no Back arrow
   inviting a donor who has just paid to walk into the cause picker again.
   A class rather than an omission in PHP — donation-wizard.js drops it when
   the wizard restarts itself after the donor closes the confirmation, and the
   trail and Back links have to come back with it. */
.vi-wizard--return .vi-wizard-progress,
.vi-wizard--return .vi-wizard-back {
  display: none;
}

/* ── Step-progress trail — kept to a compact width and centered so the
   1-2-3 indicator reads as centered, not stretched edge to edge. ── */
.vi-wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(22rem, 100%);
  margin: 0 auto 2.25rem;
}

.vi-wizard-dot {
  display: flex;
  align-items: center;
  flex: 1;
}

.vi-wizard-dot-num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--vi-warm);
  color: var(--vi-muted);
  font-family: var(--vi-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.vi-wizard-dot-line {
  flex: 1;
  height: 2px;
  margin: 0 0.5rem;
  background: var(--vi-warm);
  transition: background-color 0.3s ease;
}

.vi-wizard-dot:last-child {
  /* No trailing line to fill, so don't reserve a full flex share for it —
     otherwise its circle lands ~2/3 across the bar instead of at the end,
     making the whole trail read as shifted left instead of centered. */
  flex: 0 0 auto;
}

.vi-wizard-dot:last-child .vi-wizard-dot-line {
  display: none;
}

.vi-wizard-dot.active .vi-wizard-dot-num,
.vi-wizard-dot.done .vi-wizard-dot-num {
  background: var(--vi-amber);
  color: var(--vi-ink);
}

.vi-wizard-dot.done .vi-wizard-dot-line {
  background: var(--vi-amber-hover);
}

/* ── Step viewport / transitions ── */
.vi-wizard-viewport {
  overflow: hidden;
  /* The clip edge sat exactly on the content edge, and the payment-method
     grids run the full width of the pane — so the amber selection glow on the
     first and last tile in a row was sliced off against a hard vertical line,
     which reads as a cropped logo. Padding plus an equal negative margin
     pushes the clip box 12px outwards while leaving the content exactly where
     it was: horizontal breathing room for a halo, with the vertical clipping
     that drives the height animation untouched. */
  padding-inline: 12px;
  margin-inline: -12px;
  /* 0.24s in lockstep with the step opacity/transform transitions below AND
     with STEP_TRANSITION_MS in assets/js/donation-wizard.js, whose height
     release fires at 240 + 40ms — a longer transition here gets cut off
     mid-flight and the viewport visibly snaps. */
  transition: height 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.vi-wizard-step {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.vi-wizard-step.active {
  display: block;
}

.vi-wizard-step.vi-wizard-step--visible {
  opacity: 1;
  transform: translateY(0);
}

.vi-wizard-step:focus {
  outline: none;
}

/* ── Step 1: one-time / monthly tiles ── */
.vi-wizard-choices {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .vi-wizard-choices {
    grid-template-columns: 1fr 1fr;
  }
}

.vi-wizard-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  border: 2px solid var(--vi-warm);
  /* Paper, not cream: without the card the section behind is cream, and a
     cream tile on cream loses its edge. */
  background: var(--vi-paper);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.vi-wizard-choice:hover,
.vi-wizard-choice:focus-visible {
  border-color: var(--vi-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(20, 51, 93, 0.08);
  outline: none;
}

/* Phones: the tile is already inside the section gutter, so a third layer of
   generous padding just narrows the text. */
@media (max-width: 639.98px) {
  .vi-wizard-choice {
    padding: 1.25rem 1rem;
  }
}

.vi-wizard-choice--selected {
  border-color: var(--vi-blue);
  background: var(--vi-paper);
}

.vi-wizard-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--vi-blue);
  color: #fff;
}

.vi-wizard-choice-title {
  font-family: var(--vi-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--vi-ink);
}

.vi-wizard-choice-desc {
  font-family: var(--vi-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--vi-muted);
}

.vi-wizard-alt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vi-warm);
  font-family: var(--vi-font-body);
  font-size: 0.8125rem;
  color: var(--vi-muted);
}

.vi-wizard-alt-links strong {
  color: var(--vi-ink);
  font-weight: 600;
}

.vi-wizard-alt-links a {
  color: var(--vi-blue);
  font-weight: 600;
  text-decoration: none;
}

.vi-wizard-alt-links a:hover {
  text-decoration: underline;
}

/* ── Back link (steps 2 and 3) ── */
.vi-wizard-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--vi-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vi-muted);
  cursor: pointer;
}

.vi-wizard-back:hover {
  color: var(--vi-blue);
}

.vi-wizard-back svg {
  width: 0.9rem;
  height: 0.9rem;
  transform: rotate(180deg);
}

/* ── Step 2: cause-selection grid ── */
.vi-wizard-cause-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .vi-wizard-cause-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vi-wizard-cause-tile {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 0.85rem;
  border: 2px solid var(--vi-warm);
  background: var(--vi-paper);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.vi-wizard-cause-tile:hover,
.vi-wizard-cause-tile:focus-visible {
  border-color: var(--vi-amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 51, 93, 0.08);
  outline: none;
}

.vi-wizard-cause-tile-photo {
  aspect-ratio: 16 / 9;
}

.vi-wizard-cause-tile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem 1rem;
}

.vi-wizard-cause-tile-title {
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--vi-ink);
}

.vi-wizard-cause-tile-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--vi-warm);
  overflow: hidden;
}

.vi-wizard-cause-tile-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--vi-amber-hover);
}

.vi-wizard-cause-tile-meta {
  font-family: var(--vi-font-body);
  font-size: 0.75rem;
  color: var(--vi-muted);
}

.vi-wizard-cause-tile--general {
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.vi-wizard-cause-tile-general-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--vi-blue);
  color: #fff;
}

.vi-wizard-cause-tile--general .vi-wizard-cause-tile-title {
  font-size: 0.9rem;
}

/* ── Step 3: payment form panes ── */
.vi-wizard-path-pane {
  display: none;
}

.vi-wizard-path-pane.active {
  display: block;
}

/* ── "Site under construction" page (template-parts/maintenance-page.php) ──
   The body is clamped to the viewport with no scroll: it's a single full-screen
   splash. Fixed elements (cookie banner) are unaffected. */
.vi-maintenance-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Full-screen splash: at least the viewport height, background photo covers
   the whole window. min-height (not height + overflow:hidden) so short
   phones can still scroll to the requisites instead of having them clipped. */
.vi-maintenance-hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Neutralise the default .vi-photo 4:3 aspect-ratio for this full-bleed
   background so the image always covers the viewport instead of being
   letterboxed. */
.vi-maintenance-hero .vi-photo {
  aspect-ratio: auto;
}

/* ==========================================================================
   Accessibility baseline
   ========================================================================== */

/* Visible keyboard focus for every interactive element. :focus-visible keeps
   mouse clicks clean while giving keyboard users a clear ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vi-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ...but not around a whole wizard pane. donation-wizard.js gives the pane it
   switches to tabindex="-1" and focuses it, so a screen reader reads the new
   step instead of staying put. That is a reading position, not a selection:
   nothing in the pane can be tabbed to, and a donor arriving back from the
   payment page does so on a fresh document where no pointer interaction has
   happened yet — which is precisely when the browser treats a scripted focus
   as keyboard-modal and paints the ring. Keep the focus, drop the ring. */
.vi-wizard-step[tabindex]:focus,
.vi-wizard-step[tabindex]:focus-visible {
  outline: none;
}

/* White ring on the deep-blue bands (header CTA area, hero, footer) where the
   blue outline would disappear. */
.bg-vi-blue-deep a:focus-visible,
.bg-vi-blue-deep button:focus-visible,
.mobile-panel a:focus-visible,
.mobile-panel button:focus-visible {
  outline-color: #ffffff;
}

/* Respect a user's reduced-motion preference: no reveals, tweens, lifts or
   smooth-scroll. The counters are handled in main.js (final value shown
   instantly). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reveal-stagger > .reveal {
    transition-delay: 0ms !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Mobile optimization layer
   Everything below is phone/touch-focused; desktop (lg+) pixels unchanged.
   Plain CSS on purpose — deploys without a Tailwind rebuild.
   ========================================================================== */

/* ── .vi-sheet — the legal-page content frame ──
   On phones the card chrome dissolves entirely: the section's px-4 gutter is
   the only frame, so the dense legal text gets the full width. From 640px up
   it becomes the same paper card the templates used to hardcode. */
@media (min-width: 640px) {
  .vi-sheet {
    background: var(--vi-paper);
    border: 1px solid var(--vi-warm);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(35, 36, 31, 0.05);
    padding: 2rem;
  }
}

@media (min-width: 768px) {
  .vi-sheet {
    padding: 3rem;
  }
}

/* ── .vi-content extras (moved from single.php's former inline <style>) ── */
.vi-content img:not(.emoji):not(.wp-smiley) {
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  max-width: 100%;
  height: auto;
}

.vi-content blockquote {
  border-left: 3px solid var(--vi-amber);
  background: rgba(233, 168, 32, 0.08);
  padding: 0.9rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
  font-style: italic;
}

/* Wide tables (legal pages) scroll inside their own box on phones instead of
   blowing the page out horizontally. */
@media (max-width: 767.98px) {
  .vi-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Donation wizard: the section gutter is the only horizontal frame ──
   The monthly pane (.mk-step markup reproduced in donation-wizard.php) gets
   its side padding zeroed so the form runs the full width of the band. The
   one-time pane's equivalent rule lives in the plugin (mk-onetime.css,
   .mk-onetime-inline). */
.vi-wizard .mk-step {
  padding-left: 0;
  padding-right: 0;
}

/* The "kita suma" button defaults to the plugin's secondary background, which
   resolves to cream — the same colour as the section now that the wizard has
   no card of its own. */
.vi-wizard .mk-onetime-custom-amount-btn {
  background: var(--vi-paper);
}

/* ── CF7 inputs ≥16px on phones — iOS Safari zooms into any focused field
   with a smaller font, throwing the visitor out of the page flow. */
@media (max-width: 639.98px) {
  .vi-cf7 form.wpcf7-form input[type="text"],
  .vi-cf7 form.wpcf7-form input[type="email"],
  .vi-cf7 form.wpcf7-form input[type="tel"],
  .vi-cf7 form.wpcf7-form input[type="number"],
  .vi-cf7 form.wpcf7-form textarea,
  .vi-cf7 form.wpcf7-form select {
    font-size: 1rem;
  }
}

/* ── Tap targets: 44×44 minimum on touch devices ──
   One mechanism for every small control: an invisible centered ::after
   extends the hit area without moving a single visible pixel. Gated on
   pointer:coarse so desktop mouse behaviour (and layout) is untouched.
   None of these selectors renders its own ::after content elsewhere. */
@media (pointer: coarse) {
  /* .vi-modal-close is deliberately absent: it is already
     `position: absolute; top: 1rem; right: 1rem`, which is just as valid a
     containing block for its ::after — while `position: relative` here put it
     back in normal flow on every touch device, landing the × on top of the
     modal's icon tile at the top left. */
  .copy-btn,
  .vi-share-btn,
  .vi-wizard-back,
  .lang-link,
  .vi-btn--sm,
  .vi-lightbox-prev,
  .vi-lightbox-next,
  .vi-lightbox-close {
    position: relative;
  }

  .copy-btn::after,
  .vi-share-btn::after,
  .vi-modal-close::after,
  .vi-wizard-back::after,
  .lang-link::after,
  .vi-btn--sm::after,
  .vi-lightbox-prev::after,
  .vi-lightbox-next::after,
  .vi-lightbox-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* Wrapped text-link rows would mis-target with overlapping invisible hit
     areas — those get real padding instead (visual rhythm preserved by the
     negative margins). */
  .vi-anchor-nav a,
  .vi-toc a {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    margin: -0.25rem 0;
  }

  .page-numbers {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* ── Sticky mobile donate bar (printed in footer.php, driven by main.js) ── */
.vi-mobile-cta {
  display: none;
}

@media (max-width: 1023.98px) {
  .vi-mobile-cta {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60; /* under the mobile menu (998+), modals and consent banner */
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(255, 253, 249, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--vi-warm);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }

  .vi-mobile-cta.is-visible {
    transform: translateY(0);
  }

  /* Never compete with an open overlay or the consent banner. */
  body:has(.mk-onetime-modal.show) .vi-mobile-cta,
  body:has(.mk-modal.show) .vi-mobile-cta,
  body:has(.vi-modal-backdrop.active) .vi-mobile-cta,
  body:has(.mobile-panel.open) .vi-mobile-cta,
  body:has(.vi-consent-banner) .vi-mobile-cta {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DUK / FAQ accordion (Parama page, #duk)
   Native <details>/<summary> — no JS, works before hydration and with
   JS disabled. Also the visible counterpart of the FAQPage schema.
   ══════════════════════════════════════════════════════════════════ */

.vi-faq-item {
  border-bottom: 1px solid var(--vi-warm);
}

.vi-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--vi-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vi-ink);
  transition: color 0.2s ease;
}

/* Safari still paints the default disclosure triangle without this. */
.vi-faq-q::-webkit-details-marker {
  display: none;
}

.vi-faq-q:hover {
  color: var(--vi-blue);
}

.vi-faq-chevron {
  margin-top: 0.125rem;
  color: var(--vi-muted);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.vi-faq-item[open] .vi-faq-chevron {
  transform: rotate(-90deg);
  color: var(--vi-blue);
}

.vi-faq-a {
  padding: 0 0 1.375rem;
  max-width: 60ch;
  font-family: var(--vi-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--vi-muted);
}

.vi-faq-a a {
  font-weight: 600;
  color: var(--vi-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vi-faq-a strong {
  color: var(--vi-ink);
}

@media (min-width: 640px) {
  .vi-faq-q {
    font-size: 1.125rem;
    padding: 1.25rem 0;
  }

  .vi-faq-a {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vi-faq-chevron {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Breadcrumbs (template-parts/breadcrumbs.php)
   ══════════════════════════════════════════════════════════════════ */

.vi-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--vi-font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--vi-muted);
}

.vi-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.vi-breadcrumbs a:hover {
  color: var(--vi-blue);
  text-decoration: underline;
}

.vi-breadcrumbs-sep {
  color: var(--vi-warm);
}

.vi-breadcrumbs-current {
  color: var(--vi-ink);
}

/* Over the deep-blue page headers. */
.vi-breadcrumbs--on-dark {
  color: rgba(255, 255, 255, 0.7);
}

.vi-breadcrumbs--on-dark .vi-breadcrumbs-sep {
  color: rgba(255, 255, 255, 0.35);
}

.vi-breadcrumbs--on-dark .vi-breadcrumbs-current {
  color: #ffffff;
}

.vi-breadcrumbs--on-dark a:hover {
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════
   Archive pagination — shared by the_posts_pagination() and the manual
   paginate_links() fallback; both emit core's .page-numbers classes.
   (Was duplicated inline in home.php and index.php.)
   ══════════════════════════════════════════════════════════════════ */

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-family: var(--vi-font-body);
  font-size: 0.875rem;
  color: var(--vi-ink);
  border: 1px solid var(--vi-warm);
  background: var(--vi-paper);
  text-decoration: none;
  margin: 0 0.25rem 0.5rem 0;
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--vi-blue);
  color: #fff;
  border-color: var(--vi-blue);
}

.page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   Weekly volunteer calendar (.vi-cal)
   template-parts/schedule-calendar.php — a real Mon–Sun × 08:00–22:00
   week grid, server-rendered from inc/schedule.php.

   Desktop (md+): a fixed-height time axis plus 7 day tracks; shift
   blocks are absolutely positioned from two custom props carried on the
   element — --s / --e (start/end in minutes from midnight) — against the
   grid window --vi-cal-start / --vi-cal-span set on the wrapper.
   Below md: the SAME DOM reflows to a stacked day-by-day list (tracks
   go height:auto, blocks go static) — no duplicated markup, so the grid
   and the phone list can never drift apart.

   Plain CSS on purpose: deploys without a Tailwind rebuild.
   ══════════════════════════════════════════════════════════════════ */

.vi-cal {
  /* Hour height is what decides whether a 3-hour shift block can hold its
     three activity lines without clipping — sized against the real schedule
     (17:00–20:00 with candles + nets + aid), not picked for looks. */
  --vi-cal-hour-h: 3.25rem;
  --vi-cal-axis-w: 3.5rem;
  font-family: var(--vi-font-body);
}

/* ── Accent per activity kind (mirrors vi_schedule_activity_types) ──
   Two variables on purpose: --vi-cal-accent is the fill/tint, and
   --vi-cal-ink is the same idea when it has to be drawn as a glyph. They
   differ only for amber: #E9A820 is 1.93:1 on cream, so it can never carry
   ink in this palette — the darker --vi-amber-hover is used instead (the
   same substitution the rest of the theme already makes with
   text-vi-amber-hover). Green/red/blue all clear 4.5:1 as-is. ── */
.vi-cal--amber  { --vi-cal-accent: var(--vi-amber);      --vi-cal-ink: var(--vi-amber-hover); }
.vi-cal--green  { --vi-cal-accent: var(--vi-green);      --vi-cal-ink: var(--vi-green); }
.vi-cal--blue   { --vi-cal-accent: var(--vi-blue);       --vi-cal-ink: var(--vi-blue); }
.vi-cal--red    { --vi-cal-accent: var(--vi-red);        --vi-cal-ink: var(--vi-red); }
.vi-cal--deep   { --vi-cal-accent: var(--vi-blue-deep);  --vi-cal-ink: var(--vi-blue-deep); }
.vi-cal--muted  { --vi-cal-accent: var(--vi-muted);      --vi-cal-ink: var(--vi-muted); }

/* ── Week navigation ──────────────────────────────────────────────────
   Plain links, not buttons: each week has its own URL (?vi_week=), so the
   arrows work with JS off, can be shared, and land on the grid anchor. The
   ends of the navigable range render as inert spans rather than disappearing,
   so the control keeps its shape. ── */
.vi-cal-weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.5rem;
  background: var(--vi-paper);
  border: 1px solid rgba(35, 36, 31, 0.08);
  border-radius: 0.75rem;
}

.vi-cal-weeknav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--vi-blue);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vi-cal-weeknav-btn:hover {
  background: rgba(30, 78, 140, 0.08);
}

.vi-cal-weeknav-btn.is-disabled {
  color: var(--vi-muted);
  opacity: 0.5;
  cursor: default;
}

.vi-cal-weeknav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* The label is the point of the control; the words on the arrows are not, so
   they step aside first on a narrow screen. */
.vi-cal-weeknav-btn-text {
  display: none;
}

.vi-cal-weeknav-now {
  text-align: center;
  min-width: 0;
}

.vi-cal-weeknav-label {
  margin: 0;
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--vi-ink);
}

.vi-cal-weeknav-sub {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--vi-muted);
}

.vi-cal-weeknav-sub a {
  color: var(--vi-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (min-width: 480px) {
  .vi-cal-weeknav-btn-text {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .vi-cal-weeknav {
    padding: 0.625rem 0.875rem;
  }

  .vi-cal-weeknav-label {
    font-size: 1.0625rem;
  }
}

/* ── Toolbar: legend + export actions ── */
.vi-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.vi-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vi-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--vi-muted);
}

.vi-cal-legend-icon {
  width: 1rem;
  height: 1rem;
  color: var(--vi-cal-ink, var(--vi-muted));
  flex-shrink: 0;
}

.vi-cal-legend-empty {
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--vi-muted);
}

.vi-cal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.vi-cal-status {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--vi-green);
  min-height: 1.25rem;
}

.vi-cal-status:empty {
  display: none;
}

/* ── Frame ── */
.vi-cal-frame {
  background: var(--vi-paper);
  border: 1px solid rgba(35, 36, 31, 0.08);
  border-radius: 1rem;
  padding: 0.75rem;
  overflow: hidden;
}

/* The time axis only means anything next to the positioned grid; on phones
   the days stack and each block prints its own time range. */
.vi-cal-axis {
  display: none;
}

/* ── Day tracks ── */
.vi-cal-week {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vi-cal-day {
  min-width: 0;
}

.vi-cal-dayhead {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--vi-ink);
  margin: 0 0 0.375rem;
}

/* The date makes each week concrete — without it the arrows would move the
   grid with nothing on screen confirming which week you landed on. */
.vi-cal-dayhead-date {
  font-family: var(--vi-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--vi-muted);
  font-variant-numeric: tabular-nums;
}

.vi-cal-day--today .vi-cal-dayhead,
.vi-cal-day--today .vi-cal-dayhead-date {
  color: var(--vi-blue);
}

.vi-cal-day--today .vi-cal-dayhead::after {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.4rem;
  vertical-align: 0.15em;
  border-radius: 999px;
  background: var(--vi-amber-hover);
}

.vi-cal-track {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Shift block ── */
.vi-cal-block {
  background: var(--vi-cream);
  border: 1px solid rgba(35, 36, 31, 0.07);
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  min-width: 0;
  overflow: hidden;
}

.vi-cal-time {
  margin: 0 0 0.4rem;
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--vi-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vi-cal-acts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* Tight, because .vi-cal-act-link's own padding is what separates the rows
     on a phone — it has to double as the tap target. */
  gap: 0.1rem;
}

.vi-cal-act {
  min-width: 0;
}

/* The whole activity row is the click target. It is a real <a> whose href
   already downloads this single occurrence, so it keeps working with JS off;
   the popup is layered on top by schedule-calendar.js. */
.vi-cal-act-link {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  /* On a phone this row IS the interaction — tapping it opens the shift popup —
     so it has to clear the 24px minimum target size on its own. Inside the
     desktop grid there is a cursor and no room, so it tightens back up. */
  min-height: 2.25rem;
  padding: 0.45rem 0.4rem;
  margin: 0 -0.4rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.vi-cal-act-link:hover {
  background: color-mix(in srgb, var(--vi-cal-accent, var(--vi-muted)) 12%, transparent);
}

.vi-cal-act-link:hover .vi-cal-act-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.vi-cal-act-link--static,
.vi-cal-act-link--static:hover {
  background: none;
  cursor: default;
}

.vi-cal-act-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  color: var(--vi-cal-ink, var(--vi-muted));
}

.vi-cal-act-body {
  min-width: 0;
}

.vi-cal-act-title {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--vi-ink);
  /* An admin-entered title can be arbitrarily long; inside a narrow day
     column it must break rather than clip against overflow:hidden. */
  overflow-wrap: anywhere;
}

.vi-cal-act-place,
.vi-cal-act-note {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--vi-muted);
  margin-top: 0.1rem;
}

/* Deliberately NOT the accent: this is body text, and the amber accent is
   1.93:1 on cream. The colour cue lives on the icon, not the words. */
.vi-cal-act-note {
  color: var(--vi-muted);
  font-style: italic;
}

.vi-cal-closed {
  margin: 0;
  padding: 0.5rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--vi-muted);
  font-style: italic;
}

/* ── Footer: place + timezone note ── */
.vi-cal-place {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--vi-muted);
}

.vi-cal-place-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  color: var(--vi-blue);
}

/* ── "Click a shift" hint ── */
.vi-cal-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--vi-muted);
}

.vi-cal-hint-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  color: var(--vi-blue);
}

/* ── Shift popup ──────────────────────────────────────────────────────
   A native <dialog>: no library, real focus trapping and Esc handling from
   the platform. It only ever opens from JS, and the shift link underneath it
   already downloads the right file on its own, so nothing here is required
   for the calendar to be usable. ── */
.vi-cal-dialog {
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid rgba(35, 36, 31, 0.1);
  border-radius: 1rem;
  background: var(--vi-paper);
  color: var(--vi-ink);
  font-family: var(--vi-font-body);
  box-shadow: 0 24px 60px -12px rgba(20, 51, 93, 0.35);
}

.vi-cal-dialog::backdrop {
  background: rgba(20, 51, 93, 0.45);
}

.vi-cal-dialog-dismiss {
  float: right;
  margin: -0.5rem -0.5rem 0 0.5rem;
}

.vi-cal-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--vi-muted);
  cursor: pointer;
}

.vi-cal-dialog-close:hover {
  background: var(--vi-warm);
  color: var(--vi-ink);
}

.vi-cal-dialog-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--vi-blue);
  font-weight: 600;
}

.vi-cal-dialog-title {
  margin: 0 0 0.875rem;
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--vi-ink);
  overflow-wrap: anywhere;
}

.vi-cal-dialog-meta {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.vi-cal-dialog-meta li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--vi-ink);
}

.vi-cal-dialog-meta li[hidden] {
  display: none;
}

.vi-cal-dialog-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  color: var(--vi-blue);
}

.vi-cal-dialog-download {
  padding-top: 1.25rem;
  border-top: 1px solid var(--vi-warm);
}

.vi-cal-dialog-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--vi-font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--vi-ink);
}

.vi-cal-dialog-select {
  display: block;
  width: 100%;
  margin-bottom: 0.875rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--vi-warm);
  border-radius: 0.5rem;
  background: #fff;
  font-family: var(--vi-font-body);
  font-size: 0.875rem;
  color: var(--vi-ink);
}

.vi-cal-dialog-select option[hidden] {
  display: none;
}

.vi-cal-dialog-link {
  width: 100%;
  justify-content: center;
}

.vi-cal-dialog-hint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--vi-muted);
}

/* ── The actual week grid — lg and up ────────────────────────────────
   Deliberately NOT md: at 768px seven columns leave ~95px per day and
   activity titles clip mid-word, so tablets keep the stacked day list. ── */
@media (min-width: 1024px) {
  .vi-cal-frame {
    display: grid;
    grid-template-columns: var(--vi-cal-axis-w) 1fr;
    gap: 0 0.5rem;
    padding: 1rem 1rem 1.25rem;
  }

  /* Time axis: hour labels pinned to their own minute offset, so the
     labels always line up with the ruled lines behind the tracks. */
  .vi-cal-axis {
    display: block;
    position: relative;
    /* Push down by the day-header row so 08:00 starts level with the tracks.
       Must stay in lockstep with .vi-cal-dayhead's height below, or every hour
       label drifts off its rule. */
    margin-top: 2.75rem;
    height: calc(var(--vi-cal-span) / 60 * var(--vi-cal-hour-h));
  }

  .vi-cal-hour {
    position: absolute;
    right: 0.25rem;
    top: calc((var(--m) - var(--vi-cal-start)) / var(--vi-cal-span) * 100%);
    transform: translateY(-0.5em);
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--vi-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .vi-cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 0.25rem;
  }

  /* Weekday over its date: a day column is ~124px at 1024px, too narrow to
     hold "Ketvirtadienis 30" on one line. */
  .vi-cal-dayhead {
    height: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
  }

  .vi-cal-dayhead-name {
    overflow-wrap: anywhere;
  }

  .vi-cal-dayhead-date {
    font-size: 0.75rem;
  }

  .vi-cal-day--today .vi-cal-dayhead {
    background: rgba(30, 78, 140, 0.06);
    border-radius: 0.375rem 0.375rem 0 0;
  }

  .vi-cal-track {
    position: relative;
    display: block;
    height: calc(var(--vi-cal-span) / 60 * var(--vi-cal-hour-h));
    border-left: 1px solid rgba(35, 36, 31, 0.07);
    /* Hour rules, drawn from the same hour height as the axis. */
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(35, 36, 31, 0.07) 0,
      rgba(35, 36, 31, 0.07) 1px,
      transparent 1px,
      transparent var(--vi-cal-hour-h)
    );
  }

  .vi-cal-day:last-child .vi-cal-track {
    border-right: 1px solid rgba(35, 36, 31, 0.07);
  }

  .vi-cal-day--today .vi-cal-track {
    background-color: rgba(30, 78, 140, 0.035);
  }

  /* Shift blocks: positioned from --s/--e against the grid window, and
     split into lanes only when time ranges genuinely overlap. */
  .vi-cal-block {
    position: absolute;
    top: calc((var(--s) - var(--vi-cal-start)) / var(--vi-cal-span) * 100%);
    min-height: calc((var(--e) - var(--s)) / var(--vi-cal-span) * 100%);
    left: calc(var(--lane) / var(--lanes) * 100%);
    width: calc(100% / var(--lanes));
    margin: 0;
    padding: 0.375rem 0.4rem;
    border-radius: 0.4rem;
    border-color: rgba(35, 36, 31, 0.1);
  }

  .vi-cal-time {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
  }

  .vi-cal-acts {
    gap: 0.25rem;
  }

  .vi-cal-act-link {
    min-height: 0;
    padding: 0.1rem 0.2rem;
    margin: -0.1rem -0.2rem;
  }

  .vi-cal-act-icon {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  .vi-cal-act-title {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  .vi-cal-act-place,
  .vi-cal-act-note {
    font-size: 0.6875rem;
  }

  .vi-cal-closed {
    padding: 0.5rem 0.25rem 0;
    text-align: center;
    font-size: 0.6875rem;
  }

}

/* Wide desktop: more room per block, so let the type breathe again. */
@media (min-width: 1280px) {
  .vi-cal {
    --vi-cal-hour-h: 3.5rem;
    --vi-cal-axis-w: 4rem;
  }

  .vi-cal-block {
    padding: 0.5rem 0.5rem;
  }

  .vi-cal-act-title {
    font-size: 0.75rem;
  }

  .vi-cal-time {
    font-size: 0.75rem;
  }
}

/* "Now" line — drawn by assets/js/schedule-calendar.js from the visitor's
   real Europe/Vilnius clock, so it stays correct behind any page cache. */
.vi-cal-now {
  display: none;
}

@media (min-width: 1024px) {
  .vi-cal-now {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc((var(--now) - var(--vi-cal-start)) / var(--vi-cal-span) * 100%);
    height: 0;
    border-top: 2px solid var(--vi-amber-hover);
    z-index: 3;
    pointer-events: none;
  }

  .vi-cal-now::before {
    content: "";
    position: absolute;
    /* Sits on the column's own left edge — a negative offset would poke the
       dot into the previous day. */
    left: 0;
    top: -0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--vi-amber-hover);
  }
}

/* The legal pages (Taisyklės, Privatumo politika) name the payment provider
   unconditionally — a GDPR/onboarding disclosure, not advertising — so the
   placeholder that used to stand in for it there is gone. The donors plugin
   still renders its own `.mk-provider-placeholder` in the donation forms,
   styled by the plugin, while „Rodyti mokėjimų tiekėjo pavadinimą ir
   logotipą" is off. */