/* GUSTI E-map — base / reset / identity tokens
 * Palette + type taken from the GUSTI E-manual (Open Sans, blue #2999d6,
 * turquoise #54bec5, ink #3d3d3c). The map is always the hero.
 */
:root{
  --blue:#2999d6;
  --blue-d:#1f7fbb;
  --turq:#54bec5;
  --turq-d:#3aa7ae;
  --turq-wash:#eef8f8;
  --turq-wash-2:#e2f2f2;
  --navy:#1d2f60;          /* Interreg navy, used sparingly */
  --coral:#e2564b;         /* GUSTI wordmark accent, used very sparingly */
  --ink:#3d3d3c;
  --ink-soft:#6b7377;
  --line:#e7edee;
  --line-2:#dbe6e7;
  --paper:#ffffff;
  --wash:#f5f8f8;
  --grad: linear-gradient(90deg,#54bec5 0%,#2999d6 100%);

  --shadow:0 10px 34px -8px rgba(29,47,60,.22);
  --shadow-sm:0 2px 10px -2px rgba(29,47,60,.14);
  --ring:0 0 0 2px var(--turq);

  --radius:14px;
  --radius-sm:10px;
  --header-h:64px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--wash);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:var(--blue);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--turq);outline-offset:2px;border-radius:4px}

/* ---------- thin header ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 18px;background:var(--paper);
  border-bottom:1px solid var(--line);
  z-index:50;
}
.tb-left{display:flex;align-items:center;gap:16px;min-width:0;align-self:center}
.tb-left img{display:block}
.tb-left .interreg{height:29px;width:auto;flex:0 0 auto}          /* ~110% of previous */
.tb-brand{display:flex;align-items:center;padding-left:16px;border-left:1px solid var(--line);min-width:0}
.tb-brand .gusti-word{height:19px;width:auto}

.tb-nav{display:flex;align-items:center;gap:2px}
.tb-nav button{
  border:0;background:transparent;padding:8px 12px;border-radius:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  transition:color var(--dur),background var(--dur);
}
.tb-nav button:hover{color:var(--ink);background:var(--wash)}
.tb-nav button.active{color:var(--blue)}
.tb-nav button.active::after{
  content:"";display:block;height:2px;margin-top:5px;border-radius:2px;background:var(--grad);
}

.tb-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}

/* language switch — E-manual style (white pill = active) */
.lang{display:inline-flex;align-items:center;gap:2px;background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{
  border:0;background:transparent;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;color:var(--ink-soft);
  transition:all var(--dur) var(--ease);
}
.lang button.active{background:var(--paper);color:var(--blue);box-shadow:var(--shadow-sm)}

/* ---------- loading — GUSTI identity ---------- */
.loading{
  position:fixed;inset:var(--header-h) 0 0 0;display:grid;place-items:center;
  background:var(--wash);z-index:30;
}
.loading .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.loading .load-logo{width:124px;height:auto;display:block}
.loading .load-wave{width:188px;height:auto;display:block;overflow:visible}
.loading .load-wave .lw-glow{
  stroke-dasharray:90 210;stroke-dashoffset:300;
  animation:lw-sweep 2.4s var(--ease) infinite;
}
.loading span{font-size:12.5px;color:var(--ink-soft);letter-spacing:.03em}
.loading .err{max-width:340px;text-align:center;line-height:1.55;color:var(--coral);font-size:13px}
@keyframes lw-sweep{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .loading .load-wave .lw-glow{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}