/* SEOMC S1.2.01.004 (ZONE:PUBLIC) - zakladni styl verejne casti.
   Vlastni soubor, aby verejna cast nezavisela na monolitu admin.css a aby
   dalsi tasky ZONE:PUBLIC (hero, progress, consent) mely kam psat.
   Barvy jsou stejne jako v shellu administrace: #1767e8 a #0f9f8f. */

:root {
  --seomc-primary: #1767e8;
  --seomc-teal: #0f9f8f;
  --seomc-text: #172033;
  --seomc-muted: #5b6577;
  --seomc-line: #e2e7ef;
  --seomc-bg: #f4f6fa;
}

* { box-sizing: border-box; }

body.seomc-page {
  margin: 0;
  background: var(--seomc-bg);
  color: var(--seomc-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.seomc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--seomc-line);
  background: #fff;
  padding: 14px clamp(16px, 4vw, 40px);
}

.seomc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.seomc-brand__mark {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.seomc-brand__name {
  font-size: 18px;
  letter-spacing: 0.02em;
}

.seomc-main {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 40px);
}

.seomc-intro__title {
  margin: 0 0 12px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
}

.seomc-intro__lead {
  margin: 0 0 24px;
  max-width: 62ch;
  color: var(--seomc-muted);
  font-size: clamp(16px, 2.2vw, 19px);
}

.seomc-intro__slot {
  border: 1px dashed var(--seomc-line);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
}

.seomc-intro__note {
  margin: 0;
  color: var(--seomc-muted);
}

.seomc-footer {
  border-top: 1px solid var(--seomc-line);
  padding: 20px clamp(16px, 4vw, 40px);
  color: var(--seomc-muted);
  font-size: 14px;
}

.seomc-footer p {
  margin: 0;
}

@media (max-width: 480px) {
  .seomc-brand__mark {
    width: 32px;
    height: 32px;
  }

  .seomc-brand__name {
    font-size: 16px;
  }
}

/* --- Trídy, které používají hotové šablony veřejné části --------------------
   home.php (seznam bodů a stavová věta), error.php (skutečná 404) a partial
   login_cta.php ze zóny AUTH. Partial vlastní jen třídy a data-* selektory,
   styl podle pravidla koordinátora vlastní ZONE:PUBLIC - proto je zde. */

.seomc-intro__points {
  margin: 0 0 24px;
  padding-left: 22px;
  max-width: 68ch;
  color: var(--seomc-text);
}

.seomc-intro__points li {
  margin-bottom: 6px;
}

.seomc-intro__status {
  margin: 0;
  border-left: 3px solid var(--seomc-teal);
  padding: 10px 14px;
  background: #fff;
  color: var(--seomc-muted);
}

.seomc-error {
  max-width: 62ch;
}

.seomc-error__title {
  margin: 0 0 12px;
  font-size: clamp(26px, 4.5vw, 38px);
  line-height: 1.2;
}

.seomc-error__text {
  margin: 0 0 20px;
  color: var(--seomc-muted);
}

.seomc-error__actions {
  margin: 0;
}

.seomc-error__link,
.seomc-login-cta__link {
  display: inline-block;
  border-radius: 10px;
  background: var(--seomc-primary);
  padding: 10px 18px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.seomc-error__link:hover,
.seomc-error__link:focus-visible,
.seomc-login-cta__link:hover,
.seomc-login-cta__link:focus-visible {
  background: #1250b8;
}

.seomc-login-cta {
  margin-top: 28px;
  border-top: 1px solid var(--seomc-line);
  padding-top: 20px;
}

.seomc-login-cta__note {
  margin: 10px 0 0;
  color: var(--seomc-muted);
  font-size: 15px;
}

/* Viditelny fokus je pristupnost, ne dekorace - klavesnici jinak neni poznat,
   kde uzivatel je. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--seomc-teal);
  outline-offset: 2px;
}

/* --- S1.2.02.001 (ZONE:PUBLIC): fullscreen hero se vstupem URL -------------
   Akceptace zni "URL input + dominantni CTA viditelne nad foldem desktop/mobil",
   takze cely vypocet vysky je tady, ne v HTML.

   Proc dve deklarace min-height pod sebou:
   `100vh` je na mobilu vyska okna VCETNE listy prohlizece, ktera se pri
   scrollovani schova - hero by tedy byl vyssi nez viditelna plocha a tlacitko
   by spadlo pod fold. `100svh` (small viewport height) meri stav s VYSUNUTOU
   listou, tedy nejmensi jistou plochu. Starsi prohlizece druhou deklaraci
   ignoruji a pouziji prvni, novejsi vezmou tu druhou. */

.seomc-page--home .seomc-main {
  max-width: none;
  padding: 0;
}

.seomc-below {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 40px);
}

.seomc-hero {
  display: flex;
  align-items: center;
  /* 70 px = vyska hlavicky (14 + 40 + 14 + 1 px ramecek). */
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  background: linear-gradient(180deg, #fff 0%, var(--seomc-bg) 100%);
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px);
}

.seomc-hero__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.seomc-hero__eyebrow {
  margin: 0 0 10px;
  color: var(--seomc-teal);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seomc-hero__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.1;
}

.seomc-hero__lead {
  margin: 0 0 28px;
  max-width: 58ch;
  color: var(--seomc-muted);
  font-size: clamp(16px, 2.2vw, 19px);
}

.seomc-hero__form {
  margin: 0;
}

/* Popisek je viditelny, ne jen pro odectacky: uzivatel ma videt, co se po nem
   chce, i kdyz uz do pole zacal psat a placeholder zmizel. */
.seomc-hero__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.seomc-hero__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.seomc-hero__input {
  flex: 1 1 260px;
  min-width: 0;
  border: 2px solid var(--seomc-line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  color: inherit;
  font-family: inherit;
  /* 16 px je minimum, pri kterem iOS Safari NEzoomuje stranku po kliknuti do
     pole. Mensi pismo by na mobilu rozhodilo cely fold. */
  font-size: 16px;
}

.seomc-hero__input:hover {
  border-color: #c6d0e0;
}

.seomc-hero__input:focus {
  border-color: var(--seomc-primary);
}

/* S1.2.02.002: vadny vstup se pozna i podle ramecku, ne jen podle textu.
   Vazba je na aria-invalid, ktere stejne musi byt kvuli odectackam - jedna
   informace, dva smysly. Barva NENI jediny nosic informace: hlaska pod
   polem rika totez slovy. Zamerne se nepouziva :invalid, ta by se u
   type="url" rozsvitila i tam, kde nase pravidla vstup pousti. */
.seomc-hero__input[aria-invalid="true"] {
  border-color: #b42318;
}

.seomc-hero__input[aria-invalid="true"]:focus {
  border-color: #b42318;
}

.seomc-hero__submit {
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: var(--seomc-primary);
  padding: 14px 28px;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.seomc-hero__submit:hover,
.seomc-hero__submit:focus-visible {
  background: #1250b8;
}

.seomc-hero__hint {
  margin: 10px 0 0;
  color: var(--seomc-muted);
  font-size: 14px;
}

/* S1.2.02.004 - rychla volba typu testu.

   Dve karty vedle sebe, kazda s vlastnim nativnim radiem. Nativni prvek se
   NESKRYVA: kdyz se schova a nakresli znovu, prijde uzivatel o klavesovou
   obsluhu sipkami, o vysoky kontrast a o rezim vynuceneho baroveho schematu.
   accent-color obarvi puvodni prvek bez toho vseho. */
.seomc-hero__types {
  margin: 14px 0 0;
  /* Fieldset ma vychozi ramecek, padding i min-width: min-content - vsechno
     tri by tady rozbilo rozvrzeni, proto se resetuji. */
  border: 0;
  padding: 0;
  min-width: 0;
}

.seomc-hero__types-legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
}

.seomc-hero__type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 260 px je stejna zakladna jako u vstupniho pole vyse, takze se obe karty
   zalomi pod sebe ve stejnou chvili, kdy se pod sebe zalomi pole s CTA. */
.seomc-hero__type {
  display: flex;
  flex: 1 1 260px;
  align-items: flex-start;
  gap: 10px;
  border: 2px solid var(--seomc-line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
}

.seomc-hero__type:hover {
  border-color: #c6d0e0;
}

/* Ramecek reaguje i na klavesnici, ne jen na mys - focus-within obarvi kartu
   ve chvili, kdy je fokus na radiu uvnitr. Vlastni obrys prohlizece se
   nepotlacuje. */
.seomc-hero__type:focus-within {
  border-color: var(--seomc-primary);
}

.seomc-hero__type-input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--seomc-primary);
}

.seomc-hero__type-text {
  display: block;
}

.seomc-hero__type-label {
  display: block;
  font-weight: 600;
}

.seomc-hero__type-note {
  display: block;
  margin-top: 2px;
  color: var(--seomc-muted);
  font-size: 13px;
}

/* Zvyrazneni vybrane karty je NAVIC k zaskrtnutemu radiu, ne misto nej:
   :has() starsi prohlizec ignoruje a uzivatel tam pozna vybranou moznost
   podle samotneho radia. Barva tedy neni jediny nosic informace. */
.seomc-hero__type:has(.seomc-hero__type-input:checked) {
  border-color: var(--seomc-primary);
  background: #f5f9ff;
}

/* Prazdne misto pro S1.2.02.002 a S1.2.02.006 nesmi zabirat vysku, dokud
   je prazdne - jinak by uz ted tlacilo obsah pod fold. :empty to zaridi bez
   jedineho radku JS. */
.seomc-hero__error:empty,
.seomc-hero__progress:empty {
  display: none;
}

/* S1.2.02.005 - sdeleni, ze verejne spousteni testu je zatim vypnute (D-022).

   Zamerne to NENI cervena chybova hlaska: neni to chyba navstevnika a nic
   neudelal spatne. Tlumeny ramecek drzi stejny jazyk jako .seomc-hero__status
   nize (potvrzeni), jen o tri pixely tenci, aby nesoutezil s tlacitkem. */
.seomc-hero__notice {
  margin: 12px 0 0;
  border: 1px solid var(--seomc-line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--seomc-muted);
  font-size: 14px;
}

.seomc-hero__error {
  margin: 10px 0 0;
  color: #b42318;
  font-weight: 600;
}

.seomc-hero__progress {
  margin-top: 16px;
}

/* S1.2.02.006 (ZONE:PUBLIC) - prubeh bezici analyzy.

   Loader je kolecko vedle vety, ne pres celou stranku: analyza bezi na
   pozadi a navstevnik ma dal videt, jakou adresu zadal. Sirka pruhu
   odpovida skutecne hotovym krokum ze serveru - nic se neanimuje samo. */
.seomc-progress {
  margin: 16px 0 0;
  border: 1px solid var(--seomc-line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

.seomc-progress__line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--seomc-text);
  font-size: 15px;
  font-weight: 600;
}

/* Zastaveny test neni cervena chyba navstevnika - je to sdeleni, ze se
   nedokoncil. Barvu proto nese tlumeny text, ne poplasny ramecek. */
.seomc-progress__line--stopped {
  color: var(--seomc-muted);
  font-weight: 500;
}

/* S1.2.02.007 - nabidka po nedokoncenem testu.

   Sekundarni tlacitko, ne druhe CTA: hlavni akci stranky porad drzi
   "Spustit test" v hero formulari a dve stejne vyrazna tlacitka vedle sebe
   by clovek musel porovnavat. Vzhled je proto obrysovy, ale dotykova
   plocha zustava plnohodnotna (min-height 44 px) - je to jedina cesta,
   jak se z konce bez vysledku dostat dal.

   Tlacitko vykresluje skript UVNITR progress kontejneru, tedy mimo <form>,
   a ma type="button" - nemuze tedy odeslat formular. */
.seomc-progress__again {
  display: inline-block;
  margin: 10px 0 0;
  border: 1px solid var(--seomc-primary);
  border-radius: 12px;
  background: #fff;
  padding: 10px 20px;
  min-height: 44px;
  color: var(--seomc-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.seomc-progress__again:hover,
.seomc-progress__again:focus-visible {
  background: var(--seomc-bg);
}

.seomc-progress__spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--seomc-line);
  border-top-color: var(--seomc-primary);
  border-radius: 50%;
}

.seomc-progress__bar {
  margin-top: 10px;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--seomc-bg);
}

.seomc-progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--seomc-teal);
}

.seomc-hero__status {
  margin: 16px 0 0;
  border-left: 3px solid var(--seomc-teal);
  padding: 10px 14px;
  background: #fff;
  color: var(--seomc-muted);
}

.seomc-hero__trust {
  margin: 20px 0 0;
  color: var(--seomc-muted);
  font-size: 14px;
}

/* Na nizkych oknech (napr. notebook na sirku 1366x600 nebo mobil na sirku)
   je pevna vyska na skodu - hero by se nevesel a text by se orezal. Tady se
   proto vyskove omezeni pousti a stranka normalne roluje. */
@media (max-height: 560px) {
  .seomc-hero {
    min-height: 0;
  }
}

/* Hranice 480 px je stejna jako u hlavicky vyse, kde se logo zmensi na 32 px
   a hlavicka tim klesne na 62 px. Kdyby se tenhle dotaz spustil driv (napr. na
   560 px), odecital by se 62 px od hlavicky, ktera ma jeste 70 px, a hero by
   byl o 8 px vyssi nez viditelna plocha - presne to, cemu se task brani. */
@media (max-width: 480px) {
  .seomc-hero {
    min-height: calc(100vh - 62px);
    min-height: calc(100svh - 62px);
  }
}

@media (max-width: 560px) {
  .seomc-hero__submit {
    /* Prsty nemaji presnost mysi: CTA jde pres celou sirku, aby se do nej
       trefil kazdy a aby bylo dominantni i na uzkem displeji. */
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Uzivatel, ktery ma v systemu vypnute animace, nema dostat zadnou navic. */
@media (prefers-reduced-motion: no-preference) {
  .seomc-hero__submit {
    transition: background-color 120ms ease-in-out;
  }
}

/* Uzivatel, ktery ma v systemu vypnute animace, nema dostat zadnou navic.
   Kolecko se pak netoci a informaci nese jen text a pruh - ty jsou nosnem
   sdelenim tak jako tak. */
@media (prefers-reduced-motion: no-preference) {
  .seomc-progress__spinner {
    animation: seomc-spin 900ms linear infinite;
  }

  .seomc-progress__fill {
    transition: width 200ms ease-out;
  }
}

@keyframes seomc-spin {
  to { transform: rotate(360deg); }
}

/* --- S1.2.03.001 (ZONE:PUBLIC) - trust text pod CTA ------------------------
   Sablona: app/Views/public/partials/trust.php, includovana z home.php jako
   prvni blok uvnitr .seomc-below (drzi tedy jeho cteci sirku 880 px).

   Dva sloupce vznikaji az od 640 px a delaji je grid + auto-fit, ne pevny
   pocet: pod tou hranici (mobil) jsou seznamy pod sebou v poradi, v jakem
   jsou v HTML, takze se pro odectacku ani pro cloveka bez CSS nic nemeni.
   Zadny sloupec se vizualne nepresouva pred jiny - poradi v kodu = poradi
   na obrazovce. */

.seomc-trust {
  margin: 0 0 32px;
  border: 1px solid var(--seomc-line);
  border-radius: 12px;
  background: #fff;
  padding: clamp(18px, 3vw, 28px);
}

.seomc-trust__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.3;
}

.seomc-trust__lead {
  margin: 0 0 20px;
  max-width: 68ch;
  color: var(--seomc-muted);
}

.seomc-trust__cols {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .seomc-trust__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* min-width: 0 je tu proto, aby dlouha nezalomitelna cast textu (napr. adresa
   nebo `robots.txt` v <code>) nerozthla sloupec gridu za jeho podil sirky -
   vychozi min-width u grid polozky je auto. */
.seomc-trust__col {
  min-width: 0;
}

.seomc-trust__subtitle {
  margin: 0 0 8px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--seomc-muted);
}

.seomc-trust__list {
  margin: 0;
  padding-left: 20px;
}

.seomc-trust__list li {
  margin-bottom: 6px;
}

/* Odrazka nese jen doplnkove rozliseni; nosne je slovo v nadpisu sloupce.
   Barva se proto nepouziva jako jediny nositel informace. */
.seomc-trust__list--yes li::marker {
  color: var(--seomc-teal);
}

.seomc-trust__list--no li::marker {
  color: var(--seomc-primary);
}

.seomc-trust code {
  background: var(--seomc-bg);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.92em;
}

.seomc-trust__note {
  margin: 20px 0 0;
  border-left: 3px solid var(--seomc-teal);
  padding: 10px 14px;
  background: var(--seomc-bg);
  color: var(--seomc-muted);
}