/*
 * 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: #1C6FB5; /* Triatlon — Riptide */
}

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 + site switcher) ---------- */
.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 ----------
 * Homepage carries .tri-texture children (3 discipline photo bands, absolutely
 * positioned) which visually cover this. Every other page using .hero-banner
 * (e.g. the project detail page) has no such children, so it falls back to
 * this plain diagonal split like the other 2 sites. */
.hero-banner {
    background: linear-gradient(115deg, var(--n-regatta) 0 52%, var(--n-site-accent) 52% 100%);
    position: relative;
    isolation: isolate;
}

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

.tri-texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}

/* Each band used to span the FULL hero width (inset: 0) with only its
   clip-path slice visible — meaning background-size: cover scaled every
   photo to cover the whole banner, and ~60-75% of that scaled image was
   thrown away behind the clip. On a wide desktop hero that meant covering
   a ~1100px box to show a ~250-450px sliver: far more upscaling than the
   visible area ever needed, which read as blur. Each band's box is now
   sized to its own bounding width, so `cover` scales against roughly what's
   actually shown — combined with source photos pre-cropped to a close
   aspect ratio (see triatlon/web/images/brand/), this uses close to native
   resolution instead of a wastefully over-scaled crop. clip-path points
   below are recalculated relative to each band's own (narrower) box rather
   than the full hero width. */
.tri-band {
    position: absolute;
    top: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.tri-band.swim {
    left: 0;
    width: 38%;
    clip-path: polygon(0 0, 100% 0, 63.16% 100%, 0 100%);
    background-image: linear-gradient(165deg, rgba(35, 140, 205, .4), rgba(15, 90, 145, .45)), url('../images/brand/swim.jpg');
}

.tri-band.bike {
    left: 24%;
    width: 48%;
    clip-path: polygon(29.17% 0, 100% 0, 70.83% 100%, 0 100%);
    background-image: linear-gradient(165deg, rgba(150, 158, 164, .28), rgba(90, 98, 104, .42)), url('../images/brand/bike.jpg');
}

.tri-band.run {
    left: 58%;
    width: 42%;
    clip-path: polygon(33.33% 0, 100% 0, 100% 100%, 0 100%);
    /* Pre-cropped to the landscape strip with the diagonal lane lines +
       distance markings — its aspect ratio now closely matches this band's
       own box, so the default `background-position: center` (set above)
       needs no further per-band offset. */
    background-image: linear-gradient(165deg, rgba(120, 40, 20, .2), rgba(70, 20, 10, .4)), url('../images/brand/run-tartan.jpg');
}

.hero-banner > .position-relative {
    position: relative;
    z-index: 1;
}

.hero-banner h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.02;
    /* The homepage hero sits on top of 3 busy discipline photos (not a flat
       brand-color gradient like the other hero-banner uses), so white text
       needs real separation from the image instead of just opacity. */
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .6);
}

.hero-lead {
    max-width: 520px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* ---------- 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);
}