/*
Theme Name: Van der Vis
Theme URI: https://vandervis.nl
Author: Oosterom Studio
Author URI: https://oosteromstudio.nl
Description: Custom thema voor Van der Vis Bouw & Renovatie
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: vandervis
*/

/* ── Root ── */
:root {
    --color-primary: #E8A020;
    --color-primary-hover: #e6b557;
    --color-primary-dark: #C4861A;
    --color-secondary-dark: #1A1A1A;
    --color-background: #f1f1f1;
    --color-surface: #ffffff;
    --color-text: #000000;
    --color-text-muted: #555555;
    --color-border: #e0e0e0;
    --color-success: #22c55e;
    --color-danger: #ef4444;

    --font-family: Inter, system-ui, sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.75rem;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.15);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    --container-width: 1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    font-family: var(--font-family);
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.15; }

/* ── Utility ── */
.container {
    max-width: var(--container-width);
    padding: 0 24px;
    margin: 0 auto;
}

.sectie         { padding: var(--space-3xl) 24px; }
.sectie-donker  { background: var(--color-secondary-dark); color: #fff; }
.sectie-goud    { background: var(--color-primary); }
.sectie-grijs   { background: var(--color-background); }
.sectie-wit     { background: var(--color-surface); }

/* ── Knoppen ── */
.knop-primair {
    display: inline-block;
    background: var(--color-secondary-dark);
    color: #fff;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);

    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity var(--transition-normal);
}
.knop-primair:hover { opacity: 0.82; color: #fff; }

.knop-goud {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-secondary-dark);
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-normal);
}
.knop-goud:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-secondary-dark); }

.knop-outline {
    display: inline-block;
    background: transparent;
    color: var(--color-secondary-dark);
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 2px solid var(--color-secondary-dark);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-normal), color var(--transition-normal);
}
.knop-outline:hover { background: var(--color-secondary-dark); color: #fff; }

.knop-outline-wit {
    display: inline-block;
    background: transparent;
    color: #fff;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 2px solid #fff;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-normal), color var(--transition-normal);
}
.knop-outline-wit:hover { background: #fff; color: var(--color-secondary-dark); }

.knop-pill-goud {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-secondary-dark);
    padding: 16px 32px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-radius: 100px;
    transition: background var(--transition-normal);
}
.knop-pill-goud:hover { background: var(--color-primary-hover); color: var(--color-secondary-dark); }

.knop-pill-wit {
    display: inline-block;
    background: transparent;
    color: #fff;
    padding: 16px 32px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-radius: 100px;
    border: 1.5px solid rgba(255,255,255,0.4);
    transition: border-color var(--transition-normal), background var(--transition-normal);
}
.knop-pill-wit:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }

/* ── Wenkbrauw ── */
.wenkbrauw {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    display: block;
    margin-bottom: 10px;
}

/* ── Pagina header ── */
.pagina-header {
    color: var(--color-text);
    padding: 60px 24px;
    text-align: center;
}
.pagina-header h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); color: var(--color-text); }
.pagina-header p  { color: var(--color-text); font-size: var(--font-size-lg); max-width: 560px; margin: 0 auto; }

/* ── WordPress specifiek ── */
.wp-block-image { margin: 0; }
.aligncenter { text-align: center; }