/* Dupré Decamp Institut — site styles.
   Component base look lives inline on each element (ported verbatim from the
   Claude Design prototype). This file only adds what inline styles cannot express:
   :hover / :focus-visible state, and the couple of small layout helpers the
   static markup needs instead of the prototype's reactive engine. */

@import url("fonts.css");
@import url("colors.css");
@import url("typography.css");
@import url("spacing.css");
@import url("motion.css");
@import url("semantic.css");
@import url("base.css");

body { margin: 0; background: var(--ivory); }
a { color: var(--sage-deep); }
a:hover { color: var(--sage); }
::selection { background: var(--sage); color: var(--ivory); }

/* Inline base styles have higher priority than ordinary stylesheet rules,
   so every hover/focus override below needs !important to win on :hover. */

.skip-link:focus { left: 8px !important; }

.hdr-cta:hover {
  border-color: var(--sage) !important;
  background: rgba(111,122,82,.16) !important;
}

.hero-btn-primary:hover {
  background: transparent !important;
  color: var(--sage-soft) !important;
}

.hero-btn-ghost:hover { border-color: var(--ivory) !important; }

.hero-banner:hover { background: rgba(111,122,82,.18) !important; }

.nav-link:hover { color: var(--sage) !important; }

.btn-primary:hover {
  background: transparent !important;
  color: var(--sage-deep) !important;
}

.btn-outline:hover {
  background: var(--sage) !important;
  color: var(--action-primary-fg) !important;
  border-color: var(--sage) !important;
}

.link-hover-sage:hover { color: var(--sage) !important; }

.footer-back-link:hover { color: var(--sage-soft) !important; }

.field:focus {
  border-color: var(--sage) !important;
  outline: none !important;
}

/* Filter pills (calendar) — active state is set via inline style from JS;
   give the inactive ones a light hover cue. */
.filter-pill:not(.is-active):hover { border-color: var(--sage) !important; color: var(--sage-deep) !important; }

/* Legal-page tabs */
.legal-tab:hover { color: var(--ivory) !important; }

/* Sticky mobile CTA: base position/transform set inline via JS,
   this only declares the transition. */
.sticky-cta { transition: transform .35s ease; }

@media (min-width: 700px) {
  .sticky-cta { display: none; }
}

[hidden] { display: none !important; }