/*
    By Sommerhusudlejning — husejer-sitet.

    Designet følger bysommerhuse.dk: samme Bootstrap 5.3-tema, samme
    regnbue-streg under headeren, samme navy (#151547) og samme grønne CTA.
    De to sites skal ligne hinanden — en husejer der har set bookingsitet skal
    kunne se at det er samme firma.

    Bootstrap 5.3.3 ligger i public/css/bootstrap.min.css og
    public/js/bootstrap.bundle.min.js som statiske filer. Stadig ingen Vite,
    ingen npm, intet byggetrin — og stadig ingen tredjepartskald: Bootstrap
    bruger selv systemskrifttyper, så der hentes hverken CSS, JS eller fonte
    fra et fremmed domæne.

    Filerne er hentet fra upstream, IKKE kopieret fra booking3. I booking3's
    indlejrede kopi er SVG-navnerummet blevet søgt-og-erstattet til
    'https://www.w3.org/2000/svg'. Det er ikke et gyldigt namespace, så alle
    Bootstraps indlejrede SVG-ikoner holder op med at tegne: burgermenuen,
    select-pilen, afkrydsningsfelter, luk-knappen og fejlikonet i formularen.
    Kopierer man den fil herover igen, forsvinder burgermenuen uden at noget
    fejler.

    Denne fil er kun det der IKKE står i Bootstrap.
*/

:root {
    --byo-navy: #151547;
    --byo-groen: #198754;
}

/* ------------------------------------------------- sitets stærkeste signatur */

/* Regnbue-stregen under headeren. border-image kræver en gennemsigtig
   border-bottom at male på — uden den ses gradienten ikke.
   Den må KUN sidde på et element uden andre kanter: border-image maler
   alle fire sider, så på et .card ville hele kortet blive regnbuefarvet. */
.header-bottom {
    border-bottom: 5px solid transparent;
    border-image: linear-gradient(45deg, #FFE14B, #FF3437, #F9348F, #2381F9);
    border-image-slice: 1;
    margin-bottom: 0;
}


/* ------------------------------------------------------------- typografi */

/* Lette overskrifter frem for Bootstraps 500. Det er det der giver
   bysommerhuse.dk sit rolige udtryk. */
h1 { font-weight: 300; line-height: 1.2; }
h2, h3, h4 { font-weight: 300; }

/* ------------------------------------------------------------- layout */

/* Bootstrap stopper ved 1320px; på en bred skærm giver det en tynd søjle. */
@media (min-width: 1400px) {
    .container { max-width: 1560px; }
}

/* Gråt sektionsbånd — samme klasse og samme mål som på bysommerhuse.dk. */
.fp_full {
    padding: 80px 0;
    background-color: #eee;
}

/* Navy bånd. På bookingsitet bærer det søgefeltet; her bærer det overskriften. */
.byo-band {
    background-color: var(--byo-navy);
}

/* Samme knaphøjde som søgeknappen på bysommerhuse.dk. */
.byo-cta {
    height: 58px;
}

/* ------------------------------------------------------------- fordelsliste */

/* Flueben i stedet for punkter. Tegnet med CSS-borders: Bootstrap har ingen
   tilsvarende komponent, og en ikonfont ville være et nyt asset for fire streger. */
.fordele {
    list-style: none;
    padding: 0;
}
.fordele li {
    position: relative;
    padding-left: 32px;
    margin-bottom: .8em;
}
.fordele li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .35em;
    width: 9px;
    height: 15px;
    border: solid var(--byo-groen);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* ------------------------------------------------------------- formular */

/* Honeypot. Skjult for mennesker, synlig for bots. Funktionel, ikke kosmetisk —
   den må ikke erstattes af d-none, som bots også kan se. */
.honning {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}