/* Bel Voce — Frontend-rendered color match to bel-voce-gesangssolisten.de
 * Audit-based (Playwright computed-style diff)
 */

@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');

:root {
    --bs-primary: #D9B4A7;
    --bs-primary-rgb: 217, 180, 167;
    --bs-secondary: #732449;
    --bs-secondary-rgb: 115, 36, 73;
    --bs-body-bg: #223740;
    --bs-body-color: #f8f8f8;       /* original: rgb(248,248,248) */
    --bs-dark: #223740;
    --bs-darker: #223740;
    --bs-lighter: #223740;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Quattrocento', Georgia, serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p.lead, .lead {
    text-wrap: balance;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-primary);
    font-family: 'Quattrocento', Georgia, serif;
}

/* Original heading-sizes (from rendered: H1=44.8px=2.8rem) */
h1, .h1 { font-size: 2.8rem; }
h2, .h2 { font-size: 2.4rem; }
h3, .h3 { font-size: 2.0rem; }
h4, .h4 { font-size: 1.6rem; }
h5, .h5 { font-size: 1.25rem; }

a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--bs-secondary);
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-body-bg);
}

/* === NAVBAR === */
/* Original: navbar bg = body bg (#223740) — wirkt transparent. BP16-default = dark #313131 */
.navbar.navbar-default,
.navbar-mainnavigation,
header.navbar,
#page-header.navbar {
    background-color: var(--bs-body-bg) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Nav-Links light auf dark bg */
.navbar .nav-link,
.navbar .nav-link-main,
.navbar .navbar-nav .nav-link {
    color: var(--bs-body-color) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--bs-primary) !important;
}

/* === LOGO === */
/* Original rendered 258x220. Staging shrinkt auf 108x72 — BP16-CSS limitiert max-width
 * Auch .navbar-brand-image hat fixed height — muss auto sein, damit IMG-Höhe gilt */
.navbar-brand-image img,
.navbar-brand img.navbar-brand-logo-normal,
.navbar-brand img.navbar-brand-logo-inverted {
    width: 300px !important;
    height: auto !important;
    max-width: 300px !important;
    max-height: 200px !important;
}

.navbar-brand,
.navbar-brand-image {
    height: auto !important;
    overflow: visible !important;
    padding: 10px 0 !important;
}

/* Navbar muss mitwachsen damit Logo voll sichtbar (Original: 220px hoch) */
.navbar.navbar-mainnavigation,
header.navbar,
#page-header.navbar {
    min-height: 220px !important;
    align-items: center !important;
}

/* === CONTAINER WIDTH === */
/* Original: 1140px (Bootstrap-default `.container`). BP16-default: 1320px (container-xxl) */
/* BP16 nutzt `.frame-container` für Content-Sections, nicht `.container` */
.container,
.bp-page-content > .container,
.section > .container,
.navbar > .container,
.frame-container,
.frame-container-default {
    max-width: 1140px !important;
}

/* === NAV-ITEMS rechtsbündig im Collapse-Container === */
/* BP16: .container-mainnavigation hat justify-content:space-between — verteilt Lücke gleichmäßig.
 * Damit collapse mit flex:1 wirklich wächst, muss container auf flex-start */
.navbar .container-mainnavigation,
.navbar > .container {
    justify-content: flex-start !important;
}

.navbar .navbar-collapse {
    justify-content: flex-end !important;
    flex: 1 0 0 !important;
}

.navbar .navbar-nav {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

/* === TIMELINE === */
/* Original: timeline-item-inner transparent + 1px solid weiß + helle Texte
 * BP16-default: weiß bg + dunkler Text */
.timeline-item-inner {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-body-color) !important;
}

.timeline-item-date,
.timeline-item-date time,
.timeline-item-header,
.timeline-item-body,
.timeline-item-inner * {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

.timeline-item-header a,
.timeline-item-body a {
    color: var(--bs-primary) !important;
}

/* === TEXTPIC: 1/3 Bild + 2/3 Text === */
/* Original-Ratio: gallery 343/1100 = 31%, text 706/1100 = 64% */
/* BP16-default: 50/50 + flex-wrap:wrap (Items rutschen untereinander) */
.textpic {
    flex-wrap: nowrap !important;
}

.textpic .textpic-item.textpic-gallery {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}

.textpic .textpic-item.textpic-text {
    flex: 0 0 66.667% !important;
    max-width: 66.667% !important;
}

/* === CARDS === */
/* Original: bg=body, color=light, border=1px solid white. BP16-default: bg=transparent, color=dark, no border */
.card {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid #ffffff !important;
}

.card-body,
.card-title,
.card-text {
    color: var(--bs-body-color) !important;
}

.card a,
.card .card-title a {
    color: var(--bs-primary) !important;
}

/* === FOOTER === */
.footer-section,
section.footer-section {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.footer-section a {
    color: var(--bs-primary) !important;
}

.footer-section-meta a,
.footer-section-meta .meta-menu a span {
    color: var(--bs-primary) !important;
}

.footer-section-meta .meta-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-section-meta .footer-copyright {
    text-align: center;
}

/* === TABLES === */
/* Bootstrap .table setzt --bs-table-color auf dark — kollidiert mit Dark-Theme */
.table,
.table > :not(caption) > * > * {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--bs-body-color) !important;
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

/* === BREADCRUMB === */
/* Original zeigt breadcrumb nur auf Pages mit Level >= 2 (deep-nested wie Mitglieder/<name>).
 * Settings.yaml enable=true, hier hide für pagelevel-0 + pagelevel-1. */
body.pagelevel-0 .breadcrumb-section,
body.pagelevel-1 .breadcrumb-section {
    display: none !important;
}

/* Breadcrumb-Bar: transparent statt weißem Balken */
.breadcrumb-section,
.breadcrumb-section .breadcrumb,
.breadcrumb-section ol,
.breadcrumb-section nav {
    background-color: transparent !important;
}

.breadcrumb-section a,
.breadcrumb-section .breadcrumb-item {
    color: var(--bs-body-color) !important;
}

.breadcrumb-section a:hover {
    color: var(--bs-primary) !important;
}

.breadcrumb-section .breadcrumb-item.active {
    color: var(--bs-primary) !important;
}

/* Slash-Separator zwischen Items (Bootstrap pseudo ::before) */
.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-body-color) !important;
}

.breadcrumb-section,
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-body-color);
}