/* Box-model reset + base body styles for the full-visual-replacement
   route. Add smooth-scroll library classes (Lenis etc) here if/when
   the project uses one. */

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--brand-color-primary) var(--brand-color-light);
}

/* Visually hidden but present for screen readers/keyboard nav — the
   standard WP-ecosystem utility name, given a real definition here
   since this theme doesn't inherit one from a parent stylesheet. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--brand-color-light);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-color-primary);
  border: 2px solid var(--brand-color-light);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-color-accent);
}

body {
  font-family: var(--theme-font-body);
  color: var(--theme-color-text);
  background: var(--theme-color-background);
  -webkit-font-smoothing: antialiased;
}

p {
  line-height: 1.8;
}

/* Inline text links (inside running copy) keep normal text color but
   get an accent-colored underline — components with their own link
   treatment (nav, buttons, footer lists) don't put links inside <p>
   tags, so this stays scoped to body-copy prose without needing to
   override anything. A .button placed inside prose (e.g. the object's
   "Meer info" after its content) is excluded, otherwise it gets this
   fill-on-hover on top of its own. :where() keeps the selector at its
   original specificity, so component link styles still win as before. */
p a:not(:where(.button)),
.entry-content a:not(:where(.button)) {
  color: inherit;
  text-decoration-color: var(--theme-color-accent);
  text-decoration: none;
  transition: .25s 0s var(--theme-ease-signature);
  box-shadow: inset 0 -1px 0 0 var(--theme-color-accent);
}

p a:not(:where(.button)):hover,
.entry-content a:not(:where(.button)):hover {
   box-shadow: inset 0 -1.4em 0 0 var(--theme-color-accent);
}

/* Cross-document view transitions — CSS-native page-to-page nav
   animation (Chrome/Edge only as of writing; unsupported browsers get
   an ordinary instant navigation, no fallback needed). Named elements
   below morph between pages instead of the default cross-fade. Flat
   0.5s duration everywhere — kept simple on purpose after the earlier
   per-element timing/sequencing setup proved fragile. */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  /* One CTA bar per page morphs into the next page's: the one under the
     hero. A view-transition-name must be unique on a page — the front
     page's lower .section-cta__cta and the about page's .section-team__cta
     sit on a page that already has .section-hero__cta, and naming those
     too made Chrome abort the whole transition ("Unexpected duplicate
     view-transition-name"). */
  .section-hero__cta,
  .coming-soon__cta {
    view-transition-name: brand-frame__cta;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.5s;
  }

  /* The card-into-hero morph (object/news/team cards, via
     card-hero-transition.js) needs to paint above the default root
     group — otherwise the rest of the outgoing/incoming page's own
     cross-fade can stack over the growing image mid-transition, which
     reads as the surrounding grid overlapping it. */
  ::view-transition-group(.hero-morph) {
    z-index: 1;
  }
}

/* Entrance for custom Mapbox markers/labels (contact.css, single-object.css).
   A keyframe animation on purpose, not a transition + @starting-style:
   Mapbox writes inline styles on every marker root (opacity for terrain
   occlusion, transform for its position), and an inline opacity: 1 wins
   over the @starting-style value, so a transition has nothing to animate
   and the label just pops in. Running animations do override inline
   styles. Only opacity and the standalone `translate` property are
   animated — `transform` belongs to Mapbox's positioning. */
@keyframes map-marker-in {
  from {
    opacity: 0;
    translate: 0 0.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes map-marker-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}