/* Mobile + tablet hamburger nav - theme enhancement (NOT from the Claude Design export).
   Kept separate so style.css stays a faithful mirror of the locked design. */

/* iOS rubber-band overscroll at the page bottom reveals the page background; match it
   to the footer (--green-900) so the bounce reads as intentional, not a white gap.
   Never visible at rest (content fills the viewport) -> visual baselines unchanged. */
html { background-color: var(--green-900); }

.nav-burger { display: none; }
.mobile-panel, .nav-backdrop { display: none; }

@media (max-width: 1024px) {
  /* hide the desktop nav bits, show the burger (tablets + phones) */
  .nav-links, .lang, .nav-contact { display: none !important; }

  /* orange header bar with the logo sitting in a white box on the left.
     Scope to .nav so the footer brand (which reuses .nav-logo) is untouched. */
  .nav { background: var(--orange); }
  .nav .nav-logo { background: var(--bg); padding: 18px 40px; border-right: 0; }

  .nav-right { align-items: center; justify-content: flex-end; padding-right: 18px; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .nav-burger span {
    display: block; width: 26px; height: 2px; background: #fff;
    transition: transform .25s ease, opacity .25s ease;
  }
  .mobile-panel, .nav-backdrop { display: flex; }
}

/* Auto-hiding header (theme enhancement): on mobile/tablet the compact header
   sticks to the top, hides when scrolling down and slides back in when scrolling
   up. At scroll position 0 it sits in normal flow (identical to the static header),
   so visual baselines are unchanged. nav.js toggles .nav--hidden. */
@media (max-width: 1024px) {
  .nav {
    position: sticky; top: 0;
    transition: transform .3s ease;
    will-change: transform;
  }
  .nav.nav--hidden { transform: translateY(-100%); }
  body.nav-open .nav { transform: none; }  /* never hide while the drawer is open */
}

/* off-canvas panel: slides in from the right, brand orange */
.mobile-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(330px, 82vw);
  background: var(--orange); color: var(--on-dark-strong);
  z-index: 60; transform: translateX(100%); transition: transform .3s ease;
  flex-direction: column; gap: 6px; padding: 92px 34px 40px;
  box-shadow: -18px 0 44px rgba(0,0,0,.20);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.mobile-panel.open { transform: translateX(0); }

.mobile-panel-close {
  position: absolute; top: 22px; right: 24px;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 0; color: var(--on-dark-strong); font-size: var(--fs-h2); line-height: 1; cursor: pointer;
}

.mobile-links { display: flex; flex-direction: column; }
.mobile-links > a {
  color: var(--on-dark-strong); text-decoration: none;
  font-family: 'Lora', Georgia, serif; font-size: var(--fs-h4); font-weight: 500;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.22);
}

/* mobile accordion: the dropdown parents inside the orange panel */
.m-group { border-bottom: 1px solid rgba(255,255,255,.22); }
.m-parent {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer; color: var(--on-dark-strong);
  font-family: 'Lora', Georgia, serif; font-size: var(--fs-h4); font-weight: 500;
  padding: 15px 0; text-align: left;
}
.m-caret {
  width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); transition: transform .25s ease; margin-right: 4px;
}
.m-parent[aria-expanded="true"] .m-caret { transform: rotate(-135deg); }
.m-sub { display: none; flex-direction: column; padding: 6px 0 20px 14px; }
.m-sub.open { display: flex; }
.m-sub a {
  color: var(--on-dark-strong); text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: var(--fs-body-lg); font-weight: 500; padding: 10px 0;
}

.mobile-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; }
.mobile-contact a { color: var(--on-dark-strong); text-decoration: none; font-size: var(--fs-body-lg); font-weight: 500; }

.mobile-lang { display: flex; gap: 16px; margin-top: 24px; }
.mobile-lang .flag { width: 38px; height: 26px; border-radius: var(--r-xs); cursor: pointer; }
/* WPML active: both mobile flags full opacity (Mikelis 2026-06-28: no grayed flag); subtle hover only. */
.mobile-lang a.flag { opacity: 1; transition: opacity 0.15s ease; }
.mobile-lang a.flag:hover { opacity: 0.75; }

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 50; opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

body.nav-open { overflow: hidden; }

/* ---------- Desktop hover dropdown (Pakalpojumi, Resursi) ---------- */
/* slightly smaller caret + a touch more gap from the label */
.nav-links .has-caret { gap: 14px; }
.nav-links .has-caret::after { width: 6px; height: 6px; }

/* full-height so the dropdown's top:100% lands exactly on the header's bottom edge (flush) */
.nav-item { position: relative; display: inline-flex; align-items: center; align-self: stretch; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 258px; background: var(--orange);
  border-radius: 0 0 var(--r-md) var(--r-md);
  /* downward-only shadow (negative spread) so it doesn't bleed up over the header edge */
  box-shadow: 0 18px 30px -12px rgba(22, 48, 41, .22);
  padding: 8px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
  z-index: 40;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  padding: 12px 16px; font-size: var(--fs-body); font-weight: 500;
  color: var(--on-dark-strong); border-radius: var(--r-sm); white-space: nowrap;
}
.nav-dropdown a:hover { background: rgba(255, 255, 255, .18); color: var(--on-dark-strong); }