/*
 Theme Name:   FiestaDelSol
 Theme URI:    
 Description:  Child theme of wlow for Fiesta del Sol
 Author:       Singing Whale Studios
 Author URI:   
 Template:     wlow
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  fiestadelsol
*/

/* ==========================================================================
   CUSTOM STYLES - Add your overrides below 
     blue #198bf2
       orange #FF5b0b
      yellow #ffcf06
 
}
   ========================================================================== */


/* Example: Change background color */
body, html { font-size: 16px;  background-image: linear-gradient(to top, #f8b2fc, #ffafdb, #ffb4bd, #ffbea7, #ffcb9e, #ffcb9e, #ffcb9e, #ffcb9e, #ffbea7, #ffb4bd, #ffafdb, #f8b2fc);  /* background-color: #fbfaee;  margin: 0; padding: 0; height: 100%;*/}

/* Link color */

a:focus, a:hover { color: #198bf2 !important; text-decoration: none; }

p {
    font-weight: 400;
    font-size: 16px;
}

/* Page styles */
.fds-page-wrapper {
  width: 95%;
  max-width:1200px;
  margin: 0 auto 0; 
  padding: 50px 23px 150px; 
  min-height: 500px; 
  background-color: #FFFFFF;
  box-shadow: 5px 6px 10px 0px rgba(0,0,0,0.7);
  overflow: hidden;
}



.ffs_default_wrap{ 
  background-color: #FFFFFF;
  width: 100%; 
  max-width: 980px; 
  padding: 24px; 
  margin: 23px auto; 
  border: #464646 thin solid; 
  -webkit-box-shadow: 4px 6px 16px -1px rgba(0,0,0,0.54);
-moz-box-shadow: 4px 6px 16px -1px rgba(0,0,0,0.54); 
  box-shadow: 4px 6px 16px -1px rgba(0,0,0,0.54);
}

/* Navbar height animation */
.navbar-fixed-top {
    height: 80px;
}
body.navbar-scroll-down .navbar-fixed-top {
    height: 50px;
}


/* ==========================================================================
   LOGO SIZE & POSITION OVERRIDES (Desktop Non-Homepage Only)
   Easy adjustment section - modify values below to resize/reposition logo
   ========================================================================== */

/* ===== DESKTOP LOGO CONTROLS (768px and up) ===== */
@media screen and (min-width: 768px) {
    
    /* Base logo container */
    body:not(.home) .navbar-brand {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* Base logo image - DEFAULT SIZE */
    body:not(.home) .navbar-brand > img.brownlogo {
        display: block;
        height: 65px;           /* ← ADJUST: Default logo height */
        margin-top: 7px;        /* ← ADJUST: Vertical position */
        margin-left: 5%;        /* ← ADJUST: Horizontal position */
        width: auto;
        float: left;
    }
    
    /* Hide the diamond logo on non-home pages */
    body:not(.home) .navbar-brand > img.browndiamond {
        display: none;
    }
}

/* ===== BREAKPOINT: Large Desktop (1200px max) ===== */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    body:not(.home) .navbar-brand > img.brownlogo {
        height: 60px;           /* ← ADJUST: Logo height at 1200px */
        margin-top: 9px;        /* ← ADJUST: Vertical position */
        margin-left: 0;         /* ← ADJUST: Horizontal position */
    }
}

/* ===== BREAKPOINT: Medium-Large Desktop (1120px max) ===== */
@media screen and (min-width: 768px) and (max-width: 1120px) {
    body:not(.home) .navbar-brand > img.brownlogo {
        height: 55px;           /* ← ADJUST: Logo height at 1120px */
        margin-top: 9px;        /* ← ADJUST: Vertical position */
        margin-left: 0;         /* ← ADJUST: Horizontal position */
    }
}

/* ===== BREAKPOINT: Medium Desktop (1095px max) ===== */
@media screen and (min-width: 768px) and (max-width: 1095px) {
    body:not(.home) .navbar-brand > img.brownlogo {
        height: 40px;           /* ← ADJUST: Logo height at 1095px */
        margin-top: 17px;       /* ← ADJUST: Vertical position */
        margin-left: 0;         /* ← ADJUST: Horizontal position */
    }
}

/* ===== BREAKPOINT: Tablet-Desktop (995px max) ===== */
@media screen and (min-width: 768px) and (max-width: 995px) {
    body:not(.home) .navbar-brand > img {
        height: 60px;           /* ← ADJUST: Container height at 995px */
    }
    body:not(.home) .navbar-brand > img.brownlogo {
        height: 50px;           /* ← ADJUST: Logo height at 995px */
        margin-top: 5px;        /* ← ADJUST: Vertical position */
        margin-left: 0;         /* ← ADJUST: Horizontal position */
    }
}

/* ===== BREAKPOINT: Small Desktop/Large Tablet (875px max) ===== */
@media screen and (min-width: 768px) and (max-width: 875px) {
    body:not(.home) .navbar-brand > img.brownlogo {
        height: 40px;           /* ← ADJUST: Logo height at 875px */
    }
}

/* ===== BREAKPOINT: Tablet (820px max) ===== */
@media screen and (min-width: 768px) and (max-width: 820px) {
    body:not(.home) .navbar-brand > img {
        height: 65px;           /* ← ADJUST: Container height at 820px */
    }
    body:not(.home) .navbar-brand > img.brownlogo {
        height: 36px;           /* ← ADJUST: Logo height at 820px */
    }
}

/* ===== END LOGO OVERRIDES ===== */

/* ==========================================================================
   SMOOTH LOGO TRANSITIONS (Desktop only)
   ========================================================================== */

/* Add smooth transitions to logo resizing - desktop only */
@media screen and (min-width: 768px) {
    body:not(.home) .navbar-brand > img,
    body:not(.home) .navbar-brand > img.brownlogo,
    body:not(.home) .navbar-brand > img.browndiamond {
        transition: height 0.3s ease, margin-top 0.3s ease, margin-left 0.3s ease !important;
    }
}
/* phones */
 @media screen and (max-width: 767px) {
.ffs_default_wrap { padding: 12px 8px }
}

/* ==========================================================================
   NAVBAR POSITIONING ADJUSTMENTS (Non-homepage pages only)
   ========================================================================== */

/* Desktop: Position menu items lower initially, animate up on scroll */
@media screen and (min-width: 768px) {
    /* Initial position: menu items ~65px from top (15px from bottom of 80px navbar) */
    body:not(.home) .navbar-fixed-top .navbar-collapse,
    body:not(.home) .navbar-fixed-top #mainmenu {
        padding-top: 30px;
        transition: padding-top 0.3s ease;
    }
    
    /* After scroll: menu items ~20px from top */
    body.navbar-scroll-down:not(.home) .navbar-fixed-top .navbar-collapse,
    body.navbar-scroll-down:not(.home) .navbar-fixed-top #mainmenu {
        padding-top: 0;
    }
}

/* Phone: Reduce navbar height by 20px (non-homepage) */
/* Phone: Reduce navbar height by 20px (non-homepage) */
@media screen and (max-width: 767px) {
    body:not(.home) .navbar-fixed-top {
        height: 66px !important;
    }
    
    /* Move hamburger button 5px further down */
    body:not(.home) .navbar-toggle {
        margin-top: 18px !important;  /* Added !important */
        margin-bottom: 13px !important;  /* Added !important for consistency */
    }
    
    /* Move logo 5px down and 10px from left edge */
    body:not(.home) .navbar-brand {
      padding-top: 8px !important; 
    padding-bottom: 12px !important; 
        padding-left: 25px !important;   
    }
}