/* site/public.css
 *
 * The page's stylesheet, served as written: `tools.build.site` copies it into
 * site/dist/, which the proxy serves and which is never committed. It shares
 * nothing with the application's sheets; document.css's header holds the
 * conventions every sheet follows.
 */

/* ⚑ THREE faces, self-hosted. document.css ships upright and bold and says so;
 * this surface adds bold italic for the wordmark, the three one-word headings
 * and the claim — all at weight 700, which is why one italic face suffices. A
 * fourth (regular italic) would be needed the moment lighter text is
 * italicised. The url() resolves against this stylesheet's own address. */
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ⚑ TOKENS ARE NAMED FOR THEIR JOB, never their colour. That is why a band is
     one class: nothing below it knows which band it is in.

     The anchor is the owner's, carried and not derived. Every other stop below
     WAS derived here, against the floors tests/site/test_palette.py asserts. */
  --color-accent: #005c70;
  --color-on-accent: #ffffff;
  --color-ground: #ffffff;
  --color-text: #132226;
  --color-muted: #3a585f;
  /* A decorative separator. SC 1.4.11 does not reach it, so it has NO floor —
     since the lock it carries the accent, which puts it above --color-edge. */
  --color-rule: #005c70;
  /* A boundary that carries meaning: a focus ring, a control's edge. 3:1. */
  --color-edge: #4f7d87;

  --font-sans: "Noto Sans", ui-sans-serif, system-ui, Arial, sans-serif;

  /* A FLUID scale — a formula, not fixed steps. ⚑ Tracking does not transfer
     between faces: every value is tuned for Noto Sans, none copied. These four
     are the display sizes, and the rules below READ them: a clamp() re-typed
     beside its token is a second owner that drifts. */
  --text-wordmark: clamp(3.25rem, 11vw, 7.5rem);
  --text-sub: clamp(1.5rem, 3.6vw, 2.5rem);
  --text-point: clamp(2.25rem, 4.6vw, 3.25rem);
  --text-claim: clamp(1.875rem, 4vw, 2.875rem);
}

.band-dark {
  --color-ground: #0d3038;
  --color-text: #f6f8f9;
  --color-muted: #a5c4ca;
  --color-rule: #6dc2d5;
  --color-edge: #5b9fae;
  --color-accent: #6dc2d5;
  --color-on-accent: #0d3038;
}

/* ⚑ IDENTIFIERS NEVER BREAK. A hyphen is an ordinary break opportunity that
   `overflow-wrap` has no opinion about, so `nowrap` is the rule. A class of its
   own keeps this reasoning in one place. */
.no-break {
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The icons' motion, and the only motion on the page. ⚑ CSS and not a video,
   because the page has no script and nothing else could stop it for a reader
   who asked for less motion. */
@keyframes drift {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

.icon [data-part] {
  animation: drift 2.4s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .icon [data-part] {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════ the locked layout
 *
 * The page as the owner tuned it over ten rounds — the spacing, the seam split,
 * the alignments, the type sizes. Three rules are load-bearing and are the
 * reason the rest works: .point is a FULL-BLEED two-column grid rather than a
 * background behind the centred container, so the ground splits exactly where
 * the columns do; both halves lean on the seam, so the pair reads as one thing
 * meeting in the middle; and neither subheading nor any point paragraph carries
 * a max-width, because the lines break at their sentences' commas, authored in
 * the HTML, and a measure would break them somewhere else first.
 */

/* The reset the page was tuned on, its rules whose selectors match the page: no
   margin, padding or border on any element, headings and links that inherit their
   text, icons that are blocks. ⚑ BEFORE every rule of the page's own that names an
   element, and at the lowest specificity: `a` here and `a` below weigh the same, and
   the later one wins. Some of it is inert here — `::backdrop`, the headings' reset, the
   link's colour, `svg`'s display — because the rules below set the same again; it is
   carried so that the page computes what it did. ⚑ The link's `text-decoration` is NOT
   inert: it is what keeps the answers' and the footer's links without an underline,
   where no rule below says `none`. */
*,
::before,
::after,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: var(--font-sans);
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

summary {
  display: list-item;
}

svg {
  display: block;
  vertical-align: middle;
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); }

:focus-visible { outline: 2px solid var(--color-edge); outline-offset: 3px; }

.inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}

section { background: var(--color-ground); color: var(--color-text); }

/* ───────────────────────────────────────────────────────────── the bar */

.bar {
  background: var(--color-ground);
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.5rem, 6vw, 5rem);
}
/* ⚑ A Greek word is never cast into capitals — it loses its tonos under
   language-sensitive casing that not every browser applies. The gate greps this
   file for the property by name, which is why the property is not spelled
   here. */
.mark { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.bar a {
  font-size: 0.9375rem;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-edge);
}
.bar a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────── hero */

/* Two grounds and only two, and this is the first seam: the bar above carries
   the dark, and the heading block opens the light field that runs unbroken from
   here to the footer. */
.hero { padding: clamp(5rem, 15vw, 11rem) 0 clamp(5rem, 13vw, 9.5rem); }

.wordmark {
  margin: 0;
  font-size: var(--text-wordmark);
  font-weight: 700;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.04em;
  /* ⚑ THE ACCENT, not the ink. The mockup declared `color` twice here — accent
     first, ink appended last — so what it rendered was ink, while spec §2 says
     the wordmark takes the accent «not the ink» and says it twice. Both carry
     the same date, so neither can be ordered; the spec is the document that
     locks the page, and it wins. One line, if the owner's eye disagrees. */
  color: var(--color-accent);
}

/* The two subheadings are ONE type: same size, same family, same weight, same
   ink. Nothing distinguishes them but the two lit words and the gap between.
   ⚑ No max-width and no text-wrap here — the lines break where the sentences
   do, at their commas, and a measure would break them somewhere else first. */
.hook,
.lede {
  font-size: var(--text-sub);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-muted);
}

.hook { margin: clamp(2.75rem, 6vw, 4.5rem) 0 0; }

/* The two proper names, and only those: the registry's and the product's. */
.name { color: var(--color-text); }

.lede { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; }

/* ────────────────────────────────────────────────────── the three words */

/* Light ground above and below the three, so the alternating dark reads as a
   block of its own rather than running into the header or the claim. */
.three { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--color-ground); }

/* ⚑ Full-bleed halves, not a centred grid: the ground has to split exactly
   where the columns do, so the two must be the same division of the viewport
   rather than a background behind a narrower container. */
.point { display: grid; }
.point + .point { border-top: 2px solid var(--color-rule); }
@media (min-width: 46rem) {
  .point { grid-template-columns: 1fr 1fr; }
  .point--right .point__say { order: 1; }
  .point--right .point__media { order: 2; }
  .point--left .point__media { order: 1; }
  .point--left .point__say { order: 2; }
}

.point__say,
.point__media {
  display: grid;
  align-content: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--color-ground);
  color: var(--color-text);
}

/* Both halves lean on the seam rather than on the page's outer edges, so the
   pair reads as one thing meeting in the middle. */
@media (min-width: 46rem) {
  .point--right .point__say { justify-items: end; text-align: right; }
  .point--right .point__media { justify-items: start; }
  .point--left .point__media { justify-items: end; }
  .point--left .point__say { justify-items: start; text-align: left; }
}

/* The icon's frame. ⚑ What sits here is INLINE SVG and never an <img>:
   DECISIONS §31 keeps a fetched image off this surface, the policy omits
   img-src under default-src 'none', and markup is text a reviewer reads where
   a binary is not. The mockup's dashed placeholder stood here
   until §3 settled the form; it is gone because the icons arrived. */
.point__media span {
  display: grid;
  place-items: center;
  width: clamp(9rem, 22vw, 15rem);
  aspect-ratio: 1 / 1;
  color: var(--color-accent);
}
.point__media svg { display: block; width: 100%; height: auto; }

.point__say h2 {
  margin: 0 0 0.75rem;
  font-size: var(--text-point);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.point__say p {
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
}

/* ───────────────────────────────────────────── the claim, on its own ground */

.claim { padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
/* No comma in this one, so no authored break — the measure sets the lines. */
.claim h2 {
  margin: 0;
  font-size: var(--text-claim);
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.claim p {
  margin: 1.25rem 0 0;
  color: var(--color-muted);
  font-size: 1.125rem;
}
/* ⚑ Colour only. The two declarations that stop an identifier breaking live in
   `.no-break` and nowhere else — a hand copy here is a second owner of the one
   rule the page has about identifiers, and it would go on holding after that
   rule changed. The markup carries both classes. */
.claim .adam { color: var(--color-accent); }

/* ───────────────────────────────────────────────────────── ερωτήσεις */

.faq { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 2px solid var(--color-rule); }
.faq h2 {
  margin: 0 0 1.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.faq__item { border-top: 2px solid var(--color-rule); max-width: 44rem; }
.faq__item:last-of-type { border-bottom: 2px solid var(--color-rule); }
.faq__item summary {
  padding: 1.1rem 2rem 1.1rem 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  color: var(--color-muted);
  font-weight: 400;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item p { margin: 0 0 1.2rem; max-width: 40rem; color: var(--color-muted); }

/* ─────────────────────────────────────────────────────────── επικοινωνία */

.contact { padding: clamp(4rem, 9vw, 6.5rem) 0; border-top: 2px solid var(--color-rule); }
.contact h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.contact p { margin: 0 0 1.75rem; max-width: 34ch; color: var(--color-muted); }
.call {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
}
/* ⚑ The pressed shade is DERIVED, never a fourth hex: the accent 51% of the way
   to the page's ink reproduces the tuned colour to one unit on one channel, and
   keeps the ramp at the seven stops the roles need. A literal here would be a
   colour with no owner — which the gate refuses, and rightly.
   ⚑ BEHIND @supports. Holding var(), the declaration is invalid only when computed,
   and a browser without color-mix() then paints the button's ground TRANSPARENT —
   its white words on the white section. Guarded, that browser keeps the accent on
   hover instead. */
@supports (color: color-mix(in srgb, red, red)) {
  .call:hover { background: color-mix(in srgb, var(--color-accent) 51%, var(--color-text)); }
}

.foot {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--color-ground);
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.foot a { color: var(--color-accent); }