﻿.food-calendar {
  --fc-red: #8f1729;
  --fc-red-dark: #64101f;
  --fc-green: #173d2d;
  --fc-gold: #d6b16d;
  position: relative;
  z-index: 1;
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(24px, 4.5vw, 50px);
  border: 1px solid rgba(214,177,109,.72);
  border-radius: 26px;
  background: linear-gradient(145deg, #fffaf0, #f4eadb);
  color: #35271f;
  box-shadow: 0 18px 42px rgba(35,5,12,.2);
}
.food-calendar-heading { max-width: 650px; margin: 0 auto 28px; text-align: center; }
.food-calendar-mark {
  display: grid; width: 42px; height: 42px; place-items: center; margin: 0 auto 11px;
  border: 1px solid rgba(214,177,109,.65); border-radius: 13px; background: #fff7e8;
  color: var(--fc-red); font-size: 1.4rem;
}
.food-calendar-kicker,.fc-label { margin: 0 0 7px; color: var(--fc-red); font: 700 .64rem/1.3 var(--font-ui); letter-spacing: .16em; }
.food-calendar-heading h2 { margin: 0; color: var(--fc-green); font: 700 clamp(1.9rem, 3.8vw, 2.8rem)/1.08 var(--font-display); letter-spacing: -.035em; }
.food-calendar-heading > p:last-child { margin: 10px auto 0; color: #76675a; font: 400 .88rem/1.55 var(--font-ui); }
.food-calendar-feature {
  position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr) 70px; align-items: center; gap: 18px;
  padding: 21px 23px; border: 1px solid rgba(214,177,109,.72); border-radius: 19px;
  background: linear-gradient(112deg, var(--fc-red) 0%, #741424 58%, var(--fc-green) 100%);
  color: #fff8eb; box-shadow: 0 11px 23px rgba(71,12,24,.17);
}
.food-calendar-feature[hidden] { display: none; }
.fc-feature-icon,.fc-icon { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-variant-emoji: emoji; }
.fc-feature-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(255,248,235,.23); border-radius: 16px; background: rgba(255,248,235,.1); font-size: 2rem; }
.fc-feature-copy { min-width: 0; }
.fc-feature-copy .fc-label { color: #f0d397; }
.fc-feature-copy h3 { margin: 0; color: #fff8eb; font: 700 clamp(1.3rem, 2.6vw, 1.85rem)/1.14 var(--font-display); }
.fc-feature-copy > p:not(.fc-label) { margin: 6px 0 0; color: rgba(255,248,235,.83); font: 400 .78rem/1.5 var(--font-ui); }
.fc-feature-copy .fc-feature-date { color: #f5d99e; }
.fc-feature-calendar { display: grid; width: 68px; min-height: 68px; align-content: center; justify-items: center; border: 1px solid rgba(214,177,109,.65); border-radius: 14px; background: #fff7e8; color: #403024; }
.fc-feature-calendar b { font: 700 1.8rem/1 var(--font-display); }
.fc-feature-calendar small { margin-top: 4px; color: var(--fc-red); font: 700 .6rem/1 var(--font-ui); letter-spacing: .1em; }
.fc-feature-button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; margin-top: 11px; padding: 0 15px; border: 0; border-radius: 999px; background: linear-gradient(135deg,#f0d397,#d6b16d); color: #4e2617; font: 700 .68rem/1 var(--font-ui); text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }
.fc-feature-button:hover { transform: translateY(-2px); background: #ffe5ad; }
.food-calendar-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 14px; }
.fc-card {
  position: relative; display: grid; grid-template-columns: 45px 37px minmax(0,1fr) 30px; align-items: center; gap: 12px;
  min-width: 0; padding: 14px 15px; border: 1px solid #e8ddcb; border-radius: 16px; background: rgba(255,253,248,.9);
  box-shadow: 0 5px 15px rgba(66,47,30,.05); animation: fc-arrive .35s ease both; animation-delay: calc(var(--fc-order)*50ms);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.fc-card::before { position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--fc-red); content: ""; }
.fc-card:nth-child(even)::before { background: var(--fc-green); }
.fc-card:hover { transform: translateY(-2px); border-color: rgba(214,177,109,.8); box-shadow: 0 10px 20px rgba(66,47,30,.1); }
.fc-date { display: grid; width: 43px; height: 46px; align-content: center; justify-items: center; border-radius: 11px; background: #f5eadb; color: #4e2617; }
.fc-date b { font: 700 1.1rem/1 var(--font-display); }
.fc-date small { margin-top: 3px; color: var(--fc-red); font: 700 .54rem/1 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; }
.fc-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #edf1e8; font-size: 1.35rem; }
.fc-card-copy { min-width: 0; }
.fc-card h3 { margin: 0; color: var(--fc-green); font: 700 .9rem/1.25 var(--font-display); }
.fc-card-copy p { margin: 4px 0 0; color: #7a6a5b; font: 600 .64rem/1.3 var(--font-ui); }
.fc-link { display: grid; width: 29px; height: 29px; place-items: center; padding: 0; border: 1px solid rgba(143,23,41,.2); border-radius: 50%; background: #fbf0e7; color: var(--fc-red); font: 700 .9rem/1 var(--font-ui); text-decoration: none; cursor: pointer; transition: background .2s,color .2s; }
.fc-link:hover { background: var(--fc-red); color: #fff8eb; }
.food-calendar-empty { padding: 23px 12px; border: 1px dashed rgba(143,23,41,.3); border-radius: 16px; color: #756558; text-align: center; }
.food-calendar-empty[hidden],.food-calendar-toast[hidden] { display: none; }
.food-calendar-empty > span { color: var(--fc-red); font-size: 1.4rem; }
.food-calendar-empty p { margin: 7px 0 0; font: 500 .8rem/1.5 var(--font-ui); }
.food-calendar-toast { margin-top: 13px; padding: 12px 15px; border: 1px solid rgba(214,177,109,.7); border-radius: 12px; background: #fff4df; color: #58432d; font: 500 .74rem/1.5 var(--font-ui); }
.food-calendar-toast a { color: var(--fc-red); font-weight: 700; }
.food-calendar :focus-visible { outline: 3px solid #c88a49; outline-offset: 3px; }
@keyframes fc-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .food-calendar-grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) {
  .food-calendar { margin-top: 48px; padding: 22px 14px; border-radius: 21px; }
  .food-calendar-heading { margin-bottom: 21px; }
  .food-calendar-heading > p:last-child { max-width: 32ch; font-size: .8rem; }
  .food-calendar-feature { grid-template-columns: 43px minmax(0,1fr); gap: 11px; padding: 16px 13px; }
  .fc-feature-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 1.55rem; }
  .fc-feature-calendar { grid-column: 1; grid-row: 2; width: 43px; min-height: 47px; border-radius: 10px; }
  .fc-feature-calendar b { font-size: 1.3rem; }
  .fc-feature-calendar small { font-size: .5rem; }
  .fc-feature-copy { grid-column: 2; grid-row: 1 / span 2; }
  .fc-feature-copy > p:not(.fc-label) { font-size: .72rem; }
  .fc-feature-button { min-height: 38px; padding: 0 11px; font-size: .62rem; }
  .food-calendar-grid { gap: 9px; margin-top: 10px; }
  .fc-card { grid-template-columns: 41px 32px minmax(0,1fr) 28px; gap: 9px; padding: 12px 11px; }
  .fc-date { width: 40px; height: 43px; }
  .fc-icon { width: 31px; height: 31px; font-size: 1.15rem; }
  .fc-card h3 { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .food-calendar *, .food-calendar *::before, .food-calendar *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* The upcoming celebration controls the colors of the featured and compact cards. */
.food-calendar-feature[data-theme="christmas"] { border-color: #e2b15b; background: linear-gradient(135deg,#0d291e 0%,#1c4d37 50%,#7d111c 100%); }
.food-calendar-feature[data-theme="autumn"] { border-color: #f1a953; background: linear-gradient(135deg,#4a121a 0%,#7a202c 50%,#a34828 100%); }
.food-calendar-feature[data-theme="food-day"] { border-color: #00e676; background: linear-gradient(135deg,#092015 0%,#133a28 100%); }
.food-calendar-feature[data-theme] .fc-feature-icon { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); }
.food-calendar-feature[data-theme="food-day"] .fc-feature-copy .fc-label { color: #82f5b1; }
.food-calendar-feature[data-theme="autumn"] .fc-feature-copy .fc-label,
.food-calendar-feature[data-theme="autumn"] .fc-feature-date { color: #ffd19a; }
.fc-feature-copy .fc-feature-date strong { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid rgba(243,208,133,.55); border-radius: 999px; background: linear-gradient(110deg,#e2b15b,#f3d085); color: #2c281b; font-weight: 800; }
.food-calendar-feature[data-theme="food-day"] .fc-feature-date strong { border-color: #00e676; background: #00e676; color: #082117; }
.fc-feature-button { gap: 10px; background: linear-gradient(120deg,#f3d085,#e2b15b); box-shadow: 0 6px 16px rgba(0,0,0,.16); }
.fc-feature-button::after { content: "→"; transition: transform .2s ease; }
.fc-feature-button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0,0,0,.22),0 0 16px rgba(243,208,133,.28); }
.fc-feature-button:hover::after { transform: translateX(3px); }
.fc-card[data-theme] { border-color: rgba(226,177,91,.28); background: rgba(15,30,22,.88); color: #fff8eb; }
.fc-card[data-theme="autumn"] { border-color: rgba(241,169,83,.36); }
.fc-card[data-theme="food-day"] { border-color: rgba(0,230,118,.34); }
.fc-card[data-theme]::before { background: #e2b15b; }
.fc-card[data-theme="autumn"]::before { background: #f1a953; }
.fc-card[data-theme="food-day"]::before { background: #00e676; }
.fc-card[data-theme] .fc-date { border-color: rgba(243,208,133,.68); background: #fff7e8; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.fc-card[data-theme="autumn"] .fc-date { border-color: #f1a953; }
.fc-card[data-theme="food-day"] .fc-date { border-color: #00e676; }
.fc-card[data-theme] .fc-icon { border-color: rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.fc-card[data-theme] h3 { color: #fff8eb; }
.fc-card[data-theme] .fc-card-copy p { color: #f3d085; }
.fc-card[data-theme="autumn"] .fc-card-copy p { color: #ffc17c; }
.fc-card[data-theme="food-day"] .fc-card-copy p { color: #76e9a6; }
.fc-card[data-theme] .fc-link { border-color: rgba(243,208,133,.48); background: rgba(255,255,255,.1); color: #f3d085; }
.fc-card[data-theme="food-day"] .fc-link { border-color: #00e676; color: #00e676; }
.fc-card[data-theme] .fc-link:hover { background: #e2b15b; color: #173321; }
.fc-card[data-theme="food-day"] .fc-link:hover { background: #00e676; }
.food-calendar-toast { padding: 14px 18px; border-color: rgba(226,177,91,.68); border-radius: 16px; background: rgba(255,250,240,.86); box-shadow: 0 8px 24px rgba(38,31,20,.08); color: #665640; font-weight: 400; }
.food-calendar-toast a { color: #17633a; text-underline-offset: 3px; }
