/* CIBG Huisstijl (a customized Bootstrap 5.2 build) is loaded as a plain <link> in
   index.html (public/cibg-huisstijl/css/huisstijl.min.css) so its relative url(../fonts|
   icons|images) references resolve at runtime.

   Token bridge: the app's components reference a semantic `--rhc-*` token vocabulary
   (316 refs, 54 tokens). Rather than rewrite every reference, we redefine those tokens
   HERE onto CIBG/Bootstrap values (--bs-* where one exists, CIBG palette hex otherwise).
   The names are now an internal alias set; the VALUES are CIBG. (styles.scss is exempt
   from check:tokens, so palette hex is allowed in this one file.) */
:root {
  /* — semantic foreground/background/border — */
  --rhc-color-foreground-default: var(--bs-body-color);
  --rhc-color-foreground-subtle: #617286;               /* CIBG meta grey */
  --rhc-color-foreground-link: var(--bs-link-color);    /* #01689b */
  --rhc-color-foreground-link-hover: #154273;           /* CIBG active/hover */
  --rhc-color-foreground-on-primary: #fff;
  --rhc-color-border-default: var(--bs-border-color);
  --rhc-color-border-subtle: #e2e8f0;
  --rhc-color-border-strong: #adb5bd;
  --rhc-color-wit: #fff;

  /* — greys — */
  --rhc-color-cool-grey-100: #f8fafc;
  --rhc-color-cool-grey-200: #f1f5f9;
  --rhc-color-cool-grey-300: #e2e8f0;
  --rhc-color-grijs-100: #f1f5f9;
  --rhc-color-grijs-200: #e2e8f0;
  --rhc-color-grijs-300: #cbd5e1;
  --rhc-color-grijs-400: #94a3b8;
  --rhc-color-grijs-700: #334155;

  /* — blues (CIBG primary family) — */
  --rhc-color-lintblauw-100: #e6eef3;
  --rhc-color-lintblauw-500: #01689b;
  --rhc-color-lintblauw-600: #015a87;
  --rhc-color-lintblauw-700: #154273;
  --rhc-color-hemelblauw-100: #e6f0f5;
  --rhc-color-hemelblauw-500: #01689b;
  --rhc-color-hemelblauw-700: #154273;
  --rhc-color-donkerblauw-700: #154273;

  /* — status colors (CIBG semantic) — */
  --rhc-color-groen-300: #e3f0d8;
  --rhc-color-groen-500: #39870c;
  --rhc-color-groen-700: #2a6609;
  --rhc-color-rood-100: #fbe4e2;
  --rhc-color-rood-300: #f0a9a3;
  --rhc-color-rood-500: #d52b1e;
  --rhc-color-rood-600: #b81f14;
  --rhc-color-geel-100: #fff4d6;
  --rhc-color-geel-600: #ffb612;
  --rhc-color-oranje-500: #e17000;

  /* — spacing scale (rem, Bootstrap-aligned) — */
  --rhc-space-max-xs: 0.25rem;
  --rhc-space-max-sm: 0.5rem;
  --rhc-space-max-md: 1rem;
  --rhc-space-max-lg: 1.5rem;
  --rhc-space-max-xl: 2rem;
  --rhc-space-max-2xl: 3rem;
  --rhc-space-max-3xl: 4rem;
  --rhc-space-max-4xl: 5rem;
  --rhc-space-max-5xl: 6rem;

  /* — border — */
  --rhc-border-radius-sm: var(--bs-border-radius-sm);
  --rhc-border-radius-md: var(--bs-border-radius);
  --rhc-border-radius-round: 50%;
  --rhc-border-width-sm: 1px;
  --rhc-border-width-md: 2px;

  /* — typography — */
  --rhc-text-font-size-sm: 0.875rem;
  --rhc-text-font-size-lg: 1.25rem;
  --rhc-text-font-weight-regular: 400;
  --rhc-text-font-weight-semi-bold: 600;
  --rhc-text-font-weight-bold: 700;
  --rhc-text-line-height-sm: 1.4;

  /* System-font stack (licensed Rijksoverheid fonts intentionally not bundled — POC). */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body { margin: 0; min-height: 100%; }
/* Pages sit on white; cards/panels carry the subtle grey. */
body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-default); }

/* App theme layer: a few app-specific measures RHC has no token for (content/form
   widths), defined ONCE here and mapped onto RHC where possible. Components reference
   these tokens instead of raw values. */
:root {
  --app-content-max: 67rem;                              /* readable page column */
  --app-form-max: 32rem;                                 /* default wizard form width */
  --app-form-narrow: 32rem;                              /* page-shell narrow variant */
  --app-skip-link-offset: -999px;                        /* off-screen skip link */
  --app-sidebar-width: 15rem;                            /* overview side navigation */
}

/* App utility classes: centralise the repeated inline layout idioms so components stay
   token-based and free of raw values. */
.app-form { max-inline-size: var(--app-form-max); }
.app-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rhc-space-max-md);
  align-items: center;
}
.app-button-row--spaced { margin-block-start: var(--rhc-space-max-xl); }
/* vertical rhythm between stacked blocks */
.app-stack > * + * { margin-block-start: var(--rhc-space-max-xl); }
.app-section { margin-block-start: var(--rhc-space-max-2xl); }
.app-text-subtle { color: var(--rhc-color-foreground-subtle); }
/* responsive card grid: cards wrap and stretch, gap from the spacing scale */
.app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--rhc-space-max-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Overview ("Mijn omgeving") layout: side navigation + main column. Collapses to
   a single column on narrow viewports (nav stacks above the content). */
.app-overview {
  display: grid;
  grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
  gap: var(--rhc-space-max-3xl);
  align-items: start;
}
@media (max-width: 48rem) {
  .app-overview { grid-template-columns: 1fr; }
}

/* Rijkshuisstijl form panel: the subtle-grey block a form sits in (see the
   rijksoverheid.nl contact-form reference). */
.app-form-panel {
  background: var(--rhc-color-cool-grey-100);
  border-radius: var(--rhc-border-radius-md);
  padding: var(--rhc-space-max-2xl);
}
/* Vertical rhythm between fields projected into a form panel. Global (not
   component-scoped) so it reaches projected content past view encapsulation. */
.app-form-panel > * + * { margin-block-start: var(--rhc-space-max-xl); }

/* Bordered info box (outline, no fill) — e.g. a "Vragen?" contact block. */
.app-info-box {
  border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
  border-radius: var(--rhc-border-radius-md);
  padding: var(--rhc-space-max-xl);
}

/* Route transitions (withViewTransitions): cross-fade the routed CONTENT only.
   The chrome gets its own stable view-transition-name so it's lifted out of the
   `root` snapshot and stays put while the content fades. */
app-site-header { view-transition-name: site-header; }
app-site-footer { view-transition-name: site-footer; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}

/* List-item enter/leave for lists that add/remove at runtime (aanvraag cards, upload
   rows). Used via Angular's native `animate.enter`/`animate.leave` — no @angular/animations. */
@keyframes app-item-enter { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
@keyframes app-item-leave {
  from { opacity: 1; max-block-size: 50rem; }
  to   { opacity: 0; transform: translateY(-0.25rem); max-block-size: 0; margin-block: 0; padding-block: 0; }
}
.app-item-enter { animation: app-item-enter 220ms ease both; }
.app-item-leave {
  display: block;   /* collapse needs block formatting (host is inline/flex by default) */
  overflow: hidden;
  pointer-events: none;
  /* ponytail: 50rem max-height hack; if an item is taller the collapse eases slightly late — measure height in JS then. */
  animation: app-item-leave 260ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  /* No animation → Angular removes the leaving node immediately (instant, no motion). */
  .app-item-enter, .app-item-leave { animation: none; }
}
