/*
  Portugal Property With Income — site-specific layer.
  Everything here sits on top of the Webbloom design system; base files untouched.
*/

/* ── ACCESSIBILITY ── */
.wb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75em 1.25em;
  background: var(--wb-dark);
  color: #fff;
  text-decoration: none;
}
.wb-skip-link:focus { left: 0; }

/* ── TYPOGRAPHY TUNING ──
   Fraunces is a variable optical-size face. Larger optical sizes on display
   headings, tighter tracking, so it reads editorial rather than decorative. */
h1, h2 {
  font-variation-settings: "opsz" 120, "SOFT" 30;
  letter-spacing: -0.015em;
}
h3, h4 { font-variation-settings: "opsz" 48; }

.wb-lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.65;
  color: var(--wb-text-light);
  max-width: 42em;
}

/* ── LANGUAGE SWITCHER ──
   Hidden while single-language (the partial emits nothing), so these rules
   simply lie dormant until a second language is enabled. */
.wb-lang-switcher { display: flex; align-items: center; gap: 0.75em; }
.wb-lang-switcher .wb-lang-label {
  position: absolute; left: -9999px;      /* label is for screen readers */
}
.wb-lang-switcher ul {
  display: flex;
  gap: 0.5em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wb-lang-switcher a {
  display: block;
  padding: 0.2em 0.55em;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--wb-radius-sm);
  opacity: 0.7;
}
.wb-lang-switcher a:hover,
.wb-lang-switcher a.active { opacity: 1; background: rgba(0, 0, 0, 0.06); }

/* ── BUTTONS ── */
.wb-btn-accent {
  background: var(--wb-accent);
  color: #fff;
  border-color: var(--wb-accent);
}
.wb-btn-accent:hover { background: #a8542f; border-color: #a8542f; color: #fff; }

.wb-footer-cta { display: inline-block; margin-top: 1.25em; }

/* Hero secondary action. The base theme's wb-btn-white is a solid fill, which
   competes with the primary instead of deferring to it. Outlined, with a slight
   frost so it stays legible wherever it lands on the photograph. */
.wb-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.wb-btn-ghost:hover,
.wb-btn-ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--wb-dark);
}

/* ── KEY FACTS STRIP ──
   The four things a serious buyer wants before they read a word. */
.wb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--wb-radius-md);
  overflow: hidden;
}
.wb-fact {
  background: var(--wb-dark);
  padding: 1.4em 1.2em;
  text-align: center;
}
.wb-fact-value {
  display: block;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}
.wb-fact-label {
  display: block;
  margin-top: 0.45em;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.65);
}

/* ── PRICE BADGE ── */
.wb-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.55em 1.1em;
  border: 1px solid var(--wb-accent);
  border-radius: 999px;
  font-size: 0.95rem;
}
.wb-price strong {
  font-family: var(--wb-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

/* ── PLAIN-SPOKEN LIST ──
   Used on the property and living pages. Checkmarks, no bullets, generous. */
.wb-list-check { list-style: none; padding: 0; margin: 1.5em 0; }
.wb-list-check li {
  position: relative;
  padding-left: 1.9em;
  margin-bottom: 0.85em;
  line-height: 1.6;
}
.wb-list-check li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.85em;
  color: var(--wb-primary);
}

/* ── FAQ ── */
.wb-faq { max-width: var(--wb-narrow-max); margin: 0 auto; }
.wb-faq details {
  border-bottom: 1px solid #e5e7eb;
  padding: 1.15em 0;
}
.wb-faq summary {
  font-family: var(--wb-font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.wb-faq summary::-webkit-details-marker { display: none; }
.wb-faq summary::after {
  content: "\2b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8em;
  color: var(--wb-primary);
  flex-shrink: 0;
}
.wb-faq details[open] summary::after { content: "\f068"; }
.wb-faq details > *:not(summary) { margin-top: 0.9em; color: var(--wb-text-light); }

/* ── ENQUIRY FORM ── */
.wb-form { max-width: var(--wb-narrow-max); margin: 0 auto; }
.wb-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25em;
}
.wb-field { margin-bottom: 1.25em; display: flex; flex-direction: column; }
.wb-field label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.4em;
  letter-spacing: 0.01em;
}
.wb-field .req { color: var(--wb-accent); }
.wb-field input,
.wb-field select,
.wb-field textarea {
  font-family: var(--wb-font-body);
  font-size: 1rem;
  padding: 0.7em 0.85em;
  border: 1px solid #d1d5db;
  border-radius: var(--wb-radius-sm);
  background: #fff;
  color: var(--wb-text);
  width: 100%;
}
.wb-field input:focus,
.wb-field select:focus,
.wb-field textarea:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(74, 107, 70, 0.15);
}
.wb-field textarea { min-height: 130px; resize: vertical; }

.wb-field .opt {
  font-weight: 400;
  color: var(--wb-text-muted);
  font-size: 0.9em;
}

/* Expectation-setting note above the submit button — deliberately not a checkbox,
   so nothing stands between an interested buyer and sending the form. */
.wb-form-note {
  margin: 1.75em 0;
  padding: 1em 1.25em;
  border-left: 3px solid var(--wb-secondary);
  background: #f6f7f4;
  border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--wb-text-light);
}

/* General-purpose callout. Same treatment as the form note, used for anything
   that needs to stand out of the reading flow without shouting. */
.wb-callout {
  margin: 2.5em auto;
  max-width: 56rem;
  padding: 1.4em 1.6em;
  border-left: 3px solid var(--wb-accent);
  background: #f8f6f2;
  border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--wb-text);
}
.wb-callout strong { font-weight: 600; }
.wb-callout p { margin-bottom: 0.7em; }
.wb-callout p:last-child { margin-bottom: 0; }

/* Honeypot — bots fill it, humans never see it */
.wb-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ── PHOTO GALLERY ──
   Source photos top out around 900–1200px, so the grid is deliberately sized to
   show them at or below native width. Never stretch them past it. */
.wb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5em;
  margin: 2.5em 0;
}
.wb-gallery-item { margin: 0; }
.wb-gallery-media { position: relative; }
.wb-gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--wb-radius-md);
  background: #eceee9;
}
.wb-gallery-item figcaption {
  margin-top: 0.6em;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--wb-text-light);
}

/* Staged / CGI disclosure. Deliberately visible on the image itself, not only in
   the caption — the whole point is that it cannot be missed or quietly dropped. */
.wb-staged-badge {
  position: absolute;
  left: 0.6em;
  bottom: 0.6em;
  padding: 0.32em 0.7em;
  border-radius: var(--wb-radius-sm);
  background: rgba(43, 51, 42, 0.88);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wb-staged-note {
  display: block;
  margin-top: 0.3em;
  font-style: italic;
  color: var(--wb-text-muted);
}

/* Grids sitting directly under a section heading need breathing room */
.wb-section h2 + [class*="wb-grid-"] { margin-top: 2.25em; }

/* ────────────────────────────────────────────────────────────────────────
   LONG-FORM READING TREATMENT  —  opt in with `prose: true` in front matter

   The base theme's reset zeroes every margin and only gives `p` one back, so
   headings sit flush against the paragraph above them with no breathing room.
   That is the root of the "titles and paragraphs don't work" problem, and it
   is site-wide. Scoped to .wb-prose for now so it can be compared against an
   untreated page before rolling out.
   ──────────────────────────────────────────────────────────────────────── */

.wb-prose > * {
  max-width: 56rem;        /* 896px */
  margin-left: auto;
  margin-right: auto;
}
.wb-prose > .wb-section,
.wb-prose > .cta-block { max-width: none; }

.wb-prose > p {
  /* Type scales with the column. At 896px, 16px body would run to ~110
     characters a line; 1.25rem pulls that back to a readable measure. */
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: 1.3em;
  color: #3a4238;          /* softer than pure --wb-text; easier over long runs */
}

/* Vertical rhythm: space above a heading is ~2.5x the space below it, so the
   heading binds to the text it introduces rather than floating between blocks. */
.wb-prose > h2 {
  margin-top: 3em;
  margin-bottom: 0.6em;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-variation-settings: "opsz" 108, "SOFT" 40;
  letter-spacing: -0.018em;
  line-height: 1.22;
}
.wb-prose > h3 {
  margin-top: 2.4em;
  margin-bottom: 0.55em;
}
.wb-prose > h2:first-child,
.wb-prose > h3:first-child { margin-top: 0; }

/* Opening paragraph carries the reader in — larger, lighter, tighter.
   Page-level only (.wb-prose-lead); a lead on every section would be shouting. */
.wb-prose-lead > p:first-of-type {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--wb-text-light);
}

.wb-prose > ul, .wb-prose > ol { margin: 0 auto 1.5em; padding-left: 1.3em; }
.wb-prose > ul > li, .wb-prose > ol > li { font-size: 1.2rem; line-height: 1.75; margin-bottom: 0.6em; }

/* ── SIGNATURE: the brushed line ──
   The property's photographs keep repeating a hand-painted band on a rough
   wall — the white cap on the brick garden wall, the yellow-washed water tank,
   the terracotta stripe on the balcony. This borrows that: one clause marked
   with a soft-edged wash of terracotta, as if brushed on. No box, no quote
   marks, no rule. It is the only decoration on the page. */
.wb-prose > p.wb-said {
  /* Deliberately narrower than the body column — a held breath in a wide page. */
  max-width: 40rem;
  margin: 2.8em auto 3.2em;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  font-weight: 400;
  font-variation-settings: "opsz" 132, "SOFT" 60;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--wb-dark);
  text-wrap: balance;
}

/* ── HERO SUBTITLE ──
   Base theme sets this to var(--wb-accent) — terracotta on a dark photo behind a
   40% black overlay, which is close to unreadable. Near-white with a soft shadow
   holds up over whatever part of the image sits behind it. */
.wb-hero .wb-subtitle,
.hero-slide .wb-subtitle {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  max-width: 46rem;
}

/* Deepen the overlay a touch — the source photos are bright and the type sits
   directly on them. */
.wb-hero-overlay::before { background: rgba(28, 34, 27, 0.52); }

/* ── THE STATEMENT ──
   One held pause in the page. Dark, centred, nothing else in it. Uses the same
   brushed mark as the enquiry page so it reads as a motif, not a repeat. */
.wb-statement {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.wb-statement p {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-variation-settings: "opsz" 132, "SOFT" 60;
  font-size: clamp(1.5rem, 3.8vw, 2.35rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.62);
  text-wrap: balance;
  margin-bottom: 1.1em;
}
.wb-statement p:last-child {
  color: #fff;
  margin-bottom: 0;
}
.wb-statement strong { font-weight: 500; color: #fff; }

/* The wash needs more presence on a dark ground than on white. */
.wb-statement .wb-brushed {
  background-image: linear-gradient(
    to right,
    rgba(193, 102, 60, 0) 0%,
    rgba(199, 116, 74, 0.62) 4%,
    rgba(199, 116, 74, 0.72) 42%,
    rgba(199, 116, 74, 0.55) 76%,
    rgba(199, 116, 74, 0.68) 93%,
    rgba(193, 102, 60, 0) 100%
  );
  background-size: 100% 0.36em;
  background-position: 0 84%;
}

.wb-brushed {
  background-image: linear-gradient(
    to right,
    rgba(193, 102, 60, 0) 0%,
    rgba(193, 102, 60, 0.30) 3.5%,
    rgba(193, 102, 60, 0.36) 40%,
    rgba(193, 102, 60, 0.26) 74%,
    rgba(193, 102, 60, 0.34) 92%,
    rgba(193, 102, 60, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.42em;
  background-position: 0 82%;
  padding: 0 0.12em;
}

@media (max-width: 767px) {
  .wb-prose > p { font-size: 1.1rem; line-height: 1.72; }
  .wb-prose-lead > p:first-of-type { font-size: 1.22rem; }
  .wb-prose > h2 { margin-top: 2.4em; }
}

/* ── UTILITY ── */
.wb-center { text-align: center; }
.wb-mt-lg { margin-top: 2.5em; }

@media (max-width: 768px) {
  .wb-lang-switcher { margin-top: 1em; justify-content: center; }
}