/*
 * public/konstruktors2/vietne.css
 * =============================================================================
 * MĀJASLAPAS RĀMIS konstruktoru lapām (www.alpinesip.lv galvene un kājene).
 * Uzvedība un pamatojums: /konstruktors2/vietne.js.
 *
 * Mērķis ir nevis "līdzīgi", bet tas pats, ko cilvēks tikko redzēja Mozello
 * lapā "Konstruktori". Vērtības izmērītas dzīvajā lapā 15.10.2026:
 *  - fonts Poppins (izvēlne 500 16 px, kājene 300 16 px), krāsa #083149
 *    (tas pats, kas --ui-navy), aktīvais punkts pasvītrots 2 px;
 *  - datora kompaktā josla 54 px, balta, ēna 0 1px 5px rgba(0,0,0,.17);
 *  - telefona galvene 65 px, pogas 55 x 55 px, logo 220 px plats;
 *  - kājenes fons #F5F5F5, atkāpe 40 px (telefonā 20 px).
 *
 * Krāsas un izmēri ir tikai šī faila :root blokā (tests to pārbauda); zemāk
 * noteikumi lieto tikai --vt-* un --ui-* mainīgos.
 *
 * Poppins: Google Fonts v24, SIL Open Font License 1.1, pašhostēts /fonti/
 * (trešo pušu fontu CDN dizaina sistēmā nelietojam, sk. alpine-ui.css).
 * =============================================================================
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonti/poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonti/poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonti/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonti/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --vt-fonts: "Poppins", Arial, Helvetica, sans-serif;
  --vt-tinte: var(--ui-navy);            /* #083149 Mozello izvēlnes krāsa */
  --vt-fons: var(--ui-karte);            /* balta galvene */
  --vt-kaje: #F5F5F5;                    /* Mozello lapas pamats zem kājenes */
  --vt-ena: 0 1px 5px rgba(0, 0, 0, .17);
  --vt-josla-dators: 54px;
  --vt-josla-tel: 65px;
  --vt-poga-tel: 55px;
  --vt-logo-tel: 220px;
  --vt-punkts-x: 15px;                   /* izvēlnes punkta sānu atkāpe */
  --vt-kaje-atk: 40px;
  --vt-kaje-atk-tel: 20px;
  --vt-pasvitra: 2px;
}

/* ── Galvene: kopīgais ───────────────────────────────────────────────────── */

.vietne-galva {
  position: sticky; top: 0; z-index: 40;
  display: grid; align-items: center;
  background: var(--vt-fons); box-shadow: var(--vt-ena);
  font-family: var(--vt-fonts); color: var(--vt-tinte);
}
.vietne-galva a { color: var(--vt-tinte); }
.vietne-galva ul { list-style: none; margin: 0; padding: 0; }

/* Izlaišanas saite: redzama tikai ar tastatūru, tāpat kā Mozello. */
.vietne-izlaist {
  position: absolute; left: var(--ui-a2); top: var(--ui-a2); z-index: 2;
  padding: var(--ui-a2) var(--ui-a3); background: var(--vt-fons); border-radius: var(--ui-r-s);
  transform: translateY(-160%);
}
.vietne-izlaist:focus { transform: none; }

.vietne-logo { display: flex; align-items: center; }
.vietne-logo img { display: block; width: auto; height: 28px; }

.vietne-izvelne ul a {
  display: inline-block; text-decoration: none; white-space: nowrap;
  font-weight: 500; font-size: 16px; line-height: 1.6;
  text-decoration-thickness: var(--vt-pasvitra); text-underline-offset: 6px;
}
.vietne-izvelne a[aria-current="page"] { text-decoration-line: underline; }
@media (hover: hover) and (pointer: fine) {
  .vietne-izvelne ul a:hover { text-decoration-line: underline; }
}

.vietne-galva a:focus-visible, .vietne-galva button:focus-visible,
.vietne-kaje a:focus-visible {
  outline: 2px solid var(--vt-tinte); outline-offset: 2px; border-radius: 2px;
}

/* Valodu poga un saraksts (Mozello: zemeslode un "LV"). */
.vietne-valoda { position: relative; justify-self: end; }
.vietne-valodas-poga {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--ui-skariens); padding: 0 var(--ui-a2);
  background: none; border: 0; cursor: pointer;
  font: 400 15px/1 var(--vt-fonts); color: var(--vt-tinte);
}
.vietne-valodas-poga svg { width: 18px; height: 18px; }
.vietne-valodas {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 96px;
  padding: var(--ui-a1) 0; background: var(--vt-fons); box-shadow: var(--ui-ena-2);
  border-radius: var(--ui-r-s);
}
.vietne-valodas a {
  display: block; padding: var(--ui-a2) var(--ui-a4); text-decoration: none;
  font: 400 15px/1.4 var(--vt-fonts);
}
.vietne-valodas a[aria-current="true"] { font-weight: 500; text-decoration: underline; text-decoration-thickness: var(--vt-pasvitra); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .vietne-valodas a:hover { background: var(--ui-zeme); }
}

.vietne-izvelnes-poga, .vietne-aizvert {
  display: none; align-items: center; justify-content: center;
  width: var(--vt-poga-tel); height: var(--vt-poga-tel);
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--vt-tinte);
}
.vietne-izvelnes-poga svg, .vietne-aizvert svg { width: 24px; height: 24px; }

/* ── Dators (no 1024 px): Mozello kompaktā josla ─────────────────────────── */

@media (min-width: 1024px) {
  .vietne-galva {
    height: var(--vt-josla-dators); padding: 0 var(--ui-a5);
    grid-template-columns: 1fr auto 1fr; column-gap: var(--ui-a4);
  }
  .vietne-logo { justify-self: start; grid-column: 1; }
  .vietne-izvelne { grid-column: 2; }
  .vietne-valoda { grid-column: 3; }
  .vietne-izvelne ul { display: flex; }
  .vietne-izvelne ul a { padding: 0 var(--vt-punkts-x); }
}
/* Logo tikai tad, kad tam ir vieta: līdz 1199 px josla ir tieši kā Mozello
   kompaktā josla (bez logo), citādi garākās valodās (DE, NL) izvēlne
   nesatilpst. display: none, ne visibility: neredzams logo joprojām aizņemtu
   savu platumu režģī (Codex pārskats 15.10.2026). */
@media (min-width: 1024px) and (max-width: 1199px) {
  .vietne-logo { display: none; }
  .vietne-izvelne ul a { padding: 0 12px; }
}

/* ── Telefons un planšete (līdz 1023 px): Mozello mobilā galvene ─────────── */

@media (max-width: 1023px) {
  .vietne-galva {
    position: relative; height: var(--vt-josla-tel); padding: 0 5px;
    grid-template-columns: var(--vt-poga-tel) 1fr var(--vt-poga-tel);
  }
  .vietne-izvelnes-poga { display: inline-flex; }
  .vietne-logo { justify-self: center; }
  .vietne-logo img { width: min(var(--vt-logo-tel), 100%); height: auto; }
  .vietne-valodas-poga { width: var(--vt-poga-tel); height: var(--vt-poga-tel); justify-content: center; padding: 0; }
  .vietne-valodas-poga svg { width: 24px; height: 24px; }
  .vietne-valodas-kods { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Izvēlne ir paslēpta līdz pogai; tad tā aizņem visu ekrānu kā Mozello. */
  .vietne-izvelne { display: none; }
  .vietne-galva--atverta .vietne-izvelne {
    display: block; position: fixed; inset: 0; z-index: 70; overflow-y: auto;
    background: var(--vt-fons);
    padding: env(safe-area-inset-top) calc(var(--ui-a5) + env(safe-area-inset-right)) var(--ui-a6) calc(var(--ui-a5) + env(safe-area-inset-left));
  }
  .vietne-galva--atverta .vietne-aizvert { display: inline-flex; margin: var(--ui-a1) calc(var(--ui-a3) * -1) var(--ui-a3) auto; }
  .vietne-izvelne .vietne-aizvert-rinda { display: flex; }
  .vietne-izvelne ul a { padding: var(--ui-a3) 0; font-size: 17px; }
}
html.vietne-bez-ritinasanas, html.vietne-bez-ritinasanas body { overflow: hidden; }
@media (min-width: 1024px) {
  .vietne-izvelne .vietne-aizvert-rinda { display: none; }
}

/* ── Kājene ──────────────────────────────────────────────────────────────── */

.vietne-kaje {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--ui-a5);
  padding: var(--vt-kaje-atk); background: var(--vt-kaje);
  font-family: var(--vt-fonts); color: var(--vt-tinte);
}
.vietne-kaje ul { list-style: none; margin: 0; padding: 0; }
.vietne-kajes-saites { display: flex; flex-wrap: wrap; column-gap: var(--ui-a5); row-gap: var(--ui-a1); max-width: 920px; }
.vietne-kajes-saites a {
  font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--vt-tinte); text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .vietne-kajes-saites a:hover { text-decoration-line: underline; }
}
.vietne-soc { display: flex; gap: var(--ui-a1); }
.vietne-soc a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ui-skariens); height: var(--ui-skariens); color: var(--vt-tinte);
}
.vietne-soc svg { width: 20px; height: 20px; }

@media (max-width: 1023px) {
  .vietne-kaje {
    flex-direction: column; align-items: center; text-align: center;
    padding: var(--vt-kaje-atk-tel) var(--vt-kaje-atk-tel) calc(var(--ui-a6) + env(safe-area-inset-bottom));
  }
  .vietne-kajes-saites { justify-content: center; column-gap: var(--ui-a5); row-gap: 0; }
  /* Pirksta mērķis: rindas ~37 px kā Mozello kājenē, nevis 26 px teksta augstums. */
  .vietne-kajes-saites a { display: inline-block; padding: 6px 0; }
  .vietne-soc svg { width: 28px; height: 28px; }
}

/* ── Iegults režīms: rāmi rāda Mozello lapa ap iframe ────────────────────── */
html.iegults .vietne-galva, html.iegults .vietne-kaje { display: none; }