/* ==========================================================================
   Textus Receptus - Centrale Stylesheet (tr.css)
   ========================================================================== */

/* --- 1. Globale Variabelen --- */
:root {
    --header-blue: rgb(12, 43, 68);
    --accent-gold-custom: rgb(215, 158, 90);
    --accent-gold-transparent: rgba(215, 158, 90, 0.4);
    --bg-cream: rgb(247, 242, 236);
}

/* --- 2. Basis & Typografie --- */
body {
    font-family: 'Gentium Book Plus', serif;
    background-color: var(--bg-cream);
    color: #2d241e;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* De vlaggen in de taalkeuze meten niet mee met de tekst ernaast.
   Die tekst is klein (10 à 11px, kleine kapitalen in Cinzel) en op 1em zou een
   vlag dus ook 11px worden — te klein om er nog een vlag in te herkennen, zeker
   tegen de donkerblauwe header. Vandaar hier een eigen, vaste maat. */
#currentFlag img.emoji,
.lang-item img.emoji,
.mobile-lang-item img.emoji {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

/* Het vlagje netjes midden tegenover de taalnaam zetten in plaats van op de
   tekstregel te laten zakken. */
#currentFlag {
    display: inline-flex;
    align-items: center;
}

.mockup-title {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: baseline;
    gap: 0.2em;
    flex-wrap: wrap;
}

/* Modifier voor hero-titels (h1): altijd 1 regel, schaalt fluïde mee met de viewport */
.hero-title {
    font-size: clamp(2rem, 1.1rem + 3.8vw, 4.25rem);
    letter-spacing: 0.05em;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.mockup-title span::first-letter {
    font-size: 1.5em;
    font-weight: 400; 
    margin-right: -0.05em;
    color: inherit;
    line-height: 0.8;
}

/* De standaard ruime leesopmaak (zoals op bronnen.html) */
.article-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #374151;
    text-align: justify;
}

.dropcap {
    float: left;
    font-family: 'Cinzel', serif;
    font-size: 4rem; /* Standaardgrootte */
    line-height: 0.8;
    padding-right: 0.85rem;
    color: var(--accent-gold-custom);
    margin-top: 0.2rem;
}

.article-subhead {
    font-family: 'Cinzel', serif;
    color: var(--header-blue);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

/* --- 3. Lay-out Blokken --- */
.hero-section {
    position: relative;
    background-color: var(--header-blue);
    background-image: linear-gradient(rgba(12, 43, 68, 0.85), rgba(12, 43, 68, 0.85)), 
                      url('images/old-map.png'), 
					  url('images/hero-bck.jpg');
    background-size: auto, cover;
    background-position: center;
    color: white;
    padding: 7rem 1.5rem;
    text-align: center;
    border-bottom: 3px solid var(--accent-gold-custom);
}

/* Tekst van vandaag, onder de ondertitel in de hero. Eén regel in een pil
   met goudrand; op een smal scherm drie regels onder elkaar. */
.dagtekst {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    max-width: 100%;
    padding: 0.55rem 1.25rem;
    border: 1px solid rgba(215, 158, 90, 0.7);
    border-radius: 999px;
    background-color: rgba(12, 43, 68, 0.55);
    color: white;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dagtekst[hidden] {
    display: none;
}

.dagtekst:hover,
.dagtekst:focus-visible {
    background-color: rgba(12, 43, 68, 0.85);
    border-color: var(--accent-gold-custom);
}

.dagtekst-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-gold-custom);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.dagtekst-label svg {
    width: 13px;
    height: 13px;
}

.dagtekst-scheiding {
    color: rgba(255, 255, 255, 0.35);
}

.dagtekst-grieks {
    font-family: 'Gentium Book Plus', serif;
    font-size: 1.15rem;
}

.dagtekst-ref span[aria-hidden] {
    color: var(--accent-gold-custom);
}

@media (max-width: 640px) {
    .dagtekst {
        flex-direction: column;
        border-radius: 0.75rem;
        padding: 0.65rem 1rem;
    }

    .dagtekst-scheiding {
        display: none;
    }
}

.content-card {
    background-color: white;
    border: 1.5px solid var(--accent-gold-transparent);
    border-radius: 12px;
    overflow: hidden;
    padding: 3rem;
    box-shadow: 0 4px 25px rgba(0,0,0,0.04);
}

/* --- 4. Navigatie & Taalmenu --- */
.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-gold-custom);
    transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.lang-dropdown {
    position: relative;
    cursor: pointer;
}

.lang-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-top: 3px solid #d79e5a;
    min-width: 180px;
    margin-top: 0.5rem;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.lang-dropdown.active .lang-menu {
    display: block;
}

.lang-item {
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.2s ease;
    color: #0c2b44;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.lang-item:hover {
    background-color: #f8fafc;
}

/* --- 4b. "Meer weten" dropdown (contentpagina's gebundeld) --- */
.more-dropdown {
    position: relative;
    cursor: pointer;
}

.more-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-top: 3px solid #d79e5a;
    min-width: 200px;
    margin-top: 0.5rem;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.more-dropdown.active .more-menu {
    display: block;
}

.more-dropdown-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.more-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #0c2b44;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    transition: background 0.2s ease;
}

.more-menu a:hover {
    background-color: #f8fafc;
}

.more-menu a.active {
    color: var(--accent-gold-custom);
}

/* --- 4c. Tool-knoppen (Bijbelstudie / Tekst van de dag) --- */
.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tool-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.tool-btn-primary {
    background-color: var(--accent-gold-custom);
    color: var(--header-blue);
}

.tool-btn-primary:hover {
    background-color: #c68d49;
}

.tool-btn-outline {
    background-color: transparent;
    border: 1px solid var(--accent-gold-custom);
    color: var(--accent-gold-custom);
}

.tool-btn-outline:hover {
    background-color: rgba(215, 158, 90, 0.15);
}

.tool-btn-lg {
    font-size: 12px;
    padding: 0.65rem 1.1rem;
    gap: 0.45rem;
}

.tool-btn-lg svg {
    width: 16px;
    height: 16px;
}

.mobile-tool-btn-lg {
    font-size: 13px;
    padding: 0.9rem 1rem;
}

.mobile-tool-btn-lg svg {
    width: 17px;
    height: 17px;
}

/* De taalcursussen dragen een letter van hun alfabet als icoon: Α en א.
   Zonder text-transform, anders maakt de hoofdletterstand van de knop er
   niets van, maar een alef heeft geen hoofdletter en een alfa is er al een. */
.tool-letter {
    font-family: 'Gentium Book Plus', serif;
    font-size: 1.35em;
    line-height: 1;
    text-transform: none;
    width: 1em;
    text-align: center;
    flex-shrink: 0;
}

/* --- 4c2. "Talen leren" dropdown ---
   Leent het uitklapmenu van "Meer weten" (.more-dropdown / .more-menu), maar
   staat rechts in de balk en klapt dus naar links uit. */
.learn-menu {
    left: auto;
    right: 0;
}

.learn-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.learn-menu .tool-letter {
    color: var(--accent-gold-custom);
}

/* --- 4d. Mobiel hamburgermenu --- */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: white;
    padding: 0.5rem;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.mobile-menu-toggle svg {
    width: 28px;
    height: 28px;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: var(--header-blue);
    z-index: 200;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    padding: 1.75rem 1.5rem;
}

.mobile-menu-panel.active {
    display: block;
}

.mobile-menu-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

.mobile-nav-link {
    display: block;
    padding: 0.85rem 0;
    color: white;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--accent-gold-custom);
}

.mobile-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    width: 100%;
}

.mobile-tool-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.mobile-lang-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mobile-lang-item:hover,
.mobile-lang-item.active {
    color: var(--accent-gold-custom);
}

/* --- 5. Footer --- */
.footer-link {
    transition: color 0.2s ease;
}
.footer-link:hover {
    color: var(--accent-gold-custom);
}
.footer-divider {
    color: #cbd5e1;
    user-select: none;
}

/* De verwijzing naar het psalmenproject: een ander project, dus stiller dan de
   links erboven en met een dun goudlijntje ervan gescheiden. */
.footer-promo {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    padding: 1rem 1rem 0;
    border-top: 1px solid rgba(215, 158, 90, 0.35);
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
}
.footer-promo a {
    color: var(--accent-gold-custom);
    font-style: normal;
    font-weight: 600;
}
.footer-promo a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   UITZONDERINGEN & PAGINA-SPECIFIEKE STIJLEN
   ========================================================================== */

/* --- Uitzondering: over.html (Compactere weergave) --- */
.article-text-compact p {
    font-size: 1rem;
    line-height: 1.7;
}
.article-text-compact .dropcap {
    font-size: 3.5rem;
    padding-right: 0.75rem;
}

/* --- Uitzondering: Portret/Afbeelding omlijsting (bronnen.html / erasmus.html) --- */
.portrait-frame {
    position: relative;
    padding: 10px;
    background: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.portrait-frame:hover {
    transform: scale(1.02);
}
.portrait-img-container {
    width: 100%;
    overflow: hidden;
    background: #f1f5f9;
}
.portrait-img-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}
.portrait-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--accent-gold-custom);
    pointer-events: none;
    z-index: 10;
}

/* --- Uitzondering: Lijsten (bronnen.html / faq.html) --- */
/* Gecentraliseerd van .source-group / .faq-item */
.content-group {
    border-left: 3px solid var(--accent-gold-custom);
    padding-left: 1.5rem;
    margin-bottom: 3rem;
}
.content-group h3 {
    font-family: 'Cinzel', serif;
    color: var(--header-blue);
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    letter-spacing: 0.05em;
}
.content-item {
    background: #f8fafc;
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}
.content-item:hover {
    border-color: var(--accent-gold-custom);
    background: white;
}
.content-item .title {
    color: #0c2b44;
    display: block;
    font-weight: bold;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
}
.content-item .author {
    color: #d79e5a;
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* --- Uitzondering: indexGem.html (Woord-popups en Strong's) --- */
.strongs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fef3c7;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}
.strongs-link:hover {
    background: #fde68a;
    transform: translateY(-1px);
}
.label-style {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af;
    margin-bottom: 0.25rem;
    font-family: 'Cinzel', serif;
}
.value-style {
    display: block;
    font-size: 1rem;
    color: #374151;
    margin-bottom: 1rem;
}

/* --- Uitzondering: watishet.html (Amber boxen) --- */
.feature-box {
    padding: 1.5rem;
    border: 1px solid #fde68a; /* amber-200 */
    background-color: rgba(255, 251, 235, 0.3); /* amber-50/30 */
    border-radius: 0.75rem; /* rounded-xl */
}
.feature-box h3 {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: #78350f; /* amber-900 */
}
.feature-box ul {
    list-style-type: disc;
    list-style-position: inside;
    color: #374151; /* gray-700 */
}
.feature-box li {
    margin-bottom: 0.5rem;
}
/* ==========================================================================
   TOEGANKELIJKHEID
   ========================================================================== */

/* --- Knop-resets ---------------------------------------------------------
   De taalkeuze, de "Meer weten"-dropdown en de taalitems zijn <button>-
   elementen in plaats van <div>'s, zodat ze met Tab bereikbaar zijn en met
   Enter/Spatie bediend kunnen worden. Een knop brengt eigen browserstijl mee;
   die zetten we hier terug naar de omliggende opmaak. */
.lang-dropdown-label,
.more-dropdown-label,
.lang-item,
.mobile-lang-item {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

/* De items in de dropdown vullen de volle breedte van het menu. */
.lang-item,
.mobile-lang-item {
    width: 100%;
}

/* Deze twee erven hun eigen typografie uit de regels hierboven in dit bestand;
   font: inherit zou die overschrijven, dus zetten we ze expliciet terug. */
.lang-item,
.mobile-lang-item {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.lang-item {
    color: #0c2b44;
}

.lang-item.active {
    color: var(--accent-gold-custom);
}

/* De taalknop in de header houdt zijn Tailwind-achtergrond (bg-white/5). */
.lang-dropdown-label {
    background: rgba(255, 255, 255, 0.05);
}

/* --- Zichtbare focus -----------------------------------------------------
   Wie met het toetsenbord navigeert moet kunnen zien waar hij is. :focus-visible
   toont de rand alleen bij toetsenbordgebruik, niet na een muisklik. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-gold-custom);
    outline-offset: 2px;
    border-radius: 2px;
}

/* In de donkerblauwe header valt goud te weinig op; daar een witte rand. */
#site-header a:focus-visible,
#site-header button:focus-visible {
    outline-color: #ffffff;
}

/* De taalitems staan op een witte achtergrond: daar juist weer goud. */
.lang-menu .lang-item:focus-visible,
.more-menu a:focus-visible {
    outline-color: var(--accent-gold-custom);
}

/* Het logo is nu een link; de onderstreping van de browser is hier ongewenst. */
.site-logo,
.site-logo:hover {
    text-decoration: none;
    color: inherit;
}

/* --- Overslaan-naar-inhoud -----------------------------------------------
   Eerste tabstop op elke pagina: springt over de navigatie heen naar het
   artikel. Alleen zichtbaar zodra hij focus krijgt. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--header-blue);
    color: #ffffff;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    border-bottom: 2px solid var(--accent-gold-custom);
}

.skip-link:focus {
    left: 0;
}

/* ==========================================================================
   TEKSTKADERS (tekstkritiek.html)
   --------------------------------------------------------------------------
   Deze twee klassen werden al gebruikt in de artikelteksten maar waren nergens
   gedefinieerd, waardoor de kaders als gewone lopende tekst werden getoond.
   De opmaak volgt de citaatkaders die elders op de site staan.
   ========================================================================== */
.disclaimer-box {
    background-color: rgba(255, 251, 235, 0.6); /* amber-50 */
    border-left: 4px solid var(--accent-gold-custom);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
}

.disclaimer-box p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #4b5563;
    text-align: left;
}

.dispute-box {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--accent-gold-custom);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.dispute-box h3 {
    font-family: 'Cinzel', serif;
    color: var(--header-blue);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
}

.dispute-box p {
    margin-bottom: 0;
    line-height: 1.7;
    color: #374151;
    text-align: left;
}

/* ==========================================================================
   ONDERTEKENING (over.html)
   --------------------------------------------------------------------------
   Een witregel onder de lopende tekst, dan de naam met een verwijzing naar de
   contactpagina. De regel erboven markeert het einde van het artikel.
   ========================================================================== */
.signature {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(215, 158, 90, 0.35);
    text-align: left;
    line-height: 2;
}

/* De naam zelf in dezelfde kapitalen als de kopjes op de site. */
.article-text .signature {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--header-blue);
}