/* ══════════════════════════════════════════════════════════════
   Minimalist theme — warm monochrome, editorial serif headings.
   Světlý / tmavý režim se přepíná automaticky podle systému
   (prefers-color-scheme). Loaded AFTER style.css / elearning/style.css.
   Remove the <link> to theme-minimal.css to return to the old navy theme.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Newsreader';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokeny: světlý režim (výchozí) ─────────────────────────── */
:root {
  color-scheme: light dark;

  --canvas:          #FBFBFA;
  --canvas-alt:      #F7F6F3;
  --surface:         #FFFFFF;
  --hairline:        #EAEAEA;
  --hairline-strong: #D9D8D4;
  --row-hover:       #F1F0EC;
  --footer-bg:       #F1F0EC;
  --ink:             #111111;
  --on-ink:          #FFFFFF;
  --ink-2:           #37352F;
  --ink-3:           #5F5E5A;
  --muted:           #787774;
  --placeholder:     #A8A6A0;
  --accent:          #1F6C9F;
  --btn-hover:       #333333;
  --nav-bg:          rgba(251,251,250,0.85);
  --overlay:         rgba(17,17,17,0.4);
  --hover-shadow:    0 2px 8px rgba(0,0,0,0.04);

  --pastel-blue-bg:  #E1F3FE;  --pastel-blue-fg:  #1F6C9F;  --pastel-blue-bd:  #BFE0F3;
  --pastel-green-bg: #EDF3EC;  --pastel-green-fg: #346538;  --pastel-green-bd: #B9D3B7;
  --pastel-yellow-bg:#FBF3DB;  --pastel-yellow-fg:#956400;  --pastel-yellow-bd:#EBDDAE;
  --pastel-red-bg:   #FDEBEC;  --pastel-red-fg:   #9F2F2D;  --pastel-red-bd:   #EBC4C6;
  --purple-fg:       #6B4A9E;

  --ok: #346538;  --warn: #956400;  --bad: #9F2F2D;  --info: #1F6C9F;

  --serif: 'Newsreader', 'Lyon Text', 'Iowan Old Style', Georgia, serif;

  /* proměnné původního stylu → nové hodnoty */
  --navy:        var(--canvas);
  --navy-mid:    var(--canvas-alt);
  --navy-light:  var(--row-hover);
  --card-bg:     var(--surface);
  --card-border: var(--hairline);
  --white:       var(--ink);
  --gray:        var(--muted);
  --gray-light:  var(--ink-2);
  --blue:        var(--accent);
  --blue-bright: var(--accent);
  --blue-glow:   rgba(0,0,0,0.04);
  --success:     var(--ok);
  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      var(--hover-shadow);
}

/* ── Tokeny: tmavý režim (podle systému) ────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:          #141413;
    --canvas-alt:      #1A1A19;
    --surface:         #1C1C1B;
    --hairline:        #2C2C2A;
    --hairline-strong: #3D3D3A;
    --row-hover:       #232322;
    --footer-bg:       #0F0F0E;
    --ink:             #ECEBE7;
    --on-ink:          #141413;
    --ink-2:           #CFCDC6;
    --ink-3:           #A8A6A0;
    --muted:           #8E8C86;
    --placeholder:     #6B6963;
    --accent:          #6CB4E4;
    --btn-hover:       #D6D4CE;
    --nav-bg:          rgba(20,20,19,0.85);
    --overlay:         rgba(0,0,0,0.6);
    --hover-shadow:    0 2px 12px rgba(0,0,0,0.35);

    --pastel-blue-bg:  #16303F;  --pastel-blue-fg:  #7FC0EB;  --pastel-blue-bd:  #24485C;
    --pastel-green-bg: #1B2B1C;  --pastel-green-fg: #86C58A;  --pastel-green-bd: #2E4A30;
    --pastel-yellow-bg:#33290F;  --pastel-yellow-fg:#E0B04A;  --pastel-yellow-bd:#4D3D18;
    --pastel-red-bg:   #38201F;  --pastel-red-fg:   #EF8F8C;  --pastel-red-bd:   #562F2E;
    --purple-fg:       #B79AE6;

    --ok: #86C58A;  --warn: #E0B04A;  --bad: #EF8F8C;  --info: #7FC0EB;
  }
}

body { background: var(--canvas); color: var(--ink); }
::selection { background: var(--pastel-blue-bg); color: var(--ink); }

/* ── Typography ─────────────────────────────────────────────── */
.hero-title, .section-title, .success-title, .el-page-title,
.quiz-result-name, .lektor-map-title, .footer-brand h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-title { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.04; font-weight: 500; }
.hero-title .highlight {
  background: none; -webkit-text-fill-color: currentColor; color: var(--ink);
  font-style: italic;
}
.section-title { font-weight: 500; }
.section-label, .track-teaser-sub, .footer-col h4 { color: var(--gray); font-weight: 600; }
.stat-num { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.hero-sub, .section-sub, .step-desc { color: var(--gray-light); }

/* ── Buttons: solid ink / quiet outline, no gradient, no shadow ── */
.btn { border-radius: 6px; box-shadow: none; font-weight: 600; }
.btn-primary, .course-card.health .btn-primary, .btn-amber {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.btn-primary:hover, .course-card.health .btn-primary:hover, .btn-amber:hover {
  background: var(--btn-hover); border-color: var(--btn-hover); transform: none; box-shadow: none;
}
.btn-outline { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn-outline:hover { background: var(--row-hover); border-color: var(--ink); color: var(--ink); transform: none; }
.btn:active { transform: scale(0.98); }

/* ── Navigation & footer ───────────────────────────────────── */
nav, .el-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
}
.nav-logo-text, .mobile-menu a { color: var(--ink); }
.nav-links a { color: var(--gray-light); }
.nav-links a:hover { color: var(--ink); }
.nav-logo-text span { color: var(--gray); }
.nav-logo-icon { background: var(--ink); }
.hamburger span { background: var(--ink); }
.mobile-menu { background: var(--canvas); border-bottom: 1px solid var(--hairline); box-shadow: none; }
footer { background: var(--footer-bg); border-top: 1px solid var(--hairline); }
.footer-col a, .footer-brand p, .footer-bottom p { color: var(--gray); }
.footer-col a:hover { color: var(--ink); }

/* ── Sections: flat canvas, hairline dividers, no colour blobs ── */
.section { padding: 112px 0; }
.hero-bg, .antenna-card::before, .bundle-card::before, .benefit-card::before,
.ref-card::before, .steps-row::before { background: none; }
.hero-waves { opacity: 0.07; }
.hero-waves * { stroke: var(--ink); }
#hero { background: var(--canvas); }
section[style*="--navy-mid"] { background: var(--canvas-alt) !important; }
section[style*="--navy)"]    { background: var(--canvas) !important; }
#why, #courses { background: var(--canvas); }

/* ── Cards: 1px hairline, crisp radius, no shadow ───────────── */
.benefit-card, .course-card, .corp-card, .ref-card, .track-teaser-card,
.quiz-card, .price-box, .bundle-card, .form-wrap, .corp-form-wrap,
.el-card, .el-module, .el-login-card, .quiz-wrap, .antenna-card,
.lektor-map-wrap, .step, .acc-item, .el-quiz-start-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: none;
}
.course-card:hover, .benefit-card:hover, .corp-card:hover, .ref-card:hover,
.track-teaser-card:hover, .track-teaser-card.health:hover, .track-teaser-card.corp:hover,
.lektor-map-wrap:hover, .el-module:hover {
  transform: translateY(-2px);
  box-shadow: var(--hover-shadow);
  border-color: var(--hairline-strong);
}
.benefit-icon, .track-teaser-icon-wrap, .ref-avatar, .step-num {
  background: var(--pastel-blue-bg); color: var(--pastel-blue-fg);
  border: none; box-shadow: none;
}
.track-teaser-icon-wrap.health { background: var(--pastel-green-bg); }
.track-teaser-icon-wrap.corp   { background: var(--pastel-yellow-bg); }
.course-header, .corp-card-header, .corp-card.featured .corp-card-header,
.course-card.health .course-header, .price-box.featured, .course-card.health .price-box.featured,
.corp-cta-box, .instructor-badge, .instructor-badge.health {
  background: var(--canvas-alt); border-color: var(--hairline);
}
.course-card.health .course-band-tag, .instructor-badge.health,
.track-teaser-price.health, .track-label-inner.health { color: var(--pastel-green-fg); }
.track-teaser-card.health .track-teaser-list li::before { background: var(--pastel-green-fg); }
.track-teaser-price.corp, .corp-price, .corp-price-from { color: var(--pastel-yellow-fg); }
.bundle-badge, .corp-recommended-badge { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-fg); border: none; }
.ref-stars { color: var(--pastel-yellow-fg); }

/* ── Accordion (FAQ): no boxes, only bottom hairlines ───────── */
.acc-item { background: none; border: none; border-bottom: 1px solid var(--hairline); border-radius: 0; }
.acc-trigger { color: var(--ink); background: none; }
.acc-content { color: var(--gray-light); }

/* ── Forms ──────────────────────────────────────────────────── */
input, select, textarea, .corp-form-group textarea, .el-select {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: 6px;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: none; }
select option { background: var(--surface); color: var(--ink); }
label { color: var(--gray-light); }
input.error, select.error { border-color: var(--bad); }
.form-error { color: var(--bad); }
:focus-visible { outline-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--ink); }
.quiz-opt:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--hairline); }

/* ── Quiz ───────────────────────────────────────────────────── */
.quiz-opt { background: var(--surface); border: 1px solid var(--hairline); color: var(--ink); }
.quiz-opt span { color: var(--gray-light); }
.quiz-opt:hover { background: var(--canvas-alt); border-color: var(--hairline-strong); }
.quiz-opt.selected { background: var(--canvas-alt); border-color: var(--ink); box-shadow: none; }
.quiz-opt.selected span { color: var(--ink); }
.quiz-opt.correct, .quiz-opt.selected-correct { background: var(--pastel-green-bg); border-color: var(--pastel-green-bd); }
.quiz-opt.correct span, .quiz-opt.selected-correct span { color: var(--pastel-green-fg); }
.quiz-opt.selected-wrong { background: var(--pastel-red-bg); border-color: var(--pastel-red-bd); }
.quiz-opt.selected-wrong span { color: var(--pastel-red-fg); }
.verdict-ok  { background: var(--pastel-green-bg); color: var(--pastel-green-fg); }
.verdict-err { background: var(--pastel-red-bg);   color: var(--pastel-red-fg); }
.quiz-progress { background: var(--hairline); }
.quiz-progress-fill, .el-progress-fill { background: var(--ink); }
.quiz-result-icon { background: var(--pastel-blue-bg); color: var(--pastel-blue-fg); border: none; }
.quiz-type-badge, .quiz-type-badge.know { background: var(--pastel-blue-bg); color: var(--pastel-blue-fg); border: none; }
.quiz-type-badge.exp { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-fg); border: none; }
.quiz-card { box-shadow: none; }

/* ── E-learning ─────────────────────────────────────────────── */
.el-body { background: var(--canvas); color: var(--ink); }
.el-alert-info  { background: var(--pastel-blue-bg);   color: var(--pastel-blue-fg);   border-color: var(--pastel-blue-bd); }
.el-alert-warn  { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-fg); border-color: var(--pastel-yellow-bd); }
.el-alert-error { background: var(--pastel-red-bg);    color: var(--pastel-red-fg);    border-color: var(--pastel-red-bd); }
.el-quiz-result-badge.passed, .el-attempt-status.passed, .el-lesson-done-notice, .el-done-msg {
  background: var(--pastel-green-bg); color: var(--pastel-green-fg); border-color: var(--pastel-green-bd);
}
.el-done-msg { background: none; }
.el-progress-bar { background: var(--hairline); }
.el-level-chip.lvl2, .el-course-badge { background: var(--pastel-blue-bg); color: var(--pastel-blue-fg); border-color: var(--pastel-blue-bd); }
.el-module-title { background: none; }
.el-level-dot.lvl2 { background: var(--pastel-blue-fg); }
.el-main a:not(.btn):not(.el-module), .el-quiz-practice a, .el-card-desc a, .el-page-sub a, .el-breadcrumb a:hover {
  color: var(--accent);
}
.el-quiz-icon { display: flex; justify-content: center; color: var(--ink); }
.el-quiz-icon svg { width: 44px; height: 44px; }

/* ── Small print ────────────────────────────────────────────── */
.ctu-notice { background: var(--pastel-yellow-bg); border: 1px solid var(--pastel-yellow-bd); color: var(--pastel-yellow-fg); }
.hero-badge, .lektor-badge, .audience-pill {
  background: var(--pastel-blue-bg); color: var(--pastel-blue-fg); border: none;
}
.hero-elearning-note { color: var(--gray); }
.hero-elearning-note svg path { stroke: var(--pastel-green-fg); }
a { text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
button, input, select, textarea { font-family: inherit; }

/* ── Bez stínů a záře ───────────────────────────────────────── */
nav { box-shadow: none !important; }
.btn, .btn-primary, .course-card .btn-primary, .course-card.health .btn-primary,
.step-num, .course-card.health, .course-card.health:hover, .bundle-card { box-shadow: none !important; }
.course-card.health, .course-card.health .course-header { border-color: var(--hairline); }

/* ── Tmavý režim: obrázky ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .lektor-map-wrap img { filter: brightness(0.9); }
  .nav-logo-img, .el-nav img, .el-login-logo img { background: #FBFBFA; border-radius: 8px; padding: 2px; }
  .antenna-card img { background: #FBFBFA; border-radius: 16px; padding: 8px; }
}