/* ===== GENEREL BAGGRUND OG FONT ===== */
/* Gælder for hele siden */
body{
    background-color: #D2C1B7;        /* Lys brun/beige baggrund */
    font-family: "Open Sans";         /* Standard skrifttype */
}

/* ===== OVERSKRIFT ===== */
/* Styling af hovedoverskriften på informationssiden */
.side-overskrift{
    color: #4f1313;                   /* Mørkerød farve */
    font-size: 54px;                  /* Stor tekst */
    font-weight: bold;                /* Fed skrift */
    margin-left: 120px;               /* Skubber teksten ind fra venstre */
    margin-top: 90px;                 /* Luft over overskriften */
}

/* ===== BRØDTEKST ===== */
/* Almindelig paragraf-tekst */
.brødtekst {
    font-size: 18px;                  /* Standard læsevenlig størrelse */
    line-height: 1.6;                 /* Gør teksten mere luftig */
    font-weight: 400;                 /* Normal teksttykkelse */
    margin-bottom: 20px;              /* Luft under hvert afsnit */
    text-align: left;                 /* Venstrestillet tekst */
    margin-left: 120px;               /* Samme indrykning som overskriften */
    color: #4f1313;                   /* Samme farve som overskrift */
}

/* Fed tekst (hvis klassen bruges i HTML) */
.fed-tekst{
    font-weight: bolder;              /* Ekstra fed tekst */
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 120px;
    color: #4f1313;
}

/* ===== LAYOUT FOR INFORMATIONSIDE ===== */
/* Wrapper der placerer tekst og billede ved siden af hinanden */
.informations-side .indhold {
    display: flex;                    /* Aktiverer flexbox */
    gap: 30px;                        /* Afstand mellem tekst og billede */
    align-items: flex-start;          /* Justerer indhold øverst */
}

/* Tekstområdet fylder al ledig plads */
.tekst-område {
    flex: 1;                          /* Tager resten af pladsen */
}

/* Billedet må ikke blive mindre */
.billede-højre {
    flex-shrink: 0;                   /* Forhindrer billedet i at krympe */
}

/* Styling af billedet */
.billede-højre img {
    width: 600px;                     /* Fast bredde */
    margin-right: 60px;               /* Luft til højre */
    margin-top: 60px;                 /* Luft over billedet */
    height: auto;                     /* Bevarer billedets proportioner */
}

/* ===== MODAL ===== */
/* Modal-boksens indhold placeres lodret */
.modal-boks {
    display: flex;
    flex-direction: column;           /* Indhold under hinanden */
}

/* ===== TILBAGE-LINK ===== */
/* Link der sender brugeren tilbage til forsiden */
.tilbage-link {
    margin: 15px;
    font-size: 16px;
    text-decoration: none;            /* Fjerner standard understregning */
    color: #4f1313;
}

/* ===== RESET ===== */
/* Fjerner browserens standard margin og padding */
html, body {
    margin: 0;
    padding: 0;
}

/* Sørger for at navbar altid har hvid baggrund */
nav.navbar {
    background: #fff;
}

/* ===== CSS VARIABLER ===== */
/* Farver der kan genbruges overalt */
:root{
    --bg: #ffffff;                    /* Baggrundsfarve */
    --accent: #4f1313;                /* Primær accentfarve */
    --muted: #777777;                 /* Nedtonet grå */
    --line: #dcd6d3;                  /* Linje-/borderfarve */
    --cart: #666;                     /* Farve til kurv */
}

/* ===== NAVBAR ===== */
/* Overordnet styling af navigationen */
.navbar {
    background: var(--bg);
    border-top: 9px solid transparent;
    border-bottom: 1px solid var(--line);
    padding: 18px 28px;
    font-family: "Merriweather", serif;
    box-sizing: border-box;
}

/* Indholdet i navbaren */
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
}

/* ===== LOGO ===== */
/* Styling af logo/brand-navn */
.navbar-brand {
    flex: 0 0 auto;
    font-family: "Pacifico", cursive;
    font-size: 40px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;              /* Forhindrer linjeskift */
    font-weight: bolder;
}

/* ===== MENU ===== */
/* Selve menu-listen */
.navbar-nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    gap: 40px;
    list-style: none;                 /* Fjerner bullets */
    margin: 0;
    padding: 0;
}

/* Hvert menupunkt */
.navbar-nav .nav-item {
    position: relative;               /* Bruges til dropdown */
}

/* Links i menuen */
.navbar-nav .nav-link {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    padding: 6px 8px;
    transition: color .15s ease;      /* Blød farveovergang */
}

/* Hover og aktiv tilstand */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--accent);
}

/* Understregning ved hover/aktiv */
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
    content: "";
    display: block;
    height: 2px;
    width: 52%;
    background: var(--accent);
    margin: 6px auto 0;
    border-radius: 2px;
}

/* ===== DROPDOWN ===== */
/* Dropdown-område */
.navbar-nav .dropdown {
    cursor: pointer;
}

/* Selve dropdown-menuen */
.navbar-nav .dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 12px);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(20,20,20,0.06);
    padding: 8px 0;
    min-width: 180px;
    display: none;                    /* Skjult som standard */
    border-radius: 6px;
    z-index: 40;
}

/* Viser dropdown når musen holdes over */
.navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
}

/* Links inde i dropdown */
.navbar-nav .dropdown-menu a {
    display: block;
    padding: 8px 18px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
}

/* ===== FOOTER ===== */
/* Footerens baggrund og afstand */
.side-footer {
    background-color: #ffffff;
    padding: 20px 0;
    margin-top: 60px;
}

/* Indhold i footer */
.footer-indhold {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
}

/* Cookie-knap */
.cookie-box {
    background-color: #ffffff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
}

/* ===== MODAL OVERLAY ===== */
/* Mørk gennemsigtig baggrund */
.modal-overlay {
    position: fixed;
    inset: 0;                         /* Fylder hele skærmen */
    background: rgba(0,0,0,0.4);
    display: none;                    /* Skjult som standard */
    justify-content: center;
    align-items: center;
    z-index: 9999;                    /* Ligger øverst */
}

/* Modal fylder hele skærmen */
.modal-boks {
    width: 100vw;
    height: 100vh;
    padding: 0;
}

/* iframe fylder hele modal */
.modal-boks iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== ÅBN MENUKORT-KNAP ===== */
/* Knappen der åbner modal-vinduet */
.åbn-menukort-knap{
    display: flex;
    justify-content: flex-end;
    background-color: #2F3824;
    color: white;
    font-size: 18px;
    padding: 12px 30px;
    border-radius: 30px;
    margin-left: 500px;
    margin-top: -100px;
    text-decoration: underline;
}