/* ============================================================================
   IDSPS Premium Global Stylesheet
   Upgrades all inner page templates to match the front page design language.
   No content changes — only visual enhancements.
   ============================================================================ */

/* ============================================================================
   LAYER 0: CSS Custom Properties (Design Tokens)
   ============================================================================ */
:root {
  --idsps-dark: #05273d;
  --idsps-darker: #090f1d;
  --idsps-teal: #0d9488;
  --idsps-teal-light: #2dd4bf;
  --idsps-teal-glow: rgba(13, 148, 136, 0.15);
  --idsps-blue: #3b82f6;
  --idsps-blue-glow: rgba(59, 130, 246, 0.12);
  --idsps-purple: #a78bfa;
  --idsps-gold: #ffb703;
  --idsps-gradient-accent: linear-gradient(135deg, #0d9488, #3b82f6);
  --idsps-gradient-text: linear-gradient(135deg, #0d9488, #3b82f6, #a78bfa);
  --idsps-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --idsps-card-hover-shadow: 0 20px 40px -12px rgba(13, 148, 136, 0.12),
                              0 8px 16px -8px rgba(0, 0, 0, 0.06);
  --idsps-ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   LAYER 1: Keyframe Animations
   ============================================================================ */
@keyframes idsps-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes idsps-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes idsps-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes idsps-pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes idsps-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes idsps-borderGlow {
  0%, 100% { border-color: rgba(13, 148, 136, 0.15); }
  50% { border-color: rgba(13, 148, 136, 0.35); }
}

/* Scroll-triggered animation class */
.idsps-animate {
  opacity: 0;
  transform: translateY(28px);
}
.idsps-animate.idsps-visible {
  animation: idsps-fadeInUp 0.7s var(--idsps-ease-premium) forwards;
}

/* Staggered delays for grid items */
.idsps-animate.idsps-visible:nth-child(1) { animation-delay: 0ms; }
.idsps-animate.idsps-visible:nth-child(2) { animation-delay: 80ms; }
.idsps-animate.idsps-visible:nth-child(3) { animation-delay: 160ms; }
.idsps-animate.idsps-visible:nth-child(4) { animation-delay: 240ms; }
.idsps-animate.idsps-visible:nth-child(5) { animation-delay: 320ms; }
.idsps-animate.idsps-visible:nth-child(6) { animation-delay: 400ms; }
.idsps-animate.idsps-visible:nth-child(7) { animation-delay: 480ms; }
.idsps-animate.idsps-visible:nth-child(8) { animation-delay: 560ms; }
.idsps-animate.idsps-visible:nth-child(n+9) { animation-delay: 600ms; }

/* ============================================================================
   LAYER 2: Inner Banner Polish
   ============================================================================ */

/* Teal accent line at the bottom of inner banners */
.inner-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, #0d9488, #3b82f6, #0d9488, transparent);
  z-index: 20;
  opacity: 0.8;
}

/* Softer gradient fade at bottom to blend into content */
.inner-banner > div:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(248, 250, 252, 0.15));
  z-index: 2;
  pointer-events: none;
}

/* Banner title text enhancement */
.inner-banner h1 {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================================
   LAYER 3: Section Background Enhancements
   ============================================================================ */

/* Add subtle premium texture to main content sections */
body:not(.home) section,
body:not(.home) .min-h-screen > div:not(.inner-banner):not([class*="bg-slate-900"]) {
  position: relative;
}

/* Alternating section backgrounds for depth */
body:not(.home) section:nth-of-type(even) {
  background-image: radial-gradient(rgba(13, 148, 136, 0.03) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

/* Premium gradient mesh for primary content areas */
body:not(.home) .bg-slate-50,
body:not(.home) [class*="bg-slate-50"] {
  background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 40%, #eff6ff 80%, #f8fafc 100%) !important;
}

/* ============================================================================
   LAYER 4: Card Enhancements — Premium Hover Effects
   ============================================================================ */

/* Target all white content cards across inner pages */
body:not(.home) .rounded-3xl[class*="bg-white"],
body:not(.home) .rounded-2xl[class*="bg-white"],
body:not(.home) .rounded-3xl[class*="border"],
body:not(.home) .rounded-2xl[class*="border"][class*="shadow"] {
  transition: all 0.4s var(--idsps-ease-premium) !important;
  position: relative;
  overflow: hidden;
}

/* Premium hover: lift + teal glow shadow + border accent */
body:not(.home) .rounded-3xl[class*="bg-white"]:hover,
body:not(.home) .rounded-2xl[class*="bg-white"]:hover,
body:not(.home) .rounded-3xl[class*="border"]:hover,
body:not(.home) .rounded-2xl[class*="border"][class*="shadow"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--idsps-card-hover-shadow) !important;
  border-color: rgba(13, 148, 136, 0.25) !important;
}

/* Shimmer effect on card hover */
body:not(.home) .rounded-3xl[class*="bg-white"]::before,
body:not(.home) .rounded-2xl[class*="bg-white"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(13, 148, 136, 0.04), transparent);
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

body:not(.home) .rounded-3xl[class*="bg-white"]:hover::before,
body:not(.home) .rounded-2xl[class*="bg-white"]:hover::before {
  left: 100%;
}

/* Top accent line on card hover */
body:not(.home) .rounded-3xl[class*="bg-white"]::after,
body:not(.home) .rounded-2xl[class*="bg-white"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--idsps-gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--idsps-ease-premium);
  z-index: 2;
  border-radius: 3px 3px 0 0;
}

body:not(.home) .rounded-3xl[class*="bg-white"]:hover::after,
body:not(.home) .rounded-2xl[class*="bg-white"]:hover::after {
  transform: scaleX(1);
}

/* ============================================================================
   LAYER 5: Icon Box Enhancements
   ============================================================================ */

/* Upgrade icon containers (w-10/w-12 rounded squares with teal bg) */
body:not(.home) [class*="rounded-xl"][class*="bg-teal"],
body:not(.home) [class*="rounded-xl"][class*="teal-500/10"],
body:not(.home) [class*="rounded-2xl"][class*="bg-teal"] {
  transition: all 0.35s var(--idsps-ease-premium) !important;
  position: relative;
}

/* Icon box hover — subtle glow ring */
body:not(.home) .group:hover [class*="rounded-xl"][class*="bg-teal"],
body:not(.home) .group:hover [class*="rounded-xl"][class*="teal-500/10"],
body:not(.home) .group:hover [class*="rounded-2xl"][class*="bg-teal"] {
  box-shadow: 0 0 16px rgba(13, 148, 136, 0.25) !important;
  transform: scale(1.08) !important;
  background-color: rgba(13, 148, 136, 0.15) !important;
}

/* SVG icons inside cards — color transition on hover */
body:not(.home) .group:hover svg[class*="text-teal"] {
  filter: drop-shadow(0 0 4px rgba(13, 148, 136, 0.4));
  transition: filter 0.3s ease;
}

/* ============================================================================
   LAYER 6: Typography Enhancements
   ============================================================================ */

/* Gradient accent for primary section headings on inner pages */
body:not(.home) section h2[class*="text-[#05273d]"],
body:not(.home) .max-w-7xl h2[class*="text-[#05273d]"],
body:not(.home) .max-w-6xl h2[class*="text-[#05273d]"],
body:not(.home) .max-w-5xl h2[class*="text-[#05273d]"] {
  position: relative;
  display: inline-block;
}

/* Animated underline bar under section headings */
body:not(.home) section h2[class*="text-[#05273d]"]::after,
body:not(.home) .max-w-7xl h2[class*="text-[#05273d]"]::after,
body:not(.home) .max-w-6xl h2[class*="text-[#05273d]"]::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--idsps-gradient-accent);
  border-radius: 3px;
  margin-top: 12px;
  transition: width 0.4s var(--idsps-ease-premium);
}

body:not(.home) section h2[class*="text-[#05273d]"]:hover::after,
body:not(.home) .max-w-7xl h2[class*="text-[#05273d]"]:hover::after,
body:not(.home) .max-w-6xl h2[class*="text-[#05273d]"]:hover::after {
  width: 80px;
}

/* Pre-heading badge/label enhancement (if any custom labels exist) */
body:not(.home) [class*="uppercase"][class*="tracking-"][class*="text-teal"] {
  letter-spacing: 0.2em !important;
  font-weight: 900 !important;
}

/* ============================================================================
   LAYER 7: Button Enhancements
   ============================================================================ */

/* Primary dark buttons — add gradient and glow */
body:not(.home) a[class*="bg-[#05273d]"],
body:not(.home) button[class*="bg-[#05273d]"],
body:not(.home) a[class*="bg-gradient-to-r"][class*="from-teal"] {
  background: linear-gradient(135deg, #0d9488, #05273d) !important;
  transition: all 0.35s var(--idsps-ease-premium) !important;
  position: relative;
  overflow: hidden;
}

body:not(.home) a[class*="bg-[#05273d]"]:hover,
body:not(.home) button[class*="bg-[#05273d]"]:hover,
body:not(.home) a[class*="bg-gradient-to-r"][class*="from-teal"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.25),
              0 0 20px rgba(13, 148, 136, 0.15) !important;
}

/* Teal text links — animated underline */
body:not(.home) a[class*="text-teal"]:not([class*="rounded"]):not([class*="px-"]) {
  position: relative;
  text-decoration: none !important;
}

body:not(.home) a[class*="text-teal"]:not([class*="rounded"]):not([class*="px-"])::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--idsps-gradient-accent);
  border-radius: 2px;
  transition: width 0.3s var(--idsps-ease-premium);
}

body:not(.home) a[class*="text-teal"]:not([class*="rounded"]):not([class*="px-"]):hover::after {
  width: 100%;
}

/* Inline-styled gradient buttons (submit buttons with style attr) */
body:not(.home) button[type="submit"],
body:not(.home) input[type="submit"] {
  transition: all 0.35s var(--idsps-ease-premium) !important;
}

body:not(.home) button[type="submit"]:hover,
body:not(.home) input[type="submit"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.3) !important;
}

/* ============================================================================
   LAYER 8: Image Enhancements
   ============================================================================ */

/* Smooth zoom on all card/section images */
body:not(.home) .group img[class*="object-cover"],
body:not(.home) .overflow-hidden img[class*="object-cover"] {
  transition: transform 0.6s var(--idsps-ease-premium) !important;
}

body:not(.home) .group:hover img[class*="object-cover"],
body:not(.home) .overflow-hidden:hover img[class*="object-cover"] {
  transform: scale(1.06) !important;
}

/* ============================================================================
   LAYER 9: Form Input Enhancements
   ============================================================================ */

/* Upgrade form inputs with premium focus states */
body:not(.home) input[type="text"]:focus,
body:not(.home) input[type="email"]:focus,
body:not(.home) input[type="tel"]:focus,
body:not(.home) input[type="password"]:focus,
body:not(.home) textarea:focus,
body:not(.home) select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1),
              0 1px 2px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
  transition: all 0.25s ease !important;
}

/* Input hover state */
body:not(.home) input[type="text"]:hover,
body:not(.home) input[type="email"]:hover,
body:not(.home) input[type="tel"]:hover,
body:not(.home) textarea:hover,
body:not(.home) select:hover {
  border-color: rgba(13, 148, 136, 0.4) !important;
}

/* ============================================================================
   LAYER 10: List & Bullet Enhancements
   ============================================================================ */

/* Custom teal bullets for unordered lists inside content cards */
body:not(.home) .rounded-3xl ul:not([class]) li::marker,
body:not(.home) .rounded-2xl ul:not([class]) li::marker {
  color: #0d9488 !important;
}

/* ============================================================================
   LAYER 11: Table Enhancements
   ============================================================================ */

/* Upgrade any data tables with hover row highlight */
body:not(.home) table tbody tr {
  transition: background-color 0.2s ease;
}

body:not(.home) table tbody tr:hover {
  background-color: rgba(13, 148, 136, 0.04) !important;
}

/* Table header styling */
body:not(.home) table thead th {
  position: relative;
}

body:not(.home) table thead th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--idsps-gradient-accent);
  opacity: 0.5;
}

/* ============================================================================
   LAYER 12: Scrollbar Styling (Webkit)
   ============================================================================ */

/* Premium thin scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #0d9488, #05273d);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #14b8a6, #073654);
}

/* ============================================================================
   LAYER 13: Selection Styling
   ============================================================================ */
::selection {
  background-color: rgba(13, 148, 136, 0.2);
  color: #05273d;
}

::-moz-selection {
  background-color: rgba(13, 148, 136, 0.2);
  color: #05273d;
}

/* ============================================================================
   LAYER 14: Accordion / FAQ Enhancements
   ============================================================================ */

body:not(.home) details {
  transition: all 0.3s var(--idsps-ease-premium);
  border-left: 3px solid transparent;
}

body:not(.home) details[open] {
  border-left-color: #0d9488;
}

body:not(.home) details summary {
  cursor: pointer;
  transition: color 0.2s ease;
}

body:not(.home) details summary:hover {
  color: #0d9488 !important;
}

/* ============================================================================
   LAYER 15: Logo / Partner Grid Enhancements
   ============================================================================ */

/* Partner/consortium logo images — grayscale to color on hover */
body:not(.home) img[alt*="logo" i],
body:not(.home) img[alt*="partner" i],
body:not(.home) .grid img[class*="object-contain"] {
  filter: grayscale(30%) opacity(0.85);
  transition: all 0.4s var(--idsps-ease-premium) !important;
}

body:not(.home) img[alt*="logo" i]:hover,
body:not(.home) img[alt*="partner" i]:hover,
body:not(.home) .group:hover img[class*="object-contain"],
body:not(.home) .grid img[class*="object-contain"]:hover {
  filter: grayscale(0%) opacity(1) !important;
  transform: scale(1.05);
}

/* ============================================================================
   LAYER 16: Responsive Refinements
   ============================================================================ */

/* On mobile, reduce hover lift to avoid jank */
@media (max-width: 768px) {
  body:not(.home) .rounded-3xl[class*="bg-white"]:hover,
  body:not(.home) .rounded-2xl[class*="bg-white"]:hover {
    transform: translateY(-3px) !important;
  }
  
  /* Disable shimmer on mobile for performance */
  body:not(.home) .rounded-3xl[class*="bg-white"]::before,
  body:not(.home) .rounded-2xl[class*="bg-white"]::before {
    display: none;
  }
}

/* ============================================================================
   LAYER 17: Print Styles
   ============================================================================ */

@media print {
  .inner-banner::after,
  .idsps-animate {
    display: none !important;
    animation: none !important;
  }
}