/* ============================================================
   NOOK BASE — reset, document, layout primitives, a11y
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--nook-bg);
  color: var(--nook-ink);
  min-height: 100vh;
  overflow-x: hidden;
}

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

/* The UA's [hidden] rule loses to any component `display`, so make it
   authoritative — .hidden is how the app toggles visibility. */
[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--nook-border);
  margin: 0;
}

::selection {
  background: var(--n-amber-200);
  color: var(--nook-ink-strong);
}

/* ---------- Focus: visible, warm, never removed ---------- */

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--nook-ring);
  border-radius: var(--nook-r-sm);
}
.n-on-dark :focus-visible,
.n-dark :focus-visible { box-shadow: var(--nook-ring-dark); }

/* ---------- Screen-reader-only ---------- */

.n-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop. */
.n-skip {
  position: absolute;
  left: var(--nook-s-4);
  top: -80px;
  z-index: 200;
  background: var(--nook-espresso);
  color: var(--nook-on-dark);
  padding: var(--nook-s-3) var(--nook-s-5);
  border-radius: var(--nook-r-md);
  font-size: 13px;
  font-weight: 500;
  transition: top var(--nook-t-base) var(--nook-ease-out);
}
.n-skip:focus-visible { top: var(--nook-s-4); }

/* ---------- Layout primitives ---------- */

.n-wrap {
  width: 100%;
  max-width: var(--nook-max);
  margin-inline: auto;
  padding-inline: var(--nook-gutter);
}
.n-wrap--wide { max-width: var(--nook-max-wide); }
.n-wrap--read { max-width: var(--nook-max-read); }

.n-section     { padding-block: var(--nook-s-24); }
.n-section--sm { padding-block: var(--nook-s-16); }
.n-section--lg { padding-block: var(--nook-s-32); }
.n-section--flush-top { padding-top: 0; }

.n-stack > * + * { margin-top: var(--nook-s-4); }
.n-stack-2 > * + * { margin-top: var(--nook-s-2); }
.n-stack-6 > * + * { margin-top: var(--nook-s-6); }
.n-stack-8 > * + * { margin-top: var(--nook-s-8); }
.n-stack-12 > * + * { margin-top: var(--nook-s-12); }

.n-row {
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
}
.n-row--between { justify-content: space-between; }
.n-row--wrap { flex-wrap: wrap; }
.n-row--top { align-items: flex-start; }
.n-spacer { flex: 1; }

.n-grid { display: grid; gap: var(--nook-s-6); }

/* Editorial asymmetric grids — deliberately NOT three equal cards. */
.n-grid--2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n-grid--3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-grid--4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.n-grid--7-5    { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.n-grid--5-7    { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.n-grid--8-4    { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.n-grid--4-8    { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.n-grid--tight  { gap: var(--nook-s-4); }
.n-grid--loose  { gap: var(--nook-s-10); }

/* ---------- Surfaces ---------- */

.n-surface {
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
}
.n-surface--alt  { background: var(--nook-surface-alt); }
.n-surface--sunk { background: var(--nook-bg-sunk); }
.n-surface--ink {
  background: var(--nook-surface-ink);
  color: var(--nook-on-dark);
  border-color: transparent;
}
.n-surface--ink .n-d1,
.n-surface--ink .n-d2,
.n-surface--ink .n-d3,
.n-surface--ink .n-d4,
.n-surface--ink .n-numeral { color: var(--nook-on-dark); }
.n-surface--ink .n-muted { color: var(--nook-on-dark-muted); }

/* ---------- Dividers ---------- */

.n-hr { height: 1px; background: var(--nook-border); border: 0; }
.n-hr--strong { background: var(--nook-border-strong); }
.n-vr { width: 1px; align-self: stretch; background: var(--nook-border); }

/* ---------- Reveal on scroll ---------- */

.n-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--nook-t-slow) var(--nook-ease-out),
    transform var(--nook-t-slow) var(--nook-ease-out);
}
.n-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .n-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- App shell ---------- */

#nook-main {
  min-height: 60vh;
  padding-bottom: var(--nook-s-16);
}

/* Route transition — a short, calm cross-fade with a hair of lift. */
.n-route {
  animation: n-route-in var(--nook-t-page) var(--nook-ease-out) both;
}
@keyframes n-route-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .n-route { animation: none; }
}

/* ---------- Responsive collapse ---------- */

@media (max-width: 1024px) {
  :root { --nook-gutter: 26px; }
  .n-grid--7-5, .n-grid--5-7,
  .n-grid--8-4, .n-grid--4-8 { grid-template-columns: minmax(0, 1fr); }
  .n-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-section    { padding-block: var(--nook-s-16); }
  .n-section--lg { padding-block: var(--nook-s-20); }
}

@media (max-width: 768px) {
  :root { --nook-gutter: 20px; }
  .n-grid--3 { grid-template-columns: minmax(0, 1fr); }
  body { padding-bottom: var(--nook-tabbar-h); }
}

@media (max-width: 560px) {
  :root { --nook-gutter: 18px; }
  .n-grid--2, .n-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .n-section    { padding-block: var(--nook-s-12); }
  .n-section--sm { padding-block: var(--nook-s-10); }
}

/* ------------------------------------------------------------------
   Overflow safety.

   Grid and flex children default to `min-width: auto`, which means a
   wide child (a floor plan, a scrolling tab strip, a long word) can
   force its column wider than the viewport and give the whole page a
   horizontal scrollbar. Every layout container in Nook opts out, so
   inner `overflow-x: auto` regions actually scroll themselves.
   ------------------------------------------------------------------ */

.n-grid > *,
.n-hero-grid > *,
.n-why-grid > *,
.n-space-grid > *,
.n-cafe-grid > *,
.n-plans > *,
.n-mynook-grid > *,
.n-community-grid > *,
.n-rewards-grid > *,
.n-contact-grid > *,
.n-about-story > *,
.n-about-find > *,
.n-event-detail > *,
.n-settings > *,
.n-rec > *,
.n-today-grid > *,
.n-today-stats > *,
.n-foot-top > * { min-width: 0; }

/* Rows that contain a scrolling strip must be allowed to shrink too. */
.n-cafe-filters .n-row > *,
.n-row > .n-tabs { min-width: 0; }

/* Utility escape hatches (kept few on purpose) */
.n-hide { display: none !important; }
@media (max-width: 768px)  { .n-hide-mobile  { display: none !important; } }
@media (min-width: 769px)  { .n-only-mobile  { display: none !important; } }
@media (max-width: 1024px) { .n-hide-tablet  { display: none !important; } }