/*
Theme Name: Bezpečné školy
Theme URI: https://bezpecneskoly.cz
Author: David Švarc
Author URI: mailto:david@svarc.it
Description: Podřízená šablona Twenty Twenty-Five ve vzhledu simulace 2FA – papírové pozadí, inkoustová modrá, žlutý „klíč“, karty a písmo IBM Plex. Automaticky přepíná do tmavého režimu podle systému.
Template: twentytwentyfive
Requires at least: 6.7
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: bezpecneskoly
*/

/* ---------- tmavý režim podle systému ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--base: #121a2b;
    --wp--preset--color--contrast: #e6ecf7;
    --wp--preset--color--accent-2: #1b2540;
    --wp--preset--color--accent-3: #7f9dff;
    --wp--preset--color--accent-4: #9aa7c2;
    --wp--preset--color--accent-5: #2e3b5c;
    --wp--preset--color--accent-6: #5cc98e;
  }
}

/* ---------- záhlaví ---------- */
.bs-header { border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.bs-header .wp-block-site-title a { display: inline-flex; align-items: center; gap: .55rem; }
.bs-header .wp-block-site-title a::before {
  content: ""; width: 1.6rem; height: 1.6rem; border-radius: 7px; flex: none;
  background: var(--wp--preset--color--accent-1)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2e00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
    center / 62% no-repeat;
}
.bs-header .wp-block-navigation a:hover { text-decoration: underline; }

/* ---------- úvodní text pod H1 ---------- */
.wp-block-post-content > h1:first-child { margin-top: 0; }
.wp-block-post-content > h1:first-child + p { color: var(--wp--preset--color--accent-4); max-width: 60ch; }

/* ---------- nadpisy sekcí: žlutá linka ---------- */
.wp-block-post-content > h2.wp-block-heading::before {
  content: ""; display: block; width: 2.2rem; height: 5px; border-radius: 3px;
  background: var(--wp--preset--color--accent-1); margin-bottom: .7rem;
}

/* ---------- karty: sloupce a skupiny se stylem „Karta“ ---------- */
.wp-block-post-content .wp-block-columns > .wp-block-column,
.wp-block-group.is-style-karta {
  background: var(--wp--preset--color--accent-2);
  border: 1px solid var(--wp--preset--color--accent-5);
  border-radius: 18px;
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.wp-block-post-content .wp-block-columns > .wp-block-column > :first-child,
.wp-block-group.is-style-karta > :first-child { margin-top: 0; }
.wp-block-post-content .wp-block-columns > .wp-block-column > .wp-block-buttons:last-child { margin-top: auto; }
.wp-block-post-content .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-group.is-style-tmava {
  background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
  border-radius: 18px; padding: clamp(1.1rem, 3vw, 1.6rem);
}
.wp-block-group.is-style-tmava :where(h1,h2,h3,h4) { color: inherit; }

/* ---------- odrážky jako žluté body ---------- */
.wp-block-post-content ul.wp-block-list { list-style: none; padding-left: 0; }
.wp-block-post-content ul.wp-block-list > li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
.wp-block-post-content ul.wp-block-list > li::before {
  content: ""; position: absolute; left: .2rem; top: .55em; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}

/* ---------- tlačítko „obrys“ ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--contrast);
  border: 2px solid var(--wp--preset--color--accent-5);
}

/* ---------- patička ---------- */
.bs-footer { border-top: 1px solid var(--wp--preset--color--accent-5); color: var(--wp--preset--color--accent-4); }
.bs-footer a { color: inherit; }

:where(a, button, input):focus-visible { outline: 3px solid var(--wp--preset--color--accent-3); outline-offset: 2px; }

/* ---------- čitelná délka řádku na širokém layoutu ---------- */
.wp-block-post-content > p { max-width: 75ch; }