/* ==========================================================================
   Casa Boyana — token layer
   Palette and type are shared with casaboyana-restaurant.com, with --cb-moss
   as the one hotel-only note.
   ========================================================================== */

/* Self-hosted fonts: no runtime request to Google is allowed by the spec, so
   the woff2 files below were downloaded once by tools/fetch-fonts.sh and are
   committed under assets/fonts/. Google's css2 endpoint returns one file per
   Unicode subset (cyrillic-ext, cyrillic, greek, hebrew, vietnamese, math,
   symbols, latin-ext, latin, ...); this is a Bulgarian/English site, so only
   the cyrillic and latin subsets are kept — the rest were discarded after
   fetching. Filenames and unicode-range values below are copied verbatim
   from Google's actual CSS response (verified with `fc-query`/fontTools,
   not guessed), so they map exactly to what shipped in assets/fonts/.
   Open Sans's two files are true variable fonts (wght axis 300–800), which
   is why one file per subset can cover the whole 300–600 weight range. */

@font-face {
  font-family: 'Forum';
  src: url('../fonts/forum-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Forum';
  src: url('../fonts/forum-cyrillic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-cyrillic.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --cb-night: #1D1D1D;
  --cb-ink: #121212;
  --cb-paper: #F4F1EA;
  --cb-brass: #B08D57;
  --cb-moss: #2A3129;
  --cb-stone: #8A857C;

  --cb-font-display: 'Forum', Georgia, serif;
  --cb-font-body: 'Open Sans', system-ui, sans-serif;

  /* 8px base. Section rhythm is deliberately large — the spec asks for air. */
  --cb-space-1: 0.5rem;
  --cb-space-2: 1rem;
  --cb-space-3: 2rem;
  --cb-space-4: 4rem;
  --cb-space-5: 7.5rem;
  --cb-space-6: 12.5rem;

  --cb-measure: 68ch;
  --cb-gutter: clamp(1.25rem, 5vw, 6rem);
  --cb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body.cb-theme {
  margin: 0;
  background: var(--cb-paper);
  color: var(--cb-night);
  font-family: var(--cb-font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--cb-font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(3rem, 6vw, 7rem); }
h2 { font-size: clamp(2.25rem, 4vw, 4.5rem); }
h3 { font-size: clamp(1.5rem, 2vw, 2.25rem); }

p { max-width: var(--cb-measure); }

/* Eyebrow label — the small caps line that opens each band. */
.cb-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cb-brass);
  margin: 0 0 var(--cb-space-2);
}

/* Section index numeral, e.g. 01 */
.cb-index {
  font-family: var(--cb-font-display);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--cb-stone);
}

.cb-rule { border: 0; border-top: 1px solid rgba(176, 141, 87, 0.35); margin: 0; }

.cb-section { padding: var(--cb-space-5) var(--cb-gutter); }
@media (min-width: 1024px) { .cb-section { padding: var(--cb-space-6) var(--cb-gutter); } }

.cb-section--night { background: var(--cb-night); color: var(--cb-paper); }
.cb-section--ink   { background: var(--cb-ink);   color: var(--cb-paper); }
.cb-section--moss  { background: var(--cb-moss);  color: var(--cb-paper); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Chrome ─────────────────────────────────────────────────────────────── */

/* Standard WP convention: visually hidden but available to assistive tech.
   header.php's external-link markup relies on this class existing. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%);
  border: 0; white-space: nowrap;
}

.cb-skip {
  position: absolute; left: -9999px;
  background: var(--cb-brass); color: var(--cb-night);
  padding: var(--cb-space-1) var(--cb-space-2);
}
.cb-skip:focus { left: var(--cb-space-2); top: var(--cb-space-2); z-index: 100; }

/* The header adapts to what is behind it. Most templates have no hero, so the
   default is dark text on the paper page background (AA-legible). A template
   that opens with a full-bleed dark hero calls cb_declare_hero() before
   get_header(), which adds body.cb-has-hero and switches the header back to
   the light-over-image treatment. Either way, once the page scrolls past the
   hero the header goes solid and the text is always paper — see the
   specificity note below. */
.cb-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cb-space-3);
  padding: var(--cb-space-2) var(--cb-gutter);
  color: var(--cb-night);
  transition: background-color 400ms var(--cb-ease), padding 400ms var(--cb-ease), color 400ms var(--cb-ease);
}

body.cb-has-hero .cb-header { color: var(--cb-paper); }

/* Scrolled always wins, dark-hero or not. body.cb-has-hero .cb-header is
   (0,2,1); a bare .cb-header[data-scrolled="true"] is only (0,2,0) and would
   lose that tie-break, so this selector matches it at (0,2,1) and is placed
   after both rules above to win on source order. */
body .cb-header[data-scrolled="true"] {
  background: rgba(29, 29, 29, 0.94);
  backdrop-filter: blur(8px);
  color: var(--cb-paper);
}

.cb-logo {
  font-family: var(--cb-font-display);
  font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: inherit; text-decoration: none;
}

.cb-nav { display: flex; align-items: center; gap: var(--cb-space-3); }
.cb-nav__list { display: flex; gap: var(--cb-space-3); list-style: none; margin: 0; padding: 0; }
.cb-nav__list a, .cb-nav__external {
  color: inherit; text-decoration: none;
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--cb-ease);
}
.cb-nav__list a:hover, .cb-nav__external:hover { border-bottom-color: var(--cb-brass); }

/* The CTA is a hairline outline, not a filled pill — the spec asks for a
   booking prompt that is present without shouting. */
.cb-book {
  display: inline-block;
  font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: inherit;
  padding: 0.85em 1.9em;
  border: 1px solid currentColor;
  transition: background-color 350ms var(--cb-ease), color 350ms var(--cb-ease);
}
/* Night-on-paper by default (no hero); brass-on-transparent once a hero is
   declared, matching the header text treatment above. */
.cb-book--solid { border-color: var(--cb-brass); color: var(--cb-night); }
body.cb-has-hero .cb-book--solid { color: var(--cb-brass); }
.cb-book--solid:hover { background: var(--cb-brass); color: var(--cb-night); }
.cb-book--ghost:hover { background: currentColor; color: var(--cb-night); }

.cb-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--cb-space-1); }
.cb-nav-toggle span { display: block; width: 26px; height: 1px; background: currentColor; margin: 6px 0; transition: transform 300ms var(--cb-ease); }

@media (max-width: 900px) {
  .cb-nav-toggle { display: block; }
  .cb-nav {
    position: fixed; inset: 0; z-index: 40;
    flex-direction: column; justify-content: center;
    background: var(--cb-night);
    opacity: 0; visibility: hidden;
    transition: opacity 350ms var(--cb-ease), visibility 350ms;
  }
  .cb-nav[data-open="true"] { opacity: 1; visibility: visible; }
  .cb-nav__list { flex-direction: column; text-align: center; gap: var(--cb-space-2); }
}

.cb-lang { display: flex; gap: var(--cb-space-1); list-style: none; margin: 0; padding: 0; font-size: 0.75rem; }
.cb-lang a { color: inherit; text-decoration: none; opacity: 0.6; }
.cb-lang .current-lang a { opacity: 1; color: var(--cb-brass); }

.cb-footer__grid {
  display: grid; gap: var(--cb-space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--cb-space-4);
}
.cb-footer__name { font-family: var(--cb-font-display); font-size: 1.5rem; margin: 0; }
.cb-footer__tag, .cb-footer__note { color: var(--cb-stone); font-size: 0.8125rem; }
.cb-footer address { font-style: normal; line-height: 2; }
.cb-footer a { color: inherit; text-decoration: none; }
.cb-footer a:hover { color: var(--cb-brass); }
.cb-footer__list { list-style: none; margin: 0; padding: 0; line-height: 2.2; }
.cb-footer__legal { color: var(--cb-stone); font-size: 0.75rem; margin-top: var(--cb-space-3); }

.cb-image-placeholder {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; background: var(--cb-night); color: var(--cb-brass);
  font-family: var(--cb-font-display); letter-spacing: 0.2em; text-transform: uppercase;
}