@import url('https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

/* ================= Theme vars ================= */
:root{
  --blue:#4A90E2;
  --pink:#54e776;                 /* optional accent */
  --gray-light:#F5F5F5;
  --gray-dark:#333333;
  --white:#FFFFFF;

  /* Sage palette */
  --green-100:#e7efe6;            /* light */
  --green-300:#aabda0;            /* primary */
  --green-600:#6f8e73;            /* hover/dark */

  /* Hero framing: 0% top, 50% center, 100% bottom */
  --hero-bg-y:35%;
}

/* ================= Base ================= */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--gray-dark);
  background:
    linear-gradient(180deg,rgba(170,189,160,.08) 0%,rgba(231,239,230,.40) 100%),
    var(--white);
  background-attachment:fixed;
}
.container{max-width:1200px;margin:0 auto;padding:0 1rem;}

/* ================= Header / Nav ================= */
/* shifted gradient: darker left → lighter right */
header{
  background:
    linear-gradient(90deg,
      var(--green-300) 0%,
      var(--green-300) 78%,
      var(--green-100) 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 0;gap:1rem;
}
header .nav-bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
}
.brand-title{
  font-family:'Playfair Display','Poppins',serif;font-weight:700;color:#000;
  text-align:center;letter-spacing:.02em;line-height:1;font-size:clamp(.95rem,1.9vw,1.25rem);
}
@media (max-width:768px){
  header .nav-bar{grid-template-columns:auto 1fr;}
  .brand-title{grid-column:1 / -1;margin-top:.25rem;}
}
header .logo img{height:40px;}

nav ul{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin:0;padding:0;}
nav li{margin:0;}
nav a{
  text-decoration:none;color:#fff;font-weight:600;
  font-size:clamp(.78rem,.9vw,.9rem);
  transition:color .25s,text-decoration-color .25s;
  text-underline-offset:.2em;line-height:1.1;
}
nav a:hover{color:var(--green-100);}
nav a.active{text-decoration:underline;}
.logout-item form{display:inline;margin:0;padding:0;}
.logout-item .as-link{
  background:none;border:none;padding:0;font:inherit;color:#fff;cursor:pointer;font-weight:600;
}
.logout-item .as-link:hover{color:var(--green-100);}

/* ================= Buttons ================= */
.btn{
  display:inline-block;background:var(--green-300);color:var(--white);
  padding:.65rem 1.2rem;border-radius:6px;text-decoration:none;font-weight:700;
  transition:background .25s,transform .06s ease-in-out;border:none;cursor:pointer;
}
.btn:hover{background:var(--green-600);}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn.btn-secondary{background:transparent;color:var(--gray-dark);border:1px solid currentColor;}

/* ================= HERO ================= */
.hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:3rem 0;
}
.hero .hero-content{position:relative;z-index:1;padding:0 1rem;}
.hero--home{
  min-height:450px;background-image:url('../images/banner.jpg');
  background-size:cover;background-repeat:no-repeat;background-position:50% var(--hero-bg-y);
  position:relative;
}
/* darker overlay + sage tint to calm the photo */
.hero--home::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,.58)),
    linear-gradient(180deg,rgba(170,189,160,.28),rgba(170,189,160,.36));
  backdrop-filter:saturate(.75) brightness(.9);
}
.hero--home .hero-content{color:#fff;}
.hero h1{font-size:2.6rem;margin-bottom:.5rem;}
.hero p{font-size:1.06rem;margin-bottom:1.1rem;}

/* Lower hero titles slightly */
.hero--home .hero-content{padding-top:22px;}
@media (max-width:480px){
  .hero--home .hero-content{padding-top:14px;}
}
/* Hero suburb links: white + bold + subtle underline */
.hero--home .hero-content p a{
  color:#fff;font-weight:700;text-decoration:underline;
  text-decoration-thickness:.08em;text-underline-offset:.15em;
}
.hero--home .hero-content p a:hover,
.hero--home .hero-content p a:focus{
  text-decoration-color:rgba(255,255,255,.75);
}

/* ================= Features ================= */
.features{background:var(--gray-light);padding:4rem 0;}
.features .container{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;
}
.feature-card{
  background:var(--white);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);
  text-align:center;padding:2rem 1rem;transition:transform .3s;
}
.feature-card:hover{transform:translateY(-5px);}
.feature-card img{width:60px;margin-bottom:1rem;}
.feature-card h3{color:var(--blue);margin-bottom:.5rem;}
.feature-card p{font-size:.95rem;line-height:1.4;}

/* ================= Footer ================= */
footer{background:var(--gray-light);text-align:center;padding:2rem 0;font-size:.9rem;color:var(--gray-dark);}

/* ================= Forms ================= */
.auth-form{
  max-width:400px;margin:2rem auto;padding:1.5rem;background:var(--gray-light);
  border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.auth-form label{display:block;margin-top:1rem;font-weight:600;}
.auth-form input{
  width:100%;padding:.5rem;margin-top:.25rem;border:1px solid #bbb;border-radius:4px;background:var(--white);
}
.auth-form button{width:100%;margin-top:1.5rem;}

/* ================= Flash messages ================= */
.flash-container{max-width:600px;margin:1rem auto;}
.flash{padding:.75rem 1rem;border-radius:4px;margin-bottom:.5rem;animation:fadeIn .35s ease-in;}
.flash.success{background:#d4edda;color:#155724;}
.flash.error{background:#f8d7da;color:#721c24;}
.flash.warning{background:#fff3cd;color:#856404;}
.flash.info{background:#d1ecf1;color:#0c5460;}

/* ================= Utilities ================= */
a:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;
}
img{max-width:100%;height:auto;display:block;}
.checklist{list-style:disc;padding-left:1.25rem;}
.checklist li{margin:.25rem 0;}
.chip-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0;}
.chip{background:var(--green-300);color:var(--white);padding:.4rem .8rem;border-radius:999px;font-weight:500;line-height:1;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:.5rem;border-bottom:1px solid #eee;}
thead th{border-bottom:1px solid #ddd;}
.page-title{margin:1rem 0 1.5rem;}
.field{display:grid;gap:.375rem;margin-bottom:1rem;}
.field-error{color:#b00020;font-size:.9rem;}
.hint{font-size:.9rem;color:#555;}
.password-wrap{display:flex;gap:.5rem;align-items:center;}
.password-wrap input{flex:1;}
.toggle-pass{background:none;border:1px solid #ccc;padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;}
.cta-group{display:flex;gap:.75rem;flex-wrap:wrap;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ================= Responsive ================= */
@media (max-width:768px){
  header .container{flex-wrap:wrap;}
  nav ul{width:100%;justify-content:flex-end;gap:.6rem;}
  .hero--home{min-height:300px;}
  :root{--hero-bg-y:40%;}
}
@media (max-width:480px){
  nav ul{justify-content:flex-start;}
  .hero--home{min-height:240px;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1rem;}
}

/* ================= Cards / straps ================= */
.routes-block .tour-card:hover{transform:translateY(-4px);transition:transform .25s;}
.section-title{text-transform:uppercase;}
.services-block .service-card:hover{transform:translateY(-4px);}

/* Areas We Serve strap — shifted gradient to the right */
.areas-strap{
  background:
    linear-gradient(90deg,
      var(--green-300) 0%,
      var(--green-300) 78%,
      var(--green-100) 100%);
  border-top:1px solid rgba(0,0,0,.06);padding:.65rem 0;overflow:hidden;
}
.areas-strap .areas-mask{padding-left:1rem;padding-right:1rem;}
.areas-strap .areas-track{
  display:flex;gap:.75rem;width:max-content;animation:areas-scroll 28s linear infinite;will-change:transform;
}
.areas-strap .areas-track:hover{animation-play-state:paused;}
.areas-strap .areas-item{
  background:var(--white);color:var(--gray-dark);padding:.45rem .9rem;border-radius:999px;font-weight:600;white-space:nowrap;
  border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 6px rgba(0,0,0,.06);
}
@keyframes areas-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.areas-strap .areas-track{animation:none;}}

/* 2×1 split grid (services page) */
.services-testimonials{padding:3rem 0;background:var(--white);}
.split-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start;}
.testi-list{display:grid;gap:1rem;}
.testimonial-card{
  background:var(--white);border:1px solid #eaeaea;border-radius:10px;padding:1rem 1.1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.testimonial-head{color:var(--gray-dark);margin-bottom:.25rem;}
.testimonial-head .loc{color:#666;font-weight:500;margin-left:.35rem;}
.stars{color:var(--green-300);font-size:1rem;letter-spacing:.1rem;margin-bottom:.35rem;}
.quote{color:#444;line-height:1.5;}
/* Testimonials: H2s black in both columns */
.services-testimonials .split-right h2,
.services-testimonials .split-left h2{color:#000 !important;}
@media (max-width:900px){.split-grid{grid-template-columns:1fr;}}

/* ========== MOBILE FIX PATCH: stop header/hero overlap, tidy nav ========== */
@media (max-width: 768px) {
  .nav-bar{
    min-height:auto !important;
    padding:0.75rem 1rem !important;
    gap:0.5rem !important;
    display:block !important;         /* stack children */
  }
  header nav{
    padding-right:0 !important;
    margin:0 !important;
  }
  header nav ul{
    gap:0.75rem !important;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0.25rem;
  }
  header nav a{ font-size:0.95rem !important; }
  .brand-title{
    position:static !important;
    transform:none !important;
    min-height:0 !important;
    pointer-events:auto !important;
    text-align:center;
    margin:0.25rem auto 0;
  }
  .brand-moon{ display:none !important; }
  .brand-initials{ font-size:clamp(1.25rem,6vw,1.75rem) !important; }
  .brand-slogan{   font-size:clamp(0.9rem,3.6vw,1rem) !important; }
}

/* Very small phones */
@media (max-width: 360px){
  header nav a{ font-size:0.9rem !important; }
}