/* Canon CDS tokens voor Acxess.
 * Bron: canon-europe.com/atoms-design-system + cds-app.css, via het aangeleverde
 * design system. Alleen fundament: fontstack, kleurvariabelen en de basisstaten
 * die Elementor zelf niet globaal kan zetten. Geen componentstyling. */

:root {
  --blue: #005ab4;
  --blue-light: #0071b8;
  --blue-hover: #00478e;
  --blue-active: #004181;
  --link-hover: #003468;
  --red: #cc0000;
  --gray: #6e7276;
  --gray-dark: #4b4f54;
  --graylight: #eceded;
  --gray-medium: #d9dbdc;
  --light: #f5f6f6;
  --dark: #323232;
  --secondary: #939598;

  --font-family-sans-serif: "Montserrat", Arial, sans-serif;
  --font-family-display: "Tungsten A", "Tungsten B", Helvetica, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --container-max: 1344px;
  --container-padding: 32px;

  --shadow-sm: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
  --transition-base: 0.15s ease-in-out;
  --focus-ring-primary: 0 0 0 0.2rem rgba(0, 90, 180, 0.5);
}

/* Elementor zet de displaykop op de enkele familienaam. Hier hangt de volledige
 * CDS-fallbackketen eraan, zodat het zonder Tungsten-licentie op Helvetica of
 * Arial uitkomt in plaats van op de generieke schreefloze van de browser.
 * Zodra de Tungsten-webfont er is: hieronder een @font-face toevoegen, klaar. */
:root {
  --e-global-typography-primary-font-family: var(--font-family-display);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Displaykop volgens CDS: Tungsten-stack, kapitalen, regelhoogte 1.0.
 * Als klasse zodat de volledige fallbackketen blijft staan; Elementor schrijft
 * op widgetniveau maar een enkele familienaam weg. */
.acxess-display .elementor-heading-title,
.acxess-display.elementor-heading-title,
.acxess-display {
  font-family: var(--font-family-display);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.005em;
}

/* Secundaire knop: omlijnd, op donkere grond. */
.acxess-btn-ghost .elementor-button {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  transition: var(--transition-base);
}
.acxess-btn-ghost .elementor-button:hover,
.acxess-btn-ghost .elementor-button:focus {
  background-color: #ffffff;
  color: var(--blue);
}

/* Kaart volgens CDS: wit, 1px rand, 4px radius, geen schaduw. Klikbaar licht op. */
.acxess-card {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.acxess-card-link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Focusring conform CDS, nooit de browser-outline. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor textarea:focus-visible,
.elementor select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-primary);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}