/* ============================================================
   Horeca Bucovina — Design System CSS
   Heritage Modernism | Editorial-Asymmetric
   ============================================================ */

/* ── Custom Properties (design tokens) ── */
:root {
  --color-primary:                  #061B0E;
  --color-primary-container:        #1B3022;
  --color-secondary:                #775A19;
  --color-secondary-container:      #FED488;
  --color-surface:                  #F9F9F7;
  --color-surface-container-low:    #F4F4F2;
  --color-surface-container-lowest: #FFFFFF;
  --color-on-surface-variant:       #434843;
  --color-outline-variant:          rgba(195,200,193,0.3);

  --shadow-editorial:  0 12px 32px rgba(26, 28, 27, 0.06);
  --shadow-card:       0 4px 16px  rgba(26, 28, 27, 0.04);
  --shadow-float:      0 20px 48px rgba(26, 28, 27, 0.10);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* No overflow-x:hidden here — it breaks position:sticky on descendants */
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-surface);
  color: #1A1C1B;
  min-width: 320px;
  overflow-x: clip;                 /* "clip" prevents overflow without creating a scroll container, so sticky still works */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Fluid media (CLS-safe) ──────────────────────────────────
   :where() forces specificity 0 so any Tailwind utility
   (h-10, w-full, aspect-[…]) overrides without !important.
   ─────────────────────────────────────────────────────────── */
:where(img, svg, video, iframe) {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, .font-headline {
  font-family: 'Playfair Display', serif;
}

/* ── Material Icons ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Glass Nav ── */
.glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Editorial shadow utility ── */
.shadow-editorial { box-shadow: var(--shadow-editorial); }
.shadow-card       { box-shadow: var(--shadow-card); }
.shadow-float      { box-shadow: var(--shadow-float); }

/* ── "Jewel" Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.15s ease;
}
.btn-primary:hover  { opacity: 0.9; }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2.5rem;
  background: var(--color-secondary-container);
  color: #785A1A;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.btn-secondary:hover { background: var(--color-secondary); color: #ffffff; }

/* ── Cards ── */
.card {
  background: #ffffff;
  border-radius: 0;              /* architectural, no radius on base cards */
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.card:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.card:hover .card-image { transform: scale(1.05); }

/* ── Input fields — Bottom-stroke style (48px tap target) ── */
.input-field {
  width: 100%;
  min-height: 48px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  padding: 0.875rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #1A1C1B;
  outline: none;
  transition: border-color 0.25s ease;
}
textarea.input-field { min-height: 7rem; }
.input-field::placeholder { color: #9ca3af; }
.input-field:focus { border-bottom-color: var(--color-secondary); }

.input-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

/* ── Heritage Banner ── */
.heritage-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.heritage-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(27, 48, 34, 0.40);  /* primary-container @ 40% */
}
.heritage-banner .banner-content {
  position: relative;
  z-index: 1;
}

/* ── Tonal layering backgrounds ── */
.bg-level-0 { background-color: #F9F9F7; }   /* surface */
.bg-level-1 { background-color: #F4F4F2; }   /* surface-container-low */
.bg-level-2 { background-color: #FFFFFF; }   /* surface-container-lowest */

/* ── Stats text ── */
.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 3.75rem;
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1;
}

/* ── Tag badges ── */
.badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
}
.badge-primary   { background: var(--color-primary);            color: #fff; }
.badge-secondary { background: var(--color-secondary-container); color: #785A1A; }

/* ── Success / Error alerts ── */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.alert-success {
  background: #D0E9D4;
  color: var(--color-primary);
  border-left: 4px solid var(--color-primary);
}
.alert-error {
  background: #FFDAD6;
  color: #93000A;
  border-left: 4px solid #BA1A1A;
}

/* ── Section spacing ── */
.section-xl  { padding-top: 8rem;  padding-bottom: 8rem;  }
.section-lg  { padding-top: 6rem;  padding-bottom: 6rem;  }
.section-md  { padding-top: 4rem;  padding-bottom: 4rem;  }

/* ── Max container ── */
.container-xl { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 3rem; padding-right: 3rem; }

@media (max-width: 768px) {
  .container-xl { padding-left: 1.5rem; padding-right: 1.5rem; }
  .section-xl   { padding-top: 4rem; padding-bottom: 4rem; }
  .section-lg   { padding-top: 3rem; padding-bottom: 3rem; }
  .stat-number  { font-size: 2.5rem; }
}

/* ── Divider line (accent) ── */
.divider-gold {
  width: 3rem;
  height: 3px;
  background: var(--color-secondary);
  display: block;
  margin-bottom: 1.5rem;
}

/* ── Link arrow style ── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-secondary);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.link-arrow:hover { gap: 0.75rem; }

/* ── Page hero with dark overlay ── */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  color: #ffffff;
}

/* ── Glassmorphism overlay on images ── */
.glass-overlay {
  background: rgba(249, 249, 247, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Pillar icon box ── */
.pillar-icon {
  width: 4rem;
  height: 4rem;
  background: #ffffff;
  box-shadow: var(--shadow-editorial);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, color 0.4s ease;
}
.pillar-icon:hover { background: var(--color-secondary); color: #fff; }

/* ── FAQ accordion ── */
.faq-item { border-bottom: 1px solid rgba(195,200,193,0.3); }
.faq-btn  { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; text-align: left; background: none; border: none; cursor: pointer; }
.faq-btn h3 { font-family: 'Playfair Display', serif; font-size: 1.125rem; font-weight: 700; color: var(--color-primary); transition: color 0.2s; }
.faq-btn:hover h3 { color: var(--color-secondary); }
.faq-body { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.faq-body.open { max-height: 20rem; }
.faq-body p { padding-bottom: 1.25rem; color: var(--color-on-surface-variant); line-height: 1.7; font-size: 0.9375rem; }

/* ============================================================
   RESPONSIVE LAYER — Mobile · Tablet · Desktop
   Breakpoints:   sm 640 · md 768 · nav 992 · lg 1024 · xl 1280
   Mobile-first: defaults target the smallest viewport
   ============================================================ */

/* ── Article body (admin HTML: p/ul/h2/h3/strong/a) ────────── */
.article-body { color: var(--color-on-surface-variant); font-size: 1.0625rem; line-height: 1.75; }
.article-body > * + * { margin-top: 1.25rem; }
.article-body p          { font-size: 1.0625rem; line-height: 1.75; }
.article-body h2,
.article-body h3         { font-family: 'Playfair Display', serif; color: var(--color-primary); line-height: 1.2; margin-top: 2.5rem; }
.article-body h2         { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.article-body h3         { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; }
.article-body ul,
.article-body ol         { padding-left: 1.5rem; }
.article-body ul         { list-style: disc; }
.article-body ol         { list-style: decimal; }
.article-body li + li    { margin-top: 0.5rem; }
.article-body strong     { color: var(--color-primary); font-weight: 700; }
.article-body a          { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover    { color: var(--color-primary); }
.article-body blockquote { border-left: 4px solid var(--color-secondary); padding: 0.5rem 0 0.5rem 1.25rem; font-style: italic; color: var(--color-primary); }

/* ── Back-to-top floating button ───────────────────────────── */
.back-to-top-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-secondary-container);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background 0.25s ease;
  box-shadow: var(--shadow-float);
}
.back-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s, background 0.25s ease;
}
.back-to-top-btn:hover { background: var(--color-secondary); color: #fff; }
.back-to-top-btn:active { transform: scale(0.96); }
.back-to-top-btn .material-symbols-outlined { font-size: 22px; }

@media (min-width: 768px) {
  .back-to-top-btn { right: 2rem; bottom: 2rem; width: 52px; height: 52px; }
  .back-to-top-btn .material-symbols-outlined { font-size: 24px; }
}

/* ── Hamburger button: WCAG 48×48 tap target ───────────────── */
.nav-toggle-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0.5rem;
}
.nav-toggle-btn .material-symbols-outlined { font-size: 28px; }

/* ── Mobile-only hero typography override ──────────────────────
   Desktop: Tailwind classes (text-6xl/7xl/8xl) remain intact.
   Mobile (≤640px): down-scale so titles don't overflow narrow screens.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  section h1.font-headline,
  .hero-title {
    font-size: clamp(2.25rem, 9vw, 3.25rem) !important;
    line-height: 1.1;
    letter-spacing: -0.01em;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  section h2.font-headline {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.15;
  }
}

/* ── Image aspect-ratio guardrails (prevent CLS) ───────────── */
.hero-banner-img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }

/* ── Form: tap-friendly controls + full-width on mobile ────── */
button, [role="button"], a.btn-primary, a.btn-secondary,
.btn-primary, .btn-secondary {
  min-height: 44px;
}

/* ── Tiny mobile (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  .section-xl  { padding-top: 3rem; padding-bottom: 3rem; }
  .section-lg  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .container-xl { padding-left: 1rem; padding-right: 1rem; }

  .stat-number { font-size: 2rem; }
  .pillar-icon { width: 3.25rem; height: 3.25rem; }

  .btn-primary, .btn-secondary { width: 100%; justify-content: center; padding: 0.875rem 1.5rem; }

  /* Any form on mobile — full width */
  form, form .grid { width: 100%; }

  /* Prevent fixed pixel heights from crushing content */
  [class*="h-[500px]"], [class*="h-[560px]"] { height: auto !important; min-height: 380px; }
}

/* ── Mobile (≤ 640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
  /* Heritage banner inline height override */
  .heritage-banner { min-height: 360px; }
  .heritage-banner[style*="height"] { height: auto !important; min-height: 360px; }

  /* Fluid container gutters */
  .container-xl { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ── Tablet (641–991 px) ───────────────────────────────────── */
@media (min-width: 641px) and (max-width: 991px) {
  .section-xl { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ── Nav collapse under 992 px ─────────────────────────────── */
@media (max-width: 991px) {
  #mobile-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* ── Prefers-reduced-motion respect ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}