/* ============================================================
   Meridian theme — component CSS, ported from
   ALL-DEV-DOCS/musreach_restaurant_modern_multitenant_mockup.html.
   The :root token BLOCK is intentionally NOT here — those values live in
   rt-theme-default.css (defaults) + <x-theme-vars /> (tenant overrides),
   already wired up in Phase 2 of the plumbing work. This file is only the
   component-level rules the mockup's <style> block also had.
   Only loaded when the tenant's active theme is 'meridian'.
   ============================================================ */
.rt-container{width:min(1160px,calc(100% - 40px));margin:auto}
.rt-topbar{background:var(--rt-ink);color:#fff;padding:9px 20px;text-align:center;font-size:13px;letter-spacing:.02em}
.rt-nav{position:absolute;z-index:10;top:38px;left:0;width:100%;padding:18px 0;color:var(--nav-link,#fff)}
/* On any page other than home there's no hero image behind the nav to
   give the white text contrast (it's absolute-positioned and transparent
   by design, meant to float over the hero photo) — added 2026-09-25 after
   this became unreadable white-on-white on every other public page once
   layout-hf started rendering this same nav component. */
.rt-nav--page{position:static;background:var(--rt-ink,#211b17);padding:16px 0}
.rt-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.rt-brand{font-family:var(--rt-heading-font);font-size:25px;font-weight:700;letter-spacing:-.03em;color:var(--nav-link,#fff)}
.rt-nav-links{display:flex;gap:28px;align-items:center;font-size:14px}
.rt-nav-links a{opacity:.92;color:var(--nav-link,#fff);text-decoration:none}
.rt-nav-links a:hover{opacity:1}
/* Scoped to .rt-nav so this doesn't affect .rt-btn-primary anywhere else
   on the page (hero CTA, menu section, etc.) — nav's button color is
   independently customizable (added 2026-09-29, --nav-btn-* set inline by
   the nav component from TenantBranding::textColor('nav', ...)) since a
   light hero background can clash with the theme's default accent color
   here even when it works fine elsewhere. */
.rt-nav .rt-btn-primary{background:var(--nav-btn-bg,var(--rt-accent));color:var(--nav-btn-text,#20170f)}
.rt-menu-btn{display:none;border:0;background:rgba(255,255,255,.14);color:var(--nav-link,#fff);border-radius:12px;padding:10px 12px}
.rt-hero{min-height:760px;position:relative;color:#fff;display:flex;align-items:center;background-size:cover;background-position:center}
.rt-hero--flat{background:linear-gradient(135deg,var(--rt-primary-dark,#3a2418),var(--rt-ink,#211b17))}
.rt-hero-overlay{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(10,8,6,.78) 0,rgba(10,8,6,.38) 140px,rgba(10,8,6,0) 280px),
    linear-gradient(90deg,rgba(17,13,10,.82) 0%,rgba(17,13,10,.48) 50%,rgba(17,13,10,.18) 100%)}
.rt-hero-content{max-width:650px;padding-top:55px;position:relative;z-index:1}
.rt-kicker{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:700;color:#f3c982;margin-bottom:18px}
.rt-hero h1{font-family:var(--rt-heading-font);font-size:clamp(48px,7vw,82px);line-height:.98;margin:0 0 22px;letter-spacing:-.045em}
.rt-hero p{font-size:18px;line-height:1.7;max-width:570px;color:rgba(255,255,255,.86);margin:0 0 30px}
.rt-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.rt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.rt-btn-primary{background:var(--rt-accent);color:#20170f}
.rt-btn-light{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.10);color:#fff;backdrop-filter:blur(8px)}
.rt-scroll{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}
.rt-section{padding:105px 0}
.rt-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:40px}
.rt-eyebrow{color:var(--rt-primary);text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.18em;margin-bottom:10px}
.rt-title{font-family:var(--rt-heading-font);font-size:clamp(36px,5vw,54px);line-height:1.02;margin:0;letter-spacing:-.035em;color:var(--rt-ink)}
.rt-section-copy{max-width:470px;color:var(--rt-muted);line-height:1.7;margin:0}
.rt-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rt-food-card{background:var(--rt-card);border:1px solid var(--rt-line);border-radius:var(--rt-radius);overflow:hidden;box-shadow:0 8px 30px rgba(40,25,15,.04);transition:.25s}
.rt-food-card:hover{transform:translateY(-5px);box-shadow:var(--rt-shadow)}
.rt-food-img{height:245px;width:100%;object-fit:cover;display:block}
.rt-food-body{padding:22px}
.rt-food-top{display:flex;justify-content:space-between;gap:15px}
.rt-food-name{font-family:var(--rt-heading-font);font-size:23px;margin:0 0 8px;color:var(--rt-ink)}
.rt-price{font-weight:800;color:var(--rt-primary);white-space:nowrap}
.rt-food-desc{font-size:14px;color:var(--rt-muted);line-height:1.6;margin:0}
.rt-menu-band{background:#201b17;color:#fff}
.rt-menu-band .rt-eyebrow{color:#e9b96a}
.rt-menu-band .rt-title{color:#fff}
.rt-menu-band .rt-section-copy{color:rgba(255,255,255,.65)}
/* Optional per-tenant background photo (2026-09-23) — background-image is
   set inline per-tenant (gradient scrim + photo); this just makes it
   cover the section properly instead of tiling/stretching. */
.rt-menu-band--photo{background-size:cover;background-position:center}
.rt-menu-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}
.rt-tab{border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;border-radius:999px;padding:10px 17px;cursor:pointer}
.rt-tab.active{background:var(--rt-accent);border-color:var(--rt-accent);color:#20170f;font-weight:700}
.rt-menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 55px}
.rt-menu-item{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:25px}
.rt-menu-item h3{margin:0 0 7px;font-family:var(--rt-heading-font);font-size:20px}
.rt-menu-item p{margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.5}
.rt-menu-price{color:#e9b96a;font-weight:800}
.rt-story{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.rt-story--no-image{grid-template-columns:1fr}
.rt-story--no-image .rt-story-text{max-width:720px}
.rt-story-img{height:600px;border-radius:28px;width:100%;object-fit:cover;display:block}
.rt-story-text p{color:var(--rt-muted);line-height:1.8}
.rt-stat-row{display:flex;gap:35px;margin-top:30px}
.rt-stat strong{display:block;font-family:var(--rt-heading-font);font-size:32px;color:var(--rt-ink)}
.rt-stat span{font-size:12px;color:var(--rt-muted)}
.rt-reviews{background:#efe8df}
.rt-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rt-review{background:rgba(255,255,255,.62);padding:28px;border-radius:20px;border:1px solid rgba(100,75,55,.10)}
.rt-stars{color:var(--rt-accent);letter-spacing:2px}
.rt-review p{line-height:1.7;color:#5d534c;font-size:14px}
.rt-review strong{font-size:13px}
.rt-visit{display:grid;grid-template-columns:1fr 1.25fr;gap:45px;align-items:stretch}
.rt-info-card{background:#211b17;color:var(--visit-text,#fff);border-radius:26px;padding:38px}
.rt-info-block{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.rt-info-block:last-child{border-bottom:0}
.rt-info-block small{display:block;color:var(--visit-label,rgba(255,255,255,.5));text-transform:uppercase;letter-spacing:.13em;font-size:10px;margin-bottom:6px}
.rt-info-block strong{font-size:15px;color:var(--visit-text,#fff)}
/* Was an external hotlinked unsplash.com photo — if that request is slow,
   blocked, or fails (no network access, ad blocker, etc.), the whole area
   rendered blank while still reserving its 440px height, leaving a large
   empty gap on the page. Replaced with a theme-token gradient (2026-09-23)
   so this section never depends on a third-party request at all. */
.rt-map{min-height:440px;border-radius:26px;background:linear-gradient(135deg,var(--rt-primary,#b84a2d),var(--rt-primary-dark,#7f2f1d));display:flex;align-items:center;justify-content:center}
.rt-map-pin{background:#fff;border-radius:18px;padding:18px 22px;box-shadow:var(--rt-shadow);text-align:center}
.rt-footer{background:#16120f;color:var(--footer-text,#fff);padding:55px 0 25px}
.rt-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.rt-footer h3{font-family:var(--rt-heading-font);font-size:23px;margin:0 0 12px;color:var(--footer-title,#fff)}
.rt-footer p,.rt-footer a{font-size:13px;color:var(--footer-text,rgba(255,255,255,.58));line-height:1.8;text-decoration:none}
.rt-footer-links{display:grid;gap:8px}
.rt-footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:45px;padding-top:20px;color:rgba(255,255,255,.4);font-size:11px;display:flex;justify-content:space-between}
body{font-family:var(--rt-body-font)}
@media(max-width:850px){
  .rt-nav-links{display:none}
  .rt-menu-btn{display:block}
  .rt-hero{min-height:700px}
  .rt-feature-grid,.rt-review-grid{grid-template-columns:1fr 1fr}
  .rt-story,.rt-visit{grid-template-columns:1fr;gap:35px}
  .rt-story-img{height:430px}
  .rt-menu-list{grid-template-columns:1fr}
  .rt-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .rt-container{width:min(100% - 28px,1160px)}
  .rt-section{padding:75px 0}
  .rt-section-head{display:block}
  .rt-section-copy{margin-top:18px}
  .rt-feature-grid,.rt-review-grid,.rt-footer-grid{grid-template-columns:1fr}
  .rt-hero h1{font-size:52px}
  .rt-hero p{font-size:16px}
  .rt-stat-row{gap:18px}
  .rt-footer-bottom{display:block}
  .rt-footer-bottom span{display:block;margin-top:8px}
}