/* ==========================================================================
   Heiberger Solutions Inc — VersaCore / HSI Public Theme
   Tokens and patterns from Design-System-VersaCore-Theme (ADR-006)
   ========================================================================== */

:root {
  /* Brand accent */
  --hsi-orange: #e79215;
  --hsi-orange-dark: #d67f00;
  --hsi-orange-light: #f5a623;
  --hsi-orange-deep: #c06d00;

  /* Surfaces */
  --hsi-bg: #1e1e1e;
  --hsi-bg-deep: #151515;
  --hsi-bg-mid: #2d2d2d;
  --hsi-bg-elevated: #333;
  --hsi-bg-hover: #3a3a3a;
  --hsi-header: #444;

  /* Borders */
  --hsi-border: #444;
  --hsi-border-muted: #333;
  --hsi-border-input: #555;
  --hsi-border-accent: rgba(231, 146, 21, 0.35);
  --hsi-border-accent-soft: rgba(231, 146, 21, 0.18);

  /* Text */
  --hsi-text: #ffffff;
  --hsi-text-muted: rgba(255, 255, 255, 0.6);
  --hsi-text-soft: rgba(255, 255, 255, 0.76);
  --hsi-text-faint: rgba(255, 255, 255, 0.4);

  /* Semantic */
  --hsi-success: #28a745;
  --hsi-danger: #dc3545;
  --hsi-warning: #ffc107;
  --hsi-info: #17a2b8;

}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hsi-bg);
  color: var(--hsi-text);
  /* Scroll-friendly: avoid background-attachment:fixed (forces repaint every frame). */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(231, 146, 21, 0.12), transparent),
    linear-gradient(165deg, var(--hsi-bg-deep) 0%, var(--hsi-bg) 40%, var(--hsi-bg-mid) 100%);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

a {
  color: var(--hsi-orange);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--hsi-orange-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hsi-text);
  font-weight: 700;
}

.text-muted,
.text-secondary {
  color: var(--hsi-text-muted) !important;
}

/* Section titles: bar tracks heading text width (ADR-009). inline-block so
   width:100% on ::after is the text measure, not the full column. */
.section-title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.section-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 0.5rem;
  background: linear-gradient(90deg, var(--hsi-orange), var(--hsi-orange-dark));
  border-radius: 2px;
}

/* Centered band titles (e.g. Home Services / Products): parent .text-center
   centers the inline-block .section-title so the full-width bar sits under the text. */

/* -------------------------------------------------------------------------- */
/* Navbar                                                                     */
/* -------------------------------------------------------------------------- */

.app-navbar {
  /* Opaque shell — skip backdrop-filter so scroll does not re-blur page content under the nav */
  background: rgba(28, 28, 28, 0.98) !important;
  border-bottom: 2px solid var(--hsi-orange);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  padding: 0.5rem 0;
  z-index: 1030;
}

.app-navbar .navbar-brand {
  color: var(--hsi-text) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.app-navbar .navbar-brand img,
.app-navbar .navbar-brand .brand-logo {
  height: 40px;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

.app-navbar .navbar-brand .brand-text {
  color: var(--hsi-text);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Fallback text mark if logo fails to load */
.app-navbar .navbar-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--hsi-orange), var(--hsi-orange-dark));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.45rem 0.85rem !important;
  margin: 0 0.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active {
  color: #fff !important;
  background-color: var(--hsi-orange);
}

.app-navbar .dropdown-menu {
  background-color: var(--hsi-bg-elevated);
  border: 1px solid var(--hsi-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  padding: 0.4rem;
}

.app-navbar .dropdown-item {
  color: var(--hsi-text-soft);
  border-radius: 4px;
  padding: 0.5rem 0.85rem;
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus,
.app-navbar .dropdown-item.active,
.app-navbar .dropdown-item:active {
  background-color: var(--hsi-orange);
  color: #fff;
}

.app-navbar .navbar-toggler {
  border-color: var(--hsi-orange);
  border-width: 2px;
  padding: 0.35rem 0.55rem;
}

.app-navbar .navbar-toggler:hover,
.app-navbar .navbar-toggler:focus {
  border-color: var(--hsi-orange-light);
  box-shadow: 0 0 0 0.2rem rgba(231, 146, 21, 0.35);
}

/* Brand-orange hamburger (Bootstrap's light/dark SVG + invert was reading nearly black) */
.app-navbar .navbar-toggler-icon {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e79215' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -------------------------------------------------------------------------- */
/* App shell / content                                                        */
/* -------------------------------------------------------------------------- */

.app-shell {
  flex: 1 0 auto;
  padding: 1.75rem 0 3rem;
}

.app-content {
  background: rgba(45, 45, 45, 0.55);
  border: 1px solid var(--hsi-border-accent-soft);
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(231, 146, 21, 0.06);
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .app-content {
    padding: 2.5rem 2.25rem;
  }
}

/* Landing pages: full-bleed hero, no elevated panel on outer shell */
body.landing-page .app-shell {
  padding: 0;
}

body.landing-page .app-content.landing-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

.app-footer {
  flex-shrink: 0;
  background: var(--hsi-bg-deep);
  border-top: 2px solid var(--hsi-border-accent);
  color: var(--hsi-text-muted);
  padding: 2rem 0 1.5rem;
  margin-top: auto;
}

.app-footer a {
  color: var(--hsi-text-soft);
}

.app-footer a:hover {
  color: var(--hsi-orange);
}

.app-footer .footer-brand {
  color: var(--hsi-text);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.app-footer .footer-logo {
  height: 44px;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}

.app-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-footer .footer-links li {
  margin-bottom: 0.35rem;
}

.app-footer .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hsi-border);
  color: var(--hsi-text-soft);
  margin-right: 0.5rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.app-footer .social-link:hover {
  border-color: var(--hsi-orange);
  color: var(--hsi-orange);
  background: rgba(231, 146, 21, 0.08);
}

/* X (Twitter) brand mark — FA 5.15.4 has no X glyph; keep size/color with FA icons */
.social-icon-x {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.btn-base {
  border: none;
  border-radius: 6px;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.btn-base:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-base.btn-primary {
  background-color: var(--hsi-orange);
  border-color: var(--hsi-orange);
  color: #fff;
}

.btn-primary:hover,
.btn-base.btn-primary:hover {
  background-color: var(--hsi-orange-dark);
  border-color: var(--hsi-orange-dark);
  color: #fff;
}

/* Shared geometry so filled + outline CTAs match height and vertical text centering */
.btn-versacore,
.btn-outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.55rem 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  vertical-align: middle;
}

.btn-versacore {
  background: linear-gradient(135deg, var(--hsi-orange), var(--hsi-orange-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(231, 146, 21, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}

.btn-versacore:hover {
  color: #fff;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(231, 146, 21, 0.45);
}

.btn-outline-primary {
  color: var(--hsi-orange);
  border-color: var(--hsi-orange);
  background: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--hsi-orange);
  border-color: var(--hsi-orange);
  color: #fff;
}

.btn-versacore .fas,
.btn-versacore .far,
.btn-outline-primary .fas,
.btn-outline-primary .far {
  line-height: 1;
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Single full-width / solo hero CTA only (ADR-009). Do NOT pair with another
   differently shaped button — use btn-versacore + btn-outline-primary instead. */
.get-started-btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--hsi-orange), var(--hsi-orange-dark));
  box-shadow: 0 8px 28px rgba(231, 146, 21, 0.4);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.get-started-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(231, 146, 21, 0.5);
}

/* -------------------------------------------------------------------------- */
/* Cards                                                                      */
/* -------------------------------------------------------------------------- */

.card {
  background-color: var(--hsi-bg-mid);
  border: 1px solid var(--hsi-border);
  color: var(--hsi-text);
  border-radius: 12px;
}

.card .card-title {
  color: var(--hsi-text);
}

.card .card-text {
  color: var(--hsi-text-soft);
}

.card.dark-card {
  background: var(--hsi-bg-mid);
  border-color: var(--hsi-border);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card.dark-card:hover {
  border-color: var(--hsi-border-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Service nav cards (dark shell — matches product-card / dark-card) */
.nav-card {
  background: var(--hsi-bg-mid);
  border: 1px solid var(--hsi-border);
  border-radius: 12px;
  color: var(--hsi-text);
  padding: 1.5rem 1.25rem;
  height: 100%;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-card:hover {
  transform: translateY(-6px);
  border-color: var(--hsi-border-accent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}

.nav-card .nav-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(231, 146, 21, 0.12);
  color: var(--hsi-orange);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.nav-card h3,
.nav-card .nav-card-title {
  color: var(--hsi-text);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.nav-card p,
.nav-card .nav-card-body {
  color: var(--hsi-text-soft);
  font-size: 0.95rem;
  flex: 1;
  margin-bottom: 1rem;
}

.nav-card a.btn {
  margin-top: auto;
}

/* Product cards (dark shell) */
.product-card {
  background: var(--hsi-bg-mid);
  border: 1px solid var(--hsi-border);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--hsi-border-accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Media tile: product cards and standalone Overview columns */
.product-card-media {
  background: linear-gradient(145deg, var(--hsi-bg-elevated), var(--hsi-bg-deep));
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hsi-orange);
  font-size: 3rem;
}

.product-card .product-card-media {
  border-bottom: 1px solid var(--hsi-border);
  /* Uniform tile height across photo + logo cards (home / products hub) */
  height: 11.5rem;
  min-height: 11.5rem;
  max-height: 11.5rem;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Product photography — preserve natural aspect ratio; icon fallback when image missing */
.product-card-media--photo {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #1c1c1c;
  line-height: 0;
}

/* Soft blurred fill behind contained product photos (card tiles only).
   Uses a tiny --photo-url (JS downscales to ~48px) so blur stays cheap while scrolling. */
.product-card .product-card-media--photo {
  position: relative;
  background: #1c1c1c;
  /* Isolate tile paints so photo compositing does not thrash the rest of the page */
  contain: layout paint style;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.product-card .product-card-media--photo::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background-color: #242424;
  background-image: var(--photo-url, none);
  background-size: cover;
  background-position: center;
  /* Tiny --photo-url source (see site.js) keeps this blur cheap while scrolling */
  filter: blur(16px) saturate(0.75) brightness(0.45);
  transform: translateZ(0) scale(1.12);
}

.product-card-media--photo .product-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: top;
  background: transparent;
}

.product-card .product-card-media--photo .product-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.65rem;
  box-sizing: border-box;
}

.product-card-media--photo .product-media-fallback-icon {
  display: none;
  font-size: 4rem;
  line-height: 1;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
}

.product-card-media--photo.is-fallback {
  min-height: 160px;
}

.product-card .product-card-media--photo.is-fallback {
  min-height: 11.5rem;
  max-height: 11.5rem;
}

.product-card-media--photo.is-fallback.product-card-media--photo-lg {
  min-height: 240px;
}

.product-card-media--photo.is-fallback .product-photo {
  display: none !important;
}

.product-card-media--photo.is-fallback .product-media-fallback-icon {
  display: block;
}

/* Product detail Overview photos (outside .product-card) keep natural aspect ratio */
.product-card-media--photo.product-card-media--photo-lg {
  height: auto;
  max-height: none;
  min-height: 0;
}

.product-card-media--photo-lg .product-photo {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 0;
}

/* Product / brand logo tiles (company + VersaCore Historian) */
.product-card-media--logo {
  background: #e79215 !important;
  padding: 1rem;
}

.product-card .product-card-media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-brand-logo {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.product-card .product-brand-logo {
  max-height: 7.5rem;
}

.product-brand-logo--lg {
  max-height: 180px;
}

.product-detail-logo {
  max-width: min(100%, 420px);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  display: block;
}

.product-card .product-card-body {
  padding: 1.35rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

/* Description grows; kickers/labels do not — keeps action buttons aligned across cards */
.product-card .product-card-body > p {
  color: var(--hsi-text-soft);
}

.product-card .product-card-body > p:not(.small) {
  flex: 1 1 auto;
}

.product-card .product-card-actions {
  margin-top: auto;
  align-items: stretch;
  justify-content: center;
}

/* Match outline / secondary actions to Learn more (btn-versacore) height */
.product-card .product-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-height: 2.35rem;
  padding: 0.55rem 1.15rem;
  line-height: 1.25;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  vertical-align: middle;
}

.product-card .product-card-actions .btn-versacore {
  /* Keep filled CTA flush with outline height (border accounted via box-sizing) */
  border-color: transparent;
  padding: 0.55rem 1.15rem;
}

.product-card .product-card-actions .btn .fas,
.product-card .product-card-actions .btn .far {
  line-height: 1;
}

.product-card p {
  color: var(--hsi-text-soft);
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Landing hero                                                               */
/* -------------------------------------------------------------------------- */

.hero-landing {
  position: relative;
  padding: 4.5rem 1.25rem 3.5rem;
  text-align: center;
  background:
    linear-gradient(160deg, rgba(30, 30, 30, 0.92) 0%, rgba(45, 45, 45, 0.88) 55%, rgba(30, 30, 30, 0.95) 100%),
    linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 50%, #1a1a1a 100%);
  border-bottom: 1px solid var(--hsi-border-accent-soft);
  overflow: hidden;
}

.hero-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(231, 146, 21, 0.18), transparent 70%);
  pointer-events: none;
}

    .hero-landing .hero-inner {
        position: relative;
        z-index: 1;
        max-width: 1100px; /* Limit text width for readability 820 */
        margin: 0 auto;
    }

.hero-landing .hero-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--hsi-orange), var(--hsi-orange-dark));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 28px rgba(231, 146, 21, 0.4);
}

/* Official HSI company logo (same mark as MC flyers) */
.hero-landing .hero-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(220px, 55vw);
  max-height: 140px;
  margin: 0 auto 1.25rem;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(231, 146, 21, 0.4);
  object-fit: contain;
}

.hero-landing h1 {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 800;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75rem;
}

.hero-landing .hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--hsi-text-soft);
  margin-bottom: 1rem;
}

.hero-landing .hero-desc {
  color: var(--hsi-text-muted);
  max-width: 640px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

.hero-landing .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

/* Page hero (inner pages) */
.page-hero {
  margin: -0.5rem 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hsi-border);
}

.page-hero .d-flex.gap-2,
.page-hero .d-flex.gap-2 > .btn {
  align-items: center;
}

.page-hero h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 0.5rem;
}

.page-hero .lead {
  color: var(--hsi-text-soft);
  margin-bottom: 0;
}

/* Feature badges — solid fill (no backdrop-filter) to keep scroll compositing cheap */
.feature-badge {
  background: rgba(40, 40, 40, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  color: var(--hsi-text);
  height: 100%;
}

.feature-badge i {
  color: var(--hsi-orange);
  margin-right: 0.4rem;
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.form-label {
  color: var(--hsi-text);
  font-weight: 500;
}

.form-control,
.form-select {
  background-color: var(--hsi-bg-elevated);
  border: 1px solid var(--hsi-border-input);
  color: var(--hsi-text);
  border-radius: 6px;
}

.form-control::placeholder {
  color: var(--hsi-text-faint);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--hsi-bg-elevated);
  border-color: var(--hsi-orange);
  color: var(--hsi-text);
  box-shadow: 0 0 0 0.2rem rgba(231, 146, 21, 0.25);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--hsi-danger);
}

.invalid-feedback {
  color: #ff8a95;
}

.form-text {
  color: var(--hsi-text-muted);
}

/* Contact form honeypot — hidden from humans, left in DOM for bots */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* File input on dark theme (legacy native control; contact uses custom trigger) */
.form-control[type="file"] {
  color: var(--hsi-text-soft);
}

.form-control[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  border: 1px solid var(--hsi-border-input);
  background: var(--hsi-bg-mid);
  color: var(--hsi-text);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Tables, alerts, lists                                                      */
/* -------------------------------------------------------------------------- */

.table-dark-hsi {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hsi-text-soft);
  /* Bootstrap table-striped uses --bs-table-striped-color (defaults to dark body text). */
  --bs-table-striped-color: var(--hsi-text-soft);
  --bs-table-hover-color: var(--hsi-text);
  --bs-table-active-color: var(--hsi-text);
  --bs-table-border-color: var(--hsi-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: var(--hsi-bg-hover);
  --bs-table-active-bg: var(--hsi-bg-hover);
  color: var(--hsi-text-soft);
}

.table-dark-hsi > :not(caption) > * > * {
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  border-color: var(--hsi-border);
}

.table-dark-hsi thead th {
  background: var(--hsi-bg-elevated);
  color: var(--hsi-text);
  border-color: var(--hsi-border);
  font-weight: 600;
}

.table-dark-hsi tbody td,
.table-dark-hsi tbody th {
  color: var(--hsi-text-soft);
}

.alert-success-hsi {
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.4);
  color: #8fdf9f;
  border-radius: 8px;
}

.alert-info-hsi {
  background: rgba(23, 162, 184, 0.12);
  border: 1px solid rgba(23, 162, 184, 0.35);
  color: #8ed7e4;
  border-radius: 8px;
}

.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--hsi-text-soft);
}

.list-check li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--hsi-orange);
  font-size: 0.85rem;
}

/* Specs / benefit sections */
.benefit-item {
  background: var(--hsi-bg-elevated);
  border: 1px solid var(--hsi-border);
  border-radius: 10px;
  padding: 1.15rem;
  height: 100%;
}

/* Icons sit inline in benefit titles (Energy Storage Supporting Services pattern) */
.benefit-item h3 i,
.benefit-item .h6 i {
  color: var(--hsi-orange);
  font-size: 1em;
  margin-bottom: 0;
}

.cta-strip {
  background: linear-gradient(135deg, rgba(231, 146, 21, 0.15), rgba(45, 45, 45, 0.8));
  border: 1px solid var(--hsi-border-accent);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.section-band {
  padding: 2.5rem 1.25rem;
}

.section-band-dark {
  background: rgba(21, 21, 21, 0.6);
  border-top: 1px solid var(--hsi-border-muted);
  border-bottom: 1px solid var(--hsi-border-muted);
}

.download-stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--hsi-bg-elevated);
  border: 1px dashed var(--hsi-border-accent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

/* Live download rows (PDF staged under wwwroot/downloads) */
.download-stub--live {
  border-style: solid;
  border-color: var(--hsi-border-accent);
}

.contact-info-card {
  background: var(--hsi-bg-mid);
  border: 1px solid var(--hsi-border);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
}

.contact-info-card i {
  color: var(--hsi-orange);
  width: 1.25rem;
  text-align: center;
  margin-right: 0.5rem;
}

.contact-info-card .social-icon-x {
  color: var(--hsi-orange);
  margin-right: 0.5rem;
}

/* Progressive contact attachments (ADR-012) */
.contact-file-trigger {
  cursor: pointer;
  margin-bottom: 0.25rem;
}

.contact-file-trigger:focus-visible {
  outline: 2px solid var(--hsi-orange);
  outline-offset: 2px;
}

.contact-upload-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.contact-upload-item {
  position: relative;
  background: var(--hsi-bg-elevated);
  border: 1px solid var(--hsi-border);
  border-radius: 8px;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
}

.contact-upload-item-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.35rem;
}

.contact-upload-name {
  color: var(--hsi-text);
  font-size: 0.9rem;
  word-break: break-word;
}

.contact-upload-status {
  font-size: 0.8rem;
  color: var(--hsi-text-muted);
}

.contact-upload-status.is-ok {
  color: var(--hsi-success);
}

.contact-upload-status.is-busy {
  color: var(--hsi-orange);
}

.contact-upload-status.is-error {
  color: #ff8a95;
}

.contact-upload-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.contact-upload-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--hsi-orange), var(--hsi-orange-dark));
  transition: width 0.15s ease;
}

.contact-upload-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  border: none;
  background: transparent;
  color: var(--hsi-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}

.contact-upload-remove:hover {
  color: var(--hsi-orange);
  background: rgba(231, 146, 21, 0.12);
}

/* Focus utilities */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(231, 146, 21, 0.25);
}

/* Utility */
.text-orange {
  color: var(--hsi-orange) !important;
}

.bg-hsi-mid {
  background-color: var(--hsi-bg-mid) !important;
}

.mb-section {
  margin-bottom: 2.5rem;
}

/* -------------------------------------------------------------------------- */
/* Cookie consent (ADR-013) — banner + settings                               */
/* -------------------------------------------------------------------------- */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  justify-content: flex-end;
}

.footer-legal a {
  color: var(--hsi-text-soft);
}

.footer-legal a:hover {
  color: var(--hsi-orange);
}

.footer-legal-sep {
  color: var(--hsi-text-faint);
  user-select: none;
}

/* Match footer links; strip Bootstrap btn-link chrome */
.footer-legal-btn.btn-link {
  color: var(--hsi-text-soft);
  text-decoration: none;
  padding: 0;
  margin: 0;
  border: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
  border-radius: 0;
}

.footer-legal-btn.btn-link:hover,
.footer-legal-btn.btn-link:focus {
  color: var(--hsi-orange);
  text-decoration: underline;
  box-shadow: none;
}

.footer-legal-btn.btn-link:focus-visible {
  outline: 2px solid var(--hsi-orange);
  outline-offset: 2px;
}

.hsi-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: rgba(21, 21, 21, 0.97);
  border-top: 2px solid var(--hsi-border-accent);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  color: var(--hsi-text);
  padding: 1rem 0;
}

.hsi-cookie-banner[hidden] {
  display: none !important;
}

.hsi-cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.hsi-cookie-banner-copy {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 48rem;
}

.hsi-cookie-banner-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--hsi-text);
}

.hsi-cookie-banner-text {
  font-size: 0.9rem;
  color: var(--hsi-text-soft);
  line-height: 1.5;
}

.hsi-cookie-banner-link {
  color: var(--hsi-orange);
  text-decoration: underline;
}

.hsi-cookie-banner-link:hover {
  color: var(--hsi-orange-light);
}

.hsi-cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  flex: 0 1 auto;
}

/* Equal-weight Accept / Reject (no dark-pattern primary-only accept) */
.hsi-cookie-banner-actions .hsi-consent-btn {
  min-height: 2.35rem;
  min-width: 9.5rem;
  font-weight: 600;
  border-width: 1px;
}

.hsi-consent-settings-link.btn-link {
  color: var(--hsi-text-soft);
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
}

.hsi-consent-settings-link.btn-link:hover,
.hsi-consent-settings-link.btn-link:focus {
  color: var(--hsi-orange);
}

/* Leave room so fixed banner does not cover footer controls while open */
body.hsi-consent-banner-open {
  padding-bottom: 8.5rem;
}

@media (min-width: 768px) {
  body.hsi-consent-banner-open {
    padding-bottom: 6.5rem;
  }
}

/* Settings modal — dark VersaCore surfaces */
.hsi-consent-modal .hsi-consent-modal-content {
  background: var(--hsi-bg-mid);
  color: var(--hsi-text);
  border: 1px solid var(--hsi-border-accent);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.hsi-consent-modal .modal-header,
.hsi-consent-modal .modal-footer {
  border-color: var(--hsi-border) !important;
}

.hsi-consent-modal .modal-title {
  color: var(--hsi-text);
  font-weight: 700;
}

.hsi-consent-category {
  background: var(--hsi-bg-elevated);
  border: 1px solid var(--hsi-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}

.hsi-consent-category--disabled {
  opacity: 0.85;
}

.hsi-consent-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.hsi-consent-category-name {
  font-weight: 600;
  color: var(--hsi-text);
  margin-bottom: 0.25rem;
}

.hsi-consent-category-desc {
  max-width: 28rem;
  line-height: 1.45;
}

.hsi-consent-badge {
  display: inline-block;
  margin-top: 0.55rem;
  background: rgba(231, 146, 21, 0.18);
  color: var(--hsi-orange-light);
  border: 1px solid var(--hsi-border-accent);
  font-weight: 600;
  font-size: 0.75rem;
}

.hsi-consent-badge--muted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hsi-text-muted);
  border-color: var(--hsi-border);
}

.hsi-consent-badge--ok {
  background: rgba(40, 167, 69, 0.2);
  color: #8fdf9f;
  border: 1px solid rgba(40, 167, 69, 0.35);
}

/* Visible confirmation for footer / modal consent actions (esp. Do Not Sell) */
.hsi-consent-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(0.5rem);
  z-index: 1080;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.85rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--hsi-border-accent);
  background: rgba(45, 45, 45, 0.98);
  color: var(--hsi-text);
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hsi-consent-toast[hidden] {
  display: none !important;
}

.hsi-consent-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Keep toast above cookie banner when both could show */
body.hsi-consent-banner-open .hsi-consent-toast {
  bottom: 7.5rem;
}

/* Dark-theme form switches */
/* Switch track + knob: high contrast on dark modal (off state was nearly invisible) */
.hsi-consent-switch .form-check-input {
  width: 2.75rem;
  height: 1.45rem;
  margin-top: 0.1rem;
  cursor: pointer;
  /* Unchecked: mid-gray track, bright knob */
  background-color: #5a5a5a;
  border: 1px solid #9a9a9a;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f0f0f0'/%3e%3c/svg%3e");
  background-position: left center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f0f0f0'/%3e%3c/svg%3e");
}

.hsi-consent-switch .form-check-input:checked {
  background-color: var(--hsi-orange);
  border-color: var(--hsi-orange-light);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.hsi-consent-switch .form-check-input:focus {
  border-color: var(--hsi-orange);
  box-shadow: 0 0 0 0.2rem rgba(231, 146, 21, 0.25);
}

/* Necessary / Marketing: still readable when disabled, not washed out to black */
.hsi-consent-switch .form-check-input:disabled {
  opacity: 1;
  cursor: not-allowed;
  background-color: #4a4a4a;
  border-color: #7a7a7a;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c8c8c8'/%3e%3c/svg%3e");
  filter: none;
}

.hsi-consent-switch .form-check-input:disabled:checked {
  background-color: rgba(231, 146, 21, 0.55);
  border-color: rgba(231, 146, 21, 0.7);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23eeeeee'/%3e%3c/svg%3e");
}

.hsi-consent-modal .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* -------------------------------------------------------------------------- */
/* News & events                                                              */
/* -------------------------------------------------------------------------- */

.news-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-item {
  background: var(--hsi-bg-mid);
  border: 1px solid var(--hsi-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.news-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--hsi-text-muted);
  font-size: 0.85rem;
}

.news-type-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--hsi-border-accent);
  background: rgba(231, 146, 21, 0.12);
  color: var(--hsi-orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.news-item-title {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.news-item-body {
  color: var(--hsi-text-soft);
  margin-bottom: 0.75rem;
}

.news-item-link {
  font-weight: 600;
}

.news-empty {
  background: var(--hsi-bg-mid);
  border: 1px dashed var(--hsi-border-accent);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.5rem;
}