/*
 * Costera is the default Hotel Castilla palette. Bosque remains as a small
 * alternate theme tucked inside the navigation menu.
 */

/* Default: navy and sun yellow, based on alternative-reimagined.html. */
:root,
:root[data-palette="costera"] {
  --paper: #faf9f4;
  --ink: #163d4c;
  --accent: #f5d649;
  --hero-title-accent: #163d4c;
  --white: #fffefa;
  --grey: #506670;
  --palette-grey: #506670;
  --line: rgba(22, 61, 76, .22);
  --light-line: rgba(255, 254, 250, .28);
  --accent-contrast: #163d4c;
  --accent-detail: #163d4c;
  --dark-muted: #c9d7db;
  --paper-glass: rgba(250, 249, 244, .96);
  --soft-surface: #ced9dc;
  --floating: #f5d649;
  --floating-hover: #ffe675;
}

/* Easter egg: pine, warm sand and terracotta, inspired by Gesell's forest. */
:root[data-palette="bosque"] {
  --paper: #f4efe5;
  --ink: #183f36;
  --accent: #c9583f;
  --hero-title-accent: #c9583f;
  --white: #fffaf0;
  --grey: #667069;
  --palette-grey: #667069;
  --line: rgba(24, 63, 54, .22);
  --light-line: rgba(255, 250, 240, .28);
  --accent-contrast: #fffaf0;
  --accent-detail: #fffaf0;
  --dark-muted: #cbd5cd;
  --paper-glass: rgba(244, 239, 229, .96);
  --soft-surface: #d9d2c4;
  --floating: #b84a34;
  --floating-hover: #983c2c;
}

/* Palette-aware replacements for legacy literal colours. */
.site { --grey: var(--palette-grey); }
.site .header,
.site .home-intro__ratings,
.site .statement-gallery__open,
.site .location__map-label { background-color: var(--paper-glass); }
.site .statement__description,
.site .statement__facts span,
.site .statement__services > p,
.site .location--dark .location__content > p,
.site .hotel-gallery__stage figcaption { color: var(--dark-muted); }
.site .home-intro__photo,
.site .gallery-card > div,
.site .location__map { background-color: var(--soft-surface); }
.site .floating-book { color: var(--accent-contrast); background: var(--floating); }
.site .floating-book:hover { color: var(--accent-contrast); background: var(--floating-hover); }
.site .home-intro__distance { color: var(--accent-contrast); }
.site .contact h2 em { color: var(--accent-detail); }
.site .home-intro h1 .title-line--accent { color: var(--hero-title-accent); }
.site .home-intro__ratings strong svg { color: var(--accent); }

/* A discreet alternate-theme switch inside the full-screen menu. */
.site .menu-button { display: flex; }
.palette-selector {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--white);
}
.palette-selector__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.palette-selector__options { display: flex; align-items: center; gap: 6px; }
.palette-selector button {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: .8125rem;
}
.palette-selector button:hover { border-color: var(--light-line); }
.palette-selector button[aria-pressed="true"] { color: var(--ink); background: var(--white); border-color: var(--white); }
.palette-selector button > i { display: flex; overflow: hidden; width: 32px; height: 16px; border: 1px solid currentColor; border-radius: 999px; }
.palette-selector button b { flex: 1; }
.palette-selector [data-palette-choice="costera"] b:nth-child(1) { background: #faf9f4; }
.palette-selector [data-palette-choice="costera"] b:nth-child(2) { background: #163d4c; }
.palette-selector [data-palette-choice="costera"] b:nth-child(3) { background: #f5d649; }
.palette-selector [data-palette-choice="bosque"] b:nth-child(1) { background: #f4efe5; }
.palette-selector [data-palette-choice="bosque"] b:nth-child(2) { background: #183f36; }
.palette-selector [data-palette-choice="bosque"] b:nth-child(3) { background: #c9583f; }

@media (max-width: 900px) {
  .palette-selector { margin-top: 24px; }
}
@media (max-width: 1100px) {
  .site .header__links { display: none; }
}
@media (max-width: 600px) {
  .palette-selector { width: 100%; justify-content: space-between; }
}
@media (max-width: 380px) {
  .palette-selector button > i { width: 25px; }
  .palette-selector button { font-size: .75rem; padding-inline: 5px; }
}