/* huisstijl.css — merklaag Rekenkamer Leiden & Leiderdorp
   Laadt na website.css; overschrijft alleen wat nodig is.
*/

@font-face {
    font-family: 'Arvo';
    src: url('/fonts/Arvo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-brand:      #d60b54;   /* roze/rood */
    --color-blue:       #017db7;   /* blauw */
    --color-dark-blue:  #01496a;   /* donkerblauw */
    --color-text:       #1d1d1b;
    --color-bg:         #fff;
    --font-heading:     'Arvo', Georgia, serif;
    --font-body:        'Open Sans', 'Noto Sans', sans-serif;
}

/* --- Typografie --- */

* { font-family: var(--font-body); }
body { color: var(--color-text); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

a { color: var(--color-blue); }
a:hover { color: var(--color-dark-blue); text-decoration: underline; }

/* --- Header --- */

#header {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 2147483647;
}

/* Bootstrap-achtig grid voor de header-nav */
#header .container-header {
    padding: 0;
}

#header .navbar.row {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    height: 140px;
    align-items: stretch;
}

/* Logo-kolom: wit, flexibele breedte */
#header .header-logo {
    display: flex;
    align-items: center;
    padding: 0 16px 0 24px;
    background: #fff;
    flex: 0 0 50%;
    max-width: 50%;
    z-index: 3;
    height: 140px;
    box-sizing: border-box;
}

/* Content-kolom: diagonaal design */
#header .header-content {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24px 0 0;
    gap: 8px;
    height: 140px;
    box-sizing: border-box;
    background: linear-gradient(to right, transparent 170px, #67CCFF 170px);
    z-index: 2;
}

/* Responsieve kolombreedtes (Bootstrap breakpoints zonder Bootstrap) */
@media (min-width: 768px) {
    #header .header-logo    { flex: 0 0 41.6667%; max-width: 41.6667%; } /* col-md-5 */
    #header .header-content { flex: 0 0 58.3333%; max-width: 58.3333%; } /* col-md-7 */
}
@media (min-width: 992px) {
    #header .header-logo    { flex: 0 0 25%; max-width: 25%; } /* col-lg-3 */
    #header .header-content { flex: 0 0 75%; max-width: 75%; } /* col-lg-9 */
}

#header .logo img {
    height: 72px;
    width: auto;
    display: block;
}

/* --- Diagonaal op header-content (SVG als content-image, zoals origineel) --- */

#header .header-content::before {
    content: url('/images/header-diagonal.svg');
    float: left;
    height: 140px;
    overflow: hidden;
}

/* --- Navigatie --- */

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
}

.main-navigation ul li a {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: border-color .15s, color .15s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.active > a {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

/* Sub-navigatie */
.main-navigation ul ul {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    flex-direction: column;
    min-width: 220px;
    z-index: 100;
}

.main-navigation ul li { position: relative; }
.main-navigation ul li:hover > ul { display: flex; }

.main-navigation ul ul li a {
    border-bottom: none;
    border-left: 3px solid transparent;
    padding: 10px 16px;
}

.main-navigation ul ul li a:hover {
    border-left-color: var(--color-brand);
    border-bottom: none;
}

/* --- Pagina-achtergrond en layout --- */

body { background: #fff; }



.main-content { background: transparent; width: 100%; }

#pagina {
    background: transparent;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* --- Artikelen --- */

#articles {
    background: #ebf8ff;
    padding: 40px 32px;
    width: 100%;
    min-height: 40vh;
}

/* Navigatie en zoekbalk in header-content: boven de pseudo-elements */
#header .main-navigation { position: relative; z-index: 3; flex: 1; min-width: 0; }

#header .header-search { display: none; } /* TODO: verwijder als zoekfunctie klaar is */
#header .header-search-disabled {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    width: 180px;
    display: flex;
    align-items: center;
}

#header .header-search input {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: .9em;
    width: 100%;
    outline: none;
}

#header .header-search input::placeholder { color: rgba(255,255,255,.8); }

#mobile-menu-trigger { position: relative; z-index: 3; }

/* --- Hero-afbeelding: edge-to-edge --- */

#header .container-header-image {
    display: none;
}

#header .header-image-wrap {
    width: 100%;
    max-height: 280px;
    overflow: hidden;
}

#header .header-image-wrap img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.article h1 { color: var(--color-blue); font-size: 2rem; margin-bottom: .5em; }
.article h2 { color: var(--color-blue); font-size: 1.4rem; margin-top: 1.5em; }
.article h3 { color: var(--color-dark-blue); font-size: 1.1rem; }

/* --- Nieuwsbericht --- */

.nieuwsbericht-datum { color: #6c757d; font-size: .9em; margin-top: -.3em; }

/* --- Onderzoek tijdlijn --- */

.fase-kop {
    background: var(--color-blue);
    color: #fff;
    font-family: var(--font-heading);
    padding: 8px 16px;
    margin: 1.5em 0 .5em;
    font-size: 1rem;
    border-radius: 2px;
}

.tijdlijn-rij { border-left: 3px solid var(--color-blue); }
.tijdlijn-rij:hover { border-left-color: var(--color-brand); }

.nieuws-uitklap summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-blue);
    list-style: none;
    padding: 2px 0;
}
.nieuws-uitklap summary::-webkit-details-marker { display: none; }
.nieuws-uitklap summary::before { content: '▶ '; font-size: .7em; }
.nieuws-uitklap[open] summary::before { content: '▼ '; }
.nieuws-uitklap-inhoud { padding: .5em 0 .5em 1em; border-left: 2px solid #e9ecef; }

/* --- Footer --- */

#footer,
#pagina #footer {
    display: flex;
    flex-direction: column;
    background: var(--color-dark-blue) !important;
    background-color: var(--color-dark-blue) !important;
    color: #fff;
    margin-top: 48px;
    width: 100%;
    min-height: unset;
    align-items: stretch;
    text-align: left;
    position: static;
}

#pagina #footer::after { display: none; }

#pagina #footer div {
    display: revert;
    flex-wrap: unset;
    justify-content: unset;
    align-items: unset;
    text-align: unset;
    margin: unset;
    padding: unset;
}

#footer a { color: #a8d4e8; }
#footer a:hover { color: #fff; }

#footer h2 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #fff;
    margin: 0 0 .75em;
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding-bottom: .4em;
}

#footer .container-footer {
    padding: 36px 32px;
}

#footer .footer-main {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

#footer .footer-col {
    font-size: .9em;
    line-height: 1.8;
    padding: 0 16px;
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    #footer .footer-col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

#footer .footer-link-label {
    font-weight: 600;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #a8d4e8;
    margin-top: .75em;
}

#footer .footer-btn {
    display: inline-block;
    border: 1px solid #a8d4e8;
    padding: 4px 14px;
    border-radius: 2px;
    font-size: .9em;
    text-decoration: none;
    margin-top: .5em;
}

#footer .footer-btn:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

#footer .footer-links {
    background: var(--color-blue);
    padding: 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer .footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .85em;
}

/* --- Nieuws/onderzoeken overzicht --- */

.nieuws-jaar { font-family: var(--font-heading); color: var(--color-dark-blue); font-size: 1.3rem; margin: 1.5em 0 .5em; border-bottom: 2px solid var(--color-brand); padding-bottom: 4px; }
.nieuws-item, .onderzoek-item { padding: .6em 0; border-bottom: 1px solid #e9ecef; }
.nieuws-item a, .onderzoek-item a { font-weight: 600; text-decoration: none; }
.nieuws-item a:hover, .onderzoek-item a:hover { text-decoration: underline; }
.onderzoek-status { font-size: .8em; background: var(--color-blue); color: #fff; border-radius: 3px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; }
.onderzoek-status.afgerond { background: var(--color-dark-blue); }