/*
Theme Name: Premium Ionian Villas
Theme URI: https://premiumionianvillas.com
Author: Neil Hanley / built with Claude
Description: Custom theme for Premium Ionian Villas — five family-run villas in Kefalonia, Greece. Built to work with the HBook booking plugin.
Version: 3.30
Text Domain: piv-theme
*/

/* Fonts are loaded via functions.php (preconnect + async) instead of
   @import here — @import is render-blocking and was flagged directly
   in the PageSpeed report (font display + render-blocking requests). */

:root{
  --ink:#2B1B12;
  --ink-soft:#4A3225;
  --stone:#F4F0E6;
  --stone-dark:#E4DCC8;
  --olive:#6B7A4F;
  --terracotta:#B3552C;
  --gold:#86734F;
  --white:#FBFAF7;
  --line: rgba(134,115,79,0.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:100%; object-fit:cover;}
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* horizon rule signature */
.horizon{
  height:1px;
  background:var(--line);
  width:100%;
  position:relative;
}
.horizon::after{
  content:'';
  position:absolute; left:0; top:-1px;
  width:64px; height:3px;
  background:var(--gold);
}

/* NAV */
/* COOKIE BANNER */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--ink); color:var(--white);
  padding:18px 24px;
  box-shadow:0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-banner-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-banner-inner p{font-size:13.5px; color:rgba(251,250,247,0.8); max-width:640px; margin:0;}
.cookie-banner-inner a{color:var(--gold); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-banner-actions button{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.04em;
  padding:10px 20px; cursor:pointer;
}
#piv-cookie-decline{
  background:transparent; border:1px solid rgba(251,250,247,0.4); color:var(--white);
}
#piv-cookie-accept{
  background:var(--gold); border:1px solid var(--gold); color:var(--white);
}

nav{
  position:sticky; top:0; z-index:50;
  background:rgba(43,27,18,0.97);
  backdrop-filter:blur(6px);
  color:var(--white);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 32px;
  max-width:1180px; margin:0 auto;
  position:relative;
  gap:16px;
}
.logo{
  font-family:'Fraunces', serif;
  font-size:19px;
  letter-spacing:0.02em;
}
.logo span{color:var(--gold); font-style:italic;}
.logo-mark{height:74px; width:auto; display:block;}
.logo-mark.footer-mark{height:88px; filter:brightness(1.6) contrast(0.9);}
.nav-links{display:flex; gap:34px; font-size:14px; letter-spacing:0.02em;}
.nav-links > ul{display:flex; gap:34px; list-style:none; margin:0; padding:0;}
.nav-links li{position:relative;}
.nav-links a{opacity:0.85; transition:opacity .2s; text-decoration:none; color:inherit;}
.nav-links a:hover{opacity:1;}
/* Submenus (e.g. "Our Villas" > each villa) are hidden by default,
   shown as a dropdown on hover — this is what was missing, causing
   every page to spill out flat across the header instead of nesting
   under its parent item. */
.nav-links li ul{
  display:none;
  position:absolute; top:100%; left:0;
  background:var(--ink); min-width:200px;
  padding:12px 0 6px;
  list-style:none;
  box-shadow:0 12px 24px rgba(0,0,0,0.25);
  z-index:60;
}
.nav-links li:hover > ul{display:block;}
.nav-links li ul li{width:100%;}
.nav-links li ul a{display:block; padding:8px 20px; white-space:nowrap; opacity:0.85;}
.nav-links li ul a:hover{opacity:1; background:rgba(255,255,255,0.06);}
.nav-cta{
  background:var(--gold); color:var(--white);
  border:1px solid var(--gold);
  padding:10px 22px; font-size:13px; letter-spacing:0.04em;
  font-family:'Space Mono', monospace;
  transition:background .2s, color .2s;
}
.nav-cta:hover{background:transparent; color:var(--gold);}

/* Hamburger menu toggle — hidden on desktop (nav-links shows
   inline there), only appears once the 900px breakpoint below
   hides the inline nav-links and turns it into a slide-down panel
   instead. */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; padding:0;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:100%; height:2px;
  background:var(--white);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* HERO */
.hero{
  position:relative; height:92vh; min-height:620px;
  color:var(--white);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero img{position:absolute; inset:0; width:100%; height:100%;}
.hero::before{
  content:'';
  position:absolute; inset:0;
  /* Darkened further at the very top (0.55→0.62) — Villa Insieme's
     aerial pool shot in particular is much brighter than a typical
     villa-exterior hero photo, and even the v3.13 gradient wasn't
     quite enough contrast for the gold eyebrow text against it. */
  background:linear-gradient(180deg, rgba(20,12,7,0.62) 0%, rgba(20,12,7,0.5) 45%, rgba(20,12,7,0.92) 100%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding-bottom:70px;
}
.hero-content .wrap{
  position:relative;
}
.hero-content .wrap::before{
  /* A feathered dark scrim sitting just behind the text block,
     independent of the gradient overlay and the photo's own
     brightness. The gradient alone can never guarantee contrast
     because it depends on how bright each specific hero photo
     happens to be (Insieme's aerial shot vs a villa exterior, for
     example) — this backdrop is a fixed, reliable layer instead. */
  content:'';
  position:absolute;
  top:-40px; left:-40px;
  width:min(720px, 100%);
  height:calc(100% + 80px);
  background:radial-gradient(ellipse at left, rgba(10,6,3,0.55) 0%, rgba(10,6,3,0.3) 55%, rgba(10,6,3,0) 80%);
  z-index:-1;
  pointer-events:none;
}
.hero-eyebrow{
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
  display:inline-block;
  padding-bottom:8px;
  border-bottom:2px solid rgba(134,115,79,0.9);
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
}
.hero h1{
  color:var(--white);
  font-size:clamp(38px, 6vw, 74px);
  font-weight:400;
  line-height:1.02;
  max-width:800px;
  text-shadow:0 2px 24px rgba(0,0,0,0.45);
}
.hero h1 em{
  font-style:italic;
  color:#F0D9C0;
  text-shadow:0 2px 20px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.8);
}
.hero p{
  font-size:17px; max-width:480px; margin-top:22px;
  color:rgba(251,250,247,0.92); font-weight:400;
  text-shadow:0 1px 12px rgba(0,0,0,0.5);
}
.hero-actions{display:flex; gap:16px; margin-top:34px; align-items:center;}
.btn-primary{
  background:var(--gold); color:var(--ink);
  padding:15px 30px; font-size:14px; letter-spacing:0.03em;
  font-weight:600;
}
.btn-ghost{
  border:1px solid rgba(251,250,247,0.5);
  background:rgba(20,12,7,0.55);
  backdrop-filter:blur(3px);
  color:var(--white);
  padding:15px 30px; font-size:14px;
  transition:background .2s, border-color .2s;
}
.btn-ghost:hover{background:rgba(20,12,7,0.8); border-color:var(--white);}
.btn-ghost-light{
  border:1px solid var(--ink); color:var(--ink);
  padding:15px 30px; font-size:14px;
  display:inline-block; margin-top:10px;
  transition:background .2s, color .2s;
}
.btn-ghost-light:hover{background:var(--ink); color:var(--white);}

/* INTRO STRIP */
.intro{
  padding:100px 0 90px;
  background:var(--stone);
}
.intro-grid{
  display:grid; grid-template-columns:1fr 1.3fr; gap:70px; align-items:start;
}
.intro h2{font-size:clamp(28px,3.4vw,40px); line-height:1.1;}
.intro-right p{font-size:16px; color:var(--ink-soft); max-width:460px; margin-bottom:22px;}
.intro-stats{
  display:flex; gap:40px; margin-top:36px;
}
.stat-num{font-family:'Fraunces', serif; font-size:34px; color:var(--terracotta);}
.stat-label{font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px;}

/* VILLAS - ticket stub cards */
/* BOOK DIRECT */
/* BOOKING WIDGET */
.booking-section{padding:100px 0; background:var(--ink); color:var(--white);}
.booking-head{max-width:560px; margin-bottom:40px;}
.booking-head .eyebrow{color:#D8C6A8;}
.booking-head h2{font-size:clamp(28px,3.4vw,38px); color:var(--white);}
.booking-head p{color:rgba(251,250,247,0.7); font-size:15px; margin-top:12px; max-width:480px;}
.search-panel{
  background:var(--white);
  padding:34px;
}
.per-villa-note{
  margin-top:18px; font-size:13px; color:rgba(251,250,247,0.55);
}
.per-villa-note strong{color:#D8C6A8; font-weight:500;}

.direct{padding:20px 0 100px; background:var(--stone);}
.direct-head{max-width:520px; margin-bottom:50px;}
.direct-head h2{font-size:clamp(28px,3.4vw,38px); margin-top:10px;}
.direct-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.direct-item{border-top:2px solid var(--gold); padding-top:20px;}
.direct-num{font-family:'Space Mono', monospace; font-size:11px; color:var(--gold); letter-spacing:0.08em; margin-bottom:10px;}
.direct-item h3{font-size:20px; margin-bottom:10px; font-weight:500;}
.direct-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.55;}

.villas{padding:70px 0 110px; background:var(--stone);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px;}
.section-head h2{font-size:clamp(30px,3.6vw,44px);}
.section-head p{font-size:14px; color:var(--ink-soft); max-width:280px;}

.villa-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.villa-card{
  background:var(--white);
  position:relative;
  overflow:hidden;
  transition:transform .25s ease;
  border:1px solid var(--stone-dark);
  display:block;
  color:inherit;
  text-decoration:none;
}
.villa-card:hover{transform:translateY(-4px);}
.villa-photo{height:230px; position:relative;}
.villa-tag{
  position:absolute; top:14px; left:14px;
  background:rgba(14,42,46,0.85); color:var(--gold);
  font-family:'Space Mono', monospace; font-size:11px;
  padding:5px 10px; letter-spacing:0.05em;
}
.villa-body{padding:22px 24px 26px;}
.villa-name{font-size:22px; margin-bottom:6px;}
.villa-hook{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; min-height:36px;}
.villa-stub{
  border-top:1px dashed var(--stone-dark);
  padding-top:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.villa-specs{display:flex; gap:16px; font-family:'Space Mono', monospace; font-size:11.5px; color:var(--ink-soft);}
.villa-price{font-family:'Fraunces', serif; font-size:15px; color:var(--terracotta);}
.villa-price span{font-family:'Space Mono', monospace; font-size:10px; color:var(--ink-soft);}

/* pair callout */
.pairs{
  background:var(--ink); color:var(--white);
  padding:70px 0; margin-top:20px;
}
.pairs-inner{
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.pairs h3{color:var(--white); font-size:26px; max-width:480px; font-weight:400;}
.pairs h3 em{color:var(--gold); font-style:italic;}
.pairs p{color:rgba(251,250,247,0.7); font-size:14px; margin-top:10px; max-width:460px;}
.pairs .btn-primary{white-space:nowrap;}

/* GUEST QUOTES */
.quotes{padding:100px 0; background:var(--stone-dark);}
.quotes-grid{margin-top:50px; max-width:100%;}
/* overflow:hidden removed — it was clipping the plugin's navigation
   arrows, which sit just outside the card area in Slider modes.
   If you switch back to Grid and see unwanted horizontal scroll,
   that's why — a small trade-off between the two modes. */
.quote-card{background:var(--stone); padding:30px 26px; border-left:2px solid var(--gold);}
.quote-stars{color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:14px;}
.quote-text{font-family:'Fraunces', serif; font-size:17px; font-style:italic; line-height:1.4; color:var(--ink);}
.quote-by{margin-top:16px; font-family:'Space Mono', monospace; font-size:11px; color:var(--ink-soft); letter-spacing:0.04em;}

/* ISLAND */
.island{padding:110px 0; background:var(--stone);}
.island-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.island-photos{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.island-photos img{height:190px;}
.island-photos .tall{height:auto; grid-row:span 2;}
.island h2{font-size:clamp(28px,3.4vw,38px); margin-bottom:20px;}
.island p{color:var(--ink-soft); font-size:15.5px; margin-bottom:16px; max-width:460px;}

/* FOOTER */
footer{background:var(--ink); color:rgba(251,250,247,0.7); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:50px;}
footer h4{font-family:'Fraunces', serif; color:var(--white); font-size:20px; margin-bottom:14px; font-weight:400;}
footer .logo{color:var(--white); margin-bottom:14px;}
footer p{font-size:13.5px; max-width:280px; line-height:1.6;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:10px; font-size:13.5px;}
.footer-links a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid rgba(251,250,247,0.15);
  padding-top:26px;
  display:flex; justify-content:space-between; font-size:12px; color:rgba(251,250,247,0.4);
  font-family:'Space Mono', monospace;
}

@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr; gap:30px;}
  .villa-grid{grid-template-columns:1fr 1fr;}
  .direct-grid{grid-template-columns:1fr; gap:28px;}
  .direct-item{margin-bottom:12px;}
  /* .section-head (e.g. "The collection" + its intro paragraph)
     had no mobile override — its desktop `justify-content:
     space-between` row layout was squeezing the heading and
     paragraph side-by-side in a narrow viewport with no gap
     between them. Stack vertically with breathing room instead. */
  .section-head{flex-direction:column; align-items:flex-start; gap:14px;}
  .section-head p{max-width:100%;}
  /* .quotes-grid no longer forces columns, so no override needed here */
  .island-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}

  .nav-toggle{display:flex;}
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink);
    flex-direction:column;
    padding:10px 0;
    box-shadow:0 12px 24px rgba(0,0,0,0.25);
  }
  .nav-links.is-open{display:flex;}
  .nav-links > ul{flex-direction:column; gap:0; width:100%;}
  .nav-links li{width:100%;}
  /* header.php's items_wrap strips the default <ul> WordPress
     normally wraps top-level menu items in, so .nav-links directly
     contains <li> elements — not .nav-links > ul > li. The old
     selector below never matched anything, leaving top-level links
     ("Home", "Our Villas", etc.) flush against the screen edge with
     no left padding, while only the submenu (which DOES keep its
     own <ul class="sub-menu">) was correctly indented. */
  .nav-links > li > a{
    display:block; padding:14px 32px;
    border-top:1px solid rgba(251,250,247,0.08);
  }
  /* Submenus (e.g. villas under "Our Villas") no longer need
     hover-triggered absolute positioning on mobile — there's no
     hover on touch, so just show them inline, indented. */
  .nav-links li ul{
    display:block; position:static;
    background:rgba(0,0,0,0.15);
    box-shadow:none; padding:0;
  }
  .nav-links li ul a{padding-left:52px;}
}
@media(max-width:600px){
  .villa-grid{grid-template-columns:1fr;}
  .island-photos{grid-template-columns:1fr;}
  .island-photos .tall{grid-row:auto;}
}

/* ============================================
   HBOOK OVERRIDES
   HBook renders its own form/calendar markup via shortcode.
   These are starter overrides to make it sit visually inside
   the dark .booking-section panel — inspect HBook's actual
   output classes in the browser and refine these selectors,
   since exact class names depend on your HBook version/settings.
   ============================================ */
.booking-section .hbook-wrapper{
  font-family:'Inter', sans-serif;
}
.booking-section .hbook-wrapper label{
  display:block;
  font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft) !important; margin-bottom:6px;
}
.booking-section .hbook-wrapper input[type="text"],
.booking-section .hbook-wrapper input[type="number"],
.booking-section .hbook-wrapper select,
.booking-section .hbook-wrapper textarea{
  border-color:var(--stone-dark) !important;
  border-radius:2px !important;
  font-family:'Inter', sans-serif !important;
  color:var(--ink) !important;
}
.booking-section .hbook-wrapper .hb-btn,
.booking-section .hbook-wrapper button[type="submit"],
.booking-section .hbook-wrapper input[type="submit"]{
  background:var(--gold) !important;
  border:none !important;
  color:var(--white) !important;
  font-family:'Space Mono', monospace !important;
  padding:15px 30px !important;
  font-size:14px !important;
  letter-spacing:0.03em !important;
  font-weight:600 !important;
  cursor:pointer;
}
/* HBook leaves empty wrapper divs (.hb-policies-area,
   .hb-payment-info-wrapper) even when there's no content to show
   yet — e.g. before a payment gateway is configured — which was
   creating a large gap before the "Book now!" button. Tightening
   the confirm area's own spacing so it doesn't compound that gap
   further, regardless of whether those wrappers end up populated. */
.booking-section .hbook-wrapper .hb-confirm-area{
  margin-top:12px;
}
.booking-section .hbook-wrapper .hb-confirm-area p{
  margin-bottom:14px;
}
.booking-section .hbook-wrapper .hb-confirm-button{
  margin-top:6px;
}
.booking-section .hbook-wrapper .hb-policies-area:empty,
.booking-section .hbook-wrapper .hb-payment-info-wrapper:empty{
  display:none;
}
/* HBook's villa search-results list ("Select your villa" step)
   renders its own <img class="hb-accom-img"> with inline
   width="300" height="300" attributes — but the theme's global
   `img{width:100%; height:100%;}` rule (near the top of this
   file) overrides those, stretching each thumbnail to fill its
   container's full width instead of staying a sane thumbnail
   size. This caps it back down. */
.hb-accom-img{
  width:100% !important;
  max-width:300px !important;
  height:200px !important;
  object-fit:cover !important;
}
/* HBook's result-card text (villa name, description, price,
   price breakdown) ships with its own default text color —
   pale grey/white, meant for a dark background — which was
   rendering as barely-visible text on this theme's light card
   background. Forcing it to the theme's ink colors instead. */
.hb-accom-title,
.hb-accom-desc,
.hb-accom-price-total,
.hb-price-breakdown{
  color:var(--ink) !important;
}
.hb-accom-title{
  font-family:'Fraunces', serif !important;
  font-size:22px !important;
}
.hb-accom-price-total{
  color:var(--terracotta) !important;
  font-family:'Fraunces', serif !important;
}
/* HBook's final "Reservation summary" block (check-in/out dates,
   nights, accommodation, deposit, total price, security deposit)
   has the same unstyled-text problem, but most of its lines are
   plain <div>/<p> tags with no individual class to target — so
   this targets the whole .hb-resa-summary wrapper and everything
   inside it, rather than chasing each line one by one. */
.hb-resa-summary,
.hb-resa-summary *{
  color:var(--ink) !important;
}
.hb-resa-summary{
  font-family:'Inter', sans-serif;
  line-height:1.7;
}
.hb-summary-total-price,
.hb-summary-bond{
  font-weight:600;
  color:var(--terracotta) !important;
}

/* ============================================
   REVIEW SLIDER OVERRIDES
   WP Airbnb Review Slider renders its own markup via shortcode.
   These are starter overrides so it inherits the site's look —
   inspect its actual output classes in the browser once configured
   and refine these selectors (exact classes depend on the template
   you build in the plugin's settings).
   ============================================ */
.piv-live-reviews {
  --review-accent: var(--gold);
}
.piv-live-reviews img {
  border-radius: 50%;
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */
.newsletter{
  background: var(--stone-dark);
  padding: 50px 0;
}
.newsletter-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.newsletter-inner h3{font-size:21px; font-weight:500; max-width:420px; margin-top:8px;}
.newsletter-form{flex-shrink:0; min-width:280px;}

/* ============================================
   NEWSLETTER OVERRIDES
   MC4WP wraps each field in its own <p>, which stacks them
   vertically by default — this collapses that into one clean
   inline row and hides the redundant "Email address:" text label
   (kept for screen readers via sr-only, since the input's
   placeholder already communicates the same thing visually).
   ============================================ */
.newsletter-form form{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.newsletter-form form p{
  margin:0; display:flex; align-items:center;
}
.newsletter-form label{
  display:flex; align-items:center; gap:0;
}
.newsletter-form label > span,
.newsletter-form label{
  font-size:0; /* hides the "Email address:" text visually */
}
.newsletter-form input[type="email"]{
  font-size:14px; /* restore font-size on the input itself, since label{font-size:0} cascades to it */
  padding:14px 16px; border:1px solid var(--ink-soft); font-family:'Inter', sans-serif;
  min-width:240px;
}
.newsletter-form input[type="submit"]{
  background:var(--gold); color:var(--white); border:none;
  padding:14px 24px; font-family:'Space Mono', monospace; font-size:13px;
  cursor:pointer;
}
.newsletter-form .mc4wp-response{flex-basis:100%; font-size:13px; margin-top:8px;}

/* ============================================
   VILLA PAGE CONTENT TYPOGRAPHY
   Styles whatever gets typed into a villa page's content editor —
   paragraphs, headings, and bullet lists — so it reads like a
   proper page instead of one dense block of text. This replaces
   the formatting Elementor used to provide.
   ============================================ */
.villa-content{line-height:1.7; color:var(--ink-soft);}
.villa-content p{margin-bottom:22px; font-size:16.5px;}
.villa-content h2, .villa-content h3{
  font-family:'Fraunces', serif; color:var(--ink);
  margin:40px 0 18px; font-weight:500;
}
.villa-content h2{font-size:26px;}
.villa-content h3{font-size:20px;}

/* Amenities-style bullet list, recreating Elementor's icon-list look.
   Higher specificity + explicit resets here because WordPress's
   block editor list block (.wp-block-list) ships its own default
   bullet/padding styling that was overriding the simpler version
   of this rule. */
.villa-content ul,
.villa-content ul.wp-block-list{
  list-style:none !important; list-style-type:none !important;
  margin:0 0 28px !important; padding:0 !important;
}
.villa-content ul li,
.villa-content ul.wp-block-list li{
  position:relative; padding-left:26px !important; margin:0 0 10px !important;
  font-size:15.5px; color:var(--ink-soft); list-style:none !important;
}
.villa-content ul li::before,
.villa-content ul.wp-block-list li::before{
  content:'✓';
  position:absolute; left:0; top:2px;
  color:var(--gold); font-weight:700;
}

/* Category heading with icon, e.g. "Bedroom", "Kitchen" — recreates
   the original site's icon+label amenity groups. Use the ready
   Custom HTML snippets provided alongside this update. */
/* Category heading, e.g. "Bedroom", "Kitchen" — recreates the
   original site's amenity groups WITHOUT needing any custom
   HTML/icons pasted in.
   NOTE: villa page content currently goes H1 -> H3 (Bedroom/
   Kitchen/etc, styled below) -> H2 (Your Stay, styled by the plain
   rule above) — skipping H2 entirely, flagged by PageSpeed as
   "headings not sequentially descending". Fixing this properly
   means these category headings need to become real H2s (so the
   page reads H1 -> H2 -> H2 -> H2), but they must keep this same
   small gold label look, NOT the plain 26px serif look the other
   H2s ("Your Stay" etc) already use — so this targets a dedicated
   class instead of the h3 tag. In the editor: change each category
   heading's block to Heading level 2, then add the class
   "amenity-heading" to it via the block's Advanced > Additional
   CSS Class(es) field. */
.villa-content h3,
.villa-content .amenity-heading{
  font-family:'Space Mono', monospace; font-size:13px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
  margin:36px 0 14px; padding-bottom:10px;
  border-bottom:2px solid var(--stone-dark);
}
.amenity-group{margin-bottom:6px;}
.amenity-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:0 50px;
}
@media(max-width:640px){
  .amenity-columns{grid-template-columns:1fr;}
}

/* ============================================
   BOOKING TERMS TEXT
   ============================================ */
.booking-terms{
  max-width:760px; margin:50px auto 0;
  padding-top:40px; border-top:1px solid rgba(251,250,247,0.15);
}
.booking-terms p{
  color:rgba(251,250,247,0.7); font-size:13.5px; line-height:1.7;
  margin-bottom:12px;
}
.booking-terms a{color:var(--gold);}

/* ============================================
   VILLA GALLERY
   Styles WordPress's native Gallery block — just add one directly
   in the villa page's content editor (Add Block > Gallery, then
   select/upload photos). No custom code needed; this only styles
   whatever WordPress already outputs.
   ============================================ */
.villa-content .wp-block-gallery{
  margin:40px 0; gap:10px !important;
}
.villa-content .wp-block-gallery figure img{
  border-radius:2px;
}

/* ============================================
   LOCATION / MAP
   ============================================ */
.location{padding:80px 0; background:var(--stone-dark);}
.location-head{max-width:600px; margin-bottom:34px;}
.location-head h2{font-size:clamp(28px,3.4vw,36px); margin-top:10px;}
.location-head p{color:var(--ink-soft); font-size:14.5px; margin-top:10px;}
.map-embed{
  border:1px solid rgba(0,0,0,0.08);
  filter:grayscale(15%) contrast(1.02);
}
.map-embed iframe{display:block;}
.directions{
  margin-top:24px;
}
.directions .btn-ghost-light{
  margin-top:0;
}
.directions-text{
  color:var(--ink-soft); font-size:14px; line-height:1.6;
  margin-top:16px; max-width:640px;
}

/* ============================================
   SHARE ROW
   ============================================ */
.share-row{
  display:flex; align-items:center; gap:20px;
  padding:20px 0; font-size:13px;
}
.share-label{
  font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
}
.share-row a{
  color:var(--gold); text-decoration:none; border-bottom:1px solid transparent;
}
.share-row a:hover{border-bottom-color:var(--gold);}

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-content{line-height:1.7; color:var(--ink-soft);}
.faq-content h2{
  font-family:'Fraunces', serif; color:var(--ink);
  font-size:26px; font-weight:500;
  margin:44px 0 8px; padding-bottom:12px;
  border-bottom:2px solid var(--stone-dark);
}
.faq-content h2:first-child{margin-top:0;}
.faq-content h3{
  font-family:'Inter', sans-serif; color:var(--ink);
  font-size:17px; font-weight:600;
  margin:26px 0 6px;
}
.faq-content p{font-size:16px; margin-bottom:6px;}
.faq-content a{color:var(--gold); text-decoration:underline;}