/*
Theme Name: NikoStudios
Theme URI: https://nikostudios.com/
Author: NikoStudios
Author URI: https://nikostudios.com/
Description: A fast, modern, mobile-first WordPress theme built for NikoStudios (Lassi, Kefalonia). Rooms/apartments are managed as an easy, editable custom post type with photos, capacity, price note and amenities. Every page (Home, Gallery, Location, Contact) is edited with the normal WordPress block editor.
Version: 1.24.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nikostudios
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* ---------- Design tokens ---------- */
:root{
  /* Palette lifted from the NikoStudios logo (powder blue + slate/teal ink) */
  --color-ink:#2c3e46;
  --color-ink-soft:#5b7280;
  --color-bg:#f5f8f9;
  --color-surface:#ffffff;
  --color-deep:#3e5c6b;
  --color-deep-2:#2f4a57;
  --color-teal:#4a8fb8;
  --color-teal-light:#8fc4dd;
  --color-powder:#bacbd5;
  --color-accent:#2f6c8a;
  --color-accent-dark:#25566d;
  --color-border:#dbe6ea;
  /* Shrunk further on request - "ίσα ίσα να κάνει κούρμπα" (barely enough
     to curve at all): roughly half of what these used to be, so corners
     everywhere (buttons, menu, photo cards, gallery, forms...) read as
     crisp/near-square with just a hint of softening, not rounded. */
  --radius-lg:10px;
  --radius-md:7px;
  --radius-sm:4px;
  --shadow-sm:0 2px 10px rgba(15,45,54,.08);
  --shadow-md:0 12px 32px rgba(15,45,54,.14);
  --shadow-lg:0 24px 60px rgba(15,45,54,.20);
  --container:1240px;
  --font:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Font: Jost (regular, 400) ----------
   Bundled with the theme (assets/fonts) so the site never calls out to
   Google Fonts - faster, and no third-party request for visitors.
   SIL Open Font License - see assets/fonts/JOST-LICENSE.txt. */
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/jost-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/jost-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--color-ink);
  background:var(--color-bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
button{font-family:inherit;}
/* font-weight:400 is deliberate, not a placeholder: only the Regular
   (400) weight of Jost is actually bundled in assets/fonts (see the
   @font-face rules above) to keep the site fast and free of external
   font calls. Asking for 700 here (as this used to) has no matching
   file, so the browser "faux-bolds" the regular glyphs by smearing/
   thickening them on the fly - at the large hero heading size that's
   exactly what reads as too heavy and glued-together. Using the
   weight that's actually loaded renders crisp letterforms instead,
   on every heading (hero included) without adding a second font file. */
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:400;letter-spacing:-.01em;}
h1{font-size:clamp(2.1rem,5vw,3.4rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;color:var(--color-ink-soft);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:16px;top:16px;background:#fff;padding:10px 16px;border-radius:8px;z-index:999;}

section{padding:72px 0;}
.section--tight{padding:48px 0;}
.section--alt{background:var(--color-surface);}
.eyebrow{
  display:inline-block;color:var(--color-accent-dark);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.8rem;margin-bottom:10px;
}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center;}
.section-head p{margin:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:var(--radius-sm);
  font-weight:600;font-size:.98rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--color-deep-2);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-light{background:#fff;color:var(--color-deep-2);box-shadow:var(--shadow-sm);}
.btn-light:hover{background:var(--color-teal-light);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
.btn-outline{background:transparent;color:var(--color-deep);border-color:var(--color-border);}
.btn-outline:hover{border-color:var(--color-deep);}

/* ---------- Top bar (phone / WhatsApp, always visible) ---------- */
.top-bar{
  background:var(--color-deep-2);color:#fff;position:sticky;top:0;z-index:51;
}
.top-bar .container{display:flex;align-items:center;justify-content:flex-start;gap:22px;height:38px;}
.top-bar__link{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;font-size:.82rem;white-space:nowrap;}
.top-bar__link svg{width:15px;height:15px;flex-shrink:0;fill:currentColor;}
.top-bar__link .tb-label{opacity:.82;font-weight:500;}
.top-bar__whatsapp svg{color:#4fce8e;}
.top-bar__link:hover{opacity:.85;}
@media (max-width:560px){
  .top-bar .container{gap:14px;}
  .top-bar__whatsapp .tb-label{display:none;}
}
@media (max-width:380px){
  .top-bar__link .tb-label{display:none;}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:38px;z-index:50;background:rgba(245,248,249,.92);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--color-border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:78px;padding-top:10px;padding-bottom:10px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--color-deep-2);}
.brand img{width:60px;height:60px;border-radius:0;}
.primary-nav{display:none;}
.primary-nav ul{display:flex;gap:6px;align-items:center;}
.primary-nav a{
  padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;color:var(--color-ink);font-size:.96rem;
}
.primary-nav a:hover,.primary-nav .current-menu-item>a{background:var(--color-deep-2);color:#fff;}
.header-cta{display:none;}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--color-border);background:#fff;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--color-ink);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--color-ink);}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;background:var(--color-deep-2);
  color:#fff;z-index:99;padding:28px 24px;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;
}
/* No display:none here on purpose: the panel is always in the DOM but
   pushed off-canvas by the transform above, so toggling .is-open can
   animate it sliding in/out. (Setting display:none would have quietly
   overridden the transform and made the menu impossible to open.) */
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav ul{display:flex;flex-direction:column;gap:4px;margin-top:40px;}
.mobile-nav a{display:block;padding:14px 8px;font-weight:600;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.12);}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,45,54,.45);z-index:98;}
.nav-backdrop.is-open{display:block;}
body.nav-is-open{overflow:hidden;}

@media (min-width:960px){
  .primary-nav{display:block;}
  .header-cta{display:inline-flex;}
  .nav-toggle,.mobile-nav,.nav-backdrop{display:none !important;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;min-height:82vh;display:flex;align-items:center;overflow:hidden;
}
.hero-slider{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-slider .slide{
  position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;animation:ns-kenburns 16s infinite;will-change:opacity,transform;
}
.hero-slider .slide--1{animation-delay:0s;}
.hero-slider .slide--2{animation-delay:-8s;}
.hero-video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  display:none; /* only switched on by JS, once it decides a real video should load - see main.js */
}
.hero.has-hero-video .hero-slider{display:none;}
.hero.has-hero-video .hero-video{display:block;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  /* Lighter than before on purpose: this used to run .55 to .80 opacity,
     dark enough to leave the actual photo looking muddy/washed out
     rather than "clear". text-shadow on .hero-content (below) picks up
     the contrast this gives up, so the white text stays legible over a
     bright sky or sea without needing such a heavy wash on the photo. */
  background:linear-gradient(180deg,rgba(15,28,34,.22),rgba(15,28,34,.52));
}
@keyframes ns-kenburns{
  0%{opacity:0;transform:scale(1);}
  4%{opacity:1;}
  46%{opacity:1;}
  50%{opacity:0;transform:scale(1.12);}
  100%{opacity:0;transform:scale(1.12);}
}
@media (prefers-reduced-motion: reduce){
  .hero-slider .slide{animation:none;opacity:0;transform:scale(1);}
  .hero-slider .slide--1{opacity:1;}
}
.hero .container{position:relative;z-index:2;padding-top:60px;padding-bottom:60px;}
.hero-content{max-width:720px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.hero .eyebrow{color:var(--color-teal-light);}
.hero p.lead{color:rgba(255,255,255,.92);font-size:1.15rem;max-width:560px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.hero-stats{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;}
.hero-stats .hero-stat{
  display:flex;flex-direction:column;gap:4px;min-width:100px;
  color:inherit;text-decoration:none;
}
.hero-stats strong{font-size:1.6rem;line-height:1.2;color:var(--color-teal-light);}
.hero-stats span{font-size:.85rem;color:rgba(255,255,255,.8);}
a.hero-stat{transition:opacity .15s ease;}
a.hero-stat:hover{opacity:.8;}
a.hero-stat:hover span{text-decoration:underline;}

/* ---------- Page content (the editable text typed/pasted in the normal
   WordPress block editor - Pages, and the left column of the Location
   page) - headings, paragraphs and bullet lists all need a bit of their
   own spacing/markers here because of the site-wide "ul{margin:0;
   padding:0}" reset above, which otherwise leaves a plain bullet list
   with no marker and no indent. */
.entry-content h2,.entry-content h3{margin-top:1.3em;}
.entry-content h2:first-child,.entry-content h3:first-child{margin-top:0;}
.entry-content p{margin-bottom:1.1em;}
.entry-content ul{list-style:disc;padding-left:1.25em;margin:0 0 1.1em;}
.entry-content ul li{margin-bottom:.5em;color:var(--color-ink-soft);}
.entry-content ul li::marker{color:var(--color-accent);}
.entry-content ol{padding-left:1.25em;margin:0 0 1.1em;}
.entry-content strong{color:var(--color-deep-2);}
.entry-content > *:last-child{margin-bottom:0;}

/* ---------- Intro / About ---------- */
.intro{display:grid;gap:36px;align-items:center;}
.intro figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
@media (min-width:900px){
  .intro{grid-template-columns:1fr 1fr;}
}
.intro h3{margin-top:0;}
/* Small callout under the About paragraphs (e.g. "Independent Living: ...") -
   a touch more noticeable than plain body text, without looking like a
   button or an alert. */
.feature-highlight{
  display:flex;gap:14px;align-items:flex-start;margin-top:22px;
  background:var(--color-bg);border-left:3px solid var(--color-accent);
  border-radius:var(--radius-sm);padding:14px 18px;font-size:.95rem;
}
.feature-highlight__icon{font-size:1.3rem;line-height:1;flex-shrink:0;}
.feature-highlight strong{color:var(--color-deep-2);}

/* "Explore Kefalonia" 2x2 feature-card grid on the homepage */
.explore-grid{list-style:none;display:grid;gap:18px;grid-template-columns:1fr;margin:0;padding:0;}
@media (min-width:700px){.explore-grid{grid-template-columns:repeat(2,1fr);}}
.explore-grid li{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);
}
.explore-grid__icon{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--color-bg);
  color:var(--color-deep-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.explore-grid h4{margin:0 0 6px;font-size:1.02rem;color:var(--color-deep-2);}
.explore-grid p{margin:0;font-size:.92rem;color:var(--color-ink-soft);}

/* ---------- Rooms grid ---------- */
/* Flexbox, not CSS grid, on purpose: with a fixed 4-column grid, 3 rooms
   (or any count that isn't a multiple of the column count) fill columns
   1-3 and leave column 4 empty, so the row reads as pushed to the left
   instead of centered. Flex-wrap + justify-content:center centers
   whatever is left on the last row automatically, for any number of
   rooms, while each card still keeps the same 1 / 2 / 4-per-row widths
   as before at each breakpoint. */
.rooms-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;}
.rooms-grid > .room-card{flex:1 1 100%;}
@media (min-width:700px){.rooms-grid > .room-card{flex-basis:calc(50% - 13px);max-width:calc(50% - 13px);}}
@media (min-width:1100px){.rooms-grid > .room-card{flex-basis:calc(25% - 19.5px);max-width:calc(25% - 19.5px);}}
.room-card{
  background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;
}
.room-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.room-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-deep);}
.room-card__media img{width:100%;height:100%;object-fit:cover;}
.room-card__price{
  position:absolute;bottom:12px;left:12px;background:rgba(15,45,54,.85);color:#fff;font-weight:700;
  font-size:.82rem;padding:6px 12px;border-radius:999px;
}
.room-card__body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.room-card__meta{display:flex;gap:14px;color:var(--color-ink-soft);font-size:.86rem;margin:8px 0 12px;flex-wrap:wrap;}
.room-card__meta span{display:inline-flex;align-items:center;gap:6px;}
.room-card__body .btn{margin-top:auto;align-self:flex-start;}

/* ---------- Rooms page (the listing of all rooms) ---------- */
/* Same slow 2-photo zoom/fade as the homepage hero (re-uses .hero-slider/
   .slide/@keyframes ns-kenburns above), just shorter and in its own
   classes so it never touches the plain .room-hero band below, still
   used on each individual room's own page. */
.rooms-hero{
  position:relative;color:#fff;min-height:56vh;display:flex;align-items:center;overflow:hidden;
}
.rooms-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,28,34,.25),rgba(15,28,34,.58));
}
.rooms-hero .container{position:relative;z-index:2;padding-top:56px;padding-bottom:56px;}
.rooms-hero__content{max-width:680px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.rooms-hero .eyebrow{color:var(--color-teal-light);}
.rooms-hero p.lead{color:rgba(255,255,255,.92);font-size:1.1rem;max-width:620px;margin-top:10px;}

/* ---------- Room single ---------- */
.room-hero{background:var(--color-deep-2);color:#fff;padding:56px 0 40px;}
.room-hero .eyebrow{color:var(--color-teal-light);}
/* A plain, evenly-wrapping grid on purpose - not a fixed "1 big + 4
   small" layout. That old layout used an explicit 2-row/3-column
   template matched to exactly 5 photos (1 spanning + 4 plain): any room
   with a different photo count (fewer or more) left an empty gap where
   an unfilled cell used to be, and/or made a later photo look like a
   second "big" one just from sitting in the wide first column - exactly
   the bug reported on the Superior Apartment NIKOS room page. This
   version works the same, correctly, for any number of photos (1, 3, 6,
   20...): it just wraps to a new row with no gaps and no special-cased
   first photo. */
.room-gallery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:-24px auto 0;max-width:var(--container);padding:0 24px;}
@media (min-width:700px){.room-gallery{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1100px){.room-gallery{grid-template-columns:repeat(4,1fr);}}
.room-gallery a{display:block;border-radius:var(--radius-md);overflow:hidden;position:relative;aspect-ratio:4/3;}
.room-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.room-gallery a:hover img{transform:scale(1.05);}
.room-detail{display:grid;gap:40px;margin-top:48px;}
@media (min-width:900px){.room-detail{grid-template-columns:2fr 1fr;}}
.room-facts{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0;}
.room-facts li{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 14px;font-size:.92rem;}
.room-facts li strong{display:block;color:var(--color-deep-2);}
.amenities-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.amenities-list li{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.92rem;}
.amenities-list .amenity-icon{font-size:1.05rem;line-height:1;}
/* .room-aside stacks the booking card and the "Good to know" policy
   card in the narrow right-hand column of .room-detail. It - not
   .booking-card - is the direct grid child now, so align-self:start
   (keep this column from stretching to match the taller left column)
   lives here instead. */
.room-aside{display:flex;flex-direction:column;gap:20px;align-self:start;}
.booking-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);}
.booking-card .price{font-size:1.6rem;font-weight:800;color:var(--color-deep-2);}
.booking-card .btn{width:100%;justify-content:center;margin-top:16px;}
.policy-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow-sm);}
.policy-card h3{margin:0 0 4px;font-size:1.05rem;color:var(--color-deep-2);}
.policy-card .info-list{margin:16px 0 0;gap:12px;}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,20,22,.92);z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:min(92vw,1100px);max-height:88vh;border-radius:10px;}
.lightbox-close{position:absolute;top:20px;right:24px;color:#fff;font-size:2rem;background:none;border:0;cursor:pointer;line-height:1;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:999px;font-size:1.4rem;cursor:pointer;}
.lightbox-prev{left:18px;}.lightbox-next{right:18px;}

/* ---------- Gallery page ---------- */
/* Full-width photo hero, same idea/styling as .location-hero below (own
   classes, so the two never affect each other - e.g. the owner could
   want one lighter/darker than the other later without touching both). */
.gallery-hero{
  position:relative;color:#fff;min-height:58vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;overflow:hidden;
}
.gallery-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,45,54,.15),rgba(15,45,54,.5));
}
.gallery-hero__content{position:relative;padding:64px 0 48px;max-width:640px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.gallery-hero .eyebrow{color:var(--color-teal-light);}
.gallery-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);}
@media (min-width:700px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1100px){.gallery-grid{grid-template-columns:repeat(4,1fr);}}
.gallery-grid figure{margin:0;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1/1;}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.gallery-grid a:hover img{transform:scale(1.06);}

/* ---------- Location / Contact ---------- */
.split{display:grid;gap:36px;}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;}}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:0;width:100%;min-height:380px;}
.info-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin:20px 0;}
.info-list li{display:flex;gap:14px;align-items:flex-start;}
.info-list .dot{width:10px;height:10px;border-radius:50%;background:var(--color-accent);margin-top:8px;flex-shrink:0;}

/* Location page: full-width photo hero (own classes, so it never affects
   the plain .room-hero band still used by Contact/Gallery/Rooms). */
.location-hero{
  position:relative;color:#fff;min-height:58vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;overflow:hidden;
}
.location-hero::before{
  content:"";position:absolute;inset:0;
  /* Lighter than before on purpose - same fix as the homepage hero
     overlay: this used to run .35 to .88 opacity, dark enough to make
     the photo itself look muddy. text-shadow on .location-hero__content
     (below) picks up the contrast this gives up, so the white text
     stays legible without needing such a heavy wash on the photo. */
  background:linear-gradient(180deg,rgba(15,45,54,.15),rgba(15,45,54,.5));
}
.location-hero__content{position:relative;padding:64px 0 48px;max-width:640px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.location-hero .eyebrow{color:var(--color-teal-light);}
.location-hero p.lead{color:rgba(255,255,255,.92);margin-top:10px;}
.location-hero .hero-actions{margin-top:26px;}

/* Nicer icon cards for the address/phone/email list on the Location page */
.info-list--cards li{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm);
}
.info-list__icon{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--color-bg);
  color:var(--color-deep-2);display:flex;align-items:center;justify-content:center;
}
.location-badge{
  display:inline-flex;flex-direction:column;gap:2px;margin-top:22px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:14px 22px;box-shadow:var(--shadow-sm);
}
.location-badge strong{font-size:1.4rem;color:var(--color-deep-2);}
.location-badge span{font-size:.85rem;color:var(--color-ink-soft);}

/* Optional "walk to the beach" video card - replaces .location-badge when
   a video is set in Customize > NikoStudios Settings. Widescreen (16:9),
   full column width - suits drone/scenic footage better than a tall
   phone-style crop. Caption sits top-left (not bottom) so it doesn't
   collide with a watermark some videos already have baked in at the
   bottom of the frame. */
#ns-beach-fact{scroll-margin-top:130px;} /* so the sticky header doesn't cover it when linked to with #ns-beach-fact */
.location-video{
  position:relative;width:100%;aspect-ratio:16/9;margin-top:22px;
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);
  background:var(--color-bg);
}
.location-video video{width:100%;height:100%;object-fit:cover;display:block;}
.location-video__caption{
  position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);
  background:rgba(15,45,54,.82);color:#fff;font-weight:700;font-size:.82rem;
  padding:6px 12px;border-radius:999px;
}
.location-video__toggle{
  position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(15,45,54,.72);color:#fff;border:0;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .15s ease;padding:0;
}
.location-video__toggle:hover{background:rgba(15,45,54,.92);}

/* ---------- Rooms page: 360 virtual tour (click-to-load) ---------- */
/* Only ever a photo + button until clicked - see main.js. This keeps the
   Rooms page exactly as fast as it is today for every visitor who
   doesn't open the tour, and even for the ones who do, nothing from the
   tour provider loads until that click. */
.tour-360{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.tour-360::before{
  content:"";position:absolute;inset:0;background:rgba(11,32,38,.38);transition:background .15s ease;
}
.tour-360:hover::before{background:rgba(11,32,38,.5);}
.tour-360__btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:var(--color-deep-2);border:0;border-radius:var(--radius-sm);
  padding:14px 26px;font-weight:700;font-size:1rem;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .15s ease;
}
.tour-360__btn:hover{transform:scale(1.04);}
.tour-360__icon{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--color-teal);color:#fff;flex-shrink:0;
}
.tour-360__icon svg{margin-left:2px;}
.tour-360 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* Homepage: up to 3 tour-360 cards side by side, under "View full gallery" */
.tours-360-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.tours-360-grid__item h3{font-size:1.05rem;margin:0 0 10px;}
@media (max-width:640px){
  .tours-360-grid{grid-template-columns:1fr;}
}

.contact-form{display:grid;gap:14px;background:var(--color-surface);padding:28px;border-radius:var(--radius-lg);border:1px solid var(--color-border);}
.contact-form label{font-weight:600;font-size:.92rem;display:block;margin-bottom:6px;}
.contact-form input,.contact-form textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--color-border);font-family:inherit;font-size:1rem;background:#fff;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--color-teal-light);}
.form-notice{padding:12px 16px;border-radius:var(--radius-sm);font-weight:600;margin-bottom:6px;}
.form-notice--ok{background:#e5f4ea;color:#1f6d3a;}
.form-notice--err{background:#fbe7e7;color:#a12626;}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--color-deep-2),var(--color-teal));color:#fff;text-align:center;border-radius:var(--radius-lg);padding:56px 24px;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.88);}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-deep-2);color:rgba(255,255,255,.85);padding:56px 0 26px;margin-top:60px;}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media (min-width:800px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;}}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px;}
.site-footer a:hover{color:var(--color-teal-light);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.6);}
.footer-nav ul{display:flex;flex-direction:column;gap:8px;}
.footer-quicklinks{display:flex;flex-direction:column;gap:10px;}
.footer-quicklink{
  display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:.92rem;
  padding:10px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  transition:background .15s ease,transform .15s ease;
}
.footer-quicklink:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px);}
.footer-quicklink__icon{display:inline-flex;width:20px;height:20px;flex-shrink:0;color:var(--color-teal-light);}
.footer-quicklink__icon svg{width:100%;height:100%;}
/* Most logos are drawn for a light background and get hard to read on the
   dark footer, whatever their own colors are - this light rounded panel
   guarantees contrast without needing a special footer-only logo file
   (though ns_footer_logo, above, still lets the owner supply one). */
.brand--footer{display:inline-flex;align-items:center;background:rgba(255,255,255,.95);padding:10px 16px;border-radius:14px;width:fit-content;}
.footer-widgets{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,.14);margin-top:12px;padding-top:28px;display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:800px){.footer-widgets{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}}
.footer-widgets .footer-widget:last-child{margin-bottom:0;}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.badge{display:inline-block;background:var(--color-teal-light);color:#06282f;font-weight:700;font-size:.76rem;padding:4px 10px;border-radius:999px;}
.wp-block-gallery{border-radius:var(--radius-md);}
.alignwide,.alignfull{max-width:var(--container);margin-left:auto;margin-right:auto;}