/**
 * ============================================================================
 * LORETTA HEALTH - CUSTOM STYLES
 * ============================================================================
 * 
 * This is the SINGLE SOURCE OF TRUTH for all custom CSS overrides.
 * All customizations to the base Webflow theme should be made here.
 * 
 * FILE STRUCTURE:
 * 1. Global Overrides - Base HTML/body styles, scrollbar hiding
 * 2. Animation Disabling - Remove Webflow's default button animations
 * 3. Navigation - Desktop header styles
 * 4. Navigation Mobile - Mobile header, hamburger menu, overlay
 * 5. Footer - Footer customizations
 * 6. Page-Specific - Styles for individual pages
 * 
 * BREAKPOINTS (Mobile-First):
 * - Default: Mobile base styles
 * - 480px: Small mobile adjustments
 * - 767px: Tablet portrait
 * - 991px: Tablet landscape / small desktop
 * - 1280px+: Desktop
 * 
 * DESIGN TOKENS (from Webflow CSS variables):
 * --white: #f1f9ff (page background)
 * --black: #202529 (primary text)
 * --dark-grey: #646d75 (secondary text)
 * --primary: #013dc4 (brand blue - DO NOT CHANGE)
 * --primary-light: #719dff (light blue)
 * --grey: #a0a7b0 (muted text)
 * --light-grey: #dbdfe2 (borders)
 * 
 * ============================================================================
 */

/* ============================================================================
   1. GLOBAL OVERRIDES
   ============================================================================ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* ============================================================================
   2. ANIMATION DISABLING
   Hide duplicate text elements used for Webflow roll-up animations.
   Main animation disabling is handled via JavaScript in base.html.
   ============================================================================ */

/* Hide the duplicate text used for roll-up animation */
.bottom-absolute-text {
  display: none !important;
}

/* Hide animation background elements */
.button-background,
.nav-menu-item-background,
.nav-logo-background {
  display: none !important;
}

/* ============================================================================
   3. NAVIGATION - DESKTOP
   ============================================================================ */

.nav {
  background-color: #fff;
  position: relative;
  z-index: 1000;
}

.nav .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.nav-content {
  width: 100%;
  display: flex !important;
}

.nav-logo {
  border-right: 1px solid rgba(0,0,0,0.07) !important;
  flex-shrink: 0;
}

.nav-menu-wrapper {
  flex: 1;
  display: flex !important;
}

.nav-menu {
  height: 100%;
  display: flex !important;
  flex: 1;
}

.nav-menu-items-wrapper {
  padding-left: 0 !important;
  flex: 1;
  display: flex !important;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.nav-menu-item {
  border-right: 1px solid rgba(0,0,0,0.07) !important;
}

.nav .button.small-button {
  flex-shrink: 0;
  background-color: #013dc4 !important;
  border: none !important;
}

.nav .button.small-button .button-text {
  color: #fff !important;
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-left: 1px solid rgba(0,0,0,0.07);
  border-right: 1px solid rgba(0,0,0,0.07);
  font-family: Abcdiatype, sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.lang-switcher a {
  color: #666;
  text-decoration: none;
  padding: 4px 8px;
  transition: color 0.2s;
}

.lang-switcher a:hover {
  color: #013dc4;
}

.lang-switcher a.active {
  color: #013dc4;
  font-weight: 500;
}

.lang-switcher span {
  color: #ccc;
  margin: 0 4px;
}

/* Hamburger (hidden on desktop) */
.hamburger-menu {
  display: none;
}

/* ============================================================================
   4. NAVIGATION - MOBILE (max-width: 991px)
   ============================================================================ */

@media (max-width: 991px) {
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  
  .nav .container {
    padding: 0 !important;
  }
  
  .nav-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }
  
  .nav-logo {
    border: none !important;
    padding: 0 !important;
  }
  
  .nav-logo img {
    height: 36px !important;
    width: auto !important;
  }
  
  /* Hamburger Menu Button */
  .hamburger-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
  }
  
  .hamburger-menu:hover {
    background: rgba(0,0,0,0.03) !important;
  }
  
  .hamburger-menu .menu-icon {
    width: 22px !important;
    height: 22px !important;
  }
  
  .hamburger-menu .close-menu-icon {
    display: none !important;
  }
  
  .hamburger-menu.is-open {
    background: #013dc4 !important;
    border-color: #013dc4 !important;
  }
  
  .hamburger-menu.is-open .menu-icon {
    filter: brightness(0) invert(1);
  }
  
  .hamburger-menu.is-open .open-menu-icon {
    display: none !important;
  }
  
  .hamburger-menu.is-open .close-menu-icon {
    display: block !important;
  }
  
  /* Mobile Menu Overlay */
  .nav-menu-wrapper {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    background: #fff !important;
    flex-direction: column !important;
    padding: 24px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
  }
  
  .nav-menu-wrapper.menu-open {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    background: transparent !important;
  }
  
  .nav-menu-items-wrapper {
    flex-direction: column !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  
  .nav-menu-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding: 18px 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  
  .nav-menu-item .regular-s {
    font-family: Abcdiatype, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
  }
  
  /* Mobile Language Switcher */
  .lang-switcher {
    margin-top: 24px;
    padding: 16px 0;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    justify-content: flex-start;
  }
  
  .lang-switcher a {
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s;
  }
  
  .lang-switcher a.active {
    background: rgba(1, 61, 196, 0.1);
    color: #013dc4;
  }
  
  /* Mobile Contact Button */
  .nav .button.small-button {
    margin-top: 24px !important;
    padding: 16px 32px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    width: 100% !important;
    background: #013dc4 !important;
  }
  
  .nav .button.small-button .button-text.regular-s {
    font-family: Abcdiatype, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .nav-content {
    padding: 10px 12px !important;
  }
  
  .nav-logo img {
    height: 32px !important;
  }
  
  .hamburger-menu {
    width: 40px !important;
    height: 40px !important;
  }
  
  .hamburger-menu .menu-icon {
    width: 20px !important;
    height: 20px !important;
  }
  
  .nav-menu-wrapper {
    top: 52px !important;
    height: calc(100vh - 52px) !important;
    padding: 20px 16px !important;
  }
  
  .nav-menu-item {
    padding: 16px 0 !important;
  }
  
  .nav-menu-item .regular-s {
    font-size: 16px !important;
  }
}

/* ============================================================================
   5. FOOTER
   ============================================================================ */

.footer-logo-text-wrapper {
  overflow: visible;
}

.footer-logo-text-wrapper img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-logo-block {
  overflow: visible;
  min-height: auto;
}

/* ============================================================================
   6. PAGE-SPECIFIC STYLES
   ============================================================================ */

/* Hero Section - Mobile Spacing */
@media (max-width: 991px) {
  .section.hero-section {
    margin-top: 80px !important;
  }
}

@media (max-width: 767px) {
  .section.hero-section {
    margin-top: 70px !important;
  }
}

@media (max-width: 480px) {
  .section.hero-section {
    margin-top: 60px !important;
  }
}

/* ============================================================================
   7. FAQ COLLAPSIBLE CATEGORIES (Mobile Only)
   ============================================================================ */

.faq-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-category-toggle {
  display: none;
  width: 24px;
  height: 24px;
  color: var(--primary, #013dc4);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.faq10_list.category-collapsed .faq-category-toggle {
  transform: rotate(180deg);
}

@media (max-width: 991px) {
  .faq-category-toggle {
    display: block;
  }
  
  .faq-category-header {
    padding: 12px 0;
    border-bottom: 1px solid var(--light-grey, #dbdfe2);
    margin-bottom: 0 !important;
  }
  
  .faq10_list .margin-bottom.margin-small {
    margin-bottom: 0 !important;
  }
  
  .faq10_list .faq10_accordion {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    opacity: 1;
  }
  
  .faq10_list.category-collapsed .faq10_accordion {
    max-height: 0;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .faq10_list {
    margin-bottom: 0;
    border-bottom: none;
  }
  
  .faq10_list.category-collapsed {
    margin-bottom: 0;
  }
}