/* ----------------------------- */
/* File: styles.css              */
/* ----------------------------- */

:root{
  --bg: #FBF6F2; /* soft beige */
  --ink: #402F2A; /* deep taupe for text */
  --muted: #7a6f6a;
  --lavender: #C7B9E6; /* soft lavender */
  --teal: #5EAFA3; /* soft teal */
  --lightteal: #a9cac6; /* light teal */
  --accent: #E5D9C7; /* palette tone */
  --white: white;
  --radius: 12px;

  /* STANDARD SPACING AND SIZING */
  --spacing-sm: 0.8rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 3.5rem; /* Increased section padding */

  /* TYPOGRAPHY STANDARDS */
  --font-h1: 3.2rem;
  --font-h2: 2.2rem;
  --font-h3: 1.8rem;
  --font-h4: 1.25rem;
  --font-body: 1.05rem; /* Slightly increased for readability */
  --font-small: 0.95rem;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x: hidden;} /* Added overflow-x: hidden to prevent horizontal scrolling */
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased}

/* Standardized Container Padding */
.container{max-width:1800px;margin:0 auto;padding:var(--spacing-md)}
.container-head{max-width:1800px;margin:0 auto;padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);}
.container-med{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}
.container-med-left{max-width:100%;padding:0} 

/* --- FULL-SCREEN BACKGROUND CONTAINER --- */
.hero-masthead {
    height: 100vh;
    background-image: url('assets/heroc.jpg'); /* REPLACE THIS PATH */
    background-size: cover; 
    background-position: center 30%; /* Default position */
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

/* Header */
.site-header{background:transparent;padding:0;flex-shrink: 0;z-index: 10;}
.header-inner{display:flex;align-items:stretch;justify-content:space-between;flex-wrap: nowrap;position: relative;}
.brand{display:flex;align-items:center;gap:15rem}
.logo-mark{width:auto;height:200px;object-fit:contain} /* ADJUSTED FOR DESKTOP */
.brand-name{font-family: 'Montserrat', system-ui;font-size:1.15rem;letter-spacing: 0.05em;margin:0}
.site-nav{display:flex;gap:1.5rem;height: 100%;align-items:flex-start;margin-top:2rem;}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:400;font-family: 'Montserrat', system-ui;font-size: 1rem;letter-spacing: 0.05em;}
.site-nav .cta{background:var(--lavender);margin-top:-9px;padding:0.5rem 0.9rem;border-radius:999px;color:var(--ink)}
#nav-toggle{display:none;background:transparent;border:0;font-size:1.5rem; cursor: pointer;}

/* Hero */
.hero{
    flex-grow: 1; 
    display: flex;
    align-items: center; 
    padding:var(--spacing-lg) 0;
}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-title{font-family:'Playfair Display',serif;font-size:var(--font-h1);color:var(--white);margin:0 0 0.5rem;text-shadow: 
        1px 1px 0 black, /* Right-down shadow */
        -1px -1px 0 black, /* Left-up shadow */
        1px -1px 0 black, /* Right-up shadow */
        -1px 1px 0 black; /* Left-down shadow */}
.hero-sub{color:var(--bg);margin:0 0 1.25rem; font-size: var(--font-body);text-shadow: 
        1px 1px 0 black, /* Right-down shadow */
        -1px -1px 0 black, /* Left-up shadow */
        1px -1px 0 black, /* Right-up shadow */
        -1px 1px 0 black; /* Left-down shadow */}
.placeholder-img{background:linear-gradient(135deg,var(--accent),#efe6e1);border-radius:var(--radius);height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600}

/* Buttons */
.btn-primary {
    display:inline-block;
    background:var(--lavender);
    padding:0.7rem 1.1rem;
    border-radius:999px;
    text-decoration:none;
    color:var(--ink);
    font-weight:600;
    border: none;
    transition: opacity 0.2s ease;
}
.btn-primary:hover, .btn-primary:focus {
    opacity: 0.85;
    cursor: pointer;
    outline: none;
}

/* Sections */
.section{padding:var(--spacing-lg) 0}
.section h3{font-family:'Playfair Display',serif;margin:0 0 var(--spacing-md);font-size:var(--font-h3)}
.muted{color:var(--muted); font-size: var(--font-small);}
p, ul, li {
    font-size: var(--font-body);
    line-height: 1.6;
}

/* About Section */
.about-grid{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:center}
.about-grid img {
    max-width: 100%;
    height: auto; 
    border-radius: var(--radius);
    display: block; 
}

/* Services Section */
.cards{display:flex;gap:2rem;padding:var(--spacing-md) 0;flex-wrap:wrap}
.card-parent{
    background:white;
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(60,40,30,0.05);
    flex:1 1 45%; /* Allows two cards per row */
    min-width:300px;
    overflow: hidden;
    padding: 0;
}
.card-parent h2 {
    font-family: 'Playfair Display', serif;
    font-size: var(--font-h4);
    padding: 1rem 1.5rem 0.5rem;
    margin: 0;
}
.card{
    background:rgba(94, 175, 163, 0.15); /* Use background color for inner card distinction */
    border-radius:0;
    box-shadow:none;
    padding:1rem 1.5rem; /* Inner padding */
    
    /* --- CRITICAL FIX: EXPLICIT MARGIN SHORTHAND --- */
    /* Format: top | right | bottom | left */
    /* Sets 0.8rem gap at the bottom */
    margin: 0 0 0.8rem 0; 
    
    flex:1;
    min-width:unset;
    
    /* OPTIONAL: Use a border for a cleaner visual separation line */
    border-bottom: 1px solid var(--accent);
    
    /* CRITICAL FIX: Anchor for the absolute button */
    position: relative; 
    overflow: visible;
    cursor: default;
}
/* Ensure the last card has no bottom margin or border */
.card-parent .card:last-child {
    margin-bottom: 0;
    border-bottom: none;
}
.card h4{margin:0 0 0.5rem; font-size: var(--font-small); color: var(--teal);} /* Use teal for distinction */
/* NEW: Inline "Book now" button style */
.btn-card-inline {
    display: inline-block;
    background: var(--lavender);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: var(--font-small);
    
    /* CRITICAL FIX: Positioning the button relative to the card */
    position: absolute; 
    bottom: 1rem; /* 1rem up from the bottom edge of the card */
    right: 1.5rem; /* 1.5rem in from the right edge of the card */
    
    /* REMOVED: float, margin-top, clear: right; */
    
    transition: opacity 0.2s ease;
}
.btn-card-inline:hover {
    opacity: 0.85;
}

.card-img {
    width: 100%;
    height: 200px; /* Consistent height */
    object-fit: cover; 
    display: block;
    margin-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0; 
}

/* Reflexology Blurb Section */
.reflexology-blurb {
    padding: 4rem 0; 
    background-image: linear-gradient(rgba(251, 246, 242, 0.8), rgba(251, 246, 242, 0.8)), url('assets/reflexologyBG.jpg'); /* REPLACE THIS PATH */
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
}
.reflexology-blurb .container-med { /* Updated selector to container-med */
    max-width: 800px;
    text-align: left;
}
.reflexology-blurb h3 {
    font-size: var(--font-h2); /* More prominent heading */
    margin-bottom: 1.5rem;
}
.reflexology-blurb p {
    font-size: var(--font-body);
    line-height: 1.6;
}

/* Reflexology Blurb Columns */
.blurb-columns {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    text-align: left;
}
.blurb-col {
    flex: 1 1 50%;
    background: rgba(255, 255, 255, 0.7); /* Slightly higher opacity for text readability */
    padding: 1.5rem;
    border-radius: var(--radius);
}
.blurb-col h4 {
    font-size: var(--font-h4);
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-weight: 700;
}
.blurb-col ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0;
}
.blurb-col li {
    margin-bottom: 0.4rem;
    line-height: 1.4;
    font-size: var(--font-small);
}


/* Contact Section */
.contact-grid{
    display:grid;
    background: rgba(94, 175, 163, 0.15); /* Slightly lighter wash */
    border-radius:var(--radius);
    grid-template-columns:1fr 320px;
    gap:2rem;
    padding:3rem; /* Increased padding */
}
form label{display:block;margin-bottom:0.6rem; font-size: var(--font-small);}
input,textarea{width:100%;padding:0.8rem;border-radius:8px;border:1px solid var(--accent);font-family:inherit; background: var(--white);}
textarea{resize:vertical;}


/* Map */
.map-container {
    overflow: hidden; 
    padding-top: 10px;
    border-radius: var(--radius);
}
.map-container iframe {
    width: 100%;
    height: 300px;
    display: block;
    border-radius: var(--radius);
}

/* Affiliations */
.affiliations {
    padding: 2rem 0; 
    text-align: center;
}
.logo-grid {
    display: flex;
    justify-content: center; 
    gap: 3rem; 
    flex-wrap: nowrap;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
.logo-item {
    max-height: 200px; /* Reduced overall size for better centering */
    max-width: 250px; 
    width: auto;
    height: auto;
    filter: grayscale(0%); 
    transition: filter 0.3s ease;
}
.logo-item:hover {
    filter: grayscale(100%);
}
.center-text {
    text-align: center;
}

/* Footer Columns */
.footer-columns {
    display: flex;
    justify-content: space-between; 
    max-width: none; 
    margin: 0 auto; 
    gap: 1.5rem; 
    padding-top: 2rem; /* Added top padding */
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--accent);
    text-align: left;
}

.footer-col {
    flex: 0 0 auto; 
    min-width: unset; 
    text-align: left;
}

.footer-col h4 {
    font-family: 'Playfair Display', serif;
    font-size: var(--font-h4);
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 0.5rem;
    font-size: var(--font-small);
}

.footer-col a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* Footer Inner (Copyright) */
.footer-inner {
    text-align: center; 
    display: block; 
    padding-top: 0; 
    padding-bottom: 2rem;
}

/* --- MODAL STYLES (No changes needed, kept for completeness) --- */
/*.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 1000;
    background: var(--bg);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}*/
/* 1. Make the modal container fixed and centered */
.modal {
    display: none; /* CRITICAL: Hides the modal container */
    position: fixed; 
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
/* 2. Constrain and make the content scrollable */
.modal-content {
    background: var(--bg);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 90%; /* General width on all screens */
    max-width: 650px; /* Maximum desktop width */
    
    /* CRITICAL FIXES: Fixed height and scrolling */
    height: auto; /* Allow auto height on desktop if content is short */
    max-height: 80vh; /* Limits height to 80% of viewport height (vh) */
    overflow-y: auto; /* Enables vertical scrolling when content exceeds max-height */
    
    /* New: Adds padding at the bottom to ensure the 'Close' button is clear */
    padding-bottom: 5rem; 
    
    position: relative; /* Anchor for potential absolute elements (like a top-right close button) */
}
.modal-content h3 {
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif;
    margin-top: 0;
    margin-bottom: 1rem;
}
.modal-content p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 1rem;
}
#modal-overlay {
    display: none; /* Hides the overlay by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#modal-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
.modal-content .btn-primary {
    display: inline-block; 
}


/* --- RESPONSIVENESS FIX AND CONSOLIDATION --- */
/* Tablet/Desktop Breakpoint (900px) */
@media (max-width: 900px) {
    /* HERO */
    .hero-masthead {
        background-position: center 20%;
    }
    .hero-grid{grid-template-columns:1fr}
    .hero-title{font-size:3rem}
    .hero-sub{font-size:var(--font-body)}

    /* HEADER / NAV FIXES */
    
    /* FIX: Ensure the header container allows the menu to drop down without clipping */
    .header-inner {
        padding-top: 1rem; 
        padding-bottom: 1rem;
        align-items: center; 
        /* Ensure there's NO overflow: hidden on header-inner or site-header */
    }
    
    /* Ensure hamburger toggle is visible */
    #nav-toggle {
        display: block; 
        font-size: 2rem;
        z-index: 100;
    }
    
    /* FIX: Style the hidden menu container */
    .site-nav {
        display: none; 
        position: absolute;
        top: 100%; 
        right: 0;
        width: 100%;
        /* FIX: Remove height constraints and let content determine height */
        height: auto; 
        max-height: none; 
        
        background-color: var(--bg); /* Solid background for full coverage */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        z-index: 90;
        flex-direction: column;
        align-items: center; 
        padding: 0; /* CRITICAL: Padding here would create transparent borders */
        margin-top: 0;
        
        border-bottom-left-radius: 0 /*var(--radius)*/;
        border-bottom-right-radius: 0 /*var(--radius)*/;
        overflow: hidden; 
    }
    
    /* Show the menu when the 'open' class is toggled by JS */
    .site-nav.open {
        display: flex;
    }
    
    /* FIX: Style all links for consistent height and look */
    .site-nav a { 
        display: block; 
        width: 100%;
        padding: 1rem 0; 
        text-align: center;
        border-bottom: 1px solid var(--accent);
        margin: 0;
        color: var(--ink);
        font-weight: 400; 
        /* Ensure background is inherited from the parent container */
        background-color: var(--bg); 
    }
    
    .site-nav a:last-child {
        border-bottom: none;
    }
    
    /* Final consistency check for the CTA button */
    .site-nav .cta {
        margin: 0; 
        padding: 1rem 0; 
        background: transparent;
        color: var(--teal);
        font-weight: 700;
        border-radius: 0;
    }
}

/* Tablet/Mobile Breakpoint (768px) - Stacking all columns */
@media (max-width: 768px) {
    /* GENERAL CONTAINERS - Fixes the padding issue on narrow screens */
    .container, .container-head, .container-med {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }
    .container-head {
      padding-bottom: 1rem;
    }
    
    /* HEADER / NAV FIX */
    .logo-mark {
        height: 80px; /* Reduced logo size for mobile */
    }
    .site-header {
        padding: 0;
    }
    .header-inner {
        padding-top: 1rem; /* Added top spacing for header content */
        align-items: center; /* Vertically centers logo and menu */
        justify-content: space-between;
    }
    .brand {
        gap: 0; /* Remove unnecessary gap */
    }
    .site-nav {
        margin-top: 0; /* Ensures the toggle button is aligned */
    }

    /* SECTIONS */
    .section{padding:var(--spacing-md) 0}
    .contact-grid { padding: 1.5rem; }

    /* ABOUT */
    .about-grid{grid-template-columns:1fr}

    /* SERVICES (Cards) - Ensure they stack */
    .cards {
        flex-direction: column;
        padding: 0;
        gap: 2rem;
    }
    .card-parent {  
        margin: 0;
        min-width: unset;
    }
    .card-parent .card:last-child {
    margin-bottom: 0;
    border-bottom: none;
    }
    /* FIX: Increase bottom padding on service cards for mobile clearance */
    .card {
        /* Pushes content up to make room for the absolute button at the bottom */
        padding-bottom: 2.5rem;
    }
    
    /* REFLEXOLOGY BLURB */
    .reflexology-blurb { padding: 2rem 0; }
    .blurb-columns {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* CONTACT */
    .contact-grid{grid-template-columns:1fr;}
    
    /* FOOTER */
    .footer-columns {
        flex-direction: column;
        max-width: 100%; 
        gap: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .footer-col {
        text-align: left;
    }
    
    /* AFFILIATIONS FIX: Force one logo per row and increase mobile size */
    .affiliations {
        padding: 1.5rem 0; /* Adjust vertical padding */
    }
    .logo-grid {
        display: flex; /* Keep flex container */
        flex-direction: column; /* FORCES stacking (one item per line) */
        align-items: center; /* Centers the logos horizontally */
        gap: 1.5rem; /* Space between stacked logos */
        margin-top: 1rem;
    }
    .logo-item {
        max-height: 200px; /* Increased size for mobile view */
        max-width: 100%; /* Allows the image element to take full width for centering */
        width: auto; /* Ensure image scales correctly */
        height: auto;
        object-fit: contain; /* Prevents stretching */
    }

    /* Modal adjustments for small devices */
    .modal-content {
        width: 95%; /* Use more screen width */
        max-height: 90vh; /* Use a bit more height if needed */
        margin: 1rem 0; /* Ensures small margin at top/bottom for scrolling */
    }
    
    /* HERO */
    .hero-masthead {
        background-position: center 60%; 
    }
    .hero-title {
        font-size: 2rem;
    }
}