/* ======================================================
   GK HERITAGE THEME 4.0
   Definitieve stylesheet voor Réunion - Genealogie Karreman
   ====================================================== */

:root {
    --gk-blue: #0F2340;
    --gk-blue-soft: #173D7A;
    --gk-gold: #C6A15B;
    --gk-gold-dark: #9D7633;
    --gk-bg: #F7F4EC;
    --gk-paper: #FFFEFC;
    --gk-white: #FFFFFF;
    --gk-text: #4F4F4F;
    --gk-border: rgba(15,35,64,.12);
    --gk-gold-border: rgba(198,161,91,.35);
    --gk-shadow-soft: 0 8px 25px rgba(15,35,64,.06);
    --gk-shadow-card: 0 18px 45px rgba(15,35,64,.10);
}

html,
body {
    margin: 0;
    color: var(--gk-text);
    background: #ffffff;
}

* { box-sizing: border-box; }

a,
a:visited {
    color: var(--gk-blue);
    text-decoration: none;
}

a:hover {
    color: var(--gk-gold-dark);
    text-decoration: none;
}

.smallBullet { color: #4D3300; }
.citation a { color: #990000; }

/* ======================================================
   HEADER
   ====================================================== */

.gk-header {
    width:100vw;
    margin-left:calc(-50vw + 50%);
    background:#fff;
    border-bottom:1px solid rgba(15,35,64,.08);
    box-shadow:0 1px 8px rgba(15,35,64,.05);
}

.gk-header-inner {
    width:100%;
    max-width:1200px;
    height:118px;
    margin:0 auto;
    padding:0 20px 0 0;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.gk-logo {
    padding-top:18px;
    margin-left:-38px;
}

.gk-logo img {
    height:72px;
    width:auto;
    display:block;
}

.gk-back{
    padding-top:28px;
    margin-right:12px;
}
.gk-back a{
    display:inline-block;
    padding:12px 22px;
    font-size:16px;
    font-weight:700;
    color:var(--gk-blue);
    background:#f8f8f8;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(15,35,64,.05);
    border: 2px solid var(--gk-gold-border);
    transition:.25s;
}

.gk-back a:hover{
    background:#fff8ed;
    color:var(--gk-gold-dark);
}


/* ======================================================
   RÉUNION MENU
   ====================================================== */

#pHeader {
    width: 100vw;
    height: 88px;
    margin-left: calc(-50vw + 50%);
    position: relative;
    background: transparent;
    border: 0;
    opacity: 1;
    z-index: 10;
}

#pTitle { visibility: hidden; }
#ddmenuspan { background: transparent; }

#menu,
#menu ul,
#menu li,
#menu a,
#dDMButton {
    text-shadow: none !important;
}

#dDMButton img {
    margin-left: 4px;
    vertical-align: middle;
}

@media all and (min-width: 769px) {
    #ddmenuspan {
        visibility: hidden;
        position: static;
    }

    #menu {
        visibility: visible;
        text-align: center;
        margin-top: 0;
    }

    #menu ul {
        width: min(1120px, calc(100vw - 48px));
        height: 56px;
        line-height: 56px;
        margin: 14px auto 0;
        padding: 0 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 58px;
        list-style: none;
        background: var(--gk-white);
        border: 2px solid var(--gk-gold-border);
        border-radius: 999px;
        box-shadow: 0 10px 28px rgba(15,35,64,.08);
    }

    #menu li {
        display: inline-block;
        margin: 0;
        padding: 0;
        font-size: 16px;
        text-align: center;
    }

    #menu a {
        display: block;
        padding: 0 6px;
        color: var(--gk-blue);
        font-size: 17px;
        font-weight: 700;
        transition: color .2s ease;
    }

    #menu a:hover { color: var(--gk-gold-dark); }
}

/* ======================================================
   ZOEKFUNCTIE
   ====================================================== */

#search {
    width: 100%;
    max-width: 560px;
    max-height: 34px;
    margin: 8px auto 0;
    text-align: center;
    visibility: hidden;
}

#searchBox {
    width: 85%;
    max-width: 520px;
    padding: 10px 18px;
    border: 1px solid rgba(15,35,64,.18);
    border-radius: 999px;
    color: var(--gk-blue);
    font-size: 16px;
    background: var(--gk-white);
    box-shadow: 0 4px 18px rgba(15,35,64,.08);
    -webkit-appearance: none;
}

#closeButton { margin: 8px 5px 0 7px; }

#tableBorder {
    width: 85%;
    max-width: 520px;
    max-height: 360px;
    margin: 8px auto 0;
    position: relative;
    right: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    background: var(--gk-white);
    border-radius: 12px;
    box-shadow: var(--gk-shadow-soft);
}

#results,
table#results {
    width: 100%;
    margin: auto;
    background: var(--gk-white);
}

table#results td.u { background: #E7FFC1; }

/* ======================================================
   PAGINATITELS EN INTRO
   ====================================================== */

.tocTitle,

.pageTitle{
    max-width:1100px;
    margin:90px auto 8px !important;
    padding:0 20px;
    color:var(--gk-blue) !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:40px !important;
    font-weight:700 !important;
    line-height:1.12 !important;
    text-align:center;
    text-shadow:none !important;
}
.tocTitle::after {
    content: "";
    display: block;
    width: 110px;
    height: 2px;
    margin: 18px auto 0;
    background: var(--gk-gold);
    border-radius: 999px;
}

.tocAuthor {
    margin: 14px auto 30px;
    color: var(--gk-gold-dark) !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none !important;
}

.gk-intro {
    max-width: 780px;
    margin: 0 auto 34px;
    padding: 0 20px;
    color: #4D4D4D;
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
}

.gk-intro p { margin: 0; }
.gk-intro strong { color: var(--gk-blue); }

/* ======================================================
   ALGEMENE KAARTEN
   ====================================================== */

.reportBody,
#rBody {
    max-width: 1100px;
    margin: 0 auto 70px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.reportBodyWrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 46px 60px 52px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--gk-gold-border);
    border-radius: 22px;
    box-shadow: var(--gk-shadow-card);
}

.tocLinksTitle,
.tocIntroTitle,
.tocContactTitle {
    margin: 0 0 28px;
    padding: 0;
    color: var(--gk-blue);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none !important;
}

.tocLinksTitle::after {
    content: "";
    display: block;
    width: 92px;
    height: 2px;
    margin: 12px auto 0;
    background: var(--gk-gold);
}

/* ======================================================
   STARTPAGINA GENERATIES
   ====================================================== */

.tocLinks{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap: 14px 20px;
}

.tocLinkStart{
    flex:0 0 calc(50% - 35px);
    background:#fffdf9;
    border:1px solid rgba(15,35,64,.10);
    border-radius:12px;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
}

.tocLinkStart:hover {
    transform: translateY(-1px);
    border-color: rgba(198,161,91,.55);
    box-shadow: 0 8px 18px rgba(15,35,64,.08);
}

.tocLinksIndent { display: none !important; }

.tocLinksStartData a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:60px;
    padding:0 22px;
    color:var(--gk-blue);
    font-weight:600;
    text-decoration:none;
}

.tocLinksStartData a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:64px;
    padding:0 22px;
    font-size:17px;
    font-weight:600;
}

.tocLinksStartData a::before{
    content:"❃";
    color:#C6A15B;
    font-size:16px;
    margin-right:14px;
}

.tocLinksStartData a::after {
    content: "›";
    color: var(--gk-gold);
    font-size: 26px;
    line-height: 1;
    margin-left: auto;
}

.tocLinksStartData a:hover { color: var(--gk-gold-dark); }

/* ======================================================
   RAPPORTPAGINA'S
   ====================================================== */

.rrPerson,
.rrSpouse,
.rrChildren { line-height: 1.65 !important; }

.rrPerson {
    margin-bottom: 26px;
    padding: 28px !important;
    background: var(--gk-white);
    border-left: 4px solid var(--gk-blue-soft) !important;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15,35,64,.06);
}

.rrPerson b,
.rrPerson strong { color: var(--gk-blue); }
.rrPerson a { font-weight: 700; }

.rrPerson hr {
    border: 0 !important;
    border-top: 1px solid #E2E2E2 !important;
}

.rrChildren {
    margin: 18px 0 22px !important;
    padding: 14px 18px !important;
    color: var(--gk-blue) !important;
    font-weight: 700 !important;
    background: #F7F9FC !important;
    border-radius: 12px !important;
}

.rrNav { margin: 22px 0 !important; }

.rrNav a {
    display: inline-block;
    padding: 10px 20px !important;
    color: var(--gk-blue-soft) !important;
    font-size: 14px !important;
    font-weight: 700;
    background: #F7F7F7;
    border-radius: 999px;
}

.rrNav a:hover { color: var(--gk-gold-dark) !important; }

/* ======================================================
   INDEX EN FAMILIENAMEN
   ====================================================== */

.idxBar,
.idxSur,
.surRecord {
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.idxBar {
    padding: 22px 28px !important;
    text-align: center !important;
    background: var(--gk-white) !important;
    border: 1px solid var(--gk-gold-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--gk-shadow-soft);
}

.idxBar a {
    display: inline-block;
    padding: 6px 9px !important;
    color: var(--gk-blue) !important;
    font-weight: 700 !important;
}

.idxBar a:hover { color: var(--gk-gold-dark) !important; }

.idxSur {
    margin-top: 20px !important;
    padding: 18px 16px 10px !important;
    color: var(--gk-blue) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    background: var(--gk-white) !important;
    border: 0 !important;
    border-bottom: 1px solid #E2E6EE !important;
}

.surRecord {
    padding: 10px 16px 10px 36px !important;
    line-height: 1.6 !important;
    background: var(--gk-white) !important;
    border: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
}

.surRecord a,
.idxSur + div a {
    color: var(--gk-blue);
    font-weight: 500;
}

.surLetter a {
    display: inline-block;
    width: 28px;
    margin-left: -12px !important;
    margin-right: 10px !important;
    color: var(--gk-blue) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: center;
    text-decoration: none !important;
}

/* ======================================================
   WEBCARDS EN OVERIG
   ====================================================== */

.wcParentName,
.wcChildName { color: #909090; }

.wcHFacts {
    color: #525252;
    border-color: #00AAF1;
    background-color: var(--gk-white);
}

.wcWFacts {
    color: #525252;
    border-color: #DE6A55;
    background-color: var(--gk-white);
}

.wcHusband,
.wcMWife,
.wcHFather,
.wcWFather,
.wcMChild,
.wcMChildBold,
table#results td.m,
.wcHFactsWrapper .wcFactPicture img {
    border-color: #00AAF1;
    background-color: #F8FCFD;
}

.wcWife,
.wcFHusband,
.wcHMother,
.wcWMother,
.wcFChild,
.wcFChildBold,
table#results td.f,
.wcWFactsWrapper .wcFactPicture img {
    border-color: #DE6A55;
    background-color: #FDF8F8;
}

.wcFactsRecord,
.wcFactTitle { border-color: #D0D0D0; }

.psSpousesTitle,
.psNotesTitle,
.wcChildrenTitle,
.psChildren { color: #888888; }

.psFooter,
.psPicture img { border-color: #B5B5B5; }
.footerWrapper { color: #525252; }

.box {
    border-color: #888888;
    background-position: bottom;
}

.connect { border-color: gray; }

.showSC {
    color: black;
    background-color: white;
    border-color: #888888;
}

.scView {
    color: #ABABAB;
    background-color: white;
    border-color: #888888;
}

/* ======================================================
   MOBIEL
   ====================================================== */

@media all and (max-width: 768px) {
    /* Mobiel uitklapmenu */

        #ddmenuspan{
            background:#ffffff !important;
            opacity:1 !important;
            backdrop-filter:none !important;
            -webkit-backdrop-filter:none !important;
            box-shadow:0 8px 24px rgba(15,35,64,.12);
            border-radius:12px;
            top: 42px !important;
        }

        #ddmenuspan ul{
            background:#ffffff !important;
            border:2px solid rgba(198,161,91,.35) !important;
            border-radius:12px !important;
            overflow:hidden;
        }
        
    .gk-header-inner {
        min-height: auto;
        display: block;
        padding: 14px 20px;
        text-align: center;
    }

    .gk-logo { margin-bottom: 10px; }

    .gk-logo img {
        height: 42px;
        margin: 0 auto;
    }

    .gk-back a {
        font-size: 12px;
        padding: 8px 14px;
    }

    #pHeader { height: 48px; }

    #ddmenuspan {
        right: 18px !important;
        top: 6px !important;
        z-index: 5;
    }

    #dDMButton img {
        width: 28px;
        height: auto;
    }

    #pTitle { display: none !important; }

    .tocTitle,
    .pageTitle {
        margin-top: 30px !important;
        font-size: 36px !important;
        line-height: 1.15 !important;
    }

    .tocAuthor {
        font-size: 16px;
        letter-spacing: 3px;
        margin-bottom: 26px;
    }

    .gk-intro {
        max-width: 92%;
        margin-bottom: 26px;
        font-size: 16px;
        line-height: 1.6;
    }

    .reportBody,
    #rBody {
        max-width: 100%;
        margin-bottom: 50px !important;
    }

    .reportBodyWrapper {
        margin: 0 ;
        padding: 30px 22px 34px;
        border-radius: 16px;
    }

    .tocLinksTitle,
    .tocIntroTitle,
    .tocContactTitle {
        font-size: 21px;
        letter-spacing: 3px;
    }

    .tocLinks{
        display:block !important;
    }

    .tocLinkStart{
        flex:none !important;
        width:100% !important;
        margin:0 0 14px 0 !important;
    }

    .tocLinksStartData a {
        min-height: 56px;
        font-size: 16px;
    }

    .pageBody {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .pageTitle{
        font-size:30px !important;
        line-height:1.15 !important;
    }
    .rrPerson {
        padding: 18px 16px !important;
        border-radius: 12px;
    }

    .idxBar,
    .idxSur,
    .surRecord { max-width: 100%; }

    .idxBar { padding: 14px 12px !important; }
    .idxBar a { padding: 5px 6px !important; }

    .idxSur {
        padding-left: 16px !important;
        font-size: 15px !important;
    }

    .surRecord {
        padding-left: 24px !important;
        padding-right: 16px !important;
    }
}
/* Horizontale lijn tussen header en Réunion-menu verwijderen */
#pHeader {
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#pHeader::before,
#pHeader::after {
    content: none !important;
    display: none !important;
}

#pBody {
    border-top: none !important;
    outline: none !important;
}