/* ---------------------------------------------------------------------
 * mywheels.cz — base stylesheet
 *
 * Design goals:
 *   - Calm, trustworthy, medical-friendly (NHS / Medium vibe)
 *   - High readability: large body text, generous line height
 *   - Accessible: WCAG AA contrast, visible focus, dark mode, no tiny type
 *   - System fonts only (no external loads)
 *
 * Structure:
 *   1. Design tokens (custom properties, light + dark)
 *   2. Reset & base typography
 *   3. Layout primitives (wrap, stack, grid)
 *   4. Components (header, footer, hero, card, button, article body)
 *   5. Utilities
 * ------------------------------------------------------------------- */

/* 1. Design tokens ---------------------------------------------------- */

:root {
    /* Color — warm, soft palette. Light mode only by design
       (no prefers-color-scheme override — see note below). */
    --color-bg:        #faf7f2;   /* warm cream */
    --color-surface:   #ffffff;
    --color-surface-2: #f3ede2;   /* soft cream card wash */
    --color-border:    #e6ded0;   /* warm tan border */
    --color-fg:        #2a251f;   /* dark warm brown, not pure black */
    --color-fg-muted:  #6b6359;   /* warm gray */
    --color-accent:    #4a7c8e;   /* soft dusty teal-blue */
    --color-accent-2:  #2d5466;   /* deeper teal-blue for hovers */
    --color-accent-bg: #eaf2f6;   /* very pale blue tint */
    --color-danger:    #a8352a;
    --color-success:   #3a7a3a;

    /* Typography — Inter loaded via Bunny Fonts in base.html.twig.
       System stack is the fallback if the webfont fails. */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
    --font-serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Scale — readable but dense enough to show actual content
       above the fold. Article body overrides to a larger size for
       long-form reading (see .article-body below). */
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-h1: clamp(1.6rem, 3vw, 2.1rem);
    --fs-h2: clamp(1.2rem, 2vw, 1.45rem);
    --fs-h3: 1.05rem;
    --lh-body: 1.55;
    --lh-heading: 1.2;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* Layout */
    --content-max: 960px;
    --reading-max: 680px;   /* article body — narrower for readability */
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.04);
}

/* Dark mode intentionally disabled — the site is light-only for now.
   Content is read by users who may be in high-stress situations; a
   single predictable look is friendlier than auto theme switching. */

/* 2. Reset & base ----------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-fg);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-family: var(--font-sans);
    line-height: var(--lh-heading);
    color: var(--color-fg);
    margin: 0 0 var(--sp-4);
    font-weight: 700;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: var(--fs-h2); margin-top: var(--sp-5); }
h3 { font-size: var(--fs-h3); margin-top: var(--sp-4); }

p { margin: 0 0 var(--sp-4); }

a {
    color: var(--color-accent);
    text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover {
    color: var(--color-accent-2);
    text-decoration-color: var(--color-accent-2);
}

/* 2.1 Accessibility — focus + skip link ------------------------------- */

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-fg);
    color: var(--color-bg);
    padding: var(--sp-3) var(--sp-4);
    z-index: 100;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    left: var(--sp-4);
    top: var(--sp-4);
}

/* 3. Layout primitives ----------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
}

main { flex: 1; padding: var(--sp-5) 0 var(--sp-7); }

.stack > * + * { margin-top: var(--sp-5); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 1fr;          /* rows size to the tallest card in the row */
    gap: var(--sp-4);
    align-items: stretch;
}

/* 4. Components ------------------------------------------------------- */

/* 4.1 Site header — banner with overlaid brand + nav row below */

.site-header {
    position: relative;
    background: #bad6e6;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
}

/* Full-bleed banner image. Fixed height so it never dominates. */
.site-header__image {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: center 35%;
}

/* Overlay covers the banner and hosts the brand + nav row. */
.site-header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(255, 255, 255, 0.45) 55%,
        transparent 100%
    );
    display: flex;
    align-items: flex-start;
}
.site-header__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
}

/* Mobile: banner is decorative, brand and nav drop out of the overlay
   and sit in a dedicated white strip below the banner so nothing
   overflows and nothing looks clipped. */
@media (max-width: 720px) {
    .site-header { border-bottom: none; }
    .site-header__image { height: 80px; }
    .site-header__overlay {
        /* Mobile: release the absolute positioning and put content
           in its own row below the banner. */
        position: static;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        display: block;
    }
    .site-header__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        padding: var(--sp-3) 0 var(--sp-2);
    }
    .site-nav {
        width: 100%;
        justify-content: center;
        gap: var(--sp-4);
        flex-wrap: nowrap;
        padding-top: var(--sp-2);
        border-top: 1px solid var(--color-border);
    }
}

/* Brand — typography-only wordmark */
.brand {
    display: inline-flex;
    align-items: center;
    color: var(--color-fg);
    text-decoration: none;
    letter-spacing: -0.03em;
    line-height: 1;
}
.brand:hover { color: var(--color-accent-2); }
.brand__text {
    font-weight: 800;
    font-size: 2rem;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 8px rgba(255, 255, 255, 0.8);
}
@media (min-width: 720px) {
    .brand { padding-left: var(--sp-3); }
    .brand__text {
        font-size: 3rem;
    }
}
@media (max-width: 720px) {
    /* Center the brand above the nav row on mobile. */
    .brand {
        align-self: center;
        justify-content: center;
    }
    .brand__text {
        text-shadow: none;  /* on solid white strip, no glow needed */
    }
}

/* Main nav (center) */
.site-nav {
    display: flex;
    gap: var(--sp-5);
    align-items: center;
}
.site-nav a {
    color: var(--color-fg);
    text-decoration: none;
    font-weight: 600;
    padding: var(--sp-2) 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
.site-nav a:hover {
    color: var(--color-accent-2);
    border-bottom-color: var(--color-accent-2);
}

/* Right side — login button or user avatar menu */
.site-header__user {
    margin-left: auto;
}

/* Small button size variant */
.btn--sm {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
}

/* User avatar menu (<details>/<summary>) */
.user-menu {
    position: relative;
}
.user-menu summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1);
    border-radius: 999px;
    transition: background 0.15s;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover {
    background: rgba(255, 255, 255, 0.4);
}
.user-menu__name {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-transform: uppercase;
}
.user-menu__name {
    color: var(--color-fg);
    font-weight: 500;
    font-size: 0.95rem;
    padding-right: var(--sp-2);
}

.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--sp-2));
    min-width: 240px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2) 0;
    margin: 0;
    list-style: none;
    z-index: 200;
}
.user-menu__panel li { margin: 0; }
.user-menu__panel a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    color: var(--color-fg);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.12s, color 0.12s;
}
.user-menu__panel a:hover,
.user-menu__panel a:focus {
    background: var(--color-accent-bg);
    color: var(--color-accent-2);
    outline: none;
}
.user-menu__identity {
    padding: var(--sp-3) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.35;
}
.user-menu__divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--sp-2) 0;
}

/* Hide the user name text on very narrow screens, keep the avatar */
@media (max-width: 560px) {
    .user-menu__name { display: none; }
    .site-header__inner { gap: var(--sp-4); }
    .brand__text { font-size: 1.05rem; }
}

/* Categories dropdown — built on <details>/<summary> for keyboard
   accessibility without JavaScript. */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-fg);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after {
    content: "▾";
    font-size: 0.75em;
    margin-left: 2px;
    transition: transform 0.2s;
}
.nav-dropdown[open] summary::after { transform: rotate(180deg); }
.nav-dropdown summary:hover { color: var(--color-accent); }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--sp-3));
    right: 0;
    min-width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-3) 0;
    margin: 0;
    list-style: none;
    z-index: 50;
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
    display: block;
    padding: var(--sp-2) var(--sp-5);
    color: var(--color-fg);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
    background: var(--color-accent-bg);
    color: var(--color-accent-2);
    outline: none;
}
.nav-dropdown-menu .nav-dropdown-desc {
    display: block;
    font-size: var(--fs-small);
    color: var(--color-fg-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* Breadcrumbs — thin row above page content */
.breadcrumbs {
    padding: var(--sp-4) 0 0;
    font-size: var(--fs-small);
    color: var(--color-fg-muted);
}
.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before {
    content: "›";
    color: var(--color-border);
    font-size: 1.1em;
}
.breadcrumbs a { color: var(--color-fg-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--color-fg); font-weight: 500; }

/* 4.2 Hero for interior pages (category, tag, article index) —
   homepage does not use this; it has a dedicated .page-intro. */

.hero {
    background: linear-gradient(180deg, var(--color-accent-bg), var(--color-bg));
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-5) 0 var(--sp-4);
}
.hero--plain { /* alias kept for older templates */ }
.hero h1 {
    margin-top: 0;
    margin-bottom: var(--sp-2);
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}
.hero .lead {
    font-size: 0.95rem;
    color: var(--color-fg-muted);
    max-width: var(--reading-max);
    margin-bottom: 0;
}

/* Homepage intro — text-only tagline since the illustrated banner
   lives in the site header now. */
.page-intro {
    margin-bottom: var(--sp-4);
}
.page-intro h1 {
    margin-top: 0;
    margin-bottom: var(--sp-2);
}
.page-intro .lead {
    font-size: 1rem;
    color: var(--color-fg-muted);
    max-width: var(--reading-max);
    margin: 0;
}

/* 4.3 Card */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}
.card h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    /* Clamp long titles to 2 lines for uniform, compact cards. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card h3 a { color: var(--color-fg); text-decoration: none; }
.card h3 a:hover { color: var(--color-accent); }
.card p {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    /* Clamp excerpts to 2 lines too. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card .meta {
    color: var(--color-fg-muted);
    font-size: var(--fs-small);
    margin-top: auto;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-border);
}

/* Category card gets a subtle accent stripe */
.card--category { border-left: 3px solid var(--color-accent); }
.card--category .meta { display: none; }

/* 4.4 Article body (renders from markdown) */

.article-meta {
    color: var(--color-fg-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-2);
}
.article-meta a { color: inherit; }
.article-lead {
    font-size: 1.05rem;
    color: var(--color-fg-muted);
    font-weight: 400;
    margin: 0 0 var(--sp-4);
    max-width: var(--reading-max);
}

.article-body {
    max-width: var(--reading-max);
    font-size: 1rem;
    line-height: 1.65;
}
.article-body h2 { margin-top: var(--sp-7); font-family: var(--font-serif); }
.article-body h3 { margin-top: var(--sp-5); font-family: var(--font-serif); }
.article-body p { margin-bottom: var(--sp-5); }
.article-body ul, .article-body ol {
    margin: 0 0 var(--sp-5);
    padding-left: var(--sp-6);
}
.article-body li { margin-bottom: var(--sp-2); }
.article-body blockquote {
    margin: var(--sp-5) 0;
    padding: var(--sp-3) var(--sp-5);
    border-left: 4px solid var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-fg-muted);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body code {
    background: var(--color-surface-2);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
.article-body pre {
    background: var(--color-surface-2);
    padding: var(--sp-4);
    border-radius: var(--radius);
    overflow-x: auto;
}
.article-body pre code { background: transparent; padding: 0; }

/* 4.5 Tags */

.tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
.tag {
    background: var(--color-surface-2);
    color: var(--color-fg-muted);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--fs-small);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
a.tag:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent-2);
}

/* "Most viewed" ordered list on the homepage */
.most-viewed {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border);
}
.most-viewed h2 { margin-top: 0; }
.most-viewed__list {
    counter-reset: mv;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3) var(--sp-5);
}
.most-viewed__list li {
    counter-increment: mv;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px dashed var(--color-border);
}
.most-viewed__list li::before {
    content: counter(mv);
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.2rem;
    min-width: 1.5rem;
    text-align: right;
}
.most-viewed__list a {
    flex: 1;
    color: var(--color-fg);
    text-decoration: none;
    font-weight: 500;
}
.most-viewed__list a:hover { color: var(--color-accent); }
.most-viewed__meta { color: var(--color-fg-muted); font-size: var(--fs-small); }

/* Tag cloud — view-weighted popularity on the homepage */
.tag-cloud {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border);
}
.tag-cloud__title {
    font-size: var(--fs-h3);
    margin: 0 0 var(--sp-4);
    color: var(--color-fg-muted);
    font-weight: 600;
}
.tag-cloud__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: baseline;
    line-height: 1.2;
}
.tag-cloud__tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-fg-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.tag-cloud__tag:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}
.tag-cloud__tag--1 { font-size: 0.75rem; }
.tag-cloud__tag--2 { font-size: 0.85rem; }
.tag-cloud__tag--3 { font-size: 0.95rem; color: var(--color-fg); }
.tag-cloud__tag--4 { font-size: 1.05rem; color: var(--color-accent); font-weight: 500; }
.tag-cloud__tag--5 {
    font-size: 1.2rem;
    color: var(--color-accent-2);
    font-weight: 700;
    background: var(--color-accent-bg);
}

/* 4.6 Forum / discussion */

.discussion { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 2px solid var(--color-border); }
.discussion h2 { margin-top: 0; }
.post {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}
.post .meta { color: var(--color-fg-muted); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.post p { margin: 0; white-space: pre-wrap; }

/* "Nahlásit" link next to post meta */
.post-report-link { color: var(--color-fg-muted); }
.post-report-link:hover { color: var(--color-danger); }

/* Generic form wrap used for post, contact, report forms */
.post-form-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-4);
}
.post-form-wrap h3 { margin-top: 0; margin-bottom: var(--sp-3); font-size: 1rem; }

/* All text-like inputs plus textareas get the same treatment */
.post-form-wrap textarea,
.post-form-wrap input[type="text"],
.post-form-wrap input[type="email"],
.post-form-wrap input[type="search"],
.post-form-wrap input[type="url"],
.post-form-wrap input[type="tel"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.95rem;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-fg);
}
.post-form-wrap textarea { resize: vertical; min-height: 6rem; }
.post-form-wrap textarea:focus,
.post-form-wrap input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

.post-form-wrap label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-fg);
    margin-bottom: var(--sp-1);
}
.post-form-wrap .form-help,
.post-form-wrap small.help-block {
    display: block;
    font-size: 0.8rem;
    color: var(--color-fg-muted);
    margin-top: var(--sp-1);
}
.post-form-wrap .form-row { margin-bottom: var(--sp-3); }
.post-form-wrap .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.post-form-wrap .checkbox-row label { display: inline; margin: 0; }
.post-form-wrap .cf-turnstile { margin-bottom: var(--sp-3); }
.post-form-wrap .form-errors,
.post-form-wrap ul.errors {
    color: var(--color-danger);
    list-style: none;
    padding: 0;
    margin: var(--sp-1) 0 0;
    font-size: 0.85rem;
}

/* Honeypot — hide from humans, visible to bots */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Article index filter form (/clanky) */
.article-filter {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--sp-4);
    align-items: end;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-5);
}
.article-filter__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.article-filter__field span {
    font-size: var(--fs-small);
    color: var(--color-fg-muted);
    font-weight: 500;
}
.article-filter input[type="search"],
.article-filter select {
    font: inherit;
    padding: var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-fg);
}
.article-filter input[type="search"]:focus,
.article-filter select:focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}
.article-filter__actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
@media (max-width: 720px) {
    .article-filter {
        grid-template-columns: 1fr;
    }
}

/* Admin toolbar — shown at the top of article pages to ROLE_ADMIN */
.admin-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    background: var(--color-accent-bg);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-small);
    color: var(--color-accent-2);
}
.admin-bar__label { flex: 1; }
.admin-bar form { margin: 0; }

/* 4.7 Button */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.btn:hover { background: var(--color-accent-2); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.btn--ghost:hover { background: var(--color-accent); color: #fff; }

/* Social login buttons */
.login-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    max-width: 380px;
}
.btn--google {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    font-weight: 500;
}
.btn--google:hover {
    background: #f8f9fa;
    color: #3c4043;
    border-color: #cfd4d9;
}
.btn--facebook {
    background: #1877f2;
    color: #fff;
}
.btn--facebook:hover {
    background: #145dbf;
    color: #fff;
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    font-weight: 700;
    font-size: 0.95rem;
}
.btn--facebook .btn-icon { background: rgba(255, 255, 255, 0.18); }

/* 4.8 Footer */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--sp-6) 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-small);
    text-align: center;
}
.site-footer p { margin-bottom: var(--sp-2); }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--color-fg-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer .footer-support-link {
    display: inline-block;
    margin-left: var(--sp-3);
    color: #a8352a;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.site-footer .footer-support-link:hover {
    color: #7a1e12;
    border-bottom-color: #7a1e12;
}

.discussion-frozen-notice {
    background: #fff8e8;
    border-left: 3px solid #c99a2e;
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 6px 6px 0;
    color: #4a3a15;
    margin-bottom: var(--sp-5);
}

/* 4.9 Disclaimer strip — compact "not medical advice" one-liner */

.disclaimer-strip {
    background: #fff8e8;
    border: 1px solid #e8d9a8;
    border-left: 3px solid #c99a2e;
    border-radius: 6px;
    padding: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-5);
    color: #4a3a15;
    font-size: var(--fs-small);
}
.disclaimer-strip a {
    color: #7a5a15;
    text-decoration: underline;
}
.disclaimer-strip a:hover { color: #4a3a15; }

/* 4.10 Flash messages (EasyAdmin etc.) — basic style */

.flash {
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.flash--success { border-color: var(--color-success); color: var(--color-success); }
.flash--danger  { border-color: var(--color-danger);  color: var(--color-danger); }

/* 5. Utilities -------------------------------------------------------- */

.muted { color: var(--color-fg-muted); }
.small { font-size: var(--fs-small); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }