/* ==========================================================================
   1. GLOBALE VARIABLER & GRUNDINDSTILLINGER
   ========================================================================== */
:root {
    --bg-color: #235789;        /* Marineblå sidebaggrund */
    --text-color: #333333;      /* Mørk tekst i kasserne */
    --accent-color: #235789;    /* Marineblå til overskrifter og knapper */
    --card-bg: #ffffff;         /* Helt hvide kasser */
    --tag-bg: #e2e8f0;          /* Diskret lysegrå baggrund til tags */
    --tag-text: #2d3748;        /* Mørk tekst på tags */
    --input-bg: #f8fafc;        /* Lys baggrund i formularfelter */
    --input-border: #cbd5e0;    /* Lysegrå kant på felter */
    --border-radius: 8px;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    line-height: 1.45; 
    padding: 20px; 
}

.site-wrapper { 
    max-width: 1200px; 
    margin: 0 auto; 
}

p {
    margin-bottom: 12px; 
}

p:last-child {
    margin-bottom: 0; 
}

/* ==========================================================================
   2. TYPOGRAFI & LINKS
   ========================================================================== */
h2 { 
    color: var(--accent-color); 
    font-size: 1.5rem; 
    margin-top: 0; 
    margin-bottom: 10px; 
}

a { 
    color: var(--accent-color); 
    text-decoration: none; 
    font-weight: 500; 
}

a:hover { 
    text-decoration: underline; 
}

hr { 
    border: 0; 
    height: 1px; 
    background: var(--tag-bg); 
    margin: 12px 0; 
}

/* ==========================================================================
   3. KASSER & FORMATERING AF GAMLE TXT-FILER
   ========================================================================== */
.card { 
    background-color: var(--card-bg); 
    border-radius: var(--border-radius); 
    padding: 24px; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
}

.tag { 
    display: inline-block; 
    background-color: var(--tag-bg); 
    color: var(--tag-text); 
    padding: 4px 10px; 
    border-radius: 4px; 
    font-size: 0.85rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
}

/* CV-Grid: max-content og nowrap tvinger årstallene til at stå perfekt */
.CV-wrapper { 
    display: grid; 
    grid-template-columns: max-content 1fr; 
    gap: 15px; 
    padding: 8px 0; 
    border-bottom: 1px solid #f0f0f0; 
    align-items: baseline; 
}

.CV-wrapper:last-child { 
    border-bottom: none; 
}

.CV-wrapper > div:first-child { 
    font-weight: bold; 
    color: var(--accent-color); 
    white-space: nowrap; 
}

/* Tvinger tekst/jobbeskrivelse til at udnytte den fulde bredde af kassen */
.CV-wrapper > div:last-child { 
    width: 100%; 
}

/* ==========================================================================
   4. FORMULAR
   ========================================================================== */
form { 
    display: flex; 
    flex-direction: column; 
}

label { 
    margin-bottom: 4px; 
    font-weight: 600; 
    font-size: 0.95rem; 
}

input[type="text"], 
input[type="email"], 
textarea { 
    padding: 10px 12px; 
    margin-bottom: 12px; 
    border: 1px solid var(--input-border); 
    border-radius: 4px; 
    font-family: inherit; 
    font-size: 1rem; 
    background-color: var(--input-bg); 
    color: var(--text-color);
    width: 100%; 
    resize: none;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus { 
    outline: none; 
    border-color: var(--accent-color); 
    background-color: #fff; 
}

input[type="submit"], button { 
    background-color: var(--accent-color); 
    color: #fff; 
    border: none; 
    padding: 12px 20px; 
    border-radius: 4px; 
    font-size: 1rem; 
    cursor: pointer; 
    font-weight: bold; 
    transition: opacity 0.2s, background-color 0.2s; 
    margin-top: 4px;
}

input[type="submit"]:hover, button:hover { 
    background-color: #163859; 
}

.h-pot { 
    display: none !important; 
}

/* ==========================================================================
   5. NAVIGATION (Hovedmenu - Ekstra kompakt pille-design til mobil)
   ========================================================================== */
.main-header { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 6px 8px; 
    margin-top: -10px; 
    margin-bottom: 12px; 
}

.main-header > div { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 6px 8px; 
}

.main-header div { 
    width: auto; 
}

/* De almindelige "slukkede" menupunkter */
.main-header a { 
    display: block; 
    padding: 6px 14px; 
    color: #ffffff; 
    font-weight: 600; 
    font-size: 0.95rem; 
    border-radius: 20px; 
    background-color: rgba(255, 255, 255, 0.12); 
    transition: all 0.2s ease; 
}

.main-header a:hover { 
    background-color: rgba(255, 255, 255, 0.25); 
    transform: scale(0.96); 
    text-decoration: none;
}

/* Automatisk fremhævning af den aktive side (Hvid pille med mørkeblå tekst) */
.page-index .main-header a[href*="index.php"],
.page-cv .main-header a[href*="cv.php"],
.page-speak .main-header a[href*="speak.php"],
.page-nyt .main-header a[href*="nyt.php"],
.page-links .main-header a[href*="links.php"],
.page-kontakt .main-header a[href*="kontakt.php"] {
    background-color: #ffffff; 
    color: var(--accent-color); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: default;
    pointer-events: none; 
}

/* ==========================================================================
   6. SOCIALE MEDIER
   ========================================================================== */
.main-footer { 
    text-align: center; 
    padding: 20px 0; 
    margin-top: 10px; 
}

.social-media { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.social-media a img { 
    width: 40px; 
    height: 40px; 
    transition: transform 0.2s; 
    opacity: 0.8;
}

.social-media a:hover img { 
    transform: scale(1.15); 
    opacity: 1; 
}

/* ==========================================================================
   7. STYRING AF SKÆRMSTØRRELSER (Desktop vs Mobil)
   ========================================================================== */

/* MOBIL (op til 899px): Skjul alt, vis kun menuen + den valgte kasse */
@media (max-width: 899px) {
    .main-header { gap: 4px; }
    .main-header a { 
        padding: 5px 8px; 
        font-size: 0.80rem; 
    }

    .CV-wrapper { 
        grid-template-columns: 1fr; 
        gap: 2px; 
    }
    
    .card { display: none; }
    
    /* Viser kassen som almindelig blok (bevarer alt oprindeligt design), men giver den minimumshøjde */
    .page-index .card-profil,
    .page-cv .card-cv,
    .page-speak .card-speak,
    .page-nyt .card-nyt,
    .page-links .card-links,
    .page-kontakt .card-kontakt {
        display: block;
        min-height: 80dvh; /* Sætter højde uden at ødelægge layoutet inde i kassen */
    }
}
/* MELLEM SKÆRM (900px - 1299px): Låst til præcis 2 kolonner */
@media (min-width: 900px) and (max-width: 1299px) {
    .main-header { display: none !important; }
    
    .grid-container { 
        display: grid; 
        gap: 20px; 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .card { display: block !important; }
}

/* BRED SKÆRM (1300px og op): Låst til præcis 3 kolonner */
@media (min-width: 1300px) {
    .main-header { display: none !important; }
    
    .grid-container { 
        display: grid; 
        gap: 20px; 
        grid-template-columns: repeat(3, 1fr); 
    }
    
    .card { display: block !important; }
}