/* Texas Roadhouse design kit: a rustic roadhouse. Loaded only on Texas Roadhouse pages (src/lib/kits.ts). */
.kit-texas-roadhouse {
  --tr-red: #8E0328; --tr-amber: #FFA329; --tr-wood-3: #3E2412; --tr-cream: #FFF6E6; --tr-paper: #F6E9D2; --tr-ink: #2B1A10;
  --kit-display: 'Rye', Georgia, serif;
  --kit-slab: 'Roboto Slab', Georgia, serif;
}

/* page: warm paper with a faint speckle */
body.kit-texas-roadhouse {
  --bg: #F3E6CF; --surface: #FFF9EF; --surface-2: #F1E2C8; --line: #E0CBA6; --muted: #6E5640; --ink: #2B1A10;
  --accent: #8E0328; --accent-ink: #FFF6E6; --accent-soft: #F6DCCF;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(122, 74, 39, .07) 1px, transparent 1.6px), radial-gradient(rgba(122, 74, 39, .05) 1px, transparent 1.6px);
  background-size: 22px 22px, 37px 37px; background-position: 0 0, 11px 17px;
}
@media (prefers-color-scheme: dark) {
  body.kit-texas-roadhouse {
    --bg: #1C120B; --surface: #2A1B11; --surface-2: #362317; --line: #4A3220; --muted: #C9A983; --ink: #F6E9D2;
    --accent: #FFB25C; --accent-ink: #2B1A10; --accent-soft: #3A2416;
    background-image: radial-gradient(rgba(255, 214, 160, .05) 1px, transparent 1.6px), radial-gradient(rgba(255, 214, 160, .035) 1px, transparent 1.6px);
  }
}

/* ---------- hero: barn-wood wall ---------- */
.b-hero.kit-texas-roadhouse {
  position: relative; overflow: hidden; color: var(--tr-cream);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .42)),
    repeating-linear-gradient(90deg, transparent 0 158px, rgba(0, 0, 0, .45) 158px 161px, rgba(255, 255, 255, .06) 161px 162px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .05) 9px 11px, transparent 11px 23px),
    linear-gradient(90deg, #6E4122, #845130 18%, #6A3E20 36%, #8A5633 55%, #6C4021 74%, #7E4D2C 100%);
}
.kit-texas-roadhouse .kit-art { position: absolute; inset: 0; pointer-events: none; }
.kit-texas-roadhouse .kt-stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 214, 160, .08); }
.kit-texas-roadhouse .kt-peanuts { position: absolute; right: 3%; bottom: 44px; width: 150px; opacity: .92; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.kit-texas-roadhouse .kt-rope { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; filter: drop-shadow(0 -3px 4px rgba(0, 0, 0, .35)); }
.kit-texas-roadhouse .b-hero-in { position: relative; z-index: 1; padding-bottom: 84px; }
.kit-texas-roadhouse .b-crumbs { opacity: .85; }
.kit-texas-roadhouse .kit-kicker { display: inline-block; margin: 0 0 6px; padding: 7px 16px 6px; font: 800 .74rem/1 var(--kit-slab); letter-spacing: .16em; text-transform: uppercase; color: var(--tr-ink); background: var(--tr-amber); border-radius: 4px; box-shadow: 0 3px 0 #B86F12; transform: rotate(-2deg); }
.kit-texas-roadhouse .b-eyebrow { color: #F2C98F; opacity: 1; margin-top: 10px; }

/* the H1 is a red sign hanging from two ropes */
.b-hero.kit-texas-roadhouse h1 {
  position: relative; display: inline-block; margin: 34px 0 22px; padding: 18px 26px 16px;
  font-family: var(--kit-display); font-weight: 400; font-size: clamp(1.9rem, 3.9vw, 3.2rem); line-height: 1.1; letter-spacing: .01em; color: var(--tr-cream);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), var(--tr-red);
  border: 3px solid #4A0716; border-radius: 10px;
  box-shadow: inset 0 0 0 4px rgba(255, 246, 230, .16), 0 20px 30px -16px rgba(0, 0, 0, .85);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  transform-origin: 50% -30px; animation: kt-sway 2.8s ease-in-out .2s 1 both;
}
.b-hero.kit-texas-roadhouse h1::before, .b-hero.kit-texas-roadhouse h1::after {
  content: ""; position: absolute; top: -34px; width: 5px; height: 34px; border-radius: 3px;
  background: repeating-linear-gradient(160deg, #D2A770 0 4px, #8F6535 4px 7px);
}
.b-hero.kit-texas-roadhouse h1::before { left: 16%; }
.b-hero.kit-texas-roadhouse h1::after { right: 16%; }
.kit-texas-roadhouse .b-lede { color: var(--tr-paper); }
.kit-texas-roadhouse .b-meta svg { stroke: var(--tr-wood-3); background: var(--tr-amber); }
.kit-texas-roadhouse .b-tabs a { border: 2px dashed rgba(255, 246, 230, .55); border-radius: 8px; background: rgba(43, 26, 16, .35); color: var(--tr-cream); font-family: var(--kit-slab); }
.kit-texas-roadhouse .b-tabs a:hover { background: rgba(43, 26, 16, .6); }
.kit-texas-roadhouse .b-tabs a[aria-current] { background: var(--tr-amber); color: var(--tr-ink); border: 2px solid var(--tr-amber); }

/* storefront photo as a polaroid pinned to the boards; our branded medallion below it */
.kit-texas-roadhouse .b-frame { padding: 12px 12px 44px; background: #FFF9EF; border-radius: 4px; transform: rotate(2.2deg); box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .9); }
.kit-texas-roadhouse .b-frame::before { inset: auto; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 35%, #F0E9DD, #8A8174 60%, #4A4239); box-shadow: 0 3px 4px rgba(0, 0, 0, .5); }
.kit-texas-roadhouse .b-photo img { border-radius: 2px; box-shadow: none; }
.kit-texas-roadhouse .kit-emblem { position: absolute; z-index: 3; width: clamp(104px, 11vw, 140px); height: auto; left: -40px; bottom: -42px; transform: rotate(-8deg); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); animation: kt-drop .9s cubic-bezier(.3, 1.4, .5, 1) .6s both; }
.kit-texas-roadhouse .b-photo figcaption { color: var(--tr-paper); opacity: .85; margin-top: 30px; }

/* ---------- page body ---------- */
.kit-texas-roadhouse .jump a { background: linear-gradient(180deg, #8A5633, #6A3E20); color: var(--tr-cream); border: 2px solid #4A2A14; border-radius: 8px; font-family: var(--kit-slab); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 6px 12px -8px rgba(0, 0, 0, .7); }
.kit-texas-roadhouse .jump a:hover { background: var(--tr-amber); color: var(--tr-ink); }
.kit-texas-roadhouse .b-fact { border: 0; border-top: 6px solid var(--tr-red); border-radius: 6px; box-shadow: 0 2px 0 var(--line), 0 12px 22px -18px rgba(62, 36, 18, .7); }
.kit-texas-roadhouse .b-fact b { font: 400 1.5rem/1.1 var(--kit-display); color: var(--brand-text); }
.kit-texas-roadhouse .note { background: var(--surface); border-left-color: var(--tr-amber); border-radius: 6px; }
.kit-texas-roadhouse .sec-title { font-family: var(--kit-display); font-weight: 400; letter-spacing: .01em; }
.kit-texas-roadhouse .sec-title em { color: var(--brand-text); }
.kit-texas-roadhouse .facts-box { color: var(--tr-cream); border: 2px solid #4A2A14; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px), linear-gradient(160deg, #7E4D2C, #5B3419); box-shadow: 0 16px 28px -20px rgba(0, 0, 0, .8); }
.kit-texas-roadhouse .facts-box h2 { color: var(--tr-amber); font-family: var(--kit-display); font-weight: 400; }
.kit-texas-roadhouse .facts-box dt { color: #E7C48F; }
.kit-texas-roadhouse .facts-link { color: var(--tr-amber); }
.kit-texas-roadhouse .pick, .kit-texas-roadhouse .deal, .kit-texas-roadhouse .know-card, .kit-texas-roadhouse .city-card { border-radius: 8px; border-top: 5px solid var(--tr-red); }
.kit-texas-roadhouse .pick { border-top-color: var(--tr-amber); }
.kit-texas-roadhouse .pick li::before { background: var(--tr-red); color: var(--tr-cream); }
.kit-texas-roadhouse .tools { border-radius: 8px; }
.kit-texas-roadhouse details { border-radius: 6px; }

/* section bars: wooden planks with nail heads */
.kit-texas-roadhouse .bar {
  position: relative; padding: 16px 48px; border-radius: 6px; color: var(--tr-cream); border: 2px solid #4A2A14;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px), linear-gradient(180deg, #8A5633, #6A3E20);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 10px 18px -12px rgba(0, 0, 0, .7);
}
.kit-texas-roadhouse .bar::before, .kit-texas-roadhouse .bar::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #EEE6D8, #8C8172 55%, #4B4339); box-shadow: 0 2px 2px rgba(0, 0, 0, .45); }
.kit-texas-roadhouse .bar::before { left: 16px; }
.kit-texas-roadhouse .bar::after { right: 16px; }
.kit-texas-roadhouse .bar h2 { font: 400 clamp(1.05rem, 2.2vw, 1.35rem)/1.2 var(--kit-display); letter-spacing: .04em; text-transform: none; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.kit-texas-roadhouse #menu > section:nth-of-type(odd) > .bar { rotate: .35deg; }
.kit-texas-roadhouse #menu > section:nth-of-type(even) > .bar { rotate: -.4deg; }

/* cards: stitched paper menus with leather price tags */
.kit-texas-roadhouse .mcard { border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line), 0 14px 26px -20px rgba(62, 36, 18, .7); outline: 2px dashed rgba(122, 74, 39, .3); outline-offset: -7px; }
.kit-texas-roadhouse .mcard:hover { transform: translateY(-3px) rotate(-.6deg); }
.kit-texas-roadhouse .mcard .art { border-radius: 4px; }
.kit-texas-roadhouse .mcard h3 { font-family: var(--kit-slab); font-weight: 800; color: var(--tr-wood-3); }
@media (prefers-color-scheme: dark) { .kit-texas-roadhouse .mcard h3 { color: var(--tr-paper); } .kit-texas-roadhouse .mcard { outline-color: rgba(255, 214, 160, .18); } }
.kit-texas-roadhouse .pill { position: relative; border-radius: 6px; padding-left: 24px; font-family: var(--kit-slab); box-shadow: inset 0 0 0 2px var(--tr-red), inset 0 0 0 3.5px rgba(255, 246, 230, .5); }
.kit-texas-roadhouse .pill::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.kit-texas-roadhouse .pill.muted { padding-left: 13px; box-shadow: none; }
.kit-texas-roadhouse .pill.muted::before { display: none; }
.kit-texas-roadhouse .ribbon { background: var(--tr-amber); color: var(--tr-ink); font-family: var(--kit-slab); border-radius: 4px; }

/* ---------- motion ---------- */
@keyframes kt-sway { 0% { transform: rotate(-4deg); } 30% { transform: rotate(3deg); } 55% { transform: rotate(-1.6deg); } 78% { transform: rotate(.8deg); } 100% { transform: rotate(-.6deg); } }
@keyframes kt-drop { from { opacity: 0; transform: translateY(-46px) rotate(-40deg); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes kt-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  .kit-texas-roadhouse .mcard { animation: kt-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) { .kit-texas-roadhouse *, .kit-texas-roadhouse *::before, .kit-texas-roadhouse *::after { animation: none !important; } }

@media (max-width: 860px) {
  .kit-texas-roadhouse .kt-peanuts { display: none; }
  .b-hero.kit-texas-roadhouse h1 { padding: 14px 18px 12px; }
  .kit-texas-roadhouse .b-frame { transform: rotate(1.2deg); }
  .kit-texas-roadhouse .kit-emblem { left: -8px; bottom: -36px; width: 96px; }
  .kit-texas-roadhouse .bar { padding: 14px 38px; }
}