/* ==========================================================================
   File: child-components.css
   Version: [2025.10.27.1]
   Project: [WRT Website]
   Author: ATvise Front-end Team
   Purpose: Reusable UI components built on top of the foundation.
   Ownership: Front-end / Component Library
   Notes:
     - Keep neutral (no brand colors).
     - Each block should be self-contained and reusable across projects.
   ========================================================================== */

/* == Card ================================================================== */

/* .c-card { display:flex; flex-direction:column; border-radius:var(--radius-md); } */
/* .c-card__media { aspect-ratio:16/9; overflow:hidden; } */
/* .c-card__body { padding:var(--space-4); } */

/* == Grid ================================================================== */

/* .c-grid { display:grid; gap:var(--space-4); } */
/* @media(min-width:768px){ .c-grid--cols-3 { grid-template-columns:repeat(3,1fr); } } */

/* == Navigation Skeleton =================================================== */

/* .nav { display:flex; gap:var(--space-3); align-items:center; } */
/* .nav__item { position:relative; } */



/* =================== AUTO-MERGED CSS FROM wrt-root.css =================== */
/* =========================================================
   BUTTON COMPONENT (NO-LAYER, WRAPPER-SAFE)
   ========================================================= */

/* Private aliases op de wrapper (erven door naar <a>/<button>) */
.btn {
  --_bd: var(--btn-stroke);
  --_bg: var(--btn-bg);
  --_fg: var(--btn-color);

  --_bd-hover: var(--btn-hover-stroke);
  --_bg-hover: var(--btn-hover-bg);
  --_fg-hover: var(--btn-hover-color);

  --_bd-focus: var(--btn-focus-stroke);
  --_bg-focus: var(--btn-focus-bg);
  --_fg-focus: var(--btn-focus-color);

  --_bd-active: var(--btn-active-stroke);
  --_bg-active: var(--btn-active-bg);
  --_fg-active: var(--btn-active-color);
}
/* Skin alléén op het klikbare element (a.btn / .btn > a) */
.btn:is(a, button),
.btn :is(a, button) {
  font: var(--btn-weight) var(--btn-fs) / var(--btn-leading) var(--btn-font);
  text-transform: var(--btn-transform, none);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid var(--_bd);
  background-color: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.02s;
}
/* States */
.btn:is(a, button):hover,
.btn :is(a, button):hover {
  background-color: var(--_bg-hover);
  color: var(--_fg-hover);
  border-color: var(--_bd-hover);
}
.btn:is(a, button):focus-visible,
.btn :is(a, button):focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
  background-color: var(--_bg-focus);
  color: var(--_fg-focus);
  border-color: var(--_bd-focus);
}
.btn:is(a, button):active,
.btn :is(a, button):active {
  background-color: var(--_bg-active);
  color: var(--_fg-active);
  border-color: var(--_bd-active);
  transform: translateY(1px);
}
/* Disabled */
.btn:is(a, button)[disabled],
.btn :is(a, button)[disabled],
.btn:is(a, button)[aria-disabled='true'],
.btn :is(a, button)[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
/* Variants (tokens → variabelen) */
.btn-primary {
  --btn-stroke: var(--btn-primary-stroke);
  --btn-bg: var(--btn-primary-bg);
  --btn-color: var(--btn-primary-color);
  --btn-hover-stroke: var(--btn-primary-hover-stroke);
  --btn-hover-bg: var(--btn-primary-hover-bg);
  --btn-hover-color: var(--btn-primary-hover-color);
  --btn-focus-stroke: var(--btn-primary-focus-stroke);
  --btn-focus-bg: var(--btn-primary-focus-bg);
  --btn-focus-color: var(--btn-primary-focus-color);
  --btn-active-stroke: var(--btn-primary-active-stroke);
  --btn-active-bg: var(--btn-primary-active-bg);
  --btn-active-color: var(--btn-primary-active-color);
}
.btn-secondary {
  --btn-stroke: var(--btn-secondary-stroke);
  --btn-bg: var(--btn-secondary-bg);
  --btn-color: var(--btn-secondary-color);
  --btn-hover-stroke: var(--btn-secondary-hover-stroke);
  --btn-hover-bg: var(--btn-secondary-hover-bg);
  --btn-hover-color: var(--btn-secondary-hover-color);
  --btn-focus-stroke: var(--btn-secondary-focus-stroke);
  --btn-focus-bg: var(--btn-secondary-focus-bg);
  --btn-focus-color: var(--btn-secondary-focus-color);
  --btn-active-stroke: var(--btn-secondary-active-stroke);
  --btn-active-bg: var(--btn-secondary-active-bg);
  --btn-active-color: var(--btn-secondary-active-color);
}
.btn-tertiary {
  --btn-stroke: var(--btn-tertiary-stroke);
  --btn-bg: var(--btn-tertiary-bg);
  --btn-color: var(--btn-tertiary-color);
  --btn-hover-stroke: var(--btn-tertiary-hover-stroke);
  --btn-hover-bg: var(--btn-tertiary-hover-bg);
  --btn-hover-color: var(--btn-tertiary-hover-color);
  --btn-focus-stroke: var(--btn-tertiary-focus-stroke);
  --btn-focus-bg: var(--btn-tertiary-focus-bg);
  --btn-focus-color: var(--btn-tertiary-focus-color);
  --btn-active-stroke: var(--btn-tertiary-active-stroke);
  --btn-active-bg: var(--btn-tertiary-active-bg);
  --btn-active-color: var(--btn-tertiary-active-color);
}
.btn-flat {
  --btn-stroke: var(--btn-flat-stroke);
  --btn-bg: var(--btn-flat-bg);
  --btn-color: var(--btn-flat-color);
  --btn-hover-stroke: var(--btn-flat-hover-stroke);
  --btn-hover-bg: var(--btn-flat-hover-bg);
  --btn-hover-color: var(--btn-flat-hover-color);
  --btn-focus-stroke: var(--btn-flat-focus-stroke);
  --btn-focus-bg: var(--btn-flat-focus-bg);
  --btn-flat-focus-color: var(--btn-flat-focus-color);
  --btn-active-stroke: var(--btn-flat-active-stroke);
  --btn-active-bg: var(--btn-flat-active-bg);
  --btn-active-color: var(--btn-flat-active-color);
}
/* Sizes & shapes */
.btn-sm {
  --btn-fs: 0.875rem;
  --btn-py: 0.4em;
  --btn-px: 0.8em;
}
.btn-lg {
  --btn-fs: 1.125rem;
  --btn-py: 0.65em;
  --btn-px: 1.2em;
}
.btn-pill {
  --btn-radius: 9999px;
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-stroke: transparent;
}
/* ========================================================================= */