/* Shared styles for the new Catalog rebuild.
   Keep `newindex.html` markup as-is; this file provides the missing/shared classes. */

/* Base */
html, body {
  height: 100%;
}

/* `newindex.html` uses Tailwind's `font-serif` / `font-sans`, but we want Newsreader/Manrope everywhere. */
.font-serif { font-family: Newsreader, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
.font-sans { font-family: Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; }

/* Stitch helpers extracted from `newindex.html` inline <style> */
.editorial-shadow {
  box-shadow: 0 12px 40px rgba(29, 27, 23, 0.06);
}

.glass-nav {
  backdrop-filter: blur(16px);
  background-color: rgba(254, 249, 241, 0.8);
}

/* Default material symbols settings (many pages use this icon set) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Line clamp (Tailwind CDN doesn't ship line-clamp by default) */
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Animated skeletons (use `.catalog-skeleton`) */
@keyframes catalog-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.catalog-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(29, 27, 23, 0.06); /* subtle on-surface wash */
}

.catalog-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(254, 249, 241, 0.75),
    transparent
  );
  animation: catalog-shimmer 1.1s ease-in-out infinite;
}

/* Safer default focus ring for non-Tailwind elements we may add later.
   Excludes form controls and links — those already get Tailwind's focus:ring
   utility, and stacking both produces a doubled outline. */
:focus-visible:not(input):not(textarea):not(select):not(button):not(a):not([role="button"]) {
  outline: 2px solid rgba(140, 113, 110, 0.55); /* ~outline token */
  outline-offset: 2px;
}

/* Force the Tailwind ring colour to the brand primary-container token globally.
   Tailwind's prebuilt CSS in tw.css doesn't include the project's custom
   ring-primary-container utility, so without this override the ring falls back
   to the default blue (rgba(59,130,246,.5)) on focused inputs/buttons. */
:root {
  --tw-ring-color: #8b1a1a; /* primary-container */
}

/* Hide browser-native password reveal button — we use our own toggle */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

/* Form controls */
input[type="checkbox"] {
  /* For browsers that support native accent */
  accent-color: #8b1a1a; /* primary-container */

  /* Tailwind forms plugin uses `color` for checkbox fill; override the default blue */
  color: #8b1a1a !important;
}

input[type="checkbox"]:checked {
  background-color: #8b1a1a !important;
  border-color: #8b1a1a !important;
}

input[type="checkbox"]:focus {
  border-color: #8b1a1a !important;
  --tw-ring-color: rgba(139, 26, 26, 0.35) !important;
}

/* Restaurant: keep active Been/Saved styling on hover */
#savedBtn[data-active="1"]:hover,
#beenBtn[data-active="1"]:hover {
  color: #ffffff !important; /* on-primary */
  background-color: #690008 !important; /* primary */
}

/* Restaurant: star rating feedback */
@keyframes star-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.catalog-star {
  transform-origin: center;
  transition: color 0.15s ease, transform 0.15s ease;
}

.catalog-star.star-pop {
  animation: star-pop 220ms ease;
}

/* ─── Global top progress bar ──────────────────────────────────────────────── */
#catalog-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  background: #690008; /* primary */
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#catalog-progress-bar.is-loading {
  opacity: 1;
  transform: scaleX(0.85);
  transition: transform 10s cubic-bezier(0.05, 0.5, 0, 1), opacity 0.15s ease;
}

#catalog-progress-bar.is-done {
  transform: scaleX(1) !important;
  transition: transform 0.18s ease, opacity 0.3s ease 0.12s !important;
  opacity: 0 !important;
}

/* ─── Skeleton size helpers (pair with .catalog-skeleton) ───────────────────── */
.skeleton-line-sm   { height: 12px; border-radius: 6px; }
.skeleton-line      { height: 16px; border-radius: 6px; }
.skeleton-line-lg   { height: 22px; border-radius: 8px; }
.skeleton-line-xl   { height: 32px; border-radius: 8px; }
.skeleton-line-2xl  { height: 48px; border-radius: 10px; }
.skeleton-card      { height: 280px; border-radius: 16px; }
.skeleton-hero      { height: 520px; border-radius: 24px; }
.skeleton-thumb     { aspect-ratio: 16/9; border-radius: 12px; }

/* ─── Blog restaurant hyperlinks ──────────────────────────────────────────── */
.catalog-restaurant-link {
  color: #690008; /* primary */
  text-decoration: underline;
  text-decoration-color: rgba(105, 0, 8, 0.35);
  text-underline-offset: 3px;
  font-weight: 500;
  transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}
.catalog-restaurant-link:hover {
  text-decoration-color: #690008;
  opacity: 0.8;
}

/* ─── Restaurant hours component ──────────────────────────────────────────── */
.hours-day-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(29, 27, 23, 0.06);
}
.hours-day-row:last-child { border-bottom: none; }
.hours-day-row.is-today .hours-day-name { color: #690008; font-weight: 700; }
.hours-day-row.is-today { background: rgba(105, 0, 8, 0.03); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.hours-day-name { font-family: Manrope, sans-serif; font-size: 0.8125rem; font-weight: 500; }
.hours-day-time { font-family: Manrope, sans-serif; font-size: 0.8125rem; opacity: 0.75; }
.hours-closed-text { opacity: 0.4; font-style: italic; }
.hours-status-open  { color: #2e7d32; background: rgba(46, 125, 50, 0.1); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.hours-status-closed { color: #c62828; background: rgba(198, 40, 40, 0.1); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }