/**
 * Idioma Media - Custom Styles
 * Brand colors and customizations for Idioma Futbol
 */

/* ========================================
   BRAND COLORS
   ======================================== */

:root {
  /* Idioma Media Brand Colors */
  --idioma-aureolin: #ECE91F;      /* Primary accent - Yellow */
  --idioma-majorelle: #574AE2;     /* Secondary accent - Blue */
  --idioma-erie-black: #1D1E1B;    /* Primary dark */
  --idioma-ivory: #FDFDEC;         /* Primary light / cream */
  --idioma-silver: #9B9B9B;        /* Secondary gray */
}


/* ========================================
   BUTTON HOVER EFFECTS
   ======================================== */

/* DARK THEME ONLY - Button hover with Aureolin yellow background and white text */
.body-wrapper.dark .rr-btn:hover {
  background-color: var(--idioma-aureolin) !important;
  border-color: var(--idioma-aureolin) !important;
  transition: all 0.3s ease;
}

/* Force white text color on hover for dark theme only */
.body-wrapper.dark .rr-btn:hover .btn-wrap .text-one,
.body-wrapper.dark .rr-btn:hover .btn-wrap .text-two {
  color: #ffffff !important;
}

/* Submit buttons - same hover effect for dark theme only */
.body-wrapper.dark .rr-btn[type="submit"]:hover,
.body-wrapper.dark button.rr-btn:hover {
  background-color: var(--idioma-aureolin) !important;
  border-color: var(--idioma-aureolin) !important;
}

.body-wrapper.dark .rr-btn[type="submit"]:hover .btn-wrap .text-one,
.body-wrapper.dark .rr-btn[type="submit"]:hover .btn-wrap .text-two,
.body-wrapper.dark button.rr-btn:hover .btn-wrap .text-one,
.body-wrapper.dark button.rr-btn:hover .btn-wrap .text-two {
  color: #ffffff !important;
}

/* Light theme - keep default hover behavior (no custom styles needed) */

/* Smooth transition for all buttons */
.rr-btn,
.rr-btn .btn-wrap span {
  transition: all 0.3s ease;
}


/* ========================================
   NAVIGATION MENU HOVER EFFECTS
   ======================================== */

/* DARK THEME ONLY - Navigation links hover with Aureolin Yellow */
.body-wrapper.dark .header-area-2 .main-menu ul li a:hover {
  color: var(--idioma-aureolin) !important;
  transition: color 0.3s ease;
}

/* Active/current page link in dark theme */
.body-wrapper.dark .header-area-2 .main-menu ul li.active a,
.body-wrapper.dark .header-area-2 .main-menu ul li a.active {
  color: var(--idioma-aureolin) !important;
}

/* Mobile menu hover for dark theme */
.body-wrapper.dark .mobile-menu ul li a:hover {
  color: var(--idioma-aureolin) !important;
  transition: color 0.3s ease;
}

/* Smooth transition for navigation links */
.header-area-2 .main-menu ul li a,
.mobile-menu ul li a {
  transition: color 0.3s ease;
}


/* ========================================
   OPTIONAL: ACCENT COLOR UTILITIES
   ======================================== */

/* Use these classes to apply brand colors anywhere */
.text-aureolin {
  color: var(--idioma-aureolin);
}

.bg-aureolin {
  background-color: var(--idioma-aureolin);
}

.border-aureolin {
  border-color: var(--idioma-aureolin);
}

.text-majorelle {
  color: var(--idioma-majorelle);
}

.bg-majorelle {
  background-color: var(--idioma-majorelle);
}


/* ========================================
   HERO VIDEO SECTION - MOBILE OPTIMIZED
   ======================================== */

/* Fixed header with same black as body/footer */
.header-area-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--black);
}

.body-wrapper.light .header-area-2 {
  background-color: var(--white);
}

/* Sticky header also same color */
.header-area-2 .sticky,
.header-area-2 .transformed {
  background-color: var(--black) !important;
}

.body-wrapper.light .header-area-2 .sticky,
.body-wrapper.light .header-area-2 .transformed {
  background-color: var(--white) !important;
}

/* DARK MODE: white logo and white text on dark header */
.body-wrapper.dark .header-area-2 .header__logo img.light {
  display: none !important;
}

.body-wrapper.dark .header-area-2 .header__logo img.dark {
  display: block !important;
}

.body-wrapper.dark .header-area-2 .main-menu li a {
  color: #ffffff !important;
}

.body-wrapper.dark .header-area-2 .rr-btn {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* LIGHT MODE: black logo and dark text on light header */
.body-wrapper.light .header-area-2 .header__logo img.light {
  display: block !important;
}

.body-wrapper.light .header-area-2 .header__logo img.dark {
  display: none !important;
}

.body-wrapper.light .header-area-2 .main-menu li a {
  color: var(--black) !important;
}

.body-wrapper.light .header-area-2 .rr-btn {
  color: var(--black) !important;
  border-color: var(--black) !important;
}

.header-area-2 .side-toggle {
  color: #ffffff !important;
}

/* Hero section - pushed below fixed header, responsive 16:9 */
.hero-video-section {
  position: relative;
  width: 100%;
  margin-top: 80px;
  overflow: hidden;
}

/* Video container - maintains 16:9 aspect ratio */
.video-box-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 80px);
  overflow: hidden;
}

/* Video element - fills container without cropping */
.video-area-hero {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background-color: #000;
}


/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

/* Tablets and smaller */
@media (max-width: 1199px) {
  .hero-video-section {
    margin-top: 70px;
  }

  .video-box-hero {
    max-height: calc(100vh - 70px);
  }
}


/* ========================================
   SERVICES - MORE SPACE FOR TEXT
   ======================================== */

.services-wrapper-1 .service-box {
  grid-template-columns: 1fr 520px 435px;
}

@media only screen and (max-width: 1199px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr 380px 350px;
  }
}

@media only screen and (max-width: 991px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr 280px 300px;
  }
}

/* Mobile: image on top, full width, centered, no crop */
@media only screen and (max-width: 767px) {
  .services-wrapper-1 .service-box {
    grid-template-columns: 1fr;
  }

  .services-wrapper-1 .service-box .thumb {
    order: -1;
    grid-column: auto;
    text-align: center;
  }

  .services-wrapper-1 .service-box .thumb img {
    height: auto;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 15px;
  }
}


/* ========================================
   SPACING ADJUSTMENTS
   ======================================== */

/* Reduce space between hero video and about section */
.about-area-2 .about-area-2-inner.section-spacing-top {
  padding-top: 80px;
}

@media (max-width: 767px) {
  .about-area-2 .about-area-2-inner.section-spacing-top {
    padding-top: 50px;
  }
}

/* Increase text size, width and spacing below 2018 - 2026 */
.about-area-2 .section-content .text-wrapper {
  max-width: 100%;
  margin-top: 120px;
}

.about-area-2 .section-content .text {
  font-size: 28px;
  line-height: 1.6;
  max-width: 1000px;
}

@media (min-width: 1200px) {
  .about-area-2 .section-content .text-wrapper {
    margin-top: 140px;
  }
  .about-area-2 .section-content .text {
    font-size: 34px;
    max-width: 1200px;
  }
}

@media (max-width: 767px) {
  .about-area-2 .section-content .text-wrapper {
    margin-top: 60px;
  }
  .about-area-2 .section-content .text {
    font-size: 20px;
    max-width: 100%;
  }
}

/* Remove border line above services title */
.service-area-service-page .section-header {
  border-top: none;
}

/* Reduce space between about section and services section (desktop only) */
@media (min-width: 992px) {
  .about-area-2 {
    padding-bottom: 0 !important;
    margin-bottom: -50px;
  }
  .about-area-2 .section-content.section-spacing-top {
    padding-bottom: 0;
  }
  .service-area-service-page {
    padding-top: 20px !important;
  }
}