/* ==========================================================================
 Wagwise Training - Main Stylesheet
 Professional, Modern, Playful
 ========================================================================== */

/* ==========================================================================
 1. CSS Variables & Design Tokens
 ========================================================================== */
:root{
 /* Colors */
 --color-teal:#10b981;
 --color-coral:#fb7185;
 --color-navy:#0f172a;
 --color-sand:#f8fafc;
 --color-text:#0b1220;
 --color-muted:#475569;
 --color-border:#e2e8f0;
 --color-white:#ffffff;
 --color-success:#22c55e;
 --color-error:#ef4444;
 
 /* Typography */
 --font-heading:'Poppins', sans-serif;
 --font-body:'Inter', sans-serif;
 
 /* Font Sizes */
 --text-h1:2.5rem;/* 40px */
 --text-h2:2rem;/* 32px */
 --text-h3:1.5rem;/* 24px */
 --text-body:1rem;/* 16px */
 --text-small:0.875rem;/* 14px */
 
 /* Line Heights */
 --line-h1:3rem;/* 48px */
 --line-h2:2.5rem;/* 40px */
 --line-h3:2rem;/* 32px */
 --line-body:1.625rem;/* 26px */
 --line-small:1.375rem;/* 22px */
 
 /* Spacing */
 --space-xs:0.5rem;/* 8px */
 --space-sm:0.75rem;/* 12px */
 --space-md:1rem;/* 16px */
 --space-lg:1.5rem;/* 24px */
 --space-xl:2rem;/* 32px */
 --space-2xl:3rem;/* 48px */
 
 /* Border Radius */
 --radius:16px;
 --radius-sm:10px;
 --radius-full:9999px;
 
 /* Shadows */
 --shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-lg:0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 /* Layout */
 --container-max:1120px;
 --header-height:72px;
}

/* ==========================================================================
 2. Reset & Base Styles
 ========================================================================== */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

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

body{
 font-family:var(--font-body);
 font-size:var(--text-body);
 line-height:var(--line-body);
 color:var(--color-text);
 background-color:var(--color-white);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6{
 font-family:var(--font-heading);
 font-weight:600;
 line-height:1.2;
}

h1{
 font-size:var(--text-h1);
 line-height:var(--line-h1);
}

h2{
 font-size:var(--text-h2);
 line-height:var(--line-h2);
}

h3{
 font-size:var(--text-h3);
 line-height:var(--line-h3);
}

p{
 margin-bottom:var(--space-md);
}

p:last-child{
 margin-bottom:0;
}

a{
 color:var(--color-teal);
 text-decoration:none;
 transition:color 0.2s ease;
}

a:hover,
a:focus{
 color:var(--color-navy);
 text-decoration:underline;
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
 outline:2px solid var(--color-teal);
 outline-offset:2px;
}

img{
 max-width:100%;
 height:auto;
 display:block;
}

ul, ol{
 list-style:none;
}

/* Screen reader only text */
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}

/* Skip link for accessibility */
.skip-link{
 position:absolute;
 top:-40px;
 left:0;
 background:var(--color-navy);
 color:var(--color-white);
 padding:var(--space-xs) var(--space-md);
 z-index:10000;
 text-decoration:none;
 border-radius:0 0 var(--radius-sm) 0;
}

.skip-link:focus{
 top:0;
}

/* ==========================================================================
 3. Layout Components
 ========================================================================== */
 
/* Container */
.container{
 width:100%;
 max-width:var(--container-max);
 margin:0 auto;
 padding:0 var(--space-md);
}

@media (min-width:768px){
 .container{
 padding:0 var(--space-lg);
}
}

/* ==========================================================================
 4. Header & Navigation
 ========================================================================== */
 
/* Logo Styles - Replace existing .logo section */
.logo{
 display:inline-flex;
 align-items:center;
 text-decoration:none;
 max-width:250px;/* Set max width for logo */
}

.logo__image{
 width:100%;
 max-width:250px;/* Logo at 250px wide */
 height:auto;
 display:block;
}

/* Update header to accommodate larger logo */
.site-header{
 position:sticky;
 top:0;
 background:var(--color-white);
 box-shadow:var(--shadow-sm);
 z-index:1000;
 padding:var(--space-md) 0;/* Add padding to header */
}

.header__inner{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:0;/* Remove default padding since header has it now */
 gap:var(--space-xl);/* Add gap between logo and nav */
}

/* Mobile responsive adjustments */
@media (max-width:768px){
 .logo{
 max-width:180px;/* Smaller on mobile */
}
 
 .logo__image{
 max-width:180px;
}
 
 .header__inner{
 gap:var(--space-md);
}
}

@media (max-width:480px){
 .logo{
 max-width:150px;/* Even smaller on small phones */
}
 
 .logo__image{
 max-width:150px;
}
}


/* Navigation */
.main-nav{
 display:flex;
 align-items:center;
}

.nav__list{
 display:none;
 flex-direction:column;
 position:absolute;
 top:var(--header-height);
 right:0;
 left:0;
 background:var(--color-white);
 box-shadow:var(--shadow);
 padding:var(--space-md);
}

@media (min-width:768px){
 .nav__list{
 display:flex;
 flex-direction:row;
 position:static;
 box-shadow:none;
 padding:0;
 gap:var(--space-xl);
}
}

.nav__list--open{
 display:flex;
}

.nav__link{
 display:block;
 padding:var(--space-sm) 0;
 font-weight:500;
 color:var(--color-text);
 transition:color 0.2s ease;
}

@media (min-width:768px){
 .nav__link{
 padding:0;
}
}

.nav__link:hover,
.nav__link:focus{
 color:var(--color-teal);
 text-decoration:none;
}

.nav__link--active{
 color:var(--color-teal);
 font-weight:600;
}

.nav__link--cta{
 background:var(--color-teal);
 color:var(--color-white);
 padding:var(--space-xs) var(--space-lg);
 border-radius:var(--radius-full);
 margin-top:var(--space-md);
}

@media (min-width:768px){
 .nav__link--cta{
 margin-top:0;
 margin-left:var(--space-md);
}
}

.nav__link--cta:hover,
.nav__link--cta:focus{
 background:var(--color-navy);
 color:var(--color-white);
}

/* Mobile Menu Toggle */
.mobile-nav-toggle{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 width:40px;
 height:40px;
 background:transparent;
 border:none;
 cursor:pointer;
 padding:0;
}

@media (min-width:768px){
 .mobile-nav-toggle{
 display:none;
}
}

.hamburger,
.hamburger::before,
.hamburger::after{
 display:block;
 width:24px;
 height:2px;
 background:var(--color-navy);
 transition:transform 0.3s ease;
}

.hamburger{
 position:relative;
}

.hamburger::before,
.hamburger::after{
 content:'';
 position:absolute;
 left:0;
}

.hamburger::before{
 top:-8px;
}

.hamburger::after{
 top:8px;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger{
 background:transparent;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger::before{
 transform:translateY(8px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger::after{
 transform:translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
 5. Hero Section
 ========================================================================== */
 
.hero{
 padding:var(--space-2xl) 0;
 background:linear-gradient(135deg, var(--color-sand) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.hero__content{
 text-align:center;
 margin-bottom:var(--space-2xl);
}

.hero__title{
 font-size:clamp(2rem, 5vw, 3rem);
 font-weight:700;
 margin-bottom:var(--space-md);
 color:var(--color-navy);
}

.hero__subtitle{
 font-size:1.25rem;
 color:var(--color-muted);
 margin-bottom:var(--space-xl);
}

.hero__image{
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow-lg);
}

/* ==========================================================================
 6. Buttons
 ========================================================================== */
 
.btn{
 display:inline-block;
 padding:var(--space-sm) var(--space-lg);
 font-family:var(--font-body);
 font-weight:600;
 text-align:center;
 text-decoration:none;
 border:none;
 border-radius:var(--radius-full);
 cursor:pointer;
 transition:all 0.3s ease;
}

.btn--primary{
 background:var(--color-teal);
 color:var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus{
 background:var(--color-navy);
 transform:translateY(-2px);
 box-shadow:var(--shadow-lg);
 text-decoration:none;
}

.btn--secondary{
 background:var(--color-sand);
 color:var(--color-navy);
 border:2px solid var(--color-border);
}

.btn--secondary:hover,
.btn--secondary:focus{
 background:var(--color-navy);
 color:var(--color-white);
 border-color:var(--color-navy);
 text-decoration:none;
}

.btn--large{
 padding:var(--space-md) var(--space-xl);
 font-size:1.125rem;
}

.btn--full{
 width:100%;
}

/* ==========================================================================
 7. Cards
 ========================================================================== */
 
/* Service Cards */
.services{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.services__grid{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .services__grid{
 grid-template-columns:repeat(3, 1fr);
}
}

.service-card{
 background:var(--color-white);
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover{
 transform:translateY(-4px);
 box-shadow:var(--shadow-lg);
}

.service-card__image{
 width:100%;
 height:200px;
 object-fit:cover;
}

.service-card__content{
 padding:var(--space-lg);
}

.service-card__title{
 font-size:1.25rem;
 margin-bottom:var(--space-sm);
 color:var(--color-navy);
}

.service-card__text{
 color:var(--color-muted);
 line-height:1.6;
}

/* Testimonial Cards */
.testimonial-card{
 background:var(--color-sand);
 border-radius:var(--radius);
 padding:var(--space-xl);
 box-shadow:var(--shadow-sm);
}

.testimonial-card__text{
 font-style:italic;
 color:var(--color-text);
 margin-bottom:var(--space-lg);
 line-height:1.8;
}

.testimonial-card__footer{
 display:flex;
 align-items:center;
 gap:var(--space-md);
}

.testimonial-card__avatar{
 width:48px;
 height:48px;
 border-radius:50%;
 object-fit:cover;
}

.testimonial-card__name{
 display:block;
 font-weight:600;
 font-style:normal;
 color:var(--color-navy);
 margin-bottom:2px;
}

.testimonial-card__dog{
 display:block;
 font-size:var(--text-small);
 color:var(--color-muted);
}

/* ==========================================================================
 8. Sections
 ========================================================================== */
 
.section__title{
 text-align:center;
 color:var(--color-navy);
 margin-bottom:var(--space-md);
}

.section__subtitle{
 text-align:center;
 color:var(--color-muted);
 font-size:1.125rem;
 margin-bottom:var(--space-2xl);
}

/* Why Choose Section */
.why-choose{
 padding:var(--space-2xl) 0;
 background:var(--color-sand);
}

.benefits-list{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .benefits-list{
 grid-template-columns:repeat(2, 1fr);
}
}

.benefit{
 display:flex;
 gap:var(--space-md);
}

.benefit__icon{
 font-size:2rem;
 flex-shrink:0;
}

.benefit__title{
 font-size:1.125rem;
 margin-bottom:var(--space-xs);
 color:var(--color-navy);
}

.benefit__text{
 color:var(--color-muted);
 line-height:1.6;
}

/* Trust Strip */
.trust-strip{
 padding:var(--space-xl) 0;
 background:var(--color-white);
 text-align:center;
 border-top:1px solid var(--color-border);
 border-bottom:1px solid var(--color-border);
}

.trust-strip__title{
 font-size:1.5rem;
 color:var(--color-navy);
 margin-bottom:var(--space-xs);
}

.trust-strip__text{
 color:var(--color-muted);
 margin-bottom:var(--space-lg);
}

.trust-strip__badges{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:var(--space-xl);
 flex-wrap:wrap;
}

.trust-badge{
 opacity:0.7;
 transition:opacity 0.3s ease;
}

.trust-badge:hover{
 opacity:1;
}

/* Testimonials Preview */
.testimonials-preview{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.testimonials__grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .testimonials__grid{
 grid-template-columns:repeat(3, 1fr);
}
}

.testimonials-preview__cta{
 text-align:center;
 margin-top:var(--space-2xl);
}

/* CTA Band */
.cta-band{
 padding:var(--space-2xl) 0;
 background:linear-gradient(135deg, var(--color-teal), var(--color-coral));
 text-align:center;
 color:var(--color-white);
}

.cta-band__title{
 font-size:clamp(1.5rem, 4vw, 2.5rem);
 margin-bottom:var(--space-sm);
}

.cta-band__text{
 font-size:1.25rem;
 margin-bottom:var(--space-xl);
 opacity:0.95;
}

/* ==========================================================================
 9. Page Specific Styles
 ========================================================================== */
 
/* Page Hero */
.page-hero{
 padding:var(--space-2xl) 0;
 background:linear-gradient(135deg, var(--color-sand) 0%, rgba(16, 185, 129, 0.05) 100%);
 text-align:center;
}

.page-hero__title{
 color:var(--color-navy);
 margin-bottom:var(--space-sm);
}

.page-hero__subtitle{
 color:var(--color-muted);
 font-size:1.25rem;
}

/* About Page */
.about-story{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.about-story__grid{
 display:grid;
 gap:var(--space-2xl);
 align-items:center;
}

@media (min-width:768px){
 .about-story__grid{
 grid-template-columns:1fr 1fr;
}
}

.about-story__content p{
 color:var(--color-muted);
 line-height:1.8;
 margin-bottom:var(--space-lg);
}

.about-story__image{
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
}

/* Process Steps */
.about-approach{
 padding:var(--space-2xl) 0;
 background:var(--color-sand);
}

.process-list{
 counter-reset:process;
 margin-top:var(--space-2xl);
}

.process-step{
 display:flex;
 gap:var(--space-lg);
 margin-bottom:var(--space-xl);
 counter-increment:process;
}

.process-step__number{
 flex-shrink:0;
 width:48px;
 height:48px;
 background:var(--color-teal);
 color:var(--color-white);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:1.25rem;
}

.process-step__title{
 font-size:1.125rem;
 margin-bottom:var(--space-xs);
 color:var(--color-navy);
}

.process-step__content p{
 color:var(--color-muted);
 line-height:1.6;
}

/* Philosophy Cards */
.about-philosophy{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.philosophy-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .philosophy-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

.philosophy-card{
 padding:var(--space-xl);
 background:var(--color-sand);
 border-radius:var(--radius);
 border-left:4px solid var(--color-teal);
}

.philosophy-card__title{
 font-size:1.125rem;
 margin-bottom:var(--space-sm);
 color:var(--color-navy);
}

.philosophy-card p{
 color:var(--color-muted);
 line-height:1.6;
}

/* Standards Section */
.about-standards{
 padding:var(--space-2xl) 0;
 background:var(--color-sand);
}

.standards-list{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

.standard-item{
 text-align:center;
 padding:var(--space-lg);
}

.standard-item__title{
 font-size:1.125rem;
 margin-bottom:var(--space-sm);
 color:var(--color-navy);
}

.standard-item p{
 color:var(--color-muted);
 max-width:600px;
 margin:0 auto;
}

/* Service Area */
.about-service-area{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.service-area__content{
 max-width:800px;
 margin:0 auto;
 text-align:center;
}

.service-area__content p{
 color:var(--color-muted);
 line-height:1.8;
 margin-bottom:var(--space-lg);
}

.service-area__map{
 margin-top:var(--space-2xl);
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
}

/* Contact Page */
.contact-notice{
 padding:var(--space-lg) 0;
 background:var(--color-white);
}

.notice-box{
 background:var(--color-sand);
 border-left:4px solid var(--color-teal);
 padding:var(--space-lg);
 border-radius:var(--radius);
 text-align:center;
}

.notice-box__title{
 font-size:1.25rem;
 color:var(--color-navy);
 margin-bottom:var(--space-xs);
}

.notice-box__text{
 color:var(--color-muted);
}

.contact-section{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.contact-grid{
 display:grid;
 gap:var(--space-2xl);
}

@media (min-width:992px){
 .contact-grid{
 grid-template-columns:2fr 1fr;
}
}

/* Contact Form */
.contact-form{
 display:grid;
 gap:var(--space-lg);
}

.form-group{
 display:flex;
 flex-direction:column;
}

.form-row{
 display:grid;
 gap:var(--space-lg);
}

@media (min-width:576px){
 .form-row{
 grid-template-columns:1fr 1fr;
}
}

.form-label{
 font-weight:500;
 margin-bottom:var(--space-xs);
 color:var(--color-navy);
}

.required{
 color:var(--color-coral);
}

.form-input,
.form-select,
.form-textarea{
 padding:var(--space-sm);
 border:1px solid var(--color-border);
 border-radius:var(--radius-sm);
 font-family:var(--font-body);
 font-size:var(--text-body);
 transition:border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus{
 border-color:var(--color-teal);
 outline:2px solid var(--color-teal);
 outline-offset:2px;
}

.form-input.error,
.form-select.error,
.form-textarea.error{
 border-color:var(--color-error);
}

.form-textarea{
 resize:vertical;
 min-height:120px;
}

.form-help{
 font-size:var(--text-small);
 color:var(--color-muted);
 margin-top:4px;
}

.error-message{
 font-size:var(--text-small);
 color:var(--color-error);
 margin-top:4px;
 display:none;
}

.error-message.show{
 display:block;
}

/* Alerts */
.alert{
 padding:var(--space-lg);
 border-radius:var(--radius);
 margin-bottom:var(--space-xl);
}

.alert--success{
 background:rgba(34, 197, 94, 0.1);
 border-left:4px solid var(--color-success);
}

.alert--error{
 background:rgba(239, 68, 68, 0.1);
 border-left:4px solid var(--color-error);
}

.alert__title{
 font-size:1.125rem;
 margin-bottom:var(--space-xs);
}

.alert--success .alert__title{
 color:var(--color-success);
}

.alert--error .alert__title{
 color:var(--color-error);
}

/* Contact Info */
.contact-info{
 display:grid;
 gap:var(--space-lg);
}

.contact-card{
 padding:var(--space-lg);
 background:var(--color-sand);
 border-radius:var(--radius);
}

.contact-card__title{
 font-size:1rem;
 margin-bottom:var(--space-xs);
 color:var(--color-navy);
}

.contact-card__text{
 font-size:1.125rem;
 margin-bottom:var(--space-xs);
}

.contact-link{
 color:var(--color-teal);
 font-weight:500;
}

.contact-card__note{
 font-size:var(--text-small);
 color:var(--color-muted);
}

.contact-map{
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
 margin-top:var(--space-lg);
}

/* Response Section */
.response-section{
 padding:var(--space-2xl) 0;
 background:var(--color-sand);
}

.response-box{
 max-width:600px;
 margin:0 auto;
 text-align:center;
}

.response-box__title{
 font-size:1.5rem;
 color:var(--color-navy);
 margin-bottom:var(--space-lg);
}

.response-steps{
 text-align:left;
 list-style-type:decimal;
 list-style-position:inside;
 color:var(--color-muted);
 line-height:2;
}

/* Testimonials Page */
.testimonials-section{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.testimonials-full__grid{
 display:grid;
 gap:var(--space-2xl);
 margin-top:var(--space-2xl);
}

.testimonial-full{
 background:var(--color-sand);
 border-radius:var(--radius);
 padding:var(--space-xl);
 box-shadow:var(--shadow-sm);
}

.testimonial-full__text{
 font-size:1.0625rem;
 line-height:1.8;
 color:var(--color-text);
 margin-bottom:var(--space-lg);
}

.testimonial-full__footer{
 display:flex;
 align-items:center;
 gap:var(--space-md);
 padding-top:var(--space-lg);
 border-top:1px solid var(--color-border);
}

.testimonial-full__avatar{
 width:64px;
 height:64px;
 border-radius:50%;
 object-fit:cover;
}

.testimonial-full__name{
 display:block;
 font-weight:600;
 font-style:normal;
 color:var(--color-navy);
 margin-bottom:2px;
}

.testimonial-full__location{
 display:block;
 font-size:var(--text-small);
 color:var(--color-muted);
}

.testimonial-full__dog{
 display:block;
 font-size:var(--text-small);
 color:var(--color-teal);
 font-weight:500;
 margin-top:2px;
}

/* Stats Section */
.testimonials-stats{
 padding:var(--space-2xl) 0;
 background:linear-gradient(135deg, var(--color-sand) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.stats-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .stats-grid{
 grid-template-columns:repeat(4, 1fr);
}
}

.stat-card{
 text-align:center;
 padding:var(--space-lg);
}

.stat-card__number{
 display:block;
 font-size:2.5rem;
 font-weight:700;
 color:var(--color-teal);
 margin-bottom:var(--space-xs);
 font-family:var(--font-heading);
}

.stat-card__label{
 font-size:var(--text-small);
 color:var(--color-muted);
 text-transform:uppercase;
 letter-spacing:0.05em;
}

/* ==========================================================================
 10. Footer
 ========================================================================== */
 
.site-footer{
 background:var(--color-navy);
 color:var(--color-white);
 padding:var(--space-2xl) 0 var(--space-lg);
}

.footer__grid{
 display:grid;
 gap:var(--space-2xl);
 margin-bottom:var(--space-2xl);
}

@media (min-width:768px){
 .footer__grid{
 grid-template-columns:2fr 1fr 1fr 1fr;
}
}

/* Footer logo sizing */
.footer__logo-image{
 width:180px;/* Smaller in footer */
 height:auto;
 margin-bottom:var(--space-sm);
}

.footer__tagline{
 font-size:var(--text-small);
 opacity:0.8;
 line-height:1.6;
}

.footer__nav-title{
 font-size:1rem;
 font-weight:600;
 margin-bottom:var(--space-md);
}

.footer__nav-list li{
 margin-bottom:var(--space-sm);
}

.footer__nav-list a{
 color:var(--color-white);
 opacity:0.8;
 font-size:var(--text-small);
 transition:opacity 0.2s ease;
}

.footer__nav-list a:hover,
.footer__nav-list a:focus{
 opacity:1;
 color:var(--color-teal);
}

.footer__contact p{
 margin-bottom:var(--space-xs);
 font-size:var(--text-small);
 opacity:0.8;
}

.footer__contact a{
 color:var(--color-white);
 transition:color 0.2s ease;
}

.footer__contact a:hover,
.footer__contact a:focus{
 color:var(--color-teal);
}

.footer__bottom{
 padding-top:var(--space-xl);
 border-top:1px solid rgba(255, 255, 255, 0.1);
 text-align:center;
 font-size:var(--text-small);
 opacity:0.6;
}

/* ==========================================================================
 11. Back to Top Button
 ========================================================================== */
 
.back-to-top{
 position:fixed;
 bottom:var(--space-xl);
 right:var(--space-xl);
 width:48px;
 height:48px;
 background:var(--color-teal);
 color:var(--color-white);
 border:none;
 border-radius:50%;
 font-size:1.5rem;
 cursor:pointer;
 box-shadow:var(--shadow-lg);
 transition:all 0.3s ease;
 z-index:999;
 display:flex;
 align-items:center;
 justify-content:center;
}

.back-to-top:hover{
 background:var(--color-navy);
 transform:translateY(-4px);
}

.back-to-top[hidden]{
 display:none;
}

/* ==========================================================================
 12. Loading States
 ========================================================================== */
 
.loading{
 position:relative;
 pointer-events:none;
 opacity:0.6;
}

.loading::after{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:24px;
 height:24px;
 margin:-12px 0 0 -12px;
 border:3px solid var(--color-teal);
 border-top-color:transparent;
 border-radius:50%;
 animation:spin 1s linear infinite;
}

@keyframes spin{
 to{
 transform:rotate(360deg);
}
}

/* ==========================================================================
 13. Print Styles
 ========================================================================== */
 
@media print{
 .site-header,
 .site-footer,
 .back-to-top,
 .mobile-nav-toggle,
 .cta-band,
 .btn{
 display:none;
}
 
 body{
 font-size:12pt;
}
 
 h1{
 font-size:24pt;
}
 
 h2{
 font-size:18pt;
}
 
 h3{
 font-size:14pt;
}
}/* ==========================================================================
 Policy Pages Specific Styles
 Add this to your existing styles.css or include as separate file
 ========================================================================== */

/* Policy Content Layout */
.policy-section{
 padding:var(--space-2xl) 0;
 background:var(--color-white);
}

.policy-content{
 max-width:800px;
 margin:0 auto;
 font-size:1.0625rem;
 line-height:1.8;
 color:var(--color-text);
}

.policy-content.centered{
 text-align:center;
}

.policy-content p{
 margin-bottom:var(--space-lg);
}

.policy-content h3{
 margin-top:var(--space-xl);
 margin-bottom:var(--space-md);
 color:var(--color-navy);
}

.policy-content ul,
.policy-content ol{
 margin-left:var(--space-xl);
 margin-bottom:var(--space-lg);
}

.policy-content li{
 margin-bottom:var(--space-sm);
 line-height:1.8;
}

/* Notice Box */
.notice-box{
 background:var(--color-sand);
 border-left:4px solid var(--color-teal);
 padding:var(--space-lg);
 border-radius:var(--radius);
 margin:var(--space-xl) 0;
}

/* Philosophy Page Styles */
.principles-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .principles-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

@media (min-width:992px){
 .principles-grid{
 grid-template-columns:repeat(3, 1fr);
}
}

.principle-card{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
 position:relative;
 padding-top:4rem;
}

.principle-number{
 position:absolute;
 top:var(--space-lg);
 left:var(--space-lg);
 width:40px;
 height:40px;
 background:var(--color-teal);
 color:var(--color-white);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:1.25rem;
}

.principle-card h3{
 margin-bottom:var(--space-sm);
 color:var(--color-navy);
}

/* LIMA Section */
.lima-section{
 background:var(--color-sand);
 padding:var(--space-2xl) 0;
}

.lima-list{
 counter-reset:lima;
 margin-top:var(--space-xl);
}

.lima-list li{
 counter-increment:lima;
 position:relative;
 padding-left:var(--space-xl);
 margin-bottom:var(--space-lg);
}

.lima-list li::before{
 content:counter(lima);
 position:absolute;
 left:0;
 top:0;
 width:28px;
 height:28px;
 background:var(--color-teal);
 color:var(--color-white);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:0.875rem;
}

/* Practical Grid */
.practical-section{
 background:var(--color-white);
 padding:var(--space-2xl) 0;
}

.practical-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-xl);
}

@media (min-width:768px){
 .practical-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

.practical-item{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
}

.practical-item h3{
 margin-bottom:var(--space-md);
 color:var(--color-navy);
}

/* Refund Policy Styles */
.policy-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .policy-grid{
 grid-template-columns:repeat(3, 1fr);
}
}

.policy-card{
 background:var(--color-white);
 border:2px solid var(--color-border);
 border-radius:var(--radius);
 padding:var(--space-xl);
 text-align:center;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.policy-card:hover{
 transform:translateY(-4px);
 box-shadow:var(--shadow-lg);
}

.policy-card h3{
 color:var(--color-navy);
 margin-bottom:var(--space-md);
}

.policy-card__content p:first-child{
 font-weight:700;
 color:var(--color-teal);
 margin-bottom:var(--space-md);
}

/* Policy Table */
.policy-table{
 width:100%;
 border-collapse:collapse;
 margin:var(--space-xl) 0;
 background:var(--color-white);
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
}

.policy-table th{
 background:var(--color-navy);
 color:var(--color-white);
 padding:var(--space-md);
 text-align:left;
 font-weight:600;
}

.policy-table td{
 padding:var(--space-md);
 border-bottom:1px solid var(--color-border);
}

.policy-table tr:last-child td{
 border-bottom:none;
}

.policy-table tr:hover{
 background:var(--color-sand);
}

/* Calculation Box */
.calculation-box{
 background:var(--color-sand);
 border:2px dashed var(--color-teal);
 padding:var(--space-lg);
 border-radius:var(--radius);
 margin:var(--space-xl) 0;
}

.calculation-box h4{
 color:var(--color-navy);
 margin-bottom:var(--space-md);
}

/* Special Grid */
.special-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-xl);
}

@media (min-width:768px){
 .special-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

.special-item{
 background:var(--color-white);
 border-left:4px solid var(--color-teal);
 padding:var(--space-lg);
 border-radius:var(--radius);
 box-shadow:var(--shadow-sm);
}

.special-item h3{
 margin-bottom:var(--space-sm);
 color:var(--color-navy);
}

/* Trainer List */
.trainer-list{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
 margin:var(--space-xl) 0;
}

.trainer-list li{
 margin-bottom:var(--space-md);
}

/* Contact Info Box */
.contact-info-box{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
 display:inline-block;
 margin-top:var(--space-xl);
}

/* Humane Methods Page Styles */
.pledge-box{
 background:linear-gradient(135deg, var(--color-teal), var(--color-coral));
 color:var(--color-white);
 padding:var(--space-2xl);
 border-radius:var(--radius);
 margin:var(--space-xl) 0;
 text-align:center;
}

.pledge-text{
 font-size:1.25rem;
 line-height:1.8;
 margin:0;
}

/* Methods Grid */
.methods-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .methods-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

.method-card{
 padding:var(--space-xl);
 border-radius:var(--radius);
}

.method-card--yes{
 background:rgba(34, 197, 94, 0.1);
 border:2px solid var(--color-success);
}

.method-card--no{
 background:rgba(239, 68, 68, 0.1);
 border:2px solid var(--color-error);
}

.method-card__title{
 margin-bottom:var(--space-lg);
 font-size:1.25rem;
}

.method-card--yes .method-card__title{
 color:var(--color-success);
}

.method-card--no .method-card__title{
 color:var(--color-error);
}

.method-list{
 list-style:none;
 margin:0;
}

.method-list li{
 padding-left:var(--space-lg);
 position:relative;
 margin-bottom:var(--space-sm);
}

/* Reason Grid */
.reason-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-2xl);
}

@media (min-width:768px){
 .reason-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

.reason-card{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
 text-align:center;
}

.reason-icon{
 font-size:3rem;
 display:block;
 margin-bottom:var(--space-md);
}

.reason-card h3{
 color:var(--color-navy);
 margin-bottom:var(--space-sm);
}

/* Five Freedoms */
.freedoms-list{
 counter-reset:freedom;
 margin-top:var(--space-2xl);
}

.freedoms-list li{
 counter-increment:freedom;
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
 margin-bottom:var(--space-lg);
}

.freedoms-list h3{
 color:var(--color-navy);
 margin-bottom:var(--space-sm);
}

.freedoms-list h3::before{
 content:counter(freedom) ". ";
 color:var(--color-teal);
 font-weight:700;
}

/* FAQ Container */
.faq-container{
 margin-top:var(--space-2xl);
}

.faq-item{
 background:var(--color-white);
 border-left:4px solid var(--color-coral);
 padding:var(--space-lg);
 border-radius:var(--radius);
 margin-bottom:var(--space-lg);
 box-shadow:var(--shadow-sm);
}

.faq-item h3{
 color:var(--color-navy);
 margin-bottom:var(--space-sm);
 font-style:italic;
}

/* Quote Box */
.quote-box{
 background:var(--color-sand);
 border-left:4px solid var(--color-teal);
 padding:var(--space-xl);
 border-radius:var(--radius);
 margin:var(--space-2xl) 0;
 font-style:italic;
}

.quote-box cite{
 display:block;
 margin-top:var(--space-md);
 font-style:normal;
 font-weight:600;
 color:var(--color-navy);
}

/* Standards List */
.standards-list{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
 margin:var(--space-xl) 0;
}

.standards-list li{
 padding-left:var(--space-lg);
 position:relative;
 margin-bottom:var(--space-md);
}

.standards-list li::before{
 content:"✓";
 position:absolute;
 left:0;
 color:var(--color-teal);
 font-weight:700;
}

/* CTA Box */
.cta-box{
 background:var(--color-sand);
 padding:var(--space-2xl);
 border-radius:var(--radius);
 margin-top:var(--space-2xl);
}

.cta-box p{
 margin-bottom:var(--space-md);
}

/* Resources Grid */
.resources-grid{
 display:grid;
 gap:var(--space-xl);
 margin-top:var(--space-xl);
}

@media (min-width:768px){
 .resources-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

.resource-item{
 background:var(--color-sand);
 padding:var(--space-xl);
 border-radius:var(--radius);
}

.resource-item h3{
 color:var(--color-navy);
 margin-bottom:var(--space-md);
}

.resource-item ul{
 list-style-position:inside;
 margin-left:0;
}

/* Responsive Adjustments */
@media (max-width:768px){
 .policy-content{
 font-size:1rem;
}
 
 .pledge-text{
 font-size:1.125rem;
}
 
 .principle-card,
 .policy-card,
 .special-item{
 margin-bottom:var(--space-lg);
}
}
/* =================================================================
 Button Hover Contrast Fixes
 ================================================================= */

/* Primary Button Hover Fix */
.btn--primary:hover,
.btn--primary:focus{
 background-color:#5a67d8 !important;/* Darker purple */
 color:#ffffff !important;/* Ensure white text */
 border-color:#5a67d8 !important;
}

/* Secondary Button Hover Fix */
.btn--secondary:hover,
.btn--secondary:focus{
 background-color:#4a5568 !important;/* Dark gray */
 color:#ffffff !important;/* Ensure white text */
 border-color:#4a5568 !important;
}

/* Large Button Hover Fix */
.btn--large:hover,
.btn--large:focus{
 color:#ffffff !important;/* Ensure white text */
}

/* CTA Button in Navigation Hover Fix */
.nav__link--cta:hover,
.nav__link--cta:focus{
 background-color:#5a67d8 !important;/* Darker purple */
 color:#ffffff !important;/* Ensure white text */
 opacity:1 !important;
}

/* Contact Form Submit Button Hover Fix */
button[type="submit"]:hover,
button[type="submit"]:focus{
 background-color:#5a67d8 !important;/* Darker purple */
 color:#ffffff !important;/* Ensure white text */
 opacity:1 !important;
}

/* Generic Button Hover Fix */
.btn:hover,
.btn:focus{
 color:#ffffff !important;/* Ensure white text */
 opacity:0.9 !important;/* Slight opacity change */
 transform:translateY(-1px);/* Subtle lift effect */
 transition:all 0.3s ease;
}

/* Ensure all button states have proper contrast */
.btn:not(:disabled):hover{
 color:#ffffff !important;
}

/* Fix for any inverse/outline buttons */
.btn--outline:hover,
.btn--outline:focus{
 background-color:#667eea !important;
 color:#ffffff !important;
 border-color:#667eea !important;
}

/* Back to top button hover fix */
.back-to-top:hover,
.back-to-top:focus{
 background-color:#5a67d8 !important;
 color:#ffffff !important;
}

/* Mobile menu toggle hover fix */
.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus{
 opacity:0.8 !important;
}

/* Disabled button states - ensure they don't change */
.btn:disabled,
.btn[disabled],
button:disabled,
button[disabled]{
 opacity:0.5 !important;
 cursor:not-allowed !important;
 pointer-events:none !important;
}

/* Loading state buttons */
.btn.loading,
button.loading{
 color:#ffffff !important;
 opacity:0.8 !important;
}

/* Small button variant hover */
.btn--small:hover,
.btn--small:focus{
 color:#ffffff !important;
}

/* Link styled as button hover fix */
a.btn:hover,
a.btn:focus{
 color:#ffffff !important;
 text-decoration:none !important;
}

/* Form button hover states */
.form .btn:hover,
.form button:hover{
 color:#ffffff !important;
 background-color:#5a67d8 !important;
}

/* Footer link buttons if any */
.footer__nav a:hover{
 color:#667eea !important;/* Purple for footer links */
 text-decoration:underline;
}

/* Verification page button fix */
.verification-footer .btn:hover{
 color:#ffffff !important;
}

/* Hero CTA button specific fix */
.hero .btn--primary:hover{
 background-color:#5a67d8 !important;
 color:#ffffff !important;
 box-shadow:0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Trust badge hover effect (if clickable) */
.trust-badge:hover{
 opacity:0.8;
 transform:scale(1.05);
 transition:all 0.3s ease;
}

/* =================================================================
 End Button Hover Contrast Fixes
 ================================================================= */