/*
Theme Name: Vakwerk
Theme URI: https://vakwerk.nl
Author: Oussama
Author URI: https://vakwerk.nl
Description: Professioneel WordPress-thema voor een ambachtelijk bouw- en interieurbedrijf. Industrieel design met focus op vakmanschap.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vakwerk
Tags: business, construction, industrial, dark, custom-colors, custom-menu
*/

:root {
  --color-bg:           #181818;
  --color-surface:      #222222;
  --color-surface-2:    #2a2a2a;
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-accent:       #c87941;
  --color-accent-light: #e09a62;
  --color-accent-dark:  #9e5c2c;
  --color-white:        #ffffff;
  --color-text:         rgba(255, 255, 255, 0.85);
  --color-text-muted:   rgba(255, 255, 255, 0.45);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  --font-xs:   clamp(0.7rem,  0.65rem + 0.2vw,  0.8rem);
  --font-sm:   clamp(0.85rem, 0.8rem  + 0.2vw,  0.95rem);
  --font-base: clamp(1rem,    0.95rem + 0.25vw,  1.1rem);
  --font-lg:   clamp(1.2rem,  1.1rem  + 0.5vw,   1.4rem);
  --font-xl:   clamp(1.5rem,  1.3rem  + 1vw,     2rem);
  --font-2xl:  clamp(2rem,    1.6rem  + 2vw,     3rem);
  --font-3xl:  clamp(2.8rem,  2rem    + 4vw,     5rem);
  --font-4xl:  clamp(3.5rem,  2.5rem  + 5vw,     7rem);

  --space-xs:  clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);
  --space-sm:  clamp(0.75rem, 0.6rem  + 0.75vw, 1.25rem);
  --space-md:  clamp(1.25rem, 1rem    + 1.25vw, 2rem);
  --space-lg:  clamp(2rem,    1.5rem  + 2.5vw,  3.5rem);
  --space-xl:  clamp(3rem,    2rem    + 5vw,    6rem);
  --space-2xl: clamp(5rem,    3rem    + 10vw,   10rem);

  --container-max: 1280px;
  --radius-sm:     3px;
  --radius-md:     6px;

  --transition-fast: 180ms ease;
  --transition-base: 300ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

p { margin-bottom: var(--space-sm); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent-light); }

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

img, picture, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; padding: 0; }

::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--font-sm);
  z-index: 99999;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: 0; outline: none; }

.eyebrow {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}