:root{
  /* Defaults — the inline <style> block in includes/header.php overrides
     these per-request based on the admin's chosen accent theme + fonts
     (Homepage Content settings), so these values are just the fallback
     if that override is ever missing. */
  --violet-deep:#4A2E6B;
  --violet:#6B3FA0;
  --violet-light:#9B6FC7;
  --blue:#3D5A99;
  --lavender-bg:#F3ECFA;
  --sunset:#E8896B;
  --gold:#F2A65A;
  --cream:#FBF7F2;
  --ink:#2B2438;
  --muted:#6E6580;
  --line:#E6DCF2;
  --font-heading:'Playfair Display';
  --font-body:'Poppins';
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* Sticky nav means an in-page anchor (#trips, #request-form) would
   otherwise land its target right under the nav bar — this keeps a
   comfortable gap when jumping to it. */
[id]{scroll-margin-top:76px;}
body{margin:0;font-family:var(--font-body),Arial,sans-serif;background:var(--cream);color:var(--ink);}
h1,h2,h3,.display{font-family:var(--font-heading),Georgia,serif;}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ===========================================================================
   MOBILE FIRST: everything below is written for small screens by default.
   Tablet rules live under @media(min-width:640px), desktop under
   @media(min-width:1000px) further down.
   =========================================================================== */

/* ---- site header / nav ---- */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--line);}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0;}
.logo-mark{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue));flex-shrink:0;}
/* Actual uploaded logo/header image: scales to fit a header-height box
   WITHOUT cropping, whatever its real width/height/aspect ratio is —
   unlike .logo-mark above (only used for the placeholder gradient circle
   when no image has been uploaded yet). */
.logo-image{max-height:var(--logo-height,48px);max-width:calc(var(--logo-height,48px) * 4);width:auto;height:auto;object-fit:contain;flex-shrink:0;}
.logo-text{font-family:var(--font-heading),Georgia,serif;font-weight:700;font-size:16px;color:var(--violet-deep);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-links{display:flex;gap:14px;font-size:14.5px;font-weight:600;flex-wrap:wrap;align-items:center;}
.nav-links a{text-decoration:none;color:var(--ink);opacity:.85;}
.nav-links a:hover{opacity:1;color:var(--violet-deep);}
.nav-links a.nav-back{opacity:.55;font-weight:500;}
.nav-links a.nav-back:hover{opacity:1;}

.site-footer{padding:26px 20px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--line);background:#fff;}

/* ---- hero (homepage) ---- */
.hero{position:relative;padding:44px 20px 40px;text-align:center;background:linear-gradient(160deg,var(--violet-deep) 0%,var(--violet) 55%,var(--sunset) 130%);color:#fff;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(242,166,90,.35), transparent 55%);}
.hero-inner{position:relative;max-width:640px;margin:0 auto;}
.hero h1{font-size:clamp(26px,7vw,40px);margin:0 0 12px;line-height:1.15;}
.hero p{font-size:14.5px;opacity:.94;margin:0 0 22px;line-height:1.6;}
.hero-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.hero-actions .btn{width:100%;}

/* ---- secondary page hero (private-trip.php and future inner pages) ---- */
.page-hero{position:relative;padding:44px 20px 40px;text-align:center;background:linear-gradient(160deg,var(--violet-deep) 0%,var(--violet) 55%,var(--sunset) 130%);color:#fff;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%, rgba(242,166,90,.3), transparent 55%);}
.page-hero-inner{position:relative;max-width:600px;margin:0 auto;}
.page-hero .eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:20px;margin-bottom:14px;}
.page-hero h1{font-size:clamp(26px,7vw,36px);margin:0 0 12px;line-height:1.15;}
.page-hero p{font-size:14.5px;opacity:.94;margin:0;line-height:1.6;}

.btn{display:inline-block;padding:13px 24px;border-radius:30px;font-weight:600;font-size:14px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;text-align:center;}
.btn-gold{background:var(--gold);color:var(--violet-deep);}
.btn-outline{background:transparent;border:1.5px solid #fff;color:#fff;}
.btn-violet{background:var(--violet-deep);color:#fff;}
/* Fixed brand color regardless of accent theme, per request — not tied to
   the --violet-deep variable (which changes if the admin picks a different
   accent theme on the Homepage Content page). */
.btn-private-submit{background:#4A2E6B;color:#fff;}
.btn-private-submit:hover{background:#3d2557;}
.btn-block{width:100%;text-align:center;}

.section-heading{text-align:center;padding:6px 20px 0;max-width:600px;margin:0 auto;}
.section-heading h2{color:var(--violet-deep);font-size:22px;margin:0 0 6px;}
.section-heading p{color:var(--muted);font-size:13px;margin:0;}

/* ---- "How It Works" step cards (private-trip.php) ---- */
.steps{display:grid;grid-template-columns:1fr;gap:16px;padding:26px 20px 6px;max-width:1000px;margin:0 auto;}
.step-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;text-align:center;position:relative;}
.step-num{width:34px;height:34px;border-radius:50%;background:var(--violet-deep);color:#fff;font-family:var(--font-heading),Georgia,serif;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.step-card h3{margin:0 0 8px;font-size:16px;color:var(--violet-deep);}
.step-card p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;}

/* ---- category filter pills — horizontally scrollable on small screens
   so 5 pills never wrap awkwardly or eat vertical space on a phone ---- */
.filters{display:flex;gap:8px;padding:20px 20px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.filters a{border:1px solid var(--line);padding:9px 16px;border-radius:20px;font-size:13px;font-weight:600;color:var(--violet-deep);text-decoration:none;background:#fff;white-space:nowrap;flex:0 0 auto;}
.filters a.active{background:var(--violet-deep);color:#fff;border-color:var(--violet-deep);}

/* ---- trip grid / cards ---- */
.trip-grid{display:grid;grid-template-columns:1fr;gap:18px;padding:22px 20px 50px;}
.trip-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 18px rgba(74,46,107,.06);text-decoration:none;color:inherit;display:block;transition:.2s;}
.trip-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(74,46,107,.12);}
.trip-photo{height:180px;position:relative;background-size:cover;background-position:center;background-color:var(--violet-light);}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;color:#fff;letter-spacing:.3px;}
.badge.public{background:var(--blue);}
.badge.private{background:var(--sunset);}
.badge.static{position:static;display:inline-block;}
.spots-badge{position:absolute;bottom:10px;right:12px;background:rgba(43,36,56,.75);color:#fff;font-size:11px;padding:3px 9px;border-radius:12px;}
.trip-body{padding:16px 18px 20px;}
.trip-body .loc{font-size:11.5px;color:var(--sunset);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.trip-body h3{margin:0 0 6px;font-size:17px;color:var(--ink);}
.trip-body .dates{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.trip-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.price{font-weight:700;color:var(--violet-deep);font-size:15px;}
.price span{font-size:11px;color:var(--muted);font-weight:500;}
.mini-btn{background:var(--violet-deep);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-size:12px;font-weight:600;}
.empty-state{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px;}

/* ---- "Plan a Private Trip" request form ---- */
.request-errors{max-width:640px;margin:0 auto 18px;}
.request-form{max-width:680px;margin:0 auto;padding:0 20px 60px;}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px;}
.request-form .field{margin-bottom:0;}
.request-form .field.full{margin-bottom:16px;}
.request-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.request-form input[type=text],
.request-form input[type=email],
.request-form input[type=tel],
.request-form input[type=number],
.request-form select,
.request-form textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;font-family:inherit;background:#fff;
}
.request-form textarea{resize:vertical;}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.consent-field{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted);margin:4px 0 20px;cursor:pointer;line-height:1.5;}
.consent-field input{margin-top:3px;flex:0 0 auto;}

.request-confirm{max-width:520px;margin:0 auto;padding:50px 24px 70px;text-align:center;}
.request-confirm-icon{width:56px;height:56px;border-radius:50%;background:var(--lavender-bg);color:var(--violet-deep);font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.request-confirm h3{color:var(--violet-deep);font-size:20px;margin:0 0 10px;}
.request-confirm p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 22px;}

/* ---- trip detail page ---- */
.detail-wrap{max-width:1000px;margin:0 auto;padding:20px 20px 60px;}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.gallery{display:grid;grid-template-columns:1fr;gap:8px;height:auto;border-radius:14px;overflow:hidden;margin-bottom:20px;}
.gallery .main{height:220px;}
.gallery div:not(.main){height:110px;}
.gallery div{background-size:cover;background-position:center;background-color:var(--violet-light);}
.gallery.gallery-single .main{height:260px;}

.detail-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.detail-badges{display:flex;gap:8px;margin-bottom:10px;}
.detail-main h1{font-size:24px;margin:6px 0 6px;color:var(--ink);}
.detail-sub{color:var(--muted);font-size:13.5px;margin-bottom:20px;}
.detail-main h4{color:var(--violet-deep);font-size:15px;margin:22px 0 8px;}
.detail-main p{font-size:14px;line-height:1.75;color:#463d55;margin:0 0 10px;}
.detail-main .desc-body{font-size:14px;line-height:1.75;color:#463d55;}

.booking-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;height:fit-content;box-shadow:0 8px 24px rgba(74,46,107,.08);}
.booking-card .price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;}
.booking-card .price-row .amt{font-size:26px;font-weight:700;color:var(--violet-deep);}
.booking-card .price-row .per{font-size:12.5px;color:var(--muted);}
.spots-bar{height:7px;border-radius:6px;background:var(--lavender-bg);margin:14px 0 6px;overflow:hidden;}
.spots-bar-fill{height:100%;background:linear-gradient(90deg,var(--sunset),var(--gold));}
.spots-note{font-size:12px;color:var(--muted);margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.field select,.field input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit;}
.occupancy-options{display:flex;flex-direction:column;gap:8px;}
.occupancy-options label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--ink);cursor:pointer;}
.occupancy-options input[type="radio"]{width:auto;accent-color:var(--violet-deep);}
.stripe-note{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:12px;font-size:11.5px;color:var(--muted);}
.deposit-note{background:var(--lavender-bg);border-radius:8px;padding:9px 12px;font-size:11.5px;color:var(--violet-deep);margin-top:10px;line-height:1.5;}
.disclaimer-note{background:var(--lavender-bg);border-radius:8px;padding:9px 12px;font-size:11.5px;color:var(--violet-deep);margin-top:10px;margin-bottom:4px;line-height:1.5;}
.private-note{background:var(--lavender-bg);border:1px dashed var(--violet-light);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--violet-deep);margin-bottom:16px;}
.error-note{background:#FDECEA;border:1px solid #f3c3bd;color:#9a3b30;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:16px;}
.sold-out{text-align:center;padding:14px;background:var(--lavender-bg);border-radius:10px;color:var(--violet-deep);font-weight:600;font-size:14px;}

/* ---- included / not-included amenities ---- */
.amenities-box{background:var(--lavender-bg);border-radius:14px;padding:20px;margin:22px 0;}
.amenities-box.muted-box{background:#F5F3F0;}
.amenities-box h4{margin:0 0 16px;color:var(--ink);font-size:17px;}
.amenities-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.amenity-item{display:flex;align-items:flex-start;gap:10px;}
.amenity-item-icon{font-size:19px;line-height:1.3;flex-shrink:0;}
.amenity-item-label{font-weight:700;color:var(--ink);font-size:14px;}
.amenity-item-desc{color:var(--muted);font-size:11px;font-weight:400;margin-top:2px;}
.amenity-item.muted .amenity-item-label{color:var(--muted);font-weight:600;}
.amenity-item.muted{opacity:.8;}

/* ===========================================================================
   TABLET — min-width 640px
   =========================================================================== */
@media(min-width:640px){
  .site-nav{padding:18px 32px;}
  .logo-image{max-height:var(--logo-height,60px);max-width:calc(var(--logo-height,60px) * 4);}
  .logo-text{font-size:18px;}
  .nav-links{gap:22px;font-size:15.5px;}

  .hero,.page-hero{padding:64px 32px 52px;}
  .hero-actions{flex-direction:row;justify-content:center;}
  .hero-actions .btn{width:auto;}

  .section-heading{padding-top:6px;}
  .steps{grid-template-columns:repeat(3,1fr);padding:32px 32px 6px;}
  .filters{padding:22px 32px 0;overflow-x:visible;flex-wrap:wrap;justify-content:center;}

  .trip-grid{grid-template-columns:repeat(2,1fr);gap:20px;padding:28px 32px 60px;}
  .trip-photo{height:160px;}

  .request-form{padding:0 32px 60px;}
  .form-grid{grid-template-columns:1fr 1fr;}

  .detail-wrap{padding:28px 32px 60px;}
  .gallery{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;height:300px;}
  .gallery .main{grid-row:1/3;height:auto;}
  .gallery div:not(.main){height:auto;}
  .gallery.gallery-single{grid-template-columns:1fr;grid-template-rows:1fr;height:340px;}
  .gallery.gallery-single .main{grid-row:auto;}
  .amenities-grid{grid-template-columns:1fr 1fr;}
}

/* ===========================================================================
   DESKTOP — min-width 1000px
   =========================================================================== */
@media(min-width:1000px){
  .site-nav{padding:18px 40px;}
  .logo-image{max-height:var(--logo-height,68px);max-width:calc(var(--logo-height,68px) * 4);}

  .hero,.page-hero{padding:80px 40px 64px;}
  .hero h1,.page-hero h1{font-size:38px;}

  .steps{padding:36px 40px 6px;}

  .filters{padding:22px 40px 0;}

  .trip-grid{grid-template-columns:repeat(3,1fr);gap:22px;padding:30px 40px 70px;max-width:1150px;margin:0 auto;}
  .trip-photo{height:150px;}

  .detail-wrap{padding:30px 40px 70px;}
  .detail-grid{grid-template-columns:1.6fr 1fr;gap:36px;}
  .detail-main h1{font-size:29px;}
  .booking-card{position:sticky;top:96px;}
}

@media(max-width:900px){
  .detail-grid{grid-template-columns:1fr;}
}