/*
 * Pidula Wakepark — what the theme adds on top of the new design's stylesheets
 * (bootstrap.min.css and style.css from saarewake_example/, served unchanged).
 *
 * Three parts:
 *   1. The header and footer: the few things the design's markup gained as
 *      sections (the footer headings as <h2>, the wave's colour), and what
 *      the page sections add (a band's spacing, the terms' warning clause).
 *   2. The old leping body (`.saarewake_legacy`): the new design has no leping
 *      page, so the page hero and the contract keep the old leping page's look.
 *      Those rules came from the old Applify stylesheet (Bootstrap 4 and its own
 *      classes); they are re-created here, scoped, so one page carries one
 *      Bootstrap. The numbers are the old page's computed styles.
 *   3. The contract form's own additions: labels, error messages, status line.
 *   4. Core's cookie banner, in the design's colours, type and shapes.
 */

/* ===== 1. Header and footer ===================================== */

/* The footer's column headings are <h2> (the design's <h4> skipped two
   levels after the page's <h1>); this is the design's `.footer-cols h4`. */
.footer-cols h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.5rem;
    color: var(--sand);
    margin-bottom: .9rem;
}

/* The wave on top of the footer is the colour of the band above it — the
   design draws it `w-cream2`, the colour its every page ends on. Here the last
   section decides (core prints an anchor <div> before each section, never
   after, so the last section is main's last child); white under the old
   leping body. */
body:has(main > .saarewake_legacy:last-child) .site-footer .wave-top path {
    fill: #fff;
}

body:has(main > .section-cream2:last-child) .site-footer .wave-top path {
    fill: var(--cream2);
}

body:has(main > .section-sand:last-child) .site-footer .wave-top path {
    fill: var(--sand);
}

body:has(main > .section-sky:last-child) .site-footer .wave-top path {
    fill: var(--sky);
}

body:has(main > .section-coral:last-child) .site-footer .wave-top path {
    fill: var(--coral);
}

body:has(main > .section-black:last-child) .site-footer .wave-top path {
    fill: var(--ink);
}

/* …unless that last section ends in a wave of its own: then the footer
   continues that wave's colour (hinnakiri.html: a sky band whose bottom wave
   is cream2, then the footer's cream2 wave). */
body:has(main > .section:last-child > .wave-bottom) .site-footer .wave-top path {
    fill: var(--cream);
}

body:has(main > .section:last-child > .wave-bottom.w-cream2) .site-footer .wave-top path {
    fill: var(--cream2);
}

body:has(main > .section:last-child > .wave-bottom.w-sand) .site-footer .wave-top path {
    fill: var(--sand);
}

body:has(main > .section:last-child > .wave-bottom.w-coral) .site-footer .wave-top path {
    fill: var(--coral);
}

/* The platform credit at the right end of the bottom row; on a phone, where
   the row has no room for three things, it drops to a line of its own. */
.footer-bottom {
    flex-wrap: wrap;
}

.footer-credit {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .footer-credit {
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* ===== 1b. Page sections ========================================= */

/* The side columns that should stay in view while the long one beside them
   scrolls past — the KKK page's topics, the homepage's activity intro, the
   terms' summary (`sticky-lg-top intro-sticky`) — scrolled away instead, in
   the design too. Its `body{overflow-x:hidden}` made <body> a scroll
   container (<html> is `overflow-x:clip`, so the body's overflow is not
   handed to the window), and a sticky element sticks within its nearest
   scroll container: the body, which never scrolls. `clip` cuts the bubbles
   off at the screen's edge the same way without making one; a browser that
   does not know `clip` drops this line and keeps `hidden`. */
body {
    overflow-x: clip;
}

/* A band's "Space above / below" (the sections' Look). The design tightens a
   band right under a page hero (its `faq-section`, `events-section` …) and
   between two bands of one colour (`stay-intro`, `winter-stats`, `pt-last`);
   these are those two steps. Two classes, so they win over a background's own
   padding (`.section-sky`). */
.section.saarewake_space-top-medium {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.section.saarewake_space-top-small {
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.section.saarewake_space-bottom-medium {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.section.saarewake_space-bottom-small {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* "None": the band carries on from the one above (or into the one below) as
   if they were one — kestlikkus-green-key.html's first goal is one sand band
   holding the goal and two rows of small cards, three sections here. What
   follows keeps its own top margin (`.sub-title`), which is the design's gap.
   `flow-root` keeps that margin INSIDE the band: with no padding, a first
   child's margin collapses through the section and shows as a stripe of the
   page's cream between two sand sections. */
.section.saarewake_space-top-none {
    padding-top: 0;
    display: flow-root;
}

.section.saarewake_space-bottom-none {
    padding-bottom: 0;
    display: flow-root;
}

/* The homepage hero's photo is an <img> in a <picture> (home-hero.php) where
   the design paints a background: it fills the band as the background did,
   at the design's focus. */
.hero-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
}

@media (max-width: 991.98px) {
    .hero-photo > img {
        object-position: 70% 40%;
    }
}

/* With a photo of its own for phones, a phone held upright shows that photo
   whole across the top (no taller than the screen), fading into the band's
   indigo, and the band grows so the heading starts under the photo's top half
   rather than over it. Cropped to the band's height like the wide photo, a
   portrait lost its sides (the rider's helmet). The extra room under the
   buttons keeps the price sticker, lifted by its parallax, clear of them.
   No parallax on the photo: it starts at the band's top edge, and moving it
   would open a gap above it — the !important outranks the inline transform
   theme.js writes. The media query is the <source>'s in home-hero.php. */
@media (max-width: 575.98px) and (orientation: portrait) {
    .hero.has-mobile-photo {
        min-height: calc(min(100vw * 16 / 9, 100svh) + 26rem);
        padding-bottom: 300px;
    }

    .hero.has-mobile-photo .hero-photo {
        inset: 0 0 auto;
        aspect-ratio: 9 / 16;
        max-height: 100svh;
        transform: none !important;
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
        mask-image: linear-gradient(to bottom, #000 70%, transparent);
    }

    .hero.has-mobile-photo .hero-photo > img {
        object-position: 50% 30%;
    }
}

/* Numbered steps as small cards (the steps' "Card size"; the design has
   only the large ones): up to four on a row where the design fits three,
   with the number, heading and padding scaled down to match. A row that is
   not full is centred under the centred heading, so three small steps do not
   leave an empty fourth place on the right. Two on a row on a tablet, one on
   a phone. Not `.small`: Bootstrap's `.small` shrinks every text in the list. */
.steps.steps-small {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.steps-small .step {
    flex: 0 1 calc((100% - 3 * 1.25rem) / 4);
    padding: 2.4rem 1.25rem 1.25rem;
    margin-top: 1.75rem;
}

.steps-small .step b {
    top: -1.75rem;
    left: 1.25rem;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2.1rem;
}

.steps-small .step h3 {
    font-size: 1.5rem;
}

.steps-small .step p {
    font-size: .9375rem;
}

@media (max-width: 991.98px) {
    .steps-small .step {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

@media (max-width: 575.98px) {
    .steps-small .step {
        flex-basis: 100%;
    }
}

/* The terms' warning clause. The design reddens the 11th clause by position
   (`.legal-list li:nth-child(11)`); here the clause carries its own flag, so
   adding or reordering clauses moves the red badge with the right one. */
.legal-list li:nth-child(11)::before {
    background: var(--cream2);
    color: var(--indigo);
}

.legal-list li.is-warning::before {
    background: var(--red);
    color: #fff;
}

/* ===== 2. The old leping body ==================================== */

/* The old page's root size: Applify set <html> to 14px, 15px from 768px and
   16px from 992px, and sized everything in rem. The new design needs <html>
   at Bootstrap's 16px, so the old body scales off this instead. */
:root {
    --saarewake-r: 14px;
}

@media (min-width: 768px) {
    :root {
        --saarewake-r: 15px;
    }
}

@media (min-width: 992px) {
    :root {
        --saarewake-r: 16px;
    }
}

.saarewake_legacy {
    font-family: "Open Sans", sans-serif;
    font-size: var(--saarewake-r);
    font-weight: 400;
    line-height: 1.4;
    color: #708198;
    background: #fff;
}

.saarewake_legacy a {
    color: #8089ff;
    text-decoration: none;
    transition: color .25s ease-out;
}

.saarewake_legacy p {
    margin: 0 0 var(--saarewake-r);
}

.saarewake_legacy h1,
.saarewake_legacy h2 {
    margin: 0 0 calc(.5 * var(--saarewake-r));
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 700;
    line-height: 1.1;
    color: #414c5a;
}

.saarewake_legacy h2 {
    font-size: calc(2 * var(--saarewake-r));
}

/* The grid: Bootstrap 4's container widths and Applify's 1rem gutters. */
.saarewake_legacy .container {
    width: 100%;
    max-width: 100%;
    padding-right: var(--saarewake-r);
    padding-left: var(--saarewake-r);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .saarewake_legacy .container {
        padding-right: calc(2 * var(--saarewake-r));
        padding-left: calc(2 * var(--saarewake-r));
    }
}

@media (min-width: 768px) {
    .saarewake_legacy .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .saarewake_legacy .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .saarewake_legacy .container {
        max-width: 1140px;
    }
}

.saarewake_legacy .row {
    --bs-gutter-x: calc(2 * var(--saarewake-r));
    --bs-gutter-y: 0;
}

@media (max-width: 767.98px) {
    .saarewake_legacy .center-on-sm {
        text-align: center;
    }
}

/* The page hero: the peach band the new header floats over. */
.saarewake_legacy.page-hero {
    position: relative;
    padding: calc(4 * var(--saarewake-r)) 0 calc(6 * var(--saarewake-r));
    color: rgba(255, 255, 255, .85);
    background: linear-gradient(45deg, #fe60a1 0%, #ff8765 100%);
}

@media (min-width: 992px) {
    .saarewake_legacy.page-hero {
        padding: calc(5 * var(--saarewake-r)) 0 calc(7 * var(--saarewake-r));
    }
}

@media (min-width: 1681px) {
    .saarewake_legacy.page-hero {
        padding: calc(6 * var(--saarewake-r)) 0 calc(8 * var(--saarewake-r));
    }
}

.saarewake_legacy.page-hero .container {
    position: relative;
    z-index: 2;
    padding-top: 50px;
}

@media (min-width: 576px) {
    .saarewake_legacy.page-hero .container {
        padding-top: 60px;
    }
}

.saarewake_legacy.page-hero .heading {
    max-width: 100%;
    margin-bottom: 0;
    color: #fff;
    font-size: calc(2.2 * var(--saarewake-r));
}

@media (max-width: 767.98px) {
    .saarewake_legacy.page-hero .heading {
        margin-bottom: calc(2 * var(--saarewake-r));
    }
}

@media (min-width: 576px) {
    .saarewake_legacy.page-hero .heading {
        font-size: calc(2.4 * var(--saarewake-r));
    }
}

@media (min-width: 768px) {
    .saarewake_legacy.page-hero .heading {
        font-size: calc(2.5 * var(--saarewake-r));
    }
}

@media (min-width: 1200px) {
    .saarewake_legacy.page-hero .heading {
        font-size: calc(2.6 * var(--saarewake-r));
    }
}

.saarewake_legacy.page-hero .paragraph {
    max-width: 500px;
    margin-bottom: 0;
    font-size: calc(1.1 * var(--saarewake-r));
}

/* Centred under a centred heading. The old page left the 500px block at the
   left edge with its text centred inside it, off the heading's axis. */
.saarewake_legacy.page-hero .text-center .paragraph {
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .saarewake_legacy.page-hero p {
        margin-top: calc(2 * var(--saarewake-r));
    }
}

/* A link on the band (the 404's "Avalehele") is white and, unlike the old
   page's, underlined: its colour alone would not tell it from the text. */
.saarewake_legacy.page-hero a {
    color: #fff;
    text-decoration: underline;
}

/* The contract's column. */
.saarewake_legacy .ui-blog {
    padding: calc(4 * var(--saarewake-r)) 0;
}

@media (min-width: 992px) {
    .saarewake_legacy .ui-blog {
        padding: calc(5 * var(--saarewake-r)) 0;
    }
}

@media (min-width: 1200px) {
    .saarewake_legacy .ui-blog {
        padding: calc(6 * var(--saarewake-r)) 0;
    }
}

.saarewake_legacy .ui-blog-post .heading {
    margin-bottom: calc(1.5 * var(--saarewake-r));
}

.saarewake_legacy .form-group {
    margin-bottom: var(--saarewake-r);
}

.saarewake_legacy .form-control {
    display: block;
    width: 100%;
    padding: calc(.875 * var(--saarewake-r)) calc(.95 * var(--saarewake-r));
    font-family: inherit;
    font-size: var(--saarewake-r);
    line-height: 1.4;
    color: #708198;
    background-color: #edeff2;
    border: 0;
    border-radius: calc(.5 * var(--saarewake-r));
    box-shadow: none;
    transition: box-shadow .15s ease-in-out;
}

.saarewake_legacy .form-control:focus {
    color: #708198;
    background-color: #edeff2;
    box-shadow: 0 0 0 calc(.2 * var(--saarewake-r)) rgba(128, 137, 255, .25);
}

.saarewake_legacy .form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}

.saarewake_legacy .btn.ui-gradient-green {
    display: inline-block;
    padding: calc(.6 * var(--saarewake-r)) calc(1.5 * var(--saarewake-r));
    font-family: "Source Sans Pro", sans-serif;
    font-size: calc(.9 * var(--saarewake-r));
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: calc(.03 * var(--saarewake-r));
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(45deg, #3ad863 0%, #81e630 100%);
    border: 0;
    border-radius: 50rem;
    box-shadow: 0 7px 15px rgba(0, 9, 128, .05), 0 12px 28px rgba(0, 9, 128, .075),
        inset 0 1px 1px rgba(255, 255, 255, .1), inset 0 -1px 1px rgba(0, 0, 0, .075);
}

@media (min-width: 992px) {
    .saarewake_legacy .btn.ui-gradient-green {
        font-size: calc(.95 * var(--saarewake-r));
    }
}

.saarewake_legacy .btn.ui-gradient-green:hover,
.saarewake_legacy .btn.ui-gradient-green:focus {
    color: #fff;
}

/* ===== 3. The contract form (sections/pages/default/frontend/leping-contract.php) */

/* A refused adult's name (public/js/leping.js): the box turns red and the
   reason shows under it — the design's `.invalid-feedback`, which Bootstrap
   shows only beside `.is-invalid`, shown here whenever it says something. */
.wake-form .form-control[aria-invalid="true"] {
    border-color: var(--red);
}

.wake-form .saarewake_field-error:not(:empty) {
    display: block;
}

.saarewake_leping-form button[disabled] {
    opacity: .7;
    cursor: progress;
}

/* The button that adds a box for one more minor, under the boxes. */
.sign-form .saarewake_add-minor {
    margin-top: 1rem;
}

/* The status line takes no room until it says something (then, between the
   note and the button). Two classes on the form: the forms' own reply rule
   further down sets its margin to 0. */
.sign-form .saarewake_form-status:empty {
    margin: 0;
}

.wake-form.sign-form .saarewake_form-status:not(:empty) {
    margin-bottom: 1rem;
}

/* A link typed in a section's lead is the design's `.inline-link` (indigo,
   bold — kontakt.html). Zero-specificity `:where()`, so the design's own
   `.section-coral .lead-text a` (white on coral) still wins. */
:where(.lead-text) a {
    color: var(--indigo);
    font-weight: 600;
}

/* The forms' server reply (saarewake-forms.js): what went wrong, in the
   design's error colour. */
.wake-form .saarewake_form-status:not(:empty) {
    color: #C43D12;
    font-weight: 600;
    margin: 0;
}

/* An FAQ answer is rich text, so it arrives in paragraphs; the design's
   answer was bare text, with no paragraph margin after it. */
.faq .accordion-body > :last-child {
    margin-bottom: 0;
}

/* A grant's bold words: the design types <b> and styles it 600
   (`.grant-text b`); the rich text stores <strong>. */
.grant-text strong {
    font-weight: 600;
}

/* ===== 4. Core's cookie banner (Silktide, app/Modules/Consent) ====== */

/* consent.css declares the banner's palette on #silktide-wrapper and every
   rule inside reads it, so re-declaring the values does most of the job.
   consent.css loads after this file: `html` in front of the id wins the
   specificity tie. Silktide's --focus is a box-shadow and is left as it is,
   so the focus ring stays. Both choices stay filled buttons of one colour,
   as core draws them: accepting is not made louder than refusing. */
html #silktide-wrapper {
    --fontFamily: var(--font-body);
    --primaryColor: var(--indigo);
    --backgroundColor: var(--white);
    --textColor: var(--ink);
    --backdropBackgroundColor: rgba(35, 31, 32, .35);
    --cookieIconColor: var(--indigo);
    --cookieIconBackgroundColor: var(--sand);
    --boxShadow: var(--shadow);
}

/* The radii, the shadows and the button weight are literals in consent.css,
   not properties: the design's rounded white card and its pill buttons
   (`.btn-wake`). */
html #silktide-wrapper #silktide-banner,
html #silktide-wrapper #silktide-modal {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

html #silktide-wrapper .st-button {
    border-radius: 999px;
    font-weight: 600;
}

/* consent.css squares a focused button through two ids; the ring keeps the pill. */
html #silktide-wrapper #silktide-banner .st-button:focus,
html #silktide-wrapper #silktide-modal .st-button:focus {
    border-radius: 999px;
}

html #silktide-wrapper #silktide-banner .preferences {
    font-weight: 600;
}

/* The dialog's heading in the design's display type, as the site's headings are. */
html #silktide-wrapper #silktide-modal h1 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--indigo);
}