/* =========================================
   GLOBAL VARIABLES
   English: Define global colors and settings.
   Danish: Definer globale farver og indstillinger.
   ========================================= */
:root {
    --bg-dark: #1a1a1a;       /* Main dark background */
    --text-light: #ffffff;    /* Main text color */
    --text-muted: #b3b3b3;    /* Standard muted text */
    --text-lighter: #e0e0e0;  /* Lighter gray for project text */
    --accent-yellow: #fceea7; /* The specific yellow */
    --card-border: rgba(255, 255, 255, 0.2);
}

/* English: Forces the scrollbar to always show to prevent the page from jumping.
   Danish: Tvinger rullebjælken til altid at vises for at forhindre siden i at hoppe.
*/
html {
    overflow-y: scroll;
}

/* English: Main body settings (font, background color, text color).
   Danish: Hovedindstillinger for body (skrifttype, baggrundsfarve, tekstfarve).
*/
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =========================================
   SHARED STYLES (Header & Buttons)
   ========================================= */

/* English: Styling for the top logo area.
   Danish: Styling af det øverste logo-område.
*/
.logo-area {
    padding-top: 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 2rem;
}

/* --- BUTTON STYLES --- */

/* English: Solid yellow button style (used for Resume, Submit).
   Danish: Massiv gul knap-stil (bruges til CV, Send).
*/
.btn-resume, .btn-filled {
    background-color: var(--accent-yellow);
    color: #000;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 4px;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

/* English: Hover effect for solid buttons (lifts up and adds shadow).
   Danish: Hover-effekt for massive knapper (løfter sig og tilføjer skygge).
*/
.btn-resume:hover, .btn-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(252, 238, 167, 0.3);
    background-color: #fff;
    color: #000;
}

/* English: Transparent button with yellow border style.
   Danish: Gennemsigtig knap med gul kant-stil.
*/
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--accent-yellow);
    color: var(--text-light);
    padding: 10px 30px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

/* English: Hover effect for outline buttons (fills with yellow).
   Danish: Hover-effekt for kant-knapper (fyldes med gult).
*/
.btn-outline:hover {
    background-color: var(--accent-yellow);
    color: var(--bg-dark);
}

/* =========================================
   HOMEPAGE SPECIFIC
   ========================================= */

/* English: Layout for the main content area on the homepage.
   Danish: Layout for hovedindholdet på forsiden.
*/
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* English: Styling for the "Hello" text.
   Danish: Styling af "Hej"-teksten.
*/
.hello-text {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* English: Sets the color of the waving hand emoji.
   Danish: Sætter farven på vinke-emojien.
*/
.wave-emoji {
    color: #ffd700;
}

/* English: Main large title styling (your name).
   Danish: Stor hovedtitel-styling (dit navn).
*/
h1.name-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* English: Grey description text paragraph.
   Danish: Gråt beskrivelsestekst-afsnit.
*/
.description {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 90%;
}

/* English: Styling for the square navigation cards (Projects, About, etc.).
   Danish: Styling af de firkantede navigationskort (Projekter, Om mig, osv.).
*/
.grid-card {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
    color: var(--text-light);
}

/* English: Hover effect for navigation cards (yellow border and text).
   Danish: Hover-effekt for navigationskort (gul kant og tekst).
*/
.grid-card:hover {
    border-color: var(--accent-yellow);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-yellow);
}

/* English: Styling for the icons inside the cards.
   Danish: Styling af ikonerne inde i kortene.
*/
.card-icon {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* English: Text styling inside the cards.
   Danish: Tekst-styling inde i kortene.
*/
.card-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* English: Footer area styling (spacing).
   Danish: Footer-område styling (afstand).
*/
.social-footer {
    padding-bottom: 2rem;
    margin-top: auto;
}

/* English: Round social media icons style.
   Danish: Runde sociale medier-ikon stil.
*/
.social-icon {
    color: var(--bg-dark);
    background-color: #333;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 8px;
    font-size: 0.9rem;
    transition: 0.3s;
    text-decoration: none;
    color: #bbb;
}

/* English: Hover effect for social icons.
   Danish: Hover-effekt for sociale ikoner.
*/
.social-icon:hover {
    background-color: var(--accent-yellow);
    color: #000;
}

/* =========================================
   ABOUT PAGE SPECIFIC
   ========================================= */

/* English: Profile picture styling (shadow and width).
   Danish: Profilbillede-styling (skygge og bredde).
*/
.profile-pic {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* English: Large headline styling for About page.
   Danish: Stor overskrift-styling til Om mig-siden.
*/
.headline {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--text-light);
}

/* English: Paragraph text styling in About section.
   Danish: Afsnitstekst-styling i Om mig-sektionen.
*/
.body-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    text-align: justify;
}


/* =========================================
   CONTACT PAGE SPECIFIC
   ========================================= */

/* English: Contact page main title.
   Danish: Kontakt-side hovedtitel.
*/
.contact-title {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* English: Styling for the large clickable email link.
   Danish: Styling af det store klikbare email-link.
*/
.contact-email {
    font-size: 2rem;
    color: var(--accent-yellow) !important;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

/* English: Hover effect for the email link (turns white).
   Danish: Hover-effekt for email-linket (bliver hvidt).
*/
.contact-email:hover {
    color: #fff !important;
}

/* English: Subtext under the contact email.
   Danish: Undertekst under kontakt-emailen.
*/
.contact-subtext {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Custom Input Styles (Line only) */

/* English: Styling for form labels (Name, Email, etc.).
   Danish: Styling af formular-etiketter (Navn, Email, osv.).
*/
.custom-label {
    color: var(--accent-yellow) !important;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* English: Styling for input fields (transparent with bottom border).
   Danish: Styling af input-felter (gennemsigtig med bundkant).
*/
.custom-input {
    background-color: transparent !important;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    border-radius: 0;
    color: white !important;
    padding: 10px 0;
}

/* English: Focus effect for input fields (yellow border).
   Danish: Fokus-effekt for input-felter (gul kant).
*/
.custom-input:focus {
    background-color: transparent !important;
    box-shadow: none;
    border-color: var(--accent-yellow);
}

/* =========================================
   PROJECTS PAGE SPECIFIC
   ========================================= */

/* English: Project image styling (fit, border, transition).
   Danish: Projektbillede-styling (tilpasning, kant, overgang).
*/
.project-image-wrapper img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    border: 1px solid var(--card-border);
}

/* English: Hover effect for project images (zoom slightly).
   Danish: Hover-effekt for projektbilleder (zoomer lidt).
*/
.project-image-wrapper img:hover {
    transform: scale(1.02);
    border-color: var(--accent-yellow);
}

/* English: Spacing for each project row.
   Danish: Afstand til hver projektrække.
*/
.project-row {
    padding: 20px 0;
}

/* English: Description text for projects.
   Danish: Beskrivelsestekst til projekter.
*/
.project-description {
    color: var(--text-lighter);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* English: Fixes layout order on mobile screens for reversed rows.
   Danish: Retter layout-rækkefølgen på mobilskærme for omvendte rækker.
*/
@media (max-width: 991px) {
    .project-row--reverse {
        flex-direction: column;
    }
    .project-row--reverse .col-lg-6 {
        order: unset !important;
    }
}

/* =========================================
   SKILLS / EXPERIENCE SECTION
   ========================================= */

/* English: Alignment wrapper for the skills section.
   Danish: Justerings-wrapper til færdigheds-sektionen.
*/
.skills-wrapper {
    text-align: left;
}

/* English: Title for skill categories (e.g. Web Development).
   Danish: Titel til færdighedskategorier (f.eks. Webudvikling).
*/
.skill-title {
    color: var(--accent-yellow);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    display: block;
}

/* English: Styling for individual skill tags/badges.
   Danish: Styling af individuelle færdigheds-tags/badges.
*/
.skill-tag {
    display: inline-block;
    border: 1px solid var(--card-border);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: default;
}

/* English: Hover effect for skill tags (turns yellow).
   Danish: Hover-effekt for færdigheds-tags (bliver gule).
*/
.skill-tag:hover {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    transform: translateY(-2px);
}

/* UNIVERSAL HOVER TOOLTIPS */

/* English: Sets up the element to support a tooltip.
   Danish: Klargør elementet til at understøtte et tooltip.
*/
.skill-tooltip {
    position: relative;
    cursor: help;
}

/* English: The actual tooltip popup box styling.
   Danish: Styling af selve tooltip-popup boksen.
*/
.skill-tooltip:hover::after {
    content: attr(data-level); /* Grabs text from HTML */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-yellow);
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1000;
    pointer-events: none;
}

/* English: The small arrow pointing down from the tooltip.
   Danish: Den lille pil, der peger ned fra tooltippet.
*/
.skill-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--accent-yellow) transparent transparent transparent;
    z-index: 1000;
}

/* =========================================
   NEW ADDITIONS
   ========================================= */

/* English: Language switcher positioning (top right corner).
   Danish: Sprogvælger positionering (øverste højre hjørne).
*/
.lang-switch {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1000;
    font-size: 0.9rem;
    font-weight: 600;
}

/* English: Links inside the language switcher.
   Danish: Links inde i sprogvælgeren.
*/
.lang-switch a {
    text-decoration: none;
    color: var(--text-muted);
    margin-left: 10px;
    transition: color 0.3s ease;
}

/* English: Hover effect for language links.
   Danish: Hover-effekt for sprog-links.
*/
.lang-switch a:hover {
    color: var(--text-light);
}

/* English: Active state for the selected language (yellow and non-clickable).
   Danish: Aktiv tilstand for det valgte sprog (gul og ikke-klikbar).
*/
.lang-switch a.active {
    color: var(--accent-yellow);
    pointer-events: none;
}

/* English: Forces "Technologies" text to be yellow instead of grey.
   Danish: Tvinger "Technologies" tekst til at være gul i stedet for grå.
*/
.technologies .text-muted {
    color: var(--accent-yellow) !important;
}