/* assets/css/base.css — Global styles and Pico.css overrides */

/* ── CSS Custom Properties ─────────────────────── */
:root {
  /* Force light color scheme until dark mode is properly designed.
     Overrides prefers-color-scheme from Pico.css / user agent. */
  color-scheme: light only;

  /* Brand colors — Premier Suite & Lounge */
  --color-charcoal: #27313b;
  --color-charcoal-light: #3f4d5b;
  --color-charcoal-dark: #141a21;
  --color-ink: #1b2026;
  --color-carbon: #343a40;
  --color-smoke: #616a75;
  --color-fog: #8d96a0;
  --color-mist: #d7dde3;
  --color-paper: #ffffff;
  --color-snow: #f4f6f8;
  --color-cool: #edf0f3;
  --color-silver: #aeb8c3;
  --color-silver-light: #dfe4e9;
  --color-steel: #526b83;
  --color-steel-light: #71879c;
  --color-error: #b42318;
  --color-error-soft: #fef3f2;
  --color-error-border: #fda29b;
  --gradient-chrome: linear-gradient(110deg, #343a40 0%, #8d969f 24%, #f8fafc 48%, #c8cfd6 62%, #ffffff 76%, #68737e 100%);
  --gradient-chrome-dark: linear-gradient(135deg, #141a21 0%, #27313b 40%, #66727e 58%, #27313b 78%, #141a21 100%);
  --gradient-chrome-action: linear-gradient(110deg, #c8cfd6 0%, #ffffff 50%, #aeb8c3 100%);
  --font-script: 'Great Vibes', cursive;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', sans-serif;
  --page-max: 1170px;
  --section-gap: 80px;

  /* Pico.css override */
  --brand-primary: var(--color-charcoal);
  --brand-primary-hover: var(--color-charcoal-light);
  --brand-accent: var(--color-silver);
}

/* ── Base reset ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-carbon);
  background: var(--color-paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Focus indicators (WCAG 2.4.7) ───────────────── */
:focus-visible {
  outline: 3px solid var(--color-steel);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-steel);
  outline-offset: 2px;
}
/* Ensure keyboard focus is never hidden */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Remove default list markers site-wide.
   Pico.css applies `ul li { list-style: square }` directly on <li>, which
   overrides the inherited `list-style: none` from parent <ul>. This same
   selector (loaded after Pico) ensures no default markers appear next to
   our custom `li::before` markers. */
ul, ol { list-style: none; padding: 0; }
ul li, ol li { list-style: none; }

/* ── Typography ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* ── Site header (legacy, kept for compatibility) ─ */
.site-header {
  padding-top: var(--pico-spacing);
  padding-bottom: var(--pico-spacing);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.site-logo {
  text-decoration: none;
}

/* ── Navigation ────────────────────────────────── */
.nav-links a[aria-current="page"] {
  font-weight: bold;
  border-bottom: 2px solid currentColor;
}

/* ── Breadcrumbs ───────────────────────────────── */
.breadcrumbs {
  padding: var(--pico-spacing) 0;
  font-size: 0.875rem;
}

/* ── Error pages ───────────────────────────────── */
.page-error main {
  text-align: center;
  padding: var(--pico-block-spacing-vertical) 0;
}

.page-error h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  margin-bottom: var(--pico-spacing);
}

/* ── Placeholder for gallery images ────────────── */
.placeholder-img {
  background: var(--color-mist);
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--pico-border-radius);
}

/* ── Address styling ───────────────────────────── */
address {
  font-style: normal;
}

/* ── Utility: table overflow on mobile ────────── */
.overflow-auto {
  overflow-x: auto;
}

/* ── Utility: container for constrained content ─ */
.container-constrained {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px;
}