/* Sophia Lee Floristry: the public header and its menu (templates/_header.html,
   static/menu.js). Loaded on every public page, after site.css.

   Phone (below 1000px): one row, the menu button at the left, the logo in the
   middle, the basket at the right; the button opens the drawer (.drawer).
   Computer (1000px and wider): the logo row (.sh-top), then the menu row
   (.sh-nav) with Instagram at its left and the basket at its right. The header
   is sticky with a negative top the height of the logo row, so scrolling down
   leaves only the menu row: the slim bar. Shop, Workshops and About open a
   full-width panel (.mega-panel) under the header.

   html.menu-js is set by menu.js: everything that needs the script (the
   drawer, the see-through header over the home page's photo, the panels'
   open state) hangs off it; without it the links and the <details> menu work. */

:root {
  --sh-top: 0px;                 /* the logo row above the menu row (computer only) */
  --sh-row: 64px;                /* the row that stays when scrolled */
  --sh-height: calc(var(--sh-top) + var(--sh-row));
  /* The shade behind white text on a photo. At .6 or more over the lightest
     photo (white), white text is 4.6:1 or better (WCAG AA for small text);
     tests/test_b4_menu.py checks these numbers. */
  --scrim: 16, 22, 18;
  --scrim-text: .6;              /* where text sits */
  --scrim-edge: .62;             /* the top of the header */
  --scrim-fade: 72px;            /* how far the header's shade fades out below it */
  --brand-shade: 250px;          /* computer: half the width of the shade behind the logo and name */
}
@media (min-width: 1000px) { :root { --sh-top: 86px; --sh-row: 54px; --scrim-fade: 32px; } }

/* ------------------------------------------------------------ the bar */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 249, 247, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  /* Lines are inset shadows, never borders: the header is exactly --sh-height tall
     (the home page's photo is pulled up under it by that much). */
  --sh-line: inset 0 -1px 0 rgba(221, 229, 221, .85);
  border: 0; box-shadow: var(--sh-line);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck, .site-header.menu-open { background: rgba(255, 255, 255, .96); box-shadow: var(--sh-line), var(--shadow-soft); }

.sh-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; height: var(--sh-row); }
.sh-start { grid-column: 1; justify-self: start; display: flex; align-items: center; }
.sh-end { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.sh-brand { grid-column: 2; justify-self: center; min-width: 0; }
.sh-brand .brand-name { transition: color .2s var(--ease); }

/* The menu button: the <details> menu until menu.js takes over with the drawer. */
.sh-menu-btn { display: none; }
html.menu-js .sh-fallback { display: none; }
html.menu-js .sh-menu-btn { display: inline-grid; }
.sh-fallback .menu-panel { right: auto; left: 0; }

.sh-nav { display: none; }
.mega-panel { display: none; }

@media (min-width: 1000px) {
  .site-header { top: calc(-1 * var(--sh-top)); }
  .sh-top { height: var(--sh-top); }
  .sh-start, .sh-end { display: none; }
  .sh-brand { gap: 14px; }
  .sh-brand .brand-mark { height: 58px; }
  .sh-brand .brand-name { font-size: 1.7rem; }

  .sh-nav { display: block; box-shadow: inset 0 1px 0 var(--line); transition: box-shadow .2s var(--ease); }
  .site-header.is-stuck .sh-nav { box-shadow: none; }
  .sh-nav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; height: var(--sh-row); }
  .sh-nav-start { justify-self: start; display: flex; align-items: center; gap: 6px; }
  .sh-nav-end { justify-self: end; display: flex; align-items: center; }

  /* the small mark that appears at the left of the slim bar */
  .sh-mini { display: inline-flex; align-items: center; max-width: 0; opacity: 0; overflow: hidden; visibility: hidden;
             transition: max-width .25s var(--ease), opacity .2s var(--ease), visibility 0s linear .25s; }
  .sh-mini-mark { height: 38px; width: auto; }
  .site-header.is-stuck .sh-mini { max-width: 48px; opacity: 1; visibility: visible; margin-right: 4px;
                                   transition: max-width .25s var(--ease), opacity .2s var(--ease), visibility 0s; }

  .sh-items { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
  .sh-item { display: flex; align-items: stretch; }
  /* the small dot between items: a shape, not a character, so it is never read out */
  .sh-item + .sh-item::before { content: ""; align-self: center; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
  .sh-link {
    position: relative; display: flex; align-items: center; min-height: var(--tap); padding: 0 18px 0 calc(18px + .18em);
    color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase;
    transition: color .15s var(--ease);
  }
  .sh-link::after {
    content: ""; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 2px; border-radius: 2px;
    background: var(--peony); transform: scaleX(0); transition: transform .2s var(--ease);
  }
  .sh-link:hover, .sh-item.is-open > .sh-link { color: var(--green-dark); }
  .sh-link:hover::after, .sh-item.is-open > .sh-link::after, .sh-link[aria-current="page"]::after, .sh-item.in-section > .sh-link::after { transform: scaleX(1); }
  .sh-link:focus-visible { outline-offset: -6px; }
}

/* ------------------------------------------------------------ the panels (computer) */
@media (min-width: 1000px) {
  .mega-panel {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--sh-height) - 16px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
  }
  .sh-item.is-open > .mega-panel,
  html:not(.menu-js) .sh-item:hover > .mega-panel,
  html:not(.menu-js) .sh-item:focus-within > .mega-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
  }
  /* Moving from one item to the next swaps the panels at once (no fade out and in)... */
  .sh-nav.is-swapping .mega-panel { transition: none; }
  /* ...and only the new panel's content eases in. */
  .mega-panel.is-swapped .mega-grid { animation: mega-swap .16s var(--ease); }
  .mega-grid { display: grid; gap: 28px 48px; padding-block: 30px 34px; align-items: start; }
  .mega-grid.mega-shop { grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.4fr); }
  .mega-grid.mega-shop.has-featured { grid-template-columns: minmax(170px, .8fr) minmax(0, 2.1fr) minmax(220px, 1fr); }
  .mega-grid.mega-workshops { grid-template-columns: minmax(0, 2.4fr) minmax(220px, 1fr); }
  .mega-grid.mega-about { grid-template-columns: minmax(0, 1fr); }
}
@keyframes mega-swap { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ the panels' content (panels and drawer) */
.mega-col { min-width: 0; }
.mega-head { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--peony); }
.mega-text { color: var(--muted); font-size: .95rem; margin: 0 0 6px; }
.mega-links { list-style: none; margin: 0; padding: 0; display: grid; }
.mega-links a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 2px;
  color: var(--ink); text-decoration: none; font-weight: 500; transition: color .15s var(--ease);
}
.mega-links a:hover { color: var(--green); }
.mega-all {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  color: var(--green); font-weight: 650; text-decoration: none;
}
.mega-links .mega-all { color: var(--green); font-weight: 650; }
.mega-all:hover { color: var(--green-dark); text-decoration: underline; }
.mega-all svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.mega-all:hover svg { transform: translateX(3px); }

.mega-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mega-cards .card-body { padding-top: 8px; }
.mega-cards .card-title { font-size: .98rem; }
.mega-cards .price { font-size: .9rem; }
.mega-cards .photo { border-radius: var(--radius-sm); }

.mega-facts { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 12px; }
.mega-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; line-height: 1.45; }
.mega-facts svg { width: 20px; height: 20px; margin-top: 1px; color: var(--green); }

.mega-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mega-event {
  display: flex; gap: 14px; align-items: center; min-height: 72px; padding: 8px; margin: 0 -8px;
  border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: background-color .15s var(--ease);
}
.mega-event:hover { background: var(--surface-2); color: var(--ink); }
.mega-event:hover .mega-event-title { color: var(--green-dark); }
.mega-event-body { display: grid; gap: 2px; min-width: 0; }
.mega-event-title { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.mega-event-when { color: var(--muted); font-size: .9rem; }
.mega-event-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .9rem; }
@media (min-width: 1000px) {
  .mega-events { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mega-event { flex-direction: column; align-items: flex-start; height: 100%; padding: 14px; margin: 0; border: 1px solid var(--line); }
}

.mega-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; max-width: 640px; }
.mega-empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--peony-soft); color: var(--peony); }
.mega-empty-icon svg { width: 24px; height: 24px; }
.mega-empty-title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; margin: 4px 0 6px; }
.mega-empty-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 4px 0 0; }

.mega-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mega-tiles a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.mega-tiles a:hover { border-color: var(--green); background: var(--surface-2); color: var(--ink); }
.mega-tiles a > svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.mega-tiles a > span { display: grid; gap: 1px; min-width: 0; }
.mega-tile-title { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
.mega-tile-text { color: var(--muted); font-size: .9rem; line-height: 1.35; }
@media (min-width: 1000px) {
  .mega-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .mega-tiles a { grid-template-columns: 1fr; align-items: start; align-content: start; height: 100%; padding: 18px; gap: 12px; }
}

/* ------------------------------------------------------------ the drawer (phone) */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(var(--scrim), .42); opacity: 0; transition: opacity .25s var(--ease); }
.drawer-sheet {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lift);
  padding-top: env(safe-area-inset-top); transform: translateX(-100%); transition: transform .25s var(--ease);
}
.drawer-sheet:focus { outline: none; }   /* focusable only so a click on its text keeps the focus inside the menu */
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-sheet { transform: none; }
html.drawer-locked, html.drawer-locked body { overflow: hidden; overscroll-behavior: none; }

.drawer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
  height: var(--sh-row); padding: 0 calc(var(--gutter) - 6px) 0 var(--gutter); border-bottom: 1px solid var(--line);
}
.drawer-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-size: 1.2rem; }
.drawer-mark { height: 36px; width: auto; }
.drawer-panes { position: relative; flex: 1; overflow: hidden; }
.drawer-pane {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  visibility: hidden; transform: translateX(100%);
  transition: transform .25s var(--ease), opacity .25s var(--ease), visibility 0s linear .25s;
}
.drawer-pane.is-root { transform: translateX(-24%); opacity: 0; }
.drawer-pane.is-current { visibility: visible; transform: none; opacity: 1; transition: transform .25s var(--ease), opacity .25s var(--ease), visibility 0s; }

.drawer-list { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer-list li + li { border-top: 1px solid var(--line); }
.drawer-list a, .drawer-next {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 0 4px;
  background: none; border: 0; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2;
}
.drawer-list a[aria-current="page"], .drawer-next[aria-current="true"] { color: var(--green); }
.drawer-list a:hover, .drawer-next:hover { color: var(--green-dark); }
.chev { width: 22px; height: 22px; color: var(--muted); }
.drawer-extra { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.drawer-extra a { display: flex; align-items: center; gap: 12px; min-height: var(--tap); color: var(--ink); text-decoration: none; font-weight: 550; }
.drawer-extra a > svg { width: 22px; height: 22px; color: var(--green); }
.drawer-extra a > svg:last-of-type:not(:first-child) { width: 16px; height: 16px; color: var(--muted); }

/* "‹ Back" and the part's title stay at the top while a long part scrolls (Shop, with its cards). */
.drawer-pane-head {
  position: sticky; top: -8px; z-index: 1; display: grid; gap: 2px;
  margin: -8px calc(-1 * var(--gutter)) 14px; padding: 8px var(--gutter) 6px;
  background: var(--surface); box-shadow: 0 1px 0 var(--line);
}
.drawer-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 12px 0 4px; margin-left: -4px;
  background: none; border: 0; border-radius: var(--pill); color: var(--green); font: 600 1rem/1 var(--font-body); cursor: pointer;
}
.drawer-back:hover { background: var(--green-soft); color: var(--green-dark); }
.drawer-back .chev { color: currentColor; }
.drawer-pane-title { margin: 0; font-size: 2rem; }
.drawer-pane-title:focus { outline: none; }
.drawer-pane-body { display: grid; gap: 26px; }
.drawer-pane-body .mega-head { margin-bottom: 6px; }

/* ------------------------------------------------------------ over the home page's photo */
/* Only with menu.js (which makes it solid again before the photo ends) and only
   while nothing is open: white text and icons on a shade that keeps them legible
   over any photo. */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--scrim-fade)); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--scrim), var(--scrim-edge)) 0, rgba(var(--scrim), var(--scrim-text)) calc(100% - var(--scrim-fade)), rgba(var(--scrim), 0) 100%);
  opacity: 0; transition: opacity .2s var(--ease);
}
/* Computer: shade only what is written, so the photo shows: the logo and name in the middle of the logo
   row (at --scrim-edge across 2 x --brand-shade, then fading out), and the menu row across the width (at
   --scrim-text, fading out below it). tests/test_b4_menu*.py check the numbers and that the name fits. */
@media (min-width: 1000px) {
  .site-header::before {
    background:
      linear-gradient(to right, rgba(var(--scrim), 0) calc(50% - var(--brand-shade) - 100px), rgba(var(--scrim), var(--scrim-edge)) calc(50% - var(--brand-shade)), rgba(var(--scrim), var(--scrim-edge)) calc(50% + var(--brand-shade)), rgba(var(--scrim), 0) calc(50% + var(--brand-shade) + 100px)) 0 0 / 100% var(--sh-top) no-repeat,
      linear-gradient(to bottom, rgba(var(--scrim), var(--scrim-text)) 0, rgba(var(--scrim), var(--scrim-text)) calc(100% - var(--scrim-fade)), rgba(var(--scrim), 0) 100%) 0 var(--sh-top) / 100% calc(100% - var(--sh-top)) no-repeat;
  }
}
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) {
  background-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open)::before { opacity: 1; }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) :is(.brand, .brand-name, .brand-tail, .icon-btn, .sh-link) { color: #fff; }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) .icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) .sh-nav { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
html.menu-js .site-header.over-photo.is-stuck:not(.is-solid):not(.menu-open) .sh-nav { box-shadow: none; }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) .sh-link::after { background: #fff; }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) .sh-item + .sh-item::before { background: rgba(255, 255, 255, .7); }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) .icon-btn .count { box-shadow: none; }
html.menu-js .site-header.over-photo:not(.is-solid):not(.menu-open) :focus-visible { outline-color: #fff; }

@media print {
  .drawer { display: none !important; }
}