/* Los Rancheros components (lr-*) — from the Los Rancheros design system. Fonts load in each page <head>. */
/* Los Rancheros component styles. Class prefix: lr-. Every value comes from tokens.css. */

body.lr-page, .lr-page {
  background-color: var(--parchment);
  background-image: url("../images/new-design/parchment-texture-tile.jpg");
  background-size: 1275px auto;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 28px;
}

/* ---------- Section title: the printed menu headers ---------- */
.lr-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--marigold);
  -webkit-text-stroke: var(--title-stroke) var(--chile);
  paint-order: stroke fill;
  text-shadow: var(--shadow-title);
}
.lr-section-title--cactus { -webkit-text-stroke-color: var(--cactus); }
.lr-section-title--sm { font-size: 40px; }
.lr-section-title--hero { font-size: 88px; line-height: 0.92; -webkit-text-stroke-width: calc(var(--title-stroke) * 1.5); }
@media (max-width: 575.98px) {
  .lr-section-title { font-size: 40px; }
  .lr-section-title--hero { font-size: 56px; }
}

/* ---------- Eyebrow / labels ---------- */
.lr-eyebrow {
  font-family: var(--font-name);
  font-size: 13px; line-height: 18px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- Menu item ---------- */
.lr-item { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); align-items: baseline; }
.lr-item + .lr-item { margin-top: var(--space-5); }
.lr-item__name {
  margin: 0; font-family: var(--font-name); font-weight: 400;
  font-size: 19px; line-height: 24px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.lr-item__leader { display: none; }
.lr-item__price { font-family: var(--font-text); font-weight: 600; font-size: 17px; line-height: 24px; color: var(--brick); white-space: nowrap; }
.lr-item__body { grid-column: 1 / -1; }
.lr-item__desc { margin: var(--space-2) 0 0; font-size: 16px; line-height: 25px; color: var(--ink); max-width: 62ch; }
.lr-item__options { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--ink-muted); }
.lr-item__options li { display: flex; gap: var(--space-2); justify-content: space-between; }
.lr-item__options li + li { margin-top: var(--space-1); }
.lr-item__options .amt { color: var(--brick); font-weight: 600; white-space: nowrap; }
.lr-item__options .add::before { content: "+ "; }
.lr-item__choices { margin: var(--space-2) 0 0; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--ink-muted); }

/* Size grid for margaritas: SMALL MEDIUM LARGE PITCHER */
.lr-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 72px)); gap: 0 var(--space-3); margin-top: var(--space-2); }
.lr-sizes dt { font-family: var(--font-name); font-size: 12px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brick); grid-row: 1; }
.lr-sizes dd { margin: 0; grid-row: 2; font-weight: 600; color: var(--brick); }

/* ---------- Menu section ---------- */
.lr-menu-section { scroll-margin-top: 96px; }
.lr-menu-section + .lr-menu-section { margin-top: var(--space-8); }
.lr-menu-section__head { text-align: center; margin-bottom: var(--space-6); }
.lr-menu-section__intro { margin: var(--space-3) auto 0; max-width: 56ch; font-style: italic; color: var(--ink-muted); font-size: 16px; line-height: 25px; }
.lr-menu-section--framed { border: var(--rule-width) solid var(--frame-red); padding: var(--space-6) var(--space-5); background: color-mix(in srgb, var(--parchment-light) 55%, transparent); }
/* compact: short items in 2-3 columns on wide screens */
.lr-compact { display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-6); }
.lr-compact .lr-item + .lr-item { margin-top: 0; }
@media (min-width: 768px) { .lr-compact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lr-compact--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .lr-menu-section + .lr-menu-section { margin-top: var(--space-7); } .lr-menu-section--framed { padding: var(--space-5) var(--space-4); } }

/* ---------- Panels: the green Nachos/Tacos block and red Extras block ---------- */
.lr-panel { background: var(--cactus-panel); color: var(--cream); padding: var(--space-6); border-radius: var(--radius-none); }
.lr-panel--salsa { background: var(--salsa); }
.lr-panel--cactus { background: var(--cactus); }
.lr-panel .lr-section-title { -webkit-text-stroke-color: var(--frame-red); }
.lr-panel .lr-item__name, .lr-panel .lr-item__desc { color: var(--cream); }
.lr-panel .lr-item__price, .lr-panel .amt, .lr-panel .lr-sizes dt, .lr-panel .lr-sizes dd { color: var(--marigold); }
.lr-panel .lr-item__options, .lr-panel .lr-item__choices, .lr-panel .lr-eyebrow { color: var(--cream); }
.lr-panel--salsa .lr-item__price, .lr-panel--salsa .amt { color: var(--cream); }

/* ---------- Menu nav: sticky sidebar (lg+) and chip row (below lg) ---------- */
.lr-menu-nav { position: sticky; top: 88px; background: var(--parchment-light); border: var(--rule-width) solid var(--frame-red); padding: var(--space-4) 0; }
.lr-menu-nav__label { padding: 0 var(--space-5) var(--space-2); }
.lr-menu-nav a { display: block; padding: 6px var(--space-5); font-family: var(--font-name); font-size: 15px; line-height: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-left: 4px solid transparent; }
.lr-menu-nav a:hover { background: var(--parchment-deep); }
.lr-menu-nav a.active, .lr-menu-nav a[aria-current="true"] { border-left-color: var(--chile); color: var(--ink); font-weight: 400; background: var(--parchment-deep); }
.lr-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-3) var(--space-4); background: var(--parchment-light); border-bottom: var(--rule-width) solid var(--frame-red); scrollbar-width: none; }
.lr-chips a { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--parchment-deep); color: var(--ink); font-family: var(--font-name); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.lr-chips a.active, .lr-chips a[aria-current="true"] { background: var(--cactus); color: var(--cream); }

/* ---------- Buttons (map onto Bootstrap .btn) ---------- */
.lr-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: 2px solid var(--brick); background: var(--brick); color: var(--cream); font-family: var(--font-name); font-size: 15px; line-height: 20px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.lr-btn:hover { background: var(--cactus); border-color: var(--cactus); }
.lr-btn--outline { background: transparent; color: var(--brick); }
.lr-btn--outline:hover { background: var(--brick); color: var(--cream); border-color: var(--brick); }
.lr-btn--cactus { background: var(--cactus); border-color: var(--cactus); }
.lr-btn--cactus:hover { background: var(--brick); border-color: var(--brick); }
.lr-btn:focus-visible, .lr-menu-nav a:focus-visible, .lr-chips a:focus-visible, .lr-nav a:focus-visible { outline: 3px solid var(--cactus); outline-offset: 2px; }
.lr-panel .lr-btn:focus-visible, .lr-footer a:focus-visible { outline-color: var(--marigold); }

/* ---------- Photo frame: the printed menu's patterned orange border ---------- */
.lr-photo { margin: 0; display: inline-block; padding: var(--frame-width); background: repeating-linear-gradient(45deg, var(--chile) 0 6px, var(--frame-red) 6px 8px, var(--chile) 8px 14px); box-shadow: var(--shadow-photo); }
.lr-photo img { display: block; width: 100%; height: auto; border: 2px solid var(--frame-red); }
.lr-photo figcaption { background: var(--parchment-light); color: var(--ink-muted); font-size: 13px; line-height: 19px; padding: var(--space-2) var(--space-3); }

/* ---------- Site header ---------- */
.lr-nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-2) var(--space-5); background: var(--parchment-light); border-bottom: var(--rule-width) solid var(--frame-red); }
.lr-nav__logo img { display: block; height: 64px; width: auto; }
.lr-nav__links { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.lr-nav__links > li { position: relative; }
.lr-nav__links > li > a { white-space: nowrap; font-family: var(--font-name); font-size: 14px; line-height: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.lr-nav__links > li > a:hover, .lr-nav__links > li > a[aria-current="page"], .lr-nav__links > li > a[aria-expanded="true"] { border-bottom-color: var(--chile); color: var(--brick); }
.lr-nav__call { margin-left: auto; white-space: nowrap; }
.lr-caret::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 3px; border: 4px solid transparent; border-bottom: 0; border-top: 5px solid currentColor; }

/* Menu dropdown (desktop): every food-menu section, in printed-menu order */
.lr-megamenu { position: absolute; top: calc(100% + 20px); left: calc(-1 * var(--space-5)); width: 600px; z-index: 1000; background: var(--parchment-light); border: var(--rule-width) solid var(--frame-red); box-shadow: var(--shadow-photo); padding: var(--space-5); }
.lr-megamenu__label { margin-bottom: var(--space-2); }
.lr-megamenu__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-5); }
.lr-megamenu__grid a, .lr-mnav__sections a { display: block; padding: 6px 0; font-family: var(--font-name); font-size: 14px; line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.lr-megamenu__grid a:hover, .lr-mnav__sections a:hover { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; }
.lr-megamenu__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--parchment-deep); }
.lr-megamenu__foot a { font-family: var(--font-name); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brick); }

/* Mobile menu (below xl): stacked links, Menu opens its sections in place */
.lr-mnav, .lr-mnav * { box-sizing: border-box; }
.lr-mnav { background: var(--parchment-light); border: var(--rule-width) solid var(--frame-red); }
.lr-mnav__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); border-bottom: var(--rule-width) solid var(--frame-red); }
.lr-mnav__bar img { height: 48px; width: auto; display: block; }
.lr-mnav__toggle { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 2px solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); font-size: 20px; line-height: 1; }
.lr-mnav__list { list-style: none; margin: 0; padding: var(--space-2) 0; }
.lr-mnav__list > li > a, .lr-mnav__list > li > button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: none; border: 0; font-family: var(--font-name); font-size: 16px; line-height: 22px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; text-align: left; }
.lr-mnav__list > li > [aria-current="page"] { color: var(--brick); }
.lr-mnav__sections { list-style: none; margin: 0 var(--space-4) var(--space-2); padding: var(--space-2) var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); background: var(--parchment-deep); }
.lr-mnav__call { padding: var(--space-3) var(--space-4) var(--space-4); }
.lr-mnav__call .lr-btn { width: 100%; justify-content: center; }

/* ---------- Daily special ---------- */
.lr-special { background: var(--parchment-light); border: var(--rule-width) solid var(--frame-red); padding: var(--space-5); text-align: center; }
.lr-special__day { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--marigold); -webkit-text-stroke: var(--title-stroke) var(--cactus); paint-order: stroke fill; text-shadow: var(--shadow-title); }
.lr-special__tag { display: inline-block; margin-top: var(--space-2); background: var(--salsa); color: var(--cream); font-family: var(--font-name); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px var(--space-2); }
.lr-special__deal { margin: var(--space-3) 0 0; font-family: var(--font-name); font-size: 19px; line-height: 24px; letter-spacing: 0.04em; text-transform: uppercase; }
.lr-special__price { margin: var(--space-1) 0 0; font-weight: 600; font-size: 22px; color: var(--brick); }

/* ---------- Footer ---------- */
.lr-footer { background: var(--cactus); color: var(--cream); padding: var(--space-8) var(--space-5); }
.lr-footer a { color: var(--cream); }
.lr-footer .lr-eyebrow { color: var(--marigold); }