/* ============================================================
   VILLA IMPERIAL - PUBLIC SITE
   ------------------------------------------------------------
   Separate from the admin panel's stylesheet on purpose. The
   panel is tuned for dense data on a 1366px screen; this is a
   guest-facing site where photography leads and the type has
   room to breathe.

   The brand colours are the same brass and sand as the admin
   theme, so the two read as one business.
   ============================================================ */

:root {
  --sand:        #fbf8f3;
  --paper:       #ffffff;
  --sunken:      #f4efe7;
  --line:        #e6ded1;
  --ink:         #2b241e;
  --ink-mid:     #6b5f52;
  --ink-dim:     #8b8073;
  --brass:       #8c6630;
  --brass-deep:  #674c23;
  --brass-soft:  #f6efe3;
  --forest:      #3f6b4f;
  --on-dark:     #f4ece1;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gap:  clamp(3rem, 7vw, 6rem);

  /* ----------------------------------------------------------------
     Theme surface tokens. A theme stylesheet redefines these to change
     the look without touching a single rule below. Anything a theme
     might reasonably want to restyle lives here rather than being
     hardcoded into the component.
     ---------------------------------------------------------------- */
  --header-bg:    rgba(251, 248, 243, 0.92);
  --header-blur:  saturate(140%) blur(10px);
  --hero-grad:    linear-gradient(150deg, #3a2f22 0%, #6b5030 55%, #8c6630 100%);
  /* Two stops so hero text keeps its contrast at the top of the image too. */
  --hero-tint-top: rgba(28, 22, 16, 0.30);
  --hero-tint:     rgba(28, 22, 16, 0.66);
  --radius:       12px;
  --radius-sm:    8px;
  --card-shadow:  none;
  --card-shadow-hover: 0 10px 28px rgba(43, 36, 30, 0.10);
  --btn-radius:   8px;
  --display-caps: none;     /* themes may set uppercase + tracking */
  --display-track: normal;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brass-deep); text-underline-offset: 3px; }
a:hover { color: var(--brass); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; }
.lede { font-size: 1.12rem; color: var(--ink-mid); max-width: 62ch; }

/* --- skip link ------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 12px; top: 12px; }

/* --- header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: var(--header-blur);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { height: 40px; width: auto; border-radius: 4px; }
.brand-name {
  font-family: var(--display); font-size: 1.22rem; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.1;
}
.brand-tag { font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.04em; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  padding: 8px 12px; border-radius: 6px; text-decoration: none;
  color: var(--ink-mid); font-size: 0.95rem; font-weight: 500;
}
.site-nav a:hover { background: var(--brass-soft); color: var(--brass-deep); }
.site-nav a[aria-current="page"] { color: var(--brass-deep); background: var(--brass-soft); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 22px; border-radius: var(--btn-radius); border: 1px solid transparent;
  font-family: var(--body); font-size: 0.96rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn-primary { background: var(--brass); color: #fff; }
.btn-primary:hover { background: var(--brass-deep); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-deep); }
.btn-light { background: rgba(255,255,255,.94); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-sm { padding: 8px 14px; font-size: .88rem; }

/* mobile nav */
.nav-toggle { display: none; background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px; }
}

/* --- sections -------------------------------------------------------- */
.section { padding: var(--gap) 0; }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: 2.2rem; max-width: 62ch; }
.section-head p { color: var(--ink-mid); margin: .6rem 0 0; }

/* --- hero ------------------------------------------------------------ */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(420px, 62vh, 640px);
  background: var(--hero-grad);
  color: var(--on-dark); overflow: hidden;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--hero-tint-top) 0%, var(--hero-tint) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 3rem; padding-bottom: 3rem; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero p { color: rgba(255,255,255,.92); font-size: 1.15rem; max-width: 46ch; margin-top: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }

/* --- cards ----------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--brass); }
.card-photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--sunken); }

/* Placeholder when no photograph has been uploaded yet. Deliberately looks
   deliberate -- a broken image icon on a guest-facing page reads as neglect. */
.card-photo--empty {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--sunken) 0 12px, #efe8dc 12px 24px);
  color: var(--ink-dim); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { margin: 0; }
.card-body p { margin: 0; color: var(--ink-mid); font-size: .95rem; }
.card-foot {
  margin-top: auto; padding-top: 14px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 10px;
}
.price { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--brass-deep); }
.price small { font-family: var(--body); font-size: .74rem; color: var(--ink-dim); font-weight: 400; }

.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: .74rem; padding: 3px 9px; border-radius: 999px;
  background: var(--brass-soft); color: var(--brass-deep); border: 1px solid #ead9bd;
}

/* --- prose ----------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin: 1.8rem 0 .7rem; }
.prose h3 { margin: 1.4rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--brass); color: var(--ink-mid); font-style: italic;
}
.prose code {
  background: var(--sunken); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 4px; font-size: .9em;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* --- feature list ---------------------------------------------------- */
.features { columns: 2; column-gap: 40px; }
.features ul { list-style: none; padding: 0; margin: 0; }
.features li {
  break-inside: avoid; padding: 8px 0 8px 26px; position: relative; color: var(--ink-mid);
}
.features li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
}
@media (max-width: 640px) { .features { columns: 1; } }

/* --- gallery --------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 10px; }
.gallery img { aspect-ratio: 1; width: 100%; object-fit: cover; transition: transform 400ms ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(24,18,12,.78));
  color: #fff; font-size: .82rem;
}

/* --- call to action -------------------------------------------------- */
.cta {
  background: linear-gradient(140deg, var(--brass-deep), var(--brass));
  color: #fff; border-radius: 14px; padding: clamp(2rem, 5vw, 3.4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.9); margin: .5rem 0 0; max-width: 46ch; }

/* --- contact --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-list .label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-dim); display: block;
}
.contact-list a { text-decoration: none; font-weight: 600; }
.map-frame { width: 100%; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: 12px; }

/* --- availability search --------------------------------------------- */
.search-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end; box-shadow: 0 8px 24px rgba(62,46,30,.08);
}
.search-card label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-dim); display: block; margin-bottom: 5px;
}
.search-card input, .search-card select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-family: var(--body); font-size: .95rem;
  background: var(--paper); color: var(--ink);
}

/* --- footer ---------------------------------------------------------- */
.site-footer {
  margin-top: var(--gap); background: #2b241e; color: rgba(244,236,225,.78);
  padding: 3rem 0 2rem; font-size: .93rem;
}
.site-footer a { color: rgba(244,236,225,.88); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 {
  font-family: var(--body); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(244,236,225,.55); margin: 0 0 12px; font-weight: 600;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-name { font-family: var(--display); font-size: 1.3rem; color: #fff; margin-bottom: .4rem; }
.footer-bottom {
  padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; font-size: .84rem; color: rgba(244,236,225,.55);
}

/* --- empty state ------------------------------------------------------ */
.empty-note {
  border: 1px dashed var(--line); border-radius: 12px; padding: 2.4rem;
  text-align: center; color: var(--ink-dim); background: var(--paper);
}

/* ============================================================
   LAYOUT VARIANTS
   ------------------------------------------------------------
   A theme picks a header layout and a card treatment; the
   classes below are put on <body> by header.php. They are kept
   here, once, rather than copied into every theme stylesheet,
   so any theme can combine any layout with any palette.

   The default (.hdr-classic / .cards-soft) needs no rules --
   it is what the components above already do.
   ============================================================ */

/* ---- Header: centred stack, brand over navigation ---- */
.hdr-centered .site-header .wrap {
  flex-direction: column; justify-content: center;
  gap: 10px; padding-top: 18px; padding-bottom: 14px;
}
.hdr-centered .brand { flex-direction: column; text-align: center; gap: 8px; }
.hdr-centered .brand-name { font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hdr-centered .site-nav { gap: 10px; }
.hdr-centered .site-nav a { font-size: 0.86rem; letter-spacing: 0.09em; text-transform: uppercase; }
.hdr-centered .nav-toggle { position: absolute; right: 24px; top: 18px; }

/* ---- Header: split rule, navigation on its own line ---- */
.hdr-split .site-header .wrap {
  flex-direction: column; align-items: stretch; gap: 0; padding-top: 14px;
}
.hdr-split .brand { justify-content: flex-start; padding-bottom: 12px; }
.hdr-split .site-nav {
  border-top: 1px solid var(--line);
  padding: 8px 0; gap: 2px; justify-content: flex-start;
}
.hdr-split .nav-toggle { position: absolute; right: 24px; top: 16px; }

/* ---- Header: minimal, no chrome, sits on the page ---- */
.hdr-minimal .site-header {
  background: transparent; backdrop-filter: none; border-bottom: none;
  position: absolute; left: 0; right: 0;
}
.hdr-minimal .site-header .wrap { min-height: 82px; }
.hdr-minimal main { padding-top: 0; }
.hdr-minimal .site-nav a { font-weight: 600; }
/* The hero sits under a transparent header, so give it the room back. */
.hdr-minimal .hero { padding-top: 82px; }
/* A page whose first section is not a hero would slide under the header. */
.hdr-minimal main > .section:first-child { padding-top: calc(82px + var(--gap)); }

/* A floating header sits on whatever is beneath it, and that differs page by
   page: the home page opens on a dark hero, an inner page on the pale ground.
   Default to dark ink, then flip to white only when this page actually leads
   with a hero. Without this the brand and menu vanish into the hero image. */
.hdr-minimal .brand-name,
.hdr-minimal .brand-tag,
.hdr-minimal .site-nav a { color: var(--ink); }

body.hdr-minimal.leads-with-hero .brand-name,
body.hdr-minimal.leads-with-hero .brand-tag,
body.hdr-minimal.leads-with-hero .site-nav a {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
body.hdr-minimal.leads-with-hero .site-nav a:hover,
body.hdr-minimal.leads-with-hero .site-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Once the menu collapses it is a solid panel again, not an overlay, so the
   white-on-hero treatment above has to be undone inside it. */
@media (max-width: 860px) {
  body.hdr-minimal.leads-with-hero .site-nav a,
  body.hdr-minimal.leads-with-hero .site-nav a:hover,
  body.hdr-minimal.leads-with-hero .site-nav a[aria-current="page"] {
    color: var(--ink); text-shadow: none; background: transparent;
  }
  body.hdr-minimal.leads-with-hero .site-nav a[aria-current="page"] {
    background: var(--brass-soft); color: var(--brass-deep);
  }
}

/* ---- Cards: flat, hairline separation only ---- */
.cards-flat .card { border-radius: 0; border-width: 0 0 1px 0; background: transparent; }
.cards-flat .card:hover { box-shadow: none; }
.cards-flat .card-photo { border-radius: 0; }
.cards-flat .card-body { padding-left: 0; padding-right: 0; }

/* ---- Cards: framed, a drawn border and inset photo ---- */
.cards-framed .card { border-width: 1px; border-color: var(--brass); background: var(--paper); }
.cards-framed .card-photo { margin: 10px 10px 0; width: calc(100% - 20px); border-radius: 2px; }
.cards-framed .card:hover { box-shadow: none; border-color: var(--brass-deep); }

/* ---- Cards: elevated, floating on a dark ground ---- */
.cards-elevated .card { border-color: transparent; }
.cards-elevated .card:hover { transform: translateY(-3px); }
.cards-elevated .card { transition: box-shadow 160ms ease, transform 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  .cards-elevated .card:hover { transform: none; }
}

/* ---- Display-type switches a theme can turn on ---- */
h1, h2, h3, .brand-name { letter-spacing: var(--display-track); }
.section-head h2, .cta h2 { text-transform: var(--display-caps); }