/* DIT NYE SANDFARVEDE DESIGN */
body {
    background-color: #ddcdc8; /* Den smukke sandfarve fra kodebiden */
    color: #171717;            /* En blød, rå kulsort til din tekst */
    font-family: system-ui, -apple-system, sans-serif;
}

/* Sørger for, at menulinks lytter til din sandfarve som standard */
.navbar-nav .nav-link {
    color: #ddcdc8 !important; 
}

/* Tvinger menulinks til at blive lyserøde ved hover */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #f6f6f3 !important; 
}

/* Giver også navnet "Susanne" din sandfarve */
.custom-nav-text {
    color: #ddcdc8;
}

/* Klassen er tom i starten, men får farve når der scroles */
.navbar {
    background-color: transparent;
    transition: background-color 0.4s ease; /* Gør overgangen glidende */
}

/* Grå navbar ved scroll */
.navbar.scrolled {
    background-color: rgba(128, 128, 128, 0.95) !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.hero-section {
    background-image: url('hero_pinknoise.png');
    background-size: cover;       /* Sikrer at billedet dækker hele sektionen */
    background-position: center;   /* Centrerer lydbølgen på skærmen */
    background-repeat: no-repeat;  /* Undgår at billedet gentager sig selv */
}

/* Lys baggrundsfarve til de tre hovedkort */
.project-category-card {
    background-color: #f6f6f3 !important; /* Din lyse kortfarve */
    border: 1px solid #e0e0dc !important; /* En meget diskret kant, der matcher */
	border-radius: 12px; /* Giver kortene flotte, bløde hjørner */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

/* Din specifikke mørke tekstfarve til overskrifter og brødtekst */
.project-category-card .card-title,
.project-category-card .card-text,
.project-card .card-title,
.project-card .card-text {
    color: #171717 !important;
}

.project-category-card .card-text, 
.project-card .card-text {
    color: #171717 !important;
    opacity: 0.85; /* Gør brødteksten en anelse blødere at læse end den helt hårde farve */
}


.project-category-card .card-text {
    opacity: 0.85;
}

/* HOPPE-EFFEKT: Hvad der sker når man fører musen over (Hover) */
.project-category-card:hover {
    transform: translateY(-8px) !important; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; 
    cursor: pointer; 
}

/* DE RÅ KASSER (Står helt skarpt på den sandfarvede baggrund) */
.project-card {
    background-color: #f6f6f3 !important; /* Kasserne er helt hvide indeni */
    border: 1px solid #e0e0dc !important; /* En fin, dæmpet mørk-sandfarvet kant */
    border-radius: 12px;        /* Råt og firkantet */
    color: #171717;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.project-card:hover {
    transform: translateY(-5px) !important;
    background-color: #f6f6f3; /* Kassen bliver helt sort ved hover */
    color: #171717;            /* Teksten i kassen bliver sandfarvet ved hover */
    border-color: #171717;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Gælder kun for mobilskærme, hvor burgermenuen er synlig */
@media (max-width: 991.98px) {
    .navbar-collapse {
        /* Giver selve menuen en solid grå baggrund, når den foldes ud */
        background-color: #808080; 
        
        /* Giver lidt luft rundt om linksene indeni mobillisten */
        padding: 1rem; 
        
        /* Runder hjørnerne i bunden af mobilmenuen en lille smule */
        border-radius: 8px;
		
		 /* RETTELSE: Centrerer al teksten og luften fuldstændig ens i boksen */
        text-align: center; 
		margin: 7px 20px 0 10px;
    }
}

/* Styling der KUN gælder links inde i dit dynamiske tekstfelt */
#computer-tekstfelt a {
    color: #171717;               /* Den mørke kulsorte farve fra dit design */
    background-color: transparent;
    text-decoration: none;
    font-weight: 600;             /* Gør linket lidt federe, så man kan se det er et link */
    transition: color 0.2s ease;  /* Gør farveskiftet glidende */
}

#computer-tekstfelt a:visited {
    color: #171717;
}

#computer-tekstfelt a:hover,
#computer-tekstfelt a:active {
    color: #f6f6f3;               /* Skifter til din lyse farve ved hover */
    text-decoration: underline;   /* Understregning dukker op ved hover */
}

/* Styling af de foldbare tekst-kort */
.custom-project-card {
    background-color: #f6f6f3 !important; /* Din lyse kortfarve */
    border: 1px solid #e0e0dc !important; /* Din diskrete kant */
    border-radius: 12px !important;       /* Dine flotte, bløde hjørner */
    color: #171717 !important;            /* Din mørke tekstfarve */
    opacity: 0.85;                        /* Gør teksten en anelse blødere at læse */
}

/* Gør dine overskrifter klikbare og sikrer din rigtige farve */
.btn-collapse {
    color: #808080 !important;
    cursor: pointer;
}

/* Valgfrit: Gør overskriften hvid, når man holder musen over den, så brugeren ved den kan klikkes */
.btn-collapse:hover {
    color: #ffffff !important;
}

/* Styling af e-mail-linket i din kontakt-sektion */
#kontakt-sektion a {
    color: #171717 !important;    /* Den mørke kulsorte farve fra dit design */
    font-weight: 600;             /* Gør linket lidt federe og tydeligere */
    text-decoration: none;        /* Fjerner standard understregning */
    transition: color 0.2s ease;  /* Gør farveskiftet glidende */
}

/* Hover-effekt på e-mail-linket */
#kontakt-sektion a:hover,
#kontakt-sektion a:focus {
    color: #f6f6f3 !important;    /* Skifter til din smukke sandfarve ved hover */
    text-decoration: underline;   /* Understregning dukker op ved hover */
}

/* BOOTSTRAP TILPASNING AF BOLLE */
#top-bolle {
    display: none;        /* Skjult som standard (JS tænder den) */
    bottom: 20px;         /* 20px fra bunden */
    right: 20px;          /* 20px fra højre side */
    z-index: 99;          /* Lægger den ovenpå alt andet */
    width: 50px;          /* Fast bredde */
    height: 50px;         /* Fast højde */
    font-size: 20px;      /* Størrelse på pilen */
    line-height: 1;       /* Centrerer pilen lodret */
    transition: transform 0.2s ease; /* Gør hover-effekten glidende */
	/* DINE NYE FARVER */
    background-color: #808080 !important; /* Den klassiske grå farve */
    color: #f6f6f3 !important;            /* Lys sandfarve til pilen */
    border: none;
}

/* Hover-effekt der ændrer sig, når musen er over bollen */
#top-bolle:hover {
    transform: scale(1.1);
    background-color: #171717 !important; /* Bliver kulsort ved hover */
    color: #ddcdc8 !important;            /* Pilen skifter til den smukke sandfarve */
	border: 1px solid #555555 !important; /* En mørkere grå end selve bollen */
}
}

/* Hover-effekt der gør bollen lidt større når musen er over */
#top-bolle:hover {
    transform: scale(1.1);
}

/* Grundlæggende styling for dine kollaps-overskrifter */
.btn-collapse {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* Giver luft mellem pilen og din tekst */
}

/* Lav pilen foran overskriften (Når den er ÅBEN) */
.btn-collapse::before {
    content: "▼"; /* En flot, fyldt pil der peger nedad */
    font-size: 0.7em; /* Gør pilen en smule mindre end teksten */
    transition: transform 0.2s ease; /* Gør rotationen glidende */
    color: #808080; /* Matcher din grå tekstfarve */
}

/* Rotér pilen, når elementet er LUKKET */
.btn-collapse.collapsed::before {
    transform: rotate(-90deg); /* Drejer pilen, så den peger mod højre */
}