/* ─────────────────────────────────────────────────────────────
   Land360.gr — Marketing + Auth shared styles (light theme, v2)

   This file is intentionally compact. It owns:
     • Design tokens (colors, type, radii, shadows)
     • Base typography + html/body
     • Nav (sticky, hairline-on-scroll, hamburger ≤780px)
     • Buttons (primary, ghost, sm/lg)
     • Footer (4-col cascade → 2 → 1)

   Page-specific CSS lives inline in each .html for portability —
   the port team can drop the whole light-theme bundle into
   cesium_tour/public without reworking <link> paths.
   ───────────────────────────────────────────────────────────── */

/* ─── Type ─── Plus Jakarta Sans (body) + JetBrains Mono (numbers, URLs, eyebrows) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Surfaces — warm off-white limestone, not pure paper */
  --bg-0: #f6f4ef;             /* page bg base */
  --bg-1: #ffffff;             /* cards, elevated surfaces */
  --bg-2: #eef2f7;             /* soft tinted bg for inputs, banners */
  --bg-warm: #faf6ef;          /* subtle warm wash for highlight rows */

  /* Ink (text) — deep Aegean navy → softer body → light meta */
  --ink:      #0e1a2b;
  --ink-dim:  #4a5868;
  --ink-mute: #8492a3;

  /* Hairlines */
  --line:   #e5e7ec;
  --line-2: #cbd5e1;

  /* Aegean blue accent — deeper than the dark-theme #5eb3ff so it reads on light */
  --accent:      #2b6cb0;
  --accent-700:  #234e7d;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, white);   /* wash bg */
  --accent-wash: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 35%, transparent);

  /* Terracotta — warm secondary, used for plot outlines + popular-tier accents.
     Tweak-able to yellow (#ffd84a) or olive (#65794a) per README's reconsiders. */
  --plot:      #d97706;
  --plot-soft: color-mix(in srgb, var(--plot) 14%, white);

  /* Status */
  --err: #c53030;
  --ok:  #2f855a;

  /* Geometry */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows — soft, low-contrast (no dark-theme glows) */
  --shadow-1: 0 1px 0 rgba(14,26,43,.02), 0 8px 24px -12px rgba(14,26,43,.08);
  --shadow-2: 0 1px 0 rgba(14,26,43,.03), 0 24px 60px -24px rgba(14,26,43,.14);
  --shadow-3: 0 1px 0 rgba(14,26,43,.04), 0 36px 80px -28px rgba(14,26,43,.22);

  /* Type */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

/* ─── Base ─── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  background:var(--bg-0);
  color-scheme:light;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    /* sky-blue hint top edge — Aegean reference, very subtle */
    radial-gradient(1200px 700px at 50% -200px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, #c8d4e6 30%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-0), #faf8f3 50%, var(--bg-0));
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-0.005em;
  overflow-x:hidden;   /* belt-and-suspenders — README mobile req. */
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img,svg,video{display:block;max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* Eyebrows (defaults to mono caps in accent — tweakable on landing) */
.eyebrow{
  font:500 12px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

h1,h2,h3,h4{margin:0;letter-spacing:-0.022em;line-height:1.1;font-weight:600;color:var(--ink)}
h1{font-size:clamp(40px,5.4vw,68px);letter-spacing:-0.028em;font-weight:600;line-height:1.04}
h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-0.024em}
h3{font-size:20px}
p{margin:0;color:var(--ink-dim)}

.muted{color:var(--ink-dim)}
.ink-mute{color:var(--ink-mute)}

/* ─────────────────────── NAV ─────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav-inner{display:flex;align-items:center;gap:18px;padding:14px 0;min-height:64px}
.nav.is-scrolled{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
}

.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:18px;letter-spacing:-0.012em;color:var(--ink);
}
.brand-mark{
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(165deg, #ffffff, #e8eef5);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(14,26,43,.04), 0 0 0 4px rgba(43,108,176,.05) inset;
}
.brand-mark svg{width:18px;height:18px;color:var(--accent)}
.brand .num{color:var(--accent);font-weight:700}

.nav-links{display:flex;gap:2px;margin-left:14px}
.nav-links a{
  padding:9px 14px;border-radius:999px;color:var(--ink-dim);font-size:14px;font-weight:500;
  transition:color .15s, background .15s;
}
.nav-links a:hover{color:var(--ink);background:rgba(14,26,43,.04)}
.nav-links a.active{color:var(--ink)}
.nav .cta-row{display:flex;gap:8px;align-items:center;margin-left:auto}

/* Hamburger (≤780px) */
.nav-toggle{display:none}
.nav-mobile{display:none}
@media (max-width:880px){
  .nav-links{display:none}
  .nav .cta-row{display:none}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;
    width:44px;height:44px;            /* ≥44px touch target */
    background:#fff;
    border:1px solid var(--line-2);
    border-radius:10px;
    color:var(--ink);
    transition:background .15s, border-color .15s;
  }
  .nav-toggle:hover{background:var(--bg-2);border-color:var(--accent-line)}
  .nav-toggle svg{width:20px;height:20px}
  .nav-toggle .close-icon{display:none}
  .nav.is-open .nav-toggle .open-icon{display:none}
  .nav.is-open .nav-toggle .close-icon{display:block}

  .nav-mobile{
    display:flex;flex-direction:column;gap:2px;
    padding:0 24px;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .28s ease, opacity .2s ease, padding .25s ease;
  }
  .nav.is-open .nav-mobile{
    max-height:520px;opacity:1;padding:8px 24px 22px;
  }
  .nav-mobile a{
    padding:14px 14px;                 /* ≥44px touch target */
    border-radius:10px;
    color:var(--ink-dim);font-size:16px;font-weight:500;
    transition:background .15s, color .15s;
  }
  .nav-mobile a:hover{background:rgba(14,26,43,.04);color:var(--ink)}
  .nav-mobile a.cta-primary{
    background:var(--accent);color:#fff;text-align:center;font-weight:600;
    margin-top:10px;
    box-shadow:0 8px 22px -10px rgba(43,108,176,.5);
  }
  .nav-mobile a.cta-primary:hover{background:var(--accent-700);color:#fff}
  .nav-mobile hr{border:0;border-top:1px solid var(--line);margin:8px 0 4px}
}

/* ─────────────────────── BUTTONS ─────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:-0.005em;
  white-space:nowrap;
  transition:transform .12s ease, background .15s, border-color .15s, box-shadow .2s, color .15s;
  min-height:44px;       /* mobile touch */
}
.btn-primary{
  background:var(--accent);color:#ffffff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 12px 28px -12px rgba(43,108,176,.55);
}
.btn-primary:hover{
  background:var(--accent-700);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 32px -14px rgba(43,108,176,.55);
}
.btn-ghost{
  background:#fff;border:1px solid var(--line-2);color:var(--ink);
  box-shadow:0 1px 0 rgba(14,26,43,.02);
}
.btn-ghost:hover{background:var(--bg-2);border-color:#b9c4d3}
.btn-sm{padding:8px 14px;font-size:13px;min-height:38px}
.btn-lg{padding:14px 22px;font-size:15px;min-height:50px}
.arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(2px)}

/* ─────────────────────── FOOTER ─────────────────────── */
footer{
  padding:72px 0 56px;
  border-top:1px solid var(--line);
  margin-top:96px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.5));
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media (max-width:780px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-col h4{
  font:500 11.5px/1 var(--mono);
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-mute);margin-bottom:14px;font-weight:500;
}
.foot-col a{display:block;color:var(--ink-dim);font-size:14px;padding:6px 0;transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-brand p{color:var(--ink-dim);font-size:14px;margin-top:14px;max-width:38ch;line-height:1.6}
.foot-bot{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  color:var(--ink-mute);font-size:13px;gap:14px;flex-wrap:wrap;
}

/* ─── Utility ─── */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ─── Selection (Aegean blue) ─── */
::selection{background:rgba(43,108,176,.2);color:var(--ink)}