/* ==========================================================================
   lbrestaurants.com — MODERN LAYER
   Presentation-only override stylesheet. Loaded AFTER css/basic-style.css.
   Changes NO text, NO headlines, NO meta, NO URLs — visuals only.
   Scoped under body.modern (the single class added to <body>).
   Identity preserved: same logo, same fonts (Droid Serif / Ubuntu),
   same blue (#0099ff family, deepened to #0077cc for interactive states).
   ========================================================================== */

/* ---------- Base ---------- */
body.modern {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #414a54;
  line-height: 1.6;
  overflow-x: clip; /* prevents horizontal scroll without breaking sticky */
}
body.modern ::selection { background: #cfe9ff; }

body.modern h1, body.modern h2, body.modern h3,
body.modern h4, body.modern h5, body.modern h6 {
  color: #26313b;
  line-height: 1.3;
}
body.modern p { margin: 0 0 1.25em; }
body.modern img { border-radius: 10px; }
body.modern a { transition: color .15s ease, background-color .15s ease; }

/* comfortable reading column (basic-style caps at 1200px; tighten slightly) */
@media only screen and (min-width: 920px) {
  body.modern .wrapper { max-width: 1140px; }
}

/* anchors shouldn't hide under the sticky header */
body.modern a[name="top"],
body.modern a[name="menu"],
body.modern a[name="map"] { scroll-margin-top: 120px; }

/* ---------- Sticky header + nav ---------- */
body.modern > header.wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-top: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .98);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 1px 0 rgba(16, 42, 67, .05), 0 10px 28px rgba(16, 42, 67, .09);
}
body.modern #logo img {
  height: 50px;
  width: auto;
  max-width: 62vw;
  border-radius: 0; /* logo artwork stays exactly as-is */
}
@media only screen and (min-width: 920px) {
  body.modern #logo img { height: 56px; }
  body.modern #banner { margin-bottom: 0; }
}

/* mobile only (polish pass 2026-11-06): main logo about 30% larger on
   phones (50px -> 65px tall; natural artwork is 361x113, so it renders
   about 208px wide, inside the 78vw cap). Desktop is untouched. */
@media only screen and (max-width: 768px) {
  body.modern #logo img { height: 65px; max-width: 78vw; }
}

/* mobile MENU toggle — display logic untouched (main.js toggles .toggled-on);
   only the look changes */
body.modern .menu-toggle {
  background: #0077cc;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 12px;
  font-size: 17px;
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 119, 204, .22);
}
body.modern .menu-toggle.toggled-on { background: #005fa3; }

/* mobile nav rows: bigger tap targets, card-like rows */
body.modern .srt-menu li a {
  background: #f2f6f9;
  color: #0b5cad;
  font-weight: 600;
  border-radius: 12px;
  margin: 6px 0;
  padding: 14px 18px;
}
body.modern .srt-menu li a:hover,
body.modern .srt-menu li a:focus-visible {
  background: #0077cc;
  color: #fff;
}

/* desktop nav: pill links */
@media only screen and (min-width: 920px) {
  body.modern .srt-menu li { margin-left: 4px; }
  body.modern .srt-menu li a {
    background: transparent;
    height: auto;
    line-height: 1.25;
    padding: 11px 17px;
    border-radius: 999px;
    color: #0b5cad;
  }
  body.modern .srt-menu li a:hover { background: #e8f4fd; color: #084d8a; }
  body.modern .srt-menu li.current a { background: #0077cc; color: #fff; }
  body.modern .srt-menu li li a {
    background: rgba(38, 49, 59, .96);
    color: #fff;
    border-radius: 0;
  }
}

/* ---------- Buttons ---------- */
body.modern a.buttonlink {
  background: #0077cc;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0, 119, 204, .25);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.modern a.buttonlink:hover,
body.modern a.buttonlink:focus-visible {
  background: #005fa3;
  box-shadow: 0 6px 18px rgba(0, 95, 163, .3);
}
body.modern a.buttonlink:active { transform: translateY(1px); }

/* native <button> wrappers (footer CTAs, "tell us"/"add a special") */
body.modern button {
  font: inherit;
  background: #fff;
  border: 1px solid #d3dde5;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
body.modern button:hover { border-color: #0077cc; background: #f2f8fd; }
body.modern button a { color: #0077cc; font-weight: 600; }

/* ---------- Content card (menu / directory / specials pages) ----------
   The pages' own <style> block gives #columnsdemo .grid_* a demo border,
   grey text and center alignment. body.modern selectors outrank it, so the
   demo boxes become clean sections inside one soft page card. */
body.modern #columnsdemo {
  background: #fff;
  border: 1px solid #e5eaef;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(16, 42, 67, .07);
  padding: 26px 26px 12px;
  margin-top: 22px;
}
@media only screen and (max-width: 640px) {
  body.modern #columnsdemo { padding: 18px 16px 8px; border-radius: 14px; }
}
body.modern #columnsdemo [class^="grid_"],
body.modern #columnsdemo [class*=" grid_"] {
  float: none;
  width: auto;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
}
body.modern #columnsdemo > h1 { font-size: 2em; margin: .15em 0 .2em; }
body.modern #columnsdemo hr {
  border: 0;
  height: 1px;
  background: #e6ecf1;
  margin: 22px 0;
}

/* section headings inside the card: accent bar (TEXT unchanged) */
body.modern #columnsdemo .grid_12 h2 {
  position: relative;
  font-size: 1.55em;
  margin: 1.15em 0 .55em;
  padding-bottom: 9px;
  border-bottom: 2px solid #edf2f6;
}
body.modern #columnsdemo .grid_12 h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: #0099ff;
}
body.modern #columnsdemo .grid_12 h2:first-child { margin-top: .1em; }
/* entry headings on specials/directory pages (direct children of the card) */
body.modern #columnsdemo > h2 { margin-top: 1.25em; }

/* menu items: clearer separation */
body.modern #columnsdemo .grid_12 h3 {
  font-size: 1.08em;
  color: #1f2933;
  margin: 1.05em 0 .12em;
}

/* the red "Menu" / "Map and Directions" <font> headings: same words,
   same red family, cleaner type */
body.modern #columnsdemo .grid_12 > b font,
body.modern #columnsdemo .grid_12 > font {
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #d0342c;
}

/* ---------- Directory / listing tables ---------- */
body.modern #columnsdemo table { width: 100%; border-collapse: separate; border-spacing: 0; }
body.modern #columnsdemo table td {
  background: #fff;
  padding: 13px 14px;
  border-bottom: 1px solid #edf1f4;
  vertical-align: top;
}
body.modern #columnsdemo table tr:nth-child(even) td { background: #f7fafc; }
body.modern #columnsdemo table tr:hover td { background: #eef6fd; }
body.modern #columnsdemo table td[bgcolor="#666666"] {
  background: #3c4653;
  color: #fff;
  font-size: 1.05em;
  border-radius: 8px;
}
body.modern #columnsdemo table td a {
  color: #0077cc;
  font-weight: 600;
  font-size: 1.06em;
  display: inline-block;
  padding: 2px 0;
}
body.modern #columnsdemo table td p { margin: .15em 0 0; color: #68737e; }

/* ---------- Homepage ---------- */
body.modern #hero {
  background: #f6f9fb;
  border-top: 1px solid #e3ebf1;
  border-bottom: 1px solid #e3ebf1;
}
body.modern .flexslider {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16, 42, 67, .14);
}
body.modern #content .grid_4 {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 22px rgba(16, 42, 67, .05);
}
body.modern #content h2 a { display: inline-block; padding: 3px 0; }

/* ---------- Map ---------- */
body.modern .google-maps {
  border: 1px solid #e4e9ee;
  border-radius: 14px;
  overflow: hidden;
}
body.modern .google-maps iframe { display: block; }
@media only screen and (max-width: 640px) {
  body.modern .google-maps { padding-bottom: 62.5%; } /* less towering on phones */
}

/* ---------- Footer ---------- */
body.modern footer { padding: 38px 0 30px; line-height: 1.65; }
body.modern footer button { margin: 2px 0; }
body.modern footer a { color: #8fd0ff; }
body.modern footer a:hover { color: #cfe9ff; }

/* footer menu (main menu mirrored in the footer, added 2026-11-06) */
body.modern footer #footer-navigation { margin: 20px auto 2px; text-align: center; }
body.modern footer .footer-menu { list-style: none; margin: 0; padding: 0; }
body.modern footer .footer-menu li { display: inline-block; margin: 4px 3px; }
body.modern footer .footer-menu li a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #cfe9ff;
  font-weight: 600;
}
body.modern footer .footer-menu li a:hover,
body.modern footer .footer-menu li a:focus-visible { background: #0077cc; color: #fff; }

/* ---------- Accessibility ---------- */
body.modern :focus-visible {
  outline: 3px solid #7cc4ff;
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  body.modern { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  body.modern *, body.modern *::before, body.modern *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Feature pass 2026-11-06: restaurant intro paragraphs.
   Link-backs pass 2026-11-06 (owner order): ALL intro paragraphs render
   at the site's h3 font size. That size is 1.17em, set by normalize.css
   (h3 { font-size: 1.17em }); neither basic-style.css nor this sheet
   overrides font-size for plain h3 elements, so 1.17em is exactly the
   size every h3 on the site renders at. The hub intro paragraphs
   emitted by apply_page_intros (class="hub-intro") get the same size
   via the second rule; nothing else is restyled. */
.restaurant-intro{font-size:1.17em;line-height:1.55;margin:.4em 0 1em}
.hub-intro{font-size:1.17em}

/* Polish pass 2026-11-06: "You Also Might Like" similar-restaurant
   sections (simple list in the Delivery page's listing style) */
body.modern .you-also-might-like {
  width: min(1140px, calc(100% - 28px));
  margin: 26px auto;
  padding: 22px 26px 12px;
  background: #fff;
  border: 1px solid #e5eaef;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(16, 42, 67, .07);
  box-sizing: border-box;
}
body.modern .you-also-might-like h2 {
  position: relative;
  font-size: 1.55em;
  margin: .1em 0 .55em;
  padding-bottom: 9px;
  border-bottom: 2px solid #edf2f6;
}
body.modern .you-also-might-like h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: #0099ff;
}
body.modern .you-also-might-like ul { list-style: none; margin: 0; padding: 0; }
body.modern .you-also-might-like li {
  padding: 10px 0;
  border-bottom: 1px solid #edf1f4;
  color: #68737e;
}
body.modern .you-also-might-like li:last-child { border-bottom: 0; }
body.modern .you-also-might-like a {
  color: #0077cc;
  font-weight: 600;
  font-size: 1.06em;
}

/* Link web pass 2026-11-06: "Explore More" link-web sections on the 35
   category pages, placed immediately before You Also Might Like and
   styled identically to it (core guide links + related food styles). */
body.modern .explore-more {
  width: min(1140px, calc(100% - 28px));
  margin: 26px auto;
  padding: 22px 26px 12px;
  background: #fff;
  border: 1px solid #e5eaef;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(16, 42, 67, .07);
  box-sizing: border-box;
}
body.modern .explore-more h2 {
  position: relative;
  font-size: 1.55em;
  margin: .1em 0 .55em;
  padding-bottom: 9px;
  border-bottom: 2px solid #edf2f6;
}
body.modern .explore-more h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: #0099ff;
}
body.modern .explore-more ul { list-style: none; margin: 0; padding: 0; }
body.modern .explore-more li {
  padding: 10px 0;
  border-bottom: 1px solid #edf1f4;
  color: #68737e;
}
body.modern .explore-more li:last-child { border-bottom: 0; }
body.modern .explore-more a {
  color: #0077cc;
  font-weight: 600;
  font-size: 1.06em;
}

/* Tidy pass 2026-11-06: footer colors + homepage tidy.
   Diagnosis: the footer background is #333 (basic-style.css), whose own
   light text (#ccc, 7.87:1) was overridden by this layer's dark slate
   body text (#414a54, 1.40:1 on #333) and heading color (#26313b,
   1.05:1 on #333), so footer text and headings rendered near-invisible
   over the gray. The footer is now pinned to readable colors:
   body text #f2f5f8 (11.55:1), headings #fff (12.63:1), links keep
   #8fd0ff (7.60:1). The Advertise button was a plain white pill with
   blue text; it is now a solid modern-palette button: #0077cc
   background, white text (4.66:1), hover #005fa3 (6.63:1). */
body.modern footer { color: #f2f5f8; }
body.modern footer h1, body.modern footer h2, body.modern footer h3,
body.modern footer h4, body.modern footer h5, body.modern footer h6 {
  color: #fff;
}
body.modern footer button {
  background: #0077cc;
  border-color: #0077cc;
  box-shadow: 0 4px 14px rgba(0, 119, 204, .35);
}
body.modern footer button a { color: #fff; }
body.modern footer button:hover,
body.modern footer button:focus-visible {
  background: #005fa3;
  border-color: #005fa3;
}
body.modern footer button:hover a,
body.modern footer button:focus-visible a { color: #fff; }

/* homepage: All Restaurants link centered on its own line under the
   style table, and the partners block as its own section above the
   footer (tidy pass edits 3-4) */
body.modern #content .all-restaurants-link { text-align: center; margin: .6em 0 .2em; }
body.modern .partners-strip {
  width: min(1140px, calc(100% - 28px));
  margin: 8px auto 0;
  padding: 20px 14px 8px;
  border-top: 1px solid #e3ebf1;
  text-align: center;
  box-sizing: border-box;
}
body.modern .partners-strip h3 { display: inline-block; margin: 0 10px 8px; }
body.modern .partners-strip h3:first-child { display: block; margin: 0 0 10px; }

/* Homepage new sections (2026-11-06): the three full-width
   placeholder rows under the homepage columns get the same card
   treatment as the #content .grid_4 columns above them, cleared
   below the floated columns with room above each row. */
body.modern #content .home-new-section {
  clear: both;
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 22px rgba(16, 42, 67, .05);
  margin-top: 20px;
  box-sizing: border-box;
}
body.modern #content .home-new-section:first-of-type { margin-top: 0; }

/* Dinner Decider + town browser (homepage sections 1 and 2,
   2026-11-06): slot-reel display, pill buttons in the site palette,
   result card. Scoped under .decider / .town-browser-links so
   nothing else on the page is touched. */
body.modern .decider { text-align: center; }
body.modern .decider-intro { max-width: 640px; margin: 0 auto 10px; }
body.modern .decider-reel {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.25;
  color: #0b5cad;
  min-height: 1.3em;
  margin: 12px 0 2px;
}
body.modern .decider-reel.decider-spinning {
  animation: decider-wiggle .12s linear infinite alternate;
}
@keyframes decider-wiggle {
  from { transform: translateY(-2px); }
  to { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  body.modern .decider-reel.decider-spinning { animation: none; }
}
body.modern .decider-status {
  min-height: 1.3em;
  margin: 0 0 10px;
  color: #5a6b7a;
  font-style: italic;
}
body.modern button.decider-spin {
  background: #0077cc;
  border: 1px solid #0077cc;
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
  padding: 14px 34px;
  box-shadow: 0 4px 14px rgba(0, 119, 204, .25);
}
body.modern button.decider-spin:hover,
body.modern button.decider-spin:focus-visible {
  background: #005fa3;
  border-color: #005fa3;
}
body.modern button.decider-spin:disabled { opacity: .6; box-shadow: none; }
body.modern .decider-result {
  margin-top: 16px;
  border-top: 1px solid #e7edf2;
  padding-top: 14px;
}
body.modern .decider-fate { margin: 0 0 2px; color: #5a6b7a; }
body.modern .decider-name { font-size: 1.6em; font-weight: 700; margin: 2px 0; }
body.modern .decider-name a { color: #0077cc; }
body.modern .decider-meta { margin: 0 0 4px; }
body.modern .decider-call { margin: 0 0 10px; }
body.modern .decider-call a { color: #0077cc; font-weight: 600; }
body.modern .decider-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
body.modern a.decider-menu {
  display: inline-block;
  background: #0077cc;
  color: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0, 119, 204, .25);
}
body.modern a.decider-menu:hover,
body.modern a.decider-menu:focus-visible { background: #005fa3; }
body.modern button.decider-again { font-weight: 600; }
body.modern button.decider-again:disabled { opacity: .6; }
body.modern .town-browser-links {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.modern .town-browser-links a {
  display: inline-block;
  background: #e8f4fd;
  color: #0b5cad;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 600;
}
body.modern .town-browser-links a:hover,
body.modern .town-browser-links a:focus-visible {
  background: #0077cc;
  color: #fff;
}
@media only screen and (max-width: 640px) {
  body.modern .decider-reel { font-size: 1.45em; }
  body.modern button.decider-spin { width: 100%; padding: 14px 10px; }
  body.modern .decider-name { font-size: 1.35em; }
}