/* * Theme Name: Brugbibelen.dk * Theme URI: https://brugbibelen.dk/ * Template: bootstrap-tema * Description: Selvstaendigt child-tema til Bootstrap Tema. Design "Pergament & Oxblod". Installeres ved siden af bootstrap-tema-child og overskriver ingenting. * Version: 1.0.0 * Author: Christian Maymann * Text Domain: bootstrap-tema */ /* ============================================================= INDHOLD 01 Designtokens 02 Basis og typografi 03 Kompat-lag (klasser som bootstrap-subset.css mangler) 04 Header og navigation 05 Sidelayout og indhold 06 Widgets (sidebar + footer) 07 Blog 08 Footer 09 Cookie-banner 10 DFB-plugins 11 Print, reduceret bevaegelse, responsivt ============================================================= */ /* ============================================================= 01 DESIGNTOKENS Alt farve- og typografivalg styres herfra. Vil du skifte accentfarve for hele sitet, saa ret kun --bb-oxblod. ============================================================= */ :root { /* Flader */ --bb-papir: #fbf9f4; /* sidebaggrund, varmt papir */ --bb-hvid: #ffffff; /* indholdsflade */ --bb-pergament: #f4ecdd; /* panel- og kortflade */ --bb-pergament-2: #ede2cf; /* hover / nedtonet panel */ /* Blaek */ --bb-blaek: #211c17; /* broedtekst */ --bb-blaek-svag: #6b6154; /* meta, labels, hjaelpetekst */ --bb-blaek-mork: #14100c; /* footer-flade */ /* Streger */ --bb-linje: #ded3c0; --bb-linje-svag: #ece4d6; /* Accent */ --bb-oxblod: #8b1a1a; --bb-oxblod-mork: #6b1212; --bb-oxblod-lys: #fdf4f2; /* Moerk vaerktoejslinje — samme sprog som Studiebord-toppen */ --bb-bar: #2b201a; /* selve linjen */ --bb-bar-hoej: #3a2c24; /* haevede flader: knapper, dropdowns */ --bb-bar-kant: #574337; /* kanter paa moerk flade */ --bb-bar-tekst: #f4ecdd; --bb-bar-tekst-svag:#a08d7d; /* dæmpet label, fx "DFB" */ --bb-guld: #d3a44e; /* sekundaer handling paa moerk flade */ --bb-guld-mork: #b8863a; /* Typografi */ --bb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --bb-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Typeskala */ --bb-t-xs: 0.78rem; --bb-t-sm: 0.875rem; --bb-t-md: 1rem; --bb-t-lg: 1.125rem; --bb-t-xl: 1.375rem; --bb-t-2xl: 1.75rem; --bb-t-3xl: 2.25rem; /* Rytme */ --bb-rum-1: 0.25rem; --bb-rum-2: 0.5rem; --bb-rum-3: 0.75rem; --bb-rum-4: 1rem; --bb-rum-5: 1.5rem; --bb-rum-6: 2rem; --bb-rum-7: 3rem; --bb-radius: 4px; --bb-radius-lg: 8px; /* Maalebredde for laesetekst */ --bb-maal: 68ch; } /* ============================================================= 02 BASIS OG TYPOGRAFI ============================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 96px; /* plads til sticky header ved anker-links */ /* Sikkerhedsnet mod vandret scroll. "clip" og ikke "hidden": hidden goer til en scroll-container og draeber position: sticky. clip klipper uden det. Blev midlertidigt fjernet paa mistanke om at den gav et glimt paa pinnede widgets under scroll. Den mistanke var forkert — aarsagen var en sticky .widget-area, og glimtet fortsatte efter clip var ude. Derfor sat ind igen. */ overflow-x: clip; } /* Kendte brede elementer holdes inde uden at roere roden. */ .dfb-graesk-popup, .dfb-sammenlign-panel, .dfb-of-panel, iframe[src="about:blank"] { max-width: 100%; overflow: hidden; } /* Medier og indlejringer maa aldrig blive bredere end deres spalte. */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; } body { background-color: var(--bb-papir); color: var(--bb-blaek); font-family: var(--bb-sans); font-size: var(--bb-t-md); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tynd oxblod-kant oeverst — sidens "bogsnit". */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--bb-oxblod); z-index: 1040; } h1, h2, h3, h4, h5, h6 { font-family: var(--bb-serif); color: var(--bb-blaek); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; margin-top: 0; margin-bottom: var(--bb-rum-3); text-wrap: balance; } h1 { font-size: var(--bb-t-3xl); } h2 { font-size: var(--bb-t-2xl); } h3 { font-size: var(--bb-t-xl); } h4 { font-size: var(--bb-t-lg); } h5 { font-size: var(--bb-t-md); } h6 { font-size: var(--bb-t-sm); } p { margin: 0 0 var(--bb-rum-4); } a { color: var(--bb-oxblod); text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 0.15s ease; } a:hover, a:focus { color: var(--bb-oxblod-mork); } /* Synligt tastaturfokus overalt. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--bb-oxblod); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--bb-pergament-2); color: var(--bb-blaek); } hr { border: 0; border-top: 1px solid var(--bb-linje); margin: var(--bb-rum-6) 0; opacity: 1; } /* Skip-link: usynlig indtil den faar fokus. */ .screen-reader-text, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } a.screen-reader-text:focus { position: fixed !important; top: 8px; left: 8px; z-index: 1100; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 16px; background: var(--bb-oxblod); color: #fff; border-radius: var(--bb-radius); font-family: var(--bb-sans); font-size: var(--bb-t-sm); text-decoration: none; } /* ============================================================= 03 KOMPAT-LAG assets/css/bootstrap-subset.css er trimmet ned og indeholder IKKE .card, .btn, .badge, .col-md-*, .form-control, .alert, .text-muted, .img-fluid m.fl. Templates bruger dem alligevel. Herunder daekkes praecis de klasser temaet faktisk anvender — ikke hele Bootstrap. ============================================================= */ /* --- Afstande --- */ .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--bb-rum-2) !important; } .mb-3 { margin-bottom: var(--bb-rum-4) !important; } .mb-4 { margin-bottom: var(--bb-rum-5) !important; } .mt-2 { margin-top: var(--bb-rum-2) !important; } .pb-3 { padding-bottom: var(--bb-rum-4) !important; } .py-2 { padding-top: var(--bb-rum-2) !important; padding-bottom: var(--bb-rum-2) !important; } .py-4 { padding-top: var(--bb-rum-5) !important; padding-bottom: var(--bb-rum-5) !important; } .py-5 { padding-top: var(--bb-rum-7) !important; padding-bottom: var(--bb-rum-7) !important; } /* --- Tekst --- */ .text-center { text-align: center !important; } .text-white { color: #fff !important; } .text-muted { color: var(--bb-blaek-svag) !important; } .small, small { font-size: var(--bb-t-sm); } .lead { font-family: var(--bb-serif); font-size: var(--bb-t-lg); line-height: 1.5; color: var(--bb-blaek-svag); } .h3 { font-size: var(--bb-t-xl); font-family: var(--bb-serif); } .h4 { font-size: var(--bb-t-lg); font-family: var(--bb-serif); } .h5 { font-size: var(--bb-t-md); font-family: var(--bb-serif); } /* --- Billeder --- */ .img-fluid, .entry-content img, .wp-caption img { max-width: 100%; height: auto; } .rounded { border-radius: var(--bb-radius-lg); } .shadow-sm { box-shadow: 0 1px 2px rgba(33, 28, 23, 0.06); } /* --- Grid: kolonner som subsettet mangler --- */ @media (min-width: 768px) { .col-md-4 { flex: 0 0 auto; width: 33.3333%; } } /* Flex-elementer har min-width: auto som standard, dvs. de naegter at krympe under deres eget indhold. Er der én bred tabel, et 
, en
   iframe eller en lang ubrudt streng inde i .col-lg-8, vokser kolonnen
   derfor ud over de 66,6 % — og hele siden faar en vandret scrollbar.
   Denne linje er standardmodgiften. */
.row > * { min-width: 0; }

/* Lange URL'er og ubrudte strenge braekker i stedet for at skubbe. */
.entry-content,
.widget {
    overflow-wrap: break-word;
}

/* --- Kort --- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bb-hvid);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    overflow: hidden;
}

.card-img-top {
    display: block;
    width: 100%;
    height: auto;
}

.card-body { padding: var(--bb-rum-5); }

.card-title { margin-bottom: var(--bb-rum-2); }

.card-text > *:last-child { margin-bottom: 0; }

.card-footer {
    padding: var(--bb-rum-3) var(--bb-rum-5);
    background: var(--bb-papir);
    border-top: 1px solid var(--bb-linje-svag);
    font-size: var(--bb-t-sm);
    color: var(--bb-blaek-svag);
}

/* --- Knapper --- */
.btn {
    display: inline-block;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 0.55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--bb-radius);
    background: transparent;
    color: var(--bb-blaek);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
    background: var(--bb-oxblod);
    border-color: var(--bb-oxblod);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--bb-oxblod-mork);
    border-color: var(--bb-oxblod-mork);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--bb-oxblod);
    color: var(--bb-oxblod);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--bb-oxblod);
    color: #fff;
}

/* Sekundaer handling paa moerk flade — som "Eksportér" og "Ramme"
   i Studiebord-vaerktoejslinjen. */
.btn-guld {
    background: transparent;
    border-color: var(--bb-guld);
    color: var(--bb-guld);
}

.btn-guld:hover,
.btn-guld:focus {
    background: var(--bb-guld);
    border-color: var(--bb-guld);
    color: var(--bb-bar);
}

/* Neutral knap paa moerk flade — som "Nyt bord". */
.btn-bar {
    background: var(--bb-bar-hoej);
    border-color: var(--bb-bar-kant);
    color: var(--bb-bar-tekst);
}

.btn-bar:hover,
.btn-bar:focus {
    background: #46362c;
    border-color: #6b5546;
    color: #fff;
}

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 0.35em 0.7em;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-xs);
    font-weight: 600;
    line-height: 1.3;
    border-radius: 999px;
    background: var(--bb-pergament-2);
    color: var(--bb-blaek);
    text-decoration: none;
}

/* --- Formularfelter --- */
.form-control {
    display: block;
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-md);
    line-height: 1.5;
    color: var(--bb-blaek);
    background: var(--bb-hvid);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    transition: border-color 0.15s ease;
}

.form-control:focus {
    border-color: var(--bb-oxblod);
    outline: 2px solid rgba(139, 26, 26, 0.15);
    outline-offset: 0;
}

/* --- Beskeder --- */
.alert {
    padding: var(--bb-rum-4) var(--bb-rum-5);
    border: 1px solid var(--bb-linje);
    border-left: 3px solid var(--bb-oxblod);
    border-radius: var(--bb-radius);
    background: var(--bb-oxblod-lys);
}

.alert > *:last-child { margin-bottom: 0; }

.border-bottom { border-bottom: 1px solid var(--bb-linje); }

/* --- Sidenummerering (the_posts_pagination) --- */
.pagination,
.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-rum-2);
    align-items: center;
    margin: var(--bb-rum-6) 0;
}

.page-numbers {
    display: inline-block;
    min-width: 2.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    font-size: var(--bb-t-sm);
    text-align: center;
    text-decoration: none;
    color: var(--bb-blaek);
}

.page-numbers:hover { background: var(--bb-pergament); }

.page-numbers.current {
    background: var(--bb-oxblod);
    border-color: var(--bb-oxblod);
    color: #fff;
}


/* =============================================================
   04  HEADER OG NAVIGATION
   ============================================================= */

/* Vaerktoejslinje-stil, samme sprog som Studiebord-toppen:
   moerk varm flade, hvid serif-ordmaerke, dæmpet label, haevede
   knapflader med lys kant, guld til sekundaere handlinger. */

.site-header {
    position: sticky;
    top: 0;
    /* Over dfb-pin-widget (99998), under adminbaren (9999999). */
    z-index: 100000;
    background-color: var(--bb-bar);
    color: var(--bb-bar-tekst);
    border-bottom: 1px solid #1c140f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* --- Pinnede widgets (dfb-pin-widget) --------------------------------
   Pluginnet saetter en inline top fra filteret dfb_pin_widget_settings.
   Den vaerdi var maalt paa den gamle header. --bb-pin-top saettes af en
   lille maaling i functions.php, saa afstanden foelger headerens
   faktiske hoejde — ogsaa naar genvejsbaandet er med, eller naar
   adminbaren skifter hoejde paa smalle skaerme. */
.dfb-pin-host.dfb-pinned {
    /* Reservevaerdien er med vilje rigelig: sker maalingen ikke, er det
       bedre at widgeten staar lidt for lavt end at den forsvinder ind
       under headeren, som nu ligger oeverst. */
    top: var(--bb-pin-top, 152px) !important;
}

/* Naar WordPress-adminbaren er synlig, skal sticky-headeren under den. */
body.admin-bar .site-header { top: 32px; }

.navbar.navbar-expand-lg {
    padding: 0.55rem 0;
    border-bottom: 0;
}

/* --- Ordmaerke ------------------------------------------------------- */

.navbar-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--bb-serif);
    font-size: var(--bb-t-xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:focus { color: var(--bb-guld); }

/* Dæmpet label efter ordmaerket, som "DFB" i Studiebord.
   Brug: Brug Bibelen DFB */
.navbar-brand__label {
    font-family: var(--bb-sans);
    font-size: var(--bb-t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bb-bar-tekst-svag);
}

.site-logo img,
.navbar-brand img {
    max-height: 46px;
    width: auto;
}

/* Har du et moerkt logo, saa fjern kommenteringen herunder:
.site-logo img { filter: brightness(0) invert(1); }
*/

/* --- Menupunkter ----------------------------------------------------- */

.navbar-nav { gap: 0.15rem; }

.navbar .nav-link {
    position: relative;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--bb-bar-tekst);
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background: var(--bb-bar-hoej);
    border-color: var(--bb-bar-kant);
    color: #fff;
}

/* Aktivt menupunkt: guld understregning, som er den eneste farve der
   baerer paa den moerke flade. Oxblod bruges kun som fyld (knapper). */
.navbar .current-menu-item > .nav-link,
.navbar .current_page_item > .nav-link,
.navbar .current-menu-ancestor > .nav-link {
    color: #fff;
    font-weight: 600;
}

.navbar .current-menu-item > .nav-link::after,
.navbar .current_page_item > .nav-link::after,
.navbar .current-menu-ancestor > .nav-link::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.05rem;
    height: 2px;
    background: var(--bb-guld);
    border-radius: 1px;
}

/* Primaer handling i menuen, fx "Log ind" eller "Studiebord".
   Saet klassen paa menupunktet under Udseende -> Menuer ->
   CSS-klasser (slaas til under "Indstillinger for skaerm"). */
.navbar .menu-primaer > .nav-link {
    background: var(--bb-oxblod);
    border-color: var(--bb-oxblod);
    color: #fff;
    font-weight: 600;
}

.navbar .menu-primaer > .nav-link:hover,
.navbar .menu-primaer > .nav-link:focus {
    background: var(--bb-oxblod-mork);
    border-color: var(--bb-oxblod-mork);
}

.navbar .menu-primaer > .nav-link::after { display: none; }

/* Sekundaer, guld-omridset handling — fx "Eksportér". */
.navbar .menu-guld > .nav-link {
    border-color: var(--bb-guld);
    color: var(--bb-guld);
}

.navbar .menu-guld > .nav-link:hover,
.navbar .menu-guld > .nav-link:focus {
    background: var(--bb-guld);
    border-color: var(--bb-guld);
    color: var(--bb-bar);
}

/* --- Burgerknap ------------------------------------------------------ */

.navbar-toggler {
    border: 1px solid var(--bb-bar-kant);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: var(--bb-bar-hoej);
}

.navbar-toggler:hover { background: #46362c; }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f4ecdd' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Dropdowns ------------------------------------------------------- */

.navbar .dropdown-menu {
    border: 1px solid var(--bb-bar-kant);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    padding: var(--bb-rum-2);
    background: var(--bb-bar-hoej);
}

.navbar .dropdown-item {
    font-size: var(--bb-t-sm);
    padding: 0.45rem 0.7rem;
    border-radius: 4px;
    color: var(--bb-bar-tekst);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: #4c3b30;
    color: #fff;
}

.navbar .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--bb-bar-kant);
}

/* Fokusring skal kunne ses paa den moerke flade. */
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--bb-guld);
    outline-offset: 2px;
}

/* --- Baandet under menuen (dfb-nav) ---------------------------------- */

.dfb-nav {
    background-color: var(--bb-pergament);
    border-bottom: 1px solid var(--bb-linje);
    padding: 0.4rem 0 0.4rem 42px;
    font-size: var(--bb-t-sm);
    color: var(--bb-blaek-svag);
}

/* Vil du have Studiebordets prikkede laerred her, saa fjern
   kommenteringen:
.dfb-nav {
    background-image: radial-gradient(var(--bb-linje) 1px, transparent 1px);
    background-size: 22px 22px;
}
*/

/* Header-billede paa forsiden */
.custom-header {
    position: relative;
    border-bottom: 1px solid var(--bb-linje);
}

.custom-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0.30), rgba(20, 16, 12, 0.62));
}

.custom-header .container {
    position: relative;
    z-index: 1;
}

.custom-header h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: var(--bb-rum-3);
}

.custom-header .lead { color: rgba(255, 255, 255, 0.88); }


/* =============================================================
   05  SIDELAYOUT OG INDHOLD
   ============================================================= */

.site-content {
    padding: var(--bb-rum-7) 0;
}

/* Selve laesefladen */
.entry-content,
.page-content {
    font-family: var(--bb-serif);
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--bb-blaek);
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
    max-width: var(--bb-maal);
}

.entry-content h2 { margin-top: var(--bb-rum-6); }
.entry-content h3 { margin-top: var(--bb-rum-5); }

.entry-content ul,
.entry-content ol {
    padding-left: 1.35rem;
    margin-bottom: var(--bb-rum-4);
}

.entry-content li { margin-bottom: 0.35rem; }

.entry-content blockquote {
    margin: var(--bb-rum-5) 0;
    padding: var(--bb-rum-2) 0 var(--bb-rum-2) var(--bb-rum-5);
    border-left: 3px solid var(--bb-oxblod);
    color: var(--bb-blaek-svag);
    font-style: italic;
}

.entry-content blockquote > *:last-child { margin-bottom: 0; }

.entry-content code,
.entry-content kbd {
    font-family: var(--bb-mono);
    font-size: 0.875em;
    background: var(--bb-pergament);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

.entry-content pre {
    font-family: var(--bb-mono);
    font-size: var(--bb-t-sm);
    background: var(--bb-pergament);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    padding: var(--bb-rum-4);
    overflow-x: auto;
}

/* Brede tabeller scroller i deres egen boks i stedet for at give hele
   siden en vandret scrollbar. Gaelder ved alle skaermbredder, saa
   indholdet altid kan naas — ogsaa naar  klipper vandret. */
.entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: var(--bb-rum-5);
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
}

.entry-content th,
.entry-content td {
    border-bottom: 1px solid var(--bb-linje-svag);
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.entry-content thead th {
    border-bottom: 2px solid var(--bb-linje);
    font-weight: 600;
    color: var(--bb-blaek-svag);
    text-transform: uppercase;
    font-size: var(--bb-t-xs);
    letter-spacing: 0.06em;
}

.entry-content tbody tr:hover { background: var(--bb-papir); }

/* Sidehoved for indhold */
.entry-header .entry-title,
.page-header .page-title,
.blog-archive-title {
    font-size: clamp(1.9rem, 3.4vw, var(--bb-t-3xl));
    margin-bottom: var(--bb-rum-3);
}

.entry-header {
    padding-bottom: var(--bb-rum-4);
    border-bottom: 1px solid var(--bb-linje);
    margin-bottom: var(--bb-rum-5);
}

.entry-meta,
.entry-footer {
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    color: var(--bb-blaek-svag);
}

.entry-footer {
    margin-top: var(--bb-rum-6);
    padding-top: var(--bb-rum-3);
    border-top: 1px solid var(--bb-linje-svag);
}

.post-thumbnail img { border-radius: var(--bb-radius-lg); }

.page-links {
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    margin-top: var(--bb-rum-5);
}

/* Soegeformular */
.search-form {
    display: flex;
    gap: var(--bb-rum-2);
}

.search-form .search-field { flex: 1; }


/* =============================================================
   06  WIDGETS — sidebar og footer
   Signaturelementet: hver widget-titel faar en lille oxblod-
   markoer og en daempet versalskrift. Samme markoer bruges i
   sidebar, footer og indholdssektioner, saa panelerne laeses
   som ét system.
   ============================================================= */

/* Sidebaren er med vilje HELT almindelig blokflow: ingen sticky, ingen
   flex. Klæbe-funktionen leveres af dfb-pin-widget, som tager widgeten
   ud af flowet og goer den fixed. Var forælderen selv sticky, flyttede
   den sig under scroll samtidig med at pluginnet regnede position ud
   fra den — og saa gled den pinnede widget op under headeren.
   Ret ikke dette til sticky uden at teste pin-funktionen. */
.widget-area {
    display: block;
    position: static;
}

.widget-area > .widget {
    margin-bottom: var(--bb-rum-5);
}

.widget-area > .widget:last-child {
    margin-bottom: 0;
}

.widget {
    background: var(--bb-pergament);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    padding: var(--bb-rum-4) var(--bb-rum-5) var(--bb-rum-5);
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    line-height: 1.6;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 var(--bb-rum-4);
    padding: 0 0 var(--bb-rum-2);
    border-bottom: 1px solid var(--bb-linje) !important;
    font-family: var(--bb-sans) !important;
    font-size: var(--bb-t-xs) !important;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bb-blaek-svag);
}

.widget-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 0.95em;
    background: var(--bb-oxblod);
    border-radius: 1px;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bb-linje-svag);
}

.widget ul li:last-child { border-bottom: 0; }

.widget ul li a {
    text-decoration: none;
    color: var(--bb-blaek);
}

.widget ul li a:hover {
    color: var(--bb-oxblod);
    text-decoration: underline;
}

.widget p:last-child { margin-bottom: 0; }

.widget select,
.widget input[type="text"],
.widget input[type="search"] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    background: var(--bb-hvid);
    color: var(--bb-blaek);
}


/* =============================================================
   07  BLOG (dfb-blog markup)
   ============================================================= */

.blog-archive-header {
    padding-bottom: var(--bb-rum-4);
    border-bottom: 1px solid var(--bb-linje);
    margin-bottom: var(--bb-rum-6);
}

.blog-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--bb-rum-6);
}

.blog-post-item {
    padding-bottom: var(--bb-rum-6);
    border-bottom: 1px solid var(--bb-linje-svag);
}

.blog-post-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.blog-post-title {
    font-size: var(--bb-t-xl);
    margin-bottom: var(--bb-rum-2);
}

.blog-post-title a {
    color: var(--bb-blaek);
    text-decoration: none;
}

.blog-post-title a:hover {
    color: var(--bb-oxblod);
    text-decoration: underline;
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-xs);
    letter-spacing: 0.02em;
    color: var(--bb-blaek-svag);
    margin-bottom: var(--bb-rum-3);
}

.blog-post-meta a {
    color: var(--bb-blaek-svag);
    text-decoration: none;
    border-bottom: 1px solid var(--bb-linje);
}

.blog-post-meta a:hover {
    color: var(--bb-oxblod);
    border-bottom-color: var(--bb-oxblod);
}

.blog-post-excerpt {
    font-family: var(--bb-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: var(--bb-maal);
    margin-bottom: var(--bb-rum-3);
}

.blog-post-read-more {
    display: inline-block;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    font-weight: 600;
    color: var(--bb-oxblod);
    text-decoration: none;
}

.blog-post-read-more:hover { text-decoration: underline; }

.blog-no-posts {
    padding: var(--bb-rum-5);
    background: var(--bb-pergament);
    border-radius: var(--bb-radius);
}


/* =============================================================
   08  FOOTER
   ============================================================= */

.site-footer {
    background: var(--bb-blaek-mork);
    color: rgba(244, 236, 221, 0.82);
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    padding: var(--bb-rum-7) 0 var(--bb-rum-5);
    border-top: 3px solid var(--bb-oxblod);
    margin-top: var(--bb-rum-7);
}

.site-footer a { color: var(--bb-pergament); }

.site-footer a:hover { color: #fff; }

.site-footer .widget {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}

.site-footer .widget-title {
    color: rgba(244, 236, 221, 0.60);
    border-bottom-color: rgba(244, 236, 221, 0.16) !important;
}

.site-footer .widget ul li {
    border-bottom-color: rgba(244, 236, 221, 0.10);
}

.site-footer .widget ul li a { color: var(--bb-pergament); }

.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-rum-6);
    padding-bottom: var(--bb-rum-5);
    border-bottom: 1px solid rgba(244, 236, 221, 0.14);
}

.footer-widgets > [class*="col-"] {
    flex: 1 1 240px;
    width: auto;
    max-width: 100%;
}

.footer-navigation .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: var(--bb-rum-4) 0 0;
    justify-content: center;
}

.footer-navigation .nav-link {
    color: var(--bb-pergament);
    padding: 0.25rem 0;
    font-size: var(--bb-t-sm);
}

.site-info {
    padding-top: var(--bb-rum-4);
    text-align: center;
    font-size: var(--bb-t-xs);
    color: rgba(244, 236, 221, 0.55);
}


/* =============================================================
   09  COOKIE-BANNER
   Markup ligger i footer.php; al styling er samlet her.
   ============================================================= */

.bb-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: none;
    background: var(--bb-blaek-mork);
    color: rgba(244, 236, 221, 0.92);
    border-top: 3px solid var(--bb-oxblod);
    padding: var(--bb-rum-4) var(--bb-rum-5);
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
}

.bb-cookie.er-aaben { display: block; }

.bb-cookie__indhold {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-rum-4);
}

.bb-cookie__tekst {
    flex: 1 1 260px;
    margin: 0;
}

.bb-cookie__knapper {
    display: flex;
    gap: var(--bb-rum-2);
}

.bb-cookie__knap {
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: var(--bb-radius);
    border: 1px solid transparent;
    cursor: pointer;
}

.bb-cookie__knap--ja {
    background: var(--bb-oxblod);
    color: #fff;
}

.bb-cookie__knap--ja:hover { background: var(--bb-oxblod-mork); }

.bb-cookie__knap--nej {
    background: transparent;
    border-color: rgba(244, 236, 221, 0.35);
    color: rgba(244, 236, 221, 0.92);
}

.bb-cookie__knap--nej:hover { border-color: var(--bb-pergament); }

.bb-cookie-styr {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1045;
    display: none;
    padding: 0.45rem 0.8rem;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-xs);
    background: var(--bb-hvid);
    color: var(--bb-blaek);
    border: 1px solid var(--bb-linje);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(33, 28, 23, 0.12);
    cursor: pointer;
}

.bb-cookie-styr.er-aaben { display: block; }


/* =============================================================
   10  DFB-PLUGINS
   Bevarede og gennemskrevne regler fra den tidligere style.css.
   ============================================================= */

/* --- Adminbar --- */
div#wpadminbar { z-index: 9999999; }
li#wp-admin-bar-dfb-noter { display: none; }

/* --- Infoboks (Bibeloverblik) --- */
.dfb-iw-box {
    padding: var(--bb-rum-4);
    background: var(--bb-hvid);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    box-shadow: none;
}

.dfb-iw-item { margin-bottom: var(--bb-rum-3); }
.dfb-iw-item:last-child { margin-bottom: 0; }

.dfb-iw-label {
    font-family: var(--bb-sans);
    font-weight: 700;
    font-size: var(--bb-t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bb-blaek-svag);
    margin-bottom: 0.15rem;
}

.dfb-iw-value { font-size: var(--bb-t-sm); }

/* --- Om bogen --- */
.dfb-ombog {
    font-size: var(--bb-t-sm);
    line-height: 1.6;
}

.dfb-ombog__title {
    font-family: var(--bb-sans);
    font-size: var(--bb-t-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bb-blaek-svag);
    margin: 0 0 var(--bb-rum-3);
}

.dfb-ombog__content > *:first-child { margin-top: 0; }
.dfb-ombog__content > *:last-child  { margin-bottom: 0; }
.dfb-ombog__content p { margin: 0 0 var(--bb-rum-3); }

.dfb-ombog__body { transition: opacity 0.12s ease-in-out; }

.dfb-ombog__group { margin: 0 0 0.85rem; }
.dfb-ombog__group:last-child { margin-bottom: 0; }
.dfb-ombog__group-title { margin: 0 0 0.15rem; }
.dfb-ombog__group-title b { font-weight: 600; }
.dfb-ombog__group-content > *:first-child { margin-top: 0; }
.dfb-ombog__group-content > *:last-child  { margin-bottom: 0; }
.dfb-ombog__group-content p { margin: 0 0 var(--bb-rum-2); }

/* --- Diagram-popup --- */
.dfb-ombog__diagram-wrap { margin: 0.85rem 0 0; }

.dfb-ombog__diagram-open {
    cursor: pointer;
    background: var(--bb-hvid);
    border: 1px solid var(--bb-linje);
    color: var(--bb-blaek);
    padding: 0.4rem 0.8rem;
    border-radius: var(--bb-radius);
    font: inherit;
    line-height: 1.3;
}

.dfb-ombog__diagram-open:hover,
.dfb-ombog__diagram-open:focus {
    background: var(--bb-pergament-2);
    border-color: var(--bb-oxblod);
}

.dfb-ombog__diagram-dialog {
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius-lg);
    padding: 0;
    max-width: min(900px, 92vw);
    width: 100%;
    background: var(--bb-hvid);
    color: var(--bb-blaek);
}

.dfb-ombog__diagram-dialog::backdrop { background: rgba(20, 16, 12, 0.45); }

.dfb-ombog__diagram-inner { display: block; }

.dfb-ombog__diagram-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-rum-3);
    padding: var(--bb-rum-3) var(--bb-rum-4);
    border-bottom: 1px solid var(--bb-linje);
    background: var(--bb-pergament);
}

.dfb-ombog__diagram-title {
    margin: 0;
    font-size: var(--bb-t-md);
    font-weight: 600;
    line-height: 1.3;
}

.dfb-ombog__diagram-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    color: var(--bb-blaek-svag);
}

.dfb-ombog__diagram-close:hover,
.dfb-ombog__diagram-close:focus { color: var(--bb-oxblod); }

.dfb-ombog__diagram-body {
    padding: var(--bb-rum-4);
    max-height: 75vh;
    overflow: auto;
}

.dfb-ombog__diagram-body > *:first-child { margin-top: 0; }
.dfb-ombog__diagram-body > *:last-child  { margin-bottom: 0; }

/* --- Laeseren: linjeskift i poesi ---------------------------------
   Bevaret praecis som foer (samme kombination som dfb-laesning
   v2.3.2 selv skriver ud). Ret ikke uden at teste fx Es 11,1.     */
.dfb-vers-tekst { white-space: pre-line !important; }
.dfb-vers-tekst br { display: none !important; }

/* --- Ressource-arkiv: vandrette badges --- */
.dfb-rk-arkiv__nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--bb-rum-2) var(--bb-rum-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dfb-rk-arkiv__nav li {
    display: inline-block;
    margin: 0;
}

.dfb-rk-arkiv__nav .badge {
    background-color: var(--bb-pergament) !important;
    color: var(--bb-blaek) !important;
    border: 1px solid var(--bb-linje) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    display: inline-block;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dfb-rk-arkiv__nav .badge:hover {
    background-color: var(--bb-oxblod) !important;
    border-color: var(--bb-oxblod) !important;
    color: #fff !important;
}

.dfb-rk-arkiv__nav .text-muted { color: var(--bb-blaek-svag) !important; }

.dfb-rk-arkiv__nav .badge:hover .text-muted { color: rgba(255, 255, 255, 0.75) !important; }

/* Ressource-kort uden kortramme */
.dfb-rk-card {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.dfb-rk-card .card-body {
    padding: 0;
    border: none;
}

.dfb-rk-arkiv__section { margin-top: var(--bb-rum-5); }
.dfb-rk-arkiv__section a { text-decoration: none; }

/* --- Krydsreferencer: gruppe-headere og foldeknapper --- */
.dfb-krydsref-gruppe-header,
.dfb-krydsref-foldknap {
    display: flex;
    align-items: center;
    gap: var(--bb-rum-2);
    width: 100%;
    background: var(--bb-hvid);
    border: 1px solid var(--bb-linje);
    border-radius: var(--bb-radius);
    padding: 0.5rem 0.75rem;
    font-family: var(--bb-sans);
    font-size: var(--bb-t-sm);
    font-weight: 600;
    color: var(--bb-blaek);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    margin-bottom: 0;
}

.dfb-krydsref-gruppe-header:hover,
.dfb-krydsref-foldknap:hover {
    background: var(--bb-pergament-2);
    border-color: var(--bb-oxblod);
}

.dfb-krydsref-gruppe-header[aria-expanded="true"],
.dfb-krydsref-foldknap[aria-expanded="true"] {
    background: var(--bb-oxblod-lys);
    border-color: var(--bb-oxblod);
}

.dfb-krydsref-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bb-oxblod);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.dfb-krydsref-gruppe-header[aria-expanded="true"] .dfb-krydsref-toggle,
.dfb-krydsref-foldknap[aria-expanded="true"] .dfb-krydsref-toggle {
    transform: rotate(90deg);
}

.dfb-krydsref-gruppe-label {
    flex: 1;
    color: inherit;
}

.dfb-krydsref-gruppe-antal {
    font-size: var(--bb-t-xs);
    background: var(--bb-pergament-2);
    color: var(--bb-blaek-svag);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.widget ul li:has(.dfb-krydsref-foldknap),
.widget ul li:has(.dfb-krydsref-gruppe-header) {
    border-bottom: none !important;
}

button.dfb-krydsref-foldknap { margin-bottom: var(--bb-rum-2); }


/* =============================================================
   11  PRINT, REDUCERET BEVAEGELSE, RESPONSIVT
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 991.98px) {
    .site-header { position: static; }

    .widget-area {
        margin-top: var(--bb-rum-6);
    }

    .navbar-collapse {
        padding-top: var(--bb-rum-3);
        margin-top: var(--bb-rum-3);
        border-top: 1px solid var(--bb-bar-kant);
    }

    .navbar-nav { gap: 0.25rem; }

    .navbar .nav-link { padding: 0.5rem 0.7rem; }

    .navbar .current-menu-item > .nav-link::after,
    .navbar .current_page_item > .nav-link::after,
    .navbar .current-menu-ancestor > .nav-link::after {
        display: none;
    }

    .dfb-nav { padding-left: var(--bb-rum-4); }

    .site-content { padding: var(--bb-rum-5) 0; }
}

@media (max-width: 575.98px) {
    :root { --bb-t-3xl: 1.85rem; --bb-t-2xl: 1.5rem; }

    .widget { padding: var(--bb-rum-4); }

    .bb-cookie__indhold { align-items: flex-start; }
}

@media print {
    body::before,
    .site-header,
    .site-footer,
    .widget-area,
    .bb-cookie,
    .bb-cookie-styr,
    #wpadminbar { display: none !important; }

    body {
        background: #fff;
        color: #000;
        font-family: var(--bb-serif);
    }

    .site-content { padding: 0; }

    a { color: #000; text-decoration: underline; }
}