/* ΧΑΝΘ typefaces — Roboto (body/headings) + Roboto Flex (nav links).
   Self-host in production. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/*==================================================================
  Χ.Α.Ν.Θ. — FOUNDATION
  ------------------------------------------------------------------
  Tokens, reset, containers, utilities.
  Components and sections live in css/main.css.
  Responsive overrides live in css/media-queries.css.

  Every colour, size, width, gap, radius and duration used anywhere
  in the site is declared here as a variable — change it once here
  and it propagates. Nothing downstream hardcodes a value.
  ------------------------------------------------------------------
  1. VARIABLES
  2. FONT / TEXT UTILITIES
  3. BASICS / RESET
  4. CONTAINERS
  5. HELPERS
==================================================================*/


/*------ 1. VARIABLES ------*/
:root {

    /*==================== TYPEFACES ====================*/
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Roboto Flex', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-body: var(--font-sans);


    /*==================== FONT WEIGHTS ====================*/
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;


    /*==================== FONT SIZES ====================*/
    --size-12: 12px;
    --size-14: 14px;
    --size-15: 15px;
    --size-16: 16px;
    --size-17: 17px;
    --size-18: 18px;
    --size-20: 20px;
    --size-24: 24px;
    --size-26: 26px;
    --size-34: 34px;
    --size-42: 42px;


    /*==================== LINE HEIGHTS ====================*/
    --lh-1: 1;
    --lh-tight: 1.2;
    --lh-20: 20px;
    --lh-24: 24px;
    --lh-26: 26px;
    --lh-28: 28px;
    --lh-29: 29px;
    --lh-30: 30px;
    --lh-32: 32px;
    --lh-34: 34px;
    --lh-44: 44px;
    --lh-60: 60px;


    /*==================== LETTER SPACING ====================*/
    --track-snug: -0.015em;   /* headings */
    --track-normal: 0;
    --track-nav: 0.06em;      /* nav links */
    --track-wide: 0.135em;    /* page H1 lozenge */


    /*==================== COLOUR — RAW ====================*/
    /* Logo — sampled from the official artwork */
    --xanth-red: #e40513;
    --xanth-blue: #322884;

    /* Brand blues */
    --blue-900: #1e2f64;
    --blue-800: #2c2f6e;
    --blue-700: #332683;
    --blue-600: #2d308f;
    --blue-500: #3e5fab;
    --blue-400: #5f62aa;
    --blue-300: #5b5f8a;
    --blue-100: #d8d9e3;

    /* Reds & warms */
    --red-600: #e40513;
    --red-500: #db1a21;
    --crimson-500: #c63659;
    --clay-300: #ddaf9f;

    /* Neutrals */
    --white: #ffffff;
    --gray-050: #f9f9f9;
    --gray-100: #ededed;
    --gray-150: #e9e9e9;
    --gray-200: #d8d9e3;
    --gray-250: #dcdcdc;
    --gray-300: #c7c7c6;
    --gray-500: #8e8e8e;
    --gray-800: #262b2b;
    --gray-850: #1c1c1c;
    --gray-900: #191919;
    --gray-950: #121212;
    --ink-950: #0c1020;
    --black: #000000;

    /* Status */
    --green-500: #42b73e;


    /*==================== COLOUR — SEMANTIC ====================*/
    --brand-primary: var(--blue-600);
    --brand-primary-deep: var(--blue-700);
    --brand-accent: var(--red-500);

    --surface-page: var(--white);
    --surface-card: var(--white);
    --surface-card-dark: var(--blue-700);
    --surface-input: var(--gray-050);
    --surface-panel: var(--gray-050);
    --surface-selected: rgba(45, 48, 143, 0.07);
    --surface-muted: var(--gray-100);
    --surface-dark: var(--ink-950);

    --border-default: var(--gray-200);
    --border-subtle: rgba(216, 217, 227, 0.45);
    --border-strong: var(--gray-300);
    --border-column-rule: var(--gray-250);

    --text-body: var(--black);
    --text-heading: var(--brand-primary);
    --text-muted: var(--blue-300);
    --text-inverse: var(--white);
    --text-on-dark-muted: var(--gray-150);
    --text-nav: var(--blue-700);
    --text-link: var(--brand-primary);
    --text-link-hover: var(--blue-700);

    --state-success: var(--green-500);


    /*==================== SCRIMS & OVERLAYS ====================*/
    --scrim-modal: rgba(12, 16, 32, 0.72);
    --scrim-pill: rgba(12, 16, 32, 0.78);
    --text-on-dark-faded: rgba(255, 255, 255, 0.6);
    --watermark-opacity: 0.1;


    /*==================== SPACING SCALE ====================*/
    /* only the values the design actually uses */
    --sp-4: 4px;
    --sp-6: 6px;
    --sp-8: 8px;
    --sp-9: 9px;
    --sp-10: 10px;
    --sp-12: 12px;
    --sp-14: 14px;
    --sp-16: 16px;
    --sp-18: 18px;
    --sp-20: 20px;
    --sp-22: 22px;
    --sp-26: 26px;
    --sp-30: 30px;
    --sp-40: 40px;
    --sp-44: 44px;
    --sp-46: 46px;
    --sp-48: 48px;
    --sp-54: 54px;
    --sp-60: 60px;
    --sp-66: 66px;
    --sp-70: 70px;
    --sp-76: 76px;
    --sp-90: 90px;


    /*==================== LAYOUT WIDTHS ====================*/
    --w-content: 1447px;      /* main content column, all screens */
    --w-col-narrow: 1000px;   /* Λήμματα + legal inner column */
    --w-col-mid: 1160px;      /* Σεμινάρια inner column */
    --w-split-media: 640px;   /* Αρχική split image column */
    --w-modal: 980px;
    --w-lightbox: 1280px;     /* ceiling on an enlarged photo */

    /* Αρχική's opening section stops short of the column to give the wedge
       beside it room. Left-aligned, so it keeps the same left edge as the
       full-width sections below it. The backdrop is sized from it on every
       page, not just Αρχική — see the BACKDROP section of main.css */
    --w-lead: 1160px;

    --gutter: 40px;           /* below --w-content */
    --gutter-sm: 20px;        /* mobile */


    /*==================== BLOCK DIMENSIONS ====================*/
    --header-h: 118px;
    --main-pd-top: 40px;
    --main-pd-top-home: 76px;
    --main-pd-bottom: 90px;
    --footer-pd-y: 30px;
    /* the footer is opaque and paints over the backdrop, so the bottom wedge
       may run its full height — and does, which is why the footer is also held
       to this height with min-height. Redeclared where the footer restacks. */
    --footer-h: 116px;

    --logo-header-w: 82px;
    --logo-header-h: 58px;
    --logo-footer: 56px;
    --logo-mark-w: 34px;
    --logo-mark-h: 25px;

    --brush-h: 16px;
    --brush-w-lemmata: 190px;

    /* Heights the wedges read as clear space (main.css § 2). Both are floors,
       not measurements: the title lozenge is derived from the very tokens that
       draw it, so it cannot drift, and the opening section is held to its
       height with min-height. */
    --h-page-title: calc(
        var(--size-34) * var(--lh-tight) + var(--sp-4) + var(--brush-h)
    );
    --h-lead-min: 252px;      /* section title over five lines of --lead */

    --split-img-h: 420px;
    --photo-pair-w: 340px;
    --photo-pair-h: 330px;

    --card-pd: 40px 44px 44px;
    --card-watermark: 300px;
    --card-watermark-right: -70px;
    --card-watermark-bottom: -90px;
    --panel-pd: 48px 54px;
    --panel-column-gap: 70px;

    --thumb-h: 252px;
    --thumb-brightness: 0.82;
    --corner-flag-w: 96px;
    --corner-flag-h: 62px;
    --play-badge: 74px;
    --play-badge-arrow: 24px;
    --modal-stage-h: 552px;
    /* the dismiss disc both overlay layers hang in a corner */
    --close-disc: 40px;

    /* enlarged photo: how far it may fill the viewport, and the margin it keeps
       from the edges. Viewport units are right here — the ceiling is the screen,
       not a column */
    --lightbox-pd: 40px;
    --lightbox-img-h: 78vh;
    /* how far past its own pixels an enlarged photo may be stretched. Some of
       the sources are small — 1 would open those smaller than the page shows
       them, much more than this turns the enlargement into a blur */
    --zoom-max-scale: 1.6;
    /* the page image dims a touch on hover, so a zoom reads as a control */
    --zoom-hover-opacity: 0.88;

    --bullet-w: 10px;
    --bullet-h: 8px;

    /* decorative backdrop. The wedges take their size from the space the
       content leaves them (main.css § 2), so there is no width token here —
       only the proportions and finish that stay fixed at every size. */
    /* 1/tan60: a wedge narrows as it travels, so this is the reach it gains
       per pixel of empty height it crosses before it meets the copy */
    --tri-lift: 0.5774;
    --tri-rule-w: 1.12%;       /* of the wedge — the handoff's 14px of 1250 */
    --tri-rule-min: 4px;       /* …but never thinner than a line */
    /* nothing sits behind copy any more, so this is a finish, not a contrast
       concession — the handoff's 0.28 was the latter */
    --tri-opacity: 0.5;
    --tri-filter: grayscale(1) brightness(1.06) contrast(0.92);
    /* the wedge hangs half off the page edge, so its photo is scaled to the
       on-screen half — otherwise the athlete sits past the edge */
    --tri-photo-w-tr: 50%;
    /* how far down the wedge the dissolve under the header runs */
    --tri-fade-in: 38%;


    /*==================== RADII ====================*/
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 99px;
    --radius-round: 999px;


    /*==================== BORDERS & SHADOWS ====================*/
    --border-hairline: 1px solid var(--border-default);
    --ring-input: inset 0 0 0 1px var(--border-default);

    --shadow-card: 0 15px 35px 0 rgba(153, 168, 202, 0.15);
    --shadow-soft: 0 4px 12px 0 rgba(216, 217, 227, 0.45);
    --shadow-popup: 0 10px 30px 0 rgba(12, 16, 32, 0.18);
    --shadow-badge: 0 8px 24px rgba(12, 16, 32, 0.35);


    /*==================== MOTION ====================*/
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;


    /*==================== Z-INDEX ====================*/
    --z-backdrop: 0;
    --z-content: 1;
    --z-dropdown: 40;
    --z-modal: 50;
    --z-skip-link: 999;
}


/*------ 2. FONT / TEXT UTILITIES ------*/
.size-12 { font-size: var(--size-12); }
.size-14 { font-size: var(--size-14); }
.size-15 { font-size: var(--size-15); }
.size-16 { font-size: var(--size-16); }
.size-17 { font-size: var(--size-17); }
.size-18 { font-size: var(--size-18); }
.size-20 { font-size: var(--size-20); }
.size-24 { font-size: var(--size-24); }
.size-26 { font-size: var(--size-26); }
.size-34 { font-size: var(--size-34); }
.size-42 { font-size: var(--size-42); }

.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-bold { font-weight: var(--weight-bold); }
.weight-extrabold { font-weight: var(--weight-extrabold); }

.track-snug { letter-spacing: var(--track-snug); }
.track-wide { letter-spacing: var(--track-wide); }

.text-heading { color: var(--text-heading); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }


/*------ 3. BASICS / RESET ------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--size-18);
    font-weight: var(--weight-regular);
    line-height: var(--lh-30);
    color: var(--text-body);
    background-color: var(--surface-page);
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
}

body._no-scroll {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

picture {
    display: block;
    width: auto;
    height: auto;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: inherit;
}

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

/* accessibility - jumps past the nav */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-20);
    z-index: var(--z-skip-link);
    padding: var(--sp-10) var(--sp-20);
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    font-size: var(--size-14);
    transition: top var(--duration-base) var(--ease-standard);
}

.skip-link:focus {
    top: var(--sp-20);
    text-decoration: none;
}


/*------ 4. CONTAINERS ------*/
/* the 1447px page column, shrinking to gutters below that */
.container {
    width: min(var(--w-content), 100% - (2 * var(--gutter)));
    margin-inline: auto;
}

/* inner reading column — Λήμματα, legal */
.container-narrow {
    width: min(var(--w-col-narrow), 100%);
    margin-inline: auto;
}

/* inner column — Σεμινάρια */
.container-mid {
    width: min(var(--w-col-mid), 100%);
    margin-inline: auto;
}


/*------ 5. HELPERS ------*/
.flow {
    display: flex;
    flex-direction: column;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}