/*
 * Hark Base Theme — Hoofd-stylesheet
 * Fundament voor alle Hark Creative klantwebsites.
 */

/* ============================================================
   DESIGN TOKENS (zelfde als hark-blocks.css voor consistentie)
   ============================================================ */
:root {
    --hark-primary:     #1A3A5C;
    --hark-accent:      #FF6B35;
    --hark-light:       #F5F7FA;
    --hark-dark:        #0D1F33;
    --hark-text:        #333333;
    --hark-text-light:  #666666;
    --hark-border:      #DDE3EA;
    --hark-white:       #FFFFFF;
    --hark-radius:      8px;
    --hark-radius-lg:   16px;
    --hark-shadow:      0 4px 20px rgba(0,0,0,.08);
    --hark-max-width:   1200px;
    --hark-font:        'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --hark-header-h:    72px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--hark-font);
    color: var(--hark-text);
    background: var(--hark-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--hark-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hark-font);
    color: var(--hark-primary);
    line-height: 1.25;
    font-weight: 700;
}

ul, ol { padding-left: 1.5em; }
p      { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.hark-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--hark-white);
    border-bottom: 1px solid var(--hark-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.hark-header__inner {
    max-width: var(--hark-max-width);
    margin: 0 auto;
    padding: 0 24px;
    height: var(--hark-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hark-header__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.hark-header__logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.hark-header__sitename {
    font-size: 20px;
    font-weight: 800;
    color: var(--hark-primary);
    letter-spacing: -.4px;
}

/* Desktop nav */
.hark-nav {
    display: flex;
    align-items: center;
}
.hark-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hark-nav a {
    display: block;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--hark-text);
    border-radius: var(--hark-radius);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.hark-nav a:hover,
.hark-nav a.nav-selected,
.hark-nav a[class*="current"] {
    background: var(--hark-light);
    color: var(--hark-primary);
}
/* Concrete nav block classes */
.hark-nav .nav-path-selected > a,
.hark-nav .nav-path-selected > a:hover {
    color: var(--hark-accent);
    font-weight: 700;
}

/* Hamburger button */
.hark-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--hark-radius);
}
.hark-header__toggle span {
    display: block;
    height: 2px;
    background: var(--hark-primary);
    border-radius: 2px;
    transition: transform .25s;
}
.hark-menu-open .hark-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hark-menu-open .hark-header__toggle span:nth-child(2) { opacity: 0; }
.hark-menu-open .hark-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.hark-mobile-menu {
    background: var(--hark-white);
    border-top: 1px solid var(--hark-border);
    padding: 16px 24px 24px;
}
.hark-mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hark-mobile-menu a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--hark-text);
    border-bottom: 1px solid var(--hark-border);
    text-decoration: none;
}
.hark-mobile-menu a:hover { color: var(--hark-accent); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
#hark-main {
    min-height: 50vh;
}

/* Standaard content wrapper voor niet-blok-pagina's */
.hark-content {
    max-width: var(--hark-max-width);
    margin: 0 auto;
    padding: 60px 24px;
}

/* Concrete edit-mode lege gebieden iets ruimer */
.ccm-area-empty { min-height: 80px; }

/* ============================================================
   FOOTER
   ============================================================ */
.hark-footer {
    background: var(--hark-dark);
    color: rgba(255,255,255,.8);
}

.hark-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 16px 0;
}

.hark-footer__bottom-inner {
    max-width: var(--hark-max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

.hark-footer__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
}
.hark-footer__links a {
    color: rgba(255,255,255,.55);
    font-size: 13px;
}
.hark-footer__links a:hover { color: var(--hark-white); }

/* Footer Global Area content */
.hark-footer .ccm-area-wrapper,
.hark-footer .hb-section {
    padding: 60px 24px;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.hark-container {
    max-width: var(--hark-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   FORMS (globaal)
   ============================================================ */
input, select, textarea {
    font-family: var(--hark-font);
    font-size: 15px;
}

/* ============================================================
   BUTTONS (globaal — aanvullend op hark-blocks.css)
   ============================================================ */
.btn-primary-hark {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    background: var(--hark-accent);
    color: var(--hark-white);
    border-radius: var(--hark-radius);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s;
}
.btn-primary-hark:hover { background: #e55a28; color: var(--hark-white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .hark-nav    { display: none; }
    .hark-header__toggle { display: flex; }
}

@media (max-width: 480px) {
    :root { --hark-header-h: 60px; }
    .hark-footer__bottom-inner { flex-direction: column; text-align: center; }
}

/* ============================================================
   CONCRETE CMS OVERRIDE — verberg standaard Concrete elements
   die niet bij Hark passen
   ============================================================ */
.ccm-page-title h1:first-child { color: var(--hark-primary); }