/* ==========================================================================
   1. Variables, Global Theme & Base Styles
   ========================================================================== */

:root {
  --ithicos-dark: #0f172a;
  --ithicos-dark-bg: #0d1b2a;
  --ithicos-hero-overlay: rgba(15, 23, 42, 0.7);
  --ithicos-hero-grad: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
  --ithicos-primary-blue: #0d6efd;
  --ithicos-card-border: rgba(0, 0, 0, 0.08);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #334155;
  background-color: #f8fafc;
}

/* ==========================================================================
   2. Hero Banners & Headers
   ========================================================================== */

/* Modern Hero Section replacing bulky Carousel */
.hero-section {
  min-height: 480px;
  background: url('../img/hero-banner-new.webp') center center / cover no-repeat;
  position: relative;
}

.hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.65) 100%);
}

/* Product & Documentation Page Hero Banner */
.hero-banner {
  background: var(--ithicos-hero-grad), url('../img/hero-banner-new.webp') center/cover no-repeat;
  min-height: 400px;
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   3. Card Components & Gallery Grid
   ========================================================================== */

/* Generic Custom Cards */
.custom-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.custom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
}

/* Screenshot & Interactive Gallery Cards */
.gallery-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  overflow: hidden;
  border: 1px solid var(--ithicos-card-border);
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

.gallery-card img {
  height: 200px;
  object-fit: cover;
  object-position: top;
  transition: opacity 0.2s ease-in-out;
}

.gallery-card img:hover {
  opacity: 0.9;
}

/* ==========================================================================
   4. Navigation & Tab Controls
   ========================================================================== */

.nav-pills .nav-link {
  color: #475569;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.nav-pills .nav-link:hover {
  background-color: #e2e8f0;
  color: var(--ithicos-primary-blue);
}

.nav-pills .nav-link.active {
  background-color: var(--ithicos-primary-blue);
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(13, 110, 253, 0.3);
}

/* ==========================================================================
   5. Scrollable Panels & Modals
   ========================================================================== */

.scrollspy-panel {
  max-height: 320px;
  overflow-y: auto;
}

.scrollspy-panel::-webkit-scrollbar {
  width: 6px;
}

.scrollspy-panel::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

/* Modal Carousel Image Fitting */
#myCarousel .carousel-item img {
  max-height: 75vh;
  object-fit: contain;
}

/* ==========================================================================
   6. Utilities & Micro-Components
   ========================================================================== */

.max-w-700 {
  max-width: 700px;
}

.opacity-90 {
  opacity: 0.9;
}

.icon-box,
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

footer a:hover {
  color: #ffffff !important;
}