/* ---------------------------------
   FONT FACE
------------------------------------ */
@font-face {
    font-family: "Fetteunzfranz";
    src: url("../fonts/FetteClassicUNZFraktur.ttf") format("truetype");
}

/* Self-hosted Google Fonts (vendored locally instead of loading from
   fonts.googleapis.com, to avoid a render-blocking third-party request and
   the GDPR/privacy implications of EU visitors' browsers contacting Google
   servers on every page load). Only the latin subset + weights actually
   used in this stylesheet (400/700, no italics) are included. */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/playfair-display-v40-latin-400.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/playfair-display-v40-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-v51-latin-400.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-v51-latin-700.woff2") format("woff2");
}

/* ---------------------------------
   GLOBAL + RESET
------------------------------------ */
* {
    box-sizing: border-box;
}

body {
    font-size: 16px;
    text-align: center;
    margin: 0; /* Ensure no default margin. */
    padding: 0;
}

img {
    width: 100%;
    height: auto;
}

/* ---------------------------------
   WRAPPER
------------------------------------ */
#wrapper {
    /* Use a full view height minus header size.
       If the header height is truly 65.7px, keep as is;
       otherwise make it something more typical, like 60px or 70px. */
    min-height:calc(100vh - 85.7px);
    overflow: auto;
    position: relative;
}

/* ---------------------------------
   BANNER
------------------------------------ */
.banner {
    /* Removed invalid max-height: auto property */
    opacity: 0.23;
    width: 100%;
}

/* ---------------------------------
   HEADINGS & TEXT
------------------------------------ */
h1, h2 {
    font-family: 'Playfair Display';
    font-weight: bold;
}

p {
    font-family: 'Roboto';
    margin: 0; /* Reset paragraph margin. */
}

#udlejning-heading {
    font-size: 22px;
}

#ui {
    /* Consider a more flexible approach, but if you need a 2x2 grid at larger sizes: */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    font-size: calc(1em / 1.3);
}

/* ---------------------------------
   HEADER
------------------------------------ */
header {
    width: 100%;
    background-color: white;
    margin-bottom: 0;
    padding-bottom: calc(26px / 2);
    /* NOTE: There's no color specified in border-bottom.
       Add a color of your choice here: */
    border-bottom: 5px solid black; /* Example color, tweak as needed */
}

header h1 {
    font-family: 'Playfair Display';
}

header h1 a {
    color: black;
    text-decoration: none;
}

/* ---------------------------------
   NAV
------------------------------------ */
nav {
    font-family: 'Playfair Display';
    font-weight: bold;
    font-size: 25px;
    display: grid;
    justify-content: center;
}

nav a {
    color: black;
    text-decoration: none;
}

/* Larger screens (min-width:700px) */
@media (min-width:700px) {
    nav {
        width: 95%;
        margin: 0 auto;
        grid-template-columns: repeat(8, 1fr);
    }
}

/* Smaller screens (max-width:700px) */
@media (max-width:700px) {
    nav {
        grid-template-columns: repeat(2, 1fr);
    }
    nav a {
        padding: 1em 0;
    }
}

/* ---------------------------------
   MODAL
------------------------------------ */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
}

.close {
    color: #aaa;
    text-align: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* ---------------------------------
   MAIN
------------------------------------ */

/* #twoColumn and #gallery-selection:
   Using repeat(auto-fill, minmax(200px, 1fr)) is already responsive. 
   Below you’ll see additional media queries to adjust columns, etc. */

#twoColumn,
#gallery-selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    width: 90%;
    margin: 0 auto;
}

#gallery-selection > div {
    width: 100%;
    /* NOTE: Fixed height can break responsiveness.
       Remove or change to min-height if you must keep a dimension.
       For fully fluid, remove height altogether. */
    height: auto;
    border: 1em solid;
    border-style: none ridge ridge;
    margin: 0 auto;
}

/* If you actually want images to fill a ratio, use object-fit in the <img> or background-size in CSS. */
#gallery-selection > .img {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto 3 / 2;
    overflow: hidden;
}

/* The image with class .img-front */
.img-front {
    width: auto;
    height: 400px; /* Another fixed height. Consider removing for responsiveness. */
    border: 1em black;
    border-style: none double dashed;
}

/* Arrow: points down by default (mobile/tablet, stacked columns);
   overridden to point left on desktop, see min-width:720px rule below */
.arrow-up {
    width: 0;
    height: 0;
    margin: 10px auto;
    border-top: 25px solid blue;
    border-bottom: none;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

/* Stack columns vertically on mobile */
@media (max-width: 720px) {
    #twoColumn {
        grid-template-columns: 1fr;
    }
}

/* Side-by-side on larger screens */
@media (min-width: 720px) {
    #twoColumn {
        grid-template-columns: 1fr 1fr;
    }

    /* Point the arrow right (toward the image) once the columns sit
       side-by-side instead of stacking vertically, with some
       breathing room on either side */
    .arrow-up {
        margin: auto 12px;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: none;
        border-right: 25px solid blue;
    }
}

/* form */
#form1 {
    display: grid;
    width: 100%;
    grid-gap: 2.5px;
    margin: 0 auto;
}

#form1 input {
    margin-bottom: 5px;
}

.arrangement {
    margin: 0 auto 40px;
    padding: 16px;
    max-width: 840px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    background-color: rgba(255,255,255,0.95);
    border: 1px solid #ddd;
    border-radius: 18px;
}

.arrangement-image {
    width: 100%;
}

.arrangement-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.arrangement-image img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    border: 2px solid #111111;
}

.arrangement h2 {
    margin-top: 0;
}

@media (min-width: 900px) {
    .arrangement {
        grid-template-columns: 200px minmax(0, 1fr);
        align-items: center;
    }

    .arrangement-image {
        margin-bottom: 0;
    }

    /* No image tag in the XML: let the body span the full grid width */
    .arrangement-body:only-child {
        grid-column: 1 / -1;
    }
}

.arrangement h3 {
    margin: 0.4rem 0;
    color: #111111;
}

.arrangement hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 30px 0;
}

/* Improved Booking Form Styles */
.booking-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 22px;
    background-color: #ffffff;
    border: 1px solid #111111;
    border-radius: 16px;
    box-shadow: none;
}

.form-title {
    text-align: center;
    margin-bottom: 24px;
    color: #111111;
    font-family: 'Playfair Display', serif;
}

.form-group {
    margin-bottom: 18px;
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #111111;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #111111;
    border-radius: 12px;
    font-size: 16px;
    color: #111111;
    background-color: #ffffff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus {
    border-color: #000000;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.form-row .form-group {
    padding: 0 10px;
    box-sizing: border-box;
}

.form-group.half {
    width: 50%;
}

.label-header {
    font-weight: bold;
    margin-bottom: 10px;
    color: #111111;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 5px;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.radio-option input[type="radio"] {
    margin-right: 5px;
}

.radio-option label {
    margin-bottom: 0;
    font-weight: normal;
}

.date-label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #111111;
    text-align: center;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
}

.submit {
    width: 100%;
    padding: 14px;
    background-color: #111111;
    color: #ffffff;
    border: 1px solid #111111;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
    margin-top: 10px;
}

.submit:hover {
    background-color: #ffffff;
    color: #111111;
}

/* Modal content improvements */
.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 18px;
    border: 2px solid #111111;
    border-radius: 18px;
    width: 90%;
    max-width: 600px;
    box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }

    .form-group.half {
        width: 100%;
    }

    .modal-content {
        width: 95%;
        padding: 20px;
        margin: 10% auto;
    }
}

/* Additional layout for screens >= 720px */
@media (min-width: 720px) {
    main {
        /* If you have a grid layout for main, ensure it’s defined in HTML or here. */
    }
    #centerColumn {
        width: 100%;
        margin: auto;
        grid-column: 2 / 17;
    }

    /* Vertical centering for front page centerColumn */
    body:not(.secondary-page) main {
        display: flex;
        min-height:80vh; /* Adjust for header and footer */
    }

    body:not(.secondary-page) #centerColumn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin: auto 0;
    }
    #twoColumn {
        width: 95%;
        margin: 0;
        grid-column: 2 / 17;
        /* If you truly want 4 columns, do something like: */
        grid-template-columns: 49% 1% 29% 20%;
        /* But be aware this is very specific and can appear odd.
           Possibly you meant: grid-template-columns: 1fr 1fr? */
    }
    #gallery-selection {
        text-align: center;
        grid-column: 2 / 17;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1064px) {
    #twoColumn {
        grid-column: 1 / 17;
    }
}

/* ---------------------------------
   FOOTER
------------------------------------ */
footer {

    clear: both;
    background-color: #4a484885;
    color: #333333;
    padding: 15px 0;
}

.footer-link {
    color: inherit;
    text-decoration: none;
     font-weight: 700;
}

.footer-link:hover,
.footer-link:focus {
    text-decoration: underline;
    font-weight: 500;
}

.subtle-link {
    color: inherit;
    text-decoration: none;
}

.subtle-link:hover,
.subtle-link:focus {
    text-decoration: underline;
}

/* ---------------------------------
   COMMUNITY-FIRST PUBLIC SHELL
------------------------------------ */
:root {
    --ink: #17352e;
    --ink-muted: #52645e;
    --paper: #f7f4ed;
    --paper-deep: #eae4d8;
    --pine: #1d5145;
    --clay: #b95e42;
    --sun: #e5b14e;
}

body {
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    font-family: 'Roboto', sans-serif;
}

.site-header {
    border-bottom: 1px solid rgba(23, 53, 46, 0.16);
    padding: 0;
    background: var(--paper);
}

.site-header__inner {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 20px 0;
}

.site-brand {
    color: var(--ink);
    text-decoration: none;
    display: grid;
    line-height: 1;
}

.site-brand__place,
.eyebrow {
    color: var(--clay);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.site-brand__name {
    margin-top: 5px;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
}

.site-navigation {
    width: auto;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.site-navigation a {
    color: var(--ink);
    padding: 6px 0;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
    color: var(--clay);
    outline: none;
}

.home-page {
    display: block !important;
    min-height: auto !important;
}

.home-hero {
    isolation: isolate;
    min-height: min(670px, calc(100vh - 122px));
    position: relative;
    display: grid;
    place-items: end start;
    overflow: hidden;
    background: var(--ink);
}

.home-hero__image,
.home-hero__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero__image {
    object-fit: cover;
    object-position: center 68%;
    z-index: -2;
}

.home-hero__overlay {
    background: linear-gradient(90deg, rgba(12, 36, 30, 0.9), rgba(12, 36, 30, 0.58) 48%, rgba(12, 36, 30, 0.12));
    z-index: -1;
}

.home-hero__content,
.home-section {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.home-hero__content {
    color: #fff;
    padding: 110px 0 84px;
}

.home-hero .eyebrow { color: #f5cf80; }

.home-hero h1,
.home-section h2,
.home-section h3 {
    font-family: 'Playfair Display', serif;
}

.home-hero h1 {
    max-width: 720px;
    margin: 12px 0 20px;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.03;
}

.home-hero__lead {
    max-width: 610px;
    color: #f4f1e9;
    font-size: 19px;
    line-height: 1.6;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.button--primary { background: var(--sun); color: #202b28; }
.button--light { background: #fff; color: var(--ink); }
.button--dark { background: var(--ink); color: #fff; }
.button--outline { border-color: var(--ink); color: var(--ink); }
.button:hover, .button:focus-visible { filter: brightness(0.93); outline: 3px solid rgba(229, 177, 78, 0.62); outline-offset: 3px; }

.home-section { padding: 96px 0; }

.home-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
}

.home-section h2 { margin: 8px 0 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; }
.home-section h3 { margin: 0 0 8px; font-size: 24px; }
.text-link { color: var(--pine); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.event-list { border-top: 1px solid rgba(23, 53, 46, 0.25); }
.event-item { display: grid; grid-template-columns: minmax(120px, 0.35fr) 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid rgba(23, 53, 46, 0.25); }
.event-item p { color: var(--ink-muted); line-height: 1.55; }
.event-item__date { color: var(--clay) !important; font-weight: 700; }

.event-empty { max-width: 700px; padding: 30px; border-left: 5px solid var(--sun); background: #fffdf8; }
.event-empty p { color: var(--ink-muted); line-height: 1.6; }
.event-empty__label { color: var(--ink) !important; font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; }
.event-empty .button { margin-top: 22px; }

.home-community { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: clamp(38px, 8vw, 112px); align-items: center; padding-top: 0; }
.home-community__image-wrap { aspect-ratio: 4 / 3; overflow: hidden; }
.home-community__image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.home-community__content p:not(.eyebrow), .home-rental p:not(.eyebrow) { color: var(--ink-muted); line-height: 1.7; font-size: 17px; }

.home-rental { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-bottom: 96px; padding: 50px; background: var(--paper-deep); }
.home-rental h2 { max-width: 640px; }

@media (max-width: 860px) {
    .site-header__inner { align-items: flex-start; flex-direction: column; gap: 16px; }
    .site-navigation { justify-content: flex-start; }
    .home-community { grid-template-columns: 1fr; }
    .home-community__image-wrap { max-height: 420px; }
}

@media (max-width: 600px) {
    .site-header__inner, .home-hero__content, .home-section { width: min(100% - 28px, 1160px); }
    .site-brand__name { font-size: 21px; }
    .site-navigation { gap: 8px 15px; font-size: 14px; }
    .home-hero { min-height: 600px; }
    .home-hero__content { padding: 80px 0 54px; }
    .home-hero__lead { font-size: 17px; }
    .home-section { padding: 66px 0; }
    .home-section__heading, .home-rental { align-items: flex-start; flex-direction: column; }
    .event-item { grid-template-columns: 1fr; gap: 8px; }
    .home-rental { margin-bottom: 50px; padding: 32px 24px; }
    .button { width: 100%; }
}

/* ---------------------------------
   SITE FOOTER
------------------------------------ */
.site-footer {
    clear: both;
    padding: 0;
    background: var(--ink);
    color: #e9eee9;
}

.site-footer__inner,
.site-footer__legal {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 36px;
    padding: 64px 0 48px;
}

.site-footer p { margin: 0; }
.site-footer__eyebrow, .site-footer__heading { font-weight: 700; }
.site-footer__eyebrow { color: #f5cf80; letter-spacing: 1.1px; text-transform: uppercase; font-size: 12px; }
.site-footer__statement { max-width: 310px; margin-top: 14px !important; color: #d6e0da; line-height: 1.55; }
.site-footer__heading { color: #fff; margin-bottom: 12px !important; font-family: 'Playfair Display', serif; font-size: 19px; }
.site-footer address { margin-bottom: 10px; color: #d6e0da; font-style: normal; line-height: 1.55; }
.site-footer a { color: #fff; line-height: 1.8; text-underline-offset: 4px; }
.site-footer a:hover, .site-footer a:focus-visible { color: #f5cf80; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(233, 238, 233, 0.2); color: #b7c7be; font-size: 13px; }

@media (max-width: 860px) {
    .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .site-footer__inner, .site-footer__legal { width: min(100% - 28px, 1160px); }
    .site-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 38px; }
    .site-footer__legal { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* ---------------------------------
   EVENTS
------------------------------------ */
.events-page {
    display: block !important;
    min-height: auto !important;
}

.events-intro {
    padding: 100px 0 86px;
    background: var(--paper-deep);
}

.events-intro__content,
.events-content {
    width: min(960px, calc(100% - 40px));
    margin: 0 auto;
}

.events-intro h1 {
    max-width: 740px;
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.08;
}

.events-intro p:not(.eyebrow) {
    max-width: 630px;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.65;
}

.events-content { padding: 72px 0 96px; }

.events-empty-state {
    max-width: 700px;
    padding: 34px;
    border-left: 5px solid var(--sun);
    background: #fffdf8;
}

.events-empty-state p { color: var(--ink-muted); line-height: 1.6; }
.events-empty-state__label { color: var(--ink) !important; margin-bottom: 10px !important; font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; }
.events-empty-state .button { margin-top: 20px; }

.events-content .arrangement {
    max-width: none;
    margin: 0;
    padding: 32px 0;
    border: 0;
    border-bottom: 1px solid rgba(23, 53, 46, 0.2);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.events-content .arrangement:first-of-type { border-top: 1px solid rgba(23, 53, 46, 0.2); }
.events-content .arrangement-image img { border: 0; border-radius: 0; }
.events-content .arrangement h2 { color: var(--ink); font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 40px); max-width: 740px; overflow-wrap: break-word; }
.events-content .arrangement h3 { color: var(--ink-muted); font-family: 'Roboto', sans-serif; font-size: 15px; }
.events-content .arrangement .beskrivelse { color: var(--ink); font-weight: 400 !important; line-height: 1.65; }
.events-content .arrangement hr { display: none; }

@media (max-width: 600px) {
    .events-intro { padding: 68px 0 58px; }
    .events-intro__content, .events-content { width: min(100% - 28px, 960px); }
    .events-content { padding: 54px 0 64px; }
    .events-empty-state { padding: 28px 22px; }
}

/* ---------------------------------
   MEMBERSHIP
------------------------------------ */
.membership-page {
    display: block !important;
    min-height: auto !important;
}

.membership-intro {
    padding: 96px 0 84px;
    background: var(--paper-deep);
}

.membership-intro__content,
.membership-content {
    width: min(1040px, calc(100% - 40px));
    margin: 0 auto;
}

.membership-intro h1 {
    max-width: 650px;
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
}

.membership-intro p:not(.eyebrow) {
    max-width: 650px;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.65;
}

.membership-content {
    display: grid;
    grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(42px, 8vw, 96px);
    align-items: start;
    padding: 78px 0 96px;
}

.membership-benefits h2,
.membership-form-panel h2 {
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    line-height: 1.18;
}

.membership-benefits ul {
    margin: 24px 0 34px;
    padding: 0;
    list-style: none;
}

.membership-benefits li {
    position: relative;
    margin: 0 0 15px;
    padding-left: 26px;
    color: var(--ink-muted);
    line-height: 1.55;
}

.membership-benefits li::before {
    position: absolute;
    left: 0;
    color: var(--clay);
    content: "•";
    font-size: 25px;
    line-height: 0.8;
}

.membership-price {
    display: flex;
    flex-direction: column;
    color: var(--ink-muted);
    font-weight: 700;
}

.membership-price span {
    color: var(--clay);
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    line-height: 1;
}

.membership-form-panel {
    padding: 38px;
    background: #fffdf8;
    border-top: 5px solid var(--sun);
}

.membership-form-panel__heading p,
.membership-confirmation > p:not(.eyebrow) {
    color: var(--ink-muted);
    line-height: 1.6;
}

.membership-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.membership-form .large-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.membership-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-weight: 700;
}

.membership-form input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(23, 53, 46, 0.42);
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.membership-form input:focus {
    border-color: var(--pine);
    outline: 3px solid rgba(229, 177, 78, 0.52);
    outline-offset: 2px;
}

.membership-form .button { width: 100%; cursor: pointer; }
.membership-confirmation { text-align: left; }
.membership-payment-details { margin: 24px 0; padding: 18px; background: var(--paper-deep); }
.membership-payment-details p + p { margin-top: 8px; }

@media (max-width: 720px) {
    .membership-content { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 600px) {
    .membership-intro { padding: 68px 0 58px; }
    .membership-intro__content, .membership-content { width: min(100% - 28px, 1040px); }
    .membership-content { padding: 54px 0 64px; }
    .membership-form-panel { padding: 28px 20px; }
    .membership-form .large-group { grid-template-columns: 1fr; }
}

/* ---------------------------------
   RENTAL
------------------------------------ */
.rental-page {
    display: block !important;
    min-height: auto !important;
}

.rental-intro {
    padding: 96px 0 84px;
    background: var(--paper-deep);
}

.rental-intro__content,
.rental-details__content,
.rental-prices,
.rental-availability {
    width: min(1040px, calc(100% - 40px));
    margin: 0 auto;
}

.rental-intro h1 {
    max-width: 680px;
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
}

.rental-intro p:not(.eyebrow),
.rental-details__copy > p:not(.eyebrow),
.rental-availability__heading p:not(.eyebrow) {
    max-width: 650px;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.65;
}

.rental-details { padding: 82px 0; }
.rental-details__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: clamp(42px, 8vw, 100px); align-items: center; }
.rental-details h2, .rental-prices h2, .rental-availability h2 { margin: 10px 0 18px; font-family: 'Playfair Display', serif; font-size: clamp(31px, 4vw, 46px); line-height: 1.15; }
.rental-details__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rental-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0 0; }
.rental-facts div { border-top: 2px solid var(--sun); padding-top: 10px; }
.rental-facts dt { color: var(--ink); font-weight: 700; }
.rental-facts dd { margin: 5px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 1.4; }

.rental-prices { padding: 62px 0; border-top: 1px solid rgba(23, 53, 46, 0.2); }
.rental-prices__heading { margin-bottom: 30px; }
.rental-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rental-price-card { min-height: 150px; padding: 24px; background: #fffdf8; border-top: 4px solid var(--clay); }
.rental-price-card p { color: var(--ink-muted); font-weight: 700; }
.rental-price-card strong { display: block; margin: 18px 0 7px; color: var(--ink); font-family: 'Playfair Display', serif; font-size: 31px; }
.rental-price-card span, .rental-price-notes { color: var(--ink-muted); font-size: 14px; }
.rental-price-notes { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; line-height: 1.5; }

.rental-availability { padding: 64px 0 96px; }
.rental-availability__heading { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 34px; }
.availability-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 14px; }
.availability-legend li { display: flex; align-items: center; gap: 7px; }
.availability-legend span { width: 14px; height: 14px; border-radius: 50%; }
.availability-legend__available { background: rgba(50, 190, 115, 0.8); }
.availability-legend__pending { background: rgb(220, 224, 11); }
.availability-legend__booked { background: #d36135; }
.rental-calendar { padding: 28px; background: #fffdf8; }
.rental-calendar div#calendar { width: min(602px, 100%); }
.rental-calendar div#calendar div.box { background: var(--ink); border-radius: 0; }
.rental-calendar div#calendar ul.label { border-bottom-color: var(--ink); }

@media (max-width: 720px) {
    .rental-details__content { grid-template-columns: 1fr; }
    .rental-details__image { max-height: 420px; }
    .rental-price-grid { grid-template-columns: 1fr; }
    .rental-availability__heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
    .rental-intro { padding: 68px 0 58px; }
    .rental-intro__content, .rental-details__content, .rental-prices, .rental-availability { width: min(100% - 28px, 1040px); }
    .rental-details, .rental-availability { padding: 54px 0 64px; }
    .rental-details { padding-bottom: 38px; }
    .rental-facts { grid-template-columns: 1fr; gap: 13px; }
    .rental-prices { padding: 48px 0; }
    .rental-calendar { padding: 14px 8px; }
}

/* ---------------------------------
   GALLERY
------------------------------------ */
.gallery-page {
    display: block !important;
    min-height: auto !important;
}

.gallery-intro {
    padding: 96px 0 84px;
    background: var(--paper-deep);
}

.gallery-intro__content,
.gallery-groups,
.gallery-images,
.gallery-empty {
    width: min(1040px, calc(100% - 40px));
    margin: 0 auto;
}

.gallery-intro h1,
.gallery-empty h1,
.gallery-empty h2 {
    max-width: 720px;
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
}

.gallery-intro p:not(.eyebrow) {
    max-width: 670px;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.65;
}

.gallery-intro--compact { padding: 64px 0 58px; }
.gallery-intro--compact h1 { font-size: clamp(38px, 4vw, 56px); }
.gallery-back-link { display: inline-block; margin-bottom: 28px; color: var(--pine); font-weight: 700; text-underline-offset: 4px; }

.gallery-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 72px 0 96px;
}

.gallery-group-card {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
}

.gallery-group-card img,
.gallery-group-card__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gallery-group-card img { object-fit: cover; transition: transform 350ms ease; }
.gallery-group-card__overlay { background: linear-gradient(0deg, rgba(10, 30, 25, 0.88), rgba(10, 30, 25, 0.04) 70%); }
.gallery-group-card__content { position: absolute; right: 30px; bottom: 30px; left: 30px; display: grid; gap: 10px; }
.gallery-group-card .eyebrow { color: #f5cf80; }
.gallery-group-card__title { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 700; line-height: 1.1; }
.gallery-group-card__description { color: #edf3ee; line-height: 1.55; }
.gallery-group-card:hover img, .gallery-group-card:focus-visible img { transform: scale(1.04); }
.gallery-group-card:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }

.gallery-images { padding: 66px 0 96px; }
.gallery-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-image-link { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.gallery-image-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.gallery-image-link:hover img, .gallery-image-link:focus-visible img { transform: scale(1.04); }
.gallery-image-link:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }

.gallery-empty { padding: 80px 0; }
.gallery-empty .button { margin-top: 10px; }

.gallery-lightbox {
    width: min(1120px, calc(100% - 32px));
    max-width: none;
    max-height: min(90vh, 900px);
    padding: 0;
    border: 0;
    background: #101b18;
}

.gallery-lightbox::backdrop { background: rgba(9, 22, 18, 0.86); }
.gallery-lightbox__image { display: block; max-width: 100%; max-height: min(90vh, 900px); margin: 0 auto; object-fit: contain; }
.gallery-lightbox__close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.gallery-lightbox__close:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

@media (max-width: 720px) {
    .gallery-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .gallery-intro { padding: 68px 0 58px; }
    .gallery-intro--compact { padding: 48px 0 44px; }
    .gallery-intro__content, .gallery-groups, .gallery-images, .gallery-empty { width: min(100% - 28px, 1040px); }
    .gallery-groups { grid-template-columns: 1fr; padding: 52px 0 64px; }
    .gallery-group-card { min-height: 390px; }
    .gallery-group-card__content { right: 22px; bottom: 22px; left: 22px; }
    .gallery-group-card__title { font-size: 32px; }
    .gallery-images { padding: 44px 0 64px; }
    .gallery-image-grid { gap: 8px; }
}

/* ---------------------------------
   STATUTES
------------------------------------ */
.statutes-page {
    display: block !important;
    min-height: auto !important;
}

.statutes-intro {
    padding: 96px 0 84px;
    background: var(--paper-deep);
}

.statutes-intro__content,
.statutes-document {
    width: min(860px, calc(100% - 40px));
    margin: 0 auto;
}

.statutes-intro h1 {
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
}

.statutes-intro p:not(.eyebrow) {
    max-width: 600px;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.65;
}

.statutes-document {
    padding: 72px 0 96px;
}

.statutes-document__header,
.statutes-document__footer {
    padding: 28px 30px;
    background: #fffdf8;
    border-left: 5px solid var(--sun);
}

.statutes-document__header p:not(.eyebrow),
.statutes-document__footer p {
    color: var(--ink-muted);
    line-height: 1.6;
}

.statute-section {
    padding: 36px 0;
    border-bottom: 1px solid rgba(23, 53, 46, 0.2);
}

.statute-section h2 {
    margin: 0 0 18px;
    color: var(--ink);
    font-family: 'Playfair Display', serif;
    font-size: clamp(25px, 3vw, 32px);
    line-height: 1.2;
}

.statute-section p,
.statute-section li {
    color: var(--ink-muted);
    line-height: 1.7;
}

.statute-section p + p { margin-top: 14px; }
.statute-section ol { margin: 18px 0 0; padding-left: 26px; }
.statute-section li + li { margin-top: 8px; }
.statutes-document__footer { margin-top: 36px; }

@media (max-width: 600px) {
    .statutes-intro { padding: 68px 0 58px; }
    .statutes-intro__content, .statutes-document { width: min(100% - 28px, 860px); }
    .statutes-document { padding: 54px 0 64px; }
    .statutes-document__header, .statutes-document__footer { padding: 24px 20px; }
    .statute-section { padding: 28px 0; }
}

/* ---------------------------------
   BOARD AND CONTACT
------------------------------------ */
.board-page,
.contact-page {
    display: block !important;
    min-height: auto !important;
}

.board-intro,
.contact-intro {
    padding: 96px 0 84px;
    background: var(--paper-deep);
}

.board-intro__content,
.board-members-section,
.contact-intro__content,
.contact-details {
    width: min(1040px, calc(100% - 40px));
    margin: 0 auto;
}

.board-intro h1,
.contact-intro h1 {
    max-width: 690px;
    margin: 10px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
}

.board-intro p:not(.eyebrow),
.contact-intro p:not(.eyebrow) {
    max-width: 680px;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.65;
}

.board-members-section { padding: 74px 0 96px; }
.board-members-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.board-members-section h2, .contact-route h2, .contact-location h2 { margin: 10px 0 0; font-family: 'Playfair Display', serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.16; }
.board-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.board-member { min-height: 165px; padding: 22px; background: #fffdf8; border-top: 4px solid var(--sun); box-shadow: none; text-align: left; }
.board-member:hover { transform: none; }
.board-member__role { margin: 0 0 18px; color: var(--clay); font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.board-member h3 { margin: 0; color: var(--ink); font-family: 'Playfair Display', serif; font-size: 23px; line-height: 1.18; }
.board-member a { display: inline-block; margin-top: 15px; color: var(--pine); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 4px; }

.contact-details { padding: 74px 0 96px; }
.contact-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-route { padding: 32px; background: #fffdf8; border-top: 5px solid var(--sun); }
.contact-route h2 { font-size: 30px; }
.contact-route__phone { display: inline-block; margin-top: 34px; color: var(--pine); font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 38px); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.contact-location { display: grid; grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr); gap: 36px; align-items: stretch; margin-top: 54px; padding-top: 54px; border-top: 1px solid rgba(23, 53, 46, 0.2); }
.contact-location__copy { padding: 18px 0; }
.contact-location__copy address { margin: 26px 0; color: var(--ink-muted); font-size: 18px; font-style: normal; line-height: 1.65; }
.contact-location__map { width: 100%; min-height: 350px; border: 0; }
.contact-location__map--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #f2efe6; text-align: center; padding: 24px; }

@media (max-width: 900px) {
    .board-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .contact-location { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .board-intro, .contact-intro { padding: 68px 0 58px; }
    .board-intro__content, .board-members-section, .contact-intro__content, .contact-details { width: min(100% - 28px, 1040px); }
    .board-members-section, .contact-details { padding: 54px 0 64px; }
    .board-members-section__heading { align-items: flex-start; flex-direction: column; }
    .board-members, .contact-route-grid { grid-template-columns: 1fr; }
    .board-member, .contact-route { padding: 24px 20px; }
    .contact-location { gap: 20px; margin-top: 40px; padding-top: 40px; }
    .contact-location__map { min-height: 280px; }
}

/* ---------------------------------
   BOARD MEMBERS
------------------------------------ */
.board-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto 30px;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-title {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-size: 28px;
}

.board-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.board-member {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.board-member:hover {
    transform: translateY(-5px);
}

.board-member h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 20px;
}

.board-member p {
    color: #555;
    font-size: 16px;
}

.board-member-name {
    font-size: 17px;
    font-weight: 510;
    color: #333;
}

.board-member p a {
    color: inherit;
    text-decoration: none;
}

.board-member p a:hover,
.board-member p a:focus {
    text-decoration: underline;
}

/* ---------------------------------
   CONTACT INFO
------------------------------------ */
.contact-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto 30px;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.contact-section {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-section h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 20px;
}

.contact-section p {
    color: #555;
    font-size: 16px;
}

.contact-section p a {
    color: inherit;
    text-decoration: none;
}

.contact-section p a:hover,
.contact-section p a:focus {
    text-decoration: underline;
}

.address-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.address-text {
    flex: 1 1 200px;
}

.address-section h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 20px;
}

.address-section p {
    color: #555;
    font-size: 16px;
    line-height: 1.5;
}

.address-map {
    flex: 1 1 350px;
    max-width: 450px;
    width: 100%;
    min-height: 100px;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .board-container,
    .contact-container {
        padding: 15px;
        margin: 15px auto 20px;
    }

    .page-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .board-members,
    .contact-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .address-section {
        flex-direction: column;
    }

    .address-map {
        max-width: 100%;
    }

    .board-member h3,
    .contact-section h3,
    .address-section h3 {
        font-size: 18px;
    }

    .board-member p,
    .contact-section p,
    .address-section p {
        font-size: 14px;
    }
}

/* ---------------------------------
   PRICING INFO
------------------------------------ */
.pricing-info {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    margin:0px auto 30px;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.pricing-info h3 {
    text-align: center;
    color: #333;
    margin-bottom: 15px;
    font-size: 24px;
}

.account-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.account-details p {
    margin: 0;
    font-size: 16px;
}

.pricing-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.pricing-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}

.pricing-list li:last-child {
    border-bottom: none;
}

@media screen and (max-width: 600px) {
    .pricing-info {
        padding: 15px;
        margin: 15px auto 20px;
    }

    .pricing-info h3 {
        font-size: 20px;
    }

    .account-details {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .pricing-list li {
        font-size: 14px;
        padding: 6px 0;
    }
}

/* ---------------------------------
   CALENDAR
------------------------------------ */
div#calendar {
    margin: 0px auto;
    padding: 0px;
    width: 602px;
}

div#calendar div.box {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
}

div#calendar div.header {
    line-height: 40px;
    vertical-align: middle;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 40px;
    text-align: center;
}

div#calendar div.header a.prev,
div#calendar div.header a.next {
    position: absolute;
    top: 0px;
    height: 17px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    padding: 0 15px;
}

div#calendar div.header span.title {
    color: #FFF;
    font-size: 18px;
}

div#calendar div.header a.prev {
    left: 0px;
}

div#calendar div.header a.next {
    right: 0px;
}

div#calendar ul.label {
    display: flex;
    justify-content: space-around;
    margin: 0px;
    padding: 0px;
    margin-top: 5px;
    margin-left: 5px;
    border-bottom: 2.2px solid black;
}

div#calendar ul.label li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    height: 5vh;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    color: #000;
    font-size: 15px;
    background-color: transparent;
}

div#calendar ul.dates {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
}

div#calendar ul.dates li {
    margin: 0px;
    padding: 0px;
    margin-right: 5px;
    margin-top: 5px;
    line-height: 80px;
    vertical-align: middle;
    list-style-type: none;
    width: calc(100% / 7 - 5px);
    height: 6vh; /* Another place that can hamper responsive design if not needed. */
    font-size: 25px;
    color: #000;
    text-align: center;
    position: relative;
}

/* Smaller screens adjustments */
@media screen and (max-width: 600px) {
    div#calendar {
        width: 100%;
    }
    div#calendar ul.dates li {
        width: calc(100% / 7 - 2px);
        font-size: 15px;
        height: 60px;
    }
}
@media screen and (max-width: 600px) {
    div#calendar ul.dates li {
        margin-right: 3px;
        margin-top: 3px;
        width: calc(100% / 7 - 3px);
    }
}

/* ---------------------------------
   MISC & UTILITY
------------------------------------ */
:focus {
    outline: none;
}
div.clear {
    clear: both;
}
li div {
    display: flex;
    border-radius: 10px;
}
li div form {
    display: inline;
    align-self: center;
    margin: 0;
    position: absolute;
    bottom: 2px;
}

/* Booking statuses */
div.open {
    background: rgba(50, 190, 115, 0.7);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
div.pending {
    background: rgb(220, 224, 11);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    line-height: inherit;
}
div.booked {
    background: #D36135;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    line-height: inherit;
}

/* Buttons */
.submit {
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-size: 19px;
    font-weight: bold;
    padding: 3px 12px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}
.submit:hover {
    background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color: #f6f6f6;
}
.submit:active {
    position: relative;
    top: 1px;
}

/* Image container */
.img-container {
    width: 90%;
    margin: 0 auto;
}
.img-container img {
    aspect-ratio: 4 / 3; /* This helps maintain ratio. */
}

/* Example usage of .img classes */
.img {
    border: 1px solid #ddd;
    padding: 1px;
    float: left;
    display: none;
}

.one {
    display: block;
    width: 66.69%;
    height: 350px; /* Fixed height for consistent appearance */
    object-fit: cover; /* Maintain aspect ratio while filling the container */
}
.two,
.three {
    display: block;
    width: 33.31%;
    height: 350px; /* Same height as .one for consistency */
    object-fit: cover; /* Maintain aspect ratio while filling the container */
}

/* Form horizontal layout */
#form_horizontal {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
#postnr,
#by {
    width: 49%;
}
#storesal {
    margin-right: 50px; /* Possibly remove or adjust for smaller screens. */
}

/* Column container sample */
#column2 {
    width: 100%;
    margin: 0 auto;
}

/************************************
Spinner and success message
************************************/
#spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#spinner-container {
    text-align: center;
    color: white;
}

#spinner-container img {
    width: 100px;
}

#success-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

#message-box {
    text-align: center;
}

#message-box button {
    margin-top: 10px;
    padding: 5px 10px;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#message-box button:hover {
    background-color: #218838;
}

.beskrivelse-dagsorden{
  width:30%;
  padding:0px;
  margin:0 auto;
  font-weight: bold;
}
.beskrivelse{
  font-weight:bold;
}