/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   globals.css — GLOBAL STYLES
   YOU CAN EDIT THIS FILE.
   Controls fonts, colors, and animations used across the whole site.
   ============================================================================= */

/* ── FONTS ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── COLOR VARIABLES ────────────────────────────────────────────────────────── 
   Change a value here and it updates everywhere on the site.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --red:        #c41230;
  --red-dark:   #9e0e26;
  --red-light:  #e8192e;
  --red-pale:   #fff0f2;
  --black:      #1a1a18;
  --off-white:  #fafaf8;
  --gray-light: #f2f2f0;
  --gray:       #d0cfc9;
  --gray-mid:   #999890;
  --gray-dark:  #4a4945;
  --white:      #ffffff;
}

/* ── BASE ───────────────────────────────────────────────────────────────────── */
html, body {
  background: var(--off-white);
  color: var(--black);
  font-family: 'Source Sans 3', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,18,48,0.2); }
  50%       { box-shadow: 0 0 0 10px rgba(196,18,48,0); }
}

.fade-in   { animation: fadeIn 0.4s ease both; }
.fade-up   { animation: fadeUp 0.35s ease both; }
.fade-in-d { animation: fadeIn 0.5s ease 0.15s both; }
.pulse-red { animation: pulse 2.5s infinite; }

/* ── RATING ICON WRAPPER ─────────────────────────────────────────────────────
   Used for all rating symbols — Lu's hearts, community average, voter thongs.
   The partial fill effect uses CSS clip-path for fractional averages.
   ─────────────────────────────────────────────────────────────────────────── */
.rating-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
  overflow: hidden;
}

.rating-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* Filled = full color, empty = faded gray */
.rating-icon.filled  { opacity: 1; }
.rating-icon.empty   { opacity: 0.2; filter: grayscale(1); }
.rating-icon.hovering { transform: scale(1.15); opacity: 1; }

/* Partial fill — controlled by --fill-pct CSS variable */
.rating-icon.partial {
  opacity: 1;
}
.rating-icon.partial::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--off-white);
  clip-path: inset(0 0 0 var(--fill-pct, 100%));
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-grid   { grid-template-columns: 1fr !important; }
  .hero-grid > div:nth-child(2) { border-left: none !important; border-top: 1px solid var(--gray); }
  .header-flex { flex-direction: row !important; align-items: center !important; }
  .login-grid  { grid-template-columns: 1fr !important; }
  .medallion   { display: none !important; }
  .chef-box    { width: 90px !important; min-height: 90px !important; }
}

/* ── SCROLLBAR ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ── I NEED THIS — icon tooltip hover ───────────────────────────────────────── */
.needs-this-wrap:hover .needs-this-icon { opacity: 0.85 !important; }
.needs-this-wrap:hover .needs-this-tip  { opacity: 1 !important; }