/* Homepage patterns (Rev. October 2026): patterns/home-*.php
   Loaded on every page, since the patterns can be inserted anywhere.
   Each pattern is a section: add, remove, reorder, or duplicate them in the
   page editor. The homepage template (templates/front-page.html) is only
   the header, the page content, and the footer. */

/* WordPress adds its block gap (24px) above every top-level part of the page.
   The homepage header floats over the hero, so that gap would show as a strip
   between the announcement and the hero: the hero's own top margin handles
   the spacing instead. */
.wp-site-blocks > .rr-home { margin-block-start: 0; }

/* Space between sections */
.rr-home > * + * { margin-block-start: var(--wp--preset--spacing--60); }
.rr-home { padding-bottom: var(--wp--preset--spacing--60); }

.rr-section-head { margin-bottom: var(--wp--preset--spacing--30); gap: 12px 24px; }
.rr-section-head .is-style-eyebrow { margin: 0 0 6px; }
.rr-section-title { margin: 0; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.03em; }
.rr-section-desc { max-width: 60ch; margin: 10px 0 0; color: var(--espresso-text); line-height: 1.55; }
.rr-section-link { margin: 0; font: 700 15px/1.3 var(--font-archivo); }
/* Editor only: message shown when a Products block's category is empty */
.rr-block-empty { margin: 0; padding: 18px 20px; border: 1.5px dashed color-mix(in srgb, var(--espresso) 25%, transparent); border-radius: var(--radius-md); color: var(--espresso-text); font: 500 15px/1.5 var(--font-archivo); }
.rr-section-link a { color: var(--terracotta-dark); text-underline-offset: 3px; }

/* ---------- Hero ---------- */
/* Framed: inset from the screen edges like the panels. The homepage header
   sits over its top (see "Homepage header" below). */
.wp-block-cover.rr-hero.alignfull {
  min-height: min(86vh, 780px);
  margin: 0 calc(var(--frame-inset) - var(--wp--style--root--padding-right, 0px)) 0 calc(var(--frame-inset) - var(--wp--style--root--padding-left, 0px));
  padding: calc(var(--rr-home-nav-over) + var(--wp--preset--spacing--40)) max(0px, calc(var(--wp--preset--spacing--40) - var(--frame-inset))) var(--wp--preset--spacing--60);
  border-radius: var(--frame-radius);
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
/* Announcement on: it attaches to the top of the hero as one framed block.
   Matching corners: the bar takes the hero's top radius, the hero's top
   corners go square. */
.wp-site-blocks > header:has(.is-overlay) .site-header > .rr-announcement {
  margin: 0 var(--frame-inset) !important;
  border-radius: var(--frame-radius) var(--frame-radius) 0 0;
}
body:has(.site-header.is-overlay > .rr-announcement > .rr-announcement__text:not(:empty)) .wp-block-cover.rr-hero.alignfull {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Everything in the hero is centered */
.rr-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; text-align: center; }
.rr-hero .rr-hero__eyebrow { color: var(--gold); margin: 0 0 12px; }
.rr-hero .rr-hero__title { max-width: 14ch; margin: 0 auto; color: var(--cream); }
.rr-hero .rr-hero__text { max-width: 560px; margin: 18px auto 0; color: var(--cream); font-size: var(--wp--preset--font-size--body-lg); line-height: 1.6; }
.rr-hero .rr-hero__buttons { margin-top: 28px; gap: 14px; justify-content: center; }
@media (max-width: 600px) {
  .wp-block-cover.rr-hero.alignfull { min-height: 78vh; padding-inline: 20px; }
}
/* ---------- Homepage header ----------
   Sticky, like every other page, so the announcement, nav, and hero scroll
   up together as one block and the nav simply catches at the top once the
   announcement is out of view. Nothing moves on its own, so nothing jumps.
   - The header's bottom margin is minus the nav's height, which pulls the
     hero up underneath the nav. Because that margin always equals the nav's
     current height, the page's layout never changes size (no jump when the
     nav turns Espresso and gets shorter).
   - Over the hero the nav is taller, so the logo and icons have room inside
     the frame; once it turns Espresso it's the normal height. */
:root {
  --rr-hero-top: 12px;
  --rr-tile-pad: clamp(22px, 3vw, 36px);
  --rr-home-nav-over: calc(var(--rr-hero-top) + 104px);
  --rr-home-nav-solid: 84px;
}
@media (max-width: 600px) {
  /* Phones: the top of the page runs edge to edge (no gap above the
     announcement, no frame around the hero) */
  :root { --rr-hero-top: 0px; --rr-home-nav-over: 96px; --rr-home-nav-solid: 68px; }
  .wp-site-blocks > header:has(.is-overlay) .site-header > .rr-announcement { margin: 0 !important; border-radius: 0; }
  .wp-block-cover.rr-hero.alignfull {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
    border-radius: 0;
  }
}
.wp-site-blocks > header.wp-block-template-part:has(.is-overlay) {
  --rr-home-nav-h: var(--rr-home-nav-over);
  position: sticky;
  /* catches once everything above the nav (top gap + announcement) has scrolled away */
  top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--rr-bar-offset, 0px));
  left: auto;
  right: auto;
  padding-top: var(--rr-hero-top);
  margin-bottom: calc(-1 * var(--rr-home-nav-h));
}
.wp-site-blocks > header.wp-block-template-part.is-scrolled:has(.is-overlay) { --rr-home-nav-h: var(--rr-home-nav-solid); }
@media (max-width: 600px) {
  /* WordPress's admin bar scrolls away on phones, so it doesn't count here */
  .wp-site-blocks > header.wp-block-template-part:has(.is-overlay) { top: calc(-1 * var(--rr-bar-offset, 0px)); }
}
.wp-site-blocks > header:has(.is-overlay) .site-header__bar {
  box-sizing: border-box;
  height: var(--rr-home-nav-h);
  min-height: 0;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.wp-site-blocks > header:has(.is-overlay):not(.is-scrolled) .site-header__bar {
  padding-top: calc(var(--rr-hero-top) + 16px);
  border-bottom-color: transparent;
}
@media (max-width: 600px) {
  .wp-site-blocks > header:has(.is-overlay):not(.is-scrolled) .site-header__bar { padding-top: calc(var(--rr-hero-top) + 12px); }
}

/* ---------- Category tiles ---------- */
.rr-cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rr-cat-tile {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  padding: 10px 8px 14px;
  border: 1.5px solid color-mix(in srgb, var(--espresso) 12%, transparent);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--espresso);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease);
}
.rr-cat-tile:hover { border-color: var(--terracotta); transform: translateY(-2px); }
/* Doodle leads, name supports: the doodle scales with the tile (about half
   its width), the name stays light enough not to compete. */
.rr-cat-tile__icon { width: clamp(80px, 74%, 124px); height: auto; aspect-ratio: 1; object-fit: contain; }
/* SVG doodles take their color from here: change --rr-cat-icon-color to
   recolor every tile's doodle at once */
.rr-cat-tiles { --rr-cat-icon-color: var(--terracotta); }
.rr-cat-tile__icon--shape {
  display: block;
  background: var(--rr-cat-icon-color);
  -webkit-mask: var(--rr-icon) center / contain no-repeat;
          mask: var(--rr-icon) center / contain no-repeat;
}
.rr-cat-tile__name { font: 500 14px/1.25 var(--font-archivo); letter-spacing: 0.01em; }
@media (max-width: 680px) {
  /* Phones: one swipeable row */
  .rr-cat-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .rr-cat-tiles::-webkit-scrollbar { display: none; }
  .rr-cat-tiles > li { flex: 0 0 112px; scroll-snap-align: start; }
  .rr-cat-tile__icon { width: 76px; }
  /* Phones: names can wrap, so reserve two lines and every doodle sits at the same height */
  .rr-cat-tile__name { display: flex; align-items: flex-start; justify-content: center; min-height: 2.5em; font-size: 13px; }
}

/* ---------- Information tiles ---------- */
.rr-promos { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--wp--preset--spacing--20); }
.rr-promo-stack { display: grid; gap: var(--wp--preset--spacing--20); margin: 0 !important; }
.rr-promo {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 220px;
  margin: 0 !important;
  padding: var(--rr-tile-pad);
  border-radius: var(--radius-xl);
}
.rr-promo--tall { min-height: 460px; }
/* Each tile is one of two kinds:
   - Pattern (default): its color with the croissant pattern.
   - Photo: select the tile > Styles > Background image. The photo fills the
     tile and the pattern steps aside. */
.rr-promo {
  --promo-pattern-opacity: 0.14;
  isolation: isolate;
  background-size: cover;
  background-position: center;
}
.rr-promo:not([style*="background-image"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--art-pattern);
  opacity: var(--promo-pattern-opacity);
  -webkit-mask: url("../images/patterns/croissant-coffee.svg") repeat 0 0 / 1100px auto;
          mask: url("../images/patterns/croissant-coffee.svg") repeat 0 0 / 1100px auto;
}
/* Photo + gradient (Styles > "Photo gradient"): an Espresso gradient from the
   text side, so cream text reads on any photo. */
.rr-promo.is-style-rr-photo-gradient[style*="background-image"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--espresso) 88%, transparent) 0%,
    color-mix(in srgb, var(--espresso) 60%, transparent) 40%,
    transparent 75%);
}
@media (max-width: 860px) {
  .rr-promo.is-style-rr-photo-gradient[style*="background-image"]::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--espresso) 85%, transparent) 0%, color-mix(in srgb, var(--espresso) 50%, transparent) 55%, transparent 90%);
  }
}
.rr-promo.has-espresso-background-color:not([style*="background-image"])::after { background: var(--gold); opacity: 0.08; }
.rr-promo:is(.has-wheat-background-color, .has-cream-background-color, .has-card-background-color):not([style*="background-image"])::after { opacity: 0.06; }
.rr-promo__text { position: relative; z-index: 1; max-width: 520px; margin: 0 !important; }
.rr-promo--tall .rr-promo__text { max-width: 66.666%; }
.rr-promo .rr-promo__eyebrow { margin: 0 0 8px; color: inherit; opacity: 0.85; }
.rr-promo.has-terracotta-background-color .rr-promo__eyebrow { color: var(--gold-soft); opacity: 1; }
.rr-promo.has-espresso-background-color .rr-promo__eyebrow { color: var(--gold); opacity: 1; }
.rr-promo.has-wheat-background-color .rr-promo__eyebrow { color: var(--terracotta); opacity: 1; }
.rr-promo .rr-promo__title { margin: 0; color: inherit; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; letter-spacing: -0.02em; }
.rr-promo--tall .rr-promo__title { font-size: clamp(32px, 3.6vw, 46px); }
.rr-promo .rr-promo__copy { margin: 12px 0 22px; color: inherit; line-height: 1.55; }
.rr-promo .rr-promo__link { margin: 12px 0 0; font: 700 15px/1.3 var(--font-archivo); }
.rr-promo .rr-promo__link a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .rr-promos { grid-template-columns: 1fr; }
  .rr-promo--tall { min-height: 380px; }
}

/* ---------- Product rows (best sellers, merch) ---------- */
/* The whole section hides when its live block has no products */
.rr-products-section:not(:has(.rr-menu-card)) { display: none; }

/* ---------- Callout ---------- */
/* As wide as the footer panels (frame inset), with the photo filling the
   background. Edit the photo so the cream text stays readable. Without a
   photo it falls back to Espresso with the croissant pattern. */
.wp-block-cover.rr-callout.alignfull {
  --callout-pattern-opacity: 0.12;
  box-sizing: border-box;
  min-height: 460px;
  margin-left: calc(var(--frame-inset) - var(--wp--style--root--padding-left, 0px));
  margin-right: calc(var(--frame-inset) - var(--wp--style--root--padding-right, 0px));
  padding: clamp(40px, 6vw, 80px) max(0px, calc(var(--wp--preset--spacing--40) - var(--frame-inset)));
  border-radius: var(--frame-radius);
  overflow: hidden;
  justify-content: flex-start;
}
/* Text starts on the same line as the information tiles' text: the content
   edge plus the tiles' inner padding. */
.rr-callout .wp-block-cover__inner-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
  padding-inline: var(--rr-tile-pad);
  text-align: left;
}
.rr-callout .wp-block-cover__inner-container > .rr-callout__text { margin-left: 0 !important; margin-right: auto !important; }
.rr-callout:not(:has(.wp-block-cover__image-background))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--art-pattern);
  opacity: var(--callout-pattern-opacity);
  -webkit-mask: url("../images/patterns/croissant-coffee.svg") repeat 0 0 / 1100px auto;
          mask: url("../images/patterns/croissant-coffee.svg") repeat 0 0 / 1100px auto;
}
.rr-callout .wp-block-cover__inner-container { position: relative; z-index: 2; }
.rr-callout .rr-callout__text { max-width: 540px; }
.rr-callout .rr-callout__eyebrow { margin: 0 0 10px; color: var(--gold); }
.rr-callout .rr-callout__title { margin: 0; color: var(--cream); font-size: clamp(34px, 4vw, 52px); line-height: 1.02; }
.rr-callout .rr-callout__copy { margin: 14px 0 26px; color: var(--cream); font-size: var(--wp--preset--font-size--body-lg); line-height: 1.6; }
@media (max-width: 600px) {
  .wp-block-cover.rr-callout.alignfull { min-height: 380px; }
}

/* ---------- Temporary Home (templates/page-temporary-home.html) ----------
   Same hero as the homepage; the restaurant menu below it; a header with no
   navigation: the logo centered and a Find us button (Google Maps directions). */
.site-header--temp .site-header__bar.is-layout-flex {
  display: grid;
  /* equal sides that never grow, so the logo stays truly centered */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.site-header--temp .site-header__bar > .site-header__logo--cream { grid-column: 2; display: flex; justify-content: center; }
.site-header--temp .site-header__bar > .site-header__find { grid-column: 3; justify-self: end; margin: 0; }
.site-header.site-header--temp .site-header__find .wp-block-button__link { --line: var(--cream); }
/* Over the hero, the hero's own Find us button does the job; the header's
   only appears once the header turns Espresso. Hidden but still holding its
   space, so the logo stays centered. */
.site-header--temp .site-header__find { transition: opacity 0.25s ease, visibility 0.25s ease; }
.wp-site-blocks > header:not(.is-scrolled) .site-header--temp .site-header__find { opacity: 0; visibility: hidden; }
.rr-home--temp { padding-bottom: 0; }
.rr-temp-menu { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rr-home-nav-solid)); }

/* Menus under the homepage-style header: by the time the category bar sticks,
   the hero is gone and the nav is its shorter Espresso height. */
body:has(.site-header.is-overlay) .rr-menu__bar { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rr-home-nav-solid)); }
body:has(.site-header.is-overlay) .rr-menu__section { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rr-home-nav-solid) + 72px); }
@media (max-width: 600px) {
  body:has(.site-header.is-overlay) .rr-menu__bar { top: var(--rr-home-nav-solid); }
  body:has(.site-header.is-overlay) .rr-menu__section { scroll-margin-top: calc(var(--rr-home-nav-solid) + 116px); }
  .site-header.site-header--temp .site-header__find .wp-block-button__link { --h: 30px; font-size: 10px; letter-spacing: 0.04em; }
}