/* ==========================================================================
   Alfred — subpages · redesign 2026-07
   Ports the non-index pages onto the new design tokens (variables.css) and
   the shared chrome/atoms (base.css). Three concerns:
     · .al-subhero  — navy centred moment (hvala / hvala-rezervacija / 404)
     · .al-prose    — cream legal prose (zasebnost / pogoji / odstop)
     · .al-resv     — reservation form (rezervacija) — reuses posvet.css
                      panel/chip/submit language, un-scoped for #rezervacija
   This file REPLACES the old components.css for every non-index page.
   Depends on: variables.css + base.css. No JS.
   ========================================================================== */

/* ── logo link (shared topbar/footer atom, mirrors index) ──────────────── */
.al-logo-link { display: inline-flex; align-items: center; }

/* ════════════════════════════════════════════════════════════════════════
   1 · NAVY CENTRED MOMENT — hvala.html, hvala-rezervacija.html, 404.html
   Full-viewport, vertically centred, no topbar/footer chrome (clean moment).
   ════════════════════════════════════════════════════════════════════════ */
.al-subhero {
  min-height: 100vh;   /* fallback za Safari <15.4 */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 10vh, 96px);
}
.al-subhero .al-wrap { max-width: 660px; width: 100%; }

.al-subhero .al-logo { margin-bottom: clamp(28px, 4vw, 40px); }

.al-subhero h1 {
  font-size: var(--fs-h2-lg);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--cream);
  margin-bottom: 16px;
}
.al-subhero .al-lead { color: var(--cream-a82); margin-bottom: 0; }

.al-subhero .al-cta { margin-top: clamp(28px, 4vw, 40px); }

.al-subhero .al-steps-min {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 22px;
  font-size: var(--fs-body);
  color: var(--cream-a82);
}
.al-subhero .al-steps-min li { padding-left: 22px; position: relative; }
.al-subhero .al-steps-min li::before {
  content: counter(step, decimal) " ·";
  position: absolute;
  left: 0;
  color: var(--brass);
  font-weight: 600;
}
.al-subhero .al-steps-min { counter-reset: step; }
.al-subhero .al-steps-min li { counter-increment: step; }

.al-subhero .al-note {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: var(--fs-small);
  color: var(--cream-a70);
  max-width: 58ch;
}
.al-subhero .al-note a { color: var(--cream-a85); text-decoration: underline; text-underline-offset: 3px; }
.al-subhero .al-note a:hover { color: var(--cream); }

/* ════════════════════════════════════════════════════════════════════════
   2 · LEGAL PROSE — zasebnost.html, pogoji-rezervacije.html, odstop-obrazec.html
   Cream body, Playfair navy headings, graphite text, 820px measure,
   brass hairlines between sections. Restyle only — legal copy is canon.
   ════════════════════════════════════════════════════════════════════════ */
.al-prose .al-wrap { max-width: 820px; }

.al-prose h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--navy);
  margin-bottom: 14px;
}

.al-prose .al-meta {
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--graphite);
  opacity: .82;
  max-width: 68ch;
}

.al-prose h2,
.al-prose h3 {
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.25;
  color: var(--navy);
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--hairline);
  margin-bottom: 10px;
}

.al-prose p,
.al-prose li {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--graphite);
  max-width: 68ch;
}
.al-prose p { margin-bottom: 14px; }
.al-prose strong { color: var(--navy); font-weight: 600; }

.al-prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brass);
  transition: color var(--t-fast) var(--ease);
}
.al-prose a:hover { color: var(--brass); }

.al-prose ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 4px 0 14px;
}
.al-prose ul li { padding-left: 18px; position: relative; }
.al-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 1px;
  background: var(--brass);
}

/* odstop-obrazec: the fill-in card */
.al-prose .al-formcard {
  background: var(--cream-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  margin: 22px 0;
}
.al-prose .al-formcard p { margin-bottom: 14px; }
.al-prose .al-formcard p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════
   3 · RESERVATION FORM — rezervacija.html (navy)
   Reuses posvet.css panel/field/submit language. IDs consumed by js/form.js
   (#rezervacija, #r-paket, #r-submit, #placilo-blok, .form-status) are kept.
   ════════════════════════════════════════════════════════════════════════ */
.al-resv .al-wrap { max-width: 720px; }

.al-resv h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--cream);
  margin-bottom: 14px;
}
.al-resv .al-lead { color: var(--cream-a85); margin-bottom: 0; }

/* benefits list (5 sage-check items) */
.al-resv .al-benefits {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: clamp(28px, 4vw, 40px) 0;
  padding: clamp(24px, 3vw, 30px) 0;
  border-top: 1px solid var(--brass-a25);
  border-bottom: 1px solid var(--brass-a25);
}
.al-resv .al-benefits li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--cream-a85);
}
.al-resv .al-benefits .al-check { margin-top: 3px; width: 16px; height: 16px; }
.al-resv .al-benefits strong { color: var(--cream); font-weight: 600; }

/* fields — panel language from posvet.css */
.al-resv .al-field { margin-bottom: 20px; }
.al-resv .al-field > label {
  display: block;
  margin: 0 0 6px;
  font: 500 13px/1.4 var(--sans);
  color: var(--cream-a75);
}
.al-resv input[type="text"],
.al-resv input[type="email"],
.al-resv select {
  width: 100%;
  background: var(--navy-panel);
  border: 1px solid var(--brass-a40);
  border-radius: var(--radius);
  padding: 13px 15px;
  color: var(--cream);
  font: 400 16px/1.4 var(--sans);   /* 16px floor — no iOS zoom */
  min-height: 44px;
  color-scheme: dark;               /* native select arrow + autofill on navy */
}
.al-resv input:focus-visible,
.al-resv select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
  border-color: var(--brass);
}

/* consent checkbox */
.al-resv .al-check-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream-a82);
  cursor: pointer;
}
.al-resv .al-check-row input {
  accent-color: var(--brass);
  width: 16px; height: 16px;
  margin: 2px 0 0;
  flex: none;
}
.al-resv .al-check-row input:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.al-resv .al-check-row a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.al-resv .al-check-row a:hover { color: var(--brass); }

/* inline predračun note */
.al-resv .al-note-inline {
  margin-bottom: 20px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--cream-a82);
}
.al-resv .al-note-inline strong { color: var(--cream); font-weight: 600; }


/* submit */
.al-resv .al-submit {
  background: var(--brass);
  color: var(--navy);
  border: none;
  border-radius: var(--radius);
  font: 600 15px/1 var(--sans);
  padding: 15px 28px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.al-resv .al-submit:hover { background: var(--brass-hover); }
.al-resv .al-submit:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.al-resv .al-submit:disabled { opacity: .55; cursor: default; }

.al-resv .al-micro {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--cream-a70);
  max-width: 60ch;
}

/* status line — js/form.js toggles .form-status / .form-status.err */
.al-resv .form-status {
  margin-top: 12px;
  min-height: 1.3em;
  font: 600 14px/1.4 var(--sans);
  color: var(--cream-a82);
}
.al-resv .form-status.err { color: var(--amber); }

/* async confirmation block (#placilo-blok, unhidden by form.js) */
.al-resv .al-confirm {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(24px, 4vw, 32px);
  background: var(--sage-a09);
  border: 1px solid var(--sage-a42);
  border-radius: var(--radius);
}
.al-resv .al-confirm h2 {
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 10px;
}
.al-resv .al-confirm p { color: var(--cream-a85); font-size: var(--fs-body); }

@media (max-width: 640px) {
  .al-resv .al-submit { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   4 · SUBPAGE FOOTER — top hairline so the navy footer separates from a
   navy page (rezervacija) and reads as a distinct band on cream (legal).
   ════════════════════════════════════════════════════════════════════════ */
.al-footer--sub { border-top: 1px solid var(--brass-a25); }