/* ============================================================
   LUCIA microsite - sdílené CSS pro index.html / spalicek.html / mfmom_compare.html / mfmom_present.html
   Barvy vycházejí z brandu aipberoun.cz (teal #00908E, amber #ECA14D,
   terakota #DF6336). Jeden zdroj pravdy pro tokeny/hlavičku/patičku/paprsek
   světla - ať se změna (jako barva lišty) neztratí na některé stránce.
   ============================================================ */

:root{
  /* Signál prohlížeči, že stránka umí obě témata sama (viz @media a [data-theme] bloky níže) -
     Chromium (Opera aj.) bez něj nad vlastním tmavým režimem pouští navíc svou heuristickou
     "vynutit tmavý web" rekolorizaci, což kolidovalo s .spotlight i s logo-light/logo-dark. */
  color-scheme: light dark;

  --paper: #FFFFFF;
  --paper-raised: #F7F8F8;
  --ink: #3C424F;
  --ink-dim: #58585A;
  --ink-faint: #8A8D93;
  --rule: rgba(60,66,79,0.13);
  --rule-strong: rgba(60,66,79,0.24);

  --accent: #00908E;
  --accent-deep: #007371;
  --accent-soft: rgba(0,144,142,0.09);
  --accent-soft-strong: rgba(0,144,142,0.16);

  --amber: #ECA14D;
  --amber-soft: rgba(236,161,77,0.12);
  --amber-soft-strong: rgba(236,161,77,0.20);

  --terracotta: #DF6336;
  --terracotta-soft: rgba(223,99,54,0.12);
  --terracotta-soft-strong: rgba(223,99,54,0.20);

  --ink-on-accent: #FFFFFF;

  /* Pevná barva lišt (hlavička/patička) - VĚDOMĚ NEZÁVISLÁ na light/dark tokenech níže, protože
     --accent/--accent-deep se ve tmavém režimu zesvětlují kvůli kontrastu textu JINDE na stránce
     (a na velké ploše lišty by pak vyšly jako jasně zelené, ne jako tmavý brand teal). Lišta nese
     bílé logo/text a musí zůstat stejně tmavá v obou režimech i na všech třech stránkách. */
  --bar-bg-1: #005957;
  --bar-bg-2: #00726F;

  --shadow: 0 20px 48px -22px rgba(60,66,79,0.28);
  --radius: 8px;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper: #1D2127;
    --paper-raised: #262B33;
    --ink: #EDEEF0;
    --ink-dim: #B7BAC0;
    --ink-faint: #82868D;
    --rule: rgba(237,238,240,0.13);
    --rule-strong: rgba(237,238,240,0.24);
    --accent: #2FC4C1;
    --accent-deep: #58D6D3;
    --accent-soft: rgba(47,196,193,0.12);
    --accent-soft-strong: rgba(47,196,193,0.20);
    --amber: #F0B268;
    --amber-soft: rgba(240,178,104,0.13);
    --amber-soft-strong: rgba(240,178,104,0.22);
    --terracotta: #F0885A;
    --terracotta-soft: rgba(240,136,90,0.14);
    --terracotta-soft-strong: rgba(240,136,90,0.22);
    --ink-on-accent: #10201F;
    --shadow: 0 20px 48px -22px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper: #1D2127;
  --paper-raised: #262B33;
  --ink: #EDEEF0;
  --ink-dim: #B7BAC0;
  --ink-faint: #82868D;
  --rule: rgba(237,238,240,0.13);
  --rule-strong: rgba(237,238,240,0.24);
  --accent: #2FC4C1;
  --accent-deep: #58D6D3;
  --accent-soft: rgba(47,196,193,0.12);
  --accent-soft-strong: rgba(47,196,193,0.20);
  --amber: #F0B268;
  --amber-soft: rgba(240,178,104,0.13);
  --amber-soft-strong: rgba(240,178,104,0.22);
  --terracotta: #F0885A;
  --terracotta-soft: rgba(240,136,90,0.14);
  --terracotta-soft-strong: rgba(240,136,90,0.22);
  --ink-on-accent: #10201F;
  --shadow: 0 20px 48px -22px rgba(0,0,0,0.6);
}
/* Explicitní opt-out ze systémového tmavého režimu - i nativní prvky (scrollbar, form controls)
   se pak mají tvářit světle, ne se řídit OS preferencí. */
:root[data-theme="light"]{ color-scheme: light; }

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}
::selection{ background: var(--accent-soft-strong); }
h1,h2,h3{ font-family: var(--font-display); text-wrap: balance; margin: 0; }
a{ color: var(--accent); }
button{ font-family: inherit; }
p{ margin: 0; }

/* Font pro slovo LUCIA - komerční New Science Bold Extended (Newlyn/Adobe Fonts). Soubor
   nemáme licencovaný k vložení, jméno se použije jen pokud je font aktivní lokálně (např. přes
   Adobe Fonts) - jinak padá zpět na Playfair Display beze změny vzhledu zbytku stránky. */
.lucia-font{ font-family: 'New Science Bold Extended', 'New Science', var(--font-display); }

/* Logo AiP Beroun - hlavička/patička mají STEJNÉ pozadí jako zbytek stránky (var(--paper)), takže
   podle světlého/tmavého režimu potřebují jinou variantu loga (černá na světlém pozadí, bílá na
   tmavém) - obě se vykreslí, CSS zobrazí jen tu správnou. */
.logo-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{ display:none; }
  :root:not([data-theme="light"]) .logo-dark{ display:block; }
}
:root[data-theme="dark"] .logo-light{ display:none; }
:root[data-theme="dark"] .logo-dark{ display:block; }

/* ---------------- brand top bar (stejná na všech 3 stránkách) ---------------- */
.brandbar{
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 16px 28px;
  display:flex; align-items:center; justify-content: space-between;
}
.brandbar .wordmark{
  font-weight: 700; font-size: 19px; letter-spacing: 0.02em;
  color: var(--ink); display:flex; align-items:center; gap: 26px; text-decoration: none;
}
.brandbar .wordmark img{ height: 60px; width: auto; }
.brandbar .wordmark .lucia-mark-svg{ height: 30px; width: auto; display:block; fill: var(--accent); }
.brandbar .wordmark .lucia{ color: var(--accent); letter-spacing: 0.14em; }
.brandbar .tag{ font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.04em; }

/* .brandbar-right - obaluje .tag + odkaz zpět na úvod, ať zůstanou jako jedna
   pravá skupina v `justify-content: space-between` layoutu brandbaru (jinak
   by se s .wordmark rozpočítaly na 3 rovnoměrné sloupce). */
.brandbar-right{ display:flex; align-items:center; gap: 18px; }
.brandbar .home-link{
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--ink-dim); text-decoration: none; white-space: nowrap;
}
.brandbar .home-link:hover{ color: var(--accent); }

@media (max-width: 640px){
  .brandbar{ flex-wrap: wrap; row-gap: 10px; }
  .brandbar-right{ width: 100%; justify-content: space-between; }
}

/* ---------------- footer (stejná na všech 3 stránkách) ---------------- */
footer.site{
  background: var(--paper);
  border-top: 1px solid var(--rule);
  margin-top: 60px; padding: 26px 28px;
  display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
footer.site .fw{ font-weight: 700; font-size: 14px; color: var(--ink); display:flex; align-items:center; gap: 10px; }
footer.site .fw img{ height: 22px; width: auto; }
footer.site .fw .lucia{ color: var(--accent); letter-spacing: 0.1em; }
footer.site .fw .dot{ color: var(--ink-faint); }
footer.site .fc{ font-size: 12px; color: var(--ink-faint); }
footer.site .flinks{ display:flex; gap: 16px; font-size: 12.5px; }
footer.site .flinks a{ color: var(--ink-faint); text-decoration: none; }
footer.site .flinks a:hover{ color: var(--accent); }

/* ---------------- paprsek světla sledující kurzor (celá stránka) ---------------- */
.spotlight{
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  mix-blend-mode: soft-light;
  background: radial-gradient(620px circle at var(--sx, 50%) var(--sy, 30%),
             rgba(255,255,255,0.85), rgba(255,255,255,0.28) 35%, transparent 62%);
  opacity: 0; transition: opacity 0.35s ease;
}
.spotlight.active{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .spotlight{ display: none; } }

/* ---------------- sekční nadpisy (sdílené) ---------------- */
.section-label{
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
  margin: 44px 0 6px;
}
.section-title{ font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.section-sub{ color: var(--ink-dim); max-width: 70ch; margin-bottom: 22px; font-size: 14.5px; }

/* ---------------- O službě (sdílené na všech 3 stránkách) ---------------- */
.about-service{
  margin-top: 60px; padding: 44px 0 8px; border-top: 1px solid var(--rule);
}
.about-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 22px; }
@media (max-width: 880px){ .about-grid{ grid-template-columns: 1fr; } }
.about-card{
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px 20px;
}
.about-card h3{ font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.about-card p{ font-size: 13.5px; color: var(--ink-dim); line-height: 1.65; margin: 0; }

/* ---------------- základní chip (rozšiřují si jednotlivé stránky) ---------------- */
.chips{ display:flex; flex-wrap:wrap; gap: 6px; }
.chip{
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--rule); color: var(--ink);
}