/* ═══════════════════════════════════════════════════════════════════
   GLOBAL STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Box-sizing reset ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Base ───────────────────────────────── */
html, body {
  width: 100%;
}

/* ── Body: mobile bottom bar clearance ──────────────────────────── */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Images ─────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Typography: prevent overflow on small screens ──────────────── */
h1, h2, h3, h4 {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Form inputs ─────────────────────────────────────────────────── */
input, select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Buttons & links ─────────────────────────────────────────────── */
button, a.btn-primary, a.btn-ghost, a.btn-secondary {
  max-width: 100%;
  box-sizing: border-box;
}

/* Minimum 44px tap target on mobile — scoped away from sidebar nav */
@media (max-width: 1023px) {
  button:not(#sidebar button):not(#sidebar-nav-list button),
  a:not(#sidebar a):not(#sidebar-nav-list a),
  [role="button"]:not(#sidebar [role="button"]) {
    min-height: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MATERIAL SYMBOLS
   ═══════════════════════════════════════════════════════════════════ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  min-height: unset; /* exempt from 44px tap-target rule */
}


/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

/* Text stroke */
.text-stroke-primary {
  -webkit-text-stroke: 1px #000000;
  color: transparent;
}
.text-stroke-white {
  -webkit-text-stroke: 1px #ffffff;
  color: transparent;
}

/* Grid background */
.industrial-grid,
.hero-grid {
  background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Dashed industrial line */
.industrial-line {
  background-image: linear-gradient(90deg, #000 50%, transparent 50%);
  background-size: 20px 2px;
}

/* Left border accent */
.industrial-border-l {
  border-left: 4px solid #fe6b00;
}

/* Plinth / card surface */
.plinth-effect {
  background-color: #F4F4F4;
  border: 1px solid #E5E5E5;
}

/* Hard shadows */
.plinth-shadow,
.hard-shadow {
  box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1);
}
.shadow-hard {
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
}
.shadow-hard-interactive {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.shadow-hard-interactive:hover {
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.15);
  transform: translate(-2px, -2px);
}

/* Slanted clip */
.clip-path-slanted {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.custom-scrollbar::-webkit-scrollbar { height: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #fe6b00; }

/* Stats strip */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════════ */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-item.active .accordion-content {
  max-height: 500px;
}

.icon-rotate {
  transition: transform 0.35s ease;
}
.accordion-item.active .icon-rotate {
  transform: rotate(45deg);
}

.accordion-item {
  transition: all 0.3s ease;
}
.accordion-item.active {
  border-color: #FF6B00;
}
.accordion-item.active button {
  background: rgba(255, 107, 0, 0.06);
}


/* ═══════════════════════════════════════════════════════════════════