:root {
    --green: #49a078;
    --black: #1f2421;
    --white: #f9f9f9;
    --background: #ffffff;
    --foreground: #171717;
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --forest: #1d3a2f;
    --green-dark: #2f7a57;
    --moss: #56605a;
    --sage: #a9c7b6;
    --hairline: #dfe5e1;
    --type-kynologie: #00a6f4;
    --type-kultura: #00c950;
    --type-kurzy: #8e51ff;
    --urgent: #b3261e;
    --urgent-tint: #fbefee;
}

html { scroll-behavior: smooth; }

body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    padding-top: 5rem;
    padding-bottom: 10rem;
    background: #fff;
}

/* The redesigned calendar and news pages keep their own type. */
.calendar,
.newsroom,
.home-events__calendar,
.event-page {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.flash {
    top: 5rem;
    z-index: 9999;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: var(--white);
    color: var(--foreground);
}

:where(.header) ul { margin: 0; padding: 0; list-style: none; }
:where(.header) a { color: inherit; text-decoration: none; }
:where(.header) svg { display: block; }

:where(.header) button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.header__bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.header__logo {
    position: absolute;
    left: 2.25rem;
}

.header__logo a { display: block; }
.header__logo img { display: block; max-width: 100%; height: auto; }

.header__main {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-right: 2.25rem;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
}

.header__nav {
    display: none;
    flex-wrap: wrap;
}

.header__menu {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.header__langs { display: none; }

.header__link {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    font-weight: 500;
    color: var(--black);
    transition: color .15s ease-in-out;
}

.header__link:hover { color: var(--green); }

.header__lang-select {
    appearance: none;
    margin-left: .75rem;
    padding: .375rem 1.75rem .375rem .75rem;
    font: inherit;
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%231f2421'%3E%3Cpath d='M10.28 4.305L5.989 8.598 1.695 4.305A1 1 0 00.28 5.72l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") no-repeat right .625rem center / .625rem;
    border: 0;
    transition: color .15s ease-in-out;
}

.header__lang-select:hover,
.header__lang-select:focus-visible { color: var(--green); }

.header__lang-select option { color: var(--black); }

.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: .125rem;
    padding: .5rem .75rem;
}

.dropdown:hover { color: var(--green); }

.dropdown__link {
    display: flex;
    align-items: center;
    color: inherit;
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}

.dropdown__toggle--label {
    display: flex;
    align-items: center;
}

.dropdown__toggle svg {
    flex-shrink: 0;
    width: .75rem;
    height: .75rem;
    margin-top: -.125rem;
    margin-left: .25rem;
    fill: currentColor;
    transition: transform .15s;
}

.dropdown__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: max-content;
    min-width: 10rem;
    padding: .5rem 0;
    border-radius: .25rem;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transform-origin: top right;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .15s cubic-bezier(0, 0, .2, 1), transform 0s .15s, visibility 0s .15s;
}

.dropdown__toggle[aria-expanded="true"] + .dropdown__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .15s cubic-bezier(0, 0, .2, 1), transform .15s cubic-bezier(0, 0, .2, 1);
}

.dropdown__item {
    display: flex;
    padding: .5rem 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--black);
}

.dropdown__item:hover { color: var(--green); }

.mobile-menu {
    display: flex;
    justify-content: flex-end;
    width: 100vw;
}

.mobile-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 2.25rem;
    color: var(--black);
    text-align: center;
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}

.mobile-menu__toggle:hover { color: var(--green); }

.mobile-menu__toggle svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    pointer-events: none;
}

.mobile-menu__bar {
    transform-origin: center;
    transition: all .3s cubic-bezier(.5, .85, .25, 1.1);
}

.mobile-menu__bar--top { translate: 0 -5px; }
.mobile-menu__bar--middle { transition-timing-function: cubic-bezier(.5, .85, .25, 1.8); }
.mobile-menu__bar--bottom { translate: 0 5px; }

.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__bar--top { rotate: 315deg; translate: 0 0; }
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__bar--middle { rotate: 45deg; }
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__bar--bottom { rotate: 135deg; translate: 0 0; }

.mobile-menu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    width: 100%;
    padding-bottom: .5rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--white);
    border-bottom: 2px solid var(--black);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform 0s .2s, visibility 0s .2s;
}

.mobile-menu__toggle[aria-expanded="true"] + .mobile-menu__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1);
}

.mobile-menu__list { padding: .5rem 1.25rem; }
.mobile-menu__sublist { padding-left: 1rem; }

.mobile-menu__link {
    display: flex;
    padding: .5rem 0;
    font-weight: 500;
    color: var(--black);
}

.mobile-menu__link:hover,
.mobile-menu__langs [aria-current] { color: var(--green); }

.mobile-menu__link--group:hover { color: var(--black); }

.mobile-menu__link--sub {
    font-size: .875rem;
    line-height: 1.25rem;
}

.mobile-menu__langs {
    display: flex;
    gap: 1rem;
    padding: 0 1.25rem;
}

@media (min-width: 40rem) {
    .mobile-menu__panel { width: 40%; }
}

@media (min-width: 48rem) {
    .header__inner {
        justify-content: flex-end;
        height: 5rem;
    }

    .header__nav {
        display: flex;
        flex-grow: 1;
    }

    .header__langs { display: flex; }

    .mobile-menu { display: none; }
}

@media (min-width: 64rem) {
    .header__link,
    .dropdown { padding: .5rem 1.25rem; }
}

.footer {
    padding: 3.5rem 2.25rem 2rem;
    background: var(--background);
    color: var(--foreground);
}

:where(.footer) ul { margin: 0; padding: 0; list-style: none; }
:where(.footer) a { color: inherit; text-decoration: none; }

.footer__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    font-weight: 700;
}

.footer__brand p { margin: 0; }
.footer__brand img { display: block; max-width: 100%; height: auto; }

.footer__columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    margin-top: 2.5rem;
}

.footer__column,
.footer__list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.footer__item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.footer__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    color: var(--green);
}

.footer__credit {
    width: 100%;
    margin: 2.5rem 0 0;
    text-align: center;
    color: #99a1af;
    font-size: .875rem;
    line-height: 1.25rem;
}

:where(.footer) .footer__contact-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

@media (min-width: 48rem) {
    .footer { padding-inline: 6rem; }

    .footer__columns {
        justify-content: center;
        margin-top: 0;
    }
}

@media (min-width: 64rem) {
    .footer__inner { flex-direction: row; }
    .footer__columns { flex-wrap: nowrap; }
}

/* Unhinted Google Fonts subsets, the same files the original site serves. */
@font-face {
    font-family: "Red Hat Display";
    src: url("../fonts/RedHatDisplayVF-latin-ext.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("../fonts/RedHatDisplayVF-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVF-latin-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVF-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    max-width: 16rem;
    margin-inline: auto;
    padding: .5rem 2.5rem;
    border-radius: 0;
    background: var(--green);
    color: var(--white);
    font-weight: 400;
}

.button--secondary {
    background: var(--black);
    color: var(--white);
    box-shadow: none;
}

.hero-video {
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: 100%;
    background: #000;
}

.hero-video__media {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65%;
}

.hero-video__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgb(0 0 0 / .5);
    pointer-events: none;
}

.hero-video__inner {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 72rem;
    height: 90dvh;
    margin-inline: auto;
}

.hero-video__content {
    width: 100%;
    color: #fff;
    text-align: center;
    animation: fade-in-left 1s both;
}

.hero-video__title,
.hero-video__subtitle {
    margin: 0;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 500;
}

.hero-video__title {
    margin-bottom: var(--space-sm);
    font-size: 2.25rem;
    line-height: 2.5rem;
    white-space: pre-line;
}

.hero-video__subtitle {
    margin-bottom: var(--space-md);
    font-size: 1.5rem;
    line-height: 2rem;
}

.hero-video__text { margin: 0; }

.hero-video__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 75%;
    margin: 1.5rem auto 0;
    animation: fade-in-up 1s both;
}

.hero-video__actions .button { margin-inline: 0; }

.hero-video__teasers {
    display: grid;
    gap: var(--space-sm);
    width: min(34rem, 100% - 2rem);
    margin: var(--space-lg) auto 0;
    padding: 0;
    color: var(--black);
    text-align: left;
    list-style: none;
    animation: fade-in-up 1s both;
}

.hero-video__teasers:not(:has(li)) { display: none; }

.hero-teaser {
    position: relative;
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--white);
    box-shadow: 0 10px 30px rgb(0 0 0 / .35);
}

.hero-teaser__date {
    color: var(--moss);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.hero-teaser__kicker {
    margin: 0 0 .25rem;
    color: var(--green-dark);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hero-teaser__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.hero-teaser__link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--green);
    color: var(--white);
    transition: background-color .15s;
}

/* The whole box is clickable; the arrow is the real link. */
.hero-teaser__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.hero-teaser__link svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform .15s;
}

.hero-teaser:hover .hero-teaser__link { background: var(--green-dark); }
.hero-teaser:hover .hero-teaser__link svg { transform: translateX(2px); }

.hero-teaser__link:focus-visible { outline: none; }

.hero-teaser:has(.hero-teaser__link:focus-visible) {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.hero-teaser--urgent {
    padding-left: calc(1.25rem - 4px);
    border-left: 4px solid var(--urgent);
    background: var(--urgent-tint);
}

.hero-teaser--urgent .hero-teaser__date,
.hero-teaser--urgent .hero-teaser__kicker {
    color: var(--urgent);
    font-weight: 600;
}

@keyframes fade-in-left {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}

@media (scripting: enabled) {
    [data-animate]:not(.is-visible) { visibility: hidden; }
}

[data-animate="fade-in-up"].is-visible { animation: fade-in-up 1s both; }

@media (prefers-reduced-motion: reduce) {
    .hero-video__content,
    .hero-video__actions,
    .hero-video__teasers,
    [data-animate].is-visible { animation: none; }
}

@media (min-width: 40rem) {
    .hero-video__title { font-size: 3rem; line-height: 1; }
    .hero-video__actions { max-width: 40%; }
}

@media (min-width: 48rem) {
    .hero-video__media { object-position: center; }

    .hero-video__content {
        min-width: 30rem;
        text-align: left;
    }

    .hero-video__title { font-size: 3.75rem; }
    .hero-video__subtitle { font-size: 2.25rem; line-height: 2.5rem; }
    .hero-video__text { font-size: 1.25rem; line-height: 1.75rem; }

    .hero-video__actions {
        justify-content: flex-start;
        gap: 2.25rem;
        margin-inline: 0;
    }

    .hero-video__teasers { width: 34rem; max-width: 100%; margin-inline: 0; }
    .hero-teaser { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
}

@media (min-width: 80rem) {
    .hero-video__inner { height: 100vh; }
}

.news {
    width: min(72rem, 100% - 2rem);
    margin: 4rem auto 0;
}

.news__heading {
    margin: 0;
    padding-bottom: .75rem;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

/* Same rows as /novinky (components/news-entry), laid out two per row. */
.news__list {
    display: grid;
    grid-auto-rows: 1fr; /* every notice as tall as the tallest */
    column-gap: 3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.news__list .news-entry:first-child { border-top: 1px solid var(--hairline); }

.news__list .news-entry__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.news__list .news-entry { align-content: start; }
.news__list .news-entry--urgent { margin-block: 0; }

.news-entry__year {
    display: block;
    font-size: .8125rem;
}

.news__more {
    display: flex;
    justify-content: center;
    margin-top: 2.25rem;
}

.news__more .button { width: 14rem; max-width: none; margin: 0; }

@media (min-width: 64rem) {
    .news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news__list .news-entry:nth-child(2) { border-top: 1px solid var(--hairline); }
}

.home-events {
    display: grid;
    gap: 2.5rem;
    width: min(72rem, 100% - 2rem);
    margin: 6rem auto 4rem;
}

.home-events__heading {
    margin: 0 0 1rem;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.home-events__text p {
    max-width: 38rem;
    margin: 0 0 1rem;
    line-height: 1.6;
}

.home-events__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 1.75rem;
}

.home-events__actions .button { width: 14rem; max-width: none; margin: 0; }

.home-events__link {
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.home-events__link:hover { color: var(--forest); }

.home-events__calendar {
    align-self: start;
    max-width: 22rem;
    padding: 1.25rem;
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.home-events__month {
    margin: 0 0 .75rem;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.home-events__year {
    color: var(--moss);
    font-weight: 500;
}

.home-events__calendar a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.home-events__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1rem;
    margin: .75rem 0 0;
    padding: .75rem 0 0;
    border-top: 1px solid var(--hairline);
    color: var(--moss);
    font-size: .8125rem;
    list-style: none;
}

.home-events__type {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

@media (min-width: 64rem) {
    .home-events {
        grid-template-columns: 20rem minmax(0, 1fr);
        align-items: center;
        gap: 5rem;
    }

    .home-events__calendar { grid-column: 1; grid-row: 1; max-width: none; }
}

/* Supporters: a grey band whose content sits on the same grid as .home-events above it. */
.sponsors {
    padding-block: 4rem;
    background: #f8fafc;
}

.sponsors__inner {
    display: grid;
    gap: 2rem;
    width: min(72rem, 100% - 2rem);
    margin-inline: auto;
}

.sponsors__heading {
    margin: 0;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.sponsors__text {
    max-width: 24rem;
    margin: .5rem 0 0;
    color: var(--moss);
    line-height: 1.6;
}

.sponsors__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsors__item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline);
    background: #fff;
    transition: border-color .15s;
}

.sponsors__item:hover { border-color: var(--green); }

.sponsors__item:has(.sponsors__link:focus-visible) {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.sponsors__logo {
    display: grid;
    flex: 1;
    place-items: center;
    min-height: 7.5rem;
    padding: 1.5rem;
}

.sponsors__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 4.5rem;
    object-fit: contain;
}

.sponsors__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 1rem;
    border-top: 1px solid var(--hairline);
    color: var(--black);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
}

.sponsors__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sponsors__link:focus-visible { outline: none; }

.sponsors__arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--green);
    color: var(--white);
    transition: background-color .15s;
}

.sponsors__arrow svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform .15s;
}

.sponsors__item:hover .sponsors__arrow { background: var(--green-dark); }
.sponsors__item:hover .sponsors__arrow svg { transform: translate(1px, -1px); }

@media (min-width: 64rem) {
    .sponsors__inner {
        grid-template-columns: 20rem minmax(0, 1fr);
        align-items: center;
        gap: 5rem;
    }
}

.callout {
    position: relative;
    margin-bottom: 2.25rem;
    padding-top: 2.25rem;
}

.callout__image {
    display: block;
    width: 100%;
    height: 50dvh;
    object-fit: cover;
}

.callout__box {
    width: 100%;
    padding: 2.25rem;
    background: var(--green);
    color: #fff;
    text-align: center;
}

.callout__heading {
    margin: 0;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 500;
    text-transform: uppercase;
}

.callout__text {
    margin-top: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-align: left;
}

.callout__text p { margin: 0; }

.about {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    max-width: 83.125rem;
}

.about__item {
    display: flex;
    flex-direction: column;
    color: var(--black);
}

.about__item--green {
    background: var(--green);
    color: #fff;
}

.about__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 40dvh;
    padding: 3.5rem;
}

.about__title {
    width: 100%;
    margin: 0 0 1rem;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
}

.about__text {
    margin: 0;
    padding-left: 1.5rem;
    border-left: 2px solid currentColor;
}

.about__image {
    display: block;
    width: 100%;
    height: 40dvh;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .callout {
        margin: 0 3.5rem 27rem;
    }

    .callout__box {
        position: absolute;
        top: 65%;
        left: 50%;
        width: calc(100vw - 220px);
        transform: translateX(-50%);
    }

    .about {
        gap: 3.5rem;
        margin-inline: 3.5rem;
    }
}

@media (min-width: 64rem) {
    .callout {
        max-width: 80rem;
        margin: 0 auto 14rem;
    }

    .callout__box { width: 72rem; }

    .about {
        margin-inline: auto;
    }

    .about__item { height: 485px; }
    .about__item--green { flex-direction: row-reverse; }
    .about__item--plain { flex-direction: row; }

    .about__content {
        width: 66.666667%;
        min-height: 0;
        padding: 6rem;
    }

    .about__image {
        width: 50%;
        min-width: 0;
        height: auto;
    }
}

.agenda-event--kynologie,
.type-toggle--kynologie,
.month-grid__dot--kynologie { --type: var(--type-kynologie); }

.agenda-event--kultura,
.type-toggle--kultura,
.month-grid__dot--kultura { --type: var(--type-kultura); }

.agenda-event--kurzy,
.type-toggle--kurzy,
.month-grid__dot--kurzy { --type: var(--type-kurzy); }

.calendar { padding-bottom: 5rem; }

.calendar a:focus-visible,
.type-toggle:has(input:focus-visible) {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.calendar__toolbar {
    width: min(72rem, 100% - 2rem);
    margin: 2.5rem auto 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--hairline);
}

.calendar__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}

.calendar__month {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    color: var(--black);
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--font-title);
    font-weight: 700;
    line-height: 1.1;
}

.calendar__year {
    color: var(--moss);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.calendar__nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.calendar__step {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--hairline);
    color: var(--black);
}

.calendar__step:hover { border-color: var(--forest); }

.calendar__step svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.calendar__current,
.calendar__clear {
    padding: .5rem .25rem;
    color: var(--green-dark);
    text-underline-offset: 3px;
}

.calendar__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin-top: 1.75rem;
}

.calendar__types {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.type-toggle,
.calendar__submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem .875rem;
    border: 1px solid var(--hairline);
    background: none;
    color: var(--black);
    font: inherit;
    font-size: var(--font-m);
    cursor: pointer;
}

.type-toggle { position: relative; }

.type-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.type-toggle:hover { border-color: var(--forest); }

.type-toggle:has(input:checked) {
    border-color: var(--forest);
    background: var(--forest);
    color: var(--white);
}

.type-toggle__swatch {
    width: .75rem;
    height: .75rem;
    background: var(--type);
    box-shadow: 0 0 0 1px rgb(249 249 249 / .6);
}

.type-toggle__count {
    color: var(--moss);
    font-variant-numeric: tabular-nums;
}

.type-toggle:has(input:checked) .type-toggle__count { color: var(--sage); }

.calendar__body {
    display: grid;
    gap: 2.5rem;
    width: min(72rem, 100% - 2rem);
    margin: 2.5rem auto 0;
}

.calendar__overview {
    align-self: start;
    padding: 1rem;
    background: var(--white);
}

.month-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.month-grid th {
    padding-bottom: .5rem;
    color: var(--moss);
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
}

.month-grid td {
    padding: 2px;
    text-align: center;
}

.month-grid__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    color: var(--moss);
    font-size: var(--font-m);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.month-grid__day--busy {
    color: var(--black);
    font-weight: 700;
}

.month-grid__day--busy:hover { background: #e9efeb; }

.month-grid__day--today { box-shadow: inset 0 0 0 2px var(--green); }

.month-grid__dots {
    display: flex;
    gap: 2px;
    margin-top: 3px;
}

.month-grid__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--type);
}

.agenda {
    max-width: 44rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A day of the agenda: its events, each led by its name, then its date and place (components/event) */
.agenda__day {
    padding-block: 1.75rem;
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 6rem;
}

.agenda__day:first-child {
    padding-top: 0;
    border-top: 0;
}

.agenda__events {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agenda-event {
    padding-left: 1rem;
    border-left: 3px solid var(--type);
}

/* Without the type (withType false) there is no type border either; a faint tile sets each event apart instead. */
.agenda-event--untyped {
    padding: 1rem 1.25rem;
    border-left: 0;
    border-radius: .5rem;
    background: #f3f6f4;
}

.agenda-event__title {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-xxl);
    font-weight: 700;
    line-height: 1.25;
}

.agenda-event__title a {
    color: var(--black);
    text-decoration: none;
}

.agenda-event__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--type);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.agenda-event__when,
.agenda-event__where {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    margin: 0;
}

.agenda-event__when {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agenda-event__where { margin-top: var(--space-xs); }

.agenda-event__today,
.agenda-event__type {
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agenda-event__type {
    margin: 0 0 .25rem;
    color: var(--type);
}

.agenda-event__today {
    padding: .0625rem .5rem;
    background: var(--green-dark);
    color: var(--white);
}

/* The organizer closes the event: right under its text, or after a larger gap when it has none. */
.agenda-event__by {
    margin: var(--space-sm) 0 0;
    color: var(--moss);
    font-size: var(--font-sm);
}

.agenda-event__when + .agenda-event__by,
.agenda-event__where + .agenda-event__by { margin-top: var(--space-md); }

.agenda-event__text {
    max-width: 65ch;
    margin: var(--space-md) 0 0;
    color: #3b433e;
}

.agenda__day--past .agenda-event__title a,
.agenda__day--past .agenda-event__when,
.agenda__day--past .agenda-event__text { color: var(--moss); }

.agenda-empty {
    max-width: 44rem;
    padding: 2rem;
    background: var(--white);
}

.agenda-empty p { margin: 0; }
.agenda-empty p + p { margin-top: .75rem; }
.agenda-empty a { color: var(--green-dark); }

.agenda-empty__message {
    font-size: var(--font-l);
    font-weight: 600;
}

@media (min-width: 40rem) {
    .calendar__overview { max-width: 22rem; }
}

@media (min-width: 64rem) {
    .calendar__body {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: 4rem;
        margin-top: 3.5rem;
    }

    .calendar__overview {
        position: sticky;
        top: 6.5rem;
        grid-column: 2;
        grid-row: 1;
    }
}

.agenda__next {
    max-width: 44rem;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    font-weight: 600;
}

.agenda__next a { color: var(--green-dark); }

.newsroom { padding-bottom: 5rem; }

.newsroom a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.newsroom__body {
    width: min(48rem, 100% - 2rem);
    margin: 3rem auto 0;
    margin-left: max(1rem, (100% - 72rem) / 2);
}

.newsroom__month + .newsroom__month { margin-top: 3.5rem; }

.newsroom__month-title {
    margin: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--hairline);
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.newsroom__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-entry {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--hairline);
}

.news-entry__date {
    padding-top: .3rem;
    color: var(--moss);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.news-entry__title {
    margin: 0;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.news-entry__title a {
    color: var(--black);
    text-decoration: none;
}

.news-entry__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.news-entry__text {
    max-width: 65ch;
    margin: .5rem 0 0;
    color: #3b433e;
}

.news-entry--urgent {
    margin: .75rem -1rem;
    padding: 1.25rem 1rem 1.25rem calc(1rem - 4px);
    border-bottom: 0;
    border-left: 4px solid var(--urgent);
    background: var(--urgent-tint);
}

.news-entry--urgent .news-entry__date {
    color: var(--urgent);
    font-weight: 600;
}

.news-entry__flag {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .375rem;
    color: var(--urgent);
    font-size: .9375rem;
    font-weight: 700;
}

.news-entry__flag svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.newsroom__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: 2.5rem;
}

.newsroom__page-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    border: 1px solid var(--forest);
    color: var(--forest);
    font-weight: 600;
    text-decoration: none;
}

.newsroom__page-link:hover {
    background: var(--forest);
    color: var(--white);
}

.newsroom__page-link--older { margin-left: auto; }

.newsroom__page-status {
    color: var(--moss);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.newsroom__empty {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

@media (min-width: 40rem) {
    .news-entry { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.5rem; }
}

.page-heading {
    position: relative;
    width: 100%;
    height: 30dvh;
    padding-bottom: 1rem;
    place-content: center;
}

.page-heading__divider {
    position: absolute;
    /* Overlap the photo's edge by 1px so subpixel header heights never
       leave a sliver of photo under the trees. */
    bottom: -1px;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 4rem;
    background-position: bottom;
    background-size: contain;
    background-repeat: repeat-x;
}

.page-heading__title {
    position: relative;
    z-index: 50;
    margin: 0;
    color: var(--white);
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    text-align: center;
}

.page-heading__image {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-heading__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgb(31 36 33 / .6);
}

.bg-circle {
    position: absolute;
    top: 8.333333%;
    right: 0;
    z-index: 10;
    display: none;
    width: 200%;
    height: 100%;
    border-radius: 9999px;
    object-fit: contain;
    opacity: .05;
    transform: translateX(50%);
    pointer-events: none;
}

.subpage {
    position: relative;
    overflow-x: clip;
    color: #364153;
}

.subpage__body {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding: 2.25rem .75rem 3rem;
}

.subpage__body--tight { padding-inline: .5rem; }

.subpage__section { margin-top: 3.5rem; }

/* Standalone application form pages (e.g. /adepti/prihlaska) */
.application-page {
    position: relative;
    min-height: 100vh;
    padding-block: 10rem;
    overflow-x: clip;
}

.application-page .form { width: 100%; }

/* Ochrana osobních údajů: 1:1 port of the original page (pt-40 min-h-screen, w-3/5 mx-auto, text-4xl title). */
.privacy {
    min-height: 100vh;
    padding-top: 10rem;
}

.privacy__body {
    width: 60%;
    margin-inline: auto;
}

.privacy__title {
    margin: 0;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 400;
}

.privacy__intro { margin-top: 1rem; }

.privacy .third-heading { margin-top: 1rem; }

.privacy__updated {
    margin-top: 2.5rem;
    font-size: .875rem;
}

.application-page__body {
    position: relative;
    z-index: 20;
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}

.application-page__title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 2.5rem;
}

.application-page__lead { margin-top: 1rem; }

/* Cynology step 1: shown above the events when the requested event no longer takes applications */
.application-step__warning {
    margin: 0;
    padding: .75rem 1rem;
    border-left: 4px solid var(--color-warning);
    background: #fefce8;
    color: #364153;
}

/* Cynology step 1: upcoming events and search on the left, calendar on the right */
.application-step {
    display: grid;
    gap: 3rem;
    margin-top: 2.25rem;
}

.application-step[hidden] { display: none; }

/* The chosen event at the top of the cynology form, drawn as an agenda day (components/form/cynology-event) */
.cynology-event {
    display: grid;
    justify-items: start;
    gap: .75rem;
}

.cynology-event__card {
    width: 100%;
    padding: 1rem;
    border-top: 0;
    background: var(--white);
}

/* The card is the box already: no tile of the untyped event inside it */
.cynology-event__card .agenda-event--untyped {
    padding: 0;
    border-radius: 0;
    background: none;
}

.cynology-event__card[hidden],
.cynology-event__none[hidden] { display: none; }


.cynology-event__none {
    width: 100%;
    padding: 1rem;
    background: var(--white);
    font-weight: 600;
}

.cynology-event__none p { margin: 0; }

.cynology-event .field-error { position: static; transform: none; }

.cynology-event .field-error:empty { display: none; }

.cynology-event__change {
    padding: .25rem 0;
    border: 0;
    background: none;
    color: var(--green-dark);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cynology-event__change:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

@media (min-width: 64rem) {
    /* Step 1 needs the full width; a two-column form (aside sections) its columns (27.5rem + 22rem) and the gap. */
    .application-page__body:has(> .application-step:not([hidden])) { max-width: 72rem; }
    .application-page__body:has(> .application-page__form:not([hidden]) .form--aside) { max-width: 53.5rem; }

    .application-step {
        grid-template-columns: minmax(0, 1fr) 22rem;
        grid-template-rows: auto 1fr;
        gap: 2rem 4rem;
        align-items: start;
    }

    /* Columns only: the events take the first row unless the warning is shown above them. */
    .application-step__warning,
    .cynology-events { grid-column: 1; }
    .cynology-calendar { grid-column: 2; grid-row: 1 / span 2; }
}

.cynology-events a:focus-visible,
.cynology-calendar a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.cynology-events__search { margin-top: 1rem; }

.cynology-events__search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.cynology-calendar {
    padding: 1rem;
    background: var(--white);
}

.cynology-calendar .calendar__bar { align-items: center; }

.cynology-calendar .calendar__month { font-size: var(--font-xl); }

.cynology-calendar .month-grid { margin-top: 1rem; }

.calendar__step--disabled { opacity: .35; }

.cynology-events__agenda,
.cynology-events__empty { margin-top: 2rem; }

/* The event tiles separate the list, so no hairlines between days: one even gap between all tiles. */
.cynology-events__agenda {
    display: grid;
    gap: .75rem;
}

.cynology-events__agenda .agenda__day {
    padding-block: 0;
    border-top: 0;
}

.cynology-events__agenda .agenda__events { gap: .75rem; }


.cynology-events__found {
    margin: 2rem 0 0;
    font-weight: 600;
}

.cynology-events__found a {
    margin-left: .5rem;
    color: var(--green-dark);
    font-weight: 400;
}

.cynology-events__found + .cynology-events__agenda { margin-top: 1.25rem; }

.agenda-event__apply { margin: .75rem 0 0; }

.agenda-event__apply-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .5rem 1.25rem;
    background: var(--green);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.agenda-event__apply-link:hover { background: var(--green-dark); }

.agenda-event__closed {
    color: var(--moss);
    font-size: var(--font-m);
    font-weight: 600;
}

.cynology-events__results.htmx-request,
.cynology-calendar.htmx-request { opacity: .6; transition: opacity .2s; }

.application-page__form:not([hidden]) { animation: application-form-in .4s ease-out; }

@keyframes application-form-in {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .application-page__form:not([hidden]) { animation: none; }
}

.breadcrumb {
    margin-bottom: 1.5rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    color: #4a5565;
    list-style: none;
}

.breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb [aria-current] {
    color: #101828;
    font-weight: 500;
}

.page-nav {
    display: none;
    flex-shrink: 0;
    width: 18rem;
    margin-left: 1.5rem;
}

.page-nav__inner {
    position: sticky;
    top: 6rem;
    padding: 1.25rem;
    border-right: 1px solid;
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, transparent, var(--green), transparent) 1;
}

.page-nav__heading { font-weight: 700; }

.page-nav__list {
    display: grid;
    gap: .5rem;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .875rem;
    line-height: 1.25rem;
    list-style: none;
}

.page-nav__list a {
    color: #364153;
    text-decoration: none;
}

.page-nav__list a:hover { color: #101828; }

.page-nav__list a.is-active {
    color: var(--green);
    font-weight: 500;
}

.second-heading {
    margin: 0 0 .25rem;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    scroll-margin-top: 6rem;
}

.third-heading {
    margin: 0;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    scroll-margin-top: 6rem;
}

.paragraph {
    max-width: 65ch;
    margin: 0 0 1.5rem;
    color: #364153;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 1.625;
}

.dot-list {
    display: grid;
    gap: .5rem;
    margin: 1rem 0;
    padding: 0;
    color: #364153;
    line-height: 1.625;
    list-style: none;
}

.dot-list > li {
    display: flex;
    align-items: flex-start;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.dot-list > li::before {
    content: "";
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    margin: .5rem .75rem 0 0;
    border-radius: 50%;
    background: var(--green);
}

.indent { margin-left: 1.25rem; }

.council__board {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.council__members { display: flex; }

.shooting-range__schedule,
.shooting-range__month { margin-top: 1rem; }

.adepts__course { padding-inline: .5rem; }

.text-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 1px;
}

.cta-wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}

.cta {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3.5rem 2.25rem;
    color: var(--white);
}

.cta__inner {
    position: relative;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    width: 75%;
    margin-inline: auto;
}

.cta__heading {
    margin: 0;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
}

.cta__text {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.cta__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgb(31 36 33 / .55);
}

.cta__image {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-box {
    margin-top: 3rem;
    padding: 1.5rem;
    border: 1px solid;
    border-radius: 1rem;
    background: #f0fdf4;
}

.course-box__heading {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
}

.course-box__text {
    max-width: 42rem;
    margin: .75rem 0 0;
}

.course-box__actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
}

.subpage__footer {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid;
    color: #4a5565;
    font-size: .875rem;
    line-height: 1.25rem;
}

.subpage__footer p { margin: 0; }

.download-link {
    margin-left: .25rem;
    color: var(--green);
    font-weight: 500;
    text-decoration: none;
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}

.promotion + .promotion { margin-top: 3.5rem; }

.promotion__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .75rem;
    max-width: 65ch;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.promotion__images a { display: block; }

.promotion__images img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .25rem;
}

/* Contact: wide display title, quiet two-column details, photo bleeding to the right edge. */
@font-face {
    font-family: "Archivo Expanded";
    src: url("../fonts/ArchivoExpanded-latin-ext.woff2") format("woff2");
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Archivo Expanded";
    src: url("../fonts/ArchivoExpanded-latin.woff2") format("woff2");
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

main.contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
    color: var(--black);
    font-family: "Inter", sans-serif;
}

.contact__body {
    padding: 3.5rem 1.5rem 4rem;
}

.contact__title {
    margin: 0 0 3rem;
    font-size: clamp(2.5rem, 11vw, 7rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.contact__content {
    display: grid;
    gap: 3rem;
}

.contact__lead {
    max-width: 20ch;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.35;
}

.contact__note {
    font-weight: bold;
    max-width: 30ch;
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid var(--green);
    color: #3d4440;
    font-size: 1.125rem;
    line-height: 1.5;
}

.contact__note .contact__link { white-space: nowrap; }

.contact__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 2rem;
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.5;
}

.contact__item dt {
    margin-bottom: .25rem;
    color: #5b635e;
    font-size: 1rem;
}

.contact__item dd { margin: 0; }

.contact__time,
.contact__link[href^="tel:"] { white-space: nowrap; }

.contact__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
    transition: color .15s ease-in-out;
}

.contact__link:hover { color: var(--green-dark); }

.contact__link:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.contact__photo {
    position: relative;
    min-height: 60dvh;
    overflow: hidden;
}

.contact__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: 30% center;
}

.contact__image .blur-up__img,
.contact__photo img { object-position: 30% center; }

/* The page's one moment of motion: the photo opens like a shutter. */
@media (prefers-reduced-motion: no-preference) {
    .contact__image { animation: contact-shutter 1.1s cubic-bezier(.65, 0, .35, 1) .15s both; }
}

@keyframes contact-shutter {
    from { clip-path: inset(0 0 0 100%); transform: scale(1.06); }
    to { clip-path: inset(0); transform: scale(1); }
}

.not-found {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding-top: 7rem;
}

.not-found__title,
.not-found__subtitle,
.not-found__action {
    z-index: 10;
    margin: 0;
}

.not-found__title,
.not-found__subtitle { font-family: "Red Hat Display", sans-serif; }

.not-found__title {
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 700;
}

.not-found__subtitle {
    margin-top: .25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
}

.not-found__action { margin-top: 1rem; }

.not-found__image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    height: auto;
    border-radius: 150px;
    transform: translate(-50%, -50%);
    mask-image: radial-gradient(circle, #000 0%, transparent 60%);
}

@media (min-width: 40rem) {
    .subpage__body,
    .cta-wrap { width: 91.666667%; }

    .subpage__body { padding-inline: 0; }
}

@media (min-width: 48rem) {
    .page-heading { height: 45dvh; }
    .page-heading__title { font-size: 2.25rem; line-height: 2.5rem; }

    .bg-circle { display: block; }

    .subpage__body,
    .cta-wrap { width: 75%; }

    .subpage__body { padding-block: 3.5rem 5rem; }

    .cta__actions,
    .course-box__actions { flex-direction: row; }

    .contact__body { padding: 4.5rem 3rem 6rem; }

    .contact__details { gap: 2.5rem 3rem; }
}

@media (min-width: 64rem) {
    .page-heading__title { font-size: 3rem; line-height: 1; }

    .application-page__body { max-width: calc(100% / 3); }

    .page-nav { display: block; }

    main.contact {
        grid-template-columns: minmax(0, 1fr) 36%;
        min-height: calc(100dvh - 5rem);
    }

    .contact__body { padding: 5rem 4rem 6rem 6rem; }

    .contact__title { font-size: clamp(3.5rem, 6.5vw, 7rem); }

    .contact__photo { min-height: 0; }
}

@media (min-width: 90rem) {
    .contact__content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}


/* News detail (/novinky/<id>), ported from the original page; the text uses .tiptap, the photos .carousel */
.news-detail__date {
    display: block;
    margin-bottom: .5rem;
    color: #4a5565;
    font-size: .875rem;
    line-height: 1.25rem;
}

/* The original's headings are unstyled (Tailwind preflight): body text size and weight. */
.news-detail__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.news-detail__files {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.news-detail__files a {
    color: var(--green);
    text-decoration: underline;
}

.news-detail__files a:hover { text-decoration: none; }

/* Event detail (/akce/<type>/<id>), ported from the original page */
.event-info {
    width: 100%;
    margin: 1rem 0 1.5rem;
    border: 1px solid #d1d5dc;
    border-collapse: separate;
    border-spacing: 2px;
    border-radius: 1rem;
}

.event-info td {
    padding: .5rem .75rem;
    background: #f3f4f6;
}

.event-info td:first-child {
    width: 6rem;
    border-radius: .5rem 0 0 .5rem;
    color: #1e2939;
    white-space: nowrap;
}

.event-info td:last-child {
    border-radius: 0 .5rem .5rem 0;
    color: #101828;
    font-weight: 700;
}

/* Admin-written HTML (the original's tiptap editor styles, on top of Tailwind's preflight) */
.tiptap { padding: 1rem 2rem; }

.tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6,
.tiptap p, .tiptap ul, .tiptap ol, .tiptap blockquote, .tiptap pre {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.tiptap ul, .tiptap ol { padding: 0; }

.tiptap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.tiptap :first-child { margin-top: 0; }

.tiptap ul,
.tiptap ol {
    padding: 0 1rem;
    margin: 1.25rem 1rem 1.25rem .4rem;
}

.tiptap li p {
    margin-top: .25em;
    margin-bottom: .25em;
}

.tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6 {
    margin-top: 2.5rem;
    font-family: "Red Hat Display", sans-serif;
    line-height: 1.1;
    text-wrap: pretty;
    scroll-margin-top: 6rem;
}

.tiptap h2 {
    margin-bottom: .1rem;
    font-size: 1.6rem;
    line-height: 1rem;
    font-weight: 700;
}

.tiptap h3 {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.tiptap h4 {
    margin-bottom: .25rem;
    line-height: 2rem;
    font-weight: 700;
}

.tiptap h4, .tiptap h5, .tiptap h6 { font-size: 1rem; }

.tiptap code {
    padding: .25em .3em;
    border-radius: .4rem;
    background-color: #323835;
    color: var(--black);
    font-size: .85rem;
}

.tiptap pre {
    margin: 1.5rem 0;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--black);
    color: var(--white);
    font-family: "JetBrainsMono", monospace;
}

.tiptap pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: .8rem;
}

.tiptap blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid #323835;
}

.tiptap hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid #323835;
}

.tiptap ol li { list-style-type: decimal; }

.tiptap ul li { list-style-type: disc; }

.tiptap a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--green);
    cursor: pointer;
}

.tiptap a:hover { color: var(--green); }

.tiptap p {
    margin-bottom: 1.5rem;
    color: #374151;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    line-height: 1.625;
}

.tiptap table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

.tiptap td,
.tiptap th {
    padding: 8px;
    border: 1px solid #ccc;
}

.tiptap td p,
.tiptap th p { margin: 0; }

.tiptap th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Photo slider (components/carousel, js/carousel.js) */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel__track {
    display: flex;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.carousel__slide {
    flex-shrink: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.carousel__slide img {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #1e2939;
    color: var(--white);
    cursor: pointer;
    transform: translateY(-50%);
}

.carousel__arrow svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.carousel__arrow--prev { left: .5rem; }

.carousel__arrow--next { right: .5rem; }

.carousel__dots {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    display: flex;
    gap: .5rem;
    transform: translateX(-50%);
}

.carousel__dot {
    width: .75rem;
    height: .75rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #99a1af;
    cursor: pointer;
}

.carousel__dot.is-active { background: var(--white); }

.carousel__fullscreen {
    position: fixed;
    inset: 4.5rem 0 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
}

.carousel__fullscreen[hidden] { display: none; }

.carousel__fullscreen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.carousel__close,
.carousel__full-arrow {
    position: absolute;
    padding: .5rem;
    border: 0;
    background: none;
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
}

.carousel__close {
    top: 1rem;
    right: 1rem;
    padding: 0;
    line-height: 1;
}

.carousel__close svg {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
}

.carousel__full-arrow {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.carousel__full-arrow--prev { left: 1rem; }

.carousel__full-arrow--next { right: 1rem; }

@media (min-width: 48rem) {
    .event-info td:first-child { width: 12rem; }

    .carousel__slide img { height: 24rem; }
}

/* Redesigned event detail of cynology (trial sheet) and culture (invitation) events; spaces and
   type sizes from variables.css, colors from :root above. Courses keep the original page. */
.event-page--kynologie { --type: var(--type-kynologie); }
.event-page--kultura { --type: var(--type-kultura); }

.event-page a:focus-visible,
.event-page button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.event-page__body {
    width: min(72rem, 100% - var(--space-lg));
    margin: calc(var(--space-lg) + var(--space-sm)) auto 0;
    color: var(--black);
}

.event-page__grid {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-sm);
}

.event-page__story {
    display: grid;
    gap: var(--space-lg);
    min-width: 0;
    max-width: 38rem;
}

/* Facts: a label (muted) and a value per row, between hairlines */
.event-facts {
    margin: 0;
    border-top: 1px solid var(--hairline);
}

.event-facts__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: calc(var(--space-sm) + var(--space-xs));
    border-bottom: 1px solid var(--hairline);
}

.event-facts dt { color: var(--moss); }

.event-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.event-facts--stacked { border-top: 0; }

.event-facts--stacked .event-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.event-facts--stacked dt { font-size: var(--font-sm); }

/* Cynology: the application panel */
.event-apply {
    align-self: start;
    padding: var(--space-lg);
    background: var(--white);
}

.event-apply p { margin: 0; }

.event-apply__label { color: var(--moss); }

.event-apply__date {
    margin-block: var(--space-xs) var(--space-md) !important;
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--font-xxl);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.event-apply__button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-sm) var(--space-md);
    background: var(--green);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}

.event-apply__button:hover { background: var(--green-dark); }

.event-apply__state {
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--font-l);
    font-weight: 700;
}

.event-apply__note {
    margin-top: var(--space-xs) !important;
    color: var(--moss);
    font-size: var(--font-sm);
}

.event-apply__fees {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
}

.event-apply__fees div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
}

.event-apply__fees dt { color: var(--moss); }

.event-apply__fees dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Culture: the calendar leaf */
.event-leaf {
    display: grid;
    align-content: start;
    gap: var(--space-md);
}

.event-leaf__date {
    margin: 0;
    padding-top: var(--space-md);
    border-top: 3px solid var(--type);
}

.event-leaf__date time,
.event-leaf__day,
.event-leaf__month,
.event-leaf__time { display: block; }

.event-leaf__day {
    font-family: "Red Hat Display", sans-serif;
    font-size: calc(var(--font-title) * 2);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.event-leaf__month {
    margin-top: var(--space-sm);
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1.2;
}

.event-leaf__time {
    margin-top: var(--space-xs);
    color: var(--moss);
    font-variant-numeric: tabular-nums;
}

.event-lead {
    margin: 0;
    font-size: var(--font-l);
    line-height: 1.45;
}

/* The description: admin-written HTML */
.event-prose {
    max-width: 38rem;
    min-width: 0;
    color: #3b433e;
}

.event-prose > :first-child { margin-top: 0; }
.event-prose > :last-child { margin-bottom: 0; }

.event-prose p,
.event-prose ul,
.event-prose ol,
.event-prose blockquote,
.event-prose table { margin: 0 0 var(--space-md); }

.event-prose h1,
.event-prose h2,
.event-prose h3,
.event-prose h4 {
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--black);
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: pretty;
    scroll-margin-top: 6rem;
}

.event-prose h3,
.event-prose h4 { font-size: var(--font-l); }

.event-prose h1 strong,
.event-prose h2 strong { font-weight: inherit; }

.event-prose ul,
.event-prose ol { padding-left: var(--space-lg); }

.event-prose li + li { margin-top: var(--space-xs); }

.event-prose li p { margin: 0; }

.event-prose a {
    color: var(--green-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.event-prose a:hover { text-decoration-thickness: 2px; }

.event-prose blockquote {
    padding-left: var(--space-md);
    border-left: 3px solid var(--hairline);
}

.event-prose hr {
    margin: var(--space-lg) 0;
    border: 0;
    border-top: 1px solid var(--hairline);
}

.event-prose img {
    display: block;
    max-width: 100%;
    height: auto;
}

.event-prose table {
    width: 100%;
    border-collapse: collapse;
}

.event-prose td,
.event-prose th {
    padding: var(--space-sm);
    border: 1px solid var(--hairline);
    text-align: left;
}

.event-prose td p,
.event-prose th p { margin: 0; }

/* The shared photo slider in the app's colors */
.event-page .carousel__arrow { background: var(--black); }
.event-page .carousel__dot { background: var(--sage); }
.event-page .carousel__dot.is-active { background: var(--white); }

@media (prefers-reduced-motion: reduce) {
    .carousel__track { transition: none; }
}

@media (min-width: 40rem) {
    .event-facts__row { grid-template-columns: 10rem minmax(0, 1fr); }

    .event-lead { font-size: var(--font-xl); }
}

@media (min-width: 64rem) {
    .event-page__grid--sheet {
        grid-template-columns: minmax(0, 38rem) 20rem;
        justify-content: space-between;
        column-gap: calc(var(--space-lg) * 2);
    }

    .event-page__grid--sheet > * { grid-column: 1; }

    .event-page__grid--sheet > .event-apply {
        position: sticky;
        top: 6.5rem;
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .event-page__grid--invitation {
        grid-template-columns: 16rem minmax(0, 1fr);
        column-gap: calc(var(--space-lg) * 2);
    }

    .event-leaf {
        position: sticky;
        top: 6.5rem;
        align-self: start;
    }
}

/* Login (/auth/login) - 1:1 port of the original (front)/(pages)/login page. */
.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 5rem 1rem;
    background-image: linear-gradient(to bottom right, #4a5565, var(--green));
}

.login__form {
    width: 100%;
    max-width: 24rem;
    padding: 2rem;
    border: 1px solid #101828;
    border-radius: 1rem;
    background: #fff;
    color: var(--foreground);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}

.login__form > * + * { margin-top: 1.5rem; }
.login__fields > * + * { margin-top: 1rem; }

.login__head { text-align: center; }

.login__title {
    margin: 0;
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}

.login__lead,
.login__error {
    margin-bottom: 0;
    font-size: .875rem;
    line-height: 1.25rem;
}

.login__lead {
    margin-top: 0;
    color: #4a5565;
}

.login__label {
    display: block;
    margin-bottom: .25rem;
    color: #101828;
    font-size: .875rem;
    line-height: 1.25rem;
}

.login__input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: .5rem 1rem;
    border: 1px solid #364153;
    border-radius: .5rem;
    background: #f3f4f6;
    color: var(--black);
    font: inherit;
    line-height: 1.5;
    transition: border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.login__input:focus {
    border-color: #00c950;
    outline: none;
    box-shadow: 0 0 0 2px #00c950;
}

.login__error {
    color: var(--urgent);
    text-align: center;
}

.login__submit {
    display: block;
    width: 100%;
    padding: .625rem 0;
    border: 0;
    border-radius: .5rem;
    background: var(--black);
    color: var(--white);
    font: inherit;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.login__submit:hover { background: rgb(31 36 33 / .8); }

.login__submit:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #51a2ff;
}