/* ==========================================================================
   Haus Venedigerblick - site styling on top of Bootstrap 5
   ========================================================================== */

@font-face {
    font-family: 'InterVariable';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InterVariable';
    src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Vollkorn, the display face for headings and the hero. A sturdy, warm
   German serif that suits an Austrian chalet far better than a system
   grotesque. SIL Open Font License, see fonts/Vollkorn-OFL.txt */
@font-face {
    font-family: 'Vollkorn';
    src: url('../fonts/Vollkorn-Variable.woff2') format('woff2');
    font-weight: 400 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: 'Vollkorn';
    src: url('../fonts/Vollkorn-Variable-latin-ext.woff2') format('woff2');
    font-weight: 400 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-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* Caveat, used for the handwritten signature. SIL Open Font License,
   see fonts/Caveat-OFL.txt */
@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Variable.woff2') format('woff2');
    font-weight: 400 700;
    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: 'Caveat';
    src: url('../fonts/Caveat-Variable-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    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-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    --hvb-blue: #0b52a0;
    --hvb-blue-dark: #073a73;
    --hvb-blue-deep: #05294f;
    --hvb-sky: #4fa8e0;
    --hvb-ink: #14212c;
    --hvb-muted: #5d6f7d;
    /* The quiet surface colour: a glacier-ice tint rather than beige, so the
       calm blocks stay in the same cold-mountain-air family as the photos. */
    --hvb-sand: #eef4f9;
    --hvb-line: #dde6ee;
    --hvb-radius: 12px;
    --hvb-display: 'Vollkorn', Georgia, 'Times New Roman', serif;
    --hvb-handwriting: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
    --hvb-shadow: 0 14px 34px -20px rgba(5, 41, 79, .35);

    --bs-primary: #0b52a0;
    --bs-primary-rgb: 11, 82, 160;
    --bs-link-color: #0b52a0;
    --bs-link-color-rgb: 11, 82, 160;
    --bs-link-hover-color: #073a73;
    --bs-body-color: #24313d;
    --bs-body-font-family: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--bs-body-color);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hvb-ink);
    font-family: var(--hvb-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

.btn {
    --bs-btn-font-weight: 600;
    border-radius: 10px;
    padding-inline: 1.25rem;
    padding-block: .55rem;
}

.btn-primary {
    --bs-btn-bg: var(--hvb-blue);
    --bs-btn-border-color: var(--hvb-blue);
    --bs-btn-hover-bg: var(--hvb-blue-dark);
    --bs-btn-hover-border-color: var(--hvb-blue-dark);
    --bs-btn-active-bg: var(--hvb-blue-deep);
    --bs-btn-active-border-color: var(--hvb-blue-deep);
}

a:focus-visible,
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--hvb-sky);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    background: #fff;
    padding: .5rem 1rem;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--hvb-blue-deep);
    color: rgba(255, 255, 255, .82);
    font-size: .825rem;
    padding: .5rem 0;
}

.topbar i {
    color: var(--hvb-sky);
    margin-right: .35rem;
}

.topbar a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    margin-left: 1.4rem;
    transition: color .15s ease;
}

.topbar a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.site-nav {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hvb-line);
    padding-block: .5rem;
    transition: box-shadow .2s ease, padding .2s ease;
}

.site-nav.is-scrolled {
    box-shadow: 0 10px 30px -18px rgba(5, 41, 79, .5);
    padding-block: .25rem;
}

.site-nav .navbar-brand img {
    height: 52px;
    width: auto;
    transition: height .2s ease;
}

.site-nav.is-scrolled .navbar-brand img {
    height: 42px;
}

.site-nav .nav-link {
    color: var(--hvb-ink);
    font-weight: 600;
    font-size: .95rem;
    padding-inline: .85rem !important;
    position: relative;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    color: var(--hvb-blue);
}

.site-nav .nav-link.active {
    color: var(--hvb-blue);
}

@media (min-width: 992px) {
    /* ::before, not ::after: Bootstrap draws the dropdown caret with ::after,
       and an active group (viewing one of its subpages) needs both the caret
       and the underline. */
    .site-nav .nav-item > .nav-link.active::before {
        content: '';
        position: absolute;
        left: .85rem;
        right: .85rem;
        bottom: .1rem;
        height: 2px;
        border-radius: 2px;
        background: var(--hvb-sky);
    }
}

.site-nav .dropdown-menu {
    border: 1px solid var(--hvb-line);
    border-radius: var(--hvb-radius);
    box-shadow: var(--hvb-shadow);
    padding: .5rem;
    margin-top: .5rem;
}

.site-nav .dropdown-item {
    border-radius: 9px;
    font-weight: 500;
    padding: .5rem .85rem;
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
    background: var(--hvb-sand);
    color: var(--hvb-blue);
}

.site-nav .dropdown-item.active {
    background: var(--hvb-blue);
    color: #fff;
}

.navbar-toggler {
    border: 1px solid var(--hvb-line);
    border-radius: 10px;
    color: var(--hvb-blue);
    font-size: 1.2rem;
    padding: .35rem .65rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(79, 168, 224, .35);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.site-hero {
    position: relative;
    color: #fff;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--hvb-blue-deep);
}

/* The photo sits on its own layer so it can be given a little more life
   without also dimming the scrim and the text above it. The source photos are
   hazy mountain panoramas, which flatten out badly under a dark overlay. */
.site-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    filter: saturate(1.2) contrast(1.06) brightness(1.02);
}

.site-hero--large {
    min-height: min(76vh, 660px);
}

.site-hero--compact {
    min-height: 300px;
}

/* The ridgeline the hero photo dissolves into: white peaks in front of the
   mountains, like a foreground of snow. The svg stretches, so it stays
   proportionate on any viewport without media queries. */
.site-hero__ridge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(42px, 7vw, 96px);
    color: #fff;
    pointer-events: none;
}

.site-hero--compact .site-hero__ridge {
    height: clamp(30px, 4.5vw, 60px);
}

.ridge {
    display: block;
    width: 100%;
    height: 100%;
}

/* A scrim, not a wash. Two layers do the work:
   1. a pool of shade anchored bottom left, exactly where the text sits, so the
      white stays readable over the bright hazy glacier;
   2. a gentle overall bottom gradient that ties it into the page.
   The sky and the peak on the right keep their own colour, which is what the
   photo is there for. The many stops approximate an ease-out curve and avoid
   the hard band a plain two stop gradient leaves. */
.site-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(112% 82% at 8% 106%,
            rgba(4, 26, 51, .80) 0%,
            rgba(4, 26, 51, .73) 26%,
            rgba(4, 26, 51, .56) 45%,
            rgba(4, 26, 51, .32) 63%,
            rgba(4, 26, 51, .11) 78%,
            rgba(4, 26, 51, 0) 90%),
        linear-gradient(to bottom,
            rgba(4, 26, 51, 0) 0%,
            rgba(4, 26, 51, .02) 38%,
            rgba(4, 26, 51, .07) 52%,
            rgba(4, 26, 51, .15) 64%,
            rgba(4, 26, 51, .25) 75%,
            rgba(4, 26, 51, .35) 86%,
            rgba(4, 26, 51, .42) 100%);
}

/* The compact hero is only 260px tall and its title sits mid height, so the
   pool has to reach higher and the bottom gradient stays lighter. */
.site-hero--compact .site-hero__overlay {
    background:
        radial-gradient(125% 130% at 6% 105%,
            rgba(4, 26, 51, .74) 0%,
            rgba(4, 26, 51, .64) 30%,
            rgba(4, 26, 51, .44) 52%,
            rgba(4, 26, 51, .22) 70%,
            rgba(4, 26, 51, 0) 88%),
        linear-gradient(to bottom,
            rgba(4, 26, 51, .06) 0%,
            rgba(4, 26, 51, .14) 45%,
            rgba(4, 26, 51, .26) 72%,
            rgba(4, 26, 51, .36) 100%);
}

.site-hero__inner {
    position: relative;
    /* Extra room at the bottom so the text clears the ridgeline. */
    padding-block: 3rem clamp(4.5rem, 9vw, 7.5rem);
}

.site-hero--compact .site-hero__inner {
    padding-block: 2.5rem clamp(3.25rem, 6vw, 4.75rem);
}

.site-hero__eyebrow {
    color: #cde7f8;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin: 0 0 .85rem;
    text-shadow: 0 1px 3px rgba(3, 20, 40, .5);
}

.site-hero__title {
    color: #fff;
    font-family: var(--hvb-display);
    font-size: clamp(2.2rem, 5.2vw, 3.9rem);
    font-weight: 700;
    line-height: 1.08;
    margin: 0;
    /* Two layers: a tight one for crispness against light patches in the
       photo, a wide soft one for overall separation. Doing the work here
       means the scrim underneath can stay much lighter. */
    text-shadow: 0 1px 3px rgba(3, 20, 40, .55), 0 6px 28px rgba(3, 20, 40, .45);
}

.site-hero--compact .site-hero__title {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

.site-hero__subtitle {
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 3px rgba(3, 20, 40, .5);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    max-width: 44ch;
    margin: .75rem 0 0;
}

.site-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb-bar {
    background: var(--hvb-sand);
    border-bottom: 1px solid var(--hvb-line);
    padding: .7rem 0;
    font-size: .875rem;
}

.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
    color: #b6c5d2;
}

.breadcrumb-bar .breadcrumb-item,
.breadcrumb-bar .breadcrumb-item.active {
    color: var(--hvb-muted);
}

.breadcrumb-bar a {
    color: var(--hvb-blue);
    text-decoration: none;
}

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

/* --------------------------------------------------------------------------
   Page content coming out of the WYSIWYG editor
   -------------------------------------------------------------------------- */

.site-main {
    display: block;
}

/* The white ridge at the foot of the hero already gives the page air at the
   top, so the section leans its padding towards the bottom. */
.page-section {
    padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4.5rem);
}

.page-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #34424f;
}

.page-content::after {
    content: '';
    display: table;
    clear: both;
}

.page-content h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.25rem);
    margin-bottom: 1.25rem;
}

.page-content h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    margin-top: 2.5rem;
    margin-bottom: .9rem;
}

.page-content h3 {
    font-size: 1.3rem;
    margin-top: 1.75rem;
    margin-bottom: .75rem;
}

.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child {
    margin-top: 0;
}

.page-content p {
    margin-bottom: 1.15rem;
}

.page-content a {
    color: var(--hvb-blue);
    text-decoration-color: rgba(11, 82, 160, .35);
    text-underline-offset: .18em;
}

.page-content a:hover {
    color: var(--hvb-blue-dark);
    text-decoration-color: currentColor;
}

.page-content strong {
    color: var(--hvb-ink);
}

/* Picking a colour in the editor wraps the text in a <span style="color:...">.
   Bold text inside that span would be dragged back to the ink colour by the
   rule above, because a class selector beats an inherited colour. This lets
   the chosen colour through again. */
.page-content [style*='color'] strong {
    color: inherit;
}

/* Photos get a calm frame instead of a heavy drop shadow; the mountain
   pictures do the work themselves. */
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--hvb-radius);
    box-shadow: 0 8px 22px -16px rgba(5, 41, 79, .4);
    margin: .5rem 0 1.25rem;
}

/* --------------------------------------------------------------------------
   How an image sits in the text. Choose this per image in the editor, under
   "Uitlijning". Without a class the image simply stands on its own line.
   -------------------------------------------------------------------------- */

/* Text runs alongside the image. Never wider than half the column, otherwise
   the text next to it is squeezed into an unreadable strip. */
.page-content img[style*='float:left'],
.page-content img[style*='float: left'],
.page-content img.img-left {
    float: left;
    max-width: 50%;
    margin: .35rem 1.75rem 1.25rem 0;
}

.page-content img[style*='float:right'],
.page-content img[style*='float: right'],
.page-content img.img-right {
    float: right;
    max-width: 50%;
    margin: .35rem 0 1.25rem 1.75rem;
}

/* On its own line, in the middle of the column. */
.page-content img.img-center {
    display: block;
    float: none;
    margin-inline: auto;
}

/* On its own line, edge to edge. */
.page-content img.img-full {
    display: block;
    float: none;
    width: 100%;
    margin-inline: 0;
}

/* A heading never squeezes itself next to a floating image. */
.page-content h2,
.page-content h3,
.page-content h4 {
    clear: both;
}

/* Images that were lifted out of a heading during the import. */
.page-content .content-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1.75rem;
}

.page-content .content-figures img {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 100%;
    object-fit: cover;
    margin: 0;
}

.page-content .content-figures:empty {
    display: none;
}

/* Floats do more harm than good on a phone. */
@media (max-width: 767.98px) {
    .page-content img {
        float: none !important;
        display: block;
        margin-inline: auto !important;
    }
}

.page-content ul,
.page-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.35rem;
}

.page-content li {
    margin-bottom: .4rem;
}

.page-content ul {
    list-style: none;
    padding-left: 0;
}

.page-content ul li {
    position: relative;
    padding-left: 1.6rem;
}

.page-content ul li::before {
    content: '';
    position: absolute;
    left: .25rem;
    top: .72em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--hvb-sky);
}

.page-content ul ul {
    margin-top: .4rem;
}

.page-content blockquote {
    border-left: 4px solid var(--hvb-sky);
    background: var(--hvb-sand);
    border-radius: 0 var(--hvb-radius) var(--hvb-radius) 0;
    padding: 1rem 1.35rem;
    margin: 1.5rem 0;
    font-size: 1.05rem;
}

.page-content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    border: 1px solid var(--hvb-line);
    border-radius: var(--hvb-radius);
    overflow: hidden;
}

.page-content table th,
.page-content table td {
    border: 1px solid var(--hvb-line);
    padding: .65rem .85rem;
    text-align: left;
    vertical-align: top;
}

.page-content table th {
    background: var(--hvb-sand);
    font-weight: 600;
    color: var(--hvb-ink);
}

.page-content table tbody tr:nth-child(even) td {
    background: #fbfcfd;
}

/* Wide tables should scroll instead of breaking the layout. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-content iframe {
    max-width: 100%;
    border: 0;
    border-radius: var(--hvb-radius);
}

.page-content hr {
    margin: 2.25rem 0;
    border-color: var(--hvb-line);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Cards placed in the text with the "Kaart" button in the editor. Their
   colour is not chosen by hand: javascript numbers them top to bottom and
   the odd ones turn ice blue, the even ones deep night blue. Without
   javascript the classes saved by the editor keep the same effect.
   -------------------------------------------------------------------------- */

.page-content .hvb-card {
    clear: both;
    /* flow-root makes the card contain its own floats, so an image that is
       set to "links, tekst ernaast" stays inside instead of poking out of
       the bottom of the card. */
    display: flow-root;
    border-radius: var(--hvb-radius);
    padding: 1.5rem 1.75rem;
    margin: 1.75rem 0;
    background: var(--hvb-sand);
    border: 1px solid var(--hvb-line);
}

.page-content .hvb-card > :first-child {
    margin-top: 0;
}

.page-content .hvb-card > :last-child {
    margin-bottom: 0;
}

.page-content .hvb-card--even {
    background: var(--hvb-blue-deep);
    border-color: var(--hvb-blue-deep);
    color: rgba(255, 255, 255, .88);
}

.page-content .hvb-card--even h2,
.page-content .hvb-card--even h3,
.page-content .hvb-card--even h4,
.page-content .hvb-card--even strong {
    color: #fff;
}

.page-content .hvb-card--even a {
    color: #cde7f8;
    text-decoration-color: rgba(205, 231, 248, .5);
}

.page-content .hvb-card--even a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Cards used on generated pages (e.g. the photo overview)
   -------------------------------------------------------------------------- */

.link-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--hvb-line);
    border-radius: var(--hvb-radius);
    padding: 1.35rem;
    text-decoration: none;
    color: var(--hvb-ink);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(11, 82, 160, .3);
    box-shadow: var(--hvb-shadow);
    color: var(--hvb-blue);
}

.link-card__icon {
    color: var(--hvb-sky);
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

/* --------------------------------------------------------------------------
   Previous / next page within a menu group
   -------------------------------------------------------------------------- */

.page-siblings {
    margin-bottom: .5rem;
}

.page-siblings__inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--hvb-line);
    padding-top: 1.5rem;
}

.page-siblings__link {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-width: 48%;
    padding: .9rem 1.15rem;
    border: 1px solid var(--hvb-line);
    border-radius: var(--hvb-radius);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* margin-left keeps "next" on the right when it is the only link. */
.page-siblings__link--next {
    margin-left: auto;
    text-align: right;
}

.page-siblings__link:hover {
    transform: translateY(-2px);
    border-color: rgba(11, 82, 160, .3);
    box-shadow: var(--hvb-shadow);
}

.page-siblings__label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hvb-muted);
}

.page-siblings__label i {
    color: var(--hvb-sky);
}

.page-siblings__title {
    font-family: var(--hvb-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hvb-ink);
}

.page-siblings__link:hover .page-siblings__title {
    color: var(--hvb-blue);
}

@media (max-width: 575.98px) {
    .page-siblings__inner {
        flex-direction: column;
    }

    .page-siblings__link,
    .page-siblings__link--next {
        max-width: 100%;
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* The same ridgeline leads into the footer, mirrored so the two horizons do
   not repeat each other: dusk-blue peaks rising out of the page. */
.site-footer-ridge {
    height: clamp(34px, 5.5vw, 76px);
    color: var(--hvb-blue-deep);
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.site-footer-ridge .ridge {
    transform: scaleX(-1);
}

.site-footer {
    background: var(--hvb-blue-deep);
    color: rgba(255, 255, 255, .8);
    margin-top: -1px;
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.site-footer__logo {
    background: #fff;
    border-radius: 12px;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

.site-footer__text {
    max-width: 34ch;
    font-size: .95rem;
}

.site-footer__heading {
    color: #fff;
    /* A utility label, not a display heading: the body face does this job. */
    font-family: var(--bs-body-font-family);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.site-footer__sitemap {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1.5rem;
}

.site-footer__sitemap li {
    margin-bottom: .5rem;
    break-inside: avoid;
}

.site-footer a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .95rem;
}

.site-footer__contact li {
    display: flex;
    gap: .6rem;
    margin-bottom: .6rem;
}

.site-footer__contact i,
.site-footer__social i {
    color: var(--hvb-sky);
    margin-top: .2rem;
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
}

.site-footer__signature {
    font-family: var(--hvb-handwriting);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    opacity: .95;
    margin-top: 1.25rem;
    transform: rotate(-1.5deg);
    transform-origin: left center;
}

.site-footer__bar {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 1rem 0;
    font-size: .85rem;
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--hvb-blue);
    color: #fff;
    box-shadow: var(--hvb-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--hvb-blue-dark);
}

/* --------------------------------------------------------------------------
   Lightbox for content images
   -------------------------------------------------------------------------- */

.hvb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 20, 35, .9);
    padding: 2rem;
}

.hvb-lightbox.is-open {
    display: flex;
}

.hvb-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--hvb-radius);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}

.hvb-lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
}

.hvb-lightbox__close:hover {
    background: rgba(255, 255, 255, .3);
}

.page-content img.is-zoomable {
    cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Guestbook
   -------------------------------------------------------------------------- */

.gb-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    counter-reset: none;
}

.gb-entry {
    background: #fff;
    border: 1px solid var(--hvb-line);
    border-radius: var(--hvb-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.gb-entry__head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .85rem;
}

.gb-entry__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hvb-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gb-entry__title {
    font-size: 1.1rem;
    margin: 0 0 .15rem;
}

.gb-entry__meta {
    color: var(--hvb-muted);
    font-size: .875rem;
    margin: 0;
}

.gb-entry__text {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.gb-entry__reply {
    margin-top: 1rem;
    border-left: 3px solid var(--hvb-sky);
    background: var(--hvb-sand);
    border-radius: 0 var(--hvb-radius) var(--hvb-radius) 0;
    padding: .9rem 1.15rem;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.gb-entry__reply-head {
    font-weight: 600;
    color: var(--hvb-blue);
    margin: 0 0 .35rem;
    font-size: .9rem;
}

.gb-entry__reply-head i {
    margin-right: .35rem;
}

.gb-empty {
    text-align: center;
    color: var(--hvb-muted);
    background: var(--hvb-sand);
    border-radius: var(--hvb-radius);
    padding: 2.5rem 1.5rem;
    margin-bottom: 2rem;
}

.gb-empty i {
    font-size: 2rem;
    color: var(--hvb-sky);
    display: block;
    margin-bottom: .75rem;
}

/* --------------------------------------------------------------------------
   Public forms
   -------------------------------------------------------------------------- */

.public-form {
    background: var(--hvb-sand);
    border: 1px solid var(--hvb-line);
    border-radius: var(--hvb-radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    scroll-margin-top: 100px;
}

.public-form__title {
    font-size: 1.35rem;
    margin: 0 0 .5rem;
}

.public-form__intro {
    color: var(--hvb-muted);
    margin-bottom: 1.5rem;
}

.public-form .form-label {
    font-weight: 600;
    font-size: .9rem;
}

.public-form .form-control {
    border-color: #d7dee8;
    border-radius: 10px;
    padding: .6rem .85rem;
}

.public-form .form-control:focus {
    border-color: var(--hvb-blue);
    box-shadow: 0 0 0 .2rem rgba(11, 82, 160, .12);
}

.public-form .req {
    color: #b02a37;
}

/* The honeypot must be invisible to people but reachable for bots. */
.form-trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-card {
    background: var(--hvb-blue-deep);
    color: rgba(255, 255, 255, .85);
    border-radius: var(--hvb-radius);
    padding: 1.75rem;
    position: sticky;
    top: 100px;
}

.contact-card__title {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
}

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

.contact-card__list li {
    display: flex;
    gap: .75rem;
    margin-bottom: .9rem;
    font-size: .95rem;
}

.contact-card__list i {
    color: var(--hvb-sky);
    margin-top: .2rem;
}

.contact-card__list a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.contact-card__list a:hover {
    color: #fff;
    text-decoration: underline;
}

.contact-card__phone-note {
    display: block;
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
    margin-top: .15rem;
}

.contact-card__signature {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-family: var(--hvb-handwriting);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    opacity: .95;
    transform: rotate(-1.5deg);
    transform-origin: left center;
}

.pagination {
    --bs-pagination-color: var(--hvb-blue);
    --bs-pagination-active-bg: var(--hvb-blue);
    --bs-pagination-active-border-color: var(--hvb-blue);
    --bs-pagination-border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Widgets
   -------------------------------------------------------------------------- */

/* A widget is rendered inside .page-content, so the prose list styling from
   above would otherwise put bullet dots in the pagination and in every other
   list a widget uses. Reset it here. */
.page-content .widget ul,
.page-content .widget ol,
.page-content .pagination,
.page-content .modal ul,
.page-content .modal ol {
    list-style: none;
    padding-left: 0;
}

/* Mirror the `ul li` scope of the prose rule exactly. Resetting every `li`
   here would also flatten the padding of cards that happen to be list items,
   such as .gb-entry. */
.page-content .widget ul li,
.page-content .pagination li,
.page-content .modal ul li {
    padding-left: 0;
}

.page-content .widget ul li::before,
.page-content .pagination li::before,
.page-content .modal ul li::before {
    content: none;
    display: none;
}

/* Error lists inside a modal do want their normal bullets back. */
.page-content .modal .alert ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.widget {
    margin: 2rem 0;
    scroll-margin-top: 100px;
}

.widget__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--hvb-line);
}

.widget__count {
    font-weight: 600;
    color: var(--hvb-ink);
}

.widget__year {
    font-size: 1.15rem;
    margin: 1.75rem 0 .75rem;
    color: var(--hvb-blue);
}

.widget__year:first-of-type {
    margin-top: 1rem;
}

.widget__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: .875rem;
    color: var(--hvb-muted);
}

.widget__note {
    font-size: .875rem;
    color: var(--hvb-muted);
    margin-top: 1rem;
}

.widget__empty {
    background: var(--hvb-sand);
    border-radius: var(--hvb-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--hvb-muted);
}

.widget__empty i {
    display: block;
    font-size: 2rem;
    color: var(--hvb-sky);
    margin-bottom: .75rem;
}

.status-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    vertical-align: baseline;
}

.status-dot--free   { background: #2f9e5f; }

/* On a filled blue button the dark green would disappear. */
.btn-primary .status-dot--free { background: #7ee2a8; }
.status-dot--option { background: #d99512; }
.status-dot--booked { background: #c0503f; }

/* --------------------------------------------------------------------------
   Availability table
   -------------------------------------------------------------------------- */

.availability-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .95rem;
}

.availability-table th {
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hvb-muted);
    font-weight: 600;
    padding: .5rem .75rem;
    border-bottom: 2px solid var(--hvb-line);
    white-space: nowrap;
}

.availability-table td {
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--hvb-line);
    vertical-align: middle;
}

.availability-row--2 {
    color: var(--hvb-muted);
}

.availability-row--2 td {
    background: #fbfbfc;
}

.availability-row:hover td {
    background: var(--hvb-sand);
}

.week-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--hvb-sand);
    font-weight: 600;
    font-size: .85rem;
    color: var(--hvb-ink);
}

.week-label {
    display: block;
    font-size: .75rem;
    color: var(--hvb-blue);
    margin-top: .2rem;
}

.availability-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
}

.availability-status--booked {
    color: #c0503f;
}

/* On a phone the table becomes a stack of cards. */
@media (max-width: 767.98px) {
    .availability-table thead {
        display: none;
    }

    .availability-table,
    .availability-table tbody,
    .availability-table tr,
    .availability-table td {
        display: block;
        width: 100%;
    }

    .availability-table tr {
        border: 1px solid var(--hvb-line);
        border-radius: var(--hvb-radius);
        margin-bottom: .85rem;
        padding: .35rem .25rem;
    }

    .availability-table td {
        border: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .4rem .75rem;
    }

    .availability-table td::before {
        content: attr(data-label);
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--hvb-muted);
        font-weight: 600;
    }

    .availability-row:hover td {
        background: transparent;
    }
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--hvb-radius);
}

.modal-header {
    border-bottom: 1px solid var(--hvb-line);
}

.modal-footer {
    border-top: 1px solid var(--hvb-line);
}

.modal .form-label {
    font-weight: 600;
    font-size: .9rem;
}

.modal .form-control {
    border-color: #d7dee8;
    border-radius: 10px;
}

.modal .form-control:focus {
    border-color: var(--hvb-blue);
    box-shadow: 0 0 0 .2rem rgba(11, 82, 160, .12);
}

.modal .req {
    color: #b02a37;
}

.modal-note {
    font-size: .85rem;
    color: var(--hvb-muted);
    margin: 1.25rem 0 0;
}

.reservation-period {
    display: flex;
    gap: .85rem;
    align-items: center;
    background: var(--hvb-sand);
    border-radius: var(--hvb-radius);
    padding: .85rem 1.15rem;
    margin-bottom: 1.5rem;
}

.reservation-period i {
    font-size: 1.4rem;
    color: var(--hvb-blue);
}

.reservation-period__label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hvb-muted);
    font-weight: 600;
}

.reservation-period__price {
    margin-left: .5rem;
    color: var(--hvb-blue);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pager-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

.pager-nav__summary {
    margin: 0;
    font-size: .85rem;
    color: var(--hvb-muted);
}