/* ===========================================================================
   Lemon Drops Villa & Pool — base layer
   ---------------------------------------------------------------------------
   Typography, links, buttons, forms, focus, accessibility helpers and the few
   utilities the sections rely on. Section-specific rules live in sections.css.
   =========================================================================== */

/* --- Document ------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: 5.5rem;
}

body {
  font-family: var(--ld-font-body);
  font-size: var(--ld-step-body);
  line-height: 1.65;
  color: var(--ld-ink);
  background: var(--ld-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nothing on this page is wider than the viewport; this is a backstop. */
  overflow-x: hidden;
}

/* Bootstrap's .container has 12px of padding while .g-5 rows pull -24px,
   which overflows on small screens. Match the padding to the largest gutter. */
.container {
  padding-left: var(--ld-gutter);
  padding-right: var(--ld-gutter);
  max-width: 1220px;
}

/* --- Typography ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--ld-font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ld-teal-800);
  text-wrap: balance;
}

h1 { font-size: var(--ld-step-hero); }
h2 { font-size: var(--ld-step-h2); }
h3 { font-size: var(--ld-step-h3); letter-spacing: -0.005em; }

p {
  max-width: var(--ld-measure);
  text-wrap: pretty;
}

.ld-lead {
  font-size: var(--ld-step-lead);
  line-height: 1.6;
  max-width: 52ch;
}

.ld-eyebrow {
  font-family: var(--ld-font-body);
  font-size: var(--ld-step-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ld-tracking-eyebrow);
  color: var(--ld-muted);
  margin-bottom: .85rem;
}

.ld-note {
  font-size: var(--ld-step-small);
  color: var(--ld-muted);
}

.ld-small { font-size: var(--ld-step-small); }

/* A short rule under a section heading — quieter than a coloured block. */
.ld-rule {
  width: 3rem;
  height: 2px;
  border: 0;
  margin: 0 0 1.6rem;
  background: var(--ld-lemon);
  opacity: 1;
}

/* --- Links ---------------------------------------------------------------- */

a {
  color: var(--ld-teal-800);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ld-teal-600); }

.ld-link-plain {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ld-line-strong);
}
.ld-link-plain:hover { text-decoration-color: currentColor; }

/* --- Focus ---------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ld-teal-600);
  outline-offset: 3px;
  border-radius: var(--ld-radius-xs);
  box-shadow: none;
}

/* On teal panels and over photography the teal ring would disappear. */
.ld-on-dark :where(a, button, input, textarea, [tabindex]):focus-visible,
.ld-hero :where(a, button):focus-visible,
.ld-lightbox :where(a, button):focus-visible {
  outline-color: var(--ld-lemon);
}

/* --- Skip link ------------------------------------------------------------ */

.ld-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--ld-z-skip);
  padding: .85rem 1.35rem;
  background: var(--ld-teal-800);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--ld-radius-md) 0;
  transform: translateY(-120%);
}
.ld-skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* --- Screen-reader-only --------------------------------------------------- */

.ld-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Buttons --------------------------------------------------------------
   Rectangular with a 3px radius. Minimum 48px tall so every control clears the
   44x44 target size on touch. */

.ld-btn {
  --_bg: transparent;
  --_fg: var(--ld-teal-800);
  --_edge: var(--ld-teal-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.6rem;
  border: 1px solid var(--_edge);
  border-radius: var(--ld-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ld-font-body);
  font-size: .9688rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ld-dur) var(--ld-ease),
              border-color var(--ld-dur) var(--ld-ease),
              color var(--ld-dur) var(--ld-ease);
}

.ld-btn:hover { color: var(--_fg); }

/* Primary — muted lemon, teal text. 8.4:1. */
.ld-btn--lemon {
  --_bg: var(--ld-lemon);
  --_fg: var(--ld-teal-900);
  --_edge: var(--ld-lemon);
}
.ld-btn--lemon:hover {
  --_bg: var(--ld-lemon-hover);
  --_edge: var(--ld-lemon-hover);
}

/* Secondary on light backgrounds. */
.ld-btn--line:hover {
  --_bg: var(--ld-teal-800);
  --_fg: var(--ld-cream);
}

/* Secondary on teal or over photography. */
.ld-btn--ghost {
  --_fg: #fff;
  --_edge: rgba(255, 255, 255, .55);
}
.ld-btn--ghost:hover {
  --_bg: rgba(255, 255, 255, .14);
  --_edge: #fff;
  --_fg: #fff;
}

.ld-btn--solid-teal {
  --_bg: var(--ld-teal-800);
  --_fg: var(--ld-cream);
  --_edge: var(--ld-teal-800);
}
.ld-btn--solid-teal:hover {
  --_bg: var(--ld-teal-600);
  --_edge: var(--ld-teal-600);
  --_fg: #fff;
}

.ld-btn[disabled],
.ld-btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

.ld-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.ld-btn-row--spaced { margin-top: 1.5rem; }

/* Note variants, so nothing needs an inline style. */
.ld-note--flush { margin-bottom: 0; }
.ld-note--after { margin-top: .65rem; }

/* --- Media ---------------------------------------------------------------- */

img {
  max-width: 100%;
  /* Explicit width/height attributes reserve space and stop layout shift, but
     without this they also lock the rendered height. */
  height: auto;
}

/* <picture> is a wrapper, not a box — let it take the shape of its frame. */
picture { display: block; }

/* Inside a fixed-ratio frame the image fills it instead. */
.ld-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ld-limestone);
  border-radius: var(--ld-radius-md);
}
.ld-frame > picture { width: 100%; height: 100%; }
.ld-frame > img,
.ld-frame > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

figure { margin: 0; }

/* The icon sprite is markup only — never rendered where it sits. */
.ld-sprite { display: none; }

figcaption {
  font-size: var(--ld-step-micro);
  color: var(--ld-muted);
  padding-top: .6rem;
}

/* --- Design-placeholder flag ----------------------------------------------
   Sits over every AI-generated property image.

   Controlled by ONE value: SHOW_PLACEHOLDER_LABELS in partials/config.php.
   When that is true — which it must remain until verified photography of the
   actual villa exists — ld_placeholder_flag() emits this markup. When false it
   emits nothing at all, so there is no CSS state that can hide the label by
   accident and no second switch to get out of step. */

.ld-placeholder-flag {
  position: absolute;
  top: .7rem;
  left: .7rem;
  right: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 1.4rem);
  padding: .35rem .6rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--ld-radius-xs);
  background: rgba(7, 48, 59, .86);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.25;
  text-wrap: balance;
  pointer-events: none;
}

.ld-placeholder-flag__dot {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--ld-lemon);
  flex: 0 0 auto;
}

/* On the smallest frames the full sentence would cover the picture, so the
   label shortens to its first clause. The wording still never claims the
   image is a photograph. */
@media (max-width: 575.98px) {
  .ld-mosaic .ld-placeholder-flag,
  .ld-index__frame .ld-placeholder-flag {
    font-size: .625rem;
    padding: .3rem .5rem;
  }
}

/* --- Forms ---------------------------------------------------------------- */

.ld-field { margin-bottom: 0; }

.ld-label {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--ld-step-small);
  font-weight: 500;
  color: var(--ld-ink);
}
.ld-label .ld-optional {
  font-weight: 400;
  color: var(--ld-muted);
}

.ld-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  font-family: inherit;
  font-size: var(--ld-step-body);
  line-height: 1.5;
  color: var(--ld-ink);
  background: #fff;
  border: 1px solid var(--ld-line-strong);
  border-radius: var(--ld-radius-sm);
  transition: border-color var(--ld-dur) var(--ld-ease);
  appearance: none;
}
.ld-input:hover { border-color: var(--ld-teal-600); }

textarea.ld-input {
  min-height: 7rem;
  resize: vertical;
}

.ld-error {
  display: block;
  margin: .4rem 0 0;
  font-size: var(--ld-step-small);
  font-weight: 500;
}
.ld-error[hidden] { display: none; }

.ld-status {
  margin: 0;
  font-size: var(--ld-step-small);
  max-width: 46ch;
}
.ld-status:empty { display: none; }

/* --- Reveal ---------------------------------------------------------------
   Content is visible by default. main.js adds .is-ready to <html> only when it
   is safe to animate, so a JS failure or reduced-motion preference simply
   leaves everything on screen. */

.is-ready .ld-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ld-ease), transform 420ms var(--ld-ease);
}
.is-ready .ld-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .is-ready .ld-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Print ----------------------------------------------------------------- */

@media print {
  .ld-nav, .ld-lightbox, .ld-map__consent { display: none !important; }
  body { background: #fff; }
}