/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
/* ==========================================================================
   LeOtter — Gantry 5 / Hydrogen compatibility overrides
   Load LAST, after styles.css, network.css and network-switcher.css.
   Gantry: Hydrogen -> Configure -> Page Settings -> Custom CSS

   Scope: only the places where Joomla/Gantry-generated markup differs from
   the original static HTML. Everything else is left to styles.css — do not
   re-declare colors, spacing or type here.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Menu particle -> flat flex row
   Original:  <nav class="nav-links"><a>…</a></nav>            (direct children)
   Gantry:    <nav class="nav-links"><ul><li><a>…</a></li></ul>

   styles.css sets .nav-links{display:flex;gap:34px}, which under Gantry would
   lay out a single <ul> instead of four links. `display:contents` on the <ul>
   and <li> promotes the anchors into that flex row, so gap/align behave
   exactly as before. No list semantics are lost — the original had none.

   Requires: Layout Manager -> Navigation -> Menu particle
             -> CSS Classes = nav-links
   -------------------------------------------------------------------------- */
/* MEASURED against the live site 2026-08-07. Gantry puts the block's CSS
   Classes on the g-block WRAPPER, not on the <nav>, and inserts two more
   elements than this file originally assumed. The real chain is:

     div.nav-links > div.g-content > nav.g-main-nav > ul.g-toplevel > li > a

   so `.nav-links > ul` never matches and both intermediate wrappers have to
   be promoted too.

   HISTORY: this block used to carry !important throughout, because Hydrogen
   scoped the nav by ID via `#g-header .g-main-nav { @include main-nav-colors }`
   and `#g-navigation .g-main-nav .g-toplevel` (1,2,0), which no class-only
   selector can beat. Since custom/scss/hydrogen/_header.scss stopped emitting
   that mixin, the competition is class-only and plain specificity is enough.
   Audited 2026-08-07: all 20 !important declarations were removed and the
   page re-measured; only ONE regressed (see the next block). */
.nav-links > .g-content, .nav-links nav.g-main-nav, .nav-links > ul, .nav-links ul.g-toplevel, .nav-links ul.g-toplevel > li {
  display: contents;
}
/* Hydrogen styles .g-menu-item-container with its own type, colour and
   padding. Hand those back to the .nav-links / .nav-status rules.

   The one rule still competing is
     .g-main-nav .g-toplevel > li > .g-menu-item-container   (0,3,1)
     { padding: 1.2rem 0.938rem }
   which out-specifies the old `.nav-links ul.g-toplevel > li > a` (0,2,3).
   Naming .g-main-nav and .g-menu-item-container explicitly takes this to
   (0,4,4) and wins outright — no !important.

   `height: auto` was dropped: Hydrogen never declares a height. The 57.9px
   measured earlier was just the box growing from that padding, so the
   declaration was always a no-op. */
.nav-links nav.g-main-nav ul.g-toplevel > li > a, .nav-links nav.g-main-nav ul.g-toplevel > li > a.g-menu-item-container {
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  line-height: inherit;
}
/* Fallback where `display: contents` is unsupported (older Safari). The row
   still reads correctly, it just inherits the gap one level up. */
@supports not (display: contents) {
  .nav-links > .g-content, .nav-links nav.g-main-nav, .nav-links > ul, .nav-links ul.g-toplevel {
    display: flex;
    align-items: center;
    gap: inherit;
  }
  .nav-links ul.g-toplevel > li {
    display: inline-flex;
    align-items: center;
  }
}
/* --------------------------------------------------------------------------
   2. Status dot for "Private Lab"
   Original markup carried a literal <span class="status-dot">, which a Joomla
   menu link cannot emit. Reproduced as a ::before with the exact .status-dot
   declarations from styles.css.

   .nav-status is already display:flex with gap:9px, so the pseudo-element
   participates as a flex child and lands in the right place with no
   positioning of its own.

   Requires: Menus -> Main Menu -> Private Lab -> Link Type tab
             -> Link CSS Style = nav-status
   -------------------------------------------------------------------------- */
.nav-status::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px #f6c453e6;
}
/* If a Gantry build puts the link class on the <li> instead of the <a>,
   the <li> is display:contents and cannot host the dot — move it to the
   anchor and suppress the duplicate. */
li.nav-status::before {
  content: none;
}
li.nav-status > a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cream);
}
li.nav-status > a::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px #f6c453e6;
}
/* --------------------------------------------------------------------------
   3. Mobile nav fix — REQUIRED, not cosmetic

   styles.css @650px has `.nav-links a:first-child{display:none}` to drop the
   "Explore" link. In the original flat markup that matched exactly one anchor.
   Under Gantry every <a> is the first (only) child of its own <li>, so the
   selector matches ALL FOUR links — including .nav-status, which network.css
   deliberately keeps visible on mobile. Without this block the mobile nav is
   completely empty.

   network.css @760px already hides every non-status link, so the only thing
   that needs restoring is the status link itself.

   PROVEN 2026-08-07 by disabling this block and re-measuring in a 620px and a
   500px viewport: every nav link reported display:none, i.e. the mobile nav
   really is empty without it. Restored and re-verified — Private Lab visible,
   the other three hidden, gold dot 7px.

   PRECONDITION: this only matters while the nav stays in the header. Gantry's
   Mobile Menu particle (offcanvas section) otherwise MOVES the whole menu out
   of .nav-links into #g-offcanvas at mobile widths, leaving this rule with
   nothing to match. That particle is deliberately disabled in the Home
   outline so the original design's behaviour is preserved: no hamburger, just
   the Private Lab status link below 760px. If anyone re-enables the Mobile
   Menu, this block becomes dead code and mobile nav becomes Hydrogen's
   offcanvas, which styles.css does not style. */
@media (width <= 650px) {
  .nav-links ul.g-toplevel > li > a.nav-status, .nav-links li.nav-status > a {
    display: flex;
  }
}
/* --------------------------------------------------------------------------
   4. Footer menu — same <ul> problem, same fix
   Requires: Footer Menu particle -> CSS Classes = footer-links
   -------------------------------------------------------------------------- */
.footer-links > ul, .footer-links ul.g-toplevel, .footer-links ul.g-toplevel > li {
  display: contents;
}
.footer-links ul.g-toplevel > li > a, .footer-links .g-menu-item-container {
  color: inherit;
  font: inherit;
  height: auto;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}
/* Gantry always wraps a particle in .g-content, so the anchors are children of
   that rather than of .footer-links. Promote it so network.css's
   `.footer-links{display:flex;gap:20px}` lays out the links themselves. */
.footer-links > .g-content {
  display: contents;
}
/* NOTE: an earlier version of this file reproduced the "Top ↑" arrow as
   `.footer-links a.back-to-top::after { content: "↑" }`, because a Joomla
   MENU ITEM cannot emit the original's <span aria-hidden="true">↑</span>.
   The footer is now a leotter-footer-links particle, whose Twig emits that
   span directly — so styles.css's own `.back-to-top span{margin-left:8px;
   font-size:15px}` applies and the ::after would render a SECOND arrow.
   Deliberately removed; do not reinstate unless the footer goes back to a
   Menu particle. */
/* --------------------------------------------------------------------------
   5. Gantry container neutralisation inside full-bleed sections

   .site-shell sets its own width (min(1180px, 100% - 64px)) and centering.
   Gantry's .g-container adds a competing max-width and horizontal padding,
   which double-insets every section. Only neutralise it where a .site-shell
   is doing the job instead.
   -------------------------------------------------------------------------- */
.status-section > .g-container, .brewing-section > .g-container, .site-footer > .g-container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* --------------------------------------------------------------------------
   5b. The hero shell — RESOLVES the handoff's open question

   The handoff asked "whether Gantry lets you put CSS classes on the container
   between a section and its rows." Measured answer: it does not. Gantry emits

     section.hero > div.g-container > div.g-grid(row) > div.g-block

   and only the section and the block expose CSS Classes fields — the row
   exposes nothing at all. .g-container is exactly the element that needs to be
   `.site-shell.hero-shell`, so it gets those declarations here rather than a
   class. Values copied verbatim from styles.css — nothing invented:

     .site-shell { width:min(1180px,100% - 64px); margin:0 auto }
     .hero-shell { z-index:1; flex-direction:column; min-height:780px;
                   display:flex; position:relative }

   ...with ONE deliberate omission: `position:relative; z-index:1` is NOT
   copied onto the container. Three-layer stacking is the whole trick here:

       .hero-art   <   .hero:after gradient   <   hero content

   In the original those were siblings, so `.hero-shell{position:relative;
   z-index:1}` lifted the content above the gradient while the art stayed
   below it. Under Gantry the art and the content are both inside the
   container, so a positioned container would drag the art up with the
   content and the gradient would darken nothing.

   Leaving the container STATIC fixes it on both counts:
     - .hero-art's nearest positioned ancestor is still .hero, so it bleeds
       the full section width exactly as before — no 100vw hack needed.
     - .hero:after paints above the art (both are position:absolute with
       z-index:auto, and the ::after is later in DOM order).
   The content rows are then lifted individually, below.
   -------------------------------------------------------------------------- */
.hero > .g-container {
  width: min(1180px, 100% - 64px);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  min-height: 780px;
  display: flex;
  flex-direction: column;
}
/* Every hero row EXCEPT the one holding the art sits above the gradient.
   This is what `.hero-shell{position:relative;z-index:1}` did in the
   original, applied one level lower. :has() rather than :nth-child so the
   rule survives rows being reordered. */
.hero > .g-container > .g-grid:not(:has(.hero-art)) {
  position: relative;
  z-index: 1;
}
/* --------------------------------------------------------------------------
   5b-ii. Single-block hero rows are promoted out of the way

   .hero-content uses `margin: auto 0 auto 54%` and .hero-footer uses
   `margin-top: auto`. Both only do anything when the element is a DIRECT
   child of the flex column — auto margins resolve against the free space of
   their own flex container. Gantry puts a row between the column and the
   block, so the margins were landing on a block inside a horizontal row and
   resolving to 0. Measured before this fix: .hero-footer ended 81px short of
   the bottom of the hero.

   `display: contents` on those two rows drops the wrapper and makes the
   blocks the column's children, exactly like the nav fix in section 1. The
   site-header row is deliberately NOT included — it holds two blocks and has
   to stay a real flex row.

   Because a display:contents element cannot be positioned, the z-index that
   lifts these above the .hero:after gradient has to move onto the blocks.
   -------------------------------------------------------------------------- */
.hero > .g-container > .g-grid:has(> .g-block.hero-content), .hero > .g-container > .g-grid:has(> .g-block.hero-footer) {
  display: contents;
}
.hero .g-block.hero-content, .hero .g-block.hero-footer {
  position: relative;
  z-index: 1;
}
/* styles.css steps .hero-shell and .site-shell down at these two
   breakpoints; mirror them onto the container. */
@media (width <= 850px) {
  .hero > .g-container {
    min-height: 760px;
  }
}
@media (width <= 650px) {
  .hero > .g-container {
    width: min(100% - 36px, 520px);
    min-height: 740px;
  }
}
/* --------------------------------------------------------------------------
   5c. Row-level classes, which Gantry does not offer

   Sections and blocks have a CSS Classes field. Rows have nothing — no
   classes, no ID, no tag attributes (docs.gantry.org: grids have "very basic
   options"). Where a row holds a SINGLE block the class simply goes on the
   block instead and none of this is needed.

   These three rows are the exceptions: each must be the flex/grid container
   for TWO blocks, so the class has to land on the row itself. They are
   reached with :has() keyed off a class that IS settable — on one of their
   own blocks. :has() rather than :nth-child so the rules survive rows being
   reordered or new rows being inserted above.

   Declarations copied verbatim from styles.css.
   -------------------------------------------------------------------------- */
/* .site-header — the wordmark + nav row. Keyed off the nav block. */
.hero > .g-container > .g-grid:has(> .g-block.nav-links) {
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
}
@media (width <= 650px) {
  .hero > .g-container > .g-grid:has(> .g-block.nav-links) {
    padding-top: 20px;
  }
}
/* .status-grid — the status card + aside pair. Keyed off the aside block.
   Gantry sets .g-grid{display:flex}, so `display` has to be overridden here,
   not merely augmented. Note this row COLLAPSES to display:block at 650px,
   which is what stacks the aside under the card. */
/* The original element was `div.site-shell.status-grid` — BOTH classes on one
   element. The row therefore needs .site-shell's width/centering as well as
   the grid, otherwise it spans the full container (measured: 1521px instead
   of 1180px). Same applies to .footer-inner below. */
.status-section > .g-container > .g-grid:has(> .g-block.status-aside) {
  width: min(1180px, 100% - 64px);
  margin: 0 auto;
  grid-template-columns: 1.16fr 0.84fr;
  align-items: center;
  gap: 100px;
  display: grid;
}
@media (width <= 650px) {
  .status-section > .g-container > .g-grid:has(> .g-block.status-aside) {
    width: min(100% - 36px, 520px);
  }
}
@media (width <= 850px) {
  .status-section > .g-container > .g-grid:has(> .g-block.status-aside) {
    gap: 55px;
  }
}
@media (width <= 650px) {
  .status-section > .g-container > .g-grid:has(> .g-block.status-aside) {
    display: block;
  }
}
/* .footer-inner — the note + footer nav pair. Keyed off the links block. */
.site-footer > .g-container > .g-grid:has(> .g-block.footer-links) {
  width: min(1180px, 100% - 64px);
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: 27px 0;
  display: flex;
}
@media (width <= 650px) {
  .site-footer > .g-container > .g-grid:has(> .g-block.footer-links) {
    width: min(100% - 36px, 520px);
  }
}
@media (width <= 650px) {
  .site-footer > .g-container > .g-grid:has(> .g-block.footer-links) {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}
/* Gantry wraps particles in .g-content with its own margin/padding. Inside the
   hand-built sections that spacing is already in styles.css. */
.hero .g-content, .status-section .g-content, .brewing-section .g-content, .site-footer .g-content {
  margin: 0;
  padding: 0;
}
/* --------------------------------------------------------------------------
   5c-ii. .site-shell on a BLOCK loses to Gantry's flex sizing

   Where a section's shell is a single block (the network section), the block
   carries `site-shell` directly. But .g-block is a flex item and Gantry's
   size-* classes set flex-basis, which controls the main-axis size and beats
   .site-shell's `width`. Measured: the block rendered 1521px, not 1180px.

   `flex: 0 1 auto` hands sizing back to the width property; .site-shell's
   `margin: 0 auto` then centres it in the row.
   -------------------------------------------------------------------------- */
.g-block.site-shell {
  flex: 0 1 auto;
}
/* --------------------------------------------------------------------------
   5d. Headings inherit, as styles.css assumes

   Hydrogen ships a global `h1, h2, h3, h4, h5, h6, strong { color: #4d4d4d }`.
   styles.css never sets a heading colour — it relies on inheritance from
   body{color:var(--cream)} — so every heading in the hand-built sections
   rendered mid-grey. An element selector is only (0,0,1), so a single
   class-scoped rule is enough; no !important needed here.

   Colours that ARE specified on descendants (h1 span -> gold, .status-card h2
   etc.) are untouched, since this only restores the inherited default.
   -------------------------------------------------------------------------- */
.hero, .status-section, .brewing-section, .site-footer {
  /* Hydrogen (and hydrogen-joomla) give <code> a light chip — background
     #f2f2f2, padding and a border. styles.css only sets colour and font on
     code, so the chip survived and rendered as a white block mid-sentence.
     Reset the chrome; styles.css keeps the cream/monospace treatment. */
}
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6, .hero strong, .status-section h1, .status-section h2, .status-section h3, .status-section h4, .status-section h5, .status-section h6, .status-section strong, .brewing-section h1, .brewing-section h2, .brewing-section h3, .brewing-section h4, .brewing-section h5, .brewing-section h6, .brewing-section strong, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer strong {
  color: inherit;
}
.hero code, .status-section code, .brewing-section code, .site-footer code {
  background: none;
  border: 0;
  padding: 0;
}
/* --------------------------------------------------------------------------
   6. Anchor colour — Hydrogen overrides `a{color:inherit}` by ID

   styles.css relies on `a { color: inherit }` so that every link takes its
   colour from whatever component it sits in. Hydrogen ships `#g-header a`,
   `#g-navigation a` and friends — specificity (1,0,1) — which beats that and
   every component rule written as a plain class.

   Measured: the hero CTA rendered rgb(153,222,206) (Hydrogen mint) on gold
   instead of ink. It is not just the button — every anchor in the hand-built
   sections was affected.

   So: restore inheritance across those sections, then re-assert the handful
   of anchors that styles.css/network.css colour on the ANCHOR ITSELF. Each
   re-assertion is more specific than the blanket rule above it, so it wins on
   specificity alone — no !important and no reliance on source order.

   These carried !important until the 2026-08-07 audit. Stripping them changed
   nothing: `_header.scss` no longer emits Hydrogen's ID-scoped `#g-header a`,
   so a plain class rule is sufficient now.
   -------------------------------------------------------------------------- */
.hero a, .status-section a, .brewing-section a, .site-footer a {
  color: inherit;
}
.hero .button-primary {
  color: var(--ink);
}
/* Must out-specify this file's OWN section-1 reset, not just Hydrogen's.
   That reset is now `.nav-links nav.g-main-nav ul.g-toplevel > li >
   a.g-menu-item-container` (0,4,4) — raising it during the !important audit
   silently turned Private Lab from cream to muted until this matched.
   Adding .g-menu-item-container here takes it to (0,5,4), an outright win
   rather than a source-order tie. */
.nav-links nav.g-main-nav ul.g-toplevel > li > a.nav-status, .nav-links nav.g-main-nav ul.g-toplevel > li > a.nav-status.g-menu-item-container, .nav-links li.nav-status > a, .nav-links a.nav-status {
  color: var(--cream);
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--cream);
}
.site-footer .back-to-top {
  color: var(--gold);
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--cream);
}
/* Tailwind's base layer in styles.css sets img,svg,video{display:block} and
   img{max-width:100%;height:auto}. The avatar has explicit width/height and
   must not be stretched by Gantry's own image rules. */
.aside-signoff img {
  width: 56px;
  height: 56px;
  max-width: none;
}
/*# sourceMappingURL=custom_14.css.map */