/* ==========================================================================
   KAPLAN ENERGY — base.css
   Reset, design tokens, typography, utilities.
   Ύφος: τεχνικό / grid. Ψυχρή παλέτα, καθαρές γωνίες, monospace λεπτομέρειες.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }

ul[class], ol[class] {
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: inherit; }

/* --- Design tokens ------------------------------------------------------- */

:root {
  /* Χρώματα — ψυχρή, τεχνική παλέτα */
  --bg:           #f6f7f8;
  --bg-alt:       #eef1f2;
  --surface:      #ffffff;
  --ink:          #14181c;
  --ink-soft:     #4b545c;
  --ink-faint:    #858e96;
  --ink-invert:   #eef1f2;
  --accent:       #2e6e6b;
  --accent-deep:  #235553;
  --accent-wash:  #e9f1f0;
  --line:         #dfe3e6;
  --line-strong:  #c7cdd2;

  /* Τυπογραφία */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;

  --step--1: clamp(0.80rem, 0.78rem + 0.09vw, 0.85rem);
  --step-0:  clamp(0.97rem, 0.95rem + 0.14vw, 1.05rem);
  --step-1:  clamp(1.12rem, 1.06rem + 0.30vw, 1.31rem);
  --step-2:  clamp(1.36rem, 1.24rem + 0.58vw, 1.72rem);
  --step-3:  clamp(1.68rem, 1.44rem + 1.14vw, 2.38rem);
  --step-4:  clamp(2.05rem, 1.55rem + 2.42vw, 3.45rem);

  /* Ρυθμός & γεωμετρία */
  --measure:     66ch;
  --shell:       1220px;
  --shell-tight: 760px;
  --gutter:      clamp(1.15rem, 3.6vw, 2.75rem);
  --section-y:   clamp(4rem, 8vw, 7.5rem);
  --radius:      0px;          /* Καθαρές γωνίες — σκόπιμα μηδέν. */
  --border:      1px solid var(--line);

  /* Κινήσεις */
  --ease:    cubic-bezier(0.33, 0.72, 0.30, 1);
  --t-fast:  160ms;
  --t-base:  280ms;
  --t-slow:  620ms;
}

/* --- Σκελετός ------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 600; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.34; letter-spacing: -0.01em; }

p { max-width: var(--measure); }

strong { font-weight: 600; }

/* --- Utilities ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--tight { max-width: var(--shell-tight); }

.section { padding-block: var(--section-y); }

/* Ώστε η sticky κεφαλίδα να μην καλύπτει τον τίτλο μετά από κλικ σε άγκυρα. */
:target,
[id] { scroll-margin-top: 92px; }

/* Αριθμημένη ετικέτα ενότητας: 01 / ΣΧΕΤΙΚΑ */
.tag {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.tag::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 5rem;
  background-color: var(--line-strong);
}

.tag__num { color: var(--ink-faint); }

.lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* --- Προσβασιμότητα ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 200;
  padding: 0.7rem 1.3rem;
  transform: translateY(-140%);
  background-color: var(--ink);
  color: var(--ink-invert);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* --- Αποκάλυψη στο scroll ------------------------------------------------ */

/* Εφαρμόζεται μόνο με ενεργή JS (κλάση .js από inline script στο <head>). */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal {
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Σεβασμός στις προτιμήσεις κίνησης ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}