/*
Theme Name: Evangelatos Group
Theme URI: https://evangelatosgroup.gr
Author: Nondas Stavrakis
Description: Parent-brand theme for the Evangelatos Group, the family holding company above seven Ionian businesses. Bilingual English and Greek with no plugin, English at the root and Greek under /el/. Every string, image and link is editable from the Customizer or a post type.
Version: 2.8.3
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evangelatos
*/

/* =========================================================================
   TOKENS

   The palette is four supplied colours plus six derived. Four cannot run a
   site: two of the supplied colours fail as text on the white ground
   (teal 3.26:1, aqua 1.66:1), so each mid-tone needs a darker sibling.

   Every ratio in the comments was computed, not estimated. inc/styleguide
   recomputes them from these values at render time, so a colour edit here
   reports what it broke rather than failing quietly.
   ====================================================================== */

:root {

  /* ---- supplied ------------------------------------------------------ */
  --c-white:      #FDFFF7;   /* ground */
  --c-slate:      #2D3845;   /* body type, dark surfaces */
  --c-aqua:       #92D4CD;   /* accent on dark only */
  --c-teal:       #3E9C93;   /* display-size accent */

  /* ---- derived, each because a measurement demanded it ---------------- */
  --c-teal-text:  #2F7269;   /* 5.58:1 on white. teal, as body text on light */
  --c-teal-lit:   #6FC8BD;   /* 6.05:1 on slate. teal, as text on dark */
  --c-slate-soft: #54606E;   /* 6.36:1 on white. secondary text */

  /* the three division fields, increasing depth in one family */
  --c-deep-1:     #16202B;   /* mobility   */
  --c-deep-2:     #1C3A3A;   /* stay       */
  --c-deep-3:     #21514B;   /* experience */

  /* ---- roles --------------------------------------------------------- */
  --ground:        var(--c-white);
  --ink:           var(--c-slate);
  --ink-soft:      var(--c-slate-soft);
  --accent-light:  var(--c-teal-text);  /* the accent, on light grounds */
  --accent-dark:   var(--c-aqua);       /* the accent, on dark grounds  */
  --focus:         var(--c-slate);      /* not an accent: both are too light on white */

  /* ---- type ----------------------------------------------------------
     Manrope carries the display, Commissioner the body. Both carry Greek
     in the same family, which is the whole reason they were chosen: a
     Latin-only display face makes the two language versions read as two
     different brands. Verified against the Google Fonts API 2026-09-02.   */
  --font-display: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-body:    "Commissioner", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

  /* ---- scale ---------------------------------------------------------
     Tight, not airy. v1 ran 12rem section padding with 17px body and
     11px eyebrows, which read as unfinished rather than expensive.        */
  --pad-section: 4.5rem;
  --fs-body:     19px;
  --fs-caption:  15px;
  --fs-eyebrow:  13px;
  --lh-body:     1.6;

  --measure:     68ch;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --maxw:        1360px;

  --dur:         .5s;
  --ease:        cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 720px) {
  :root {
    --pad-section: 3rem;
    --fs-body:     17px;
  }
}

/* =========================================================================
   RESET
   ====================================================================== */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* The focus ring is slate rather than an accent: WCAG wants 3:1 against
   what is next to it, and both accents are too light on the white ground. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

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

.evg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-slate); color: var(--c-white);
  padding: .75rem 1.25rem;
}
.evg-skip:focus { left: 0; }

/* =========================================================================
   LAYOUT
   ====================================================================== */

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

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

.evg-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0 0 .75rem;
}

/* Two columns where the passage is long enough to warrant it. Never on
   a short paragraph, which would leave a stub column. */
.evg-cols-2 {
  column-count: 2;
  column-gap: 3rem;
}
@media (max-width: 860px) { .evg-cols-2 { column-count: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}