/*
 * Nereus brand system (see the "Nereus Brand Guide" design manual).
 * Additive on top of site.css / Bootstrap — tokens, type, hero, buttons, footer.
 */

:root {
    --n-regatta: #0B4A57;
    --n-lane: #2C93B8;
    --n-ink: #10262B;
    --n-flag: #E8542E;
    --n-site-accent: #0E86C7; /* KPŠ — Current */
}

body {
    font-family: 'Public Sans', 'Segoe UI', -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    font-weight: 800;
    letter-spacing: .2px;
}

/* ---------- header ---------- */
#header .navbar {
    background: var(--n-regatta) !important;
}

.brand-crest {
    height: 34px;
    width: 34px;
    margin-right: .5rem;
    vertical-align: middle;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Bootstrap's .navbar-collapse defaults to flex-wrap: nowrap — fine when
   the expanded row only ever holds a short link list, but ours also
   carries the site-switch-group. At in-between widths (past the
   navbar-expand-md breakpoint where the hamburger disappears, but before
   there's room for everything on one line) nowrap didn't make the row
   wrap — it just squeezed the switch-group narrower than its 3 buttons
   need, and since that group clips its own overflow (for the rounded
   corners), the last button silently vanished instead of wrapping into
   view. Letting the row wrap fixes every in-between width at once instead
   of hand-tuning breakpoints. */
.navbar-collapse {
    flex-wrap: wrap;
    row-gap: .25rem;
}

/* ---------- header: utility nav (account) ---------- */
.navbar-nav-utility {
    font-size: .9rem;
    flex-shrink: 0;
}

.navbar-nav-utility .nav-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* ---------- domain switch bar (own strip above the header) ---------- */
.domain-switch-bar {
    background: var(--n-ink);
    padding: .5rem 15px;
}

/* 3 independent rounded pills (not one connected segmented control): the
   full site names ("Žilinský triatlonový festival"...) are long enough
   that a shared pill with hard-clipped overflow would break badly on
   narrow screens — separate pills can wrap onto a second line instead. */
.site-switch-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.site-switch-btn {
    padding: .3rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    white-space: nowrap;
}

a.site-switch-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .1);
}

.site-switch-btn.active {
    border-color: var(--n-flag);
    background: var(--n-flag);
    color: #fff;
}

/* ---------- hero banner (diagonal split, brand palette — no green) ---------- */
.hero-banner {
    background: linear-gradient(115deg, var(--n-regatta) 0 52%, var(--n-site-accent) 52% 100%);
    position: relative;
}

/* MainBanner (admin-uploaded homepage photo) behind a dark scrim, in place of the flat gradient. */
.hero-banner.has-photo {
    background-image: linear-gradient(115deg, rgba(8, 20, 24, .6), rgba(8, 20, 24, .4)), var(--hero-photo);
    background-size: cover;
    background-position: center;
}

.hero-banner::before {
    content: none;
}

.hero-banner h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.02;
}

.hero-lead {
    max-width: 520px;
}

/* ---------- buttons ---------- */
.btn-primary {
    background-color: var(--n-flag);
    border-color: var(--n-flag);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #cf431f;
    border-color: #cf431f;
}

.btn-outline-secondary {
    border-color: var(--n-regatta);
    color: var(--n-regatta);
}

.btn-outline-secondary:hover {
    background-color: var(--n-regatta);
    border-color: var(--n-regatta);
    color: #fff;
}

/* --n-regatta is a near-black teal — readable as text/border on the light
   background it was designed for, but close to invisible against the dark
   theme's near-black background. Swap to --n-lane (a much lighter blue)
   whenever dark mode is active. */
[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--n-lane);
    color: var(--n-lane);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--n-lane);
    border-color: var(--n-lane);
    color: var(--n-ink);
}

/* Course/article/benefit cards use border-0 + shadow-sm for separation —
   on a light page background the shadow reads fine, but in dark mode the
   card background is identical to the page background and the shadow is a
   ~black tint at 7% opacity, i.e. invisible on top of near-black — cards
   became indistinguishable from each other and from the page. Give them a
   slightly lighter surface + a subtle visible border instead, using
   Bootstrap's own dark-mode-aware tokens. */
[data-bs-theme="dark"] .card {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
}

/* ---------- wave divider (echoes the crest's wave lines) ---------- */
.wave-divider {
    display: block;
    width: 100%;
    height: 28px;
    margin-block: 1.5rem;
}

/* ---------- footer ---------- */
#footer {
    background: var(--n-regatta) !important;
    color: #BFD8DA;
}

#footer a {
    color: #BFD8DA;
}

#footer .footer-crest {
    height: 22px;
    width: 22px;
    margin-right: .4rem;
    vertical-align: text-bottom;
}

/* Dark-mode toggle — lives in the footer, not the header, and desaturated
   (the raw sun/moon emoji glyphs are a jarring, out-of-brand bright yellow
   otherwise). */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: transparent;
    color: #BFD8DA;
    font-size: .85rem;
    line-height: 1;
    filter: grayscale(1);
    opacity: .8;
    transition: opacity .15s ease-in-out, border-color .15s ease-in-out;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
    opacity: 1;
    border-color: rgba(255, 255, 255, .5);
}