/* ==========================================================
   TMCO.be — aanpassingen op Quark 2
   Plaats in: user/themes/quark2/css/custom.css

   Alles wat je normaal wil wijzigen staat in DEEL A.
   Deel B en verder zijn de werkende regels; daar hoef je
   in principe niet aan te komen.
   ========================================================== */


/* ==========================================================
   DEEL A — INSTELLINGEN
   ========================================================== */

:root {

    /* ---- Afbeeldingen -----------------------------------
       Controleer een pad door het rechtstreeks te openen:
       http://localhost:8080/<pad>
       ----------------------------------------------------- */
    --tmco-foto-about:    url('/user/themes/quark2/images/cropped-cropped-skyline.jpg');
    --tmco-foto-services: none;
    --tmco-foto-clients:  url('/user/themes/quark2/images/chess-pieces.jpg');
    --tmco-foto-contact:  none;

    /* ---- Sluier over de foto's --------------------------
       Hoger = foto vager, tekst rustiger.
       0.82 = foto duidelijk zichtbaar
       0.92 = foto als lichte textuur
       ----------------------------------------------------- */
    --tmco-sluier-licht:  rgba(255, 255, 255, 0.50);
    --tmco-sluier-donker: rgba(20, 26, 34, 0.55);

    /* ---- Kleuren ---------------------------------------- */
    --tmco-tekst-donker:  #1a1a1a;
    --tmco-tekst-licht:   #ffffff;
    --tmco-tint:          #fafafa;   /* lichte sectieachtergrond */
    --tmco-tint-donker:   #2a2a26;   /* donkere sectieachtergrond */	 
    --tmco-accent:        #666633;
    --tmco-accent-hover:  #4d4d26;
    --tmco-linkedin:      #0a66c2;
    --tmco-linkedin-hover:#004182;
 
 

    /* ---- Layout ----------------------------------------- */
    --tmco-breedte:          1100px;
    --tmco-breedte-relatief: 90%;
    --tmco-sectie-padding:   4rem;
    --tmco-header-hoogte:    5rem;   /* voor de scroll-offset */

    /* ---- Titels ----------------------------------------- */
    --tmco-titel-font:     'Helvetica Neue', Helvetica, Arial, sans-serif;
    --tmco-titel-grootte:  2.6rem;
    --tmco-titel-marge:    2.5rem;

    /* ---- Streepje onder de titel ------------------------ */
    --tmco-streep-breedte: 60px;
    --tmco-streep-dikte:   2px;
    --tmco-streep-marge:   1rem;

    /* ---- Logo ------------------------------------------- */
    --tmco-logo-hoogte:    clamp(30px, 6vw, 70px);
}


/* ---- Tekstkleur per sectie ------------------------------
   Kies per anker: --tmco-tekst-licht of --tmco-tekst-donker
   --------------------------------------------------------- */

.modular-hero     { --sectie-tekst: var(--tmco-tekst-licht);  }
.section-services { --sectie-tekst: var(--tmco-tekst-donker);  }
.section-clients  { --sectie-tekst: var(--tmco-tekst-donker); }
.section-contact  { --sectie-tekst: var(--tmco-tekst-donker); }


/* ---- Achtergrondkleur per sectie ------------------------ */

.section-services { background-color: var(--tmco-tint); }
.section-contact  { background-color: var(--tmco-tint);        }


/* ==========================================================
   DEEL B — WERKENDE REGELS
   ========================================================== */

/* ---- 1. Tekstbreedte, gelijk voor alle secties ---------- */

.modular-hero .container,
.modular-hero .container > *,
.modular-hero p,
.modular-hero ul,
.modular-hero ol,
.section .container,
.section .container > *,
.section p,
.section ul,
.section ol {
    max-width: none !important;
    max-inline-size: none !important;
    width: auto !important;
}

.modular-hero .container,
.section .container {
    max-width: var(--tmco-breedte) !important;
    width: var(--tmco-breedte-relatief) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* Inline `grid-column` van het thema overrulen, anders blijft
   een sectie smal zodra er ooit een afbeelding in de map stond */
.section .column,
.modular-hero .column {
    max-width: none !important;
    grid-column: 1 / -1 !important;
    margin-left: auto;
    margin-right: auto;
}

.section .columns,
.section .columns.align-right {
    justify-content: center;
}


/* ---- 2. Tekstkleur toepassen --------------------------- */

.section,
.section h1, .section h2, .section h3,
.section p,  .section li,
.modular-hero,
.modular-hero h1, .modular-hero h2,
.modular-hero p,  .modular-hero li {
    color: var(--sectie-tekst, var(--tmco-tekst-donker));
}


/* ---- 3. Titels ----------------------------------------- */

.modular-hero h1,
.modular-hero h2,
.section h2 {
    text-align: center;
    font-family: var(--tmco-titel-font);
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-size: var(--tmco-titel-grootte);
    margin-bottom: var(--tmco-titel-marge);
}

/* Streepje van het thema onderdrukken (stond linksboven) */
.section.modular-text h2::before,
.section.modular-text .column::before,
.section.modular-text hr {
    display: none !important;
}

/* Eigen streepje, gecentreerd onder de titel */
.modular-hero h1::after,
.modular-hero h2::after,
.section h2::after {
    content: '';
    display: block;
    width: var(--tmco-streep-breedte);
    height: var(--tmco-streep-dikte);
    background: currentColor;
    opacity: 0.7;
    margin: var(--tmco-streep-marge) auto 0;
}


/* ---- 4. Sectieruimte, geen witte banden ---------------- */

.section.modular-text {
    padding-top:    var(--tmco-sectie-padding);
    padding-bottom: var(--tmco-sectie-padding);
}

.section,
.modular-hero {
    margin-top: 0;
    margin-bottom: 0;
}

/* Ankers nemen geen ruimte in, maar houden de scroll-offset */
.module-anchor {
    height: 0;
    margin: 0;
    padding: 0;
    scroll-margin-top: var(--tmco-header-hoogte);
}


/* ---- 5. Foto-achtergronden ----------------------------- */

.section-foto {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-foto::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tmco-sluier-licht);
    pointer-events: none;
}

/* Donkere sluier waar de tekst licht is */
.section-foto.sluier-donker::before {
    background: var(--tmco-sluier-donker);
}

/* Tekst boven de sluier houden */
.section-foto .container {
    position: relative;
    z-index: 1;
}

/* Foto per sectie */
.section-services.section-foto { background-image: var(--tmco-foto-services); }
.section-clients.section-foto  { background-image: var(--tmco-foto-clients);  }
.section-contact.section-foto  { background-image: var(--tmco-foto-contact);  }


/* ---- 6. Hero ------------------------------------------- */

.modular-hero .image-overlay {
    background: var(--tmco-sluier-donker);
}

.modular-hero p {
    font-size: 1.05rem;
    line-height: 1.7;
}


/* ---- 7. Logo ------------------------------------------- */

#header .logo img,
#header .logo a img,
.header .logo img,
header .logo img,
.site-logo img,
.logo img {
    height: var(--tmco-logo-hoogte) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
}

/* ---- 8. Contactknoppen --------------------------------- */

.contact-knoppen {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.knop {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.8rem;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 3px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: background 0.2s ease;
}

.knop svg {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.knop-mail          { background: var(--tmco-accent); }
.knop-mail:hover,
.knop-mail:focus    { background: var(--tmco-accent-hover); color: #fff !important; }

.knop-linkedin      { background: var(--tmco-linkedin); }
.knop-linkedin:hover,
.knop-linkedin:focus{ background: var(--tmco-linkedin-hover); color: #fff !important; }

.section-contact .column,
.section-contact p,
.section-contact h2 {
    text-align: center !important;
}
.knop {
    min-width: 15rem;
    justify-content: center;
}

#footer,
.footer,
footer {
    display: none;
}