/* ============================================
   EQ Ninjas — App UI Kit (visual components)
   - No global page layout here
   - Buttons, Loading, Start/Error UI, Nav, etc.
   ============================================ */

/* Links */
a, .btn-link { color: #0071c1; }

/* Form controls baseline size */
button, input, select, textarea { font-size: 16px; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.btn-primary { color: #fff; background: linear-gradient(135deg, #007bff, #0056b3); }
.btn-primary:hover { background: linear-gradient(135deg, #0056b3, #004494); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.btn-secondary { color: #333; background: linear-gradient(135deg, #f1f1f1, #ddd); }
.btn-secondary:hover { background: linear-gradient(135deg, #e0e0e0, #c9c9c9); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0); }

.btn-danger { color: #fff; background: linear-gradient(135deg, #dc3545, #b52a36); }
.btn-danger:hover { background: linear-gradient(135deg, #b52a36, #931f29); transform: translateY(-2px); }
.btn-danger:active { transform: translateY(0); }

body:not(.is-touch) .choice-button:hover,
body:not(.is-touch) .popup-button:hover {
  background-color: #eee;
  transform: scale(1.03);
}

/* ---------- Validation ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

/* ---------- Loading UI ---------- */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #333;
  z-index: 999;
}
.loading-text { animation: fadeIn 1.2s ease infinite alternate; }
@keyframes fadeIn { from { opacity: 0.4; } to { opacity: 1; } }

.loading-progress { display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle {
  fill: none; stroke: #e0e0e0; stroke-width: 0.6rem;
  transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: #1b6ec2;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
  position: absolute; text-align: center; font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ---------- Start Screen ---------- */
.start-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom right, #f0f8ff, #e0f7fa);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: 'Baloo 2', cursive; z-index: 999;
}
.start-message { font-size: 2rem; margin-bottom: 2rem; color: #333; }
.start-button {
  font-size: 1.5rem; padding: 1rem 2rem; border: none; border-radius: 12px;
  background-color: #ff9800; color: #fff; cursor: pointer; transition: background .3s ease;
}
body:not(.is-touch) .start-button:hover { background-color: #fb8c00; }

/* ---------- Error UI ---------- */
#blazor-error-ui {
  background: lightyellow; color: black;
  position: fixed; bottom: 0; left: 0; width: 100%;
  padding: 0.6rem 1.25rem; box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
  z-index: 1000; display: none;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; top: 0.5rem; right: 0.75rem; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- Highlighting (component-level overrides can extend) ---------- */
.word-span.highlighted { background-color: #ffe066 !important; border-radius: 4px; position: relative; z-index: 1; }
.word-group .word-span.highlighted { background-color: #ffe066 !important; border-radius: 4px; }

/* ---------- Touch mode tweaks ---------- */
body.is-touch .choice-button, body.is-touch .popup-button { transition: none; outline: none; }

/* ---------- Navigation (desktop) ---------- */
.nav-toggler { background-color: rgba(255, 255, 255, 0.1); }
.nav-top-row { min-height: 3.5rem; background-color: rgba(0,0,0,0.4); }
.nav-brand { font-size: 1.1rem; }
.bi { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; top: -1px; background-size: cover; }
.bi-house-door-fill-nav-menu { background-image: url("data:image/svg+xml,..."); }
.bi-plus-square-fill-nav-menu { background-image: url("data:image/svg+xml,..."); }
.bi-list-nested-nav-menu { background-image: url("data:image/svg+xml,..."); }
.nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; }
.nav-item:first-of-type { padding-top: 1rem; }
.nav-item:last-of-type { padding-bottom: 1rem; }
.nav-item ::deep a {
  color: #d7d7d7; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem;
}
.nav-item ::deep a.active { background-color: rgba(255,255,255,0.37); color: #fff; }
.nav-item ::deep a:hover  { background-color: rgba(255,255,255,0.1);  color: #fff; }

/* Desktop media fixes; .nav-scrollable 100svh now lives in layout.css */
@media (min-width: 641px) {
  .nav-toggler { display: none; }
  .collapse { display: block; }
}

/* ---------- Tiny extras ---------- */
h1:focus { outline: none; }

/* ============================================
   EQ Ninjas — Image Utilities (global, shared)
   - Use a single wrapper: .eqn-img
   - Tune with CSS var: --eqn-img-max-svh
   ============================================ */

/* Sensible defaults; override per screen when needed */
:root {
  --eqn-img-max-svh: 30;   /* % of safe viewport height allowed for image block */
  --eqn-img-radius: 12px;  /* global rounding */
  --eqn-img-gap: 8px;      /* space below image block */
}

/* Image wrapper: consistent rounded corners and sizing */
.eqn-img {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-height: clamp(140px, calc(var(--eqn-img-max-svh) * 1svh), 320px);
  margin: 0 0 var(--eqn-img-gap);

  /* remove padding & background */
  border-radius: var(--eqn-img-radius);
  overflow: hidden;
}

.eqn-img > img {
  display: block;
  max-width: 100%;
  max-height: 95%; /*shannan did this*/
  width: auto;
  height: auto;

  object-fit: contain;
  border-radius: var(--eqn-img-radius); /* ensure corners match wrapper */
}


/* Optional modifier: full-bleed hero/banner */
.eqn-img.eqn-img--cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional: fixed aspect-ratio helpers (use when you need zero layout shift) */
.eqn-img.eqn-img--ratio-16x9 { aspect-ratio: 16 / 9; }
.eqn-img.eqn-img--ratio-4x3  { aspect-ratio: 4 / 3; }
.eqn-img.eqn-img--ratio-1x1  { aspect-ratio: 1 / 1; }

/* Optional size presets (variable override is preferred; these are convenience classes) */
.eqn-img--xs { --eqn-img-max-svh: 20; }
.eqn-img--sm { --eqn-img-max-svh: 26; }
.eqn-img--md { --eqn-img-max-svh: 32; }
.eqn-img--lg { --eqn-img-max-svh: 38; }
.eqn-img--xl { --eqn-img-max-svh: 45; }

/* If images live in PageShell headers, keep a touch more breathing room */
.eqn-page .eqn-header .eqn-img { margin-bottom: 10px; }