/**
 * SADJA Custom Theme Override
 * Based on Figma Mockup Design
 * Created: 2025-12-10
 * 
 * To use: Add this CSS to your Lagom theme or include via custom CSS option
 * Use Body Classes in Lagom CMS to target specific sections
 */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
:root {
  /* Primary Colors */
  --sadja-green: #7CB518;
  --sadja-green-dark: #5a8a12;
  --sadja-green-light: #9ed23a;

  /* Neutral Colors */
  --sadja-dark: #1B1B1B;
  --sadja-gray-900: #2D2D2D;
  --sadja-gray-700: #4A4A4A;
  --sadja-gray-500: #767676;
  --sadja-gray-300: #C4C4C4;
  --sadja-gray-100: #F5F5F5;
  --sadja-white: #FFFFFF;

  /* Gradients */
  --sadja-gradient-green: linear-gradient(135deg, #7CB518 0%, #5a8a12 100%);
  --sadja-gradient-dark: linear-gradient(180deg, #1B1B1B 0%, #2D2D2D 100%);

  /* Typography */
  --sadja-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sadja-font-heading: 'Outfit', 'Inter', sans-serif;

  /* Spacing */
  --sadja-section-padding: 80px 0;
  --sadja-container-max: 1200px;

  /* Shadows */
  --sadja-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sadja-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --sadja-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);

  /* Border Radius */
  --sadja-radius-sm: 8px;
  --sadja-radius-md: 12px;
  --sadja-radius-lg: 20px;
  --sadja-radius-xl: 32px;
}

/* ============================================
   2. GLOBAL OVERRIDES
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Body Typography Enhancement */
body.sadja-custom-theme {
  font-family: var(--sadja-font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Primary Color Overrides */
body.sadja-custom-theme .btn-primary,
body.sadja-custom-theme .btn--primary {
  background: var(--sadja-green) !important;
  border-color: var(--sadja-green) !important;
}

body.sadja-custom-theme .btn-primary:hover,
body.sadja-custom-theme .btn--primary:hover {
  background: var(--sadja-green-dark) !important;
  border-color: var(--sadja-green-dark) !important;
}

/* Links */
body.sadja-custom-theme a:hover {
  color: var(--sadja-green);
}

/* ============================================
   3. HERO SECTION - "Every great website needs a great name!"
   ============================================ */

/* Apply body class: sadja-hero-domains */
body.sadja-hero-domains .site-banner,
.sadja-hero-domains .site-banner {
  background: var(--sadja-dark) !important;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

body.sadja-hero-domains .banner-title,
.sadja-hero-domains .banner-title {
  font-family: var(--sadja-font-heading);
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--sadja-white) !important;
  max-width: 600px;
}

body.sadja-hero-domains .banner-subtitle,
.sadja-hero-domains .banner-subtitle {
  font-size: 1.125rem;
  color: var(--sadja-gray-300);
  max-width: 500px;
}

/* Hero Image Positioning (woman with glasses) */
body.sadja-hero-domains .site-banner::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: url('/templates/lagom2/assets/img/sadja-custom/hero-woman.png');
  /* Upload your Figma export */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Domain Search Box Enhancement */
body.sadja-hero-domains .domain-search-box,
.sadja-hero-domains .section-domain-search {
  background: var(--sadja-white);
  border-radius: var(--sadja-radius-lg);
  padding: 8px;
  box-shadow: var(--sadja-shadow-lg);
}

body.sadja-hero-domains .domain-search-box input,
.sadja-hero-domains .section-domain-search input {
  border: none !important;
  font-size: 1rem;
  padding: 16px 20px;
}

body.sadja-hero-domains .domain-search-box .btn,
.sadja-hero-domains .section-domain-search .btn {
  background: var(--sadja-green) !important;
  border-radius: var(--sadja-radius-md) !important;
  padding: 16px 32px;
  font-weight: 600;
}

/* TLD Pills */
body.sadja-hero-domains .tld-item,
.sadja-hero-domains .section-tlds .tld-item {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sadja-white);
  border-radius: var(--sadja-radius-sm);
  padding: 8px 16px;
  margin: 4px;
  transition: all 0.3s ease;
}

body.sadja-hero-domains .tld-item:hover,
.sadja-hero-domains .section-tlds .tld-item:hover {
  background: var(--sadja-green);
  transform: translateY(-2px);
}

/* Price Badge in Hero */
body.sadja-hero-domains .price-badge,
.sadja-hero-domains .banner-price {
  background: var(--sadja-green);
  color: var(--sadja-white);
  padding: 12px 24px;
  border-radius: var(--sadja-radius-md);
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
}

/* ============================================
   4. SERVICES SECTION - Cards with Images
   ============================================ */

/* Apply body class: sadja-services-grid */
body.sadja-services-grid .site-section,
.section-services.sadja-style {
  padding: var(--sadja-section-padding);
  background: var(--sadja-white);
}

.sadja-services-grid .section-title,
.section-services.sadja-style .section-title {
  font-family: var(--sadja-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--sadja-dark);
  text-align: center;
  margin-bottom: 48px;
}

/* Service Cards Grid */
.sadja-services-grid .section-content-packages,
.sadja-service-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: var(--sadja-container-max);
  margin: 0 auto;
}

/* Individual Service Card */
.sadja-service-card,
.sadja-services-grid .package {
  background: var(--sadja-dark);
  border-radius: var(--sadja-radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sadja-service-card:hover,
.sadja-services-grid .package:hover {
  transform: translateY(-8px);
  box-shadow: var(--sadja-shadow-lg);
}

/* Service Card with Image Background */
.sadja-service-card.has-image::before,
.sadja-services-grid .package.has-bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.sadja-service-card.has-image:hover::before,
.sadja-services-grid .package.has-bg-image:hover::before {
  opacity: 1;
}

/* WordPress Hosting Card */
.sadja-service-card.wordpress-hosting::before,
.package[data-type="wordpress"]::before {
  background-image: url('/templates/lagom2/assets/img/sadja-custom/service-wordpress.jpg');
}

/* VPS Hosting Card */
.sadja-service-card.vps-hosting {
  background: var(--sadja-green) !important;
}

.sadja-service-card.vps-hosting::before,
.package[data-type="vps"]::before {
  background-image: url('/templates/lagom2/assets/img/sadja-custom/service-vps.jpg');
}

/* Email Hosting Card */
.sadja-service-card.email-hosting::before,
.package[data-type="email"]::before {
  background-image: url('/templates/lagom2/assets/img/sadja-custom/service-email.jpg');
}

/* Service Card Content */
.sadja-service-card .card-content,
.sadja-services-grid .package-content {
  position: relative;
  z-index: 2;
  color: var(--sadja-white);
}

.sadja-service-card .card-title,
.sadja-services-grid .package-title {
  font-family: var(--sadja-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sadja-white);
  margin-bottom: 8px;
}

.sadja-service-card .card-description,
.sadja-services-grid .package-description {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
}

/* ============================================
   5. MIGRATION SECTION - Yoga/Meditation Woman
   ============================================ */

/* Apply body class: sadja-migration */
body.sadja-migration .site-section,
.section-migration.sadja-style {
  background: var(--sadja-green) !important;
  padding: var(--sadja-section-padding);
  position: relative;
  overflow: hidden;
}

.sadja-migration .section-title,
.section-migration.sadja-style .section-title {
  font-family: var(--sadja-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--sadja-white);
}

.sadja-migration .section-desc,
.section-migration.sadja-style .section-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  max-width: 500px;
}

/* Yoga Woman Illustration */
.sadja-migration .section-graphic,
.section-migration.sadja-style .section-background {
  background-image: url('/templates/lagom2/assets/img/sadja-custom/yoga-meditation.png');
  /* Upload from Figma */
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Plant/Leaf Decorations */
.sadja-migration::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-image: url('/templates/lagom2/assets/img/sadja-custom/plants-decoration.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* ============================================
   6. WHY SADJA SECTION - Features with Icons
   ============================================ */

/* Apply body class: sadja-features */
body.sadja-features .site-section,
.section-why-sadja.sadja-style {
  background: var(--sadja-gray-100);
  padding: var(--sadja-section-padding);
}

.sadja-features .section-title,
.section-why-sadja .section-title {
  font-family: var(--sadja-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--sadja-dark);
  text-align: center;
}

/* Feature Cards Grid */
.sadja-features .section-content-features,
.sadja-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: var(--sadja-container-max);
  margin: 48px auto 0;
}

/* Individual Feature Card */
.sadja-feature-card,
.sadja-features .feature-item {
  background: var(--sadja-white);
  border-radius: var(--sadja-radius-md);
  padding: 32px;
  box-shadow: var(--sadja-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sadja-feature-card:hover,
.sadja-features .feature-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sadja-shadow-md);
}

/* Feature Icon */
.sadja-feature-card .feature-icon,
.sadja-features .feature-icon {
  width: 64px;
  height: 64px;
  background: var(--sadja-green);
  border-radius: var(--sadja-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.sadja-feature-card .feature-icon i,
.sadja-features .feature-icon i {
  font-size: 28px;
  color: var(--sadja-white);
}

/* Feature Title */
.sadja-feature-card .feature-title,
.sadja-features .feature-title {
  font-family: var(--sadja-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sadja-dark);
  margin-bottom: 12px;
}

/* Astronaut/Rocket Illustration */
.sadja-features .section-graphic-astronaut,
.section-why-sadja .illustration-right {
  background-image: url('/templates/lagom2/assets/img/sadja-custom/astronaut-rocket.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}

/* ============================================
   7. SUPPORT SECTION - Team Photos & Stats
   ============================================ */

/* Apply body class: sadja-support */
body.sadja-support .site-section,
.section-support.sadja-style {
  background: var(--sadja-dark);
  padding: var(--sadja-section-padding);
  color: var(--sadja-white);
}

.sadja-support .section-title,
.section-support .section-title {
  font-family: var(--sadja-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--sadja-white);
}

/* Team Photos Grid */
.sadja-team-photos,
.sadja-support .team-grid {
  display: flex;
  gap: 16px;
  margin: 32px 0;
}

/* Team Member Circle */
.sadja-team-member,
.sadja-support .team-member {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sadja-green);
  transition: transform 0.3s ease;
}

.sadja-team-member:hover,
.sadja-support .team-member:hover {
  transform: scale(1.1);
}

.sadja-team-member img,
.sadja-support .team-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stats Grid */
.sadja-stats-grid,
.sadja-support .stats-container {
  display: flex;
  gap: 48px;
  margin-top: 40px;
}

/* Individual Stat */
.sadja-stat-item,
.sadja-support .stat-item {
  text-align: center;
}

.sadja-stat-value,
.sadja-support .stat-value {
  font-family: var(--sadja-font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--sadja-green);
  display: block;
}

.sadja-stat-label,
.sadja-support .stat-label {
  font-size: 0.875rem;
  color: var(--sadja-gray-300);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================
   8. TESTIMONIALS SECTION
   ============================================ */

/* Apply body class: sadja-testimonials */
body.sadja-testimonials .site-section,
.section-testimonials.sadja-style {
  background: var(--sadja-white);
  padding: var(--sadja-section-padding);
}

.sadja-testimonials .section-title,
.section-testimonials .section-title {
  font-family: var(--sadja-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--sadja-dark);
  text-align: center;
}

/* Trust Badge */
.sadja-trust-badge,
.sadja-testimonials .trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.sadja-trust-badge .icon,
.sadja-testimonials .trust-icon {
  width: 48px;
  height: 48px;
}

/* Testimonial Cards */
.sadja-testimonial-grid,
.sadja-testimonials .testimonials-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: var(--sadja-container-max);
  margin: 0 auto;
}

.sadja-testimonial-card,
.sadja-testimonials .testimonial-item {
  background: var(--sadja-gray-100);
  border-radius: var(--sadja-radius-md);
  padding: 32px;
  position: relative;
}

.sadja-testimonial-card::before,
.sadja-testimonials .testimonial-item::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--sadja-green);
  opacity: 0.3;
  position: absolute;
  top: 16px;
  left: 24px;
}

/* Testimonial Author */
.sadja-testimonial-author,
.sadja-testimonials .testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.sadja-testimonial-avatar,
.sadja-testimonials .author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.sadja-testimonial-name,
.sadja-testimonials .author-name {
  font-weight: 600;
  color: var(--sadja-dark);
}

/* ============================================
   9. FAQ SECTION
   ============================================ */

/* Apply body class: sadja-faq */
body.sadja-faq .site-section,
.section-faq.sadja-style {
  background: var(--sadja-white);
  padding: var(--sadja-section-padding);
}

.sadja-faq .section-title,
.section-faq .section-title {
  font-family: var(--sadja-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--sadja-dark);
  text-align: center;
  margin-bottom: 48px;
}

/* FAQ Accordion */
.sadja-faq .faq-accordion,
.section-faq .accordion {
  max-width: 800px;
  margin: 0 auto;
}

.sadja-faq .faq-item,
.section-faq .accordion-item {
  background: var(--sadja-white);
  border: 1px solid var(--sadja-gray-300);
  border-radius: var(--sadja-radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}

.sadja-faq .faq-question,
.section-faq .accordion-header {
  padding: 20px 24px;
  font-weight: 600;
  color: var(--sadja-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.sadja-faq .faq-question:hover,
.section-faq .accordion-header:hover {
  background: var(--sadja-gray-100);
}

.sadja-faq .faq-answer,
.section-faq .accordion-body {
  padding: 0 24px 20px;
  color: var(--sadja-gray-700);
  line-height: 1.7;
}

/* ============================================
   10. FOOTER ENHANCEMENTS
   ============================================ */

/* Apply body class: sadja-footer */
body.sadja-custom-theme .site-footer,
.sadja-footer .site-footer {
  background: var(--sadja-dark);
  color: var(--sadja-gray-300);
  padding: 60px 0 40px;
}

.sadja-footer .footer-logo,
body.sadja-custom-theme .footer-logo {
  max-width: 180px;
  margin-bottom: 24px;
}

.sadja-footer .footer-links a,
body.sadja-custom-theme .footer-links a {
  color: var(--sadja-gray-300);
  transition: color 0.3s ease;
}

.sadja-footer .footer-links a:hover,
body.sadja-custom-theme .footer-links a:hover {
  color: var(--sadja-green);
}

/* ============================================
   11. RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 992px) {

  body.sadja-hero-domains .banner-title,
  .sadja-hero-domains .banner-title {
    font-size: 2.5rem !important;
  }

  body.sadja-hero-domains .site-banner::after {
    width: 40%;
    opacity: 0.5;
  }

  .sadja-services-grid .section-content-packages,
  .sadja-service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sadja-stats-grid,
  .sadja-support .stats-container {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 768px) {

  body.sadja-hero-domains .banner-title,
  .sadja-hero-domains .banner-title {
    font-size: 2rem !important;
  }

  body.sadja-hero-domains .site-banner::after {
    display: none;
  }

  .sadja-services-grid .section-content-packages,
  .sadja-service-cards {
    grid-template-columns: 1fr;
  }

  .sadja-feature-grid,
  .sadja-features .section-content-features {
    grid-template-columns: 1fr;
  }

  .sadja-testimonial-grid,
  .sadja-testimonials .testimonials-container {
    grid-template-columns: 1fr;
  }

  .sadja-team-photos,
  .sadja-support .team-grid {
    flex-wrap: wrap;
    justify-content: center;
  }

  .sadja-stat-value,
  .sadja-support .stat-value {
    font-size: 2rem;
  }
}

/* ============================================
   12. ANIMATIONS
   ============================================ */

/* Fade In Animation */
@keyframes sadjaFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sadja-animate-in {
  animation: sadjaFadeInUp 0.6s ease forwards;
}

/* Stagger children */
.sadja-stagger>*:nth-child(1) {
  animation-delay: 0.1s;
}

.sadja-stagger>*:nth-child(2) {
  animation-delay: 0.2s;
}

.sadja-stagger>*:nth-child(3) {
  animation-delay: 0.3s;
}

.sadja-stagger>*:nth-child(4) {
  animation-delay: 0.4s;
}

.sadja-stagger>*:nth-child(5) {
  animation-delay: 0.5s;
}

.sadja-stagger>*:nth-child(6) {
  animation-delay: 0.6s;
}

/* Hover lift effect */
.sadja-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sadja-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--sadja-shadow-lg);
}

/* Pulse animation for CTAs */
@keyframes sadjaPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 181, 24, 0.4);
  }

  50% {
    box-shadow: 0 0 0 15px rgba(124, 181, 24, 0);
  }
}

.sadja-pulse {
  animation: sadjaPulse 2s infinite;
}

/* ============================================
   13. HIDE USER ID IN ACCOUNT DROPDOWN
   ============================================ */
/* 
 * This hides the User ID (#102) that appears in the account dropdown
 * while keeping the Client/Account ID (#137967) visible on the dashboard.
 * The User ID is shown inside .dropdown-header-title in the navbar dropdown.
 */

/* Hide the entire client ID prefix in dropdown header */
.dropdown-header--account .dropdown-header-info .dropdown-header-title {
  /* Use font-size: 0 technique to hide the ID, then restore for child elements */
}

/* Method 1: Direct CSS hide using word-spacing trick */
/* This targets the dropdown header where the User ID appears */
.dropdown-menu .dropdown-header--account .dropdown-header-info .dropdown-header-title::first-letter {
  /* Can't target specific characters with CSS alone */
}

/* Method 2: Hide the entire ID portion via visibility */
/* The template outputs: #102 Nene Kalima */
/* We need to hide the #XXX part only */

/* Since CSS cannot selectively hide text within an element,
   we use a workaround by making the entire title text-indent
   and using a pseudo-element to show just the name */

/* Best approach: Hide the # symbol and numbers using CSS */
.dropdown-header--account .dropdown-header-info .dropdown-header-title {
  font-size: 0;
  /* Hide all text initially */
}

/* Show only the name by using first-line/letter won't work well,
   so we style child elements if any exist */

/* Alternative: If the ID is in a span, target it */
.dropdown-header-title span:first-child {
  display: none;
}

/* Full container approach - hide dropdown header ID entirely */
/* This is the most reliable CSS-only solution */
.dropdown-menu .dropdown-header--account .dropdown-header-info {
  font-size: 0 !important;
}

.dropdown-menu .dropdown-header--account .dropdown-header-info * {
  font-size: 14px !important;
}

.dropdown-menu .dropdown-header--account .dropdown-header-info .dropdown-header-title {
  font-size: 0 !important;
}

/* If there's a way to show just the name, we need JS or template edit */
/* For now, hide the entire header-title line with the ID */
.dropdown-menu .dropdown-header--account .dropdown-header-info .dropdown-header-title {
  display: none !important;
  visibility: hidden !important;
}

/* Keep the company name visible */
.dropdown-menu .dropdown-header--account .dropdown-header-info .dropdown-header-desc {
  display: block !important;
  visibility: visible !important;
  font-size: 14px !important;
}