/* ============================================================
   Static-mirror overrides for the Le Bistroquet site.
   Squarespace's JS runtime (removed in this static copy) normally:
     - adds a ".loaded" class to images (CSS hides img:not(.loaded))
     - manages the responsive header layout
     - draws shape blocks (the footer's red bar/rule)
   These rules reproduce the loaded/visible end-state without that JS.
   ============================================================ */

/* Shape blocks (e.g. the footer's red bar) are normally rendered by JS into a
   sized SVG. Reproduce the fill/stroke with CSS so the shape is visible. */
[data-definition-name="website.components.shape"] .sqs-shape-block-container {
  display: flex !important;
  height: 100%;
}
[data-definition-name="website.components.shape"] .sqs-shape-block-outer-container,
[data-definition-name="website.components.shape"] .sqs-block-content,
[data-definition-name="website.components.shape"] .sqs-block-alignment-wrapper {
  height: 100%;
}
[data-definition-name="website.components.shape"] .sqs-shape.sqs-shape-rectangle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--shape-block-background-color, hsla(var(--black-hsl), 1));
  border-color: var(--shape-block-stroke-color);
}

/* Reveal every image that Squarespace's loader would have activated. */
.section-background img,
.sqs-block-image img,
.sqs-image-content img,
.fluid-image-container img,
.sqs-block-content img,
.header-title-logo img,
.header-mobile-logo img {
  opacity: 1 !important;
}

/* Keep the desktop header layout fixed (no JS collision/auto-resize engine). */
@media (min-width: 768px) {
  .header-display-desktop { display: flex !important; }
  .header-display-mobile  { display: none !important; }
  .header-burger          { display: none !important; }
}
@media (max-width: 767px) {
  .header-display-desktop { display: none !important; }
  .header-display-mobile  { display: flex !important; }
}

/* Mobile menu: a drilled-into sub-folder (e.g. Menus -> Brunch / Lunch & Dinner)
   is nested, so Squarespace's ".header-menu-nav-folder .header-menu-nav-folder
   {display:none}" hides it. Reveal it when our shim marks it active. */
.header-menu-nav-folder.header-menu-nav-folder--active {
  display: flex !important;
}
/* The in-folder "Back" control is visibility:hidden until Squarespace's JS
   activates it; reveal it (only shows when its folder is drilled into). */
.header-menu-controls-control--active {
  visibility: visible !important;
}

/* Curved underline for text highlights (sqsrte-text-highlight). Squarespace's
   JS normally draws this "underlineCurve" SVG; we inject an equivalent. */
.sqsrte-text-highlight { position: relative; }
.sqsrte-text-highlight .hl-curve {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;            /* anchor to span bottom (matches the original at every width) */
  height: 1.36em;
  overflow: visible;
  pointer-events: none;
}


/* Menu-overlay theme. Squarespace's JS applies the "white" overlay theme on
   open (cream background, red text/links/burger-X); without that JS the menu
   inherits the header's black theme (red bg, cream text). Restore the correct
   overlay colors. (--white-hsl = cream, --black-hsl = red on this site.) */
.header {
  --menuOverlayBackgroundColor: hsla(var(--white-hsl), 1);
  --menuOverlayNavigationLinkColor: hsla(var(--black-hsl), 1);
  --menuOverlayButtonTextColor: hsla(var(--white-hsl), 1);
  --menuOverlayButtonBackgroundColor: hsla(var(--black-hsl), 1);
}
.header--menu-open .header-menu a,
.header--menu-open .header-menu .header-nav-folder-title-text,
.header--menu-open .header-menu-controls-control,
.header--menu-open .header-menu-nav-item-content {
  color: hsla(var(--black-hsl), 1);
}
/* Burger -> red X close icon when the menu is open (Squarespace's JS normally
   adds the active class that drives this). */
.header--menu-open .header-burger .top-bun,
.header--menu-open .header-burger .patty,
.header--menu-open .header-burger .bottom-bun {
  background-color: hsla(var(--black-hsl), 1) !important;
}
.header--menu-open .header-burger .burger-inner .top-bun { transform: rotate(45deg); }
.header--menu-open .header-burger .burger-inner .bottom-bun { transform: rotate(-45deg); }
.header--menu-open .header-burger .burger-inner .patty { transform: scale(0); }