/* Shared by both Hermann sites. Nothing in here names a site.
 *
 * The three accent colours were hardcoded Bar Vin values. They are now
 * color-mix() over --wp--preset--color--gold, which both palettes define, so
 * this one file follows whichever theme loads it: copper-gold on Bar Vin,
 * warm gold on Edelweiss. Keeping one stylesheet matters more than the exact
 * hex -- two copies of a file this fiddly would drift within a week.
 *
 * The only visible change on Bar Vin is the mobile menu divider, previously
 * copper #B87333 and now gold #D4A94C, both at 30% opacity on a dark ground.
 */

/* Bar Vin: layout corrections that theme.json cannot express.
 *
 * theme.json owns the design tokens and everything Beth can reach from the
 * Site Editor. This file is only for the handful of rules that need a media
 * query or a structural override, which theme.json has no way to say. Keep it
 * small, and keep colour and type coming from the presets rather than literals
 * so changing a palette entry in the editor still changes this file's output.
 */

/* --- Site logo -------------------------------------------------------------
 * The logo is a fixed 215px from the block attributes. That is right beside a
 * full desktop nav and much too large beside a hamburger on a 375px phone,
 * where it ate most of the header. Scale it with the viewport and cap it at the
 * desktop size, so it shrinks smoothly instead of jumping at a breakpoint.
 * "Wine & Spirits" sits on the bottom line of the wordmark and is the first
 * thing to become illegible, which is what sets the floor here.
 */
/* The wordmark is almost square (1000x907), so its width sets the height of the
 * whole header. That is why an oversized logo on a phone reads as vertical
 * bulk: at 215px wide it was also 195px tall, and the header ate the screen
 * before the hero began.
 *
 * Scoped to below 600px rather than done with a viewport-wide clamp. A clamp
 * interpolating up to the desktop size also shrinks every width in between, and
 * the desktop logo is already the size Andrew signed off on. 600px is where the
 * nav collapses to the hamburger and the logo becomes the only thing setting
 * the header's height, so it is the honest place for the rule to start. Above
 * it, the block's own 215px width attribute still applies, untouched.
 */
@media (max-width: 600px) {
  .wp-block-site-logo img {
    width: clamp(64px, 19vw, 96px);
    height: auto;
  }

  /* !important is not laziness here and should not be refactored away. The
     padding comes from the block's own attributes, which WordPress renders as
     an inline style attribute on the header, and an inline style beats any
     stylesheet rule regardless of specificity. Block attributes cannot carry a
     media query, so a responsive padding has no other route. */
  /* 0.5rem rather than a spacing preset because the smallest preset (0.75rem)
     is still more than this needs. With the logo at ~74px the header is now
     essentially the logo's own height plus a hairline, which is the point: it
     should read as chrome above the hero, not as a band of its own. */
  header.wp-block-group {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* --- Tablet: keep the hamburger up to 900px -------------------------------
 * The nav needs about 540px to sit on one line. Between 600px, where core
 * switches the hamburger off, and roughly 900px there is not enough room left
 * beside the logo, so the nav wrapped to a second line and pushed the header to
 * 297px on iPad portrait and 346px at 601px wide -- taller than the desktop
 * header. Shrinking things until they fit would mean a cramped nav and a logo
 * near 80px on a tablet, so the honest fix is to keep the mobile menu until the
 * inline nav genuinely fits.
 *
 * Core does this with exactly three rules under (min-width: 600px), reversed
 * below. site.css is enqueued after the block stylesheet, so equal specificity
 * resolves in our favour on source order. The .is-menu-open overlay styling is
 * not inside a media query, so the open menu already works at these widths.
 */
/* Bounds are 600 and 899.98, not 601 and 899. Core's switch is at exactly
   600px, so starting at 601 left a one-pixel gap where the inline nav came
   back; and on a fractional device pixel ratio the viewport does not land on
   whole numbers, so both exact edges fell through in testing while 768 and 834
   worked. Matching core's lower bound and using a fractional upper bound is the
   standard way to make the handoff airtight. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* --- Paired image and copy rows --------------------------------------------
 * Desktop alternates which side the photo sits on. Mobile must not.
 *
 * media_row() in build_home.py always writes the image column first, and these
 * rows flip visually here rather than in the markup. Doing it the obvious way,
 * by swapping the columns in the DOM, meant that once the columns stacked you
 * got image, text, text, image, image, text down the page: two photos back to
 * back, then two blocks of copy back to back. The stacked order is now image
 * then text every time.
 *
 * 782px is where core stops wrapping .wp-block-columns, so above it the
 * reversal is purely visual and below it there is nothing to reverse.
 */
@media (min-width: 782px) {
  .media-row.media-row--text-first {
    flex-direction: row-reverse;
  }
}

/* Note on italics, kept because the bug it describes is invisible in Chrome.
 *
 * "Closed" rendered as "Closea" on iOS, the ascender of the d sheared off flat.
 * forge-business-info asks for font-style: italic on closed days; the body font
 * is Jost, and the theme originally self-hosted only the upright face, so the
 * browser had to fake the italic by slanting the upright glyphs. Chrome draws
 * that cleanly. Safari clips the slanted ascender where it leaves the glyph
 * box, and the 0.5 opacity on the same element forces a compositing layer,
 * which is what made the cut a hard flat edge rather than a fade.
 *
 * Fixed properly rather than papered over: assets/fonts/jost-italic.woff2 is
 * now a real face, declared in theme.json at the same 300-700 weight range as
 * the upright. There is no CSS rule here any more, and nothing needs one.
 *
 * If a future site pairs this plugin with an upright-only body font, it gets
 * the same bug. Ship the italic file; do not force font-style: normal.
 */

/* --- Hero ------------------------------------------------------------------
 * The chandelier is a landscape photograph shown in a box that turns portrait
 * on a phone. background-size: cover then scales it to the box's width and
 * overflows the height, so the phone was showing a tall slice: chandelier at
 * the top, then the curtain, window and the brick building opposite, none of
 * which is worth a screenful.
 *
 * Two changes, both phone-only. A shorter box so there is less vertical slice
 * to fill, and the crop anchored nearer the top so what remains is the
 * chandelier rather than what is under it. !important for the same reason as
 * the header: these come from block attributes, so WordPress writes them as an
 * inline style and no amount of specificity beats that.
 */
@media (max-width: 781px) {
  .hero-band {
    /* The crop is anchored near the top, so shortening the box takes the slice
       off the bottom, which is exactly where the curtain and the brick building
       opposite were sitting. 48vh lands the bottom edge at roughly the lowest
       finial of the chandelier. */
    min-height: 48vh !important;
    background-position: 50% 18% !important;
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
  }

  /* The hero type preset is a fixed 4.25rem, which is 68px on a 390px screen
     and put the headline on three lines. The card grows to fit, so an oversized
     headline is also what was covering the chandelier. Fluid here rather than a
     smaller preset, because the preset is shared with any other page that wants
     hero type. */
  .hero-card h1 {
    font-size: clamp(1.85rem, 8vw, 2.6rem) !important;
    line-height: 1.1 !important;
  }

  .hero-card p {
    font-size: 1.0625rem !important;
  }

  /* 3.25rem of side padding on a phone left the text about 240px wide, which is
     what forced the wrapping in the first place. */
  .hero-card {
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) !important;
  }
}

/* --- Section rhythm on mobile ----------------------------------------------
 * The bands carry 5rem of padding top and bottom. On a desktop, where a row is
 * an image beside its copy, that reads as generous. Once the columns stack, the
 * same padding sits between a block of copy and the next photograph with
 * nothing in it, and there are three separate gaps compounding: 80px of band
 * padding, a 32px gap between bands, then 80px again. That is 192px of nothing
 * on a 390px-wide screen, most of a thumb-scroll.
 *
 * Halving the band padding and tightening the gap inside each row keeps the
 * sections distinct -- they are still separated by a colour change -- without
 * making the reader scroll through empty bands to find the next thing.
 * !important throughout because these come from block attributes, which
 * WordPress writes as inline styles.
 */
@media (max-width: 781px) {
  .section-band {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
  }

  /* Gap between the image and its copy once the row has stacked. */
  .media-row {
    row-gap: var(--wp--preset--spacing--30) !important;
  }

  /* The layout puts a 32px gap between the bands. It is transparent, so between
     two differently coloured sections it shows a strip of the body colour: a
     seam that reads as a mistake rather than as separation. The colour change
     is doing the separating, so the gap is not needed.

     Not scoped to a parent. The bands sit in .entry-content, not directly in
     .wp-site-blocks as you would expect, and a guessed parent selector matched
     nothing while appearing to be correct. */
  .section-band {
    margin-block-start: 0 !important;
  }
}

/* --- Mobile navigation overlay ---------------------------------------------
 * The overlay's background and text colour are set on the block itself so they
 * stay editable; what is here is the part that has no block control. Untouched,
 * the open menu is a stack of unstyled links with no separation and no target
 * size worth tapping.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--gold);
}

/* Give the closed hamburger an edge so it reads as a control rather than as a
   stray glyph floating next to the logo. */
.wp-block-navigation__responsive-container-open {
  padding: 0.4rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent);
  border-radius: 2px;
  line-height: 0;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
  border-color: var(--wp--preset--color--gold);
  background-color: color-mix(in srgb, var(--wp--preset--color--gold) 10%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(1.25rem, 6vw, 3rem);
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: var(--wp--preset--spacing--40);
}

/* Full-width rows with a hairline between them: the divider is what turns a
   floating list into a menu, and it echoes the copper rule in the footer. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 30%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child {
  border-bottom: 0;
}

/* Block-level links so the whole row is the tap target, not just the glyphs.
 *
 * The -content class in the middle of this selector is load-bearing and is not
 * redundant: without it a core rule wins on specificity and the padding here is
 * dropped while every other declaration in the block still applies. That is a
 * nasty way to fail, because the type and the divider look right and only the
 * tap target is wrong, so do not simplify this chain.
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 0.9rem 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

/* --- Footer bar ------------------------------------------------------------
 * Desktop puts the copyright left and the links right on one line. Stacked on
 * a phone the copyright landed first, which buries the links under a line of
 * fine print nobody is looking for. Links first, copyright last, which is also
 * the order of usefulness.
 */
@media (max-width: 781px) {
  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--30);
  }

  .footer-bar > .wp-block-navigation {
    order: 1;
  }

  /* The block's "justify right" setting lands on the inner container, not on
     the block wrapper, so left-aligning the wrapper does nothing. Right-aligned
     is correct on desktop where the links sit opposite the copyright; stacked
     on a phone it left the wrapped line ("Wine & Whiskey Club") floating off to
     the right on its own, out of line with everything above it. */
  .footer-bar .wp-block-navigation__container.items-justified-right {
    justify-content: flex-start;
  }

  .footer-bar > p {
    order: 2;
  }
}