/* WordPress-only adjustments on top of the prototype's stylesheets.
   tokens.css, casona.css and site.css are copies of site/assets/css and are
   refreshed by tools/sync-theme-assets.sh, so theme changes go here. */

/* The language switch is links to the translated URL, not buttons. */
.langsw a, .langsw span[aria-current] { color: var(--text-muted); text-decoration: none; }
.langsw a:hover, .langsw [aria-current="true"] { color: var(--accent-wine); }
.hdr__bar .langsw a, .hdr__bar .langsw span[aria-current] { color: var(--text-inverse-muted); }
.menu .langsw a, .menu .langsw span[aria-current] { color: var(--text-inverse-muted); }
.hdr__bar .langsw a:hover, .hdr__bar .langsw [aria-current="true"],
.menu .langsw a:hover, .menu .langsw [aria-current="true"] { color: var(--accent-gold-inverse); }

/* site.css uppercases the Spanish room meaning through [data-l="es"], which
   the theme doesn't print. The page language does the same job. */
html[lang^="es"] .rail__mean { text-transform: uppercase; }

/* A photo the client still owes keeps the space of a photo. */
.passage__fig .ph-image, .fig .ph-image, .slider__slide .ph-image, .rail__shot .ph-image, .chapter__media .ph-image, .deck__card .ph-image { aspect-ratio: 4 / 3; width: 100%; }
.passage__fig--portrait .ph-image, .fig--p .ph-image { aspect-ratio: 3 / 4; }
.slider__slide .ph-image { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

/* The map page. This was inline CSS in the prototype's mapa.html. */
.map-section { padding-top: clamp(20px, 3vh, 32px); }
.mapa__launch { display: none; }
.mapa.mapa--fullscreen { position: fixed; inset: 0; z-index: 1000; border: 0; width: 100%; height: 100dvh; margin: 0; }
.mapa--fullscreen .mapa__frame { height: 100%; min-height: 0; }
.mapa--fullscreen .mapa__launch { display: none; }
body.map-open { overflow: hidden; }
@media (max-width: 700px) {
  .mapa:not(.mapa--fullscreen) .mapa__frame { height: 420px; min-height: 0; pointer-events: none; }
  .mapa__launch { display: flex; position: absolute; inset: 0; align-items: flex-end; justify-content: center; padding: 28px 16px; width: 100%; border: 0; background: linear-gradient(transparent 55%, #f5efe2e6); cursor: pointer; }
  .mapa__launch span { background: #4a3b2e; color: #f5efe2; padding: 16px 24px; border-radius: 8px; font: 16px Georgia, serif; }
  .mapa__launch:focus-visible { outline: 3px solid #b3573a; outline-offset: 3px; }
}

/* Blog bodies are block markup from the seeder. Core image blocks get the
   prototype's figure treatment. */
.post__body .wp-block-image { margin: 0; }
.post__body .wp-block-image img { display: block; width: 100%; height: auto; }
.post__body .wp-block-list, .post__body ol, .post__body ul { padding-left: 1.4em; }

/* The admin bar sits above the fixed header when logged in. */
.admin-bar .hdr { top: var(--wp-admin--admin-bar--height, 32px); }

/* The floating booking box. Placement and behaviour follow the old
   casasanblas.com, the look is the Casona system.
   template-parts/chrome/book.php, assets/js/book.js. */
.book { position: fixed; top: var(--book-top, 140px); right: 60px; z-index: 65; width: 280px; background: var(--surface-page); color: var(--text-primary); border: 1px solid var(--accent-wine); box-shadow: 0 18px 48px rgba(23,18,14,0.18); font-size: var(--text-small); line-height: 1.55; }
.book__head { display: block; width: 100%; padding: 13px 16px 12px; border: 0; background: #f7bd4b; color: var(--accent-wine); font: var(--weight-strong) var(--text-label)/1.4 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer; transition: background var(--duration-fast) var(--ease-drift); }
.book__head:hover { background: #ebaf45; }
.book__head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-wine); }
.book[data-state="closed"] .book__body { display: none; }
.book[data-state="form"] .book__info, .book:not([data-state="form"]) .book__form { display: none; }
.book__perks { margin: 0; padding: 16px 18px; list-style: none; }
.book__perks li { position: relative; padding-left: 16px; }
.book__perks li + li { margin-top: 6px; }
.book__perks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; background: var(--accent-gold); transform: rotate(45deg); }
.book__foot { display: flex; justify-content: center; padding: 16px; background: var(--accent-wine); color: var(--text-inverse); text-align: center; }
.book__form { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.book__f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.book__f--wide { flex-basis: 100%; }
.book__f span { font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.book__f input, .book__f select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-hairline-strong); border-radius: var(--radius-none); background: var(--surface-raised); color: var(--text-primary); font: var(--text-small)/1.4 var(--font-sans); }
.book__f input:focus-visible, .book__f select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.book__act { flex-basis: 100%; margin: 4px 0 0; }
.book__go { width: 100%; }
.book__ticker { flex-basis: 100%; margin: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-accent); font-style: italic; font-size: 13px; color: var(--accent-wine); }
.book__ticker span { display: inline-block; padding-left: 100%; animation: book-ticker 14s linear infinite; }
@keyframes book-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .book__ticker { white-space: normal; text-align: center; }
  .book__ticker span { padding-left: 0; animation: none; }
}
/* Phones: the floating box is hidden. The header's "Reserva" button opens
   it as a popup that covers most of the screen over a dark veil. */
.hdr__book, .book__x { display: none; }
.book-veil { position: fixed; inset: 0; z-index: 80; background: rgba(23,18,14,0.72); }
.book-veil[hidden] { display: none; }
body.book-open { overflow: hidden; }
@media (max-width: 700px) {
  .hdr__top { gap: 14px; }
  .hdr__book { display: block; margin-left: auto; padding: 9px 14px 8px; border: 0; background: #f7bd4b; color: var(--accent-wine); font: var(--weight-strong) var(--text-label)/1.4 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer; }
  .hdr__book:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .book:not(.book--pop) { display: none; }
  .book--pop, .admin-bar .book--pop { top: 20px; right: 16px; bottom: 20px; left: 16px; z-index: 81; display: flex; flex-direction: column; width: auto; overflow-y: auto; font-size: var(--text-body); }
  .book--pop .book__body, .book--pop .book__info { display: flex; flex: 1 0 auto; flex-direction: column; }
  .book--pop .book__perks { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; }
  .book--pop .book__form { flex: 1 0 auto; align-content: center; }
  .book--pop .book__head { padding: 18px 56px 16px 20px; text-align: left; cursor: default; }
  .book--pop .book__head:hover { background: #f7bd4b; }
  .book--pop .book__x { display: block; position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--accent-wine); font-size: 30px; line-height: 1; cursor: pointer; }
  .book--pop .book__x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .book--pop .book__perks { padding: 28px 24px; font-size: 17px; }
  .book--pop .book__perks li + li { margin-top: 12px; }
  .book--pop .book__foot { padding: 24px 20px; }
  .book--pop .book__form { padding: 24px 20px; gap: 16px; }
}

/* The hero dots move from the top right corner, where the booking box now
   sits, to the bottom centre. */
.hero .hero__dots { top: auto; right: auto; bottom: 16px; left: 50%; transform: translateX(-50%); }

/* Voces: TripAdvisor's badge, linked, then the Booking.com and Expedia icons.
   template-parts/components/platforms.php. */
.plats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 48px; }
.plats .TA_links { margin: 0; padding: 0; list-style: none; }
/* TripAdvisor's script wraps the badge in a white #CDSWIDCOE box (its own
   stylesheet, an id selector), and the PNG itself has an opaque white ground.
   Clearing the box and multiplying the image lets the page colour through and
   keeps the green and black. */
.plats #CDSWIDCOE { margin: 0; background: transparent; }
.plats img.widCOEImg { display: block; width: 100px; height: auto; mix-blend-mode: multiply; }
.plats__logo { display: block; width: 160px; height: auto; }