:root {
    /* Kleurenschema Thijs Uitvaartzorg (gelezen van thijsuitvaartzorg.nl) */
    --ink: #626262;
    --ink-strong: #3f3f3f;
    --muted: #8c8c8c;
    --paper: #f9f9f9;
    --line: #e6e6e6;
    --taupe: #c4bcba;
    --taupe-text: #9b918e;
    --taupe-dark: #7d7370;
    --coral: #f14e4e;
    --coral-dark: #d63c3c;
    --coral-darker: #b82f2f;
    --slate: #363a43;
    --accent: var(--taupe-dark);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-link-color: #d63c3c;
    --bs-link-hover-color: #b82f2f;
    --bs-link-color-rgb: 214, 60, 60;
    --bs-link-hover-color-rgb: 184, 47, 47;
    --bs-border-color: var(--line);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Open Sans", Arial, sans-serif;
}

.brand {
    color: var(--taupe-dark);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .95rem;
    font-weight: 600;
}

h1, h2 {
    font-family: "Shadows Into Light", "Open Sans", cursive;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--taupe-text);
}

h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
}

h3, h4, h5, h6 {
    color: var(--ink-strong);
    font-weight: 600;
}

.intro {
    padding: 2.5rem 0 1rem;
}

    .intro h1 {
        font-size: clamp(2.2rem, 5vw, 3.4rem);
    }

.eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .18em;
    font: 600 .72rem "Open Sans", Arial, sans-serif;
}

.memorial-card, .form-panel, .info-panel, .login-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .3rem;
}

.memorial-card {
    box-shadow: 0 8px 28px rgba(30, 25, 15, .035);
}

.memorial-detail {
    max-width: 780px;
}

.message-text {
    white-space: pre-wrap;
    line-height: 1.8;
}

.preserve-lines {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
}

.form-panel {
    padding: clamp(1.2rem, 3vw, 2rem);
}

.info-panel {
    padding: 1.5rem;
}

.login-panel {
    max-width: 460px;
    padding: 2rem;
}

.condolence {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
/* Knoppen en links in klaprooskleur; het donker bevat voldoende contrast met witte tekst */
.btn-dark {
    --bs-btn-bg: var(--coral-dark);
    --bs-btn-border-color: var(--coral-dark);
    --bs-btn-hover-bg: var(--coral-darker);
    --bs-btn-hover-border-color: var(--coral-darker);
    --bs-btn-active-bg: var(--coral-darker);
    --bs-btn-active-border-color: var(--coral-darker);
    --bs-btn-disabled-bg: var(--taupe);
    --bs-btn-disabled-border-color: var(--taupe);
    --bs-btn-focus-shadow-rgb: 241, 78, 78;
}

.btn {
    background-image: none;
}

.btn-outline-dark {
    --bs-btn-color: var(--taupe-dark);
    --bs-btn-border-color: var(--taupe);
    --bs-btn-hover-bg: var(--taupe);
    --bs-btn-hover-border-color: var(--taupe);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--taupe-dark);
    --bs-btn-active-border-color: var(--taupe-dark);
    --bs-btn-focus-shadow-rgb: 196, 188, 186;
}

.btn-outline-secondary {
    --bs-btn-color: var(--taupe-dark);
    --bs-btn-border-color: var(--taupe);
    --bs-btn-hover-bg: var(--taupe);
    --bs-btn-hover-border-color: var(--taupe);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--taupe-dark);
    --bs-btn-active-border-color: var(--taupe-dark);
    --bs-btn-focus-shadow-rgb: 196, 188, 186;
}

.btn-outline-danger {
    --bs-btn-color: var(--coral-dark);
    --bs-btn-border-color: var(--coral);
    --bs-btn-hover-bg: var(--coral-dark);
    --bs-btn-hover-border-color: var(--coral-dark);
    --bs-btn-active-bg: var(--coral-darker);
    --bs-btn-active-border-color: var(--coral-darker);
}

a {
    color: var(--coral-dark);
}

    a:hover {
        color: var(--coral-darker);
    }

.navbar .nav-link {
    color: var(--ink);
}

    .navbar .nav-link:hover {
        color: var(--coral-dark);
    }

.form-control:focus, .form-select:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 .2rem rgba(241, 78, 78, .18);
}

.form-check-input:checked {
    background-color: var(--coral-dark);
    border-color: var(--coral-dark);
}

.form-check-input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 .2rem rgba(241, 78, 78, .18);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--line);
}

.table thead th {
    color: var(--taupe-dark);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.alert-success {
    --bs-alert-color: #2f5a3a;
    --bs-alert-bg: #eef6f0;
    --bs-alert-border-color: #cfe4d5;
}

.alert-warning {
    --bs-alert-color: #8a2f2f;
    --bs-alert-bg: #fdeeee;
    --bs-alert-border-color: #f5c9c9;
}

.badge.text-bg-light {
    color: var(--taupe-dark) !important;
    background: #efecea !important;
}

header.site-header {
    border-top: 3px solid var(--coral);
    background: #fff;
}

footer.site-footer {
    background: transparent;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.memorial-card, .form-panel, .info-panel, .login-panel, .admin-card {
    border-radius: .5rem;
}

@media (max-width: 576px) {
    main.container {
        padding-top: 2rem !important;
    }

    .navbar .container {
        gap: .5rem;
    }
}

/* Private memorial page */
.private-memorial-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3rem) 0;
}

.private-memorial {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 7vw, 5.5rem) clamp(1.25rem, 7vw, 5rem);
    background: linear-gradient(145deg, #fffefa 0%, #f7f2e9 100%);
    border: 1px solid #e5dacb;
    box-shadow: 0 24px 70px rgba(72, 57, 38, .09);
}

    .private-memorial:before, .private-memorial:after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border: 1px solid rgba(151, 126, 96, .18);
        border-radius: 50%;
        pointer-events: none;
    }

    .private-memorial:before {
        top: -115px;
        left: -95px;
    }

    .private-memorial:after {
        bottom: -125px;
        right: -95px;
    }

.memorial-flourish {
    text-align: center;
    color: #a38b6e;
    font-size: 1.35rem;
    margin-bottom: 1.4rem;
}

.private-name {
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    line-height: 1.12;
    margin: .8rem 0 1rem;
    color: #37342f;
}

.private-dates {
    color: #847968;
    letter-spacing: .04em;
    font-size: .95rem;
}

.memorial-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 220px;
    margin: 2.2rem auto;
    color: #aa9275;
}

    .memorial-divider:before, .memorial-divider:after {
        content: "";
        height: 1px;
        background: #d9cbb9;
        flex: 1;
    }

.private-message {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.12rem;
    line-height: 2;
    color: #514b43;
}

.private-info {
    max-width: 650px;
    margin: 3.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid #e4d9ca;
}

    .private-info h2 {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .private-info .message-text {
        line-height: 1.85;
    }

.btn-memorial {
    background: #77634d;
    border: 1px solid #77634d;
    color: white;
    padding: .75rem 1.4rem;
    border-radius: 2rem;
}

    .btn-memorial:hover {
        background: #5e4c39;
        color: white;
    }

.private-condolence {
    padding: 1rem 0;
    border-bottom: 1px solid #e4d9ca;
}

.private-footer {
    margin: 3.5rem 0 0;
    text-align: center;
    color: #8b7b68;
    font-style: italic;
}

/* ---- Telefoon / iPhone ---- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
}

h1, h2 {
    overflow-wrap: anywhere;
}

/* Aanraakschermen: knoppen en links minimaal ~44 px hoog */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 40px;
    }

    .navbar .nav-link {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .form-check-input {
        width: 1.3em;
        height: 1.3em;
    }
}

/* Beheer: kaarten op telefoons in plaats van tabellen */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .3rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 28px rgba(30, 25, 15, .035);
}

@media (max-width: 576px) {
    .brand {
        font-size: .9rem;
        letter-spacing: .04em;
    }

    .navbar .navbar-brand {
        margin-right: .5rem;
    }

    .admin-actions {
        width: 100%;
    }

        .admin-actions .btn {
            flex: 1 1 100%;
        }

    .memorial-detail .btn {
        width: 100%;
    }

    .info-panel {
        padding: 1.1rem;
    }
}

/* =====================================================================
   Huisstijl website (header, menu, koppen, knoppen, voettekst)
   Kleuren via variabelen; een organisatie kan ze overschrijven in
   wwwroot/huisstijl/{map}/huisstijl.css (zelfde opmaak als WensenboekjeMvc).
   ===================================================================== */
:root {
    --huis-kop: #b5aeac;          /* handgeschreven koppen, lichtgrijs zoals de website */
    --huis-menu: #2c2e2e;         /* menu-items */
    --huis-accent: var(--coral);  /* streepje onder het actieve menu-item */
    --huis-knop: #958d8c;         /* knoppen: warm grijs (iets donkerder dan de website, voor leesbaarheid) */
    --huis-knop-hover: #7d7370;
    --huis-sectie-grijs: #f9f9f9;
    --huis-footer: #363a43;
    --huis-footer-tekst: #c9cbd0;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/* Binnenpagina's staan op lichtgrijs met witte panelen, zoals de grijze secties van de website */
main.pagina-grijs {
    background: var(--huis-sectie-grijs);
}

@media (max-width: 576px) {
    main.pagina-grijs > .container {
        padding-top: 2rem !important;
    }
}

/* ---- Header ---- */
header.site-header {
    border-top: 0;
    background: #fff;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.site-header .navbar {
    padding: 1rem .75rem;   /* .navbar zet de zijmarge van .container anders op 0 */
}

.brand-logo {
    max-height: none;
    height: 84px;
    width: auto;
    display: block;
}

.brand-naam {
    font: 600 1.1rem Montserrat, "Open Sans", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--huis-menu);
}

.hoofdmenu {
    gap: .25rem 1.4rem;
    align-items: center;
}

.hoofdmenu .nav-link,
.navbar .hoofdmenu .nav-link {
    font-family: Montserrat, "Open Sans", sans-serif;
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: .06em;
    color: var(--huis-menu);
    padding: .35rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    border-radius: 0;
}

    .hoofdmenu .nav-link:hover,
    .hoofdmenu .nav-link:focus-visible {
        color: var(--huis-menu);
        border-bottom-color: var(--huis-kop);
    }

    .hoofdmenu .nav-link.actief {
        border-bottom-color: var(--huis-accent);
    }

.hoofdmenu form {
    margin: 0;
}

.navbar-toggler {
    border-color: #e1dddc;
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(149, 141, 140, .3);
    }

@media (max-width: 991.98px) {
    .brand-logo {
        height: 60px;
    }

    .hoofdmenu {
        align-items: flex-start;
        padding: .75rem 0 .25rem;
    }

        .hoofdmenu .nav-link {
            font-size: .95rem;
            padding: .55rem 0;
        }
}

/* ---- Koppen en tekst ---- */
h1, h2,
.display-handwritten {
    font-family: "Shadows Into Light", "Open Sans", cursive;
    font-weight: 400;
    color: var(--huis-kop);
    letter-spacing: .02em;
}

.display-handwritten {
    font-size: clamp(3rem, 8vw, 4.6rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.eyebrow {
    color: var(--huis-knop);
    font-family: Montserrat, "Open Sans", sans-serif;
}

.lead-tekst {
    font-size: 1.2rem;
    line-height: 1.7;
}

/* ---- Knoppen: warm grijs met witte tekst, zoals "Lees meer" op de website ---- */
.btn {
    border-radius: .2rem;
    font-weight: 600;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--huis-knop);
    --bs-btn-border-color: var(--huis-knop);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--huis-knop-hover);
    --bs-btn-hover-border-color: var(--huis-knop-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--huis-knop-hover);
    --bs-btn-active-border-color: var(--huis-knop-hover);
    --bs-btn-disabled-bg: #cfc9c8;
    --bs-btn-disabled-border-color: #cfc9c8;
    --bs-btn-focus-shadow-rgb: 149, 141, 140;
}

.btn-outline-secondary {
    --bs-btn-color: var(--huis-knop-hover);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cfc9c8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--huis-knop);
    --bs-btn-hover-border-color: var(--huis-knop);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--huis-knop-hover);
    --bs-btn-active-border-color: var(--huis-knop-hover);
}

/* ---- Startpagina ---- */
.hero {
    height: clamp(200px, 32vw, 460px);
    background-size: cover;
    background-position: center 55%;
}

.sectie {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.sectie-wit {
    background: #fff;
}

.sectie-grijs {
    background: var(--huis-sectie-grijs);
}

.sectie-smal {
    max-width: 820px;
}

.sectie h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
}

.stappen-uitleg li {
    text-align: center;
}

.stappen-uitleg h3 {
    font: 600 1rem Montserrat, "Open Sans", sans-serif;
    letter-spacing: .03em;
    color: var(--huis-menu);
    margin: 1rem 0 .5rem;
}

.stappen-uitleg p {
    margin: 0;
}

.stap-cijfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e6e1e0;
    font: 400 1.8rem "Shadows Into Light", cursive;
    color: var(--huis-accent);
}

/* ---- Voettekst ---- */
footer.site-footer {
    background: var(--huis-footer);
    color: var(--huis-footer-tekst);
    border-top: 0;
    padding-top: 3.5rem;
    font-size: .92rem;
    text-align: left;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

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

.footer-kop {
    font: 700 .8rem Montserrat, "Open Sans", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.1rem;
}

.footer-telefoon {
    font: 500 1.35rem Montserrat, "Open Sans", sans-serif;
    margin-bottom: 1rem;
}

.footer-adres {
    font-size: .85rem;
}

.footer-logo {
    width: 170px;
    max-width: 60%;
    height: auto;
}

.footer-naam {
    font: 600 1.1rem Montserrat, "Open Sans", sans-serif;
    color: #fff;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: .9rem;
    margin-top: 1.5rem;
}

    .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        background: #fff;
    }

    .footer-social svg {
        width: 1.3rem;
        height: 1.3rem;
        fill: var(--huis-footer);
    }

.footer-links li {
    margin-bottom: .45rem;
}

.footer-onderregel {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    font-size: .8rem;
    color: #9a9ca3;
}

/* Rouwberichten: iets lagere fotostrook dan op de startpagina van het wensenboekje */
.hero-laag {
    height: clamp(160px, 22vw, 320px);
}

.intro .lead {
    max-width: 640px;
    margin-inline: auto;
}

.memorial-card h2 {
    font-size: 1.9rem;
}