/* Enhanced SQRAMIT Theme CSS - Softer Dark Theme with Patterns */

/* SQRAMIT Color Variables - Softer Dark Theme */
:root {
  /* Primary Orange Colors - Slightly More Vibrant */
  --sqramit-orange: #FF6B35;
  --sqramit-orange-rgb: 255, 107, 53;
  --sqramit-orange-light: #FF8A65;
  --sqramit-orange-dark: #E65100;
  --sqramit-orange-darker: #D84315;

  /* Blue Colors - Slightly More Vibrant */
  --sqramit-blue: #64B5F6;
  --sqramit-blue-rgb: 100, 181, 246;
  --sqramit-blue-light: #90CAF9;
  --sqramit-blue-dark: #1976D2;
  --sqramit-blue-darker: #1565C0;

  /* Additional Blue - Deep Navy */
  --sqramit-blue-navy: #293889;
  --sqramit-blue-navy-rgb: 41, 56, 137;
  --sqramit-blue-navy-light: #3949AB;
  --sqramit-blue-navy-dark: #1A237E;

  /* Softer Dark Theme Colors */
  --sqramit-dark: #2A2A2A;
  --sqramit-dark-rgb: 42, 42, 42;
  --sqramit-dark-light: #3A3A3A;
  --sqramit-dark-lighter: #4A4A4A;
  --sqramit-dark-card: #353535;

  /* White and Gray Colors - Better Balance */
  --sqramit-white: #FFFFFF;
  --sqramit-white-rgb: 255, 255, 255;
  --sqramit-gray-light: #F5F5F5;
  --sqramit-gray: #E0E0E0;
  --sqramit-gray-dark: #212529;
  --sqramit-gray-medium: #6C757D;

  /* Text Colors for Better Readability */
  --sqramit-text-primary: #FFFFFF;
  --sqramit-text-secondary: #E8E8E8;
  --sqramit-text-muted: #C0C0C0;
  --sqramit-text-dark: #2A2A2A;

  /* Bootstrap Override */
  --bs-primary-rgb: var(--sqramit-orange-rgb);
  --bs-primary: var(--sqramit-orange);
  --bs-primary-text-emphasis: var(--sqramit-orange-light);
  --bs-primary-bg-subtle: rgba(255, 107, 53, 0.1);
  --bs-primary-border-subtle: var(--sqramit-orange-dark);

  --bs-secondary-rgb: var(--sqramit-blue-rgb);
  --bs-secondary: var(--sqramit-blue);

  /* Gradient combinations */
  --primary-gradient-start: var(--sqramit-orange);
  --primary-gradient-start-rgb: var(--sqramit-orange-rgb);
  --primary-gradient-end: var(--sqramit-blue);
  --primary-gradient-end-rgb: var(--sqramit-blue-rgb);
}

/* Softer Body Background with Subtle Pattern */
body {
  background-color: var(--sqramit-dark) !important;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 20px 20px;
  color: var(--sqramit-text-primary) !important;
}

/* Enhanced SQRAMIT Gradients */
.bg-sqramit-gradient {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-blue) 50%, var(--sqramit-blue-navy) 100%) !important;
  position: relative;
}

.bg-sqramit-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.bg-sqramit-gradient-reverse {
  background: linear-gradient(135deg, var(--sqramit-blue-navy) 0%, var(--sqramit-blue) 50%, var(--sqramit-orange) 100%) !important;
}

.text-gradient-sqramit {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-blue) 50%, var(--sqramit-blue-navy) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

.text-gradient-sqramit-light {
  background: linear-gradient(135deg, #FFB74D 0%, #64B5F6 50%, var(--sqramit-blue-navy-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* Enhanced SQRAMIT Buttons */
.btn-sqramit-primary {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-orange-dark) 100%) !important;
  border: none !important;
  color: var(--sqramit-white) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.25);
}

.btn-sqramit-primary:hover {
  background: linear-gradient(135deg, var(--sqramit-orange-dark) 0%, var(--sqramit-orange-darker) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.35);
  color: var(--sqramit-white) !important;
}

.btn-outline-sqramit-primary {
  border: 2px solid var(--sqramit-orange) !important;
  color: var(--sqramit-orange) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

.btn-outline-sqramit-primary:hover {
  background: var(--sqramit-orange) !important;
  color: var(--sqramit-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.25);
}

.btn-sqramit-white {
  background: var(--sqramit-white) !important;
  color: var(--sqramit-orange) !important;
  border: none !important;
  font-weight: 600 !important;
}

.btn-sqramit-white:hover {
  background: var(--sqramit-gray-light) !important;
  color: var(--sqramit-orange-dark) !important;
  transform: translateY(-2px);
}

/* Navy Blue Button Styles */
.btn-sqramit-navy {
  background: linear-gradient(135deg, var(--sqramit-blue-navy) 0%, var(--sqramit-blue-navy-dark) 100%) !important;
  border: none !important;
  color: var(--sqramit-white) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(41, 56, 137, 0.25);
}

.btn-sqramit-navy:hover {
  background: linear-gradient(135deg, var(--sqramit-blue-navy-dark) 0%, #0D47A1 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(41, 56, 137, 0.35);
  color: var(--sqramit-white) !important;
}

.btn-outline-sqramit-navy {
  border: 2px solid var(--sqramit-blue-navy) !important;
  color: var(--sqramit-blue-navy) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

.btn-outline-sqramit-navy:hover {
  background: var(--sqramit-blue-navy) !important;
  color: var(--sqramit-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(41, 56, 137, 0.25);
}

/* Enhanced Text Colors */
.text-sqramit-orange {
  color: var(--sqramit-orange) !important;
}

.text-sqramit-blue {
  color: var(--sqramit-blue) !important;
}

.text-sqramit-blue-navy {
  color: var(--sqramit-blue-navy) !important;
}

.text-sqramit-white {
  color: var(--sqramit-white) !important;
}

.text-sqramit-gray-dark {
  color: var(--sqramit-gray-dark) !important;
}

.text-muted {
  color: var(--sqramit-text-muted) !important;
}

/* Enhanced Background Colors */
.bg-sqramit-orange {
  background-color: var(--sqramit-orange) !important;
}

.bg-sqramit-blue {
  background-color: var(--sqramit-blue) !important;
}

.bg-sqramit-blue-navy {
  background-color: var(--sqramit-blue-navy) !important;
}

.bg-sqramit-white {
  background-color: var(--sqramit-dark-card) !important;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.02) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.02) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  color: var(--sqramit-text-primary) !important;
}

.bg-sqramit-light, .bg-light {
  background-color: var(--sqramit-dark-light) !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255,255,255,0.03) 10px,
      rgba(255,255,255,0.03) 20px
    );
  color: var(--sqramit-text-primary) !important;
}

.bg-sqramit-dark {
  background-color: var(--sqramit-dark) !important;
}

/* Enhanced Cards with Patterns */
.sqramit-card {
  background: var(--sqramit-dark-card) !important;
  background-image:
    radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,0.02) 21%, rgba(255,255,255,0.02) 34%, transparent 35%, transparent),
    linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.02) 26%, transparent 27%, transparent 74%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.02) 76%, transparent 77%, transparent);
  background-size: 40px 40px;
  border: 1px solid var(--sqramit-dark-lighter) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  color: var(--sqramit-text-primary) !important;
}

.sqramit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.15) !important;
  border-color: var(--sqramit-orange) !important;
  background-color: var(--sqramit-dark-lighter) !important;
}

.sqramit-card .text-muted {
  color: var(--sqramit-text-muted) !important;
}

/* Enhanced Hover Effects */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 107, 53, 0.15) !important;
}

/* Enhanced Navigation with Lighter Grey Theme */
.sqramit-navbar {
  background-color: #F8F9FA !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid #E9ECEF !important;
}

.sqramit-navbar .navbar-brand {
  color: var(--sqramit-orange) !important;
  font-weight: bold;
}

.sqramit-navbar .nav-link {
  color: var(--sqramit-text-dark) !important;
  transition: color 0.3s ease;
  font-weight: 500;
}

.sqramit-navbar .nav-link:hover,
.sqramit-navbar .nav-link.active {
  color: var(--sqramit-orange) !important;
}

/* Update navbar button styling for light background */
.sqramit-navbar .btn-sqramit-gradient {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-blue) 50%, var(--sqramit-blue-navy) 100%) !important;
  color: var(--sqramit-white) !important;
  border: none !important;
}

/* Enhanced Hero Section */
.sqramit-hero {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-blue) 50%, var(--sqramit-blue-navy) 100%);
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 0%, transparent 50%);
  color: var(--sqramit-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.sqramit-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/img/hero-pattern.svg');
  background-size: cover;
  opacity: 0.1;
  z-index: 1;
}

.sqramit-hero > * {
  position: relative;
  z-index: 2;
}

.sqramit-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sqramit-hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Enhanced Section Styling */
.sqramit-section {
  padding: 100px 0;
  background-color: var(--sqramit-dark);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 30px 30px;
  color: var(--sqramit-text-primary);
}

.sqramit-section-alt {
  background-color: var(--sqramit-dark-light);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 35px,
      rgba(255,255,255,0.02) 35px,
      rgba(255,255,255,0.02) 70px
    );
}

/* Enhanced Footer */
.sqramit-footer {
  background: linear-gradient(135deg, var(--sqramit-dark-lighter) 0%, var(--sqramit-dark) 100%);
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.02) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.02) 87.5%, rgba(255,255,255,0.02)),
    linear-gradient(150deg, rgba(255,255,255,0.02) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.02) 87.5%, rgba(255,255,255,0.02));
  background-size: 20px 20px;
  color: var(--sqramit-text-secondary);
  border-top: 1px solid var(--sqramit-dark-lighter);
}

/* Enhanced Form Elements */
.form-control {
  background-color: var(--sqramit-dark-card) !important;
  border: 1px solid var(--sqramit-dark-lighter) !important;
  color: var(--sqramit-text-primary) !important;
}

.form-control:focus {
  background-color: var(--sqramit-dark-lighter) !important;
  border-color: var(--sqramit-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25) !important;
  color: var(--sqramit-text-primary) !important;
}

.form-select {
  background-color: var(--sqramit-dark-card) !important;
  border: 1px solid var(--sqramit-dark-lighter) !important;
  color: var(--sqramit-text-primary) !important;
}

.form-label {
  color: var(--sqramit-text-primary) !important;
  font-weight: 500;
}

/* Enhanced Badges */
.badge {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.badge.bg-sqramit-orange {
  background-color: var(--sqramit-orange) !important;
  color: var(--sqramit-white) !important;
}

.badge.bg-sqramit-blue {
  background-color: var(--sqramit-blue) !important;
  color: var(--sqramit-white) !important;
}

.badge.bg-sqramit-blue-navy {
  background-color: var(--sqramit-blue-navy) !important;
  color: var(--sqramit-white) !important;
}

/* Additional Gradient Options with Navy Blue */
.bg-sqramit-gradient-navy {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-blue-navy) 100%) !important;
}

.bg-sqramit-gradient-navy-reverse {
  background: linear-gradient(135deg, var(--sqramit-blue-navy) 0%, var(--sqramit-orange) 100%) !important;
}

.text-gradient-sqramit-navy {
  background: linear-gradient(135deg, var(--sqramit-orange) 0%, var(--sqramit-blue-navy) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* Enhanced Accordion */
.accordion-item {
  background-color: var(--sqramit-dark-card) !important;
  border: 1px solid var(--sqramit-dark-lighter) !important;
}

.accordion-button {
  background-color: var(--sqramit-dark-card) !important;
  color: var(--sqramit-text-primary) !important;
  border: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--sqramit-dark-lighter) !important;
  color: var(--sqramit-orange) !important;
}

.accordion-body {
  background-color: var(--sqramit-dark-card) !important;
  color: var(--sqramit-text-secondary) !important;
}

/* Video player enhancements */
.video-play-btn {
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.video-play-btn:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.95) !important;
}

.video-play-btn:hover i {
  color: var(--sqramit-orange) !important;
}

/* Logo styling in navbar */
.navbar-brand img {
  transition: all 0.3s ease;
}

.navbar-brand:hover img {
  transform: scale(1.05);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .sqramit-hero h1 {
    font-size: 2.5rem;
  }

  .sqramit-hero p {
    font-size: 1.1rem;
  }

  .sqramit-section {
    padding: 80px 0;
  }

  .sqramit-card {
    margin-bottom: 1.5rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover,
  .sqramit-card:hover,
  .btn-sqramit-primary:hover {
    transform: none;
  }
}