/**
* Business Name: Blue Zone Vacations, LLC
* Palette Derived from: https://coolors.co/d1cbc1-7299df-f7f4f4-3f6c51
* Updated: Dec 08 2025 based on Arsha Bootstrap Template
* Author: Steve Lang
*/

/* ============================================================= */
/* BLUE ZONE VACATIONS – Custom Palette & Overrides (Arsha Template) */
/* ============================================================= */

/* 
   This custom CSS file is designed to be loaded AFTER Arsha's main style.css.
   It combines two approaches:
   1. Defining custom --bz-* variables for your specific palette colors, with descriptive names tied to your theme (e.g., palms for green accents evoking tropical relaxation).
      - These are documented with reasons for selection, ensuring harmony with your "relaxation, sophistication, and modern experiences" vibe.
      - All colors share a warm-gray undertone family for perfect cohesion: no clashing, effortless flow in any lighting.
   2. Overriding Arsha's built-in :root global variables (like --accent-color) with references to your --bz-* vars.
      - This leverages Arsha's own system for broad, efficient changes without !important spam.
      - We also override nav-specific vars for menu consistency.
      - Optional: Tweaks to .light-background and .dark-background for alternate sections.

   Bonus: Custom font imports and overrides at the end to enhance the luxurious, coastal theme.
      - Fonts chosen for timeless elegance (serif headings like ancient stone) paired with modern readability (sans-serif body).

   Best practice reasoning: 
   - Variable overrides handle 90% of the recoloring automatically via Arsha's cascade.
   - We add a few targeted class selectors (from the first approach) only where needed for fine-tuning, like buttons or hovers.
   - This keeps the file lean, maintainable, and future-proof against Arsha updates.
   - You're not wrong to want this combined method—it's smart! It gives you named colors for easy reference while respecting the template's structure.
*/

/* Step 1: Define your custom Blue Zone palette as --bz-* variables */
/* These are the core colors from our collaboration, named intuitively for your theme. */
:root {
  /* Main Neutral: Agreeable Gray – #D1CBC1
     - Reason: Your specified base color. A warm greige (gray-beige) that feels sophisticated and grounding without being cold.
     - Use: Backgrounds, large neutral areas for a modern, timeless foundation. Evokes soft sand or weathered stone in a resort setting. */
  --bz-gray: #D1CBC1;

  /* Clean Soft White: Eider White – #E7E4E0
     - Reason: Whiter than initial suggestions, with minimal yellow tint as you requested. Feels like sun-bleached ancient stone—fluffy, clean, safe, and inviting.
     - Use: Cards, text backgrounds, negative space for a bright, airy luxury feel. Perfect for "ancient stone" timelessness in a coastal vibe. */
  --bz-white: #E7E4E0;

  /* Palm Green Accent: Evergreen Fog – #9CAF98
     - Reason: Muted, dusty sage with gray undertones to evoke relaxed palm fronds without overwhelming. Brings in tropical elements harmoniously.
     - Use: Buttons, icons, secondary accents for a spa-like, natural relaxation touch. Harmonizes with the palette's warm-gray family for cohesion. */
  --bz-palm: #9CAF98;

  /* Water Blue Accent: Rainwashed – #A5C8D0
     - Reason: Soft, airy aqua-blue with gray tones, inspired by clear Caribbean water and infinity pools. Adds color as you wanted, staying sophisticated.
     - Use: Primary CTAs, links, hero highlights for a modern, watery "Blue Zone" experience. Blends seamlessly with other colors for visual harmony. */
  --bz-water: #A5C8D0;

  /* Signature Blue Zone Blue: Blue Plate – SW 6796
     - Reason: A classic, medium-toned blue (known as Steel Blue) that is lighter and leans slightly toward a gray-blue, which helps it harmonize beautifully with your neutral colors (--bz-gray/--bz-white). It's sophisticated and avoids purple completely.
     - Use: Logo, primary accents, headings. Bridges the palette perfectly; pops on light backgrounds without clashing. Your "blue" for Blue Zone identity. */
  --bz-blue: #017CA7; 

  /* Deep Grounding Accent: Naval – #1F2D35
     - Reason: Velvety almost-black navy for depth and sophistication. Optional for contrast, evoking night skies over the ocean.
     - Use: Headlines, footers, hover states. Adds modern elegance without feeling corporate; grounds the lighter tones for balance. */
  --bz-navy: #1F2D35;
}

/* Step 2: Override Arsha's global :root colors with your --bz-* vars */
/* This propagates changes site-wide efficiently. We're not overriding --default-color or --contrast-color fully, as Arsha's defaults work well for readability. */
:root { 
  --background-color: var(--bz-white);   /* Eider White: Clean, inviting site-wide background for a soft, stone-like timeless feel. */
  --default-color: #444444;              /* Keep Arsha's dark gray for most text: Excellent contrast on your light palette without changes. */
  --heading-color: var(--bz-blue);       /* Oceanside Blue: All headings get your signature blue for brand consistency and sophistication. */
  --accent-color: var(--bz-blue);        /* Oceanside Blue: Buttons, links, standouts—your true blue as the main accent for "Blue Zone" identity. */
  --surface-color: #ffffff;              /* Pure white for boxed elements: Keeps cards crisp; swap to var(--bz-white) if you want softer. */
  --contrast-color: #ffffff;             /* White text on accents: Ensures readability on blues/greens. */
}

/* Override Arsha's nav-specific :root vars */
/* Tailored for your theme: White text on blue header, with a soft gray for hovers. */
:root {
  --nav-color: var(--bz-white);                  /* Eider White: Default nav links on the blue header. */
  --nav-hover-color: var(--bz-gray);            /* Agreeable Gray: Hover/Active state for a soft, sophisticated transition. */
  --nav-active-color: var(--bz-gray);           /* Ensure the active/current page link also uses the gray. */
  --nav-mobile-background-color: var(--bz-white);  /* Eider White: Mobile menu bg for clean, inviting feel. */
  --nav-dropdown-background-color: #ffffff;     /* Pure white: Dropdowns stay simple and readable. */
  --nav-dropdown-color: #444444;                /* Dark gray: Dropdown text for contrast. */
  --nav-dropdown-hover-color: var(--bz-palm);   /* Evergreen Fog: Dropdown hovers match main nav for harmony. */
}


/*
  Override Arsha's header-specific variables globally,
  which allows Arsha's own components (like header-scrolled) to use them.
  This is cleaner than using !important.
*/
:root {
  --nav-background-color: var(--bz-blue); /* Apply your blue globally for consistency */
  --nav-scrolled-background-color: var(--bz-blue); /* Ensure it stays blue when scrolled */
}

/*
  Add your transparency effect using your custom blue var instead of the !important block.
  This will look for the non-scrolled state and apply a semi-transparent version
  of the header background color.
*/
#header:not(.header-scrolled) {
  /* Use a color function if supported, or stick to your rgba for safety */
  background: rgb(from var(--bz-blue) r g b / 0.95) !important;
}

/* Line 103-110: Apply Arsha's header styles to #header ID */
#header {
  --background-color: var(--bz-blue);
  --heading-color: var(--bz-white);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
}

/* Line 103-107: Ensure mobile nav toggle is visible */
.mobile-nav-toggle {
  display: none;
}

@media (max-width: 1199px) {
  .mobile-nav-toggle {
    display: block;
  }
}

/* ============================================= */
/* LOGO TEXT OVERRIDE — Force White on Blue Header */
/* ============================================= */
#header .logo a,
#header .logo h1 a {
  /* Set color to white for visibility */
  color: var(--bz-white) !important; /* Added !important for guaranteed visibility */

  /* CRITICAL FIX 1: Reset text-transform to remove ALL CAPS */
  text-transform: none !important; 
  
  /* CRITICAL FIX 2: Apply small-caps */
  font-variant: small-caps;}

/* Ensure the color stays white on hover/focus states */
#header .logo a:hover,
#header .logo h1 a:hover {
  color: var(--bz-white);
  opacity: 0.8; 
}

/* ============================================= */
/* HERO SECTION OVERRIDES */
/* ============================================= */

/* ============================================= */
/* HERO SECTION OVERRIDES - SPACING FIX */
/* ============================================= */

/* Target the hero section with maximum specificity to override base template styles. */
section#hero.hero {
/* Set max height to prevent the section from becoming massive */
  min-height: 60vh !important; 

  /* Ensure margin is zero */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Add a rule to prevent internal content containers from adding height */
#hero .container {
    /* Suggested Value: 50% of the viewport height */
    min-height: 60vh !important;
    
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. CRITICAL COLOR FIX: Use highly specific selectors to force text color. */
/* This targets the H1 (monicker), P (location/guests), and H2 (rate) specifically. */
#hero .carousel-container .container h1,
#hero .carousel-container .container p,
#hero .carousel-container .container h2 {
  color: var(--bz-white) !important; /* Force to Eider White for visibility */
}

/* ============================================= */
/* CARDS/GUTTER FIX (e.g., Featured Listings) */
/* ============================================= */

/* Target the .card inside the featured section columns */
#featured .col-lg-4 .card,
#featured .col-md-6 .card {
    /* Add a standard gutter padding to columns to separate the cards */
    padding-left: 15px; 
    padding-right: 15px;

    /* CRITICAL FIX: Ensure the card takes up 100% of the column width */
    width: 100% !important;
    /* Ensure it behaves like a block element, taking full width */
    display: block !important;
}

/* ============================================= */
/* HERO CAROUSEL INDICATOR FIX */
/* ============================================= */

/* Target the list items inside the carousel indicators to hide the numbers/bullets */
#heroCarousel .carousel-indicators li {
    /* CRITICAL FIX: Ensure no list style (numbers, discs, etc.) is displayed */
    list-style: none !important; 
}

/* Optional: Check the parent element to ensure it's not adding numbers */
#heroCarousel .carousel-indicators {
    list-style: none !important;
}

/* ============================================= */
/* CARDS HOVER EFFECT FIX (Bounce) */
/* ============================================= */

/* 1. Set the transition on the base state for smooth animation */
#featured .card {
    /* Apply transition to transform and box-shadow for a smooth lift */
    transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out !important;
}

/* 2. Define the hover state (the bounce) */
#featured .card:hover {
    /* Move the card up by 10 pixels */
    transform: translateY(-10px) !important;
    /* Increase the shadow for a clear "lifted" effect */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================= */
/* ALL LISTINGS (PORTFOLIO) VERTICAL GUTTER FIX */
/* ============================================= */

/* Target the columns within the #listings section */
#listings .portfolio-item {
    /* Apply vertical spacing to the bottom of each card */
    margin-bottom: 30px !important;
}

/* ============================================= */
/* LISTING DETAIL HERO & CAROUSEL (3:2 Ratio) */
/* ============================================= */

/* Container for the specific listing hero */
.listing-hero-container {
    width: 100%; /* Fill the col-lg-8 container */
    margin-bottom: 0px;
    border-radius: 12px;
    overflow: hidden; /* Clips the images to the border radius */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Force the carousel to a 3:2 aspect ratio */
.listing-hero-carousel .carousel-inner {
    aspect-ratio: 3 / 2; /* 1200 / 800 = 1.5 or 3/2 */
    height: auto !important; /* Override the fixed 500px in your HTML */
}

/* Ensure the item and image fill the ratio perfectly */
.listing-hero-carousel .carousel-item {
    height: 100% !important; /* Override the inline style */
}

.listing-hero-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centers the normalized image */
}

/* Responsive adjustment for mobile: keeps it 3:2 but smaller scale */
@media (max-width: 768px) {
    .listing-hero-container {
        border-radius: 0; /* Full width on mobile */
    }
}

/* ============================================= */
/* FOOTER COLOR and SMALL CAPS FIX */
/* ============================================= */

/* Target the footer element */
#footer {
    /* Set background to your specific Oceanside Blue (Dark Blue) */
    background: var(--bz-blue) !important; 
    
    /* Ensure text (links/text inside the footer) is visible on this dark background */
    color: var(--bz-white) !important;
}

/* Optional: Fix text color for any links inside the footer */
#footer a {
    color: var(--bz-white) !important; /* Use white for links */
}

/* Target the app name element (usually strong or span) inside the footer */
#footer strong,
#footer span {
    /* CRITICAL FIX 1: Reset text-transform to remove ALL CAPS */
    text-transform: none !important; 
    
    /* CRITICAL FIX 2: Apply small-caps */
    font-variant: small-caps !important; 
}