/*
Theme Name: 3 Foot Massage Warm
Theme URI: https://3footmassage.com
Description: Warm & Natural theme for 3 Foot Massage — olive/sage green tones, organic shapes, DM Serif Display headings.
Version: 1.0.0
Author: 3 Foot Massage
Text Domain: threefootmassage-warm
*/

/* ═══════════════════════════════════════════════════════════════════
   0. RESET & VARIABLES
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --primary:      #6b7d3a;
    --primary-dark:  #3d4a28;
    --primary-light: #8fa850;
    --sand:          #c5d4b3;
    --sand-dark:     #b5c4a3;
    --warm-white:    #d5e4c3;
    --brown:         #3a3a2e;
    --brown-light:   #5a5a4e;
    --teal:          #6b7d3a;
    --white:         #ffffff;
    --shadow:        0 4px 24px rgba(58,58,46,.08);
    --shadow-lg:     0 8px 40px rgba(58,58,46,.12);
    --radius:        12px;
    --radius-lg:     14px;
    --radius-sm:     10px;
    --transition:    .3s ease;
    --font-heading:  'DM Serif Display', serif;
    --font-body:     'DM Sans', sans-serif;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    color:var(--brown);
    background:var(--warm-white);
    -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    font-weight:400;
    line-height:1.2;
    color:var(--brown);
}

h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}

p{margin-bottom:1rem;color:var(--brown-light)}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--sand);
    border:1px solid var(--sand-dark);
    color:var(--primary-dark);
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.04em;
    padding:6px 16px;
    border-radius:100px;
    margin-bottom:16px;
}

.section-title{margin-bottom:16px}
.section-subtitle{
    max-width:600px;
    color:var(--brown-light);
    font-size:1.05rem;
}

.accent{color:var(--primary)}

/* ═══════════════════════════════════════════════════════════════════
   2. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 30px;
    border-radius:100px;
    font-family:var(--font-body);
    font-size:.95rem;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
}

.btn-primary{
    background:var(--primary);
    color:var(--white);
}
.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(107,125,58,.35);
}

.btn-secondary{
    background:var(--sand);
    color:var(--brown);
    border:1px solid var(--sand-dark);
}
.btn-secondary:hover{
    background:var(--sand-dark);
    transform:translateY(-2px);
}

.btn-white{
    background:var(--white);
    color:var(--primary-dark);
}
.btn-white:hover{
    background:var(--sand);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════════
   3. NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.site-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    padding:16px 0;
    transition:var(--transition);
    background:transparent;
}

.site-nav.scrolled{
    background:rgba(213,228,195,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 2px 20px rgba(58,58,46,.06);
    padding:10px 0;
}

.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

.nav-logo{
    font-family:var(--font-heading);
    font-size:1.45rem;
    color:var(--primary);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:32px;
}

.nav-links a{
    font-size:.9rem;
    font-weight:500;
    color:var(--brown-light);
    transition:var(--transition);
    position:relative;
}
.nav-links a:hover{color:var(--primary)}
.nav-links a::after{
    content:'';
    position:absolute;
    bottom:-4px;left:0;
    width:0;height:2px;
    background:var(--primary);
    transition:var(--transition);
    border-radius:2px;
}
.nav-links a:hover::after{width:100%}

.nav-cta{
    background:var(--primary);
    color:var(--white) !important;
    padding:10px 24px;
    border-radius:100px;
    font-weight:600;
    font-size:.9rem;
}
.nav-cta:hover{
    background:var(--primary-dark) !important;
    color:var(--white) !important;
}
.nav-cta::after{display:none !important}

/* Hamburger */
.nav-hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
}
.nav-hamburger span{
    width:24px;height:2.5px;
    background:var(--brown);
    border-radius:4px;
    transition:var(--transition);
}

/* Mobile nav */
.mobile-menu{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(213,228,195,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:999;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
    font-family:var(--font-heading);
    font-size:1.5rem;
    color:var(--brown);
}
.mobile-menu a:hover{color:var(--primary)}
.mobile-close{
    position:absolute;
    top:20px;right:24px;
    font-size:1.8rem;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--brown);
}

@media(max-width:768px){
    .nav-links{display:none}
    .nav-hamburger{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════
   4. HERO — Split Layout
   ═══════════════════════════════════════════════════════════════════ */
.hero{
    min-height:100vh;
    display:flex;
    align-items:stretch;
    overflow:hidden;
    position:relative;
}

.hero-left{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:120px 60px 80px 60px;
    max-width:55%;
    position:relative;
    z-index:2;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--sand);
    border:1px solid var(--sand-dark);
    color:var(--primary-dark);
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.03em;
    padding:8px 18px;
    border-radius:100px;
    margin-bottom:24px;
    width:fit-content;
}

.hero-title{
    font-size:clamp(2.4rem,4.5vw,3.6rem);
    line-height:1.12;
    margin-bottom:20px;
    color:var(--brown);
}

.hero-subtitle{
    font-size:1.1rem;
    color:var(--brown-light);
    line-height:1.7;
    max-width:520px;
    margin-bottom:32px;
}

.hero-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.hero-stats{
    display:flex;
    gap:36px;
    padding-top:24px;
    border-top:1px solid var(--sand-dark);
}

.hero-stat{text-align:center}
.hero-stat-value{
    font-family:var(--font-heading);
    font-size:1.5rem;
    color:var(--brown);
    display:block;
}
.hero-stat-label{
    font-size:.78rem;
    color:var(--brown-light);
    letter-spacing:.03em;
    text-transform:uppercase;
}

/* Right panel */
.hero-right{
    flex:0 0 45%;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero-right-pattern{
    position:absolute;
    inset:0;
    opacity:.08;
    background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-right img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-right-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:var(--white);
}

.hero-right-icon{
    font-size:4rem;
    display:block;
    margin-bottom:16px;
}

.hero-right-text{
    font-family:var(--font-heading);
    font-size:1.6rem;
    color:rgba(255,255,255,.9);
}

/* Hero video background */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-video-bg video,
.hero-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.hero-video-bg .hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.hero-video-bg .hero-poster-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero.has-video {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero.has-video .hero-left {
    z-index: 2;
    max-width: 800px;
    flex: none;
    width: 100%;
    text-align: center;
    padding: 140px 40px 80px;
}

.hero.has-video .hero-title,
.hero.has-video .hero-subtitle {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero.has-video .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.hero.has-video .hero-badge {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.hero.has-video .hero-buttons {
    justify-content: center;
}

.hero.has-video .hero-stat-value,
.hero.has-video .hero-stat-label {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.hero.has-video .hero-stats {
    border-top-color: rgba(255,255,255,0.3);
    justify-content: center;
}

.hero.has-video .hero-right {
    display: none;
}

/* Video plays on all screen sizes including mobile */

@media(max-width:900px){
    .hero{flex-direction:column}
    .hero-left{max-width:100%;padding:120px 24px 60px}
    .hero-right{flex:0 0 auto;min-height:300px}
}

@media(max-width:480px){
    .hero-stats{gap:20px}
    .hero-buttons .btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════
   5. WHY US — 4-Column Icon Cards
   ═══════════════════════════════════════════════════════════════════ */
.why-us{
    padding:100px 0;
    background:var(--sand);
}

.why-us-header{
    text-align:center;
    margin-bottom:56px;
}
.why-us-header .section-subtitle{margin:0 auto}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.why-card{
    background:rgba(255,255,255,0.92);
    border-radius:var(--radius-lg);
    padding:36px 28px;
    transition:var(--transition);
}
.why-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.why-icon{
    width:56px;height:56px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    margin-bottom:20px;
    color:var(--white);
}

.why-card h3{margin-bottom:8px;font-size:1.15rem}
.why-card p{font-size:.92rem;color:var(--brown-light);margin:0}

@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.why-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════
   6. SERVICES — Table / Row Layout
   ═══════════════════════════════════════════════════════════════════ */
.services{
    padding:100px 0;
    background:rgba(255,255,255,0.92);
}

.services-header{
    text-align:center;
    margin-bottom:56px;
}
.services-header .section-subtitle{margin:0 auto}

.services-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:var(--white);
}

.services-table thead th{
    background:var(--brown);
    color:var(--white);
    font-family:var(--font-body);
    font-weight:600;
    font-size:.85rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:18px 24px;
    text-align:left;
}

.services-table thead th:nth-child(n+2){
    text-align:center;
    width:120px;
}

.services-table tbody tr{
    border-bottom:1px solid var(--sand);
    transition:var(--transition);
}
.services-table tbody tr:last-child{border-bottom:none}
.services-table tbody tr:hover{background:var(--sand)}

.services-table td{
    padding:20px 24px;
    vertical-align:middle;
}

.services-table td:nth-child(n+2){
    text-align:center;
    font-weight:600;
    color:var(--brown);
    font-size:1rem;
}

.service-name-cell{display:flex;align-items:flex-start;gap:14px}
.service-dot{
    width:10px;height:10px;
    background:var(--primary);
    border-radius:50%;
    flex-shrink:0;
    margin-top:7px;
}

.service-info h3{
    font-size:1.05rem;
    margin-bottom:2px;
    font-family:var(--font-heading);
    color:var(--brown);
}

.service-info p{
    font-size:.85rem;
    color:var(--brown-light);
    margin:0;
    line-height:1.5;
}

.service-na{
    color:var(--sand-dark);
    font-weight:400;
}

/* Add-on chip */
.addon-row td{
    padding:14px 24px;
    background:var(--sand);
}

.addon-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--teal);
    color:var(--white);
    padding:6px 16px;
    border-radius:100px;
    font-size:.82rem;
    font-weight:600;
}

/* Mobile table */
@media(max-width:768px){
    .services-table,
    .services-table thead,
    .services-table tbody,
    .services-table th,
    .services-table td,
    .services-table tr{
        display:block;
    }

    .services-table thead{
        position:absolute;
        width:1px;height:1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
    }

    .services-table tbody tr{
        background:var(--white);
        border-radius:var(--radius);
        margin-bottom:16px;
        box-shadow:var(--shadow);
        padding:20px;
        border:1px solid var(--sand);
    }

    .services-table td{
        padding:6px 0;
        text-align:left !important;
    }

    .services-table td:nth-child(n+2)::before{
        content:attr(data-label);
        font-size:.75rem;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:var(--brown-light);
        font-weight:500;
        display:block;
        margin-bottom:2px;
    }

    .services-table td:first-child{
        padding-bottom:12px;
        margin-bottom:8px;
        border-bottom:1px solid var(--sand);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   7. REVIEWS — Dark Olive Background
   ═══════════════════════════════════════════════════════════════════ */
.reviews{
    padding:100px 0;
    background:var(--primary-dark);
}

.reviews-header{
    text-align:center;
    margin-bottom:56px;
}
.reviews-header .section-title{color:var(--white)}
.reviews-header .section-subtitle{color:rgba(255,255,255,.6);margin:0 auto}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.review-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-lg);
    padding:32px;
    transition:var(--transition);
}
.review-card:hover{
    background:rgba(255,255,255,.1);
    transform:translateY(-3px);
}

.review-stars{
    color:#8fa850;
    font-size:1rem;
    letter-spacing:2px;
    margin-bottom:16px;
}

.review-text{
    font-size:.95rem;
    line-height:1.7;
    color:rgba(255,255,255,.8);
    margin-bottom:20px;
    font-style:italic;
}

.review-author{
    font-weight:600;
    color:var(--primary-light);
    font-size:.9rem;
}

@media(max-width:768px){.reviews-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════
   8. CONTACT — Card with Map
   ═══════════════════════════════════════════════════════════════════ */
.contact{
    padding:100px 0;
    background:rgba(255,255,255,0.92);
}

.contact-header{
    text-align:center;
    margin-bottom:56px;
}
.contact-header .section-subtitle{margin:0 auto}

.contact-card{
    background:var(--sand);
    border-radius:var(--radius-lg);
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    box-shadow:var(--shadow);
}

.contact-info{
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:28px;
}

.contact-item:last-child{margin-bottom:0}

.contact-icon{
    width:44px;height:44px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--white);
    font-size:1.1rem;
}

.contact-item h4{
    font-family:var(--font-body);
    font-weight:600;
    font-size:.95rem;
    color:var(--brown);
    margin-bottom:2px;
}

.contact-item p{
    font-size:.9rem;
    color:var(--brown-light);
    margin:0;
}

.contact-map{
    min-height:400px;
}

.contact-map iframe{
    width:100%;
    height:100%;
    border:0;
}

@media(max-width:768px){
    .contact-card{grid-template-columns:1fr}
    .contact-info{padding:36px 24px}
    .contact-map{min-height:300px}
}

/* ═══════════════════════════════════════════════════════════════════
   9. CTA — Olive Gradient with Pattern
   ═══════════════════════════════════════════════════════════════════ */
.cta{
    padding:80px 0;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
    position:relative;
    overflow:hidden;
}

.cta-pattern{
    position:absolute;
    inset:0;
    opacity:.06;
    background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.cta-inner{
    position:relative;
    z-index:1;
    text-align:center;
}

.cta .section-title{
    color:var(--white);
    margin-bottom:12px;
}

.cta .section-subtitle{
    color:rgba(255,255,255,.85);
    margin:0 auto 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   10. FOOTER — Dark Olive
   ═══════════════════════════════════════════════════════════════════ */
.site-footer{
    background:var(--primary-dark);
    padding:60px 0 32px;
    color:rgba(255,255,255,.5);
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:40px;
    margin-bottom:40px;
}

.footer-brand .footer-logo{
    font-family:var(--font-heading);
    font-size:1.35rem;
    color:var(--primary-light);
    margin-bottom:12px;
}

.footer-brand p{
    font-size:.88rem;
    max-width:280px;
    line-height:1.6;
    color:rgba(255,255,255,.45);
}

.footer-links h4{
    font-family:var(--font-body);
    font-weight:600;
    color:rgba(255,255,255,.7);
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:16px;
}

.footer-links a{
    display:block;
    font-size:.88rem;
    color:rgba(255,255,255,.45);
    padding:4px 0;
    transition:var(--transition);
}
.footer-links a:hover{color:var(--primary-light)}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.82rem;
}

.footer-bottom a{
    color:rgba(255,255,255,.45);
    transition:var(--transition);
}
.footer-bottom a:hover{color:var(--primary-light)}

@media(max-width:768px){
    .footer-inner{flex-direction:column;gap:28px}
    .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════
   11. UTILITIES & ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */
.text-center{text-align:center}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

.fade-up{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s ease,transform .6s ease;
}
.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}

/* Wordpress admin bar fix */
body.admin-bar .site-nav{top:32px}
@media(max-width:782px){
    body.admin-bar .site-nav{top:46px}
}