/* These styles are generated from project.scss. */

/* ── CoSTAR logo theme switching ────────────────────────────────────────── */
/* Light theme (default): show light-bg variant, hide dark-bg variant */
.costar-logo-dark-theme  { display: none; }
.costar-logo-light-theme { display: inline-block; }

/* Dark theme */
html[data-theme="dark"] .costar-logo-dark-theme  { display: inline-block; }
html[data-theme="dark"] .costar-logo-light-theme { display: none; }

/* System theme: follow OS preference */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .costar-logo-dark-theme  { display: inline-block; }
  html[data-theme="system"] .costar-logo-light-theme { display: none; }
}

/* ── Landing hero (unauthenticated home) ──────────────────────────────────── */
/* A raised card that follows the theme: light surface in light mode, dark
   surface in dark mode. Bulma's scheme-main-ter, border and shadow variables
   all flip with the active theme, so a single rule adapts to both. */
.landing-hero {
  background: var(--bulma-scheme-main-ter);
  border: 1px solid var(--bulma-border-weak);
  box-shadow: var(--bulma-shadow);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* ── Brand: override Bulma's default blue link with purple ─────────────────── */
:root {
  --bulma-link-h: 271deg;
  --bulma-link-rgb: 164, 66, 255;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* ── Accessibility: text size ───────────────────────────────────────────── */
html[data-a11y-text="large"] {
  font-size: 112.5%;
}

html[data-a11y-text="extra-large"] {
  font-size: 125%;
}

/* ── Accessibility: contrast ────────────────────────────────────────────── */
html[data-a11y-contrast="high"] {
  filter: contrast(1.4);
}

html[data-a11y-contrast="low"] {
  filter: contrast(0.75);
}

/* ── Dark theme — Bulma v1 handles this natively via data-theme="dark" ──── */
/* Just set color-scheme so browser chrome (scrollbars, inputs) matches.    */
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] { color-scheme: dark; }
}
/* ── Accessibility: motion ──────────────────────────────────────────────── */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ── Form errors — Django's plain <ul class="errorlist"> in Bulma forms ─── */
.errorlist {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  color: var(--bulma-danger, #cc0f35);
  font-size: 0.875rem;
}

/* ── Sticky footer — short pages (sign-in, sign-up, 404) left the footer   */
/* floating mid-screen. Scoped with :has() so standalone layouts that also  */
/* load this file (the kiosk) keep their own full-height flow.             */
body:has(> .costar-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(> .costar-footer) > * { flex-shrink: 0; }
body:has(> .costar-footer) > .section { flex: 1 0 auto; }

/* ── Home tool cards — on a phone the columns stack into one long list, so */
/* every other card gets a tinted surface to separate them. Mixing toward */
/* the text colour darkens it in light mode and lightens it in dark mode.  */
.home-tools > .column > .card {
  height: 100%;
  border: 1px solid var(--bulma-border);
  box-shadow: 0 2px 8px hsla(var(--bulma-scheme-h), 20%, 20%, .12);
}
@media screen and (max-width: 768px) {
  .home-tools > .column { padding-block: 1rem; }
  /* A clear separator line between stacked cards */
  .home-tools > .column + .column {
    border-top: 3px solid color-mix(in srgb, var(--bulma-text) 40%, transparent);
  }
  .home-tools > .column:nth-child(even) > .card {
    background-color: color-mix(in srgb, var(--bulma-card-background-color) 90%, var(--bulma-text));
  }
}