/* ============================================================================
 * Frontend base framework.
 *
 * Written entirely against CSS custom properties so named themes
 * (/themes/<name>/theme.css), per-project overrides (/themes/_custom/<slug>.css)
 * and generated token files (/themes/_vars/<slug>.css) can re-skin the site by
 * overriding :root variables — no inline styles, no per-client forks.
 * ========================================================================== */

:root {
    /* ---- Palette: colour roles ------------------------------------------
       Each role has a base + auto lighter (l1/l2) / darker (d1/d2) variants.
       The variants are derived here with color-mix so overriding just the base
       re-tints them; the generated per-project _vars file emits explicit hex
       (incl. any manual overrides), which wins over these defaults. */
    --color-text:       #2d3436;
    --color-text-l1:    color-mix(in srgb, var(--color-text) 84%, #fff);
    --color-text-l2:    color-mix(in srgb, var(--color-text) 66%, #fff);
    --color-text-d1:    color-mix(in srgb, var(--color-text) 84%, #000);
    --color-text-d2:    color-mix(in srgb, var(--color-text) 66%, #000);
    --color-text2:      #6b7378;
    --color-text2-l1:   color-mix(in srgb, var(--color-text2) 84%, #fff);
    --color-text2-l2:   color-mix(in srgb, var(--color-text2) 66%, #fff);
    --color-text2-d1:   color-mix(in srgb, var(--color-text2) 84%, #000);
    --color-text2-d2:   color-mix(in srgb, var(--color-text2) 66%, #000);
    --color-accent:     #2980b9;
    --color-accent-l1:  color-mix(in srgb, var(--color-accent) 84%, #fff);
    --color-accent-l2:  color-mix(in srgb, var(--color-accent) 66%, #fff);
    --color-accent-d1:  color-mix(in srgb, var(--color-accent) 84%, #000);
    --color-accent-d2:  color-mix(in srgb, var(--color-accent) 66%, #000);
    --color-accent2:    #8e44ad;
    --color-accent2-l1: color-mix(in srgb, var(--color-accent2) 84%, #fff);
    --color-accent2-l2: color-mix(in srgb, var(--color-accent2) 66%, #fff);
    --color-accent2-d1: color-mix(in srgb, var(--color-accent2) 84%, #000);
    --color-accent2-d2: color-mix(in srgb, var(--color-accent2) 66%, #000);
    --color-heading:    #1f2a30;                 /* H1 only */
    --color-subheading: var(--color-heading);    /* H2 & same-size headings (defaults to H1 colour until set) */
    --color-light:      #ffffff;
    --color-light-d1:   color-mix(in srgb, var(--color-light) 84%, #000);
    --color-light-d2:   color-mix(in srgb, var(--color-light) 66%, #000);
    --color-dark:       #1f2a30;
    --color-dark-l1:    color-mix(in srgb, var(--color-dark) 84%, #fff);
    --color-dark-l2:    color-mix(in srgb, var(--color-dark) 66%, #fff);

    /* Semantic "traffic light" colours (alerts, form messages) */
    --color-success:        #2e7d32;
    --color-error:          #c62828;
    --color-info:           #1565c0;

    /* Surfaces (base colours; gradient/radius/shadow controls arrive next batch) */
    --color-bg:             #ffffff;
    --color-card:           #ffffff;
    /* Global border colour: inherits the Card panel's border colour, so any
       element without its own border setting follows the card. */
    --color-border:         var(--card-border-color, #e7eaee);
    --color-footer-bg:      #1f2a30;
    --color-footer-text:    #aeb9c2;
    --color-footer-heading: #ffffff;
    --color-banner-overlay: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 100%);
    --color-banner-bg:      #1f2a30;

    /* Back-compat aliases (old token names → new roles) */
    --color-primary:            var(--color-accent);
    --color-primary-dark:       var(--color-accent-d1);
    --color-button-border:      var(--color-accent);
    --color-button-border-hover:var(--color-accent-d1);
    --color-text-muted:         var(--color-text2);
    /* Hover tint for otherwise-unthemed links (breadcrumbs, meta/footer links):
       the lightest shade of the Primary accent. */
    --color-link-hover:         var(--color-accent-l2);

    /* Typography */
    --font-body:    'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-body);
    --font-size:    16px;
    --line-height:  1.7;

    /* Layout */
    --container:        1200px;
    --container-narrow: 760px;
    /* Corner radii. Elements without their own surface panel follow the CARD
       radius (--card-radius from the "Karty" panel); the px values are the
       fallbacks for projects that never saved one. Buttons have their own
       panels (--btn*-radius → --radius-btn fallback); pills stay pills. */
    /* NOTHING is rounded unless the element's OWN radius is set in Appearance
       (--card-radius, --btn*-radius, --input-radius, --submenu-radius, …).
       These generic fallbacks are therefore square. */
    --radius:           0;  /* general elements (media, sections) */
    --radius-sm:        0;  /* small controls (inputs, small buttons) */
    --radius-lg:        0;  /* large blocks (quote, modals) */
    /* The one exception: content media, quotes, content columns and galleries
       follow the Cards radius (they read as cards inside the content). */
    --radius-content:   var(--card-radius, 0);
    --radius-btn:       6px;   /* call-to-action buttons */
    --radius-pill:      50px;  /* pill buttons (banner / form / cookie CTAs) */
    --header-height:    72px;  /* total header height (logo row, + topbar when present) */
    --header-row:       72px;  /* the logo + menu row alone */
    --topbar-h:         0px;   /* contact top bar height (0 when absent) */
    --space:            24px;
}

/* With the contact top bar, the header grows: a taller bar so its icons and the
   lang switch are never clipped, plus a menu row sitting ~15px off the bottom. */
body.has-topbar { --topbar-h: 34px; --header-row: 46px; --header-height: 80px; }

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--color-text);
    /* The appearance settings can override --color-bg with a gradient or an
       rgba (opacity); a configured page border lands in --bg-border. */
    background: var(--color-bg);
    background-attachment: fixed;
    border: var(--bg-border, 0 solid transparent);
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space);
}

.container-narrow { max-width: var(--container-narrow); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; }

/* Interactive controls always show the pointer cursor. */
button, .btn, .btn-front, .category-btn, .page-link,
input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button:disabled, .btn:disabled { cursor: not-allowed; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: 1.2;
}
/* Only the main H1 uses the heading colour; every other heading (and same-size
   elements like the contact-info heading) uses the subheading colour. */
h2, h3, h4, h5, h6,
.contact-info-heading { color: var(--color-subheading); }

/* Global heading scale — H2 deliberately large; the rest steps down from it.
   Components with their own explicit size (cards, footer, hero) still win. */
h1 { font-size: 2.4rem; margin-bottom: 48px; }  /* generous gap below every H1 */
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* ---- Header ---- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background  0.35s ease,
        border-color 0.35s ease,
        box-shadow  0.35s ease,
        transform   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solid (light) state — no banner, or scrolled past banner. Fill / border-bottom
   / shadow / link colours come from the Header surface panel (with fallbacks). */
body:not(.has-banner) .site-header,
.site-header.header--solid {
    background: var(--header-bg, var(--color-bg));
    border-bottom: var(--header-border, 1px solid var(--color-border));
    box-shadow: var(--header-shadow, 0 1px 12px rgba(0,0,0,0.07));
}
body:not(.has-banner) .site-header .main-nav > ul > li > a,
.site-header.header--solid .main-nav > ul > li > a { color: var(--header-link, var(--color-text)); }
body:not(.has-banner) .site-header .main-nav > ul > li > a:hover,
.site-header.header--solid .main-nav > ul > li > a:hover { color: var(--header-link-hover, var(--color-accent)); }

/* Slide the header out of view on scroll-down */
.site-header.header--hidden {
    transform: translateY(-110%);
}

.header-inner {
    position: relative; /* anchors the full-height logo */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* nav on the right; the logo is absolute on the left */
    min-height: var(--header-row);
}
/* Logo is centered over the WHOLE header (top bar + menu row), not just the row. */
.site-logo {
    position: absolute;
    left: var(--space);
    top: calc(-1 * var(--topbar-h));
    height: var(--header-height);
    display: inline-flex;
    align-items: center;
    z-index: 2;
}
/* With a top bar: press the menu row against the bottom edge — the only space
   under the text is the links' own 8px padding (+ line-box slack ≈ 10px). */
body.has-topbar .header-inner { align-items: flex-end; padding-bottom: 0; }

/* ---- Header top bar (contacts + lang switch, above the menu) ---- */
.header-topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;       /* vertically centre so nothing gets clipped */
    padding-top: 4px;          /* slight bias away from the viewport edge */
    font-size: 0.82rem;
    color: var(--color-text);
    /* overflow visible so the language dropdown can open below the bar; the
       contacts are kept in-bounds by their own nowrap / icon-only shrinking. */
    overflow: visible;
}
.header-topbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 20px; width: 100%; min-width: 0; }
/* Over a banner the top bar text turns white like the nav (no separator line). */
body.has-banner .site-header:not(.header--solid) .header-topbar { color: #fff; }
/* The lang switch, when moved up into the top bar, is compact and borderless;
   its trigger drops the right padding so the language code ends flush with the
   container edge (lining up with the menu's last link below). The font matches
   the contact items and zero vertical padding lets the bar's flex centring
   align it with them exactly. */
.header-topbar .lang-switch { margin: 0; padding: 0; border: 0; }
.header-topbar .lang-dd-current {
    padding: 0 0 0 8px;
    font-size: 0.85rem;
}
/* Stays right-aligned on mobile too, clear of the absolute logo on the left. */

.site-logo .site-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-heading);
    transition: color 0.3s;
}
.site-logo img { height: 40px; width: auto; display: block; }
/* With the contact top bar the header is taller (80px) and the logo spans the
   whole of it — give the image the extra room (+15px). */
body.has-topbar .site-logo img { height: 55px; }
.site-logo:hover { text-decoration: none; }

/* Logo visibility logic */
.logo-light { display: none; }

/* Over banner (transparent header) → show light logo */
body.has-banner .site-header:not(.header--solid) .logo-dark  { display: none; }
body.has-banner .site-header:not(.header--solid) .logo-light { display: block; }

/* Solid header (always, or after scroll) → show dark logo */
body:not(.has-banner) .logo-light,
body.has-banner .site-header.header--solid .logo-light { display: none; }
body:not(.has-banner) .logo-dark,
body.has-banner .site-header.header--solid .logo-dark { display: block; }

/* Nav link colour over transparent banner header — its own setting (Header
   surface → "Hlavička bez pozadí" → Odkaz), white fallback. */
body.has-banner .site-header:not(.header--solid) .main-nav > ul > li > a {
    color: var(--header-link-banner, rgba(255,255,255,0.92));
}
body.has-banner .site-header:not(.header--solid) .main-nav > ul > li > a:hover {
    color: var(--header-link-hover-banner, #fff);
}
/* Dropdown arrows over the transparent header: their own colour, falling back
   to the solid-header arrow colour, then the accent defaults. */
body.has-banner .site-header:not(.header--solid) .nav-caret {
    color: var(--header-caret-banner, var(--header-caret, var(--color-accent2)));
}
body.has-banner .site-header:not(.header--solid) .lang-dd-caret {
    color: var(--header-caret-banner, var(--header-caret, var(--color-accent)));
}
body.has-banner .site-header:not(.header--solid) .site-logo .site-name {
    color: #fff;
}
body.has-banner .site-header:not(.header--solid) .nav-toggle span {
    background: #fff;
}
body.has-banner .site-header:not(.header--solid) .lang-switch {
    border-left-color: rgba(255,255,255,0.3);
}
/* Over the transparent banner header the trigger is white (same tone as the
   menu links); the open menu stays a light popup for readability. */
body.has-banner .site-header:not(.header--solid) .lang-dd-current { color: var(--header-link-banner, rgba(255,255,255,0.92)); }
body.has-banner .site-header:not(.header--solid) .lang-dd-current:hover { color: var(--header-link-hover-banner, #fff); }

/* ---- Admin bar (shown to a logged-in editor; not themeable) ---- */
.cms-adminbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 36px;
    background: #1d2327;
    color: #c3c4c7;
    z-index: 1000;
    font-size: 13px;
    font-family: var(--font-body);
}
.cms-adminbar-inner { display: flex; align-items: center; gap: 18px; height: 100%; }
.cms-adminbar a { color: #c3c4c7; text-decoration: none; }
.cms-adminbar a:hover { color: #fff; }
.cms-adminbar-brand { font-weight: 600; color: #fff; }
.cms-adminbar-user { margin-left: auto; color: #a7aaad; }
body.has-adminbar .site-header { top: 36px; }

/* Mobile nav toggle — pure CSS via a hidden checkbox */
.nav-toggle {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 22px;
    position: relative;
    z-index: 2; /* stay above the fullscreen menu (same header stacking context) */
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text);
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.3s ease, top 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle span:nth-child(3) { top: 100%; transform: translateY(-100%); }

/* Open state → hamburger morphs into a red "close" cross */
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
/* The cross uses the semantic "error" red (override the over-banner white too) */
.nav-toggle-cb:checked ~ .nav-toggle span,
body.has-banner .site-header:not(.header--solid) .nav-toggle-cb:checked ~ .nav-toggle span {
    background: var(--color-error);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.main-nav ul { list-style: none; }
.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
}
/* Menu links: hover changes only the font colour (no background pill). */
.main-nav > ul > li > a {
    display: block;
    padding: 8px 10px;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s;
}
.main-nav > ul > li > a:hover {
    color: var(--color-primary);
    text-decoration: none;
}
/* The last link ends flush with the container's right edge, so it lines up
   with the lang switch / contacts in the top bar above. */
.main-nav > ul > li:last-child > a { padding-right: 0; }

/* Chevron next to items that open a submenu — configurable in the Header
   surface panel; defaults to the Secondary accent. */
/* A <span> wrapper (not the bare SVG) so the mobile menu can give it a real
   tap target without enlarging the icon on desktop. */
.nav-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: middle;
    color: var(--header-caret, var(--color-accent2));
    transition: transform 0.2s;
}
.nav-caret svg { display: block; }
.has-children:hover > a .nav-caret { transform: rotate(180deg); }

/* Dropdown */
.has-children { position: relative; }
/* Shared dropdown panel — the menu submenu AND the language switcher use the
   same "Dropdown submenu" appearance tokens, declared once so they cannot
   drift apart. Each keeps only its own positioning / reveal mechanism below. */
.submenu,
.lang-dd-menu {
    position: absolute;
    top: 100%;
    background: var(--submenu-bg, var(--color-bg));
    border: var(--submenu-border, 1px solid var(--color-border));
    /* Square top (sits flush against the header's bottom edge); the configured
       radius rounds ONLY the two bottom corners. */
    border-radius: 0 0 var(--submenu-radius, var(--radius)) var(--submenu-radius, var(--radius));
    box-shadow: var(--submenu-shadow, 0 8px 24px rgba(0,0,0,0.08));
    /* No vertical padding: the first item is flush with the top, the last with
       the bottom. Clip so a first/last item's hover background stays inside the
       (square top / rounded bottom) box. */
    padding: 0;
    overflow: hidden;
    z-index: 200;
}
.submenu {
    display: none;
    left: 0;
    min-width: 200px;
}
.has-children:hover .submenu,
.has-children:focus-within .submenu { display: block; }
.submenu li a,
.lang-dd-menu a {
    display: block;
    padding: 8px 20px;
    color: var(--submenu-link, var(--color-text));
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}
/* Hover: configurable link colour + hover background (Dropdown submenu panel).
   Unset colour keeps the base link colour so only the background changes. */
.submenu li a:hover,
.lang-dd-menu a:hover {
    background: var(--submenu-link-hover-bg, var(--btn2-bg, #f6f8fa));
    color: var(--submenu-link-hover, var(--submenu-link, var(--color-text)));
    text-decoration: none;
}
/* Desktop dropdown: the parent item fills the whole header row so the panel
   drops from the header's bottom edge (flush), independent of the header's
   vertical centring (works with and without the contact top bar). */
/* While the collapse decision is being measured, frontend.js toggles
   .nav-collapsed off and on within one frame. The forced style recalc in
   between makes the browser see the expanded values, so the opacity/visibility
   transition on .main-nav would fire and the menu would flash on every resize
   tick — this guard switches those transitions off for the duration. */
.nav-measuring .main-nav,
.nav-measuring .main-nav * {
    transition: none !important;
    animation: none !important;
}

/* ---- Expanded (desktop) navigation --------------------------------------
 * Scoped to :not(.nav-collapsed), NOT to a min-width query: the bar can now
 * collapse at any width, so these must switch off with it. (nav-init.js sets
 * .nav-collapsed below the width floor, so this also covers small screens.) */
html:not(.nav-collapsed) .main-nav,
html:not(.nav-collapsed) .main-nav > ul { align-self: stretch; }
html:not(.nav-collapsed) .main-nav > ul > li.has-children {
    align-self: stretch;
    display: flex;
    align-items: center;
}
/* Over a transparent (no-background) header the panel floats free of the
   header, so its TOP corners are also rounded (when a radius is set). Once
   the header gains a background it reverts to the base rule (square top,
   flush against the header's bottom edge). */
html:not(.nav-collapsed) body.has-banner .site-header:not(.header--solid) .submenu,
html:not(.nav-collapsed) body.has-banner .site-header:not(.header--solid) .lang-dd-menu {
    border-radius: var(--submenu-radius, var(--radius));
}

/* The language dropdown drops from the header's bottom edge too. Same trick as
   the menu items: stretch the trigger's box to fill its row, so top:100% lands
   on that row's bottom rather than under the button. The switcher sits inside
   .header-topbar-inner, so that has to fill the bar first — otherwise
   stretching the switcher changes nothing. */
html:not(.nav-collapsed) .header-topbar-inner { align-self: stretch; }
html:not(.nav-collapsed) .main-nav .lang-dd,
html:not(.nav-collapsed) .header-topbar .lang-dd {
    align-self: stretch;
    display: flex;
    align-items: center;
}
/* Stretching would turn the divider into a full-height rule — keep it at text
   height by moving it from the (now tall) box onto the trigger. */
html:not(.nav-collapsed) .main-nav .lang-switch { border-left: 0; padding-left: 0; }
html:not(.nav-collapsed) .main-nav .lang-switch .lang-dd-current {
    border-left: 1px solid var(--color-border);
    padding-left: 16px;
}
html:not(.nav-collapsed) body.has-banner .site-header:not(.header--solid) .main-nav .lang-switch .lang-dd-current {
    border-left-color: rgba(255,255,255,0.3);
}
/* Top-bar variant: the switcher sits in the bar, so the panel must also clear
   the menu row underneath it to reach the header's bottom edge. */
html:not(.nav-collapsed) .header-topbar .lang-dd-menu { top: calc(100% + var(--header-row)); }

/* Language switch — a dropdown: the current language with a down-chevron on its
   left; hover / focus-within reveals the other languages. CSS-only (CSP-safe). */
.lang-switch {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}
.lang-dd { position: relative; }
.lang-dd-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.lang-dd-current:hover { color: var(--color-text); }
/* Without a top bar the switch sits in the menu row — matched to the menu
   links (size, weight, colour states below) so it reads as part of the
   navigation; the compact muted look is kept for the top-bar variant only. */
.main-nav .lang-dd-current {
    padding: 8px 0 8px 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
}
body:not(.has-banner) .site-header .main-nav .lang-dd-current,
.site-header.header--solid .main-nav .lang-dd-current { color: var(--header-link, var(--color-text)); }
body:not(.has-banner) .site-header .main-nav .lang-dd-current:hover,
.site-header.header--solid .main-nav .lang-dd-current:hover { color: var(--header-link-hover, var(--color-accent)); }
/* Caret: same size as the parent-menu chevrons (16px) but Primary accent. */
.lang-dd-caret { flex: none; color: var(--header-caret, var(--color-accent)); transition: transform 0.2s; }
.lang-dd:hover .lang-dd-caret,
.lang-dd:focus-within .lang-dd-caret { transform: rotate(180deg); }
/* Box styling is shared with .submenu above; only the alignment and the
   fade-in reveal are the language switcher's own. */
.lang-dd-menu {
    right: 0;
    min-width: 100%;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.lang-dd:hover .lang-dd-menu,
.lang-dd:focus-within .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Colours / spacing come from the shared rule; only the language codes' own
   typography is kept (uppercase, matching the switcher's trigger). */
.lang-dd-menu a { font-weight: 600; text-transform: uppercase; }

/* ---- Header contact strip (optional: phone / email / social) ----
   Lives in the top bar; inherits the bar's colour (text on solid, white over a
   banner). Forced single-row and compact so it can't break the fixed-height bar. */
.header-contact {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px;
    color: inherit;
    font-size: 0.85rem;
}
.header-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-weight: 500;
    white-space: nowrap;
}
.header-contact-item:hover { color: var(--color-link-hover); text-decoration: none; }
.header-contact-item svg { flex: none; }
/* Neutralise the footer's circular social styling inside the slim top bar. */
.header-contact-social { display: inline-flex; }
.header-contact-social .footer-social { margin: 0; gap: 4px; flex-wrap: nowrap; }
/* Social-icon colours in the top bar: own settings (Header surface panel),
   inherit the bar's text colour when unset. */
.header-contact-social .footer-social-link {
    width: 30px; height: 30px; margin: 0;
    background: none !important;
    border: 0 !important;
    color: var(--header-social, inherit) !important;
}
.header-contact-social .footer-social-link:hover { transform: none; color: var(--header-social-hover, var(--color-link-hover)) !important; }
.header-contact-social .footer-social-link svg { width: 22px; height: 22px; }
/* Over the transparent (no-background) header the contacts + social icons take
   the transparent-header colours: contact links reuse the nav link-hover-banner
   colour (per request), social icons have their own normal + hover settings. */
body.has-banner .site-header:not(.header--solid) .header-contact-social .footer-social-link { color: var(--header-social-banner, inherit) !important; }
body.has-banner .site-header:not(.header--solid) .header-contact-item:hover { color: var(--header-link-hover-banner, rgba(255,255,255,0.75)) !important; }
body.has-banner .site-header:not(.header--solid) .header-contact-social .footer-social-link:hover { color: var(--header-social-hover-banner, var(--header-link-hover-banner, rgba(255,255,255,0.75))) !important; }
@media (max-width: 768px) {
    .header-contact { gap: 12px; font-size: 0.78rem; }
    .header-contact-social .footer-social-link { width: 26px; height: 26px; }
    .header-contact-social .footer-social-link svg { width: 19px; height: 19px; }
}
/* On small screens keep only the phone/e-mail icons (drop the text). */
@media (max-width: 600px) {
    .header-contact-item span { display: none; }
    .header-contact-item { gap: 0; }
}

/* Footer logo (when a logo is placed in the footer). */
.footer-logo { display: inline-block; margin-bottom: 14px; }
/* Explicit height (not max-height): an SVG logo with only a viewBox has no
   intrinsic size, so max-height alone collapses it to 0×0. The fixed height
   scales any logo (raster or vector) by its aspect ratio, like the header. */
.footer-logo img { height: 56px; width: auto; }

/* ---- Banner ---- */
@keyframes bannerFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bannerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.page-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Shows under a (transparent/covered) image and IS the banner on its own when
       no image is set. */
    background-color: var(--color-banner-bg);
    /* Optional bottom border from the Banner appearance panel. */
    border-bottom: var(--banner-border, none);
}
/* Fullscreen hero — the classic full-viewport banner under the transparent header.
   With no image it degrades to a content-sized coloured band. */
.page-banner--fullscreen:not(.page-banner--noimage) { min-height: 100vh; }
/* Content-sized banner carrying an image but NO overlay content (no heading/
   text/CTA) would collapse to zero height — the image is absolutely
   positioned. Give just that degenerate combination an intrinsic height;
   banners WITH content keep their content-driven size. */
.page-banner--default:not(.page-banner--noimage):not(:has(.banner-overlay)) { min-height: 320px; }
.banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point (Appearance → Banner): decides what survives the crop. */
    object-position: var(--banner-img-pos, center);
    z-index: 0;
    animation: bannerFadeIn 1.2s ease forwards;
}
.banner-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
}
/* Dark legibility gradient only over an actual image (a no-image banner shows the
   banner background colour cleanly). */
.page-banner:not(.page-banner--noimage) .banner-overlay { background: var(--color-banner-overlay); }
.page-banner--fullscreen:not(.page-banner--noimage) .banner-overlay { min-height: 100vh; }
.banner-overlay .container {
    /* .banner-overlay is a flex row, so .container is a flex item: without an
       explicit width it shrinks to its content and margin:auto then CENTERS
       that narrow box — which pushes a left-aligned banner's text to the right
       of the page content. Force full width so it matches the page container. */
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* Fullscreen sits under the fixed/transparent header, so it needs the extra top room. */
.page-banner--fullscreen:not(.page-banner--noimage) .banner-overlay .container {
    padding-top: calc(var(--header-height) + 80px);
    padding-bottom: 100px;
}
.banner-heading {
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
    animation: bannerFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.banner-subheading {
    color: rgba(255,255,255,0.88);
    font-size: clamp(2.1rem, 4vw, 2.7rem);
    font-weight: 400;
    line-height: 1.2;
    /* Centered banner: no width cap (spans the container). Left/right-aligned
       banners re-apply a 50% max-width below. */
    margin-top: 20px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.2);
    animation: bannerFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
/* Free text (palette-colour HTML) shown below the heading + subheading. */
.banner-text {
    color: rgba(255,255,255,0.85);
    font-size: clamp(1rem, 1.7vw, 1.15rem);
    line-height: 1.65;
    max-width: 620px;
    margin-top: 18px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.2);
    animation: bannerFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* ---- Banner text alignment (center = default) ----
   Left/right: the heading, subheading and text sit on one half of the banner
   only — the outer edge lines up with the content container edge, the inner
   edge never crosses the centre. The CTA area keeps the full width (the
   container is a centred flex column, so it needs an explicit width). */
.page-banner--align-left  .banner-overlay .container { align-items: flex-start; }
.page-banner--align-right .banner-overlay .container { align-items: flex-end; }
.page-banner--align-left  .banner-heading,
.page-banner--align-left  .banner-subheading,
.page-banner--align-left  .banner-text {
    max-width: 50%;
    text-align: left;
}
.page-banner--align-left  .banner-heading {
    max-width: 75%;
    text-align: left;
}
.page-banner--align-right .banner-heading,
.page-banner--align-right .banner-subheading,
.page-banner--align-right .banner-text {
    max-width: 50%;
    text-align: right;
}
.page-banner--align-left  .banner-cta,
.page-banner--align-right .banner-cta { width: 100%; }
/* Buttons follow the banner's alignment (the two-block --card keeps its own
   space-between edge layout). */
.page-banner--align-left  .banner-cta:not(.banner-cta--card) { justify-content: flex-start; }
.page-banner--align-right .banner-cta:not(.banner-cta--card) { justify-content: flex-end; }
@media (max-width: 768px) {
    /* Small screens: keep the chosen edge but let the text use the full width. */
    .page-banner--align-left  .banner-heading,
    .page-banner--align-left  .banner-subheading,
    .page-banner--align-left  .banner-text,
    .page-banner--align-right .banner-heading,
    .page-banner--align-right .banner-subheading,
    .page-banner--align-right .banner-text { max-width: none; }
}
/* Per-button heading + subheading shown directly above each CTA button. */
.banner-btn-heading {
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
.banner-btn-subheading {
    color: rgba(255,255,255,0.85);
    font-size: clamp(0.98rem, 1.7vw, 1.15rem);
    line-height: 1.55;
    margin: 8px 0 0;
}
/* CTA area: up to two button "items" side by side. With two, each takes half
   the width (50/50); one spans the natural width. Each item stacks its
   heading + subheading + button. */
.banner-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px 32px;
    margin-top: 36px;
    animation: bannerFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.banner-cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.banner-cta--2 .banner-cta-item {
    flex: 1 1 0;
    max-width: 420px;
    min-width: 240px;
}
.banner-cta-item .banner-btn-heading,
.banner-cta-item .banner-btn-subheading { margin: 0; }
.banner-cta-item .btn { margin-top: 4px; }

/* (1) A button with a heading/subheading aligns its content to the left. */
.banner-cta-item--titled { align-items: flex-start; text-align: left; }

/* (2) Only bare buttons (no headings/subheadings) → sit at their natural width
   right next to each other with half the gap (instead of split 50/50). */
.banner-cta--bare { gap: 16px; }
.banner-cta--bare .banner-cta-item { flex: 0 0 auto; max-width: none; min-width: 0; }

/* (3) Both buttons titled → the whole area is a card: the two blocks are pushed
   to the left/right edges with a centre divider, each block left-aligned. The
   card spans the full container — the same width as the page content. The
   explicit width matters: the overlay container is a centred flex column, so
   without it the card would shrink-wrap to its content. */
.banner-cta--card {
    position: relative;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px 40px;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 40px;
    /* Fill / border / radius / shadow come from the Banner CTA-card settings
       (Appearance → Banner), with the previous look as the fallback. */
    background: var(--bannercta-bg, rgba(0,0,0,0.34));
    border: var(--bannercta-border-width, 1px) solid var(--bannercta-border-color, rgba(255,255,255,0.12));
    border-radius: var(--bannercta-radius, 0);
    box-shadow: var(--bannercta-shadow, none);
}
.banner-cta--card .banner-cta-item {
    flex: 0 1 auto;
    max-width: none;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}
/* Centre divider between the two buttons — same width + colour as the card's
   edge border (Banner CTA-card border setting). */
.banner-cta--card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 24px;
    bottom: 24px;
    width: var(--bannercta-border-width, 1px);
    transform: translateX(-50%);
    background: var(--bannercta-border-color, rgba(255,255,255,0.12));
}
.banner-cta .btn {
    margin: 0;
    padding: 14px 36px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    /* Radius follows each button type's own setting (--btn-*/--btn2-*/--btninv-*
       from the button surface panels); no forced pill. */
}
/* Ghost / outline CTA on the dark overlay */
.banner-cta .btn-invert {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}
.banner-cta .btn-invert:hover {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border-color: #fff;
}
@media (max-width: 640px) {
    /* Stack the two button items on small screens. */
    .banner-cta--2 .banner-cta-item { flex-basis: 100%; max-width: none; }
    /* Card: stack the two blocks, drop the vertical centre divider. */
    .banner-cta--card { padding: 24px; gap: 22px; }
    .banner-cta--card::before { display: none; }
}

/* ---- Page content ---- */

/* Push content below fixed header on non-banner pages */
body:not(.has-banner) main { padding-top: var(--header-height); }
body.has-adminbar:not(.has-banner) main { padding-top: calc(var(--header-height) + 36px); }

/* ---- Page / article background (Appearance → Page / Article) ----
   Layer order bottom → top: fill (colour + gradient) → background image (own
   opacity) → inner shadow → content. A page may override all of it inline
   ("Individual page background" in the page editor). */
.page-content { padding: 60px 0; position: relative; background: var(--page-bg, transparent); }
.page-content::before,
.page-content::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.page-content::before {
    background-image: var(--page-img, none);
    opacity: var(--page-img-o, 1);
    background-position: var(--page-img-pos, center);
    background-size: cover;
    background-repeat: no-repeat;
}
.page-content::after { box-shadow: var(--page-shadow, none); }
.page-content > .container { position: relative; z-index: 1; }
/* Articles reuse the page tokens unless decoupled in Appearance → Article. */
.page-content.article-single { background: var(--article-bg, var(--page-bg, transparent)); }
.page-content.article-single::before {
    background-image: var(--article-img, var(--page-img, none));
    opacity: var(--article-img-o, var(--page-img-o, 1));
    background-position: var(--article-img-pos, var(--page-img-pos, center));
    background-size: cover;
}
.page-content.article-single::after { box-shadow: var(--article-shadow, var(--page-shadow, none)); }
.page-title {
    /* Size + bottom margin come from the global h1 scale (48px). */
    font-weight: 700;
    margin-bottom: 48px;
}

.content-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
}
/* Clearfix: a floated image (editor align left/right) must not overflow its
   container — the content body itself and every float-capable sub-container
   (column, quote, FAQ answer) clear their own floats. */
.content-body::after,
.content-body .cms-col::after,
.content-body blockquote.cms-quote::after,
.content-body .cms-faq-a::after {
    content: "";
    display: block;
    clear: both;
}
/* Vertical rhythm between blocks — at the top level AND inside the editor
   "boxes" (columns + citation), whose children aren't direct children of
   .content-body and so were previously left with no spacing. */
.content-body > * + *,
.content-body .cms-col > * + *,
.content-body blockquote.cms-quote > * + * { margin-top: 16px; }
/* Editor font-size changes carry a proportional (unitless) line-height, so larger
   text gets adequate line spacing instead of overlapping. */
.content-body [style*="font-size"] { line-height: 1.35; }
/* Sizes follow the global heading scale; only the rhythm is adjusted here. */
.content-body h2 { margin-top: 40px; }
.content-body h3 { margin-top: 32px; }
.content-body h2:first-child, .content-body h3:first-child { margin-top: 0; }
.content-body img { border-radius: var(--radius-content); }
/* TinyMCE centres an image via display:block + auto side margins; content
   saved before the sanitizer kept `display` lost the block part — restore it
   whenever the auto margins are present, so those images centre too. */
.content-body img[style*="margin-left: auto"],
.content-body img[style*="margin-left:auto"] { display: block; }
/* Inline SVG graphics in authored content follow the Primary accent role:
   anything drawn with currentColor (fill/stroke) picks up the accent. */
.content-body svg { color: var(--color-accent); }
/* List items: the enlarged text sits in an inline element INSIDE the <li> —
   usually a <span>, but pasted/legacy content can carry the size on <strong>,
   <a>, <em>… The li's own inherited 1.7 sets a minimum line box (16px × 1.7
   ≈ 27px) that outgrows moderate font sizes and keeps the old spacing. Drop
   the leaf item's own line-height too, so the inline's proportional 1.35
   rules the line box at any size. (When the whole item is resized, TinyMCE
   also mirrors font-size onto the <li> itself — that path is already fully
   proportional via the [style*="font-size"] rule above.) (:not(:has(li))
   keeps a parent item of a nested list on the default rhythm — only its
   sub-items are affected.) */
.content-body li:not(:has(li)):has([style*="font-size"]) { line-height: 1.35; }
/* Headings and their spans keep their native line-height. */
.content-body :is(h1, h2, h3, h4, h5, h6) [style*="font-size"] { line-height: inherit; }
/* Lists: EVERY ul symbol (disc/circle/square/check) is a custom ::before —
   the native ::marker cannot be vertically centred and each glyph indents
   differently. One shared 1.5em gutter (same as ol) = identical indentation
   across all list types; the glyph is em-sized and centred on the FIRST line
   via the lh unit, so it scales with the item's font AND stays centred. */
/* The ul gutter lives on the LI (em of the ITEM's font): an enlarged item
   grows its own gutter with the glyph, so markers never overflow a parent
   box. Marker at left:0 = flush with the content edge, pixel-exact. */
.content-body ul { list-style: none; padding-left: 0; }
.content-body ol { padding-left: 1.2em; }
.content-body ul > li { padding-left: 1.2em; }
/* Check runs wider — its gap to the text is 50 % of the glyph width. */
.content-body ul.cms-list-check > li { padding-left: 1.72em; }
/* Gap between items = 1/3 of the item's line height. 1lh resolves against the
   li's own computed line-height, so it scales with the text size: a whole-item
   resize puts font-size on the <li> itself (TinyMCE mirror) and the gap grows
   with it. The em value is a fallback for engines without lh (≈ 1.8 / 3). */
.content-body li { margin-bottom: 0.6em; margin-bottom: calc(1lh / 3); }
.content-body li:last-child { margin-bottom: 0; }
/* Consecutive sibling lists read as ONE list — item gap, not block rhythm
   (the .cms-col variant outranks the column rhythm rule's specificity). */
.content-body :is(ul, ol) + :is(ul, ol),
.content-body .cms-col > :is(ul, ol) + :is(ul, ol) { margin-top: 0.6em; margin-top: calc(1lh / 3); }
/* Marker colour: a per-list --bullet-color (set by the editor's list panel)
   when present, otherwise the Primary accent; ol numbers keep the native,
   baseline-aligned ::marker. */
.content-body li::marker { color: var(--bullet-color, var(--color-accent)); }
.content-body ul > li { position: relative; }
/* Default symbol: dot, flush with the li box edge (= content edge). */
.content-body ul > li::before {
    content: "";
    position: absolute;
    width: 0.42em;
    height: 0.42em;
    left: 0;
    top: calc((1lh - 0.42em) / 2);
    border-radius: 50%;
    background-color: var(--bullet-color, var(--color-accent));
}
.content-body ul.cms-list-circle > li::before {
    background-color: transparent;
    border: 0.09em solid var(--bullet-color, var(--color-accent));
}
.content-body ul.cms-list-square > li::before { border-radius: 0.06em; }
.content-body ul.cms-list-check > li::before {
    width: 0.95em;
    height: 0.95em;
    top: calc((1lh - 0.95em) / 2);
    border-radius: 0;
    background-color: var(--bullet-color, var(--color-accent));
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%273.4%205.5%2017.6%2013.5%27%3E%3Cpath%20d=%27M9%2016.17L4.83%2012l-1.42%201.41L9%2019%2021%207l-1.41-1.41z%27/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%273.4%205.5%2017.6%2013.5%27%3E%3Cpath%20d=%27M9%2016.17L4.83%2012l-1.42%201.41L9%2019%2021%207l-1.41-1.41z%27/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Image caption (editor "Popisek" — <figure class="image"> + <figcaption>). */
.content-body figcaption {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}
/* In-content links follow the Primary accent role (not the theme's primary).
   Button elements (a.btn/.btn-invert/.btn-secondary) are excluded — they keep
   their own button text colour. */
.content-body a:not(.btn) { color: var(--color-accent); text-decoration: underline; }
.content-body a:not(.btn):hover { color: var(--color-accent-d1); }
.content-body blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 16px 24px;
    margin: 24px 0;
    background: var(--color-card);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--color-text-muted);
}

/* ---- Citation / quote block (TinyMCE custom "Citace" element) ---- */
/* Full inner-width block with generous padding, no left border. The background
   colour is set inline per quote; quote-mark icons are optional (a class). */
.content-body blockquote.cms-quote {
    border: 0;
    border-radius: var(--radius-content);
    background: var(--color-card);
    color: var(--color-text);
    padding: 48px 44px;
    margin: 32px 0;
    text-align: center;
    font-style: normal;
    position: relative;
    overflow: hidden;
}
.content-body blockquote.cms-quote > :first-child { margin-top: 0; }
.content-body blockquote.cms-quote > :last-child { margin-bottom: 0; }

/* "With quotes" variant — extra side padding so the corner icons have room. */
.content-body blockquote.cms-quote-quoted { padding-left: 92px; padding-right: 92px; }
.content-body blockquote.cms-quote-quoted::before,
.content-body blockquote.cms-quote-quoted::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 46px;
    background-color: currentColor;
    opacity: 0.3;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9.7%206.3C7%207.4%205%2010%205%2013.2V18h6v-6H7.8c.2-1.6%201-2.9%202.6-3.6l-.7-2.1Zm9%200C16%207.4%2014%2010%2014%2013.2V18h6v-6h-3.2c.2-1.6%201-2.9%202.6-3.6l-.7-2.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9.7%206.3C7%207.4%205%2010%205%2013.2V18h6v-6H7.8c.2-1.6%201-2.9%202.6-3.6l-.7-2.1Zm9%200C16%207.4%2014%2010%2014%2013.2V18h6v-6h-3.2c.2-1.6%201-2.9%202.6-3.6l-.7-2.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.content-body blockquote.cms-quote-quoted::before { top: 28px; left: 30px; }
.content-body blockquote.cms-quote-quoted::after { bottom: 28px; right: 30px; transform: rotate(180deg); }
.content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}
.content-body th, .content-body td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.content-body th { font-weight: 600; }

/* ---- Responsive columns (editor "Sloupce" element) ---- */
.cms-cols {
    display: grid;
    gap: var(--space);
    margin: 32px 0;
}
.cms-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cms-cols-4 { grid-template-columns: repeat(4, 1fr); }
.cms-cols-5 { grid-template-columns: repeat(5, 1fr); }
.cms-col {
    /* No colour picked → the full Card fill. The shorthand matters: the Card
       panel may put a gradient into --color-card, which background-color would
       reject (the box would fall back to transparent). */
    background: var(--color-card);
    border-radius: var(--radius-content);
    min-width: 0;
}
/* A column with its own picked colour (inline background-color) drops the
   card's gradient layer — the flat colour alone paints the box. */
.cms-col[style*="background-color"] { background-image: none; }
.cms-col--card { padding: 28px; box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.06)); border: var(--card-border, 0 solid transparent); border-radius: var(--card-radius, var(--radius)); }
/* Plain = narrow div: no inner padding, no background, no border/radius/shadow.
   An explicitly picked background colour (inline style) still wins. */
.cms-col--plain { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.cms-col > :first-child { margin-top: 0; }
.cms-col > :last-child { margin-bottom: 0; }

/* ---- Linked column (a link set in the column's editor dialog) ----
   The whole box is clickable via a "stretched link": an overlay anchor covering
   the column. Its text is the target's label — kept in the DOM for screen
   readers but visually collapsed — so it is a real link, not a JS click handler. */
.cms-col--link { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cms-col-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    font-size: 0;
    line-height: 0;
    color: transparent;
    border-radius: inherit;
}
.cms-col-link:hover { text-decoration: none; }
/* Anything interactive inside the column stays above the overlay. */
.cms-col--link a:not(.cms-col-link),
.cms-col--link button { position: relative; z-index: 3; }
.cms-col--link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
.cms-col--link:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
@media (prefers-reduced-motion: reduce) {
    .cms-col--link { transition: none; }
    .cms-col--link:hover, .cms-col--link:focus-within { transform: none; }
}
@media (max-width: 900px) {
    .cms-cols-4, .cms-cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cms-cols { grid-template-columns: 1fr !important; }
}

/* ---- FAQ (editor "FAQ" element) ---- */
/* Progressive accordion: without JS every answer stays visible; frontend.js
   adds .cms-faq--js and toggles .is-open per item. */
.cms-faq { margin: 32px 0; border-top: 1px solid var(--color-border); }
/* As the last block (of the content body, a column, a quote…) the FAQ ends the
   container flush — no trailing gap on top of the parent's own padding. */
.cms-faq:last-child { margin-bottom: 0; }
.cms-faq-item { border-bottom: 1px solid var(--color-border); }
/* Reads and behaves like a link: H4-sized, in the link colour, and it darkens
   on hover exactly like an anchor does. */
.cms-faq-q {
    position: relative;
    padding: 16px 52px 16px 0;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-primary);
    transition: color 0.2s;
}
.cms-faq--js .cms-faq-q { cursor: pointer; }
.cms-faq--js .cms-faq-q:hover { color: var(--color-primary-dark); }
.cms-faq--js .cms-faq-q::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    background-color: var(--color-accent2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s;
}
.cms-faq--js .cms-faq-item.is-open .cms-faq-q::after { transform: rotate(180deg); }
.cms-faq-a { padding: 0 0 18px; }
.cms-faq-a > :first-child { margin-top: 0; }
.cms-faq-a > :last-child { margin-bottom: 0; }
.cms-faq--js .cms-faq-item:not(.is-open) .cms-faq-a { display: none; }

/* ---- Breadcrumbs ---- */
.breadcrumbs { padding: 16px 0 0; font-size: 0.85rem; }
/* The breadcrumb bar sits directly on top of the content block, so it shares
   the page (or article) background — otherwise a strip of the body colour
   would cut across a coloured page. Only when a content block actually
   follows: on the blog listing the bar stays transparent. */
.breadcrumbs:has(+ .page-content) { background: var(--page-bg, transparent); }
.breadcrumbs:has(+ .page-content.article-single) { background: var(--article-bg, var(--page-bg, transparent)); }
.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--color-text-muted);
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: 6px; }
/* Separator: the dropdown-menu chevron pointing right, in the Secondary
   accent. The SVG viewBox is cropped exactly to the stroked arrow (no square
   padding), and the arrow sits 2px lower to line up with lowercase text. */
.breadcrumb-item:not(:first-child)::before {
    content: "";
    width: 5.3px; /* 9px × the cropped viewBox ratio (8.5/14.5) — no letterbox */
    height: 9px;
    flex: none;
    margin: 0 2px 0 3px;
    transform: translateY(1.5px);
    background-color: var(--color-accent2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='7.75%204.75%208.5%2014.5'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%206%206%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='7.75%204.75%208.5%2014.5'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%206%206%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb-item a { color: var(--color-text-muted); }
.breadcrumb-item a:hover { color: var(--color-link-hover); text-decoration: none; }
.breadcrumb-item.is-current span { color: var(--color-text); font-weight: 500; }
/* On a fullscreen banner the breadcrumbs sit below it (normal flow), so no
   special light-on-dark treatment is needed. */

/* ---- Video embed ---- */
.video-embed { margin: 40px 0; }
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ---- Gallery ----
   Fixed, even column counts: 6 per row on large screens, 4 on medium, 2 below
   700px. A gallery with fewer than 6 (resp. 4) photos drops its column count
   to the photo count, so a short gallery still spans the full width — the
   per-instance --g-cols-* custom properties are set inline by gallery.php. */
.page-gallery {
    display: grid;
    grid-template-columns: repeat(var(--g-cols-lg, 6), 1fr);
    gap: 12px;
    margin: 40px 0;
}
@media (max-width: 1100px) {
    .page-gallery { grid-template-columns: repeat(var(--g-cols-md, 4), 1fr); }
}
@media (max-width: 700px) {
    .page-gallery { grid-template-columns: repeat(2, 1fr); }
}
.gallery-thumb {
    display: block;
    border-radius: var(--radius-content);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-thumb { cursor: zoom-in; }
.gallery-thumb:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.gallery-thumb picture { display: block; width: 100%; height: 100%; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Fullscreen image lightbox ---- */
html.lb-lock { overflow: hidden; }
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(14, 17, 21, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.lb-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease;
}
.lb-stage {
    margin: 0;
    max-width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.lb-img {
    max-width: 94vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.lb-overlay.is-open .lb-img { transform: scale(1); opacity: 1; }
.lb-img.is-swapping { opacity: 0; transform: scale(0.97); transition: opacity 0.15s ease, transform 0.15s ease; }
.lb-caption {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    text-align: center;
    max-width: 70ch;
}
.lb-btn {
    position: fixed;
    z-index: 2; /* above the image/stage, otherwise the picture covers the arrows */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.lb-btn:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.08); }
.lb-btn:active { transform: scale(0.96); }
.lb-close { top: 20px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
/* Keep the image clear of the side arrows on narrow screens. */
@media (max-width: 600px) {
    .lb-btn { width: 40px; height: 40px; }
    .lb-close { top: 12px; right: 12px; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-img { max-width: calc(100vw - 96px); }
}

/* ---- Blog listing ---- */
.blog-listing { padding: 60px 0; }
.blog-intro { margin: 16px 0 8px; }
.category-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
/* Category buttons = the "Sekundární tlačítko" surface. */
.category-btn {
    display: inline-block;
    padding: 8px 18px;
    border: var(--btn2-border, 1px solid var(--color-border));
    border-radius: var(--btn2-radius, var(--radius-sm));
    background: var(--btn2-bg, #f6f8fa);
    color: var(--btn2-text, var(--color-text));
    text-transform: var(--btn2-transform, none);
    box-shadow: var(--btn2-shadow, none);
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* Hover follows the secondary-button hover surface. */
.category-btn:hover {
    background: var(--btn2-bg-hover, var(--color-border));
    color: var(--btn2-text-hover, var(--btn2-text, var(--color-text)));
    border-color: var(--btn2-border-hover-color, var(--color-border));
    text-decoration: none;
}
/* Active = the currently-viewed category. Uses the secondary button's active
   colours (fallback: the accent fill, as before). */
.category-btn.active {
    background: var(--btn2-bg-active, var(--color-primary));
    border-color: var(--btn2-border-active-color, var(--btn2-bg-active, var(--color-primary)));
    color: var(--btn2-text-active, #fff);
    text-decoration: none;
}
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
    margin-top: 32px;
}
.article-card {
    position: relative; /* anchor for the whole-card stretched link */
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: var(--card-border, 1px solid var(--color-border));
    border-radius: var(--card-radius, var(--radius));
    overflow: hidden;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.04));
    transition: transform 0.2s, box-shadow 0.2s;
}
/* Body fills the rest of a stretched card so its colour reaches the bottom edge. */
.article-card-body { flex: 1 1 auto; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.10); }
.article-card-media {
    display: block;
    position: relative;
    z-index: 2; /* stays clickable above the stretched-link overlay */
    aspect-ratio: 16 / 10;
    background: var(--color-card);
    overflow: hidden; /* clips the corner ribbon */
}
.article-card-media picture { display: block; width: 100%; height: 100%; }
/* Article label — a ribbon across the top-right corner of the thumbnail.
   Longer texts wrap onto more lines (no clipping); the generous horizontal
   padding keeps the text clear of the ribbon's cut-off ends. The colour
   variants map to the theme colour roles (ArticleLabels::COLORS). */
.article-card-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 210px;
    /* The wide side padding caps a line at 100px, which still fits inside the
       clipped segment even on the outer row of a two-line ribbon. */
    padding: 6px 55px;
    /* Anchor the band's centre exactly at the corner, then push it 68px along
       the rotated perpendicular — the clipped segment is symmetric around the
       centred text for any number of lines. */
    transform: translate(50%, -50%) rotate(45deg) translateY(68px);
    text-align: center;
    line-height: 1.3;
    overflow-wrap: break-word;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-accent);
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    pointer-events: none;
}
.article-card-ribbon--accent2 { background: var(--color-accent2); }
.article-card-ribbon--dark    { background: var(--color-dark); }
.article-card-ribbon--success { background: var(--color-success); }
.article-card-ribbon--info    { background: var(--color-info); }
.article-card-ribbon--error   { background: var(--color-error); }
.article-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card-placeholder { display: block; width: 100%; height: 100%; background: var(--color-card); }
/* Page icon (subpage preview cards, Settings → General → Pages): layered as an
   overlay ABOVE the thumbnail — the icon sits scaled down and centred, with the
   image (or the bare card colour) underneath. */
.article-card-icon-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.article-card-icon-overlay picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.article-card-icon-overlay img {
    width: auto;
    height: auto;
    max-width: 44%;
    max-height: 52%;
    object-fit: contain;
    /* Legibility over a photo underneath. */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.28));
}
/* Card with BOTH a page-icon overlay and a thumbnail photo: the media goes
   black and the photo drops to 50% so the centred icon stays legible. The
   thumbnail is the media's direct-child <picture>; the icon's own <picture>
   lives inside .article-card-icon-overlay, so it is left untouched. */
.article-card-media:has(.article-card-icon-overlay):has(> picture) { background: #000; }
.article-card-media:has(.article-card-icon-overlay) > picture img { opacity: 0.5; }
.article-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; background: var(--color-card); }
.article-card-date { font-size: 0.8rem; color: var(--color-text-muted); }
/* Category label above the title — base size, bold, uppercase, accent. */
.article-card-cat {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}
.article-card-title { font-size: 1.2rem; line-height: 1.3; }
.article-card-title a { color: var(--color-text); position: relative; z-index: 2; }
.article-card-title a:hover { color: var(--color-link-hover); text-decoration: none; }
.article-card-excerpt { color: var(--color-text-muted); font-size: 0.95rem; }
/* Read-more is the stretched link: its ::after covers the whole card, so the
   entire box is clickable. It also reacts to the card hover. */
.article-card-more {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: color 0.2s;
}
/* Arrow glyph after the label (mask → inherits the link colour). It slides
   right on card hover; no underline. */
.article-card-more::before {
    content: "";
    order: 2;
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208h9'/%3E%3Cpath%20d='M8.5%204.5%2012%208l-3.5%203.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208h9'/%3E%3Cpath%20d='M8.5%204.5%2012%208l-3.5%203.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
}
.article-card-more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.article-card:hover .article-card-more { color: var(--color-accent-d1); text-decoration: none; }
.article-card:hover .article-card-more::before { transform: translateX(5px); }

.page-children { margin-top: 44px; }

.empty-note { color: var(--color-text-muted); margin-top: 24px; }

/* ---- Pagination ---- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 48px; justify-content: center; }
/* Pager buttons ARE secondary buttons (same tokens incl. hover); only the
   compact sizing is their own. The active page uses the btn2 active state. */
.page-link {
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    font-weight: 600;
    background: var(--btn2-bg, var(--color-surface, #f6f8fa));
    color: var(--btn2-text, var(--color-text));
    text-transform: var(--btn2-transform, none);
    border: var(--btn2-border, 2px solid transparent);
    border-radius: var(--btn2-radius, var(--radius-btn));
    box-shadow: var(--btn2-shadow, none);
}
.page-link:hover {
    background: var(--btn2-bg-hover, var(--color-border));
    color: var(--btn2-text-hover, var(--btn2-text, var(--color-text)));
    border-color: var(--btn2-border-hover-color, var(--btn2-border-color, transparent));
    text-decoration: none;
}
.page-link.active { background: var(--btn2-bg-active, var(--color-primary)); border-color: var(--btn2-border-active-color, var(--btn2-bg-active, var(--color-primary))); color: var(--btn2-text-active, #fff); }

/* ---- Single article ---- */
/* Scoped to .page-content (not .article-single): the back link must keep its
   styling in the "article as page" mode too, which drops the article class. */
.page-content .article-back { margin-bottom: 16px; font-size: 0.9rem; }
.article-meta { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 24px; }

/* Article labels on the detail page: pennant-shaped strips (dovetail notch on
   the right, slight alternating tilt) — read as stickers/tags, deliberately
   NOT like clickable buttons (no radius, no hover, notched end). */
.article-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: -8px 0 20px;
}
.article-label {
    display: inline-block;
    padding: 6px 28px 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
    transform: rotate(-1.2deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.16));
}
.article-label:nth-child(even) { transform: rotate(1.2deg); }
.article-label--accent2 { background: var(--color-accent2); }
.article-label--dark    { background: var(--color-dark); }
.article-label--success { background: var(--color-success); }
.article-label--info    { background: var(--color-info); }
.article-label--error   { background: var(--color-error); }

/* Custom article metaboxes (label → value list) */
.article-metaboxes {
    margin: 36px 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 14px;
}
.article-metabox {
    display: grid;
    grid-template-columns: minmax(140px, 28%) 1fr;
    gap: 6px 24px;
}
.article-metabox dt { font-weight: 600; color: var(--color-text); }
.article-metabox dd { margin: 0; color: var(--color-text); }

/* ---- Hero (empty-site fallback) ---- */
.hero {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
}
.hero h1 { color: #fff; font-size: 3rem; margin-bottom: 16px; }
.hero p { font-size: 1.2rem; opacity: 0.9; }

/* ---- Error page ---- */
.error-page { text-align: center; padding: 80px 24px; }
.error-page h1 { font-size: 6rem; font-weight: 800; color: var(--color-border); }
.btn-front {
    display: inline-block;
    padding: 12px 32px;
    background: var(--btn-bg, var(--color-primary));
    color: var(--btn-text, #fff);
    border: var(--btn-border, 2px solid var(--color-button-border));
    border-radius: var(--btn-radius, var(--radius-btn));
    text-transform: var(--btn-transform, none);
    box-shadow: var(--btn-shadow, none);
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
    margin-top: 16px;
}
.btn-front:hover { background: var(--btn-bg-hover, var(--color-primary-dark)); color: var(--btn-text, #fff); text-decoration: none; }

/* ---- Content buttons (TinyMCE "Button" element) ----
   Styled by the "Tlačítko" / "Invertní tlačítko" surface panels; every --btn-*
   / --btninv-* custom property falls back to the previous accent-driven look. */
.btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--btn-bg, var(--color-primary));
    color: var(--btn-text, #fff);
    border: var(--btn-border, 2px solid var(--color-button-border));
    border-radius: var(--btn-radius, var(--radius-btn));
    text-transform: var(--btn-transform, none);
    box-shadow: var(--btn-shadow, none);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--btn-bg-hover, var(--color-primary-dark)); border-color: var(--btn-border-hover-color, var(--btn-border-color, var(--color-button-border-hover))); color: var(--btn-text-hover, var(--btn-text, #fff)); text-decoration: none; }
.btn-invert {
    background: transparent;
    color: var(--btninv-color, var(--color-primary));
    border: var(--btninv-border, 2px solid var(--btninv-color, var(--color-button-border)));
    border-radius: var(--btninv-radius, var(--radius-btn));
    box-shadow: var(--btninv-shadow, none);
    text-transform: var(--btninv-transform, none);
}
/* Inverted button keeps the transparent fill on hover; only border + text change. */
.btn-invert:hover {
    background: transparent;
    color: var(--btninv-color-hover, var(--color-button-border-hover));
    border-color: var(--btninv-border-hover-color, var(--btninv-color-hover, var(--btninv-border-color, var(--btninv-color, var(--color-button-border-hover)))));
}
/* Secondary button = the "Sekundární tlačítko" surface. */
.btn-secondary {
    background: var(--btn2-bg, var(--color-surface, #f6f8fa));
    color: var(--btn2-text, var(--color-text));
    border: var(--btn2-border, 2px solid transparent);
    border-radius: var(--btn2-radius, var(--radius-btn));
    box-shadow: var(--btn2-shadow, none);
    text-transform: var(--btn2-transform, none);
}
.btn-secondary:hover { background: var(--btn2-bg-hover, var(--color-border)); color: var(--btn2-text-hover, var(--btn2-text, var(--color-text))); border-color: var(--btn2-border-hover-color, var(--btn2-border-color, transparent)); }
.content-body a.btn { text-decoration: none; }
.content-body .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.content-body .btn-row .btn { margin: 0; }

/* ---- Bottom page sections (latest articles / reference customers / partners / certificates) ----
   Full-width bands between the page content and the footer, opted into per
   page. Fill/gradient, background image and the top border come from each
   section's surface panel (Settings → Appearance); unset tokens fall back to
   the page background / no border, like the footer.

   Layer order bottom → top: fill (colour + gradient) on the section itself →
   optional background image (::before, own opacity) → inner shadow (::after,
   so it draws ABOVE the image) → the content (.container, z-index 1). */
/* No outer margin: the gap above the sections is the content block's own
   (coloured) bottom padding, so a page background stays unbroken. */
.showcase-sections { margin-top: 0; }
.showcase-section { padding: 52px 0 60px; position: relative; }
/* Large screens get 40 % more breathing room above/below the content block and
   the module bands; small screens keep the tighter original rhythm. */
@media (min-width: 1100px) {
    .page-content { padding-top: 84px; padding-bottom: 84px; }
    .showcase-section { padding-top: 73px; padding-bottom: 84px; }
}
.showcase-section::before,
.showcase-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.showcase-section::before { background-position: center; background-size: cover; background-repeat: no-repeat; }
.showcase-section > .container { position: relative; z-index: 1; }
/* Reference customers / partners / certificates: full-width container (no
   max-width cap) — only the container's own side padding limits the content. */
.showcase-section--clients > .container,
.showcase-section--partners > .container,
.showcase-section--certs > .container,
.showcase-section--args > .container { max-width: none; }
.showcase-section--artprev  { background: var(--artprev-bg,  var(--color-bg)); border-top: var(--artprev-border,  none); }
.showcase-section--artprev::before  { background-image: var(--artprev-img, none); opacity: var(--artprev-img-o, 1); background-position: var(--artprev-img-pos, center); background-size: cover; }
.showcase-section--artprev::after   { box-shadow: var(--artprev-shadow, none); }
.showcase-section--clients  { background: var(--clients-bg,  var(--color-bg)); border-top: var(--clients-border,  none); }
.showcase-section--clients::before  { background-image: var(--clients-img, none); opacity: var(--clients-img-o, 1); background-position: var(--clients-img-pos, center); background-size: cover; }
.showcase-section--clients::after   { box-shadow: var(--clients-shadow, none); }
.showcase-section--partners { background: var(--partners-bg, var(--color-bg)); border-top: var(--partners-border, none); }
.showcase-section--partners::before  { background-image: var(--partners-img, none); opacity: var(--partners-img-o, 1); background-position: var(--partners-img-pos, center); background-size: cover; }
.showcase-section--partners::after  { box-shadow: var(--partners-shadow, none); }
.showcase-section--certs    { background: var(--certs-bg,    var(--color-bg)); border-top: var(--certs-border,    none); }
.showcase-section--certs::before  { background-image: var(--certs-img, none); opacity: var(--certs-img-o, 1); background-position: var(--certs-img-pos, center); background-size: cover; }
.showcase-section--args     { background: var(--args-bg,     var(--color-bg)); border-top: var(--args-border,     none); }
.showcase-section--args::before  { background-image: var(--args-img, none); opacity: var(--args-img-o, 1); background-position: var(--args-img-pos, center); background-size: cover; }
.showcase-section--args::after   { box-shadow: var(--args-shadow, none); }

/* A module's own standalone page renders the full listing inline in
   .page-content instead of as a band: no background, no side padding of its
   own, just a centred block following the page text. */
.page-modules { margin-top: 40px; text-align: center; }
.page-module + .page-module { margin-top: 52px; }

/* ---- Sales arguments: heading + text + image cards (not a logo grid) ---- */
/* Centred row, NOT a justified grid: the cards keep their natural width and sit
   next to each other in the middle, wrapping onto further centred rows. */
.argument-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 34px 56px;
    margin-top: 0;
}
/* Plain block capped at 250px — the card takes the width its content needs up
   to that cap, it is never stretched to a shared track width. (The "image on
   the left" layout below re-declares display:flex for its own row.) */
.argument-card { display: block; max-width: 250px; text-align: center; }
.argument-card-media { margin-bottom: 18px; }
/* Fixed icon height; the width follows the image's own ratio. */
.argument-card-media picture { display: block; }
.argument-card-media img {
    display: block;
    margin: 0 auto;
    height: 100px;
    width: auto;
    max-width: 100%;
}
/* The "value" is the loudest thing in the block: 30 % above the H1 scale. */
.argument-card-title {
    font-size: 3.12rem;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 10px;
}
.argument-card-text { color: var(--color-text); line-height: 1.65; }

/* ---- Layout "image on the left" ----
   Icon on the left, the value + description stacked to its right. */
.argument-grid--left .argument-card {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
}
.argument-grid--left .argument-card-media { margin-bottom: 0; flex: none; }
.argument-grid--left .argument-card-media img { margin: 0; }
.argument-grid--left .argument-card-body { min-width: 0; }
.argument-grid--left .argument-card-title { margin-bottom: 2px; }

@media (max-width: 600px) {
    .argument-grid { gap: 26px; }
    .argument-card { max-width: none; flex-basis: 100%; }
    .argument-card-title { font-size: 2.4rem; }
}
.showcase-section--certs::after     { box-shadow: var(--certs-shadow, none); }
/* One look for every section heading — the showcase modules (reference
   customers / partners / certificates) AND the latest-articles teaser: H1 size,
   uppercase, centred, with a generous gap above the grid. The following grid's
   own top margin is zeroed so the heading's bottom margin is the sole,
   controlled gap. */
.showcase-heading {
    text-align: center;
    margin: 0 0 39px;
    font-size: 2.4rem;
    text-transform: uppercase;
}
.showcase-heading + .showcase-grid,
.showcase-heading + .article-grid { margin-top: 0; }
/* Latest-articles section: card grid + the optional centred button below. */
.showcase-section .article-grid { margin-top: 26px; }
.latest-articles-more { text-align: center; margin: 34px 0 0; }
.showcase-cat-heading { text-align: center; margin: 30px 0 0; font-weight: 400; }
.showcase-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 44px;
    margin-top: 26px;
}
/* Every logo shares one height; width follows the image's aspect ratio. */
.showcase-item { display: flex; align-items: center; }
.showcase-item picture { display: flex; }
.showcase-item img { height: 80px; width: auto; max-width: 240px; object-fit: contain; }
a.showcase-item { transition: opacity 0.2s ease, transform 0.2s ease; }
a.showcase-item:hover { opacity: 0.8; transform: translateY(-2px); }

/* ---- Footer ---- */
/* No top margin: the separation from the content is that block's own
   (coloured) bottom padding, so a page background reaches the footer edge. */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); box-shadow: var(--footer-shadow, none); border-top: var(--footer-border, none); position: relative; }
/* Optional background image (Appearance → Footer), painted over the fill and
   under the content; always cropped to cover, anchored by its focal point. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--footer-img, none);
    opacity: var(--footer-img-o, 1);
    background-position: var(--footer-img-pos, center);
    background-size: cover;
    background-repeat: no-repeat;
}
.site-footer > * { position: relative; z-index: 1; }
.footer-columns {
    display: grid;
    grid-template-columns: var(--footer-cols, 1.5fr 1fr 1fr 1fr);
    gap: 40px;
    padding: 60px var(--space);
}
.footer-col h4 {
    color: var(--color-footer-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.footer-col ul { list-style: none; }
/* Several menus stacked in one footer placement, each with its own title. */
.footer-col .footer-menu + .footer-menu { margin-top: 34px; }
/* Optional chevron (Secondary accent) before each footer-menu link
   (Settings → Footer). */
.footer-arrows .footer-menu li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.footer-arrows .footer-menu li a::before {
    /* Cropped exactly to the arrow — its left edge IS the link's left edge. */
    content: "";
    width: 5.5px; /* 9.4px × the cropped viewBox ratio (8.5/14.5) — no letterbox */
    height: 9.4px;
    flex: none;
    margin-right: 3px;
    background-color: var(--color-accent2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='7.75%204.75%208.5%2014.5'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%206%206%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='7.75%204.75%208.5%2014.5'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%206%206%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: var(--color-footer-text); font-size: 0.9rem; }
.footer-col ul li a:hover { color: var(--color-footer-heading); text-decoration: none; }
/* Contact (info) column sits after the menu columns (order: 1). */
.footer-col-info { order: 1; font-size: 0.9rem; line-height: 1.7; }
.footer-col-info a { color: var(--color-footer-text); }
.footer-col-info a:hover { color: var(--color-footer-heading); }
/* The company name mirrors the footer menu titles (size/weight/spacing/offset)
   so the columns' first lines align — deliberately WITHOUT the uppercase. */
.footer-col-info strong {
    color: var(--color-footer-heading);
    display: block;
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.footer-address { display: block; }
.footer-reg { display: block; margin-top: 12px; font-size: 0.85rem; opacity: 0.85; }

/* Prominent phone + email with icons */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 4px;
}
.footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-footer-heading) !important;
    width: fit-content;
}
.footer-contact-item:hover { color: var(--color-link-hover) !important; }
/* Plain icon — no circle. */
.footer-contact-icon {
    display: inline-flex;
    flex: none;
    color: inherit;
    transition: color 0.2s;
}
.footer-contact-icon svg { width: 20px; height: 20px; }

/* Social icons */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Filled with the Primary accent; hover darkens it so there is still
       feedback (the circle is already accent-coloured at rest). */
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff !important;
    transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-social-link svg { width: 19px; height: 19px; }
.footer-social-link:hover {
    transform: translateY(-3px);
    color: #fff !important;
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Bottom bar: copyright · legal menu · credit */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}
.footer-bottom p { font-size: 0.85rem; color: var(--color-footer-text); opacity: 0.8; margin: 0; }
.footer-legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.footer-legal li { margin: 0; }
/* Same colour treatment as the "designed by" credit link next to it. */
.footer-legal a { font-size: 0.85rem; color: var(--color-footer-heading); }
.footer-legal a:hover { color: var(--color-link-hover); text-decoration: none; }
.footer-credit { display: inline-flex; gap: 6px; }
.footer-credit a { color: var(--color-footer-heading); font-weight: 600; }
.footer-credit a:hover { color: var(--color-link-hover); text-decoration: none; }

/* Obfuscated email shown reversed in source, flipped back for humans via CSS. */
.cx-rev { unicode-bidi: bidi-override; direction: rtl; }

/* ---- Cookie / GDPR consent bar ---- */
/* Visible by default (so it shows even before JS); JS adds .is-dismissed once a
   choice is stored, or while the mobile menu is open. */
.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}
.cookie-bar.is-dismissed {
    transform: translateY(110%);
    visibility: hidden;
}
/* A choice already exists: the pre-paint script (consent-init.js) set this class
   on <html> before the bar painted, so it never flashes on subsequent loads. */
.cc-decided .cookie-bar { display: none; }
/* Reserve space at the bottom equal to the bar's real height so the (fixed) bar
   never hides the footer — the whole page, footer included, stays scrollable
   above it. frontend.js keeps --cc-bar-h in sync via a ResizeObserver (handles
   text reflow at any width) and resets it to 0 when the bar is dismissed. */
body { padding-bottom: var(--cc-bar-h, 0px); transition: padding-bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cookie-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
}
.cookie-bar-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    flex: 1 1 420px;
}
.cookie-bar-text a {
    color: var(--color-footer-heading);
    text-decoration: underline;
    white-space: nowrap;
}
.cookie-bar-text a:hover { color: var(--color-primary); }
.cookie-bar-actions {
    display: flex;
    gap: 12px;
    flex: none;
}
.cookie-bar .btn-sm-cc { padding: 10px 22px; font-size: 0.9rem; border-radius: var(--radius-pill); }
/* Reject reads in white over the dark bar, like the banner's inverted button. */
.cookie-bar .btn-invert {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}
.cookie-bar .btn-invert:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: #fff;
}

/* ---- Cookie opt-in / opt-out widget (on-page, e.g. privacy policy) ----
   Painted with the footer colours (dark by default), so its text follows the
   footer text colour instead of the page palette. */
.cookie-settings {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 24px;
    margin: 32px 0;
}
.cookie-settings-title { font-size: 1.2rem; margin-bottom: 10px; color: inherit; }
.cookie-settings-line { margin-bottom: 16px; color: inherit; }
.cookie-settings-status { color: inherit; font-weight: 600; }
.cookie-settings[data-state="accept"] .cookie-settings-status { color: var(--color-success); }
.cookie-settings[data-state="reject"] .cookie-settings-status { color: var(--color-error); }
.cookie-settings-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-settings .btn-sm-cc { padding: 10px 22px; font-size: 0.9rem; border-radius: var(--radius-pill); }

/* ---- Contact form ---- */
.contact-form-wrap { max-width: 640px; margin: 32px 0; }
/* Honeypot: kept in the DOM and submittable, but invisible/unfocusable. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-form .form-field { margin-bottom: 18px; }
.contact-form label,
.contact-form .field-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-heading);
}
.contact-form .req { color: var(--color-error); }
/* Form fields follow the "Formulářová pole" surface panel (--input-* tokens);
   every fallback keeps the previous look until a project saves the panel. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="date"],
.contact-form input[type="time"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--input-text, var(--color-text));
    background: var(--input-bg, var(--color-bg));
    border: var(--input-border, 1px solid var(--input-border-color, var(--color-border)));
    border-radius: var(--input-radius, var(--radius-sm));
    box-shadow: var(--input-shadow, none);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    /* Accent focus ring layered over any configured field shadow. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent),
                var(--input-shadow, 0 0 rgba(0,0,0,0));
}
.contact-form .choice-group { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.contact-form .choice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}
.contact-form .choice input { width: auto; margin-top: 3px; flex: none; }
.contact-form .choice span { font-weight: 400; }
.contact-form .has-error input,
.contact-form .has-error textarea,
.contact-form .has-error select { border-color: var(--color-error); }
.contact-form .field-error {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--color-error);
}
.contact-form .form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.contact-form .form-required-note { font-size: 0.85rem; color: var(--color-text-muted); }
/* Submit matches the site's primary buttons, incl. their configured radius
   (--btn-radius from the "Tlačítko" panel; no forced pill). */
.contact-form .form-actions .btn { padding: 14px 36px; font-size: 1rem; letter-spacing: 0.02em; }

.form-message {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-weight: 500;
}
.form-message-success {
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
}
.form-message-error {
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
}

/* Form heading + thank-you box */
.contact-form-title { font-size: 1.5rem; margin-bottom: 22px; }
.form-thankyou {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 32px 24px;
}
.form-thankyou-icon {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}
.form-thankyou-icon svg { width: 30px; height: 30px; }
.form-thankyou-text { font-size: 1.15rem; font-weight: 500; color: var(--color-heading); margin: 0; }

/* ---- Contact page template (content on top, info + map | form) ---- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 44px;
    align-items: start;
}
/* A form page without content: only the form box, left-aligned. */
.contact-layout--single {
    grid-template-columns: minmax(0, 680px);
    justify-content: start;
}
/* Both contact columns are full cards — framed by the "Karty" surface panel. */
.contact-col {
    background: var(--color-card);
    border: var(--card-border, 1px solid var(--color-border));
    border-radius: var(--card-radius, var(--radius));
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.04));
    padding: 32px;
}
.contact-col-form .contact-form-wrap { margin: 0; max-width: none; }
.contact-info-heading { font-size: 1.5rem; margin-bottom: 22px; }
.contact-info-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; }
.contact-info-item { display: flex; gap: 14px; align-items: center; line-height: 1.5; }
.contact-info-item-top { align-items: flex-start; }
/* Plain icon — no circle, tinted with the Primary accent role. */
.contact-info-icon { flex: none; display: inline-flex; color: var(--color-accent); }
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info-strong { font-weight: 700; color: var(--color-heading) !important; }
.contact-info-strong:hover { color: var(--color-link-hover) !important; }
.contact-info-address { color: var(--color-text); font-size: 0.9rem; line-height: 1.6; }
.contact-info-address strong { color: var(--color-heading); }
.contact-info-reg { display: block; margin-top: 8px; color: var(--color-text-muted); }
.contact-info-sep { border: none; border-top: 1px solid var(--color-border); margin: 22px 0; }
/* Addresses grouped by country — a country-name heading shows only when the
   addresses span more than one country. */
/* Separator between country sections (same look as .contact-info-sep). */
.contact-country-group + .contact-country-group {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}
.contact-country-heading { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 0 0 15px; }
.contact-country-group .contact-info-item-top + .contact-info-item-top { margin-top: 14px; }
/* Opening hours (Settings → Opening hours): filled-in days under the address. */
.contact-hours-heading { font-weight: 700; color: var(--color-text); margin: 0 0 10px; }
.contact-hours-list { list-style: none; font-size: 0.9rem; margin-top: 8px; padding: 0; display: grid; gap: 6px; max-width: 320px; }
/* Fixed day column (values stay aligned) instead of space-between — keeps the
   day→value gap small regardless of the list width. */
.contact-hours-list li { display: flex; gap: 16px; }
.contact-hours-day { flex: 0 0 90px; color: var(--color-text); }
.contact-hours-value { color: var(--color-text-muted); }
/* Social icons reused from the footer, restyled for a light page. */
.contact-info .footer-social { margin: 0; }
/* Per-country social icons / opening hours inside a country section
   (mutations with their own profiles or hours). */
.contact-country-group .footer-social { margin-top: 14px; }
.contact-country-group .contact-info-hours { margin-top: 14px; }
.contact-info .footer-social-link {
    background: var(--color-primary) !important;
    border-color: var(--color-primary);
    color: #fff !important;
}
.contact-info .footer-social-link:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark);
    color: #fff !important;
}
/* Left contact column: the details card with the standalone map card below. */
.contact-col-stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}
/* The map is its own box framed exactly like a card (radius / border / shadow
   from the Card panel); the inside is just the map, no padding. */
.contact-map-card {
    background: var(--color-card);
    border: var(--card-border, 1px solid var(--color-border));
    border-radius: var(--card-radius, var(--radius));
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.04));
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.contact-map-card iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Inline per-section map (multiple addresses): framed like the standalone
   card, shown inside the contact box below each section's social icons. */
.contact-map-inline {
    margin-top: 20px;
    border: var(--card-border, 1px solid var(--color-border));
    border-radius: var(--card-radius, var(--radius));
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.contact-map-inline iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map-inline--dark iframe { filter: invert(0.9) hue-rotate(180deg) contrast(0.92); }
/* Dark map (Settings → Integrations): the Embed API has no dark theme, so the
   iframe is inverted with the hues rotated back — the standard dark-map trick. */
.contact-map-card--dark iframe { filter: invert(0.9) hue-rotate(180deg) contrast(0.92); }
/* Two-column contact layout: the left stack stretches to the row height, and
   the map grows to fill it — its bottom edge lines up with the form box. */
@media (min-width: 769px) {
    .contact-col-stack { align-self: stretch; }
    .contact-col-stack .contact-map-card { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
}

/* ---- Responsive ---- */
/* Keyframes live at top level — they cannot be nested inside a selector. */
@keyframes navItemIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Collapsed ("mobile") navigation -------------------------------------
 * Driven by .nav-collapsed on <html> instead of a media query, so the menu can
 * collapse as soon as its first item comes near the logo — the breakpoint then
 * follows the REAL item widths rather than a fixed viewport size.
 * nav-init.js sets the class before the first paint on narrow viewports (so the
 * desktop bar never flashes); frontend.js refines it by measuring afterwards. */
.nav-collapsed .nav-toggle { display: block; align-self: center; }
    /* Keep the logo (and toggle) above the fullscreen menu, which lives inside
       the header's stacking context. Back in the flex flow it must reset the
       desktop absolute-position offsets (left/top/height) and push itself LEFT
       (margin-right:auto) — .header-inner justifies to flex-end, which would
       otherwise dump a text logo next to the hamburger on the right. */
.nav-collapsed .site-logo {
        position: relative;
        z-index: 2;
        left: 0;
        top: 0;
        height: auto;
        margin-right: auto;
        align-self: center;
    }
    /* The mobile logo sits in the flex row and drives the header height —
       keep the base 40px here (the +15px applies on desktop only). */
.nav-collapsed body.has-topbar .site-logo img { height: 40px; }

    /* Lock page scroll while the menu is open: only the overlay itself scrolls,
       the content underneath stays put. */
html.nav-collapsed:has(.nav-toggle-cb:checked),
.nav-collapsed body:has(.nav-toggle-cb:checked) { overflow: hidden; }

    /* Fullscreen menu that fills the viewport *below* the header, so its content is
       clipped at the header's bottom edge — scrolled items never bleed up under
       the header. It is its own scroll container (overscroll contained so reaching
       its edge doesn't chain to the page); content aligns to the top once it
       overflows ("safe center") so nothing is clipped out of reach on small phones.
       The menu reveals with a fade while its rows stagger in. */
.nav-collapsed .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-content: safe center;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 32px 20px calc(40px + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity    0.3s ease,
            visibility 0.3s;
    }
    /* Keep the menu anchored below the (taller) header when the admin bar is shown. */
.nav-collapsed body.has-adminbar .main-nav { top: calc(var(--header-height) + 36px); }

    /* Opaque header while the menu is open, so a transparent banner header doesn't
       show the banner above the menu. */
.nav-collapsed body:has(.nav-toggle-cb:checked) .site-header {
        background: var(--color-bg);
        border-bottom-color: var(--color-border);
        box-shadow: 0 1px 12px rgba(0,0,0,0.07);
    }

.nav-collapsed .nav-toggle-cb:checked ~ .main-nav {
        opacity: 1;
        visibility: visible;
    }

    /* The open overlay has a solid light background, so swap to the dark logo and
       force dark link text even when the (still transparent) banner header would
       otherwise show the light logo / tint the links white. */
.nav-collapsed body.has-banner .site-header:not(.header--solid) .nav-toggle-cb:checked ~ .site-logo .logo-light { display: none; }
.nav-collapsed body.has-banner .site-header:not(.header--solid) .nav-toggle-cb:checked ~ .site-logo .logo-dark  { display: block; }

.nav-collapsed body.has-banner .site-header:not(.header--solid) .nav-toggle-cb:checked ~ .main-nav > ul > li > a,
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li > a {
        color: var(--color-text);
    }
    /* In the fullscreen menu the dropdown is expanded inline (no hover on touch):
       the current language, then the others listed below, all centered. */
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-dd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-dd-current { padding: 8px; font-size: 1rem; color: var(--color-text); }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-dd-caret { display: none; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-dd-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-dd-menu a { color: var(--color-text-muted); font-size: 1rem; }
    /* Mirror the current-language element's hover (font colour only) — no
       dropdown-style hover background like on desktop. */
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-dd-menu a:hover {
        background: none;
        color: var(--header-link-hover, var(--color-accent));
    }

.nav-collapsed .main-nav > ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: 460px;
    }
.nav-collapsed .main-nav ul { flex-direction: column; gap: 0; width: 100%; }
.nav-collapsed .main-nav > ul > li { text-align: center; }
.nav-collapsed .main-nav > ul > li > a {
        padding: 16px;
        font-size: 1.4rem;
        font-weight: 600;
        /* Shrink the link to its label and centre the shrunken box. The <li>
           grows to the submenu's width the moment that submenu opens, and a
           full-width <a> would take the (absolutely placed) caret out to that
           far edge with it. fit-content keeps the caret pinned to the label.
           NOTE: fit-content + auto margins, not display:inline-block — the
           latter would add the inline descender gap under every item. */
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    /* Centered fullscreen menu: restore the last link's right padding. */
.nav-collapsed .main-nav > ul > li:last-child > a { padding-right: 16px; }
    /* Inside the fullscreen menu the submenu is a plain inline list: no panel
       background, border, shadow or rounding at all. */
.nav-collapsed .submenu {
        position: static;
        box-shadow: none;
        border: 0;
        background: none;
        border-radius: 0;
        text-align: center;
        /* Padding would survive the 0fr collapse below (only the CONTENT box is
           zeroed), leaving an 8px gap under a closed item — so the trailing
           space lives on the last row instead. */
        padding: 0;
    }
.nav-collapsed .submenu > li:last-child { padding-bottom: 8px; }
    /* Slide open instead of snapping: the <li> becomes a two-row grid (link +
       submenu) and the submenu track animates 0fr → 1fr, which reaches the
       panel's natural height without hardcoding a max-height. The submenu stays
       display:block throughout — the track does the hiding — so the DESKTOP
       hover/focus rules (more specific than a bare .submenu) are neutralised by
       naming them here as well. Browsers that cannot interpolate
       grid-template-rows simply snap, i.e. the previous behaviour. */
.nav-collapsed .main-nav > ul > li.has-children {
        display: grid;
        grid-template-rows: auto 0fr;
        transition: grid-template-rows 0.3s ease;
    }
.nav-collapsed .main-nav > ul > li.has-children.is-open { grid-template-rows: auto 1fr; }
    /* Must sit AFTER the rule it cancels — same specificity, source order wins. */
@media (prefers-reduced-motion: reduce) {
    .nav-collapsed .main-nav > ul > li.has-children { transition: none; }
}
.nav-collapsed .submenu,
.nav-collapsed .has-children:hover .submenu,
.nav-collapsed .has-children:focus-within .submenu,
.nav-collapsed .has-children.is-open > .submenu {
        display: block;
        overflow: hidden;
        min-height: 0;
    }

    /* 30 % larger icon with a generous hit area, so the caret is comfortably
       tappable next to the (still clickable) label. Taken OUT of the text flow
       (absolute) so a parent's label centres exactly like an arrow-less one —
       otherwise label+arrow centre together and the text sits off to the left. */
    /* left:100%, NOT right:0 — the fullscreen <ul> keeps the base
       `align-items:center`, so in its column layout every <li> (and with it the
       <a>) shrinks to its label. right:0 would therefore land the caret on top
       of the last letter; left:100% parks it just past the label instead. */
.nav-collapsed .main-nav li > a { position: relative; }
.nav-collapsed .nav-caret {
        position: absolute;
        left: 100%;
        top: 50%;
        /* left:100% lands on the link's border edge, i.e. already 16px past the
           label (its own padding) — pull back over that, then set the real gap
           as the caret's left padding. Net distance label → icon = 15px. */
        margin: 0 0 0 -16px;
        padding: 10px 12px 10px 15px;
        transform: translateY(-50%);
    }
    /* The desktop rule (.has-children:hover > a .nav-caret) sets a bare
       rotate(180deg), which would drop the translateY and make the caret jump
       down on hover — restate it, and keep is-open AFTER it (equal specificity,
       source order decides) so an open item stays flipped. */
.nav-collapsed .has-children:hover > a .nav-caret { transform: translateY(-50%); }
.nav-collapsed .has-children.is-open > a .nav-caret { transform: translateY(-50%) rotate(180deg); }
.nav-collapsed .nav-caret svg { width: 21px; height: 21px; }

.nav-collapsed .submenu li a { font-size: 1.05rem; padding: 10px; color: var(--color-text-muted); }
    /* No hover pill in the fullscreen menu — the submenu links recolour to the
       accent exactly like the parent items do. Overrides the panel rule
       `.submenu li a:hover` (0,3,1) on specificity (0,4,1). */
.nav-collapsed .submenu li a:hover {
        background: none;
        color: var(--color-primary);
    }

    /* Stagger the menu rows in once the overlay is open */
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li {
        animation: navItemIn 0.4s ease both;
    }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li:nth-child(1) { animation-delay: 0.12s; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li:nth-child(2) { animation-delay: 0.18s; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li:nth-child(3) { animation-delay: 0.24s; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li:nth-child(4) { animation-delay: 0.30s; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li:nth-child(5) { animation-delay: 0.36s; }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav > ul > li:nth-child(n+6) { animation-delay: 0.42s; }

.nav-collapsed .lang-switch {
        display: flex;
        justify-content: center;
        margin: 24px 0 0;
        padding: 16px 0 0;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
.nav-collapsed .nav-toggle-cb:checked ~ .main-nav .lang-switch {
        animation: navItemIn 0.4s ease 0.42s both;
    }
/* Don't let the consent bar cover the bottom of the open fullscreen menu. */
.nav-collapsed body:has(.nav-toggle-cb:checked) .cookie-bar { transform: translateY(110%); visibility: hidden; }

/* ---- Remaining small-screen rules (genuinely viewport-based) ------------- */
@media (max-width: 768px) {
    /* Fullscreen hero only (mirrors the desktop scoping) — a "default"
       (content-sized) banner must NOT stretch to the viewport on mobile.
       svh instead of vh so the URL bar never pushes the bottom off-screen;
       the overlay carries the base 100vh min-height, so it must switch to
       svh here too or the section would simply grow back to 100vh. */
    .page-banner--fullscreen:not(.page-banner--noimage),
    .page-banner--fullscreen:not(.page-banner--noimage) .banner-overlay { min-height: 100svh; }
    .page-banner--fullscreen:not(.page-banner--noimage) .banner-overlay .container { padding-top: calc(var(--header-height) + 48px); padding-bottom: 60px; }
    /* Content-sized banner: tighter rhythm than the desktop 80px. */
    .page-banner--default .banner-overlay .container,
    .page-banner--noimage .banner-overlay .container { padding-top: 48px; padding-bottom: 48px; }
    /* Mobile heading scale (steps the global one down). */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.65rem; }
    h3 { font-size: 1.35rem; }
    .page-title { font-size: 1.6rem; }
    .footer-columns { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--space); }
    .footer-bottom-inner { flex-direction: column; text-align: center; gap: 14px; }
    .contact-layout { grid-template-columns: 1fr; gap: 32px; }
    .article-metabox { grid-template-columns: 1fr; gap: 2px; }
    .content-body blockquote.cms-quote { padding: 32px 24px; }
    .content-body blockquote.cms-quote-quoted { padding-left: 48px; padding-right: 48px; }
    .content-body blockquote.cms-quote-quoted::before { top: 14px; left: 12px; width: 30px; height: 30px; }
    .content-body blockquote.cms-quote-quoted::after { bottom: 14px; right: 12px; width: 30px; height: 30px; }
    .cookie-bar-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-bar-actions { justify-content: center; }
    .hero h1 { font-size: 2rem; }
}

/* ==== Scroll-reveal (reveal-init.js) =====================================
   .reveal-on lands on <html> pre-paint (reveal-init.js) ONLY when the browser
   supports IntersectionObserver + this selector syntax and the user does not
   prefer reduced motion — so without JS or on old browsers nothing is hidden.
   The :where() list MUST mirror the SELECTOR constant in reveal-init.js.
   :where() keeps specificity at (0,1,0) so the .rv-in rule below always wins.
   Animation (not transition) with `backwards` fill on purpose: once it ends
   the reveal system declares NO transform at all, so the hover lifts
   (.article-card, .gallery-thumb, a.showcase-item, .cms-col--link) keep
   working. Scoped to screen so print always shows everything. */
@media screen {
    .reveal-on :where(
        .page-title,
        .content-body:not(.contact-layout *) > :not(.cms-cols),
        .cms-col,
        .article-card,
        .gallery-thumb,
        .showcase-heading,
        .showcase-cat-heading,
        .showcase-item,
        .argument-card,
        .latest-articles-more,
        .contact-col-info,
        .contact-col-form,
        .contact-map-card
    ) { opacity: 0; }

    .reveal-on .rv-in {
        opacity: 1;
        animation: rvIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--rv-d, 0s) backwards;
    }
}
@keyframes rvIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}