/* NautiVia design language, v2 (Gal, 30 Sept 2026).
   One file for the whole family: nautivia.eu, croatianferries.com, nautivia.app.
   The canonical copy lives in nautivia-hub/design/; design/sync.sh copies it
   (with fonts and images) into the other two repos. Edit it here, never there.

   Taken from the Dribbble-style mock Gal picked: an airy Adriatic morning.
   Pale sky pages, white rounded cards floating on it, one teal for action,
   navy for words, painted coast illustrations, status told as soft pills. */

@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/nv/fonts/pjs-latin.woff2') format('woff2-variations');
  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:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/nv/fonts/pjs-latin-ext.woff2') format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* words */
  --nv-ink:#0f2a3d;        /* headlines, primary text   15.2:1 on white */
  --nv-ink-2:#3b5566;      /* body                        7.6:1 */
  --nv-mute:#56707f;       /* secondary, captions  4.5:1 on page */
  /* action */
  --nv-teal:#157f9c;       /* primary button fill, white text 4.6:1 */
  --nv-teal-ink:#0e6f8a;   /* teal as text / links        5.7:1 */
  --nv-teal-hi:#0f6f89;    /* hover */
  --nv-teal-soft:#e2f3f8;  /* secondary buttons, selected chips, icon wells */
  /* surfaces */
  --nv-sky:#e3f1f8;        /* hero sky, top of pages */
  --nv-page:#f4f9fc;       /* page background */
  --nv-card:#ffffff;
  --nv-line:#e1ebf1;       /* card borders, row rules */
  --nv-field:#f7fafc;      /* input wells */
  /* status: dot, pill background, pill text */
  --nv-ok:#2fa55c;   --nv-ok-bg:#dff3e6;   --nv-ok-ink:#1b6e3d;
  --nv-warn:#e0a13a; --nv-warn-bg:#fbeccb; --nv-warn-ink:#7f5300;
  --nv-bad:#df4a3c;  --nv-bad-bg:#fbe1dd;  --nv-bad-ink:#a3271c;
  --nv-off:#9aabb6;  --nv-off-bg:#edf2f5;  --nv-off-ink:#56707f;
  /* accent from the illustrations, used sparingly (a ferry stripe, a roof) */
  --nv-roof:#e0703a;
  /* shape */
  --nv-r-card:20px; --nv-r:14px; --nv-r-sm:10px; --nv-r-pill:999px;
  --nv-shadow:0 1px 2px rgba(15,42,61,.05),0 8px 28px -6px rgba(15,42,61,.10);
  --nv-shadow-hi:0 2px 4px rgba(15,42,61,.06),0 14px 36px -8px rgba(15,42,61,.18);
  /* type */
  --nv-font:'Jakarta',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --nv-h1:clamp(34px,5.4vw,68px);   /* hero, weight 800, -0.03em */
  --nv-h2:clamp(22px,2.2vw,28px);   /* card titles, 800 */
  --nv-h3:17px;                     /* row titles, 700 */
  --nv-body:16px; --nv-small:14px; --nv-tiny:12.5px;
  /* space */
  --nv-gap:clamp(12px,1.6vw,20px); --nv-pad:clamp(16px,2vw,28px); --nv-max:1180px;
}

/* ---------- components (all prefixed nv-, so they can sit next to old CSS) ---------- */
.nv{font-family:var(--nv-font);color:var(--nv-ink);background:var(--nv-page);-webkit-font-smoothing:antialiased}
.nv-wrap{max-width:var(--nv-max);margin:0 auto;padding:0 var(--nv-pad)}

/* header: mark left, links, language + saved right; sits on the hero sky */
.nv-hd{display:flex;align-items:center;gap:28px;min-height:64px}
.nv-mark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--nv-ink);text-decoration:none}
.nv-mark svg{width:26px;height:26px}
.nv-nav{display:flex;gap:26px}.nv-nav a{color:var(--nv-ink-2);text-decoration:none;font-weight:500;font-size:15px}
.nv-nav a:hover,.nv-nav a[aria-current]{color:var(--nv-ink)}
.nv-hd__end{margin-left:auto;display:flex;align-items:center;gap:18px}

/* hero: painted image, headline on the open sky */
.nv-hero{position:relative;background:var(--nv-sky) center/cover no-repeat}
.nv-h1{font-size:var(--nv-h1);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:0;color:var(--nv-ink)}
.nv-lead{font-size:clamp(16px,1.5vw,21px);font-weight:500;color:var(--nv-ink-2);margin:.5em 0 0;line-height:1.4}

/* card */
.nv-card{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);padding:var(--nv-pad)}
.nv-card__h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.nv-card__h h2,.nv-h2{font-size:var(--nv-h2);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
.nv-card__h .nv-meta{margin-left:auto}
.nv-meta{font-size:var(--nv-small);color:var(--nv-mute);font-weight:500}

/* buttons */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--nv-r);border:0;
  background:var(--nv-teal);color:#fff;font:600 16px/1 var(--nv-font);text-decoration:none;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(21,127,156,.55);transition:background .15s,transform .15s}
.nv-btn:hover{background:var(--nv-teal-hi)}.nv-btn:active{transform:translateY(1px)}
.nv-btn--soft{background:var(--nv-teal-soft);color:var(--nv-teal-ink);box-shadow:none}.nv-btn--soft:hover{background:#d3ecf4}
.nv-btn--line{background:#fff;color:var(--nv-teal-ink);box-shadow:inset 0 0 0 1.5px var(--nv-teal)}.nv-btn--line:hover{background:var(--nv-teal-soft)}
.nv-btn svg{width:20px;height:20px;flex:none}
.nv-link{color:var(--nv-teal-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* segmented control: Vehicle | On foot, One way | Return */
.nv-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--nv-r);background:var(--nv-field);border:1px solid var(--nv-line)}
.nv-seg>*{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--nv-r-sm);border:0;background:none;
  font:600 15px/1 var(--nv-font);color:var(--nv-ink-2);cursor:pointer}
.nv-seg>[aria-pressed=true],.nv-seg>[aria-selected=true],.nv-seg>:has(input:checked){background:var(--nv-teal);color:#fff;box-shadow:0 4px 12px -4px rgba(21,127,156,.6)}

/* fields: label above, icon well inside */
.nv-lbl{display:block;font-size:var(--nv-tiny);font-weight:600;color:var(--nv-mute);margin:0 0 6px}
.nv-field{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border:1px solid var(--nv-line);border-radius:var(--nv-r);background:#fff;
  font:600 16px/1.2 var(--nv-font);color:var(--nv-ink)}
.nv-field:focus-within{border-color:var(--nv-teal);box-shadow:0 0 0 3px rgba(21,127,156,.18)}
.nv-field svg{width:20px;height:20px;color:var(--nv-mute);flex:none}
.nv-field input,.nv-field select{flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;outline:0}
.nv-field input::placeholder{color:var(--nv-mute);font-weight:500}

/* status pill + dot; shape is carried by the word, colour is a second channel */
.nv-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--nv-off);flex:none}
.nv-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--nv-r-pill);
  font:700 12.5px/1 var(--nv-font);background:var(--nv-off-bg);color:var(--nv-off-ink);white-space:nowrap}
[data-s=clear] .nv-dot,[data-s=green] .nv-dot{background:var(--nv-ok)}
[data-s=clear] .nv-pill,[data-s=green] .nv-pill{background:var(--nv-ok-bg);color:var(--nv-ok-ink)}
[data-s=yellow] .nv-dot{background:var(--nv-warn)}[data-s=yellow] .nv-pill{background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
[data-s=red] .nv-dot{background:var(--nv-bad)}[data-s=red] .nv-pill{background:var(--nv-bad-bg);color:var(--nv-bad-ink)}

/* list row: dot | name + note | pill | chevron */
.nv-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:14px 2px;border-top:1px solid var(--nv-line);
  color:inherit;text-decoration:none}
.nv-row:first-of-type{border-top:0}
.nv-row b{font-weight:800;font-size:var(--nv-h3)}.nv-row small{font-weight:500;color:var(--nv-mute);font-size:14px;margin-left:6px}
.nv-row p{margin:2px 0 0;color:var(--nv-ink-2);font-size:14px}
.nv-row__end{display:grid;justify-items:end;gap:6px}

/* choice card: picture on top (or left on phones), title, one-line note */
.nv-choice{display:flex;flex-direction:column;border:1px solid var(--nv-line);border-radius:var(--nv-r);background:#fff;overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.nv-choice:hover{box-shadow:var(--nv-shadow-hi);transform:translateY(-2px);border-color:#cfe2ea}
.nv-choice img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.nv-choice b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;padding:12px 18px 0}
.nv-choice span{display:block;color:var(--nv-mute);font-size:14.5px;padding:4px 18px 16px}

/* phone tab bar */
.nv-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;border-top:1px solid var(--nv-line);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px -16px rgba(15,42,61,.3)}
.nv-tabs a{display:grid;justify-items:center;gap:3px;padding:9px 0 8px;color:var(--nv-mute);text-decoration:none;font:600 11.5px/1 var(--nv-font)}
.nv-tabs a svg{width:24px;height:24px}
.nv-tabs a[aria-current]{color:var(--nv-teal-ink);box-shadow:inset 0 -3px 0 var(--nv-teal)}

:where(.nv) :focus-visible{outline:3px solid var(--nv-teal);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.nv *{transition:none!important;animation:none!important}}