/*
 * user.css — the GeoGreece identity, laid on top of Cassiopeia's template.css.
 *
 * Joomla loads this file automatically for the ACTIVE template, so a child
 * template gets its own copy at media/templates/site/cassiopeia_geogreece/css/
 * and never touches the parent's. Nothing here restyles Cassiopeia's structure;
 * it recolours it and adds the seven page classes Task 7's HTML uses.
 *
 * NO RAW COLOUR VALUES. Every colour is a var(--geo-...) from geo-tokens.css,
 * which is the app's palette copied value for value and checked by
 * tools/check_tokens.py. The single exception is white text on the sea-coloured
 * header band and on the numbered step markers: white is not a brand token, it
 * is the absence of one, and inventing --geo-white to launder it through the
 * token file would be worse. The proof rule is:
 *
 *     grep -E "#[0-9a-fA-F]{3,6}" user.css | grep -v "#fff"   -> prints nothing
 *
 * Touch targets: the menu links and the hero badge are held at 44px minimum
 * height on purpose. The audience arrives from an Android app, i.e. on a phone.
 */
@import url("geo-tokens.css");
:root { --cassiopeia-color-primary: var(--geo-accent); --cassiopeia-color-link: var(--geo-accent);
        --cassiopeia-color-hover: var(--geo-accent-strong); --cassiopeia-font-family-body: var(--geo-font);
        --cassiopeia-font-family-headings: var(--geo-font); }
body.site { background: var(--geo-bg); color: var(--geo-ink); font-family: var(--geo-font); font-size: 17px; line-height: 1.55; }
h1, h2, h3 { font-weight: 700; color: var(--geo-ink); letter-spacing: -0.01em; }
/* PROSE LINKS USE --geo-accent-strong (review rank 7). Since the app's default
   theme became KP-01's, --geo-accent moved: as a FILL under a white label it
   still passes (4.56:1), but as link TEXT it is 4.34:1 on --geo-bg and 4.14:1 on
   --geo-sea-mist -- both under the floor. The app's own contrast gate cannot
   see this, because in the app that token is a fill and only --geo-link is
   read as text. --geo-accent-strong is 7.64 / 7.01 / 6.68 on bg, panel and
   land, and needs no token change. Header links are scoped above. */
a { color: var(--geo-accent-strong); }
a:hover, a:focus { color: var(--geo-accent-strong); text-decoration-thickness: 2px; }
/* The header: see "ONE-ROW HEADER" at the foot of this file (template 1.4.0). */
/* THE HERO SHOWS THE GAME (review rank 1). At 375x812 the first screenful was
   a 163px header, a second 96px logo, a three-line brand heading and an
   unpressable button; the video began around y=662 and the fold cut it. The
   duplicated mark is a wordmark line now, the heading says what the app is
   FOR, and the clip is a round of the game rather than a tour that opens on a
   menu. Text above media on a phone; two columns from 992px. */
.geo-hero { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; padding: 1rem 0 1.5rem; }
.geo-hero__wordmark { margin: 0 0 .25rem; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--geo-mute); letter-spacing: .02em; }
.geo-hero h1 { font-size: 32px; line-height: 1.12; font-weight: 800; margin: 4px 0 12px; }
.geo-hero p.lead { font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--geo-mute); max-width: 34rem; margin: 0 0 12px; }
.geo-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.geo-hero__facts li { font-size: 14px; line-height: 20px; padding: 4px 8px; border-radius: var(--geo-radius-sm); background: var(--geo-panel2); color: var(--geo-ink); }
/* NOT A BUTTON. It was a pale rounded rectangle shaped exactly like something
   you press, with `aria-disabled` and `cursor: default` — the shape promised
   an action the wording then withdrew. It is a status LINE now, and the real
   action beneath it goes somewhere that exists. Wording unchanged. */
.geo-hero__status { margin: 0 0 8px; font-size: 15px; line-height: 22px; color: var(--geo-ink); }
.geo-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px;
  font-size: 16px; line-height: 24px; font-weight: 700; border-radius: var(--geo-radius-md);
  background: var(--geo-accent-strong); color: var(--geo-panel2); text-decoration: none; cursor: pointer; }
.geo-action:hover, .geo-action:focus { color: var(--geo-panel2); text-decoration: underline; }
.geo-action:focus-visible { outline: 3px solid var(--geo-accent-strong); outline-offset: 3px; }
@media (max-width: 575px) { .geo-action { width: 100%; } }
.geo-hero .geo-clip { max-width: 200px; margin: 0; }
@media (min-width: 992px) {
  .geo-hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding: 2rem 0; }
  .geo-hero h1 { font-size: 44px; line-height: 1.1; }
  .geo-hero .geo-hero__text { padding-top: 24px; }
  .geo-hero .geo-clip { max-width: 280px; }
}
.geo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.geo-card { background: var(--geo-land); border: 1px solid var(--geo-border); border-radius: var(--geo-radius-md); box-shadow: var(--geo-shadow-sm); padding: 1.1rem; display: flex; gap: .9rem; align-items: flex-start; }
.geo-card img { width: 44px; height: 44px; flex: 0 0 44px; }
.geo-card h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
.geo-chip--free { display: inline-block; background: var(--geo-highlight); color: var(--geo-ink); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; font-weight: 700; margin-left: .4rem; }
.geo-steps { counter-reset: step; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.geo-steps li { background: var(--geo-panel); border: 1px solid var(--geo-line); border-radius: var(--geo-radius-md); padding: 1rem 1rem 1rem 3.2rem; position: relative; }
.geo-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--geo-sea); color: #fff; font-weight: 700; display: grid; place-items: center; }
.geo-promise { background: var(--geo-sea-mist); border-left: 4px solid var(--geo-sea); padding: 1rem 1.2rem; border-radius: var(--geo-radius-sm); }
.container-footer, .geo-footer { background: var(--geo-panel2); color: var(--geo-mute); border-top: 1px solid var(--geo-line); font-size: .9rem; }
.geo-footer p { margin: .25rem 0; }
.back-to-top-link { background: var(--geo-accent); color: #fff; } /* white on the accent: the link's own colour IS the accent, so its arrow was invisible on its own background (measured 2026-09-11) */
@media (max-width: 991px) { .geo-cards, .geo-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .geo-cards, .geo-steps { grid-template-columns: 1fr; } .geo-hero { padding: 1.5rem 0; } }

/* ---------------------------------------------------------------- app media
 * The stills and the looping clips captured from the Android build (media spec
 * decisions 7, 9, 10). One phone frame, two shapes: .geo-clip holds a <video>
 * with its poster and .geo-shot holds a still, and both are a <figure> with a
 * one-line <figcaption>.
 *
 * The reduced-motion rule is the whole reason the still lives INSIDE the figure
 * rather than being the video's poster alone: `prefers-reduced-motion: reduce`
 * hides the <video> element outright — not merely its playback — and shows the
 * <img class="geo-clip__still"> in its place, so a reader who has asked the
 * system for no motion is served a picture and never a paused frame that a tap
 * could start moving. The still is a MODE screen, not the clip's first frame.
 */
.geo-hero--media { grid-template-columns: 1fr; }
@media (min-width: 992px) { .geo-hero--media { grid-template-columns: 1fr 320px; align-items: center; } }
.geo-clip, .geo-shot { margin: 0; text-align: center; }
.geo-clip video, .geo-clip__still, .geo-shot img { width: 100%; max-width: 300px; height: auto; border-radius: 18px; border: 1px solid var(--geo-line); box-shadow: var(--geo-shadow-sm); background: var(--geo-sea-mist); display: block; margin: 0 auto; }
.geo-clip__still { display: none; }
.geo-clip figcaption, .geo-shot figcaption { color: var(--geo-mute); font-size: .95rem; margin-top: .5rem; }
.geo-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.geo-shots--two { grid-template-columns: repeat(2, 1fr); max-width: 40rem; }
.geo-steps--media li { padding-top: 1rem; }
.geo-steps--media .geo-clip { margin-bottom: .75rem; }
@media (max-width: 991px) { .geo-shots { grid-template-columns: repeat(2, 1fr); } }
/* Polish decision 16: the `@media (max-width: 575px)` rule that dropped `.geo-shots` and
 * `.geo-shots--two` to ONE column is gone. Four phone screens stacked one per row made the
 * strip a scroll; two columns hold at every width, and the category cards below still go to
 * one column on a phone (the 575px rule further up, which is a different rule). */
@media (prefers-reduced-motion: reduce) { .geo-clip video { display: none; } .geo-clip__still { display: block; } }
/* The play button (2026-09-19). js/user.js adds a `.geo-clip__play` to each clip figure while
 * the preference is `reduce`; pressing it sets `.is-playing` on THAT figure, which brings its
 * video back (with the browser's controls) and retires its still and its button. Outside the
 * media query the button never shows, script or no script. It floats over the still's foot. */
.geo-clip__play { display: none; }
@media (prefers-reduced-motion: reduce) {
  .geo-clip.is-playing video { display: block; }
  .geo-clip.is-playing .geo-clip__still, .geo-clip.is-playing .geo-clip__play { display: none; }
  .geo-clip__play { display: inline-flex; align-items: center; gap: .45rem; position: relative; margin: -3.5rem auto 1rem; padding: .5rem 1.1rem; border: 0; border-radius: 999px; background: var(--geo-accent); color: #fff; font: inherit; font-weight: 600; box-shadow: var(--geo-shadow-sm); cursor: pointer; }
  .geo-clip__play:hover { background: var(--geo-accent-strong); }
  .geo-clip__play:focus-visible { outline: 3px solid var(--geo-ink); outline-offset: 2px; }
}

/* --------------------------------------------------- polish pass (spec 2026-09-10 polish)
 * hero facts, wave backdrop, stickers, the strip, the switcher — decisions 13, 14, 15, 17.
 * Tokens only, `#fff` the one literal, exactly as above.
 */
/* `z-index: 0` is not decoration, it is what makes the ::before below visible: Cassiopeia
 * gives `body.site` `position: relative`, so the body's own opaque background paints in the
 * positioned-with-z-auto layer, ABOVE the root stacking context's z-index:-1 layer where the
 * wave would otherwise land. Measured on the live page: without it, 55 wave-coloured pixels
 * in the hero's left strip; with it, 12378. Polish decision 14 anticipated this. */
.geo-hero--media { position: relative; z-index: 0; }
.geo-hero--media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geo-line); opacity: .35;
  -webkit-mask-image: url(../images/waves.svg); mask-image: url(../images/waves.svg); -webkit-mask-size: 80px 24px; mask-size: 80px 24px; }
.geo-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.geo-hero__facts li { background: var(--geo-panel2); color: var(--geo-ink); border-radius: var(--geo-radius-md); padding: .35rem .8rem; font-size: .95rem; }
.geo-card > img { width: 56px; height: 56px; padding: 8px; background: #fff; border-radius: 50%; box-shadow: var(--geo-shadow-sm); flex: none; }

/* ======================================================================
   READABLE MEASURE AND A SHARED TYPE SCALE (review rank 7)
   Desktop paragraphs ran to nearly the full 1246px content width, which
   reads as a raw article body rather than an edited page, and Cassiopeia's
   own `.lead { font-weight: 300 }` survived the body-weight override.
   ====================================================================== */
.container-component main { width: 100%; max-width: 1120px; margin-inline: auto; }
body.site .lead { font-size: 18px; line-height: 1.55; font-weight: 400; max-width: 68ch; color: var(--geo-mute); }
body.site p { margin-bottom: 16px; }
.geo-prose { max-width: 68ch; }
.geo-prose h2 { font-size: 24px; line-height: 1.25; margin: 28px 0 12px; }
.geo-promise p:last-child { margin-bottom: 0; }
.container-component h1 { font-size: 32px; line-height: 1.15; font-weight: 800; }
@media (min-width: 992px) { .container-component h1 { font-size: 40px; } }
/* ONE footer divider, not two, and its text aligned with the main column. */
.container-footer > .grid-child { width: 100%; max-width: 1152px; margin-inline: auto; padding: 24px 16px; box-sizing: border-box; }
.geo-footer { border-top: 0; width: 100%; font-size: 14px; line-height: 1.6; }

/* ======================================================================
   SECTION RHYTHM AND A HEADING SCALE (review ranks 5 and 7)
   Category headings, step headings and section headings all competed at
   inherited sizes, so nothing said which was the level above which.
   ====================================================================== */
.container-component h2 { font-size: 26px; line-height: 1.2; font-weight: 700; margin: 32px 0 16px; }
.container-component h3 { font-size: 20px; line-height: 1.25; font-weight: 700; }
@media (min-width: 992px) {
  .container-component h2 { font-size: 32px; margin-top: 48px; }
}
/* The closing prelaunch block: the same two controls as the hero, once, at the
   foot of the page -- not repeated after every section. */
.geo-close { margin: 32px 0 8px; }
.geo-close .geo-hero__status { margin-bottom: 8px; }
/* Two screenshots beside the text they illustrate on a wide screen, instead of
   a large unassigned right-hand area. */
@media (min-width: 992px) {
  .geo-shots--two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* ======================================================================
   ONE-ROW HEADER (template 1.4.0, design round 2026-09-23)
   The brand and the nav share ONE flex row, .geo-bar (index.php's fenced header
   block). The logo carries the name beside it; the menu items are pill buttons,
   not bare text links; the switcher is a compact two-segment control showing
   EL / EN (mod_languages `full_name: 0` in content/site.json). Below 1200px the
   menu folds behind the hamburger (collapse-metismenu.php says navbar-expand-xl)
   and opens as a panel UNDER the bar, so the bar itself stays one row, 64px, at
   every width. On a phone the switcher sits before the hamburger via `order`;
   in the source it stays after the <nav> (check-pages' switcher_after_menu).
   Shadows are color-mix()es of --geo-ink, so no colour enters that is not a token.
   ====================================================================== */
.container-header { background: var(--geo-sea-deep); position: relative; z-index: 20; }
.container-header > .geo-bar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; }
.geo-bar .navbar-brand { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 0; font-size: inherit; line-height: 1; }
.geo-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.geo-brand img { height: 40px; width: auto; }
.geo-brand__name { color: #fff; font-size: 21px; line-height: 1; font-weight: 800; letter-spacing: -.01em; }
.geo-brand:hover .geo-brand__name, .geo-brand:focus .geo-brand__name { text-decoration: underline; text-underline-offset: 4px; }
.geo-bar .container-nav { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }
.geo-bar .navbar { position: static; margin: 0; padding: 0; }
/* Every item in the bar is centred on the same line (2026-09-24, from the owner's phone: the
   hamburger sat 17px low and the logo 5px high). Two Cassiopeia rules outranked the ones
   above: `.container-header .container-nav nav { margin-top: 1em }` below 768px, and
   `.navbar-brand`'s 2rem font-size, whose line box stood the logo on a baseline above the
   middle. The brand is a centring flex box now, and this selector outranks the nav margin. */
.container-header > .geo-bar .container-nav nav.navbar { margin: 0; }
.container-header a:focus-visible, .container-header .navbar-toggler:focus-visible { outline: 3px solid var(--geo-highlight); outline-offset: 2px; box-shadow: none; }
/* the menu, as buttons */
.container-header .metismenu.mod-menu { display: flex; gap: 4px; margin: 0; padding: 0; }
.container-header .metismenu.mod-menu .metismenu-item { padding: 0; }
.container-header .metismenu.mod-menu .metismenu-item > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  color: var(--geo-panel2); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.container-header .metismenu.mod-menu .metismenu-item > a:hover { background: var(--geo-accent-strong); color: #fff; }
.container-header .metismenu.mod-menu .metismenu-item.active > a { background: var(--geo-accent-strong); color: #fff; box-shadow: inset 0 -3px 0 var(--geo-highlight); }
/* the switcher, as one control of two segments */
.geo-bar .mod-languages { flex: 0 0 auto; margin: 0; }
.geo-bar .mod-languages__list { display: flex; gap: 0; margin: 0; padding: 2px; list-style: none; border: 1px solid var(--geo-panel2); border-radius: 999px; }
.geo-bar .mod-languages__list > li { margin: 0; background: none; border-radius: 999px; }
.geo-bar .mod-languages a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 10px;
  border-radius: 999px; color: var(--geo-panel2); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.geo-bar .mod-languages a:hover { background: var(--geo-accent-strong); color: #fff; }
.geo-bar .mod-languages .lang-active a { background: var(--geo-panel2); color: var(--geo-sea-deep); }
/* the hamburger */
.container-header .navbar-toggler { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--geo-panel2); border-radius: 12px; color: var(--geo-panel2); }
@media (max-width: 1199.98px) {
  .geo-bar .mod-languages { order: 1; }
  .geo-bar .navbar { order: 2; }
  .container-header .navbar-collapse { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 16px; background: var(--geo-sea-deep);
    border-top: 1px solid var(--geo-accent-strong); box-shadow: 0 12px 24px color-mix(in srgb, var(--geo-ink) 18%, transparent); }
  .container-header .metismenu.mod-menu { flex-direction: column; max-width: 1120px; margin-inline: auto; }
  .container-header .metismenu.mod-menu .metismenu-item > a { display: flex; min-height: 48px; padding: 12px 16px; font-size: 17px; border-radius: 14px; }
}
@media (max-width: 380px) {
  .container-header > .geo-bar, .geo-bar .container-nav { gap: 6px; }
  .geo-brand { gap: 8px; } .geo-brand__name { font-size: 18px; } .geo-brand img { height: 32px; }
  .geo-bar .mod-languages a { min-width: 38px; padding: 0 6px; }
}

/* ======================================================================
   THE HERO, UNCROWDED (design round 2026-09-23)
   It held six things in one column: a wordmark, the heading, the lead, three
   fact chips, the status line and the button. The header carries the name now,
   so the wordmark is gone; the facts moved to a strip UNDER the hero; the status
   is a small badge BESIDE the button (it names a state, so it is shaped like a
   label -- a dot and a line of text, no fill that reads as pressable); the clip is
   larger and is a ROUND of the game (find.*), and the wave pattern lives only
   behind the phone, never behind the text.
   ====================================================================== */
.geo-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.geo-hero__cta .geo-hero__status, .geo-close .geo-hero__status { margin: 0; }
/* The two store buttons (the owner, 2026-09-27): not links until the listings exist, so a
   plain span with a default cursor. Our own two-line shape, not Apple's or Google's badge
   artwork, which their guidelines tie to a working store link. */
.geo-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.geo-store { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 5px 16px 6px; border-radius: var(--geo-radius-md); background: var(--geo-ink); color: #fff; cursor: default; }
.geo-store__soon { font-size: 12px; line-height: 15px; font-weight: 400; }
.geo-store__name { font-size: 18px; line-height: 22px; font-weight: 700; }
.geo-close { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
@media (max-width: 575px) { .geo-hero__cta, .geo-close { flex-direction: column; align-items: stretch; } .geo-store { flex: 1 1 0; align-items: center; } }
.geo-hero--media::before { display: none; }
.geo-hero--media { gap: 24px; }
.geo-hero--media .geo-clip { max-width: 240px; margin: 0 auto; position: relative; isolation: isolate; }
.geo-hero--media .geo-clip video, .geo-hero--media .geo-clip__still { max-width: 100%; border-radius: 28px; border: 6px solid var(--geo-ink);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--geo-ink) 22%, transparent); }
@media (min-width: 992px) {
  .geo-hero--media { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; padding: 32px 0 24px; }
  .geo-hero--media .geo-clip { max-width: 290px; }
  /* the wave, behind the phone only: a disc of pattern the phone stands in */
  .geo-hero--media .geo-clip::before, .geo-hero--media .geo-clip::after { content: ""; position: absolute; z-index: -1; width: 400px; height: 400px;
    left: 50%; top: 45%; transform: translate(-50%, -50%); border-radius: 50%; }
  .geo-hero--media .geo-clip::before { background: var(--geo-sea-mist); box-shadow: inset 0 0 0 1px var(--geo-line); }
  .geo-hero--media .geo-clip::after { background: var(--geo-line); opacity: .35;
    -webkit-mask-image: url(../images/waves.svg); mask-image: url(../images/waves.svg); -webkit-mask-size: 80px 24px; mask-size: 80px 24px; }
  .geo-hero--media .geo-hero__text { padding-top: 0; }
  .geo-hero h1 { font-size: 52px; line-height: 1.06; }
  .geo-hero p.lead { font-size: 20px; }
}
/* the facts, as a strip under the hero */
ul.geo-hero__facts.geo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 0; padding: 0; list-style: none;
  background: var(--geo-panel2); border: 1px solid var(--geo-line); border-radius: var(--geo-radius-md); overflow: hidden; }
ul.geo-facts li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px; background: none; border-radius: 0;
  font-size: 16px; line-height: 22px; font-weight: 600; color: var(--geo-ink); text-align: center; }
ul.geo-facts li + li { border-left: 1px solid var(--geo-line); }
ul.geo-facts li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--geo-sea); box-shadow: 0 0 0 4px var(--geo-sea-mist); }
@media (max-width: 575px) { ul.geo-hero__facts.geo-facts { grid-template-columns: 1fr; } ul.geo-facts li { justify-content: flex-start; padding: 12px 16px; }
  ul.geo-facts li + li { border-left: 0; border-top: 1px solid var(--geo-line); } }

/* ======================================================================
   THE ONE FULLY FREE CATEGORY, LARGER (design round 2026-09-23)
   Six equal cards said nothing about which one a family can play in full.
   Regions is a 2x2 card in the three-column grid (3x3 cells: the lead card plus
   the other five), a full-width card in the two-column grid, and a card with a
   larger sticker on a phone.
   ====================================================================== */
.geo-card--lead { flex-direction: column; gap: 14px; background: var(--geo-panel); border-color: var(--geo-line); padding: 1.6rem; }
.geo-card--lead > img { width: 88px; height: 88px; padding: 14px; }
.geo-card--lead h3 { font-size: 1.6rem; }
.geo-card--lead p { font-size: 1.1rem; }
@media (min-width: 992px) { .geo-card--lead { grid-column: span 2; grid-row: span 2; justify-content: center; } }
@media (min-width: 576px) and (max-width: 991px) { .geo-card--lead { grid-column: span 2; } }

/* ======================================================================
   THE DARK SCHEME (2026-10-03, the owner chose «Γεωφυσικός» dark)
   geo-tokens.css swaps every token under `prefers-color-scheme: dark`, so most of
   this file follows on its own. What is below is the handful of places where a rule
   pairs two tokens that are far apart in the light and close together in the dark,
   or pairs a token with `#fff`:
   - the header paints its links in --geo-panel2 on --geo-sea-deep. Light, that is a
     pale panel on a deep blue; dark, both are near-black. The links take --geo-ink.
   - hover, the active item and the store buttons put #fff on --geo-accent-strong or
     --geo-ink, both PALE in the dark. They take a dark panel with --geo-ink instead.
   - the free chip and the active language put --geo-ink on yellow and on panel2:
     pale on pale in the dark. They take --geo-bg.
   - the phone frame is --geo-ink (pale) and its shadow a mix of --geo-ink: in the
     dark that is a white bezel with a glow. The frame takes --geo-panel2 and the
     shadow --geo-bg.
   - --geo-sea-mist is foam in the dark (lighter than its sea), so the two surfaces
     that use it as a ground — the promise box and the disc behind the phone — take
     --geo-panel and --geo-sea.
   The pictures switch with the scheme in the markup (`<picture>` and `<source
   media>`, content/*/), not here.
   ====================================================================== */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  .container-header { border-bottom: 1px solid var(--geo-line); }
  .container-header .metismenu.mod-menu .metismenu-item > a,
  .geo-bar .mod-languages a,
  .container-header .navbar-toggler { color: var(--geo-ink); }
  .geo-bar .mod-languages__list, .container-header .navbar-toggler { border-color: var(--geo-line); }
  .container-header .metismenu.mod-menu .metismenu-item > a:hover,
  .container-header .metismenu.mod-menu .metismenu-item.active > a,
  .geo-bar .mod-languages a:hover { background: var(--geo-panel2); color: var(--geo-ink); }
  .geo-bar .mod-languages .lang-active a { background: var(--geo-ink); color: var(--geo-bg); }
  .geo-store { background: var(--geo-panel2); color: var(--geo-ink); box-shadow: inset 0 0 0 1px var(--geo-line); }
  .geo-chip--free { color: var(--geo-bg); }
  .geo-action, .geo-action:hover, .geo-action:focus { color: var(--geo-bg); }
  .back-to-top-link, .geo-clip__play { color: var(--geo-bg); }
  .geo-promise { background: var(--geo-panel); }
  .geo-hero--media .geo-clip video, .geo-hero--media .geo-clip__still {
    border-color: var(--geo-panel2); box-shadow: 0 18px 40px color-mix(in srgb, var(--geo-bg) 70%, transparent); }
  .container-header .navbar-collapse { box-shadow: 0 12px 24px color-mix(in srgb, var(--geo-bg) 60%, transparent); }
}
@media (prefers-color-scheme: dark) and (min-width: 992px) {
  .geo-hero--media .geo-clip::before { background: var(--geo-sea); }
}