/*
Theme Name: Premium Villas Sicily
Theme URI: https://premiumvillassicily.com
Author: Premium Villas Sicily
Description: Custom theme for Premium Villas Sicily — three private villas sharing one 30,000m² estate in San Cataldo, near Terrassini, Sicily. Built to work with the HBook booking plugin.
Version: 2.2
Text Domain: pvs-theme

Changelog:
v1.1 - Added GA4 tracking (G-EV3Z0ZWSRH) to header.php
v1.2 - Replaced text site title with PVS logo image (max-height:80px) in header.php, linked to homepage
v1.3 - Replaced text site title with PVS logo image (max-height:50px) in footer.php, linked to homepage
v1.4 - Rebuilt template-villa.php with full baked-in content (intro, highlights, gallery,
       shared estate copy, house rules, HBook shortcode, map coords) for Villa Exotica,
       Villa Sensi and Villa Majestic, using real photography throughout. Updated
       homepage hero image to real photography. Added .villa-gallery and .rules-list CSS.
v1.5 - Made hero images lazy-loaded (homepage + all 3 villa pages), matching "all images
       lazy loaded" applied literally. Was previously eager-loaded for LCP performance.
v1.6 - Changed homepage hero image from IMG_0216 (pool/mountains) to IMG_0208
       (pool/sea view) in front-page.php; updated alt text to match.
v1.7 - Replaced all remaining SVG placeholders on the homepage with real photography
       (infinity pool, estate, private beach, villa cards, area teaser). Fixed a
       mobile horizontal-overflow bug: added html/body overflow-x:hidden + max-width:100%,
       and removed .newsletter-form's fixed min-width (280px, flex-shrink:0) which was
       wider than the content area on narrow phones. Recoloured .villa-tag ("SAN CATALDO"
       badge) to #2c1810 background / #c9a96e text.
v1.8 - Changed header.php's ENQUIRE button link from /contact to /contact-us/.
v1.9 - Updated all remaining /contact links to /contact-us/ across the theme:
       template-faq.php ("get in touch"), header.php (fallback nav "Contact" link),
       front-page.php ("Ask about multiple villas"), footer.php ("Contact form").
       template-villa.php had no /contact link (only a mailto: link) — no change needed there.
v2.0 - Rebuilt template-faq.php as accordion Q&A (native details/summary, 4 categories,
       14 questions), added .faq-accordion CSS. Rewrote template-area.php with 7
       destination write-ups (Palermo, Mondello, Scopello & Zingaro, Segesta, Cefalù,
       Erice, Corleone) in a new .destination-grid card layout (placeholder images,
       real photography pending), added .destination-card/.destination-photo/
       .destination-body CSS. Created template-villas.php, a new "Our Villas" parent
       page (hero, intro, 3 villa cards with real photography, shared-facilities list).
       Updated template-contact.php: added intro copy, set WPForms shortcode to
       id="38", added phone number, replaced the per-villa search links with a single
       availability-search link to the homepage's HBook booking section (/#book).
       Confirmed no remaining /contact links anywhere in the theme (all /contact-us/).
v2.1 - Pointed "Our Villas" nav links at the new /our-villas/ page instead of the
       homepage's #villas anchor: header.php's fallback nav and footer.php's "All
       villas" link. Left front-page.php's "View the villas"/"See the villas" buttons
       on the #villas in-page anchor, since those scroll within the homepage itself.
v2.2 - Replaced footer.php's MC4WP/Mailchimp newsletter shortcode with Brevo's
       ([sibwp_form id=1]); documented the plain-HTML fallback form in a comment in
       case the Brevo plugin isn't active. Updated the footer copyright line to
       "Premium Villas Sicily. Website by Neil Hanley." (kept the year dynamic via
       date('Y') rather than hardcoding 2026, so it won't go stale next year).
*/

/* Fonts are loaded via functions.php (preconnect + async) instead of
   @import here — @import is render-blocking. */

: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;}
html, body{
  overflow-x:hidden;
  max-width:100%;
}
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
   This is a fallback/standalone banner. If WPConsent is installed and
   active (recommended), its own banner and consent-blocking take over
   instead — don't run both at once, or visitors see two banners. */
.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;
}
#pvs-cookie-decline{
  background:transparent; border:1px solid rgba(251,250,247,0.4); color:var(--white);
}
#pvs-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{max-height:80px; width:auto; display:block;}
.logo-mark.footer-mark{max-height:50px; width:auto; 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) hidden by default, shown
   as a dropdown on hover. */
.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, appears below the 900px
   breakpoint where .nav-links becomes 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;
  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{
  /* Feathered dark scrim behind the hero text block, independent of
     the gradient overlay and each photo's own brightness — a fixed,
     reliable contrast layer rather than one that depends on the photo. */
  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;}

/* 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:#2c1810; color:#c9a96e;
  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:14px; color:var(--terracotta);}
.villa-price span{font-family:'Space Mono', monospace; font-size:10px; color:var(--ink-soft);}

/* shared-estate cross-sell banner */
.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%;}
.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;}
/* Shown until real guest reviews exist (no active listings yet) —
   remove this block once the WP Airbnb Review Slider shortcode is
   pasted in (see front-page.php / template-villa.php). */
.reviews-placeholder{
  grid-column:1/-1;
  background:var(--stone);
  border:1px dashed var(--line);
  padding:44px 30px;
  text-align:center;
  color:var(--ink-soft);
  font-size:15px;
}
.reviews-placeholder strong{color:var(--ink); display:block; margin-bottom:8px; font-family:'Fraunces', serif; font-size:19px; font-weight:500;}

/* AREA TEASER (homepage) */
.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;}

/* DESTINATION CARDS (Exploring the Area page) — same visual language
   as .villa-card (white card, badge tag over the photo), reused here
   for non-linking destination write-ups. */
.destination-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
.destination-card{
  background:var(--white);
  border:1px solid var(--stone-dark);
  overflow:hidden;
}
.destination-photo{height:230px; position:relative;}
.destination-body{padding:22px 24px 26px;}
.destination-name{font-family:'Fraunces', serif; font-size:20px; margin-bottom:10px;}
.destination-body p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0;}
@media(max-width:760px){
  .destination-grid{grid-template-columns:1fr;}
}

/* pool / beach highlight rows — reuse the island-grid pattern twice */
.highlight-row{padding:60px 0; background:var(--stone);}
.highlight-row:nth-child(even){background:var(--stone-dark);}
.highlight-row .island-grid.reverse{direction:rtl;}
.highlight-row .island-grid.reverse > *{direction:ltr;}

/* 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;
  flex-wrap:wrap; gap:10px;
}

@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{flex-direction:column; align-items:flex-start; gap:14px;}
  .section-head p{max-width:100%;}
  .island-grid{grid-template-columns:1fr;}
  .highlight-row .island-grid.reverse{direction:ltr;}
  .footer-grid{grid-template-columns:1fr;}
  .contact-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%;}
  .nav-links > li > a{
    display:block; padding:14px 32px;
    border-top:1px solid rgba(251,250,247,0.08);
  }
  .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;}
  /* .newsletter-form's min-width (280px) + flex-shrink:0 is wider than
     the content area on narrow phones (e.g. 320px screen − 64px .wrap
     padding = 256px available) — was forcing horizontal page overflow. */
  .newsletter-form{flex-shrink:1; min-width:0; width:100%;}
  .newsletter-form input[type="email"]{min-width:0; width:100%;}
}

/* ============================================
   HBOOK OVERRIDES
   HBook renders its own form/calendar markup via shortcode. These
   make it sit visually inside the dark .booking-section panel —
   inspect HBook's actual output classes in the browser once live
   and refine these selectors if your HBook version differs.
   ============================================ */
.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;
}
.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 renders <img class="hb-accom-img">
   with inline width="300" height="300" attributes — the theme's
   global img{width:100%; height:100%;} rule above would otherwise
   stretch each thumbnail to fill its container. This caps it back
   to a sane thumbnail size. */
.hb-accom-img{
  width:100% !important;
  max-width:300px !important;
  height:200px !important;
  object-fit:cover !important;
}
/* HBook's result-card text ships with its own pale default text
   colour, meant for a dark background — forcing it to the theme's
   ink colours instead so it's legible on the light card background. */
.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;
}
.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.
   Starter overrides so it inherits the site's look — inspect its
   actual output classes once a template is built in the plugin's
   settings and refine these selectors.
   ============================================ */
.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;}

/* MC4WP wraps each field in its own <p>, stacking vertically by
   default — collapses that into one clean inline row and hides the
   redundant "Email address:" text label (kept for screen readers,
   since the input's placeholder 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 */
  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 — and is also reused for
   the baked-in "shared estate" section in template-villa.php.
   ============================================ */
.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;}

/* Amenities-style bullet list. Higher specificity + explicit resets
   because WordPress's block editor list block (.wp-block-list) ships
   its own default bullet/padding styling that would otherwise win. */
.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. "Bedrooms", "Bathrooms", "Outdoor
   Space" — use a plain H3 block with the category name as the text,
   no custom HTML/icons needed. */
.villa-content h3{
  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;}
}

/* House rules — same checkmark-list base as .villa-content ul, but a
   dash instead of a checkmark since these are conditions, not
   included amenities. */
.villa-content .rules-list li::before{
  content:'–';
}

/* Baked-in villa photo gallery (template-villa.php's $villa['gallery']
   array) — plain <img> grid, not WordPress's Gallery block, so styled
   separately from "VILLA GALLERY" below. */
.villa-gallery{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px; margin:24px 0 40px;
}
.villa-gallery img{height:230px; border-radius:2px;}

/* ============================================
   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 — add one directly in the
   villa page's content editor (Add Block > Gallery). 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;}

/* ============================================
   SHARE ROW
   ============================================ */
.share-row{
  display:flex; align-items:center; gap:20px;
  padding:20px 0; font-size:13px;
  flex-wrap:wrap;
}
.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;}

/* Accordion — native <details>/<summary>, no JS required. */
.faq-accordion{margin-bottom:8px;}
.faq-item{
  border-bottom:1px solid var(--stone-dark);
  padding:16px 0;
}
.faq-item summary{
  cursor:pointer;
  font-family:'Inter', sans-serif; font-weight:600; font-size:16px;
  color:var(--ink);
  list-style:none;
  position:relative;
  padding-right:32px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  position:absolute; right:0; top:-2px;
  color:var(--gold); font-size:22px; font-weight:400;
}
.faq-item[open] summary::after{content:'\2013';}
.faq-item p{margin:12px 0 0; font-size:15.5px;}

/* ============================================
   CONTACT PAGE / WPFORMS OVERRIDES
   WPForms Lite renders its own markup via shortcode. Starter
   overrides so its form sits inside the theme's light card panel and
   inherits the site's type/colour system — inspect the plugin's
   actual output classes once a form is built in wp-admin and refine
   these selectors if needed.
   ============================================ */
.contact{padding:100px 0; background:var(--stone);}
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start;}
.contact-form-panel{background:var(--white); padding:34px; border:1px solid var(--stone-dark);}
.contact-details h3{font-size:15px; margin-bottom:10px;}
.contact-details .footer-links{margin-bottom:34px;}
.contact-details .footer-links a{color:var(--ink-soft);}
.contact-details .footer-links a:hover{color:var(--terracotta);}

.contact-form-panel .wpforms-container{margin:0 !important;}
.contact-form-panel .wpforms-field{margin-bottom:18px !important;}
.contact-form-panel .wpforms-field label,
.contact-form-panel .wpforms-field-label{
  font-family:'Space Mono', monospace !important; font-size:11px !important;
  letter-spacing:0.08em !important; text-transform:uppercase;
  color:var(--ink-soft) !important; font-weight:400 !important;
  margin-bottom:6px !important;
}
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel select,
.contact-form-panel textarea{
  border-color:var(--stone-dark) !important;
  border-radius:2px !important;
  font-family:'Inter', sans-serif !important;
  color:var(--ink) !important;
  padding:12px 14px !important;
}
.contact-form-panel .wpforms-submit-container button,
.contact-form-panel button[type="submit"],
.contact-form-panel .wpforms-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;
}