/* Official scout webfonts (skautský vizuální styl, skaut.cz/grafika).
   SKAUT Bold is caps-only display type for headlines; TheMix carries text.
   TheMix is licensed by Junák for scout-unit use — license PDFs in the manual download. */
@font-face {
    font-family: "SKAUT Bold";
    src: url("../fonts/skaut-bold-webfont.woff2") format("woff2"),
         url("../fonts/skaut-bold-webfont.woff") format("woff");
    /* single-weight face mapped across the whole range so bold headings don't get faux-bolded */
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TheMix LT";
    src: url("../fonts/TheMix_LT_400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TheMix LT";
    src: url("../fonts/TheMix_LT_400i.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "TheMix LT";
    src: url("../fonts/TheMix_LT_700.woff") format("woff");
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TheMix LT";
    src: url("../fonts/TheMix_LT_700i.woff") format("woff");
    font-weight: 600 800;
    font-style: italic;
    font-display: swap;
}

/* Palette "Smrčina" — see docs/superpowers/specs/2026-07-18-landing-page-design.md */
:root {
    --green: #2B6141;
    --green-dark: #1E4630;
    --accent: #E9B44C;
    --accent-ink: #3D3016;
    --ground: #F4F3EB;
    --ink: #22302A;
    --muted: #5F6D64;
    --card: #FFFFFF;

    --radius-s: 10px;
    --radius-m: 16px;
    --radius-pill: 999px;
    --shadow: 0 1px 4px rgb(0 0 0 / 0.08);
    --content-width: 1200px;
}

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

body {
    font-family: "TheMix LT", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--ground);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Half scout lily peeking from the right edge, behind the content.
   Shown only when the gutter next to the 1200px content column can fit it,
   so it never touches text (and disappears on mobile / when zoomed in). */
@media (min-width: 1500px) {
    body::after {
        content: "";
        position: fixed;
        z-index: -1;
        right: 0;
        top: 55%;
        transform: translateY(-50%);
        width: min(calc((100vw - 1280px) / 2), 275px);
        aspect-ratio: 106 / 262;
        background-color: var(--green);
        opacity: 0.15;
        -webkit-mask-image: url("../img/lilie-left.svg");
        mask-image: url("../img/lilie-left.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        pointer-events: none;
    }
}

/* SKAUT Bold is caps-only — uppercase the text so lowercase letters can't
   fall through to the fallback font mid-word */
h1 {
    font-family: "SKAUT Bold", "TheMix LT", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* ---------- header ---------- */

.site-header {
    background: var(--green);
    padding: 1rem 1.5rem 2.2rem;
    position: relative;
}

/* Puntíky wallpaper from the graphic manual as a faint texture on the header band */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    opacity: 0.05;
    -webkit-mask-image: url("../img/puntiky-tapeta.png");
    mask-image: url("../img/puntiky-tapeta.png");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 260px auto;
    mask-size: 260px auto;
    pointer-events: none;
}

.site-nav {
    max-width: var(--content-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.nav-side {
    list-style: none;
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.9rem;
    transition: background-color 120ms ease;
    /* also covers the logout <button> */
    background: none;
    border: none;
    font: inherit;
    /* after font: inherit so the button reset can't undo the display face */
    font-family: "SKAUT Bold", "TheMix LT", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    cursor: pointer;
}

.nav-link:hover,
.nav-link:focus-visible {
    background: rgb(255 255 255 / 0.14);
    outline: none;
}

.logout-form { display: contents; }

.logo-medallion {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 12px rgb(0 0 0 / 0.25);
    display: grid;
    place-items: center;
    margin-bottom: -3.4rem;
    position: relative;
    z-index: 1;
    /* the logo PNG is square with a white background — clip its corners */
    overflow: hidden;
}

.logo-medallion img {
    width: 84px;
    height: auto;
    /* the rope circle sits up-left of the PNG's canvas center (banner and
       rope tails skew the canvas) — nudge so the circles share a center */
    transform: translate(2.9%, 5.4%);
}

/* ---------- main ---------- */

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 4.5rem 1.5rem 2rem;
}

.hero {
    text-align: center;
    padding: 1rem 0 2.5rem;
}

/* Členitá lilie as a chapter ornament above the hero title */
.hero::before {
    content: "";
    display: block;
    width: 72px;
    height: 76px;
    margin: 0 auto 1.1rem;
    background-color: var(--green);
    -webkit-mask-image: url("../img/clenita-lilie.svg");
    mask-image: url("../img/clenita-lilie.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero p {
    color: var(--muted);
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.section {
    padding: 1.25rem 0;
}

.section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green);
    margin-bottom: 1rem;
}

/* small členitá lilie next to every section headline */
.section-title::before,
.info-section-title::before {
    content: "";
    display: inline-block;
    width: 1.7em;
    height: 1.8em;
    vertical-align: -0.55em;
    margin-right: 0.5rem;
    background-color: currentColor;
    -webkit-mask-image: url("../img/clenita-lilie.svg");
    mask-image: url("../img/clenita-lilie.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.card {
    background: var(--card);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
}

/* events */

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.date-chip {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.75rem;
    margin-bottom: 0.5rem;
}

a.event-card {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

a.event-card:hover,
a.event-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.13);
    outline: none;
}

.event-card h3 {
    font-size: 1.1rem;
}

.event-more {
    display: block;
    margin-top: 0.5rem;
    color: var(--green);
    font-weight: 600;
    font-size: 0.85rem;
}

.date-chip-large {
    font-size: 1rem;
    padding: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.section-back {
    text-align: left;
    margin-top: 1.5rem;
}

.about-card {
    padding: 1.75rem 2rem;
    font-size: 1.05rem;
}

.about-card p {
    margin-bottom: 0.9rem;
}

.about-card p:last-child {
    margin-bottom: 0;
}

.event-place {
    color: var(--muted);
    font-size: 0.9rem;
}

.event-desc {
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

.event-card-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.group-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgb(43 97 65 / 0.14);
    color: var(--green-dark);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.4;
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.75rem 0.15rem 0.55rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

/* Age-group emblems from the scout graphic manual, tinted via mask */
.group-emblem {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.group-emblem-vlcata {
    -webkit-mask-image: url("../img/vlcata-znak.png");
    mask-image: url("../img/vlcata-znak.png");
}

.group-emblem-skauti {
    -webkit-mask-image: url("../img/lilie.svg");
    mask-image: url("../img/lilie.svg");
}

.event-info-row dd .group-emblem {
    width: 1.6em;
    height: 1.6em;
}

.event-info-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* event detail */

.event-info-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem 2rem;
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
}

.event-info-row dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green);
    font-weight: 700;
}

.event-info-row dd {
    margin: 0;
}

.event-subheading {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
}

.event-things {
    padding-left: 1.35rem;
    margin-bottom: 1.25rem;
}

.event-image {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    margin-top: 1.25rem;
}

/* news */

.news-list {
    display: grid;
    gap: 0.75rem;
}

a.news-item {
    display: flex;
    gap: 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

a.news-item:hover,
a.news-item:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.13);
    outline: none;
}

.news-item time {
    color: var(--green);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    padding-top: 0.15rem;
}

.news-item h3 {
    font-size: 1.05rem;
}

.news-item p {
    font-size: 0.95rem;
}

.empty-note {
    color: var(--muted);
}

.section-more {
    margin-top: 0.9rem;
    text-align: right;
}

.section-more a {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
}

.section-more a:hover,
.section-more a:focus-visible {
    text-decoration: underline;
}

/* leaders */

.leader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.leader-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.leader-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.leader-photo-placeholder {
    background: var(--green);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    text-transform: uppercase;
}

.leader-grid-featured {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.leader-card-featured {
    padding: 1.5rem;
}

.leader-card-featured .leader-photo {
    width: 96px;
    height: 96px;
}

.leader-card-featured .leader-info h3 {
    font-size: 1.25rem;
}

.leader-divider {
    border: none;
    border-top: 2px solid #DDD9CB;
    margin: 1.5rem 0;
}

.leader-info h3 {
    font-size: 1.1rem;
}

.leader-nickname {
    color: var(--green);
    font-weight: 600;
    white-space: nowrap;
}

.leader-role {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.leader-contact {
    font-size: 0.9rem;
}

.leader-contact a {
    color: var(--green);
    text-decoration: none;
}

.leader-contact a:hover,
.leader-contact a:focus-visible {
    text-decoration: underline;
}

/* ---------- info sections ---------- */

.info-section {
    max-width: 65ch;
}

.info-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.info-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.button-attachment {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

.info-section-content {
    padding-left: 0;
}

.info-section-content p {
    margin-bottom: 0.9rem;
}

.info-section-content p:last-child {
    margin-bottom: 0;
}

/* content pages, forms */

.content-page {
    max-width: 65ch;
}

.content-page h1 {
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.page-lead {
    color: var(--muted);
    font-size: 1.05rem;
}

.page-content p {
    margin-bottom: 0.9rem;
}

.button {
    display: inline-block;
    background: var(--green);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.55rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button:hover,
.button:focus-visible {
    background: var(--green-dark);
    outline: none;
}

.login-section {
    max-width: 26rem;
    margin: 0 auto;
}

.login-section h1 {
    margin-bottom: 1rem;
}

.login-form {
    display: grid;
    gap: 0.5rem;
}

.login-form label {
    font-weight: 600;
    font-size: 0.9rem;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    border: 1px solid #CBD2CC;
    border-radius: var(--radius-s);
    padding: 0.5rem 0.75rem;
    font: inherit;
}

.login-form input:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

.login-form .button {
    margin-top: 0.5rem;
    justify-self: start;
}

.form-error {
    color: #A3341F;
    margin-bottom: 0.75rem;
}

.login-hint {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

/* ---------- footer ---------- */

/* Camp silhouettes standing on the footer's top edge */
.footer-silhouettes {
    height: 90px;
    margin-top: 3rem;
    /* sink the baseline into the footer so the ground line's ends don't show */
    margin-bottom: -3px;
    background-color: var(--green-dark);
    -webkit-mask-image: url("../img/siluety-footer.webp");
    mask-image: url("../img/siluety-footer.webp");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.site-footer {
    background: var(--green-dark);
    color: rgb(255 255 255 / 0.85);
    text-align: center;
    font-size: 0.85rem;
    padding: 1.75rem 1.5rem 1.25rem;
}

.footer-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.footer-skaut-logo {
    height: 96px;
    width: auto;
    flex-shrink: 0;
}

.footer-contacts {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 2.75rem;
}

.footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.footer-contact svg {
    width: 19px;
    height: 19px;
    color: var(--accent);
    flex-shrink: 0;
}

.footer-contact:hover span,
.footer-contact:focus-visible span {
    text-decoration: underline;
    outline: none;
}

.footer-meta {
    max-width: 36rem;
    margin: 1.25rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgb(255 255 255 / 0.18);
}

.footer-link {
    color: rgb(255 255 255 / 0.55);
    font-size: 0.8rem;
    text-decoration: none;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
    .footer-silhouettes {
        height: 56px;
        margin-top: 2rem;
        -webkit-mask-size: auto 100%;
        mask-size: auto 100%;
    }

    .footer-main {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-skaut-logo {
        height: 76px;
    }

    .footer-contacts {
        flex-direction: column;
        gap: 0.75rem;
    }

    .site-nav {
        grid-template-columns: 1fr auto 1fr;
        gap: 0.5rem;
    }

    .nav-side {
        flex-direction: column;
        gap: 0.4rem;
        align-items: stretch;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
    }

    .logo-medallion {
        width: 84px;
        height: 84px;
        margin-bottom: -2.6rem;
    }

    .logo-medallion img {
        width: 64px;
    }

    .site-main {
        padding-top: 3.5rem;
    }
}