/* ===================================================================
   ANGEL CITY MASSAGE - MOBILE-FIRST HEADER CSS
   PAGE ID: 342 SPECIFIC STYLING
   ===================================================================

   This CSS targets Divi's default module classes to create a fixed,
   responsive header with logo on left and navigation on right.

   Structure: Mobile-first approach (mobile styles first, then desktop)
   ================================================================= */

/* ===================================================================
   1. HEADER CONTAINER - MOBILE BASE STYLES
   ================================================================= */

/* Target the main header section - PAGE 342 ONLY */
/*.page-id-342 .et_pb_section.header-section,*/
/*.page-id-342 .et_pb_section[data-header="true"] {*/
/*   position: fixed !important;*/
/*   top: 0 !important;*/
/*   left: 0 !important;*/
/*   right: 0 !important;*/
/*   width: 100% !important;*/
/*   z-index: 9999 !important;*/
/*   background-color: #ffffff !important;*/
/*   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;*/
/*   transition: all 0.3s ease !important;*/
/*}*/

/* Header row container */
/*.page-id-342 .header-section .et_pb_row {*/
/*  display: flex !important;*/
/*  justify-content: space-between !important;*/
/*  align-items: center !important;*/
  /*padding: 15px 20px !important;*/
  min-height: 80px !important; /* This is the key change */
/*  max-width: 100% !important;*/
/*  margin: 0 !important;*/
/*}*/

/* ===================================================================
   2. LOGO STYLING - MOBILE & DESKTOP
   ================================================================= */

/* Logo module container */
/*.page-id-342 .header-section .et_pb_image,*/
/*.page-id-342 .header-section .logo-module {*/
/*   flex-shrink: 0 !important;*/
/*   margin: 0 !important;*/
/*}*/

/* Logo image */
/*.page-id-342 .header-section .et_pb_image img {*/
/*   max-height: 50px !important;*/
/*   width: auto !important;*/
/*   transition: all 0.3s ease !important;*/
/*}*/

/* ===================================================================
   3. NAVIGATION MENU - MOBILE STYLES (BASE)
   ================================================================= */

/* Menu module container */
/*.page-id-342 .header-section .et_pb_menu {*/
/*   margin: 0 !important;*/
/*}*/

/* Corrected Mobile menu icon styling */
/*.page-id-342 .header-section .mobile_nav {*/
 display: flex !important; /* This is the key change */
 flex-direction: column !important; /* Stack the bars vertically */
 justify-content: center !important; /* Center the bars vertically */
/* align-items: center !important;*/
/* margin-left: auto !important;*/
/*}*/

/*.page-id-342 .header-section .mobile_nav .mobile_menu_bar {*/
/* background-color: #333333 !important;*/
/* height: 3px !important;*/
/* width: 24px !important;*/
 margin: 2px 0 !important; /* This provides even spacing between the bars */
/* transition: all 0.3s ease !important;*/
/*}*/

/*.page-id-342 .header-section .mobile_nav:hover {*/
/*   background-color: #f5f5f5 !important;*/
/*   transform: scale(1.05) !important;*/
/*}*/

/* Mobile dropdown menu */
/*.page-id-342 .header-section .et_mobile_menu {*/
/*   background-color: #ffffff !important;*/
/*   border: none !important;*/
/*   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;*/
/*   border-radius: 8px !important;*/
/*   margin-top: 10px !important;*/
/*}*/

/* Mobile menu items - clean styling */
/*.page-id-342 .header-section .et_mobile_menu li a {*/
   /*padding: 15px 20px !important;*/
/*   border: none !important;*/
/*   border-radius: 0 !important;*/
/*   background: transparent !important;*/
/*   color: #333333 !important;*/
/*   font-weight: 500 !important;*/
/*   transition: all 0.3s ease !important;*/
/*   border-bottom: 1px solid #f0f0f0 !important;*/
/*}*/

/*.page-id-342 .header-section .et_mobile_menu li:last-child a {*/
/*   border-bottom: none !important;*/
/*}*/

/*.page-id-342 .header-section .et_mobile_menu li a:hover {*/
/*   background-color: #f8f8f8 !important;*/
/*   color: #007cba !important;*/
/*   padding-left: 25px !important;*/
/*}*/

/* ===================================================================
   4. DESKTOP STYLES - MIN-WIDTH 768px
   ================================================================= */

/*@media (min-width: 768px) {*/
  
   /* Header row - more padding on desktop */
/*   .page-id-342 .header-section .et_pb_row {*/
      /*padding: 20px 40px !important;*/
/*      max-width: 1200px !important;*/
/*      margin: 0 auto !important;*/
/*   }*/
  
   /* Logo - slightly larger on desktop */
/*   .page-id-342 .header-section .et_pb_image img {*/
/*      max-height: 60px !important;*/
/*   }*/
  
   /* Hide mobile menu button on desktop */
/*   .page-id-342 .header-section .mobile_nav {*/
/*      display: none !important;*/
/*   }*/
  
   /* Show desktop menu */
/*   .page-id-342 .header-section .et_pb_menu .nav {*/
/*      display: flex !important;*/
/*      align-items: center !important;*/
/*      gap: 8px !important;*/
/*   }*/
  
   /* Desktop menu items - "little window" styling */
/*   .page-id-342 .header-section .et_pb_menu .nav li a {*/
      /*padding: 5px !important;*/
      /*margin: 0 2px !important;*/
/*      border: 1px solid #d4d4d4 !important;*/
/*      border-radius: 6px !important;*/
/*      background-color: #ffffff !important;*/
/*      color: #333333 !important;*/
/*      font-weight: 500 !important;*/
/*      text-decoration: none !important;*/
/*      transition: all 0.3s ease !important;*/
/*      display: block !important;*/
/*      white-space: nowrap !important;*/
/*   }*/
  
   /* Desktop menu item hover effects */
/*   .page-id-342 .header-section .et_pb_menu .nav li a:hover {*/
/*      background-color: #007cba !important;*/
/*      color: #ffffff !important;*/
/*      border-color: #007cba !important;*/
/*      transform: translateY(-2px) !important;*/
/*      box-shadow: 0 4px 8px rgba(0, 124, 186, 0.3) !important;*/
/*   }*/
  
   /* Active/current menu item */
/*   .page-id-342 .header-section .et_pb_menu .nav li.current-menu-item a,*/
/*   .page-id-342 .header-section .et_pb_menu .nav li.current_page_item a {*/
/*      background-color: #007cba !important;*/
/*      color: #ffffff !important;*/
/*      border-color: #007cba !important;*/
/*   }*/
/*}*/

/* ===================================================================
   5. LARGE DESKTOP STYLES - MIN-WIDTH 1200px
   ================================================================= */

/*@media (min-width: 1200px) {*/
  
   /* More generous spacing on large screens */
/*   .page-id-342 .header-section .et_pb_row {*/
      /*padding: 25px 60px !important;*/
/*   }*/
  
   /* Larger logo on big screens */
/*   .page-id-342 .header-section .et_pb_image img {*/
/*      max-height: 60px !important;*/
/*   }*/
  
   /* Increased gap between menu items */
/*   .page-id-342 .header-section .et_pb_menu .nav {*/
/*      gap: 12px !important;*/
/*   }*/
  
   /* Slightly larger menu item padding */
/*   .page-id-342 .header-section .et_pb_menu .nav li a {*/
      /*padding: 8px 12px !important;*/
/*      font-size: 16px !important;*/
/*   }*/
/*}*/

/* ===================================================================
   6. BODY PADDING COMPENSATION
   ================================================================= */

/* Add top padding to body to prevent content hiding behind fixed header - PAGE 342 ONLY */
/*.page-id-342 body {*/
/*   padding-top: 90px !important;*/
/*}*/

/*@media (min-width: 768px) {*/
/*   .page-id-342 body {*/
/*      padding-top: 110px !important;*/
/*   }*/
/*}*/

/*@media (min-width: 1200px) {*/
/*   .page-id-342 body {*/
/*      padding-top: 130px !important;*/
/*   }*/
/*}*/

/* ===================================================================
   7. SCROLL EFFECTS (OPTIONAL ENHANCEMENT)
   ================================================================= */

/* Slightly reduce header size on scroll (if you want this effect) */
/*.page-id-342 .header-section.scrolled {*/
/*   transform: translateY(0) !important;*/
/*}*/

/*.page-id-342 .header-section.scrolled .et_pb_row {*/
/*   padding-top: 12px !important;*/
/*   padding-bottom: 12px !important;*/
/*}*/

/*.page-id-342 .header-section.scrolled .et_pb_image img {*/
/*   max-height: 45px !important;*/
/*}*/

/*@media (min-width: 768px) {*/
/*   .page-id-342 .header-section.scrolled .et_pb_row {*/
/*      padding-top: 15px !important;*/
/*      padding-bottom: 15px !important;*/
/*   }*/
  
/*   .page-id-342 .header-section.scrolled .et_pb_image img {*/
/*      max-height: 50px !important;*/
/*   }*/
/*}*/

/* ===================================================================
   END OF CSS - ANGEL CITY MASSAGE HEADER
   ================================================================= */

/* ===================================================================
   7. SCROLL EFFECTS (OPTIONAL ENHANCEMENT)
   ================================================================= */

/* Slightly reduce header size on scroll (if you want this effect) */
/*.header-section.scrolled {*/
/*  transform: translateY(0) !important;*/
/*}*/

/*.header-section.scrolled .et_pb_row {*/
/*  padding-top: 12px !important;*/
/*  padding-bottom: 12px !important;*/
/*}*/

/*.header-section.scrolled .et_pb_image img {*/
/*  max-height: 45px !important;*/
/*}*/

/*@media (min-width: 768px) {*/
/*  .header-section.scrolled .et_pb_row {*/
/*    padding-top: 15px !important;*/
/*    padding-bottom: 15px !important;*/
/*  }*/
  
/*  .header-section.scrolled .et_pb_image img {*/
/*    max-height: 50px !important;*/
/*  }*/
/*}*/

/* ===================================================================
   END OF CSS - ANGEL CITY MASSAGE HEADER
   ================================================================= */


/* ================================================
ANGEL CITY – HOMEPAGE HEADER (page-id-283232)
Goal: Logo left, no Gift Card button, clean mobile menu
==================================================*/
/*.page-id-283232 .et_pb_section:last-of-type {*/
/*    margin-bottom: 0;*/
/*    padding-bottom: 0;*/
/*}*/

/* === Sticky Header tidy for mobile === */
/*.et-fixed-header #main-header,*/
/*.et-fixed-header .et_pb_section.et_pb_sticky,*/
/*.et_pb_sticky.et_pb_section {*/
/*    height: auto !important;*/
/*    overflow: visible !important;*/
/*}*/

/* ========================================= */
/* FIX HEADER PADDING IN NON-STICKY STATE */
/* ========================================= */
/*.et_pb_section_0_tb_header {*/
/*    padding-top: 0px !important;*/
/*    padding-bottom: 0px !important;*/
/*}*/

/* ================================
BASE STYLES (Mobile First)
 ================================== */

/* Menu links (mobile default appearance) */
/*.et_pb_menu .et-menu-nav > ul > li > a {*/
/*    background-color: #ffffff;*/
/*    color: #0d335e;*/
/*    font-family: 'Poppins', sans-serif;*/
/*    font-weight: 500;*/
/*    text-transform: capitalize;*/
/*    font-size: clamp(15px, 4vw, 16px);*/
/*    padding: 12px 24px;*/
/*    margin: 0 2px;*/
/*    border-radius: 0;*/
/*    box-shadow: 0 2px 5px rgba(0,0,0,0.08);*/
/*    transition: all 0.3s ease;*/
/*    display: block;*/
/*    white-space: nowrap;*/
/*}*/

/* Tighter li gutters */
/*.et_pb_menu .et-menu > li {*/
/*    padding-left: 2px;*/
/*    padding-right: 2px;*/
/*}*/

/* Hover + focus */
/*.et_pb_menu .et-menu-nav > ul > li > a:hover {*/
/*    background-color: #f4eefc;*/
/*    color: #4b2c56;*/
/*    box-shadow: 0 6px 12px rgba(0,0,0,0.12);*/
/*    transform: translateY(-2px);*/
/*}*/
/*.et_pb_menu .et-menu-nav > ul > li > a:focus {*/
/*    outline: 2px dashed #7272ff;*/
/*    outline-offset: 4px;*/
/*}*/

/* === Mobile hamburger container === */
/*.et_mobile_nav_menu {*/
/*    position: relative;*/
/*    z-index: 10;*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: auto;*/
/*}*/
/*.et_mobile_nav_menu .mobile_menu_bar {*/
/*    display: block;*/
/*    font-size: 26px;*/
/*    color: #0d335e;*/
/*    text-align: right;*/
/*    margin: 10px 60px 0 0;*/
/*}*/

/* Collapsed mobile menu (hidden) */
/*.et_mobile_menu {*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    left: 0; right: 0;*/
/*    width: 100vw;*/
/*    max-height: 0;*/
/*    overflow: hidden;*/
/*    opacity: 0;*/
/*    background-color: #0d335e;*/
/*    box-shadow: 0 8px 12px rgba(0,0,0,0.15);*/
/*    padding: 0;*/
/*    z-index: 9999;*/
/*    transition: max-height 0.5s ease, opacity 0.5s ease;*/
/*}*/

/* When mobile menu opens */
/*.mobile_nav.opened .et_mobile_menu {*/
/*    max-height: 80vh;*/
/*    opacity: 1;*/
/*    padding: 10px 0;*/
/*}*/

/* Animate list items */
/*.et_mobile_menu li {*/
/*    opacity: 0;*/
/*    transform: translateY(-10px);*/
/*    transition: opacity 0.4s ease, transform 0.4s ease;*/
/*    list-style: none;*/
/*    width: 100%;*/
/*    margin: 0; padding: 0;*/
/*}*/
/*.mobile_nav.opened .et_mobile_menu li {*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/

/* Mobile menu links */
/*.et_mobile_menu li a {*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: 12px 24px;*/
/*    color: #fff;*/
/*    font-size: clamp(14px, 4vw, 16px);*/
/*    font-family: 'Poppins', sans-serif;*/
/*    text-decoration: none;*/
/*    white-space: nowrap;*/
/*}*/

/* ==========================
REMOVE GIFT CARD BUTTON
=========================== */

/* If the Gift Card was a menu item (match common slugs/words) */
/*.et_pb_menu .et-menu-nav > ul > li a[href*="gift-card"],*/
/*.et_pb_menu .et-menu-nav > ul > li a[href*="giftcards"],*/
/*.et_pb_menu .et-menu-nav > ul > li a[href*="gift"],*/
/*.et_pb_menu .et-menu-nav > ul > li a[href*="/gift"] {*/
/*    display: none !important;*/
/*}*/

/* If the Gift Card was a CTA module in header */
/*.acm-cta,*/
/*.et_pb_button_module_wrapper.acm-cta {*/
/*    display: none !important;*/
/*}*/

/* ==========================
RESPONSIVE BREAKPOINTS
 =========================== */

/* Phones ≤480px */
/*@media (max-width: 480px) {*/
/*    .et_mobile_menu li a {*/
/*        font-size: 14px;*/
/*        padding: 10px 20px;*/
/*    }*/
/*}*/

/* Tablets ≥768px (slightly tighter link padding) */
/*@media (min-width: 768px) {*/
/*    .et_pb_menu .et-menu-nav > ul > li > a {*/
/*        padding: 10px 18px;*/
/*        font-size: 15px;*/
/*    }*/
/*}*/

/* ----------------------------------------------
DESKTOP BEHAVIOR (≥981px): LOGO LEFT, NAV RIGHT
---------------------------------------------- */
/*@media (min-width: 981px) {*/

    /* Ensure desktop menu shows, mobile hides */
/*    .et_pb_menu .et_pb_menu__menu { display: flex !important; }*/
/*    .et_pb_menu .et_mobile_nav_menu { display: none !important; }*/

    /* Force a proper row layout: logo left, nav right */
/*    .et_pb_menu .et_pb_menu__wrap {*/
/*        display: flex !important;*/
/*        align-items: center;*/
/*        justify-content: space-between;*/
/*        gap: 24px;*/
/*    }*/

    /* Place logo at start (left) and nav at end (right) */
/*    .et_pb_menu .et_pb_menu__logo-wrap { order: 0; margin-right: auto !important; }*/
/*    .et_pb_menu .et_pb_menu__menu { order: 1; margin-left: auto !important; }*/

    /* If the module was set to "centered", neutralize it */
/*    .et_pb_menu__logo-center { display: none !important; }*/

    /* Logo sizing */
/*    .et_pb_menu .et_pb_menu__logo img {*/
/*        max-height: 56px; width: auto; height: auto;*/
/*    }*/

    /* Desktop link sizing & gutters */
/*    .et_pb_menu .et-menu-nav > ul > li > a {*/
/*        font-size: 14px;*/
/*        padding: 6px 12px;*/
        box-shadow: none; /* flatter on desktop if you prefer */
/*    }*/
/*    .et_pb_menu .et-menu > li {*/
/*        padding-left: 3px;*/
/*        padding-right: 3px;*/
/*    }*/

    /* Keep nav aligned to the right edge */
/*    .et_pb_menu .et-menu-nav > ul {*/
/*        justify-content: flex-end;*/
/*        flex-wrap: nowrap;*/
/*        margin-left: 40px;*/
/*        margin-right: 40px;*/
/*    }*/
/*}*/

/* Laptops/Tablets Landscape (981px–1439px): slightly tighter */
/*@media (min-width: 981px) and (max-width: 1439px) {*/
/*    .et_pb_menu .et-menu-nav > ul > li > a {*/
/*        font-size: 14px;*/
/*        padding: 6px 10px;*/
/*    }*/
/*    .et_pb_menu .et-menu > li {*/
/*        padding-left: 2px;*/
/*        padding-right: 2px;*/
/*    }*/
/*}*/

/* Desktops (1440px–1639px) */
/*@media (min-width: 1440px) and (max-width: 1639px) {*/
/*    .et_pb_menu .et-menu-nav > ul > li > a {*/
/*        font-size: 14px !important;*/
/*        padding: 6px 10px !important;*/
/*    }*/
/*    .et_pb_menu .et-menu > li {*/
/*        padding-left: 2px !important;*/
/*        padding-right: 2px !important;*/
/*    }*/
/*}*/

/* Large Desktop (1640px–1919px): allow a tad more padding and bigger logo */
/*@media (min-width: 1640px) and (max-width: 1919px) {*/
/*    .et_pb_menu .et-menu-nav > ul > li > a {*/
/*        font-size: 15px !important;*/
/*        padding: 6px 12px !important;*/
/*    }*/
/*    .et_pb_menu .et-menu > li {*/
/*        padding-left: 3px !important;*/
/*        padding-right: 3px !important;*/
/*    }*/
/*    .et_pb_menu__logo img {*/
/*        max-width: 120px !important;*/
/*    }*/
/*}*/

/* Ultra-wide (1920px+): keep things calm */
/*@media (min-width: 1920px) {*/
/*    .et_pb_menu .et-menu-nav > ul > li > a {*/
/*        font-size: 15px;*/
/*        padding: 6px 12px;*/
/*    }*/
/*}*/

/* Position hamburger icon on small screens (visual centering) */
/*@media (max-width: 767px) {*/
/*    .et_mobile_nav_menu .mobile_menu_bar {*/
/*        position: absolute !important;*/
/*        top: 50% !important;*/
/*        right: 16px !important;*/
/*        transform: translateY(-50%) !important;*/
/*        margin: 0 !important;*/
/*        padding: 0 !important;*/
/*        z-index: 9999 !important;*/
/*    }*/
/*}*/

/* Force mobile menu ≤1024px (optional – keeps layout simple on iPad) */
/*@media (max-width: 1024px) {*/
/*    .et_pb_menu .et_pb_menu__menu { display: none !important; }*/
/*    .et_pb_menu .et_mobile_nav_menu { display: block !important; }*/
    /* If a centered logo version sneaks in, allow center on mobile */
/*    .et_pb_menu__logo-center { display: flex !important; }*/
/*}*/

/*.et_pb_image_wrap {*/
/*    border-top: none !important;*/
/*}*/