/*
Theme Name: La Boussole Custom
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: Custom WordPress theme converted from static site
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-boussole-custom
*/


/* Define the custom colors used in the layout for better fidelity */
:root {
     --custom-blue: #3A66A8;
     --custom-maroon: #7A2534;
     --light-bg: #EDE6E3;
     /* Using the color from the FAQ container */
     --dark-overlay: rgba(0, 0, 0, 0.5);
}

/* Applying Inter font globally and ensuring full width on all devices */
body {
     font-family: 'Inter', sans-serif;
     color: #333;
     overflow-x: hidden;
     /* Prevents horizontal scrolling issues */
}

/* Custom Tailwind Configuration (simulated) */
.bg-custom-blue {
     background-color: var(--custom-blue);
}

.text-custom-blue {
     color: var(--custom-blue);
}

.hover-bg-custom-blue:hover {
     background-color: var(--custom-blue);
}

.bg-custom-maroon {
     background-color: var(--custom-maroon);
}

.text-custom-maroon {
     color: var(--custom-maroon);
}

/* New custom class for light background, based on FAQ color */
.bg-light-bg {
     background-color: var(--light-bg);
}

.hero-bg {
     background-size: cover;
     background-position: center;
}

/* ========================================================== */
/* 💡 FLUID TYPOGRAPHY (The most important part for responsiveness) */
/* ========================================================== */

/* Hero Heading: 2.25rem (36px) up to 4rem (64px) */
.text-fluid-hero {
     font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
     /* 36px at small, 64px at large */
}

/* Section Headings: 2rem (32px) up to 3rem (48px) */
.text-fluid-section-lg {
     font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
     /* 32px at small, 48px at large */
}

/* Sub/About Headings: 1.875rem (30px) up to 2.5rem (40px) */
.text-fluid-section-md {
     font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
     /* 30px at small, 40px at large */
}

/* ========================================================== */
/* 💡 FADE-IN ANIMATION CSS (Requested feature) */
/* ========================================================== */
@keyframes fadeInUp {
     0% {
          opacity: 0;
          transform: translateY(20px);
     }

     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

/* Custom class for the fade-in effect */
.animate-fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards;
     opacity: 0;
     /* Start invisible */
}


/* Mobile Navigation Toggle Styling */
#mobile-menu-button.open .bar:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
}

#mobile-menu-button.open .bar:nth-child(2) {
     opacity: 0;
}

#mobile-menu-button.open .bar:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -5px);
}

/* Custom styles for FAQ to support collapse transition */
.faq-content {
     transition: max-height 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
     max-height: 0;
     overflow: hidden;
     padding-top: 0;
     padding-bottom: 0;
}

.faq-content.open {
     max-height: 500px;
     /* Arbitrary large value to allow content to show */
     padding-top: 1rem;
     /* Adjust to match the content padding */
     padding-bottom: 0;
}

/* Style Owl Carousel navigation arrows for mobile */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: var(--custom-maroon) !important;
     color: white !important;
     width: 40px !important;
     height: 40px !important;
     border-radius: 50% !important;
     opacity: 0.8;
     transition: opacity 0.3s;
     margin: 0 !important;
}

.owl-carousel .owl-nav button.owl-prev {
     left: -15px;
     /* Adjust position on mobile/small screen */
}

.owl-carousel .owl-nav button.owl-next {
     right: -15px;
     /* Adjust position on mobile/small screen */
}

@media (min-width: 768px) {
     .owl-carousel .owl-nav button.owl-prev {
          left: -30px;
          /* Adjust position on desktop */
     }

     .owl-carousel .owl-nav button.owl-next {
          right: -30px;
          /* Adjust position on desktop */
     }
}

/* Ensure logo stays within container on mobile */
.custom-logo {
     max-width: 100%;
     height: auto;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: crisp-edges;
}

@media (max-width: 768px) {
     .custom-logo {
          width: 80px;
          height: 80px;
          object-fit: contain;
     }
     
     /* Remove sticky positioning on mobile to prevent pinned images */
     .sticky {
          position: relative !important;
     }
}