:root {
    --primary-color: #2E8B57; /* Sea Green - calming but vibrant */
    --secondary-color: #4682B4; /* Steel Blue */
    --accent-color: #20B2AA; /* Light Sea Green */
    --light-accent: #E0F2F1; /* Very light mint */
    --dark-text: #2C3E50;
    --light-text: #5A6C7D;
    --white: #FFFFFF;
    --gradient-bg: linear-gradient(135deg, #FAF7F2 0%, #F5F2ED 50%, #F0EDE8 100%);
    --nav-offset: 80px; /* used as a fallback scroll offset for anchored sections */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* About photo */
.about-photo {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.photo-wrapper {
    overflow: hidden; /* Prevents zoom from overflowing */
    border-radius: 15px;
}

.about-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Show the about cover photo less zoomed (contain) so it displays whole image by default */
#about .about-photo {
    object-fit: contain;
    height: auto;
    max-height: 420px;
}

.inspiration img {
    width: 100%;
    border-radius: 8px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background: var(--gradient-bg);
    background-attachment: fixed;
    overflow-x: hidden;
    /* Make room for the fixed navbar so content (especially the hero) isn't covered */
    padding-top: calc(var(--nav-offset) + 8px);
}

/* skip-link removed per user request */

/* Focus styles for keyboard users */
.btn-schedule:focus,
.btn-schedule:focus-visible {
    outline: 3px solid #000; /* black outline to match Schedule button */
    outline-offset: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.nav-link:focus,
.service-card:focus {
    outline: 3px solid rgba(32,178,170,0.35);
    outline-offset: 3px;
}

/* Ensure hover effects are visible on focus too */
.btn-schedule:focus { transform: translateY(-2px); }
.service-card:focus { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(46, 139, 87, 0.12); }

/* Navigation */
.navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.15);
  padding: 1rem 0;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--accent-color);
}

.navbar-brand {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary-color) !important;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.navbar-brand:hover {
  color: var(--accent-color) !important;
}

.nav-link {
  font-weight: 600;
  color: var(--dark-text) !important;
  margin: 0 1rem;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--primary-color) !important;
  text-decoration: none;
}

.nav-link.active {
  border-bottom: 3px solid var(--primary-color);
  padding-bottom: 4px;
  color: var(--primary-color) !important;
}

/* Primary CTA */
.btn-schedule {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.3);
}

.btn-schedule:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 139, 87, 0.4);
    color: white;
    text-decoration: none;
}

/* Hero Section */
.hero {
    min-height: 48vh;
    background: linear-gradient(rgba(46, 139, 87, 0.8), rgba(32, 178, 170, 0.8)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="healthGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2387CEEB;stop-opacity:1" /><stop offset="50%" style="stop-color:%2398FB98;stop-opacity:1" /><stop offset="100%" style="stop-color:%2340E0D0;stop-opacity:1" /></linearGradient></defs><rect width="1200" height="800" fill="url(%23healthGrad)"/><g opacity="0.1"><circle cx="200" cy="150" r="80" fill="white"/><circle cx="800" cy="300" r="120" fill="white"/><circle cx="400" cy="500" r="60" fill="white"/><circle cx="1000" cy="200" r="90" fill="white"/><circle cx="300" cy="700" r="100" fill="white"/><path d="M600,100 L650,150 L700,100 L750,150 L800,100" stroke="white" stroke-width="3" fill="none" opacity="0.3"/><path d="M100,400 Q300,350 500,400 Q700,450 900,400" stroke="white" stroke-width="4" fill="none" opacity="0.3"/></g></svg>') center/cover;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

.hero-content {
    z-index: 2;
    position: relative;
}

/* Hero image styling (visible on md+) */
.hero-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.hero-image {
    max-width: 520px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    object-fit: cover;
}

@media (max-width: 767px) {
    .hero-image { display: none; }
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Sections - tightened spacing */
.section {
    padding: 3rem 0;
    position: relative;
    /* Ensure anchored headings are visible below the fixed navbar (fallback) */
    scroll-margin-top: calc(var(--nav-offset) + 8px);
}

/* Ensure the hero (home) also offsets below the fixed navbar */
.hero {
    scroll-margin-top: calc(var(--nav-offset) + 8px);
}

.about-section {
    background: rgba(249,244,239,0.92); /* warm cream */
    backdrop-filter: blur(6px);
    border: 1px solid rgba(46,139,87,0.03);
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

/* Service Cards */
.service-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,244,239,0.92));
    padding: 1.6rem 1.25rem;
    border-radius: 14px;
    text-align: center;
    transition: all 0.25s ease;
    border: 1px solid rgba(46, 139, 87, 0.06);
    height: 100%;
    box-shadow: 0 6px 18px rgba(44,62,80,0.06);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(46, 139, 87, 0.12);
}

.service-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.service-icon i {
    font-size: 1.6rem;
    color: white;
}

.service-bubble {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Smaller image for the ancient reflexology graphic */
.reflex-image {
    max-width: 576px; /* increased ~20% */
    width: 60%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(44,62,80,0.08);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Clickable images that open full-size in a new tab */
.clickable-image {
    cursor: zoom-in;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.clickable-image:hover {
    transform: scale(1.02);
}

/* Figure and caption for reflex images */
.reflex-figure { margin: 0; display:flex; align-items:center; justify-content:center; }

.reflex-more {
    font-size: 1rem;
}
.reflex-more .muted-label {
    display: block;
    color: var(--light-text);
    font-style: italic;
    margin-bottom: 0.25rem;
}
.reflex-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}
.reflex-link:focus, .reflex-link:hover { color: var(--accent-color); }

/* Smaller thumbnail used in About inspiration */
.about-thumb {
    width: 120px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Column images for side-by-side layout in About Reflexology */
.reflex-col-image {
    /* On small screens this will be fluid; on md+ we force equal heights */
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 10px;
    /* use a subtle border instead of a heavy card shadow */
    border: 1px solid rgba(44,62,80,0.04);
    margin-left: auto;
    margin-right: auto;
    background: rgba(255,255,255,0.98);
    padding: 6px;
}

/* Equalize and enlarge the side-by-side images on md+ */
@media (min-width: 768px) {
    /* Use a more moderate unified height so both columns visually align
       without creating large vertical gaps. */
    .reflex-figure { height: 462px; }
    /* keep explicit per-figure selectors in case HTML references them elsewhere */
    .reflex-figure.benefits-figure,
    .reflex-figure.comparison-figure { height: 462px; }

    .reflex-col-image {
        max-height: 100%; /* fit inside the figure */
        width: auto; /* keep aspect ratio */
        object-fit: contain; /* show whole image */
    }
}

/* Tighten vertical spacing specifically for the About Reflexology area
   so it matches spacing used elsewhere on the site. These rules are
   scoped to #reflexology to avoid affecting other sections. */
/* Tighten vertical spacing for the About Reflexology area */
#reflexology.section {
    padding-top: 0.75rem; /* smaller top gap */
    padding-bottom: 0.75rem; /* smaller bottom gap */
}
#reflexology .section-title {
    margin-bottom: 0.5rem; /* bring title closer to the intro */
}
#reflexology p {
    margin-bottom: 0.35rem; /* tighten paragraphs inside reflexology */
}
#reflexology .reflex-figure {
    margin: 0 0 0.25rem; /* reduce whitespace between the two column figures */
}
#reflexology .reflex-image {
    margin-top: 0.35rem; /* reduce space between the column images and the ancient image */
    margin-bottom: 0.35rem;
}

/* Reduce spacing for bootstrap utility class used around the figure group */
#reflexology .my-4 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
}

@media (max-width: 767px) {
    .reflex-col-image {
        height: auto;
        width: 100%;
    }

    /* Increase spacing on small screens to avoid the benefits image
       overlapping the preceding paragraph. Keep changes scoped to
       #reflexology so other sections are not affected. */
    #reflexology .my-4 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    #reflexology p {
        margin-bottom: 0.9rem;
    }
    #reflexology .reflex-figure {
        margin-bottom: 0.75rem;
    }
    #reflexology .reflex-image {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

/* Tidy mobile header: reduce navbar height and align brand/address/toggler
   on a single row; keep desktop unaffected. */
@media (max-width: 767px) {
    .navbar {
        padding: 0.45rem 0 !important; /* reduce vertical padding on phones */
    }
    /* stronger specificity to override Bootstrap defaults on some devices */
    nav.navbar .container {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
    /* Brand may wrap to two lines at word boundaries */
    .navbar-brand {
        white-space: normal;
        overflow: visible;
        word-break: normal;
        overflow-wrap: normal;
        max-width: 48%;
        font-size: 1.02rem;
        line-height: 1.05;
        margin-right: 0.25rem;
        display: inline-block;
        vertical-align: middle;
        padding: 0 0.15rem;
    }

    /* Ensure the mobile address sits between brand and toggler, doesn't push
       the header taller, and can use up to two lines. */
    .d-flex.d-md-none {
        margin-left: 0 !important; /* override ms-auto */
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        padding-left: 0.15rem;
    }

    /* Keep the toggler at the far right */
    .navbar-toggler {
        order: 3 !important;
        margin-left: auto !important;
        align-self: center !important;
        padding: 0.35rem 0.5rem !important;
    }

    .nav-address-mobile {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0.08rem 0.35rem !important;
        font-size: 0.88rem !important;
        max-width: 46% !important;
        white-space: normal !important; /* allow wrapping */
        line-height: 1.05 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        align-self: center !important;
        text-align: left !important;
    }
}


/* Mobile-only header address and compact schedule button styles.
   Desktop layout is preserved — these classes are d-md-none in HTML. */
.nav-address-mobile {
    display: inline-block;
    background: linear-gradient(135deg, rgba(224,242,241,0.98), rgba(250,246,241,0.96));
    color: var(--primary-color);
    border: 1px solid rgba(46,139,87,0.06);
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    text-align: left;
    max-width: 62vw; /* keep it compact next to the toggler */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide mobile-only address on md+ so desktop remains unchanged */
@media (min-width: 768px) {
    .nav-address-mobile { display: none; }
}

/* Make the brand wrap to two lines and allow the mobile address to occupy
   up to two lines so the header reads evenly on phones. Keep desktop
   unaffected. */
@media (max-width: 767px) {
    .navbar .container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .navbar-brand {
        /* Allow wrapping at word boundaries (no mid-word breaks) */
        white-space: normal;
        overflow: visible;
        word-break: normal;
        overflow-wrap: normal;
        max-width: 48%;
        font-size: 1.02rem;
        line-height: 1.05;
    }
    .nav-address-mobile {
        max-width: 48%;
        white-space: normal; /* allow wrapping */
        overflow: visible;
        display: inline-block;
        line-height: 1.1;
    }
}

.service-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: var(--primary-color);
}

.service-card p {
    color: var(--light-text);
    line-height: 1.6;
}

/* Contact Section */
.contact-section {
    background: rgba(249,244,239,0.94);
    backdrop-filter: blur(6px);
    /* Reduce the top padding to tighten the space above Get In Touch */
    padding-top: 1.25rem;
    border: 1px solid rgba(46,139,87,0.03);
}

/* Small address text next to schedule button in the navbar */
.nav-address {
    color: var(--primary-color);
    font-size: 0.92rem;
    line-height: 1.05;
    white-space: normal; /* allow wrapping */
    overflow-wrap: anywhere;
    text-align: right;
    max-width: 220px;
    padding: 0.35rem 0.6rem;
    background: linear-gradient(135deg, rgba(224,242,241,0.95), rgba(250,246,241,0.9));
    border-radius: 12px;
    border: 1px solid rgba(46,139,87,0.08);
    box-shadow: 0 6px 18px rgba(32,178,170,0.06);
    font-weight: 600;
}

/* make nav-address button-like but accessible */
.nav-address {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 767px) {
    .nav-address { display: none; }
}

.contact-info {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,244,239,0.96));
    padding: 1.75rem;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(44,62,80,0.06);
    border: 1px solid rgba(46, 139, 87, 0.05);
}

/* inline address button inside contact area */
.address-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
}
.address-link:focus {
    outline: 3px solid rgba(32,178,170,0.25);
    outline-offset: 3px;
    border-radius: 4px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.contact-item i {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-right: 0.9rem;
    margin-top: 0.3rem;
}

.contact-item h5 {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}

.contact-item p {
    color: var(--light-text);
    margin: 0;
}

.map-wrapper iframe { border: none; border-radius: 12px; }

.social-media a { color: var(--primary-color); text-decoration:none; }
.social-media a:hover { color: var(--accent-color); }

/* Footer — simplified warm background */
.footer {
    background: #F7F3EE; /* warm, light beige */
    color: var(--dark-text);
    text-align: center;
    padding: 1.25rem 0;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive tweaks */
@media (max-width: 992px) {
    .hero h1 { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .section { padding: 2rem 0; }
    .about-photo { height: 260px; }
    .service-card { padding: 1.5rem; }
    .contact-info { padding: 1.25rem; }
}

/* Background decoration */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(32, 178, 170, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(46, 139, 87, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Floating Schedule button for mobile: appears when the hero CTA is scrolled out of view */
.floating-schedule {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1100; /* above nav and other content */
    border-radius: 28px;
    padding: 0.7rem 1rem;
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: white;
    box-shadow: 0 10px 30px rgba(46,139,87,0.18);
    border: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
}
.floating-schedule.show {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile-only: hide on md+ so desktop is unaffected */
@media (min-width: 768px) {
    .floating-schedule { display: none !important; }
}

/* Floating schedule focus style (match .btn-schedule focus) */
.floating-schedule:focus,
.floating-schedule:focus-visible {
    outline: 3px solid #000; /* black outline like .btn-schedule */
    outline-offset: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.floating-schedule:hover { transform: translateY(-2px); }

/* Mobile nav panel: keep it fixed below the navbar so opening doesn't require scrolling */
@media (max-width: 767px) {
    #mobileNav .mobile-nav-panel {
        position: fixed;
        top: calc(var(--nav-offset));
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - var(--nav-offset));
        overflow-y: auto;
        z-index: 1049;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,244,239,0.96));
        padding: 1rem 1rem calc(24px + env(safe-area-inset-bottom));
        box-shadow: 0 10px 30px rgba(46,139,87,0.12);
    }

    /* When mobile nav is open we prevent body from scrolling under it */
    body.mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }
}