/* ==========================================================================
   1. GLOBALE REGLER (Nedarves automatisk til hele hjemmesiden)
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Glidende bevægelse ved klik på tidslinje */
}

body, table, td, th {
    font-family: verdana, sans-serif; 
    font-size: 14px;                  
    font-weight: normal; 
    line-height: 1.4;                 
    color: #000;                      /* KLAR: Almindelig tekst er nu kulsort overalt */
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: url("/images/bg.png");
    background-repeat: repeat-y;
    background-position: center;
    background-color: #CBBD93;
} 

/* GLOBALE TEKSTAFSNIT - Gælder for alle fortællinger på hele siden */
p {
    margin: 10px 0 15px 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: justify; /* KLAR: Almindelig brødtekst er nu snorlige i begge sider overalt! */
}

/* GLOBALE LINKS (Alle links på hele siden) */
a {
    color: #000;                      /* Links er sorte som standard */
    text-decoration: underline;       /* KLAR: Links er altid understreget */
} 

a:hover {
    color: #0066cc;                   /* KLAR: Links bliver blå ved hover */
    text-decoration: underline;
} 

a:active {
    color: #000;
}

/* OVER- OG SKILLELINJER */
h2 {
    font-weight: bold; 
    font-size: 16px; 
    color: #000; 
} 

hr {
    border: 0;
    border-top: 1px solid #000;
} 

hr.blue {
    border-top: 1px solid #0066cc;
}


/* ==========================================================================
   2. BILLEDER (Billed-rammer og floats)
   ========================================================================== */
img {
    border: 2px solid #000;
    border-radius: 10px;
    margin: 2px;
}

.top-logo {
    border: 2px solid #000;  /* En flot kant i dit Anakin-tema */
    border-radius: 10px;     /* KLAR: Giver de lækre, bløde og rundede hjørner */
    width: auto;             /* Slipper logoet fri, så det vises i sin naturlige bredde */
    height: auto;            /* Slipper logoet fri, så det vises i sin naturlige højde */
    display: block;
    margin: 0 auto;          /* Centrerer logoet perfekt under din topmenu */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Giver et super flot, diskret løft fra den hvide plade */
}

.img-right {
    float: right;
    border-radius: 10px 40px;
    margin: 10px;
    width: 212px;
    height: 212px;
}

.img-left {
    float: left;
    border-radius: 40px 10px;
    margin: 10px;
    width: 212px;
    height: 212px;
}

/* ==========================================================================
   3a. TOPMENU (Hovednavigationen helt i toppen)
   ========================================================================== */
.topmenu-container {
    font-size: 15px;          
    padding: 12px 0 0 0;    /* Ingen bund-padding herfra */
    text-align: center;       
    background-color: transparent; 
    margin-bottom: 0px;     /* Ingen bund-margin der skubber logoet */
}

.topmenu-link {
    color: #333;              
    font-weight: bold;
    padding: 0 12px;
    text-decoration: none;    /* Fjerner den faste understregning KUN i topmenuen */
    transition: color 0.2s;
}

.topmenu-link:hover {
    color: #0066cc;           
    text-decoration: none;    
}

.topmenu-skiller {
    color: #a3956b;
}

/* ==========================================================================
   3b. UNDERMENU (Din toptunede submenu.php)
   ========================================================================== */
.undermenu-container {
    font-size: 14px;
    padding: 0 0 4px 0;     /* Ingen top-padding herfra, der skubber mod logoet */
    text-align: center; 
    background-color: transparent; 
    margin-bottom: 5px;    
}
.undermenu-link {
    color: #000; /* Sort tekst */
    font-weight: bold;
    padding: 0 10px;
    text-decoration: none; /* Fjerner den faste understregning KUN i menuen */
    transition: color 0.2s;
}

.undermenu-link:hover {
    color: #0066cc; 
    text-decoration: underline; /* Understregningen dukker op når man hoover i menuen */
}

.undermenu-skiller {
    color: #a3956b; /* De små lodrette delestreger forbliver, så navnene ikke smelter sammen */
}

/* ==========================================================================
   4. BRØDKRUMMER (Det nye skråstreg/mappe-system)
   ========================================================================== */
.broedkrumme-container {
    font-size: 14px;
    padding: 10px 0;
    color: #000; /* Sat til sort, så hele stien matcher brødteksten */
    text-align: left;
}

.broedkrumme-aktiv {
    font-weight: bold;
}

.broedkrumme-skiller {
    border: 0;           /* KLAR: Stregen er fjernet 100%! */
    margin-bottom: 5px;  /* Bevarer lidt god, luftig afstand ned til teksten */
}

/* ==========================================================================
   5. REJSE-LAYOUT (2 spalter: Indhold vs Tidslinje)
   ========================================================================== */
.rejse-container {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.rejse-indhold {
    flex: 1;
}

.rejse-sektion {
    display: flex;
    gap: 20px; 
    margin-bottom: 60px; 
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.rejse-billede-boks {
    flex: 0 0 200px; /* Dit toptunede 200px billedformat */
}

.rejse-billede {
    width: 100%;
    height: auto;
    border: 2px solid #000;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: block;
}

.rejse-tekst-boks {
    flex: 1;
}

.rejse-overskrift-link {
    color: #0066cc;
    display: inline-block;
}

.rejse-overskrift-link:hover h3 {
    color: #004499;
}

.rejse-tekst-boks h3 {
    margin: 0 0 5px 0;
    font-size: 22px;
    color: #0066cc;
}

.rejse-sektion .aarstal-label {
    font-size: 13px;
    color: #888;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.rejse-sektion p {
    margin: 10px 0 0 0; /* Arver størrelse, line-height og justify fra globale p elementer */
}

/* ==========================================================================
   6. STØVET TIDSLINJE (Højre side - Sticky)
   ========================================================================== */
.tidslinje-spalte {
    flex: 0 0 100px;
    border-left: 1px solid #e0e0e0;
    position: relative;
    padding-left: 20px;
}

.tidslinje-fast {
    position: sticky;
    top: 20px;
}

.tidslinje-punkt {
    margin-bottom: 30px;
    position: relative;
    text-align: left;
}

.tidslinje-prik {
    position: absolute;
    left: -24px;
    top: 5px;
    width: 7px;
    height: 7px;
    background: #bbb;
    border-radius: 50%;
}

.tidslinje-link {
    font-weight: bold;
    color: #888;
    display: inline-block;
    transition: color 0.2s;
}

.tidslinje-link:hover {
    color: #0066cc;
}

/* ==========================================================================
   7. TEKST I BUNDEN (Den dæmpede person-tekst til højre)
   ========================================================================== */
.person-tekst {
    display: block;
    text-align: right;
    margin-top: 50px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.person-tekst a {
    font-weight: bold;
}

.person-tekst a:hover {
    color: #0066cc;
}
/* ==========================================================================
   8. AUTOMATISK KAPITEL-VÆLGER (I bunden af dine fortællinger)
   ========================================================================== */
.kapitel-vaelger-boks {
    font-size: 14px;                 /* Præcis samme størrelse som dine brødkrummer! */
    padding: 15px 0;
    margin-top: 50px;
    border-top: 1px dashed #a3956b;  /* En flot, dæmpet guldbrun stiplet linje */
    color: #000;                     /* Kulsort tekst */
    text-align: right;
}

.kapitel-vaelger-titel {
    margin-right: 15px;
}

.kapitel-vaelger-boks a {
    color: #000;                     /* Links er sorte som standard i brødkrummen */
    text-decoration: underline;
    font-weight: bold;
}

.kapitel-vaelger-boks a:hover {
    color: #0066cc;                  /* Skifter til din rolige blå farve ved hover */
    text-decoration: underline;
}