/* ==========================================================================
   VORES FARVER OG GLOBALE DESIGN
   Her styrer vi den orange farve, der går igen på hele siden.
   ========================================================================== */

:root {
    /* Skift HEX-koden herunder, hvis I nogensinde får en ny firmafarve */
    --brand-orange: #e86424; 
}

/* Får siden til at glide blødt i stedet for at hoppe */
html {
    scroll-behavior: smooth;
    /* Sikrer at vi stopper 120px før toppen, så menuen ikke dækker indholdet */
    scroll-padding-top: 120px;
}

/* Gør tekst eller baggrunde orange ved at tilføje disse klasser i HTML'en */
.text-brand { color: var(--brand-orange) !important; }
.bg-brand { background-color: var(--brand-orange) !important; }

/* ==========================================================================
   SEKTIONS BAGGRUNDE
   ========================================================================== */
.bg-brand-light {
    background-color: #f5e9e1 !important;
}

/* ==========================================================================
   SEKTIONS AFSTAND
   Sikrer dejlig meget luft top og bund (større end Bootstraps standard py-5)
   ========================================================================== */
.py-section {
    padding-top: 5.5rem !important; /* Ca. 88px luft i toppen */
    padding-bottom: 5.5rem !important; /* Ca. 88px luft i bunden */
}

/* ==========================================================================
   UNIVERSELLE SVG IKONER (Masking & currentColor teknik)
   Gør at SVG-filer automatisk tager samme farve som teksten omkring dem.
   ========================================================================== */
.svg-icon {
    display: inline-block;
    background-color: currentColor; /* Magi: Arver farven fra forældre-elementet */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* ==========================================================================
   PRIMÆRE KNAPPER
   ========================================================================== */

.btn-brand {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #212529; /* Mørk tekst/ikon farve som standard */
    transition: all 0.3s ease-in-out; /* Den bløde animation */
}

.btn-brand:hover {
    background-color: #ffffff; /* Bliver hvid */
    border-color: #ffffff;
    color: var(--brand-orange); /* Teksten og ikonet bliver orange for at skabe kontrast */
}

/* ==========================================================================
   OUTLINE BRAND KNAP (Til hvid baggrund)
   ========================================================================== */
.btn-outline-brand {
    background-color: transparent;
    color: var(--brand-orange);
    border: 2px solid var(--brand-orange);
    transition: all 0.3s ease-in-out;
}

.btn-outline-brand:hover {
    background-color: var(--brand-orange);
    color: #ffffff;
}

/* Gør 360-ikonet helt sort som standard */
.btn-outline-brand img {
    filter: brightness(0);
    transition: all 0.3s ease-in-out;
}

/* Få ikonet til at blive hvidt, når man holder musen over knappen */
.btn-outline-brand:hover img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   SEKUNDÆRE KNAPPER
   ========================================================================== */
.btn-custom-light {
    background-color: #ffffff;
    color: #212529; /* Mørk tekst */
    border: 2px solid #ffffff;
    transition: all 0.3s ease-in-out; /* Den bløde overgang */
}

.btn-custom-light:hover {
    background-color: #212529; /* Fader over i mørk */
    border-color: #212529;
    color: #ffffff; /* Teksten bliver hvid */
}

/* ==========================================================================
   VIDEO BAGGGRUND (Øverst på forsiden)
   Sikrer at videoen fylder hele skærmen og har et mørkt filter over sig
   ========================================================================== */

.bg-video {
    object-fit: cover; /* Sørger for at videoen ikke bliver mast */
    z-index: -2; /* Skubber videoen helt om bagved alt andet */
}
.video-overlay {
    background-color: rgba(0, 0, 0, 0.3); /* 60% sort filter over videoen */
    z-index: -1;
}

/* ==========================================================================
   SKRÅ VELKOMST-SEKTION
   Skærer den mørke boks skråt og trækker den op over videoen
   ========================================================================== */

.bg-slanted-dark {
    background-color: #212529;
    position: relative;
    z-index: 2;
    margin-top: -6vw;
    clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
    padding-top: 6vw;
    padding-bottom: 3vw;
}

/* ==========================================================================
   GENNEMSIGTIGE BOKSE (Glassmorphism)
   Boksene oven på videoen og nede i kundeanmeldelserne
   ========================================================================== */

/* De lyse bokse henover videoen */
.glass-box {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px); /* Bevarer den lækre slørede glas-effekt bagved */
    -webkit-backdrop-filter: blur(10px); /* Til Safari-brugere */
    border: none;
    border-radius: 8px; /* Lidt bløde hjørner, juster evt. hvis de skal være mere firkantede */
    transition: transform 0.3s ease; /* Lidt forberedelse til hover-effekter senere */
}

/* De mørke bokse til kundeanmeldelser */
.glass-box-dark {
    background: rgba(0, 0, 0, 0.7); /* Næsten helt sort */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   SPECIEL TEKST
   Gør teksten gennemsigtig med en orange kant ("Velkommen til...")
   ========================================================================== */

.outline-text {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--brand-orange);
    letter-spacing: 2px;
}

/* ==========================================================================
   FAQ / SPØRGSMÅL OG SVAR (Design af harmonika-menuen)
   Fjerner standard blå kanter, når man klikker på et spørgsmål
   ========================================================================== */

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
.accordion-button:not(.collapsed) {
    color: #000;
    background-color: transparent;
    box-shadow: none;
}

/* ==========================================================================
   TOPMENU (Navigationen)
   Sikrer at menuen sidder pænt og skifter farve når musen rammer
   ========================================================================== */

/* Maser menuen lidt sammen, så den ikke går helt ud til skærmkanten */
.navbar > .container {
    padding-left: 70px;
    padding-right: 70px;
    max-width: 1200px; 
}

/* Standard hvid/grå farve for menupunkter */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    transition: color 0.2s ease-in-out; /* Blød overgang ved farveskift */
}

/* Gør teksten orange, når musen er over (hover) eller vi er på siden (active) */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--brand-orange) !important;
}

/* ==========================================================================
   INLINE LINKS (Til hvid baggrund)
   Matcher menuens stil med blød overgang til orange ved hover
   ========================================================================== */
.link-inline {
    color: #212529; /* Mørk standardfarve */
    text-decoration: none; /* Fjerner standard understregning */
    font-weight: 700; /* Fed skrift så det skiller sig ud som klikbart */
    transition: color 0.3s ease-in-out; /* Samme bløde overgang som knapperne */
}

.link-inline:hover {
    color: var(--brand-orange); /* Fader over i orange ved hover */
}

/* ==========================================================================
   FOOTER (Bunden af siden)
   ========================================================================== */

/* Øger afstanden mellem bogstaverne i "FLEKSIBEL OPBEVARING" */
.tracking-widest {
    letter-spacing: 0.15em;
}

/* Skaber de orange lodrette skillelinjer mellem kolonnerne (Mail, Telefon osv.) */
.footer-divider {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100px;
    width: 2px;
    background-color: var(--brand-orange);
}

/* Tvinger billeder til at blive kridhvide */
.icon-white {
    filter: brightness(0) invert(1);
}

/* Tvinger billeder (som i footeren) til at blive orange */
.icon-brand {
    filter: brightness(0) saturate(100%) invert(45%) sepia(61%) saturate(2171%) hue-rotate(346deg) brightness(94%) contrast(94%);
}

/* ==========================================================================
   SMOOTH SCROLLING OG ANKER-LINKS (råd og regler)
   ========================================================================== */

/* Skærer bunden af den mørke header i et symmetrisk "V" */
.bg-header-slanted-bottom {
    background-color: #212529;
    /* Polygonet har 5 punkter: Top-venstre, Top-højre, Bund-højre(løftet), Bund-midte(spidsen), Bund-venstre(løftet) */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
    padding-bottom: 8vw;
}

/* Fjerner standard punkter og laver vores egne orange pile til genvejs-menuen */
.anchor-list {
    list-style: none;
    padding: 0;
}

.anchor-list li {
    margin-bottom: 1rem;
}

.anchor-list a {
    color: var(--brand-orange);
    text-decoration: none;
    transition: opacity 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
}

.anchor-list a:hover {
    opacity: 0.7;
}

/* Indsætter en orange pil før teksten */
.anchor-list a::before {
    content: "➤";
    font-size: 0.8em;
    margin-right: 12px;
}

/* ==========================================================================
   TILGÆNGELIGHED / FOCUS STATES (Tastatur-navigation)
   ========================================================================== */

/* Fjerner browserens grimme kant på alle knapper */
.btn-brand:focus,
.btn-outline-brand:focus,
.btn-custom-light:focus {
    outline: none;
}

/* Orange focus-glorie til brand knapperne (der bor på hvid eller mørk baggrund) */
.btn-brand:focus,
.btn-outline-brand:focus {
    box-shadow: 0 0 0 0.25rem rgba(232, 100, 36, 0.4) !important;
}

/* Mørk focus-glorie til den lyse knap (da den bor på den orange baggrund) */
.btn-custom-light:focus {
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5) !important;
}

/* Låser farverne for Outline-knappen */
.btn-outline-brand:focus {
    color: var(--brand-orange);
    border-color: var(--brand-orange);
    background-color: transparent;
}
.btn-outline-brand:focus:hover {
    color: #ffffff;
    background-color: var(--brand-orange);
}

/* Låser farverne for Brand-knappen (så SVG-ikon og tekst ikke skifter farve) */
.btn-brand:focus {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #212529;
}
.btn-brand:focus:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--brand-orange);
}

/* Låser farverne for Custom-Light knappen */
.btn-custom-light:focus {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #212529;
}
.btn-custom-light:focus:hover {
    background-color: #212529;
    border-color: #212529;
    color: #ffffff;
}

/* ==========================================================================
   CHECKBOXES I DEPOT-TABEL
   ========================================================================== */

/* Gør tabellens checkboxes meget mere tydelige med en tyk, mørk kant */
.rum-checkbox {
    border: 2px solid #495057 !important; /* Mørkegrå kant der kan ses! */
    cursor: pointer; /* Viser en 'hånd' når man holder musen over */
}

/* Når fluebenet er sat (orange baggrund) */
.rum-checkbox:checked {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}

/* Når rummet er udlejet (deaktiveret flueben) */
.rum-checkbox:disabled {
    border-color: #dee2e6 !important; /* Gør kanten lysegrå igen */
    background-color: #e9ecef !important;
    cursor: not-allowed; /* Viser et 'forbudt' ikon når man holder musen over */
}

/* ==========================================================================
   ANIMATION TIL "VALGTE RUM" BOKS
   ========================================================================== */
.valgte-rum-anim {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease-out;
}

.valgte-rum-anim.show {
    grid-template-rows: 1fr;
    opacity: 1;
}

.valgte-rum-anim > div {
    overflow: hidden;
}

/* ==========================================================================
   MENU FIX: Forhindrer "dobbelt aktiv" farve ved afbrudt klik
   ========================================================================== */
.navbar-dark .navbar-nav .nav-link:focus:not(.active):not(:hover) {
    color: rgba(255, 255, 255, 0.85) !important; 
}


/* ==========================================================================
   FORMULAR UX EFFEKTER
   ========================================================================== */
/* Gør at formularen fader blødt, både når den låses og låses op */
#contact-form, #reserver-form {
    transition: opacity 0.4s ease-in-out;
}

.form-lockdown {
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
}

/* Puls-effekt til submit-knapper */
@keyframes btnPulse {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.8; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

.btn-pulsing {
    animation: btnPulse 1.5s infinite ease-in-out;
}