/* ============================================
   Lisbon Studios — custom CSS
   Companion to the Tailwind tokens defined in base.twig
   ============================================ */

:root {
    --brand-navy: #0f172a;
    --brand-navy-2: #1a1f3a;
    --mustard-accent: #D4A373;
    --studio-gray: #E5E5E5;
    --surface: #f9f9f9;
    --on-surface: #1a1c1c;
    --secondary: #5d5f5f;
    --outline: #747878;
    --outline-variant: #c4c7c7;
    --container-max: 1440px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

/* Material symbols sizing variations */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.font-variation-fill { font-variation-settings: 'FILL' 1; }

/* Header collapsed scroll state */
.js-header.is-scrolled {
    background: rgba(249, 249, 249, 0.98);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

/* Studio-card hover refinement (Tailwind handles base) */
.studio-card { transition: transform 0.3s ease; }
.studio-card:hover { transform: translateY(-2px); }

/* Filter button active state */
.js-filter-btn.active {
    background-color: var(--brand-navy);
    color: #fff;
    border-color: var(--brand-navy);
}

/* Skip-to-content link (a11y) */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--brand-navy); color: #fff;
    padding: 12px 18px; font-weight: 700; z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--mustard-accent);
    outline-offset: 2px;
}

/* Flatpickr light tweaks to match palette */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
}

/* WhatsApp floating button hide near footer */
.js-whatsapp.is-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

/* Beds24 booking iframe — altura adaptativa según número de habitaciones disponibles.
   No podemos leer la altura del contenido (cross-origin), así que:
   - Default 1800px desktop / 2500px mobile: cabe 3-4 habitaciones sin scroll.
   - `scrolling="auto"` en el HTML: si hay más, aparece scrollbar interno sólo cuando hace falta.
   - min-height: 700px asegura que el iframe nunca colapse antes de que Beds24 cargue.
   - El listener postMessage en booking.twig sobreescribe altura inline si algún día
     Beds24 envía un evento de height (hoy no lo hace, pero queda preparado). */
.beds24-iframe {
    width: 100%;
    max-width: 100%;
    border: 0;
    display: block;
    min-height: 700px;
    height: 1800px;
}
@media (max-width: 480px) {
    .beds24-iframe { height: 2500px; }
}

/* Block shadow for industrial-like emphasis used in mockups */
.block-shadow { box-shadow: 8px 8px 0 0 var(--brand-navy); }
.block-shadow-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.block-shadow-hover:hover {
    box-shadow: 12px 12px 0 0 var(--mustard-accent);
    transform: translate(-4px, -4px);
}

/* Prose helper (long descriptions on detail pages) */
.prose p { margin-bottom: 1rem; }
.prose strong { color: var(--brand-navy); }

/* Texto justificado en las descripciones largas de estudios.
   Sólo afecta a .prose-justify (studio-detail), no a otras zonas con .prose. */
.prose-justify p { text-align: justify; hyphens: auto; }
.prose-justify ul li { text-align: left; }

/* Legal pages (privacy, terms) — long form prose */
.legal-prose { color: var(--secondary); line-height: 1.75; font-size: 1rem; }
.legal-prose h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.legal-prose h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--brand-navy);
    font-size: 1.125rem;
    margin: 2rem 0 0.75rem;
}
.legal-prose p { margin-bottom: 1rem; }
.legal-prose ul { margin: 1rem 0 1.25rem 1.25rem; list-style: disc; }
.legal-prose ul li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.legal-prose ul li strong { color: var(--brand-navy); }
.legal-prose ol { margin: 1rem 0 1.25rem 1.5rem; list-style: decimal; }
.legal-prose ol li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.legal-prose ol li strong { color: var(--brand-navy); }
.legal-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.legal-prose th { background-color: var(--surface-container, #f5f5f4); border: 1px solid var(--outline-variant, #e7e5e4); padding: 0.625rem 0.75rem; text-align: left; font-weight: 600; color: var(--brand-navy); }
.legal-prose td { border: 1px solid var(--outline-variant, #e7e5e4); padding: 0.625rem 0.75rem; vertical-align: top; }
.legal-prose td strong { color: var(--brand-navy); }
.legal-prose code { background-color: var(--surface-container, #f5f5f4); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.legal-prose a { color: var(--brand-navy); text-decoration: underline; text-decoration-color: var(--mustard-accent); text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--mustard-accent); }
.legal-prose .legal-meta {
    color: var(--outline);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}
.legal-prose .legal-lead {
    font-size: 1.125rem;
    color: var(--on-surface);
    margin-bottom: 2rem;
}

/* Check-in online (SIBA): el partial trae su propio formulario y footer
   informativo. Neutralizamos el margin/padding-bottom del último elemento del
   wrapper para que el footer del site quede pegado y no quede un hueco grande. */
.page-checkin .checkin-wrapper > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.page-checkin .checkin-wrapper {
    padding-bottom: 1.5rem;
}

/* Print-friendly */
@media print {
    .js-whatsapp, header nav, footer { display: none; }
    main { padding: 0; }
}