/* Nulstil standard marginer */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #FFF8E7; 
    font-family: serif; 
    color: #5D3A31; 
    letter-spacing: 0.05em; 
    
    /* --- FOOTER STYRING --- */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Kroppen fylder altid mindst 100% af skærmen */
    margin: 0;
}

/* --- FOOTER STYLING --- */
footer {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF8E7;
    margin-top: auto; /* Sikrer at footeren bliver i bunden */
}

/* Boksen der holder ikonerne */
.social-icons {
    display: flex;       /* Lægger dem ved siden af hinanden */
    gap: 30px;           /* Afstand mellem ikonerne */
    align-items: center;
}

/* Selve ikonerne (SVG) */
.social-icons svg {
    width: 32px;       
    height: 32px;
    fill: #5D3A31;       /* Den brune farve - hvis de er sorte, virker denne linje ikke */
    transition: fill 0.3s;
}

/* Linket udenom */
.social-icons a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Hover-effekt (lyserød når musen er over) */
.social-icons a:hover svg {
    fill: #D68B82;
    cursor: pointer;
}

main {
    flex: 1 0 auto; 
    display: flex;          
    flex-direction: column;  
}

/* --- HEADER STYLING --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    height: 80px;
    flex-shrink: 0; 
}

/* --- LOGO STYLING (Standard for alle sider) --- */
/* Kommaet betyder: "Gør dette ved BÅDE .logo boksen OG links indeni den" */
.logo, .logo a {
    font-size: 28px;       /* Sikrer at størrelsen ALTID er 28px */
    color: #5D3A31;        /* Sikrer at farven ALTID er brun */
    text-decoration: none; /* Fjerner understregning på links */
    font-family: serif;    /* Sikrer at det er din rigtige font */
    cursor: pointer;       /* Viser en hånd-cursor, så man kan se det kan klikkes */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

/* Styling af links i menuen */
nav a {
    text-decoration: none;
    color: #5D3A31; /* Mørkebrun */
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    transition: color 0.3s; /* Gør farveskiftet blødt */
}

/* Når man holder musen over menu-links */
nav a:hover {
    color: #D68B82; /*  rosa farve ved hover */
}

/* --- HERO SECTION (Billedet) --- */
.hero-section {
    width: 100%;
    flex: 1;

    background-image: url('img/home.jpg'); 
    background-size: cover;
    background-position: center; 
    display: flex;
    align-items: flex-start; 
    padding-top: 140px; 
    padding-left: 50px;
}

.hero-section h1 {
    color: #FFF8E7; 
    font-size: 60px;
    font-weight: normal;
}

/* --- KONTAKT SIDE STYLING --- */

/* Dette centrerer kassen midt på skærmen */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 40px 20px;
}

/* Selve den lyserøde kasse */
.contact-box {
    background-color: #FFD6D6; 
    padding: 60px;
    text-align: center;
    width: 700px; 
    max-width: 90%; 
}

.contact-box h2 {
    font-size: 28px; 
    font-weight: normal;
    margin-bottom: 20px;
    
    /* Sikrer at teksten ikke knækker uønsket */
    white-space: nowrap; 
}

.contact-box p {
    font-size: 18px;
    margin: 10px 0;
}

/* Gør mail-adressen fed */
.contact-box .email {
    font-weight: bold;
}

/* De tynde streger */
.divider {
    height: 1px;               /* Tykkelse på stregen */
    background-color: #5D3A31; /* Din brune farve */
    width: 80%;                /* Stregen fylder 80% af kassens bredde */
    margin: 30px auto;         /* Centrerer stregen og giver luft over/under */
}

/* Styling af det aktive link i menuen */
nav a.active {
    color: #D68B82; /* mørke-rosa farve */
}

/* --- OM MIG SIDE STYLING --- */

.about-section {
    display: flex;         /* Lægger tekst og billede ved siden af hinanden */
    justify-content: center; /* Centrerer indholdet vandret */
    align-items: center;     /* Centrerer indholdet lodret */
    gap: 40px;             /* Stor afstand mellem tekst og billede */
    padding: 50px 20px;   /* Luft rundt om hele sektionen */
    min-height: 80vh;      /* Sikrer siden fylder godt i højden */
    flex-wrap: wrap;
}

/* Venstre side (Teksten) */
.about-text {
    flex: 1;               /* Betyder: "Fyld så meget du kan" */
    max-width: 500px;      /* ...men stop med at vokse ved 500px (så linjerne ikke bliver for lange) */
    line-height: 1.6;      /* Gør teksten nemmere at læse */
    font-size: 18px;      
}

/* Højre side (Den lyserøde ramme) */
.about-image-frame {
    background-color: #FFD6D6; /* Den lyserøde farve */
    padding: 30px;             /* Dette skaber rammen (Afstand fra kant til billede) */
    width: 400px;              
}

/* Selve billedet indeni rammen */
.about-image-frame img {
    width: 100%;           /* Sørger for billedet holder sig inden for rammen */
    display: block;        /* Fjerner en lille irriterende hvid stribe i bunden */
}

/* --- PORTFOLIO SIDE STYLING --- */

.portfolio-grid {
    display: grid;
    /* Dette betyder: Lav 3 kolonner der er lige store (1 fraction hver) */
    grid-template-columns: repeat(3, 1fr); 
    
    /* Afstand mellem boksene (både vandret og lodret) */
    gap: 40px; 
    
    /* Sørger for indholdet ikke bliver for bredt og ligger i midten */
    max-width: 1200px;
    margin: 50px auto; /* 50px luft i top/bund, auto i siderne */
    padding: 0 40px;   /* Lidt luft i siderne på små skærme */
}

/* Selve den lyserøde boks (som også er et link) */
.portfolio-card {
    background-color: #FFD6D6; 
    padding: 30px;            
    text-align: center;       
    text-decoration: none;     
    color: #5D3A31;           
    
    /* --- 1px solid #5D3A31; 1px tyk, solid streg i din brune farve */
    border: none;
    
    transition: transform 0.2s; 
    display: block; 
}

/* Når man holder musen over boksen, hopper den lidt op */
.portfolio-card:hover {
    transform: translateY(-5px);
}

/* Den tynde ramme rundt om billedet */
.image-frame {
    border: none;              /* ingen streg om billedet*/
    padding: 0;                /* så billedet fylder hele rammen ud */
    margin-bottom: 20px;       
    background-color: transparent; 
}

/* Selve billedet */
.image-frame img {
    width: 100%;           /* Billedet fylder hele rammen ud */
    display: block;        /* Fjerner hvid stribe i bunden */
    
    /* Dette tvinger billederne til at være firkantede, 
       selvom originalfilen måske er aflang! */
    aspect-ratio: 1 / 1;   
    object-fit: cover;     /* Sørger for billedet ikke bliver mast */
}

.portfolio-card h3 {
    font-weight: normal;
    font-size: 18px;
    letter-spacing: 0.05em;
}

/* --- MOBIL VENLIGHED  --- */
/* Hvis skærmen er mindre end 900px, skift til 2 kolonner */
@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Hvis skærmen er mindre end 600px (mobil), skift til 1 kolonne */
@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* --- PROJEKT UNDERSIDE STYLING --- */

.project-page {
    display: flex;
    flex-direction: column; /* Sætter tingene ovenpå hinanden */
    align-items: center;    /* Centrerer alt vandret */
    padding: 40px 20px;     /* Luft i top/bund og sider */
    margin-bottom: 50px;    /* Sikrer luft ned til footeren */
}

/* Det store billede */
.project-hero-image {
    width: 100%;            /* Billedet må fylde bredden... */
    max-width: 900px;       /* ...men aldrig mere end 900px (så det ikke bliver gigantisk) */
    height: auto;           /* Bevarer billedets proportioner */
    margin-bottom: 40px;    /* Luft ned til teksten */
    display: block;
}

/* Tekst-sektionen */
.project-content {
    text-align: center;     /* Centrerer al tekst */
    max-width: 600px;       /* Gør tekstblokken smal*/
}

.project-content h1 {
    font-size: 36px;
    font-weight: normal;
    margin-bottom: 5px;
    color: #5D3A31;
}

.project-content .subtitle {
    font-style: italic;     /* Gør teksten kursiv */
    font-size: 18px;
    margin-bottom: 30px;
    color: #5D3A31;
    opacity: 0.8;           /* Gør den en lille smule lysere */
}

.project-content .description {
    font-size: 16px;
    line-height: 1.6;       /* Luft mellem linjerne */
    margin-bottom: 50px;    /* Luft ned til knappen */
}

/* --- "KONTAKT MIG" KNAPPEN --- */
.cta-button {
    display: inline-block;  /* Gør at linket opfører sig som en knap */
    background-color: #E8B4B4; /* En lidt mørkere rosa end min bokse, så den ses tydeligt */
    color: #5D3A31;         /* Brun tekst */
    padding: 15px 50px;     /* Luft indeni knappen (Top/Bund - Højre/Venstre) */
    border-radius: 50px;    
    text-decoration: none;  /* Fjerner understregning */
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
    border: none;
}

/* Når man holder musen over knappen */
.cta-button:hover {
    background-color: #D68B82; /* Bliver lidt mørkere ved hover */
    transform: scale(1.05);    /* Vokser en lille smule */
    color: #FFF8E7;            /* Teksten bliver lys */
}   

/* --- LOGO BILLEDE --- */
.logo-hero {
    width: 100%;            
    max-width: 200px;       
    height: auto;           /* Bevarer proportionerne */
    display: block;
    margin-bottom: 40px;    /* Luft ned til teksten */
}

/* --- LOGO I PORTFOLIO OVERSIGT --- */

/* Gør at logoet fylder bredden ud, men ALDRIG bliver beskåret */
.logo-card-img {
    width: 100%;             /* Fylder hele bredden af rammen */
    height: auto;            /* Bevarer proportionerne */
    object-fit: contain;     /* Sikrer at hele logoet altid kan ses */
    display: block;
}

/* Fjerner den brune ramme, så logoet ligger "frit" på den lyserøde baggrund */
.image-frame.no-border {
    border: none;            /* Fjerner stregen */
    padding: 0;              /* Fjerner ekstra luft */
    background-color: transparent;
    
    /* Centrerer logoet vertikalt hvis der er plads */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- STYLING TIL LOGO I OVERSIGT --- */

/* Rammen der holder logoet */
.logo-frame {
    border: none !important;    /* Fjerner den brune streg */
    height: 350px;              /* Samme højde som mine andre billeder */
    display: flex;              /* Gør det muligt at centrere indholdet */
    align-items: center;        /* Centrerer lodret */
    justify-content: center;    /* Centrerer vandret */
    background-color: transparent; 
}

/* 2. Selve logo-billedet */
.logo-img {
    width: 100%;                
    height: 100%;               
    object-fit: contain;        /* Sikrer at HELE logoet vises uden at blive beskåret */
    padding: 30px;              /* Giver luft rundt om logoet, så det ikke ser mast ud */
}

/* --- MINDRE PROJEKT BILLEDE (Til visitkort m.m.) --- */
.small-hero {
    width: 100%;
    max-width: 500px;       
    height: auto;           
    display: block;
    margin-bottom: 40px;    /* Sikrer luft ned til teksten */
    
}

/* --- DOBBELT BILLEDE GALLERI (Mindre version) --- */
.gallery-row {
    display: flex;              
    justify-content: center;    /* Sørger for at de står midt på siden */
    gap: 20px;                  /* Luft mellem billederne */
    
    max-width: 600px;           
    margin: 0 auto 40px auto;   /* Centrerer hele kassen og laver luft ned til teksten */
}

.gallery-row img {
    width: 48%;                 /* Hvert billede fylder knap halvdelen af kassen */
    height: auto;               /* Bevarer proportionerne */
    object-fit: cover;          
}

/* --- MOBIL OPTIMERING --- */
@media (max-width: 768px) {
    
        .hero-section {
            /* Tvinger billedet til at fylde 100% af skærmens højde */
            height: 100vh !important; 
            min-height: calc(100vh - 160px) !important;
            flex: 1 !important;
            padding-top: 15vh !important;
            
            /* Centrerer billedet så det vigtigste (blomsten) altid ses */
            background-position: center !important;
            background-size: cover !important;
            
            /* Flytter teksten op i den øverste del */
            padding-top: 15vh !important; 
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

    /* Kontakt-siden: Fikser kassen og teksten */
    .contact-box {
        padding: 40px 20px !important; /* Giver luft indeni uden at mase teksten */
        width: 95% !important;        /* Sikrer kassen ikke går ud over skærmen */
        max-width: none !important;
    }

    .contact-box h2 {
        font-size: 22px !important;    /* Gør overskriften lidt mindre så den kan være der */
        white-space: normal !important; /* TILLADER teksten at knække linjen */
        line-height: 1.3 !important;
    }

    /* 2. Farve på links: Gør både mail og tlf brune */
    .contact-box a, 
    .contact-box p a,
    .contact-box .email a {
        color: #5D3A31 !important;
        text-decoration: none !important;
    }

    /* 3. Om mig: Billede under tekst */
    .about-section {
        flex-direction: column; 
        text-align: center;     
        padding: 40px 20px;
        gap: 30px;
    }

    .about-text {
        max-width: 100%;
        order: 1;
    }

    .about-image-frame {
        width: 100%;
        max-width: 350px;
        order: 2;
        margin: 0 auto;
    }

    /* 4. Menu og Header */
    header {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }
    .logo {
        margin-bottom: 15px;
    }
    nav ul {
        gap: 15px;
    }
}

/* Denne sikrer at links aldrig bliver blå, uanset skærmstørrelse */
.contact-box a {
    color: #5D3A31;
    text-decoration: none;
}