/* styles.css */

/* Sikrer at bredde + padding ikke overstiger 100% */
* {
    box-sizing: border-box;
}

/* Definer CSS Variabler (Custom Properties) i :root */
:root {
    --standard-farve: #A5C931;
    --highlight-farve: #CCFF00;
    --visited-link-farve: #7D994E;
    
    /* Yderligere variabler for mørkt tema */
	--baggrunds-farve-dyb: #202020; /* body - Lidt lysere mørk grå */
    --form-baggrunds-farve: #303030; /* form, menu, indhold - Mellem mørk grå */
  	--input-baggrunds-farve: #202020; /* input */
    --tekst-farve-lys: #E0E0E0; /* generel form tekst */
    --tekst-farve-hvid: #FFF; /* input tekst */
    --tekst-farve-mork: #202020; /* knap tekst */
    --kant-farve-gra: #555; /* input kant */
    --radio-kant-ikke-valgt: #AAA; /* radio-knap kant */
}

/* Grundlæggende styling */
body {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    margin: 30px;
    background-color: var(--baggrunds-farve-dyb);
}

h1 {
    color: var(--tekst-farve-hvid); /* Hvid tekst i stedet for grøn */
    margin-top: 0;       /* Fjerner al luft op mod menuen */
    margin-bottom: 0; /* Gør afstanden ned til indholdet mindre */
}

/* --- Styling af Top Menu --- */
.top-menu {
    background-color: var(--form-baggrunds-farve); /* Samme farve som formularen */
    padding: 0 10px;
    border-bottom: 2px solid #333; /* En diskret kant i bunden */
    
    /* Flexbox får logo og links til at stå på linje */
    display: flex; 
    justify-content: space-between; /* Skubber logo til venstre, links til højre */
    align-items: center; /* Centrerer lodret */
    margin-bottom: 30px; /* Luft ned til overskriften */
}

.logo {
    font-weight: bold;
    font-size: 20px;
    color: var(--standard-farve); /* Din grønne standardfarve */
}

.menu-links {
    list-style: none; /* Fjerner prikker fra listen */
    margin: 0;
    padding: 0;
    display: flex; /* Lægger links ved siden af hinanden */
}

.menu-links li {
    margin-left: 20px; /* Luft mellem links */
}

.menu-links a {
    text-decoration: none; /* Fjerner understregning */
    color: var(--tekst-farve-lys);
    font-weight: bold;
    padding: 15px 10px; /* Gør klik-området lidt større */
    display: block;
    transition: color 0.3s;
}

/* Hover-effekt: Neon farve når musen er over */
.menu-links a:hover {
    color: var(--highlight-farve);
}

/* Den aktive side (den man er på) */
.menu-links a.active {
    color: var(--standard-farve);
    border-bottom: 2px solid var(--standard-farve); /* Lille streg under aktiv side */
}

/* Styling af form element */
form {
    background: var(--form-baggrunds-farve);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
    /* Generel tekstfarve i formularen (arves af ulabeled elementer) */
    color: var(--tekst-farve-lys);
}

/* Styling af indholdsbokse (til tekst-sider) */
.indhold-boks {
    background: var(--form-baggrunds-farve);
    padding: 30px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--tekst-farve-lys);
    max-width: 800px; /* Sørger for linjerne ikke bliver for lange at læse på PC */
    margin-bottom: 40px; /* Luft i bunden af siden */
    line-height: 1.6; /* Gør teksten nemmere at læse */
    border-left: 4px solid var(--standard-farve); /* Din grønne farve i venstre side */
}

/* Styling af overskrifter inde i boksen */
.indhold-boks h2, 
.indhold-boks h3 {
    color: var(--standard-farve);
    margin-top: 20px;
}

/* En lille skillelinje */
.indhold-boks hr {
    border: 0;
    height: 1px;
    background: #444;
    margin: 20px 0;
}

/* Styling af input grupper */
.input-gruppe {
    margin-bottom: 0px;
    padding: 10px 0;
}

.input-gruppe label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--standard-farve); /* Bruger standardfarve */
}

/* Styling af Tekst Input Feltet */
.input-gruppe input[type="number"],
.input-gruppe input[type="text"] {
    width: 100%;
  	max-width: 300px;
    padding: 10px 15px;
    border: 1px solid var(--kant-farve-gra);
    border-radius: 4px;
    background-color: var(--input-baggrunds-farve);
    color: var(--tekst-farve-hvid);
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Styling når feltet er i fokus (klikket på) */
.input-gruppe input[type="number"]:focus,
.input-gruppe input[type="text"]:focus {
    border-color: var(--standard-farve); /* Bruger standardfarve */
    box-shadow: 0 0 8px rgba(165, 201, 49, 0.6); /* Bruger standardfarve (hårdkodet RGBA pga. gennemsigtighed) */
    outline: none;
}

/* Styling af valgmulighederne (holder dem på samme linje) */
.initial-params {
    display: flex; /* Gør elementerne vandrette */
    gap: 20px;     /* Afstand mellem de tre elementer */
    align-items: flex-start; /* Sikrer elementer justeres øverst */
    margin-bottom: 0px;
}

/* Sørg for at input-grupper og fieldset fylder lige meget (valgfrit, men pænt) */
.initial-params .input-gruppe {
    flex: 1 1 30%; /* Tillad at vokse/skrumpe, startbase på 30% */
}

/* Sikrer, at input-felterne i .initial-params fylder bredden af deres flex-boks */
.initial-params .input-gruppe input[type="number"] {
    max-width: 100%; 
}

.initial-params .batteri-fieldset {
    flex: 1 1 40%; /* Giver denne gruppe lidt mere plads, da den indeholder flere radio-knapper */
    margin-top: 0; /* Fjern standard margin */
}
/* --- Strammer op på radioknap-grupperne --- */

/* 1. Kontrol af feltgruppen (fieldset) */
fieldset {
    /* Reducerer standard luft over/under feltgruppen */
    margin-top: 0px; 
  	padding-top: 0;
    margin-bottom: 5px;
}

/* 3. Reducerer luft omkring overskriften (Legend) */
/* Vi overskriver alle margins her, men farven beholdes */
fieldset legend {
    margin-top: 0px;    /* Tæt på toppen af feltgruppen */
    margin-bottom: 0px; /* Tæt på valgene */
	margin-left: 20px; /* Juster dette tal til din valgte værdi */
}

.valgmulighed {
    display: inline-block;
    margin-left: 20px;
    margin-right: 10px;
    padding: 2px 0;
}

/* Teksten for label for radio-knapperne */
.valgmulighed label {
    font-weight: normal;
    cursor: pointer;
    margin-left: 5px;
    transition: color 0.2s ease-in-out;
}

/* Styling af selve radio-knappen (den synlige cirkel) */
.valgmulighed input[type="radio"] {
    /* Skjul den standard browser-specifikke radio-knap */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Sæt størrelse og form for den nye 'knap' */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--radio-kant-ikke-valgt); /* Grå kant, når den IKKE er valgt */
    margin: 0 5px 0 0;

    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
    vertical-align: middle;
}

/* Styling af den VALGTE radio-knap */
.valgmulighed input[type="radio"]:checked {
    border-color: var(--highlight-farve); /* BRUG HIGHLIGHT-FARVEN TIL KANTEN */
    background-color: var(--standard-farve); /* Standardfarve for indre fyld */
    
    /* Giver radio-knappen et "kraftigere" skær, der matcher teksten */
    box-shadow: 0 0 5px 1px rgba(204, 255, 0, 0.9); /* Bruger highlight-farven (hårdkodet RGBA pga. gennemsigtighed) */
}

/* Styling af teksten (LABEL), når den tilhørende radio-knap er valgt */
.valgmulighed input[type="radio"]:checked + label {
    font-weight: bold;
    color: var(--highlight-farve); /* Highlight-farve */
}

/* --- Styling af Submit Knappen --- */

button[type="submit"] {
    background-color: var(--standard-farve); /* Standardfarve */
    color: var(--tekst-farve-mork); /* Mørk tekst for kontrast */
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s;
    margin-top: 10px;
}

button[type="submit"]:hover {
    background-color: var(--highlight-farve); /* Highlight-farve */
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.6); /* Bruger highlight-farven (hårdkodet RGBA pga. gennemsigtighed) */
}

/* Beholderen der styrer layoutet */
.layout-container {
    display: grid;
    /* '2fr 1fr' betyder: Venstre kolonne får 2 dele af pladsen, højre får 1 del */
    grid-template-columns: 2fr 1fr; 
    gap: 30px; /* Luft mellem indhold og nyheder */
    align-items: start; /* Sikrer at sidebaren ikke strækkes, hvis indholdet er langt */
    margin-bottom: 40px;
}

/* Højre kolonne (Sidebaren til nyheder) */
.sidebar-nyheder {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Luft mellem hver nyhedsboks */
}

/* Styling af den enkelte nyhedsboks */
.nyheds-kort {
    background: var(--form-baggrunds-farve);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--standard-farve); /* Din grønne farve i venstre side */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--tekst-farve-lys);
    font-size: 14px; /* Lidt mindre tekst i nyhederne */
}

.nyheds-kort h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--standard-farve);
    font-size: 16px;
}

.nyheds-dato {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    font-style: italic;
}

/* --- Styling af Footer --- */

.site-footer {
    /* Mørkere baggrund, for at adskille den fra indholdsboksene */
    background-color: var(--baggrunds-farve-dyb); 
    color: var(--tekst-farve-lys);
    padding: 30px 50px; /* Luft omkring indholdet */
    border-top: 3px solid var(--standard-farve); /* Grøn highlight i toppen */
    text-align: center;
    font-size: 14px;
    margin-top: 40px; /* Luft ned fra det øvrige indhold */
}

.site-footer p {
    margin-top: 0;
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--tekst-farve-lys);
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--highlight-farve); /* Neon farve ved hover */
}

/* Styling for almindelige links i hovedindholdet (udenfor specifikke klasser som .menu-links) */
a {
    color: var(--standard-farve); /* Sætter farven til din lyse limegrønne (#CCFF00) */
    text-decoration: underline; /* Valgfrit: Sæt understregning på, for at indikere det er et link */
    transition: color 0.3s;
}

/* Sørger for, at besøgte links har en mere afdæmpet farve */
a:visited {
    color: var(--visited-link-farve);
}

/* Hover-effekt: Kan evt. skifte til standardfarven ved hover */
a:hover {
    color: var(--highlight-farve);
}


/* --- RESPONSIVT DESIGN (Mobil) --- */
@media (max-width: 800px) {
    
    /* Mindre margin på hele siden, så vi udnytter pladsen */
    body {
        margin: 15px;
    }
  
    /* NYT: Mobil-menu styling */
    .top-menu {
        flex-direction: column; /* Stabler logo og links ovenpå hinanden */
        padding: 15px;
        align-items: flex-start;
    }

    .logo {
        margin-bottom: 10px;
    }

    .menu-links {
        flex-direction: column; /* Stabler links lodret */
        width: 100%;
    }

    .menu-links li {
        margin-left: 0;
        margin-bottom: 5px;
        width: 100%;
    }

    .menu-links a {
        padding: 10px 0;
        border-bottom: 1px solid #333;
        text-align: center; /* Gør menupunkter centreret på mobil */
    }
    
    /* --- Hovedlayout: Skift til én kolonne --- */
    .layout-container {
        grid-template-columns: 1fr; /* Kun én kolonne for indhold og sidebar */
        gap: 20px; /* Reduceret afstand på mobil */
    }
    
    /* Valgfrit: Stabler nyhedskortene lodret igen på de mindste skærme */
    .sidebar-nyheder {
        display: flex; /* Gør det simparet at stable dem lodret */
        flex-direction: column;
        gap: 15px;
    }

    /* Formularen skal fylde hele skærmbredden */
    form {
        display: block;
        width: 100%;
        padding: 15px;
    }

    /* --- Formular Input Justeringer --- */
   
    /* Gør input-felterne helt brede på mobil */
    .input-gruppe input[type="number"],
    .input-gruppe input[type="text"] {
        max-width: 100%; /* Fjerner begrænsningen på 300px på mobil */
    }
    
    /* Radio-knapperne: Justering for bedre touch-oplevelse */
    .valgmulighed {
        display: block;
        margin-right: 0;
        margin-left: 0; /* Fjerner margin i venstre side */
        margin-bottom: 8px;
        padding: 8px; /* Lidt mindre padding end før for at spare plads */
        /* Brug af calc for at sikre, at elementer ikke overløber */
        width: calc(100% - 16px); /* Fyld bredden minus margin */
    }
    
    .valgmulighed input[type="radio"] {
        /* Sørg for at radio-knappen stadig er let at klikke på */
        margin-right: 10px;
    }

    /* Gør send-knappen stor og nem at trykke på */
    button[type="submit"] {
        width: 100%;
        padding: 15px;
    }
  
	/* NY REGEL: Stak de tre elementer lodret på mobil */
    .initial-params {
        flex-direction: column; /* Gør elementerne lodrette */
        gap: 15px; /* Mindre afstand på mobil */
    }

    /* Valgmuligheder for batteriet skal have fuld bredde på mobil */
    .initial-params .batteri-fieldset {
        width: 100%;
        padding: 15px; /* Giver den plads til at ligne en mobilboks */
        margin-bottom: 0;
    }
}


/* Sørg for at Iframe (YouTube-videoen) fylder nyheds-kortet */
.nyheds-kort iframe {
    width: 100%;
    /* Du kan eventuelt justere højde-forholdet, hvis du ønsker det */
    aspect-ratio: 16 / 9; /* Sikrer 16:9 højde-bredde-forhold */
    height: auto;
}