body{background-color: #FFFEF7}

* {                             /* alle elementer */
    margin: 0;                  /* nulstiller browser-defaults - fx h1 og p har ellers margin */
    padding: 0;                 /* nulstiller browser-defaults */
    box-sizing: border-box;     /* ændrer box-modellen, så width inkluderer padding og border --> gør layout forudsigelige. Konsekvens = man skal selv definere al spacing
                                men gør jeg også*/
}



/* -------------------- */
/* HEADER */
/* -------------------- */

.header {
    min-height: 120px;
    background: linear-gradient(
            to bottom,
            #CDE8E0 0%,
            #FFFEF7 100%
    );

    position: relative;  /* Gør det muligt at styre med absolute*/
    z-index: 9999;      /*  over hero */
}


/* logo */
.logo img {
    height: 100px;
    min-height: 40px;
    width: auto;
    display: block;     /* betyder, at et HTML-element opfører sig som en blok, hvilket vil sige, det starter på en ny linje, fylder hele den tilgængelige bredde
                        i sin container, og andre elementer vil blive placeret over eller under det, aldrig ved siden af. Det er standard for elementer som <div>,
                        <p> og <h1>, men kan anvendes på inline-elementer (som <span>), for at tvinge dem til at opføre sig som blokke. */
}

/* Nav */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.1rem 3rem;
}

.nav-links {
    list-style: none;       /* fjerner punkttegn */
    display: flex;          /* Gør det til en flex-container hvilket aktiverer flexbox så det er nemmere at arrangere og justere fleksibelt og responsivt. Standard
                            er vandret som række */
    gap: 50px;
    padding: 0 1rem;
}

.nav-links a {
    color: #000000;
    text-decoration: none;
    font-family: "playfair display", serif;
    font-size: 1.2rem;
}

/* burger menu */
#menu-toggle {
    display: none;          /* skjuler checkbox visuelt. Bruges sammen med :checked i media query (bedre løsning kunne have været at bruge opacity: 0 i stedet)*/
}

.burger {        /* Skjules som standard, men aktiveres i media query */
    position: fixed;
    top: 20px;
    right: 20px;

    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;

    z-index: 10001;    /*  over header + hero = altid klikbar */
}

.burger span {          /* .burger span vælger alle <span> elementer, der er direkte eller indirekte placeret inden i et element med klassen burger.
                        Typisk anvendes denne kombination i webudvikling til at style elementerne, der udgør en "burger" menu-ikon (de tre horisontale streger,
                        der ofte bruges til at repræsentere en mobilmenu).*/
    width: 25px;
    height: 3px;
    background: #000000;
}


/* -------------------- */
/* FORSIDE BILLEDE 1 */
/* -------------------- */
.hero{
    position: relative;
    min-height: 90vh;       /* 90vh --> næsten fuld skærmhøjde */
    display: grid;        /* gittercontainer = adgang til andre CSS-egenskaber, der giver præcis kontrol over placeringen.
                          Gør det muligt at designe komplekse layouts med rækker og kolonner */
    place-items: center;        /* vandret + lodret centrering sammen med grid */
    padding: 56px 16px;
    overflow: hidden;       /* en CSS-erklæring, der styrer, hvad der sker, når indholdet i et HTML-element er for stort til at passe ind i elementets definerede
                            dimensioner (bredde og højde).
                            Kan bruges til:
                                -Skjult indhold: Alt indhold, der strækker sig ud over elementets boks, bliver simpelthen klippet væk og skjult for visning.
                                -Ingen rullepaneler: Der vises ingen rullepaneler (scrollbars), selvom der mangler indhold.
                                -Tvinge et element til at indeholde flydende elementer (clearfix hack): En almindelig brug er at tvinge en container (forælder-element)
                                til at udvide sig og omslutte sine "floated" (flydende) børne-elementer, i stedet for at lade dem flyde ud af containeren.*/
}

/* Baggrundsbillede */
.hero-bg{
    position: absolute;     /* CSS fjerner et element fra det normale dokumentflow og placerer det præcist i forhold til dets nærmeste forælder med en anden
                            position-værdi end static (ofte relative), eller til browserens vindue (body), hvis der ikke findes en positioneret forælder. Elementet
                            kan så flyttes med top, bottom, left, og right, og det vil overlappe andre elementer, da det ikke påvirker layoutet for resten af siden*/
    inset: 0;       /* top/right/bottom/left: 0. Bruges typisk til at strække et positioneret (in my case = position: absolute) ud så det fylder hele dets
                    referenceblok */
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Bevarer billedets proportioner og fylder containeren uden forvrængning */
    z-index: 0;     /* Ligger bag ved andre ting */
}

/* Fade/overlay ovenpå billedet */
.hero::after{       /* :: --> pseudo-element. Tilføjes for at style en specifik del af et element. Skal bruges med content element ved before og after.
                    :: after --> bruges til at indsætte indhold efter det faktiske indhold i et valgt element */
    content:"";         /* indsætter tom streg. Bruges typisk når man vil tilføje et dekorativt element såsom ramme eller klarings mekanisme (kendt som "clearfix"
                        teknikken) uden at tilføje ekstra HTML-kode, men udelukkende via CSS */
    position:absolute;
    inset:0;
    z-index:1;      /* over bg billede som har z-index 0 */
    background: linear-gradient(
            rgba(255, 254, 247, 0.55),
            rgba(102, 41, 87, 0.65)
    );
    pointer-events: none;       /* sikrer at links under overlay stadig er klikbare */
}

/*  Indhold over overlay */
.hero-inner{
    position: relative;     /* placerer et element i forhold til dets normale position i dokumentets flow, hvilket tillader justering med top, bottom, left og right,
                            uden at flytte andre elementer, der efterlader et "tomrum" hvor det oprindeligt var. Det er grundlaget for at skabe en "kontekst" for
                            absolut positionerede børneelementer (child elements). */
    z-index: 2;     /* over bg billede og overlay */
    width: min(980px, 100%);
    display: grid;
    gap: 80px;
    justify-items: center;
    text-align: center;
}

/* Boksen bag overskrift + tekst */
.hero-box{
    width: min(860px, 100%);
    padding: 26px 28px;
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Typografi */
.hero-box h1{
    margin: 0 0 12px;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.05;
}

.hero-box p{
    margin: 0 auto;
    max-width: 60ch;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.45;
}

/* Buttons */
.hero-cta{
    margin-inline: auto;        /* en shorthand-egenskab, der sætter den logiske start- og slutmargin for et element i den "inline" retning (typisk vandret i
                                vestlige sprog) og lader browseren automatisk beregne afstanden for at centrere eller fordele pladsen jævnt, afhængigt af konteksten
                                og skriftretningen (writing mode). Det er en mere fleksibel version af margin-left og margin-right, der tilpasser sig forskellige
                                sprog og layoutretninger. */

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));       /* opretter et gitter med tre kolonner, hvor hver kolonne har en minimumsstørrelse på 0 og maksimalt kan
                                                            strække sig til at optage 1 brøkdel (1fr) af den tilgængelige plads, hvilket resulterer i tre lige store,
                                                            fleksible kolonner, der fordeler den ledige plads jævnt. */
    gap: 18px;
}

.btn{
    display: grid;
    place-items: center;
    padding: 22px 18px;
    

    background: #6ABDA8;
    color: #000000;
    text-decoration: none;
    border-radius: 22px;

    font-size: 1.35rem;
    line-height: 1.15;
    font-weight: bold;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;     /* en CSS-erklæring, der bruges til at informere browseren om, at et element sandsynligvis vil ændre sin transform-egenskab i den
                                nærmeste fremtid. Dette er et optimeringstip, der giver browseren mulighed for at træffe visse forberedende handlinger for at
                                forbedre renderingens ydeevne */
}

.btn:hover,
.btn:focus-visible{     /* .btn:focus-visible: Denne pseudo-klasse anvender stilarter, når elementet har "fokus" og dette fokus bør være synligt for brugeren. Fokus
                        opnås typisk ved brug af tastaturet (f.eks. via Tab-tasten) eller programmatisk (f.eks. via JavaScript). Det er afgørende for tilgængelighed
                        (accessibility), da det hjælper brugere, der navigerer med tastaturer eller hjælpeteknologier, med at se, hvilket element der er aktivt i
                        øjeblikket. Stilen sikrer, at fokusringen kun vises, når det er nødvendigt, i modsætning til den ældre :focus-pseudo-klasse, som altid viste
                        fokus uanset inputmetode (mus eller tastatur).
                        I praksis bruges de ofte sammen for at sikre en sammenhængende og tilgængelig brugeroplevelse, hvor både mus- og tastaturbrugere får passende
                        visuelle ledetråde om interaktivitet og fokus.*/
    transform: scale(1.05);         /* anvendes til at ændre størrelsen på et HTML-element i forhold til dets oprindelige dimensioner
                                    scale(1.05): Dette er en funktion, der anvendes som værdi for transform-egenskaben. Den angiver, at elementet skal skaleres
                                    (størrelsesændres) ensartet.
                                    Værdien 1.0 repræsenterer den originale størrelse (100%) [1].
                                    Værdien 1.05 betyder, at elementet skal gøres 5% større (105%) både i bredden og højden.*/
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

/* Hvorfor Connected Starters tekst */
h2{
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    margin-top: 60px;
    font-family: "playfair display",serif;
}

main p{
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.45;
    font-family: "open sans", sans-serif;
}

main h2{
    font-family: "playfair display",serif;
}

/* -------------------- */
/* FORSIDE BILLEDE 2 */
/* -------------------- */
.section-image{
    margin-top: 60px;
    position: relative;
    min-height: 90vh;
    display: grid;
    place-items: center;
    padding: 56px 16px;
    overflow: hidden;
}

/* Baggrundsbillede */
.image-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Fade/overlay ovenpå billedet */
.section-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background: linear-gradient(
            rgba(255, 254, 247, 0.55),
            rgba(102, 41, 87, 0.65)
    );
    pointer-events: none;
}

/* Indhold over overlay */
.section-inner{
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    display: grid;
    gap: 80px;
    justify-items: center;
    text-align: center;
}

/* Boksen bag overskrift + tekst */
.section-box{
    width: min(860px, 100%);
    padding: 26px 28px;
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);        /* anvender et grafisk filter på det, der ses bag elementet, ikke på selve elementets indhold.*/
    -webkit-backdrop-filter: blur(18px);        /* er den vendor-prefixed version for WebKit-baserede browsere. Uden prefix virker effekten slet ikke i Safari */

    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Typografi */
.section-box h2{
    margin: 0 0 12px;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.05;
}

.section-box p{
    margin: 0 auto;
    max-width: 60ch;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.45;
}

/* Buttons */
.section-cta{
    min-width: 250px;
    min-height: 100px;
    margin-inline: auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Sponsorer tekst */
main h3 {
    font-size: clamp(1.2rem, 1.5vw, 1.35rem);
    font-weight: bold;
    font-family: "open sans", sans-serif;
    margin-top: 5px;
    margin-bottom: 5px;
}





/* -------------------- */
/* EVENTS underside */
/* -------------------- */
.event {
    margin-left: 120px;
    margin-right: 120px;
    margin-top: 50px;
}

/* Wrapper til billedet + overlay + gennemsigtig boks */
.article-box {
    position: relative;
    aspect-ratio: 16 / 9;       /* angiver, at et element skal have forholdet 16:9 mellem bredde og højde — præcist samme format som fx widescreen-video og moderne
                                skærme. Aspect-ratio: bredde/højde */
    overflow: hidden;
}

/* Baggrundsbillede */
.article-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay ovenpå billedet (ikke ovenpå teksten) */
.article-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
            rgba(255, 254, 247, 0.55),
            rgba(102, 41, 87, 0.65)
    );
    pointer-events: none;
}

/* Gennemsigtig boks til titel + undertitel */
.article-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);       /* flytter et element i dets egen koordinatsystem efter layout er beregnet.
                                            betyder:
                                            -50% i x-retningen = halvdelen af elementets egen bredde
                                            -50% i y-retningen = halvdelen af elementets egen højde*/
    z-index: 2;

    width: min(560px, 90%);
    padding: 26px 28px;
    border-radius: 18px;
    text-align: center;

    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Titel i boksen */
.article-inner h2 {
    margin: 0;
    line-height: 1.1;
}

/* Undertitel */
.event-subtitle {
    margin: 10px 0 0;
    line-height: 1.2;
}

/* Typografi */
.bold-serif{
    font-weight: bold;
    font-family: "playfair display", serif;
    font-size: 1.5rem;
    margin-top: 10px;
}

.event a{
    text-decoration: none;
    color: #38806E;
    font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.event a:hover{color: #6ABDA8;}

/* Tilmeld button */
.signup-fade {
    margin-top: 50px;
    padding: 4rem 1rem;
    text-align: center;

    /* 3-punkts gradient: hvid → lilla → hvid */
    background: linear-gradient(
            to right,
            #FFFEF7 0%,
            rgba(102, 41, 87, 0.86) 50%,
            #FFFEF7 100%
    );
}

/* CTA-knap */
.signup-button {
    display: inline-block;      /* betyder, at et element opfører sig som en inline-boks, men kan styles som en block-boks.
                                Inline adfærd:
                                -Elementet placeres på samme linje som tekst og andre inline-elementer
                                -Det starter ikke på en ny linje
                                -Det kan stå side om side med andre inline / inline-block
                                Block-egenskaber:
                                -Et inline-block:
                                -kan få width og height
                                -respekterer padding, margin og border i alle retninger
                                -kan transformeres, animeres osv.*/
    background-color: #6ABDA8;
    color: #000;
    padding: 25px 28px;
    border-radius: 22px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
}
.signup-button:hover,
.signup-button:focus-visible{
    transform: scale(1.05);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

/* Button tekst */
.signup-fade a{
    font-size: 1.8rem;
    font-weight: bold;
    font-family: "playfair display", serif;
}

/* Tekst under knappen */
.signup-note {
    margin-top: 1.5rem;
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 550;
}

/* Afstand */
.top-afstand{margin-top: 30px}

/* Typografi */
.plain a{
    text-decoration: none;
    color: #38806E;
    font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.plain a:hover{color: #6ABDA8}






/* -------------------- */
/* KONTAKT underside */
/* -------------------- */
main h1{
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    margin-top: 40px;
    font-family: "playfair display",serif;
}

.tekst1{
    margin-top: 40px;
}

/* Afstand */
.mere-afstand{
    margin-top: 10px;
    margin-bottom: 10px;
}

.mere-afstand2 {
    margin-top: 40px;
    margin-bottom: 10px;
}

/* SoMe ikoner */
.SoMe-ikon a img {
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 60px;
    height: auto;
}

.SoMe-ikon a img:hover {
  transform: scale(1.05);
}

/* Section med baggrundsbillede af kort og 3 buttons ovenpå */
.section-kort {
    position: relative;
    max-width: 100%;
    margin-top: 15px;
}

/* Baggrund */
.kort-baggrund {
    width: 100%;
    height: auto;
    display: block;
    opacity: 50%;
}

/* Buttons */
.kort-knapper {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.kort-knap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6ABDA8;
    color: #000;
    height: 105px;
    font-weight: bold;
    border-radius: 22px;
    text-decoration: none;
    padding: clamp(25px, 4vw, 40px);
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: min(400px, 86vw);
    max-width: 86vw;
    font-style: normal;
}

.kort-knap:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}


.section-kort::after{
     content:"";
     position:absolute;
     inset:0;
    z-index:1;
    background: linear-gradient(
             rgba(255, 254, 247, 0.55),
             rgba(102, 41, 87, 0.65)   );
     pointer-events: none;
    }


/* -------------------- */
/* FOOTER */
/* -------------------- */

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 3rem 4rem;

    background: linear-gradient(
            to bottom,
            #FFFEF7 0%,
            #CDE8E0 100%
    );
    margin-top: 100px;
}

.footer-text { max-width: 520px; }

/* typografi */
.serif { font-family: "Playfair Display", serif; }

.serif p:first-child {
    font-size: 1.3rem;
    font-weight: 600;
}

.sans-serif {
    font-family: "Open Sans", sans-serif;
    color: #3a3a3a;
    line-height: 1.6;
    font-size: 0.9rem;
    font-style: normal;
}

.sans-serif a{
    text-decoration: none;
    color: #3a3a3a;
}

.sans-serif a:hover{
    color: #38806E;
}

/* knap */
.btn-link {
    margin-top: 5px;
    display: inline-block;
    padding: 0.75rem 1.75rem;

    background: #6ABDA8;
    border-radius: 999px;

    font-family: "Playfair Display", serif;
    font-size: 0.9rem;
    color: #000000;
    text-decoration: none;
    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-link:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}


/* SoMe */
.SoMe {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1rem;
}

.SoMe a svg {
    width: 40px;
    height: 40px;
    fill: #5a5a5a;
    transition: fill 0.2s ease;
}

.SoMe a:hover svg {
    fill: #6ABDA8;
}

/* logo */
.footer-logo { margin-top: 0.1rem; }

.footer-logo img {
    max-width: 260px;
    height: auto;
}

/* -------------------- */
/* Mobilversion */
/* -------------------- */
@media (max-width: 780px) {
    .btn{ min-height: 50px; max-width: 200px; font-size: 1.15rem;}

    .kort-knap {
        max-width: 260px;
        font-size: 1rem;
        max-height: 30px;
    }

    .kort-knapper {
        gap: 0.8rem;
    }

    .plain h2{ margin-left: 20px; margin-right: 20px; }
    .plain p{ margin-left: 20px; margin-right: 20px; }
    .plain h3{ margin-left: 20px; margin-right: 20px; }

    .plain a{margin-left: 20px; margin-right: 20px;}


    main h2{margin-left: 20px; margin-right: 20px;}

    main h3{ margin-left: 20px; margin-right: 20px; }

    .section-kort{margin-left: 20px; margin-right: 20px;}

    .SoMe-ikon a img{margin-left: 20px}

    .burger { display: flex; }

    .nav-links {
        position: fixed;
        top: 64px;
        right: 10px;
        margin-right: 0;

        text-align: right;   /* teksten til højre */
        align-items: flex-end; /* links til højre */

        width: 220px;
        padding: 1.5rem;

        display: none;
        flex-direction: column;
        gap: 1.5rem;

        background: linear-gradient(
                to bottom,
                #CDE8E0 0%,
                #FFFEF7 100%
        );

        z-index: 10000;             /* under burger, over hero */
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    #menu-toggle:checked + .burger + .nav-links {
        display: flex;
    }

    main h1{margin-left: 20px; margin-right: 20px;}

    .event{margin-left: 20px; margin-right: 20px;}

    .article-media {
        aspect-ratio: 4 / 3;  /* lidt højere billede på mobil */
    }

    .article-inner {
        width: min(520px, 92%);
        padding: 18px 16px;
        border-radius: 16px;
    }

    .article-inner h2 {
        font-size: 1.6rem;
    }

    .event-subtitle {
        font-size: 1rem;
    }
}

/* -------------------- */
/* DESKTOP VERSION */
/* -------------------- */
@media (min-width: 780px) {
    .logo img {
        height: 160px;
        margin-left: 1rem;
    }

    .burger { display: none; }

    .nav-links {
        display: flex;
        flex-direction: row;
    }

    .btn{ min-height: 120px;}

    .hero-box h1{ font-size: 3.5rem; }

    .plain h2{
        font-size: 3.5rem;
        margin-left: 120px;
        margin-right: 120px;
    }

    main h2 {
        font-size: 3.5rem;
        margin-left: 120px;
        margin-right: 120px;
    }


    .hero-box p{ font-size: 1.4rem; }

    .plain p{
        font-size: 1.2rem;
        margin-left: 120px;
        margin-right: 120px;
    }

    .plain a{
        margin-left: 120px;
        margin-right: 120px;
    }


    .plain h3 {
        font-size: 1.8rem;
        margin-left: 120px;
        margin-right: 120px;
    }

    main h3{
        font-size: 1.8rem;
        margin-left: 120px;
        margin-right: 120px;
    }

    .SoMe-ikon a img{margin-left: 120px}

    main h1{
        font-size: 3.5rem;
        margin-left: 120px;
        margin-right: 120px;
    }

    .section-kort {
        margin-left: 120px;
        margin-right: 120px;
    }

    footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .footer-text { max-width: 520px; }

    .SoMe { justify-content: flex-start; }

    .footer-logo { margin-top: 0; }
}