/* Los Rancheros — page layout shared by every artboard.
   Colours, type and the lr- components come from ds/losrancheros (tokens.css + components/bundle.css).
   Breakpoints match Bootstrap 5: sm 576, md 768, lg 992, xl 1200. */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap--narrow { max-width: 860px; }
@media (max-width: 575.98px) { .wrap { padding: 0 16px; } }

.sec { padding: 96px 0; }
.sec--tight { padding: 64px 0; }
@media (max-width: 767.98px) { .sec { padding: 64px 0; } .sec--tight { padding: 48px 0; } }
.center { text-align: center; }
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head .lr-eyebrow { display: block; margin-bottom: 12px; }
.sec-head .sub { font-family: var(--font-name); font-size: 22px; line-height: 32px; color: var(--ink); margin: 16px auto 0; max-width: 46ch; }
.lead { font-family: var(--font-text); font-size: 20px; line-height: 32px; color: var(--ink); max-width: 60ch; margin: 0 0 24px; }
.center .lead { margin-left: auto; margin-right: auto; }
.prose p { font-size: 17px; line-height: 28px; margin: 0 0 20px; max-width: 66ch; }
.prose--center { max-width: 68ch; margin: 0 auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }
.h2 { font-family: var(--font-name); font-weight: 400; font-size: 32px; line-height: 40px; color: var(--ink); margin: 0 0 20px; }
@media (max-width: 575.98px) { .sec-head .sub { font-size: 19px; line-height: 28px; } .lead { font-size: 18px; line-height: 29px; } .h2 { font-size: 27px; line-height: 34px; } }

/* ---------- Header ---------- */
.hd { position: relative; z-index: 50; font-family: var(--font-text); }
.hd-top { background: var(--cactus); color: var(--cream); font-size: 14px; line-height: 20px; }
.hd-top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.hd-top a { color: var(--cream); text-decoration: none; }
.hd-top a:hover { text-decoration: underline; }
.hd-top__info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.hd-top__info span, .hd-top__info a { display: inline-flex; align-items: center; gap: 8px; }
.hd-top svg { width: 16px; height: 16px; stroke: var(--marigold); fill: none; stroke-width: 1.8; flex: none; }
.hd-social { display: flex; gap: 2px; }
.hd-social a { display: grid; place-items: center; width: 40px; height: 40px; }
.hd-social svg { width: 18px; height: 18px; stroke: var(--cream); }
.hd-bar { background: var(--parchment-light); border-bottom: var(--rule-width) solid var(--frame-red); }
.hd-bar .wrap { display: flex; align-items: center; gap: 28px; min-height: 92px; }
.hd-logo { flex: none; }
.hd-logo img { display: block; height: 70px; width: auto; }
.hd-links { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.hd-links > li { position: relative; }
.hd-links > li > a, .hd-menu > a { display: inline-block; padding: 8px 0; border-bottom: 2px solid transparent; font-family: var(--font-name); font-size: 14px; line-height: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hd-links > li > a:hover, .hd-links > li > a[aria-current="page"], .hd-menu > a:hover, .hd-menu > a[aria-current="page"] { border-bottom-color: var(--chile); color: var(--brick); }
.hd-menu { display: flex; align-items: center; }
.hd-caret { display: grid; place-items: center; width: 30px; height: 40px; padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.hd-caret svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.6; transition: transform .2s; }
.hd-caret[aria-expanded="true"] { color: var(--brick); }
.hd-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd-links a:focus-visible, .hd-caret:focus-visible, .hd-toggle:focus-visible, .hd-social a:focus-visible { outline: 3px solid var(--cactus); outline-offset: 2px; }
.hd-top a:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.hd-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hd-toggle { display: none; place-items: center; width: 48px; height: 48px; padding: 0; background: none; border: 2px solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
.hd-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.hd .lr-megamenu { top: calc(100% + 28px); }
.hd-mobile { display: none; background: var(--parchment-light); border-bottom: var(--rule-width) solid var(--frame-red); }
.hd-mobile.lr-mnav { border-width: 0 0 var(--rule-width); }
.hd-mobile .lr-mnav__list { max-width: 640px; margin: 0 auto; }
.hd-mobile .lr-mnav__sections { max-width: 608px; }
@media (max-width: 1199.98px) {
  .hd-links { display: none; }
  .hd-toggle { display: grid; }
  .hd-mobile.is-open { display: block; }
  .hd-logo img { height: 58px; }
  .hd-bar .wrap { min-height: 80px; }
}
@media (max-width: 767.98px) { .hd-top__addr, .hd-top__hours { display: none !important; } }
@media (max-width: 575.98px) {
  .hd-social { display: none; }
  .hd-top .wrap { justify-content: center; }
  .hd-logo img { height: 48px; }
  .hd-bar .wrap { min-height: 72px; gap: 12px; }
  .hd-cta .lr-btn { padding: 10px 14px; font-size: 13px; letter-spacing: 0.06em; }
}

/* ---------- Photo slider (Bootstrap 5 .carousel) ---------- */
.cz { position: relative; overflow: hidden; height: 560px; background: var(--ink); }
.cz--framed { max-width: 960px; height: 640px; margin: 0 auto; border: var(--frame-width) solid var(--chile); outline: 2px solid var(--frame-red); outline-offset: -4px; box-shadow: var(--shadow-photo); }
.cz-track { display: flex; height: 100%; transition: transform .7s ease; }
.cz-slide { flex: 0 0 100%; height: 100%; }
.cz-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cz-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #073c1fd9; color: var(--cream); cursor: pointer; }
.cz-btn:hover { background: var(--brick); }
.cz-btn:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.cz-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.cz-prev { left: 24px; } .cz-next { right: 24px; }
.cz-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding: 0 96px; }
.cz-dot { display: grid; align-items: center; width: 28px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer; }
.cz-dot span { display: block; height: 4px; background: var(--cream); opacity: .6; }
.cz-dot[aria-current="true"] span { background: var(--marigold); opacity: 1; }
.cz-dot:focus-visible { outline: 3px solid var(--marigold); }
.cz-count { position: absolute; right: 20px; bottom: 16px; z-index: 2; padding: 2px 10px; background: #2a1d14b3; color: var(--cream); font-size: 13px; line-height: 20px; }
@media (max-width: 991.98px) { .cz { height: 420px; } .cz--framed { height: 480px; } }
@media (max-width: 575.98px) {
  .cz { height: 260px; } .cz--framed { height: 240px; border-width: 6px; }
  .cz-dots { display: none; }
  .cz-btn { width: 44px; height: 44px; } .cz-prev { left: 10px; } .cz-next { right: 10px; }
}

/* ---------- Home ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.intro .lr-section-title { margin-bottom: 16px; }
.intro .h-sub { font-family: var(--font-name); font-size: 24px; line-height: 32px; margin: 0 0 20px; color: var(--ink); }
.visit-card { background: var(--parchment-light); border: var(--rule-width) solid var(--frame-red); padding: 32px; text-align: center; }
.visit-card img { display: block; width: 240px; height: auto; margin: 0 auto 20px; }
.visit-card .addr { font-family: var(--font-name); font-size: 20px; line-height: 28px; margin: 0; }
.visit-card .tel { display: inline-block; margin: 8px 0 4px; font-weight: 600; font-size: 24px; line-height: 32px; color: var(--brick); text-decoration: none; }
.visit-card .hours { margin: 4px 0 20px; color: var(--ink-muted); font-size: 15px; }
.visit-card .btn-row { justify-content: center; }
@media (max-width: 991.98px) { .intro { grid-template-columns: 1fr; gap: 40px; } }

.specials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.specials .lr-special { display: flex; flex-direction: column; align-items: center; }
.specials .lr-special__extra { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.specials-note { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--ink-muted); }
@media (max-width: 991.98px) { .specials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .specials { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.tile { margin: 0; }
.tile .lr-photo { display: block; }
.tile .lr-photo img { aspect-ratio: 1 / 1; object-fit: cover; }
.tile figcaption { margin-top: 16px; text-align: center; font-family: var(--font-name); font-size: 17px; line-height: 24px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 767.98px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .tile figcaption { font-size: 15px; } }

.feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.feature + .feature { margin-top: 96px; }
.feature--flip > :first-child { order: 2; }
.feature .lr-photo { display: block; }
.feature .lr-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.feature .lr-section-title { margin-bottom: 20px; }
@media (max-width: 991.98px) { .feature { grid-template-columns: 1fr; gap: 32px; } .feature + .feature { margin-top: 64px; } .feature--flip > :first-child { order: 0; } }

.band { background: var(--cactus); color: var(--cream); }
.band .prose p, .band .lead { color: var(--cream); }
.band .lr-section-title { -webkit-text-stroke-color: var(--frame-red); }
.band a:not(.lr-btn) { color: var(--marigold); }

.story { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.story .lr-photo { display: block; }
.story .lr-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.story .lr-photo figcaption { text-align: center; }
@media (max-width: 767.98px) { .story { grid-template-columns: 1fr; gap: 32px; } .story .lr-photo { max-width: 340px; } }

/* ---------- Page head (inner pages) ---------- */
.pghead { padding: 72px 0 48px; text-align: center; }
.pghead .lr-eyebrow { display: block; margin-bottom: 12px; }
.pghead .sub { font-family: var(--font-name); font-size: 22px; line-height: 32px; color: var(--ink); margin: 16px auto 0; max-width: 48ch; }
.pghead .lead { margin: 16px auto 0; }
@media (max-width: 575.98px) { .pghead { padding: 48px 0 32px; } .pghead .sub { font-size: 19px; line-height: 28px; } }

/* ---------- Menu pages ---------- */
.menu-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 96px; }
.menu-side { position: sticky; top: 24px; }
.menu-side .lr-menu-nav { position: static; }
.menu-side .lr-menu-nav__extra { margin: 12px 20px 4px; padding-top: 12px; border-top: 1px solid var(--parchment-deep); }
.menu-side .lr-menu-nav__extra a { border-left: 0; padding-left: 0; color: var(--brick); }
.menu-main { max-width: 800px; min-width: 0; }
.menu-chips { display: none; position: sticky; top: 0; z-index: 20; margin: 0 -32px 32px; }
.lr-panel .lr-menu-section__intro { color: var(--cream); }
.lr-menu-section__note { display: inline-block; margin-top: 12px; padding: 2px 12px; background: var(--cactus); color: var(--cream); font-family: var(--font-name); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.footnote { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--parchment-deep); font-size: 13px; line-height: 19px; color: var(--ink-muted); }
@media (max-width: 991.98px) {
  .menu-layout { grid-template-columns: 1fr; gap: 0; }
  .menu-side { display: none; }
  .menu-chips { display: block; }
}
@media (max-width: 575.98px) { .menu-chips { margin: 0 -16px 24px; } }

.lunch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; padding-bottom: 96px; }
.lunch-aside { position: sticky; top: 24px; display: grid; gap: 24px; }
.aside-card { background: var(--parchment-light); border: var(--rule-width) solid var(--frame-red); padding: 28px; }
.aside-card .h3 { font-family: var(--font-name); font-size: 22px; line-height: 30px; margin: 0 0 8px; }
.aside-card p { margin: 0 0 16px; font-size: 16px; line-height: 25px; }
.aside-card .lr-btn { width: 100%; justify-content: center; }
.aside-card .lr-btn + .lr-btn { margin-top: 10px; }
@media (max-width: 991.98px) { .lunch-layout { grid-template-columns: 1fr; gap: 40px; } .lunch-aside { position: static; order: -1; } }

.duo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: end; max-width: 900px; margin: 0 auto; }
.duo .lr-photo { display: block; }
@media (max-width: 575.98px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Contact + footer ---------- */
.ft-contact { padding: 96px 0; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: stretch; }
.ft-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 20px; }
.ft-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ft-list svg { width: 24px; height: 24px; stroke: var(--brick); fill: none; stroke-width: 1.8; margin-top: 2px; }
.ft-list .lbl { display: block; font-family: var(--font-name); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.ft-list .val { font-size: 18px; line-height: 27px; color: var(--ink); }
.ft-list a.val { color: var(--brick); font-weight: 600; text-decoration: none; }
.ft-map { position: relative; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; border: var(--rule-width) solid var(--frame-red); background-color: var(--parchment-deep); background-image: linear-gradient(var(--parchment) 2px, transparent 2px), linear-gradient(90deg, var(--parchment) 2px, transparent 2px); background-size: 48px 48px; }
.ft-map svg { width: 48px; height: 48px; stroke: var(--brick); fill: var(--parchment-light); stroke-width: 1.8; }
.ft-map p { margin: 0; max-width: 32ch; font-size: 15px; line-height: 22px; color: var(--ink); }
.ft-bottom { background: var(--cactus); color: var(--cream); padding: 56px 0 32px; }
.ft-bottom .wrap { display: grid; gap: 32px; }
.ft-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.ft-cols .lr-eyebrow { color: var(--marigold); display: block; margin-bottom: 12px; }
.ft-cols p { margin: 0; font-size: 16px; line-height: 26px; }
.ft-cols a { color: var(--cream); }
.ft-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.ft-links a { text-decoration: none; font-size: 15px; line-height: 24px; }
.ft-links a:hover { text-decoration: underline; }
.ft-social { display: flex; gap: 8px; }
.ft-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #fbeecd66; }
.ft-social svg { width: 20px; height: 20px; stroke: var(--cream); fill: none; stroke-width: 1.8; }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid #fbeecd40; font-size: 13px; line-height: 20px; }
.ft-bottom a:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
@media (max-width: 991.98px) { .ft-grid { grid-template-columns: 1fr; } .ft-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .ft-contact { padding: 64px 0; } .ft-cols { grid-template-columns: 1fr; } .ft-map { min-height: 260px; } }

/* =====================================================================
   Bootstrap 5 integration (added for the live site)
   ===================================================================== */
:root {
  --bs-body-font-family: var(--font-text);
  --bs-body-bg: #f0dab8;
  --bs-body-color: #2a1d14;
  --bs-link-color: #a82a08;
  --bs-link-color-rgb: 168, 42, 8;
  --bs-link-hover-color: #073c1f;
  --bs-link-hover-color-rgb: 7, 60, 31;
  --bs-border-radius: 4px;
  --bs-focus-ring-color: rgba(7, 60, 31, .45);
}
body.lr-page { margin: 0; }
.lead { font-weight: 400; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 8px 16px; background: var(--cactus); color: var(--cream); }
.skip-link:focus { left: 8px; }

/* Header: Bootstrap dropdown (Menu) and collapse (phone menu) */
.hd .lr-megamenu { border-radius: 0; color: var(--ink); font-size: inherit; min-width: 0; }
.hd-mobile.show, .hd-mobile.collapsing { display: block; }
@media (min-width: 1200px) { .hd-mobile { display: none !important; } }
.lr-mnav__list > li > button[aria-expanded="true"] { color: var(--brick); }

/* Sliders: Bootstrap .carousel with the design's controls */
.cz .carousel-inner, .cz .carousel-item { height: 100%; }
.cz .carousel-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cz .carousel-control-prev, .cz .carousel-control-next { top: 50%; bottom: auto; width: 52px; height: 52px; opacity: 1; background: #073c1fd9; border-radius: 50%; }
.cz .carousel-control-prev { left: 24px; }
.cz .carousel-control-next { right: 24px; }
.cz .carousel-control-prev:hover, .cz .carousel-control-next:hover { background: var(--brick); }
.cz .carousel-indicators { margin-bottom: 8px; flex-wrap: wrap; padding: 0 96px; }
.cz .carousel-indicators [data-bs-target] { width: 28px; height: 4px; margin: 0 3px; background-color: var(--cream); opacity: .6; }
.cz .carousel-indicators .active { background-color: var(--marigold); opacity: 1; }
@media (max-width: 575.98px) {
  .cz .carousel-indicators { display: none; }
  .cz .carousel-control-prev, .cz .carousel-control-next { width: 44px; height: 44px; }
  .cz .carousel-control-prev { left: 10px; }
  .cz .carousel-control-next { right: 10px; }
}
.cz-pad { padding: 0 32px; }
@media (max-width: 575.98px) { .cz-pad { padding: 0 16px; } }

/* Menu pages: scrollspy offsets */
.lr-menu-section { scroll-margin-top: 24px; }
@media (max-width: 991.98px) { .lr-menu-section { scroll-margin-top: 84px; } }
.lr-menu-nav .nav-link { color: var(--ink); }
.duo-wrap { padding: 0 32px 72px; }
@media (max-width: 575.98px) { .duo-wrap { padding: 0 16px 48px; } }

/* Contact: real Google Map */
.ft-map--embed { display: block; padding: 0; background: none; }
.ft-map--embed iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
@media (max-width: 575.98px) { .ft-map--embed iframe { min-height: 280px; } }
.ft-contact .btn-row { gap: 10px; }

/* Single-column layouts never wider than the screen */
@media (max-width: 991.98px) { .intro, .feature, .lunch-layout, .menu-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .story { grid-template-columns: minmax(0, 1fr); } }
.lr-section-title { overflow-wrap: break-word; }
@media (max-width: 991.98px) { .menu-chips { display: flex; } }
@media (max-width: 575.98px) { .lr-section-title--hero { font-size: 48px; } }

/* Restaurant & Dishes sliders: show the 720 x 480 photos at their real size (no enlarging) */
.cz--framed { max-width: 740px; height: auto; aspect-ratio: 740 / 500; }
@media (max-width: 991.98px) { .cz--framed { height: auto; } }
@media (max-width: 575.98px) { .cz--framed { height: auto; } }

/* Pencil drawings beside the slider (wide screens only, decorative) */
.cz-stage { position: relative; max-width: 1180px; margin: 0 auto; }
.cz-art { position: absolute; top: 50%; width: auto; max-width: min(220px, calc((100% - 740px) / 2 - 28px)); height: auto; transform: translateY(-50%); pointer-events: none; user-select: none; }
.cz-art--left { left: calc((100% - 740px) / 4); transform: translate(-50%, -50%); }
.cz-art--right { right: calc((100% - 740px) / 4); transform: translate(50%, -50%); }
.cz-art--flip { transform: translateY(-50%) scaleX(-1); }
@media (max-width: 1099.98px) { .cz-art { display: none; } }

/* Header with 8 links (Our Drinks + Drinks Menu): keep the Call button on one line and tighten the links on mid-size screens */
.hd-cta .lr-btn { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .hd-bar .wrap { gap: 20px; }
  .hd-links { gap: 15px; }
  .hd-links > li > a, .hd-menu > a { font-size: 13px; letter-spacing: 0.07em; }
  .hd-cta .lr-btn { padding-left: 16px; padding-right: 16px; }
}