/* Carlo's Seafood menu page. Prefix: csm- */

/* ---------- Hero ---------- */
.csm-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 170px; text-align: center; background: linear-gradient(180deg, #3fb2ea 0%, #7fd3f4 60%, #c9eefc 100%); }
.csm-hero__inner { position: relative; z-index: 2; }
.csm-hero__kicker { color: var(--cs-navy-deep); }
.csm-hero__title { margin: 0 0 14px; font-size: clamp(3.2rem, 11vw, 7rem); color: var(--cs-red); text-shadow: 4px 4px 0 var(--cs-white), -3px -3px 0 var(--cs-white), 3px -3px 0 var(--cs-white), -3px 3px 0 var(--cs-white), 9px 10px 0 var(--cs-navy); }
.csm-hero__title span { display: inline-block; animation: csDrop .8s cubic-bezier(.2,1.5,.4,1) both; }
.csm-hero__title span:nth-child(2) { animation-delay: .15s; color: var(--cs-navy); text-shadow: 4px 4px 0 var(--cs-white), -3px -3px 0 var(--cs-white), 3px -3px 0 var(--cs-white), -3px 3px 0 var(--cs-white), 9px 10px 0 var(--cs-red); }
@keyframes csDrop { 0% { opacity: 0; transform: translateY(-70px) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
.csm-hero__sub { max-width: 620px; margin: 0 auto 28px; font-size: 1.2rem; font-weight: 700; color: var(--cs-navy-deep); animation: csFadeUp .6s ease .35s both; }
.csm-hero .csh-ctas { animation: csFadeUp .6s ease .5s both; }
.csm-hero__crab { position: absolute; z-index: 3; width: 170px; right: 8%; bottom: 40px; animation: csmPeekUp 1s cubic-bezier(.2,1.5,.4,1) .7s both, csmClaws 2.4s ease-in-out 1.7s infinite; transform-origin: 50% 100%; }
@keyframes csmPeekUp { from { transform: translateY(140px); } to { transform: none; } }
@keyframes csmClaws { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.csm-hero__star { position: absolute; z-index: 1; width: 70px; animation: csmSpinFloat 8s ease-in-out infinite; }
.csm-hero__star.s1 { left: 7%; top: 22%; }
.csm-hero__star.s2 { right: 18%; top: 14%; width: 56px; animation-delay: -3s; }
.csm-hero__drink { position: absolute; z-index: 1; width: 130px; left: 9%; bottom: 70px; animation: csFloat 3.2s ease-in-out infinite; }
@keyframes csmSpinFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(40deg); } }
.csm-hero__bubbles span { position: absolute; bottom: -30px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); animation: csmRise 7s linear infinite; }
.csm-hero__bubbles span:nth-child(1) { left: 14%; }
.csm-hero__bubbles span:nth-child(2) { left: 30%; width: 10px; height: 10px; animation-delay: -2s; animation-duration: 9s; }
.csm-hero__bubbles span:nth-child(3) { left: 52%; animation-delay: -4s; }
.csm-hero__bubbles span:nth-child(4) { left: 68%; width: 22px; height: 22px; animation-delay: -1s; animation-duration: 10s; }
.csm-hero__bubbles span:nth-child(5) { left: 82%; width: 12px; height: 12px; animation-delay: -6s; }
.csm-hero__bubbles span:nth-child(6) { left: 92%; animation-delay: -3.5s; animation-duration: 8s; }
@keyframes csmRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(-260px) translateX(14px); } 100% { transform: translateY(-560px) translateX(-10px); opacity: 0; } }

/* ---------- Sticky category nav ---------- */
.csm-nav { position: sticky; top: var(--cs-header-h); z-index: 40; background: var(--cs-navy); border-bottom: 4px solid var(--cs-red); box-shadow: 0 8px 20px rgba(15,35,80,.18); }
.csm-nav__bar { max-width: var(--cs-max); margin: 0 auto; padding: 10px var(--cs-gutter); display: flex; gap: 10px; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.csm-nav__bar::-webkit-scrollbar { display: none; }
.csm-nav a { flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; font-family: var(--cs-font-head); font-size: 1.08rem; letter-spacing: .5px; color: var(--cs-white); text-decoration: none; border: 2px solid rgba(255,255,255,.35); transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,1.6,.4,1), border-color .25s ease; }
.csm-nav a:hover { transform: translateY(-2px); border-color: var(--cs-white); }
.csm-nav a.is-active { background: var(--cs-sun); color: var(--cs-navy-deep); border-color: var(--cs-sun); transform: scale(1.06); }
@media (max-width: 700px) { .csm-nav__bar { justify-content: flex-start; } }

/* section anchors land below both sticky bars */
.csm-cat { scroll-margin-top: calc(var(--cs-header-h) + 76px); }

/* ---------- Body + category cards ---------- */
.csm-body { padding: clamp(50px, 7vw, 90px) 0; background: linear-gradient(180deg, var(--cs-sand) 0%, var(--cs-cream) 30%, var(--cs-cream) 70%, var(--cs-sand) 100%); }
.csm-grid { display: grid; gap: 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 34px 0; }
@media (max-width: 860px) { .csm-grid { grid-template-columns: 1fr; } }

.csm-cat { position: relative; background: var(--cs-white); border: 3px solid var(--cs-navy); border-radius: 26px; padding: 0 clamp(18px, 3.5vw, 34px) 30px; box-shadow: 9px 9px 0 var(--cs-navy); }
.csm-cat:nth-of-type(even) { border-color: var(--cs-red); box-shadow: 9px 9px 0 var(--cs-red); }
.csm-cat.csm-cat--feature { border-color: var(--cs-red); box-shadow: 9px 9px 0 var(--cs-red); padding-right: clamp(18px, 14vw, 190px); }
.csm-cat.csm-cat--wide { margin-top: 0; border-color: var(--cs-palm); box-shadow: 9px 9px 0 var(--cs-palm); }

/* wooden sign header that hangs over the card edge */
.csm-sign { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: -26px 0 18px; padding: 10px 26px 10px 16px; border-radius: 14px; background: repeating-linear-gradient(180deg, #d58e46 0 14px, #c47b37 14px 16px); border: 3px solid #8a4f1c; box-shadow: 0 6px 0 #8a4f1c, 0 10px 18px rgba(0,0,0,.18); transform-origin: 50% 0; transform: rotate(-1.5deg); transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.csm-cat:hover .csm-sign { transform: rotate(1.5deg) scale(1.04); }
.csm-cat.is-in .csm-sign { animation: csmSwingIn 1.1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes csmSwingIn { 0% { transform: rotate(-14deg) translateY(-14px); opacity: 0; } 60% { transform: rotate(4deg); opacity: 1; } 100% { transform: rotate(-1.5deg); } }
.csm-sign img { width: 40px; height: 40px; object-fit: contain; transition: transform .6s ease; }
.csm-cat:hover .csm-sign img { transform: rotate(180deg) scale(1.1); }
.csm-sign h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--cs-cream); text-shadow: 0 3px 0 var(--cs-red-dark), 0 0 1px #000; }
.csm-note { color: var(--cs-muted); font-weight: 700; margin: 0 0 14px; }
.csm-sub { margin: 22px 0 10px; font-size: 1.3rem; color: var(--cs-red); }

/* item rows (base row styles come from components.css .csh-items) */
.csm-items li { padding: 8px 10px 8px 40px; margin: 0; border-radius: 10px; transition: background .25s ease, transform .25s ease; }
.csm-items li::before { left: 8px; top: .55em; }
.csm-items li:hover { background: var(--cs-sky-light); transform: translateX(4px); }
.csm-items li:hover b { color: var(--cs-red); }
.csm-items li b small { font-size: .78em; color: var(--cs-muted); font-weight: 700; }
.csm-items li em { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--cs-red); color: var(--cs-white); font-style: normal; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; vertical-align: 2px; animation: csmPulse 2.4s ease-in-out infinite; }
@keyframes csmPulse { 50% { transform: scale(1.1); } }
.csm-items--2col { columns: 2; column-gap: 34px; }
.csm-items--2col li { break-inside: avoid; }
@media (max-width: 700px) { .csm-items--2col { columns: 1; } }

/* rows cascade in once the card is revealed */
.csm-cat .csm-items li, .csm-cat .csm-table tbody tr { opacity: 0; transform: translateX(-16px); }
.csm-cat.is-in .csm-items li, .csm-cat.is-in .csm-table tbody tr { animation: csSlideIn .45s ease both; }
.csm-cat.is-in li:nth-child(1), .csm-cat.is-in tr:nth-child(1) { animation-delay: .25s; }
.csm-cat.is-in li:nth-child(2), .csm-cat.is-in tr:nth-child(2) { animation-delay: .31s; }
.csm-cat.is-in li:nth-child(3), .csm-cat.is-in tr:nth-child(3) { animation-delay: .37s; }
.csm-cat.is-in li:nth-child(4), .csm-cat.is-in tr:nth-child(4) { animation-delay: .43s; }
.csm-cat.is-in li:nth-child(5) { animation-delay: .49s; }
.csm-cat.is-in li:nth-child(6) { animation-delay: .55s; }
.csm-cat.is-in li:nth-child(7) { animation-delay: .61s; }
.csm-cat.is-in li:nth-child(n+8) { animation-delay: .67s; }
.csm-cat.is-in .csm-items li:hover { transform: translateX(4px); }

/* size tables */
.csm-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-weight: 700; }
.csm-table th, .csm-table td { padding: 8px 10px; text-align: center; }
.csm-table thead th { font-family: var(--cs-font-head); font-weight: 400; font-size: 1.05rem; color: var(--cs-white); background: var(--cs-navy); }
.csm-table thead th:first-child { text-align: left; border-radius: 10px 0 0 10px; }
.csm-table thead th:last-child { border-radius: 0 10px 10px 0; }
.csm-table tbody th { text-align: left; font-weight: 700; color: var(--cs-ink); }
.csm-table tbody tr { background: var(--cs-cream); transition: background .25s ease; }
.csm-table tbody tr:hover { background: var(--cs-sky-light); }
.csm-table tbody th { border-radius: 10px 0 0 10px; }
.csm-table tbody td:last-child { border-radius: 0 10px 10px 0; }
.csm-table td { color: var(--cs-navy); font-weight: 800; }
.csm-table .csm-na { color: var(--cs-muted); }

.csm-sides { display: grid; gap: 30px; grid-template-columns: 1.1fr 1fr; align-items: start; }
@media (max-width: 860px) { .csm-sides { grid-template-columns: 1fr; } }

/* mascots on cards */
.csm-cat__mascot { position: absolute; width: clamp(110px, 14vw, 180px); right: -30px; top: 40%; animation: csPeek 5s ease-in-out infinite; transform-origin: bottom center; }
@media (max-width: 700px) { .csm-cat--feature { padding-right: clamp(18px, 3.5vw, 34px); padding-bottom: 80px; } .csm-cat__mascot { top: auto; bottom: -30px; right: -10px; width: 110px; } }
.csm-cat__umbrella { position: absolute; width: 130px; right: 20px; top: -64px; transform-origin: 60% 100%; animation: csmClaws 6s ease-in-out infinite; }
@media (max-width: 700px) { .csm-cat__umbrella { width: 90px; top: -50px; } }

/* ---------- Order-ahead callout ---------- */
.csm-callout { display: grid; gap: 40px; grid-template-columns: 1fr 1.2fr; align-items: center; margin: 60px 0 10px; padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: var(--cs-navy); color: var(--cs-white); box-shadow: 0 22px 40px rgba(15,35,80,.25); }
.csm-callout h2 { color: var(--cs-sun); }
.csm-callout a:not(.cs-btn) { color: var(--cs-white); font-weight: 800; }
.csm-callout .cs-list { margin-bottom: 24px; font-weight: 700; }
.csm-callout__sign { width: 100%; max-width: 420px; margin: 0 auto; transform-origin: 50% 0; }
.csm-callout.is-in .csm-callout__sign { animation: csmHang 4s ease-in-out infinite; }
@keyframes csmHang { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (max-width: 860px) { .csm-callout { grid-template-columns: 1fr; text-align: center; } .csm-callout .cs-list { display: inline-block; text-align: left; } }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .csm-hero { padding-bottom: 150px; }
  .csm-hero__crab { width: 110px; right: 4%; bottom: 46px; }
  .csm-hero__drink { width: 80px; left: 4%; bottom: 60px; }
  .csm-hero__star.s1 { width: 40px; left: auto; right: 34%; top: auto; bottom: 64px; }
  .csm-hero__star.s2 { width: 34px; right: 5%; top: auto; bottom: 200px; }
  .csm-hero__title { text-shadow: 3px 3px 0 var(--cs-white), -2px -2px 0 var(--cs-white), 2px -2px 0 var(--cs-white), -2px 2px 0 var(--cs-white), 5px 6px 0 var(--cs-navy); }
  .csm-hero__title span:nth-child(2) { text-shadow: 3px 3px 0 var(--cs-white), -2px -2px 0 var(--cs-white), 2px -2px 0 var(--cs-white), -2px 2px 0 var(--cs-white), 5px 6px 0 var(--cs-red); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .csm-cat .csm-items li, .csm-cat .csm-table tbody tr { opacity: 1; transform: none; }
}