/*
Theme Name: Techathon One-Page
Author: Gemini
Description: A custom one-page theme for the Techathon event, based on the invitation design.
Version: 1.1
*/

/* ----- Google Fonts & Grundlæggende Styling ----- */
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;700&family=Roboto+Mono:wght@500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rubik+Dirt&family=Google+Sans+Code&family=Alumni+Sans+Pinstripe&family=Archivo+Black&family=Inter:wght@400;500;700&family=Roboto+Mono:wght@500&display=swap');
:root {
    --dark-purple: #2f1e40;
    --main-pink: #d9a0b1;
    --light-bg: #fdf6f3;
    --text-light: #ffffff;
    --text-dark: #3E387E;
    --header-height: 70px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: #333;
}

/* Forhindrer scroll når mobilmenu er åben */
body.mobile-nav-open {
    overflow: hidden;
}

/* Særlig klasse for monospace/tech-font */
.font-monospace {
    /*font-family: 'Roboto Mono', monospace;*/
    font-family: 'Google Sans Code', monospace;
    /*text-transform: uppercase;  Gør teksten til store bogstaver som i eksemplet */
    letter-spacing: 0.5px;   /* Giver en smule ekstra luft mellem bogstaverne */
    font-weight: 500;
}
/* Særlig klasse for Pinstripe-fonten */
.font-pinstripe {
    font-family: 'Alumni Sans Pinstripe', sans-serif;
    font-weight: 900; /* Denne font har typisk kun én vægt */
    letter-spacing: 1.5px; /* Lidt ekstra luft passer godt til stilen */
}
.font-size-medium {
    font-size: clamp(1rem, 4vw, 2.0rem);
    font-style:normal;
	
}
/* ----- Hero Sektion (Uændret) ----- */
.hero-section {
    height: 100vh;
    background-image: url('hero-background3.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-dark);
}

.hero-content h1 {
    font-family: 'Michroma', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 10vw, 5rem); /* Responsive font size */
    margin: 0;
    font-style: normal;
}
.hero-content h2 {
    font-family: 'Rubik Dirt', monospace;
    font-size: clamp(2rem, 8vw, 4rem); /* Responsive font size */
    margin: 0;
    margin-top: 10px;
    font-weight:300;
    /*letter-spacing: 2px;*/
}

.hero-content .event-date {
    font-family: 'Alumni Sans Pinstripe', sans-serif;
    font-size: clamp(3.8rem, 8vw, 1.8rem);
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}
.hero-content .join-text {
    font-size: clamp(3.6rem, 8vw, 3.0rem);
    font-family: 'Alumni Sans Pinstripe', sans-serif;
    font-weight: 900;
    margin: 0;
}
h1, h2,  .header-info .title {
    font-family: 'Rubik Dirt', monospace;
    font-weight:300;
    font-size: clamp(2rem, 5vw, 3rem); /* Responsive font size */

    /*letter-spacing: 2px;*/
 /*   font-family: 'Archivo Black', sans-serif; /* Ændret til Archivo Black */
}

.hero-cta-btn {
    display: inline-block;
    margin-top: 35px;
    padding: 12px 30px;
    border: 2px solid var(--text-dark);
    border-radius: 5px;
    color: var(--text-dark);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-cta-btn:hover {
    background-color: var(--text-light);
    color: var(--dark-purple);
}

/* ----- Techathon Formular Styling ----- */

.techathon-form {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.techathon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* Afstand mellem felter i en række */
    margin-bottom: 24px;
}

.techathon-field {
    flex: 1; /* Får felter til at dele pladsen ligeligt */
    min-width: 250px; /* Sikrer at felter ikke bliver for smalle */
    display: flex;
    flex-direction: column;
}

.techathon-alert{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff}
.techathon-alert--ok{border-color:#39a96b}
.techathon-alert--err{border-color:#e23d3d}
.techathon-alert--wait { border-color: #D39800; } /* warm amber for waitlist */
.techathon-feedback { margin-bottom: 12px; }
/* Gør at et felt kan fylde hele rækken */
.techathon-field.full {
    flex-basis: 100%;
}

.techathon-field label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark-purple);
    margin-bottom: 8px;
}

.techathon-field input[type="text"],
.techathon-field input[type="email"],
.techathon-field input[type="tel"],
.techathon-field select {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #333;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box; /* Vigtigt for padding og border */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Styling når et felt er aktivt (focus) */
.techathon-field input:focus,
.techathon-field select:focus {
    outline: none;
    border-color: var(--main-pink);
    box-shadow: 0 0 0 3px rgba(217, 160, 177, 0.3);
}

/* Custom pil til select/dropdown */
.techathon-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.7rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Styling af samtykke-checkbox */
.techathon-field.consent label {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 0.95rem;
    color: #444;
}

.techathon-field.consent input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    margin-right: 12px;
    accent-color: var(--dark-purple); /* Giver checkmarket en pæn farve */
}

.techathon-field.consent .hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 6px;
    padding-left: 30px; /* Juster efter checkbox + margin */
}

/* Knappen */
.techathon-form button[type="submit"] {
    width: 100%;
    padding: 14px 20px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.1rem;
    color: var(--text-light);
    background-color: var(--dark-purple);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
    margin-top: 16px;
}

.techathon-form button[type="submit"]:hover {
    background-color: var(--main-pink);
    color: var(--dark-purple);
}

/* Responsivt design for mobil */
@media (max-width: 768px) {
    .techathon-row {
        flex-direction: column;
        gap: 0; /* Fjerner gap, da vi bruger margin på felter */
    }
    .techathon-field {
        margin-bottom: 20px;
    }
}
/* ----- Sticky Header / Navigation ----- */
.sticky-header {
    position: fixed; top: 0; left: 0;
    width: 100%; z-index: 1000;
    height: var(--header-height);
    background-color: var(--dark-purple);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(-100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.sticky-header.visible { opacity: 1; transform: translateY(0); }

.header-content-wrapper {
    max-width: 1200px; margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.header-info .title-link { text-decoration: none; color: var(--text-light); }
.header-info .title { 
/*	font-family: 'Montserrat', sans-serif; 
	font-weight: 700; 
*/	font-family: 'Michroma', sans-serif;
	font-weight: 400;
	font-size: 1.5rem; 
}
.main-nav ul { margin: 0; padding: 0; list-style: none; display: flex; }
.main-nav ul li { margin: 0 15px; }
.main-nav ul li a { color: var(--text-light); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
.main-nav ul li a:hover { color: var(--main-pink); }
.signup-btn {
    background-color: var(--main-pink);
    color: var(--dark-purple);
    padding: 10px 25px; border-radius: 5px;
    text-decoration: none; font-weight: 700;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.signup-btn:hover { background-color: var(--text-light); }

/* ----- Mobil Navigation ----- */
.hamburger-btn {
    display: none; /* Skjult på desktop */
    background: transparent; border: none;
    cursor: pointer; padding: 10px; 
    z-index: 1010; /* Sørger for at knappen er over alt andet */
    position: relative; /* Nødvendig for z-index */
}
.hamburger-btn span {
    display: block; width: 25px; height: 3px;
    background-color: var(--text-light); margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-nav {
    display: flex; /* Ændret fra none for at kunne bruge opacity/visibility */
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; /* Brug 100vh for fuld skærmhøjde */
    background-color: var(--dark-purple); /* Din baggrundsfarve */
    
    flex-direction: column; 
    justify-content: center; /* Centrerer stadig, men nu korrekt */
    align-items: center;
    
    /* NYT: Styrer synlighed med opacity for en pænere overgang */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999; /* Lægger sig lige under hamburger-knappen */
}

/* NYT: Klasse der gør menuen synlig */
body.mobile-nav-open .mobile-nav { 
    opacity: 1;
    visibility: visible;
}

.mobile-nav ul { 
    list-style: none; padding: 0; text-align: center; 
}
.mobile-nav ul li { margin: 20px 0; }
.mobile-nav ul li a { 
    color: var(--text-light); text-decoration: none; 
    font-size: 1.8rem; font-family: 'Montserrat'; 
}
.mobile-nav .mobile-signup-btn { margin-top: 30px; }

/* Hamburger 'X' animation */
body.mobile-nav-open .hamburger-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.mobile-nav-open .hamburger-btn span:nth-child(2) { opacity: 0; }
body.mobile-nav-open .hamburger-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }



/* ----- WordPress Block Styling & Sektioner ----- */
/* Fuld bredde sektioner */
.wp-block-group > .wp-block-group__inner-container {
    max-width: 900px;   /* Sætter den maksimale bredde for dit indhold */
    margin-left: auto;  /* Centrerer indholdet horisontalt */
    margin-right: auto;
    padding-left: 20px; /* Giver lidt luft i siderne på mobil */
    padding-right: 20px;
    width: 100%;        /* Sørger for at den opfører sig korrekt */
}
/* Sektioner, der skal fylde hele skærmens højde */
.full-height-section {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
/* Sørg for at den indre container kan vokse */
.full-height-section > .wp-block-group__inner-container {
    width: 100%;
}

.site-footer {
    text-align: center; padding: 20px;
    background-color: var(--dark-purple);
    color: var(--text-light); font-size: 0.9rem;
}

.wp-block-table td,
.wp-block-table th{
    border: none;
}

/* ----- Responsive Media Query for mobil ----- */
@media (max-width: 900px) {
    .main-nav, .desktop-btn {
        display: none; /* Skjul desktop menu og knap */
    }
    .hamburger-btn {
        display: block; /* Vis hamburger knap */
    }
}
/* hide reCaptcha icon*/
.grecaptcha-badge { visibility: hidden !important; }

/* * Custom Tabel Layouts
 *---------------------------------------------------*/

/* Tvinger en tabel til at respektere de angivne kolonnebredder.
   Uden 'table-layout: fixed' vil indholdet ofte overstyre bredden. */
.wp-block-table.has-fixed-layout {
    table-layout: fixed;
    width: 100%;
}

/* Specifik klasse for 20% - 60% - 20% layout */
.tabel-layout-20-60-20 th:nth-child(1),
.tabel-layout-20-60-20 td:nth-child(1) {
    width: 20%;
}

.tabel-layout-20-60-20 th:nth-child(2),
.tabel-layout-20-60-20 td:nth-child(2) {
    width: 40%;
}

.tabel-layout-20-60-20 th:nth-child(3),
.tabel-layout-20-60-20 td:nth-child(3) {
    width: 40%;
}
/* ----- Section Jumper Pil (Avanceret) ----- */
/* ----- Section Jumper Pile (Op og Ned) ----- */
#section-jumper-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Afstand mellem de to pile */
}

.jumper-btn {
    width: 44px;
    height: 44px;
    background-color: var(--dark-purple);
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.jumper-btn:hover {
    background-color: var(--main-pink);
}

.jumper-btn svg {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}

/* Klasse til at skjule en knap */
.jumper-btn.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none; /* Gør knappen ikke-klikbar når den er skjult */
}

/* Contact Modal */
.ta-modal{position:fixed;inset:0;display:none;z-index:9999}
.ta-modal[aria-hidden="false"]{display:block}
.ta-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.ta-modal__dialog{
  position:relative; margin:6vh auto 0; width:min(760px,92vw);
  background:var(--surface); color:var(--brand-ink);
  border-radius:16px; box-shadow:var(--shadow); padding:20px 20px 24px;
  border:1px solid var(--line);
}
.ta-modal__title{margin:0 0 8px; color:var(--brand-primary)}
.ta-modal__content > :first-child{margin-top:0}
.ta-modal__content > :last-child{margin-bottom:0}
.ta-modal__close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border-radius:999px; border:1px solid var(--line); background:#fff;
  cursor:pointer; font-size:22px; line-height:1;
}
@media (max-width: 600px){
  .ta-modal__dialog{margin-top:4vh; padding:16px}
}

.column-small-margin {
	margin: 0;
	margin-bottom:5px !important;
}