/* ==========================================================================
   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;                      /* 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; /* 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;       /* Links er altid understreget */
} 

a:hover {
    color: #0066cc;                   /* Links bliver blå ved hover */
} 

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, border-radius og margin arves automatisk fra det globale img tag herover */
    width: auto;             
    height: auto;            
    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 20px 10px 10px;
    margin: 10px;
    width: 212px;
    height: 212px;
	object-fit: cover;
}

.img-left {
    float: left;
    border-radius: 20px 10px 10px 10px;
    margin: 10px;
    width: 212px;
    height: 212px;
	object-fit: cover;
}

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

.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;     
    text-align: center; 
    background-color: transparent; 
    margin-bottom: 5px;    
}

.undermenu-link {
    color: #000; 
    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; 
}

.undermenu-skiller {
    color: #a3956b; 
}

/* ==========================================================================
   4. BRØDKRUMMER (Det nye skråstreg/mappe-system)
   ========================================================================== */
.broedkrumme-container {
    font-size: 14px;
    padding: 10px 0;
    color: #000; 
    text-align: left;
}

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

.broedkrumme-skiller {
    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; 
}

.rejse-billede {
    width: 100%;
    height: auto;
    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; 
}

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

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

/* ==========================================================================
   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;                 
    padding: 15px 0;
    margin-top: 50px;
    border-top: 1px dashed #a3956b;  
    color: #000;                     
    text-align: right;
}

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

.kapitel-vaelger-boks a {
    text-decoration: underline;
    font-weight: bold;
}

.kapitel-vaelger-boks a:hover {
    color: #0066cc;                  
}

/* ==========================================================================
   9. SCROLL-PROGRESS BAR (Læseindikator helt i toppen)
   ========================================================================== */
.scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px; 
    background-color: transparent; 
    z-index: 9999; 
}

.scroll-bar {
    height: 100%;
    background-color: #4a3e21; /* Din flotte mørkebrune link-farve */
    width: 0%; 
    transition: width 0.1s ease-out; 
}

/* ==========================================================================
   10. DEN STORE TIDSLINJE (Strømlinet design til tidslinje.php)
   ========================================================================== */
.samlet-tidslinje-container {
    margin-top: 40px; 
    position: relative;
}

/* Selve den lodrette tidslinje-streg */
.tidslinje-streg-container {
    border-left: 2px solid #a3956b; 
    margin-left: 40px; 
    padding-left: 30px; 
    position: relative;
}

/* Hvert enkelt historie-punkt - SAMLET OG RENSKET FOR GENTAGELSER */
.tidslinje-punkt {
    margin-bottom: 35px; 
    position: relative;
    text-align: left;
}

/* Årstallet ude til venstre for stregen */
.tidslinje-aarstal {
    position: absolute; 
    left: -85px; 
    top: 3px; 
    width: 45px; 
    text-align: right; 
    font-size: 13px; 
    font-weight: bold; 
    color: #000;
}

/* Den klassiske, rolige prik der sidder lige ovenpå stregen på rejsesider */
.tidslinje-prik {
    position: absolute;
    left: -24px;
    top: 5px;
    width: 7px;
    height: 7px;
    background: #bbb;
    border-radius: 50%;
}

/* Den store tidslinjes faste prik (tidslinje.php) */
.tidslinje-streg-container .tidslinje-prik {
    left: -36px; 
    top: 6px; 
    width: 10px; 
    height: 10px; 
    background: #4a3e21; 
}

/* Dato og kategori (fx 15. 07. 1998 | Karrieren) */
.tidslinje-metadata {
    font-size: 11px; 
    color: #888; 
    font-weight: bold; 
    display: block; 
    margin-bottom: 2px;
}

/* Linket til selve fortællingen - SAMLET OG RENSKET FOR GENTAGELSER */
.tidslinje-link {
    font-size: 16px; 
    font-weight: bold;
    color: #4a3e21;
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s;
}

.tidslinje-link:hover {
    text-decoration: underline;
    color: #0066cc;
}
/* Sørger for at historiernes indhold flugter perfekt og symmetrisk med menuerne */
.hovedindhold-felt {
    text-align: left;    /* Erstatter align="left" */
    vertical-align: top; /* Erstatter valign="top" */
    padding-top: 20px;   /* Giver god luft under brødkrummerne */
    padding-bottom: 30px;/* Giver god luft før bunden */
    padding-left: 0px;   /* Hiver teksten helt ud til venstre kant */
    padding-right: 0px;  /* Hiver teksten helt ud til højre kant */
}