/*
Theme Name: Faber Parketvloeren
Theme URI: https://faberparket.nl
Author: Extin BV
Author URI: https://extin.eu
Description: Eigen thema voor Faber Parketvloeren, ontworpen en gebouwd door Extin BV. Het thema verzorgt alleen de header en de footer; de inhoud van elke pagina wordt in Elementor gebouwd.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: faber-parketvloeren
Update URI: false
Tags: custom, elementor
*/

/* Lettertypes, lokaal geladen */
@font-face { font-family: "Red Hat Display"; src: url("fonts/RedHatDisplay.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }

/* Alleen voor header en footer van het thema */
:root {
  --faber-brand: #00ADEF;
  --faber-brand-strong: #0079AD;
  --faber-brand-deep: #004A72;
  --faber-ink: #0B3044;
  --faber-ink-soft: #4A6575;
  --faber-surface: #FFFFFF;
  --faber-tint: #EFF8FD;
  --faber-line: #D3E6F0;
  --faber-on-dark: #FFFFFF;
  --faber-font-display: "Red Hat Display", "Nunito Sans", "Arial";
  --faber-font-body: "Nunito Sans", "Arial";
  --faber-fs-sm: 0.9375rem;
  --faber-fs-base: 1.0625rem;
  --faber-fs-lg: 1.25rem;
  --faber-space-2xs: 0.25rem;
  --faber-space-xs: 0.5rem;
  --faber-space-sm: 0.75rem;
  --faber-space-md: 1rem;
  --faber-space-lg: 1.5rem;
  --faber-space-xl: 2rem;
  --faber-space-2xl: 3rem;
  --faber-space-3xl: 4.5rem;
  --faber-container: 78rem;
  --faber-gutter: 2.5rem;
  --faber-header-h: 6.25rem;
  --faber-logo-h: 4.25rem;
  --faber-footer-logo-h: 4.5rem;
  --faber-button-h: 3.25rem;
  --faber-radius-sm: 0.25rem;
  --faber-radius-pill: 62rem;
  --faber-border: 1px;
  --faber-border-strong: 2px;
}

html { scroll-padding-top: var(--faber-header-h); }
body {
  margin: 0;
  background: var(--faber-surface);
  color: var(--faber-ink);
  font-family: var(--faber-font-body);
  font-size: var(--faber-fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.faber-skip { position: absolute; left: -9999px; }
.faber-skip:focus { left: var(--faber-space-md); top: var(--faber-space-md); z-index: 100; background: var(--faber-surface); padding: var(--faber-space-sm) var(--faber-space-md); }
.faber-fallback { max-width: var(--faber-container); margin: 0 auto; padding: var(--faber-space-3xl) var(--faber-gutter); }

.faber-404 h1 { font-family: var(--faber-font-display); font-size: 2.625rem; line-height: 1.1; color: var(--faber-ink); margin: 0 0 var(--faber-space-md); }
.faber-404 p { color: var(--faber-ink-soft); margin: 0 0 var(--faber-space-lg); }

/* Header */
.faber-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--faber-surface);
  border-bottom: var(--faber-border) solid var(--faber-line);
}
.admin-bar .faber-header { top: 32px; }
.faber-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faber-space-xl);
  min-height: var(--faber-header-h);
  max-width: var(--faber-container);
  margin: 0 auto;
  padding: 0 var(--faber-gutter);
  box-sizing: border-box;
}
.faber-logo { display: flex; align-items: center; }
.faber-logo img { height: var(--faber-logo-h); width: auto; display: block; }
.faber-logo-text { font-family: var(--faber-font-display); font-weight: 800; font-size: var(--faber-fs-lg); color: var(--faber-brand); }
.faber-nav ul { display: flex; align-items: center; gap: var(--faber-space-2xs); margin: 0; padding: 0; list-style: none; }
.faber-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--faber-button-h);
  padding: 0 var(--faber-space-sm);
  border-bottom: var(--faber-border-strong) solid transparent;
  color: var(--faber-ink);
  font-size: var(--faber-fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}
.faber-nav a:hover { color: var(--faber-brand-strong); }
.faber-nav .current-menu-item > a, .faber-nav .current_page_item > a { color: var(--faber-brand-strong); border-bottom-color: var(--faber-brand); }
.faber-actions { display: flex; align-items: center; gap: var(--faber-space-md); }
.faber-phone { display: inline-flex; align-items: center; gap: var(--faber-space-xs); color: var(--faber-ink); font-size: var(--faber-fs-sm); font-weight: 600; text-decoration: none; }
.faber-phone svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.faber-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--faber-button-h);
  padding: 0 var(--faber-space-xl);
  border-radius: var(--faber-radius-sm);
  background: var(--faber-brand-strong);
  color: var(--faber-on-dark);
  font-size: var(--faber-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 160ms ease;
}
.faber-button:hover { background: var(--faber-brand-deep); color: var(--faber-on-dark); }
.faber-toggle {
  display: none;
  align-items: center;
  gap: var(--faber-space-xs);
  min-height: var(--faber-button-h);
  padding: 0 var(--faber-space-md);
  border: var(--faber-border) solid var(--faber-line);
  border-radius: var(--faber-radius-sm);
  background: var(--faber-surface);
  color: var(--faber-ink);
  font-family: var(--faber-font-body);
  font-size: var(--faber-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.faber-bars { display: flex; flex-direction: column; gap: var(--faber-space-2xs); }
.faber-bars span { display: block; width: 1.25rem; height: 0.125rem; background: var(--faber-ink); border-radius: var(--faber-radius-pill); }
.faber-mobile { padding: var(--faber-space-xs) var(--faber-gutter) var(--faber-space-lg); border-top: var(--faber-border) solid var(--faber-line); }
.faber-mobile[hidden] { display: none; }
.faber-mobile ul { display: flex; flex-direction: column; gap: var(--faber-space-2xs); margin: 0; padding: 0; list-style: none; }
.faber-mobile a:not(.faber-button) { display: flex; align-items: center; min-height: var(--faber-button-h); padding: 0 var(--faber-space-md); color: var(--faber-ink); font-size: var(--faber-fs-lg); font-weight: 600; text-decoration: none; }
.faber-mobile .current-menu-item > a { color: var(--faber-brand-strong); }
.faber-mobile .faber-button { margin-top: var(--faber-space-sm); width: 100%; }

/* Footer */
.faber-footer { background: var(--faber-tint); color: var(--faber-ink); font-size: var(--faber-fs-sm); padding: var(--faber-space-3xl) 0 var(--faber-space-xl); }
.faber-footer-inner { display: flex; flex-direction: column; gap: var(--faber-space-2xl); max-width: var(--faber-container); margin: 0 auto; padding: 0 var(--faber-gutter); box-sizing: border-box; }
.faber-footer-cols { display: flex; gap: var(--faber-space-2xl); }
.faber-footer-brand { flex: 1.6 1 0; display: flex; flex-direction: column; gap: var(--faber-space-md); }
.faber-footer-brand img { height: var(--faber-footer-logo-h); width: auto; align-self: flex-start; display: block; }
.faber-footer-col { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--faber-space-xs); }
.faber-footer-title { font-family: var(--faber-font-display); font-size: var(--faber-fs-base); font-weight: 700; color: var(--faber-ink); margin: 0 0 var(--faber-space-xs); }
.faber-footer a { color: var(--faber-ink-soft); text-decoration: none; }
.faber-footer a:hover { color: var(--faber-brand-strong); }
.faber-footer p { margin: 0; color: var(--faber-ink-soft); }
.faber-footer-bottom { display: flex; justify-content: space-between; gap: var(--faber-space-md); flex-wrap: wrap; padding-top: var(--faber-space-lg); border-top: var(--faber-border) solid var(--faber-line); color: var(--faber-ink-soft); }

a:focus-visible, button:focus-visible { outline: var(--faber-border-strong) solid var(--faber-brand-strong); outline-offset: 2px; }

@media (max-width: 1024px) {
  :root { --faber-gutter: 2rem; }
  .faber-nav, .faber-phone { display: none; }
  .faber-toggle { display: inline-flex; }
  .faber-footer-cols { flex-wrap: wrap; }
  .faber-footer-brand { flex: 1 1 100%; }
}
@media (max-width: 782px) { .admin-bar .faber-header { top: 46px; } }
@media (max-width: 767px) {
  :root { --faber-gutter: 1.25rem; --faber-header-h: 5rem; --faber-logo-h: 3.25rem; --faber-space-3xl: 2.5rem; }
  .faber-actions .faber-button { display: none; }
  .faber-footer-cols { flex-direction: column; gap: var(--faber-space-xl); }
  .faber-footer-bottom { flex-direction: column; gap: var(--faber-space-xs); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }