/* Site search (2026-11-06). The site's search is the store table (#Inventory on the homepage and /beer/), and until now
   the only way to it was scrolling down to the table. Two forms take you there from anywhere: the box in the masthead
   (top.php form.HeaderSearch, on every page) and the homepage hero (store.php #Hero). Both are plain GET forms to
   /beer/?search=<term>, which js/app.js already reads to fill the table's search box and scroll to it; on a page that
   has the table, app.js filters it in place instead. Up to 1024px the masthead shows a magnifier button next to the
   menu button, and the box opens over the whole bar; from 1025px the box is always open, between the site name and
   the nav, which moves right (and so drops its last links a little sooner on narrower windows; the side menu has them
   all). Palette: the bars' #cc4410, brown #604d2a/#65612f text, gold #ccb671 lines, like css/not-found.css's box. */

/* ---- the masthead box and the magnifier button (phones and tablets first) ---- */
#TopHeader .SearchToggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 5px;
  bottom: 0;
  color: #fdfdfd;
  cursor: pointer;
  display: block;
  height: 42px;
  margin: auto;
  padding: 0;
  position: absolute;
  right: 56px;
  top: 0;
  width: 44px;
  z-index: 25;
}
#TopHeader .SearchToggle svg {
  display: block;
  height: 24px;
  margin: 0 auto;
  width: 24px;
}
#TopHeader .SearchToggle:focus-visible {
  outline: 2px solid #fdfdfd;
  outline-offset: -2px;
}
/* the nav's right edge makes room for the button (master.css: 100% less 320px, ending 75px from the right). A link
   that doesn't fit drops off the row whole: without nowrap, a narrow window wrapped "New Arrivals" inside the clipped
   row, half of it showing (owner, 2026-11-06) */
#TopHeader nav a { white-space: nowrap; }
@media all and (min-width: 481px) and (max-width: 1024px) {
  #TopHeader nav { width: calc(100% - 364px); }
}
/* The ten links read New Arrivals, On Tap, All Products, Wine, Cider, Seltzer, Staff Picks, Kegs, Parties, Gift Cards,
   but as the window widens they come in as New Arrivals, On Tap, All Products, Kegs, Parties, Gift Cards, then Wine,
   Cider, Seltzer, Staff Picks (owner, 2026-11-07). The clipped row alone would drop links from the end, Gift Cards
   first, so the four a.Later links (top.php) stay out until the nav is wide enough for the six others and them:
   container queries on the nav's own width, so one set of numbers covers every breakpoint above. Measured in
   museo-sans-rounded, 16px with 1px letter-spacing and 7px padding, 4px between links: the six 632px, Wine 59, Cider
   66, Seltzer 84, Staff Picks 117; each step has about 8px to spare for other systems' text widths. Windows (nav =
   window less 553px, 583 from 1500px): Wine from 1,255px, Cider 1,325, Seltzer 1,413, Staff Picks 1,564. A browser
   without container queries shows the six, as before. If a link's words or the font change, measure again.
   Until the Adobe kit's font arrives (font-display: swap, so a first visit paints the fallback first) the links are in
   Helvetica or Arial Bold, about 7% wider: at 1,280, 1,440 and 1,600px Gift Cards would drop and then pop back. So the
   nav's fallback is that font at 90% (tasty-nav-fallback), a little narrower than museo, and the numbers hold for both. */
@font-face {
  font-family: "tasty-nav-fallback";
  src: local("Helvetica Bold"), local("Helvetica-Bold"), local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 90%;
}
#TopHeader nav a { font-family: "museo-sans-rounded", "tasty-nav-fallback", Helvetica; }
#TopHeader nav { container: tasty-nav / inline-size; }
#TopHeader nav a.Later { display: none; }
@container tasty-nav (min-width: 702px) { #TopHeader nav a.Later.Wine { display: inline-block; } }
@container tasty-nav (min-width: 772px) { #TopHeader nav a.Later.Cider { display: inline-block; } }
@container tasty-nav (min-width: 860px) { #TopHeader nav a.Later.Seltzer { display: inline-block; } }
@container tasty-nav (min-width: 981px) { #TopHeader nav a.Later.Picks { display: inline-block; } }

#TopHeader form.HeaderSearch {
  align-items: stretch;
  display: none;
  gap: 4px;
  height: 42px;
  left: 8px;
  margin: 0;
  position: absolute;
  right: 8px;
  top: 9px;
  z-index: 40;
}
#TopHeader.SearchOpen form.HeaderSearch { display: flex; }
/* the open box covers the bar; what it covers (the site name, the nav on tablets, the two buttons) goes out of the
   way, so nothing shows round the box's corners and the Close button doesn't draw over the menu button */
#TopHeader.SearchOpen h1,
#TopHeader.SearchOpen p.SiteName,
#TopHeader.SearchOpen h2,
#TopHeader.SearchOpen nav,
#TopHeader.SearchOpen .SearchToggle,
#TopHeader.SearchOpen .Hamburger { visibility: hidden; }
/* master.css transitions everything on the menu button (.5s) and on each of its three bars (span, :before, :after,
   .25s each), so hiding them waited for the transition: the bars showed under the X for a quarter second after the
   tap (owner, 2026-11-06). Nothing hidden here animates. */
#TopHeader.SearchOpen h1,
#TopHeader.SearchOpen p.SiteName,
#TopHeader.SearchOpen h2,
#TopHeader.SearchOpen nav,
#TopHeader.SearchOpen .Hamburger,
#TopHeader.SearchOpen .Hamburger span,
#TopHeader.SearchOpen .Hamburger:before,
#TopHeader.SearchOpen .Hamburger:after { transition: none; }
#TopHeader form.HeaderSearch .Box {
  align-items: stretch;
  background: #fff;
  border-radius: 6px;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
#TopHeader form.HeaderSearch .Box:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
#TopHeader form.HeaderSearch button.Go,
#TopHeader form.HeaderSearch button.Close {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
#TopHeader form.HeaderSearch button.Go svg,
#TopHeader form.HeaderSearch button.Close svg {
  display: block;
  height: 22px;
  margin: 0 auto;
  width: 22px;
}
#TopHeader form.HeaderSearch button.Go {
  border-radius: 6px 0 0 6px;
  color: #65612f;
  width: 40px;
}
#TopHeader form.HeaderSearch button.Go:focus-visible {
  outline: 2px solid #65612f;
  outline-offset: -3px;
}
/* the bar's own orange (a11y.css), so whatever sits under the X can never show through it */
#TopHeader form.HeaderSearch button.Close {
  background-color: #cc4410;
  border-radius: 5px;
  color: #fdfdfd;
  width: 44px;
}
#TopHeader form.HeaderSearch button.Close:focus-visible {
  outline: 2px solid #fdfdfd;
  outline-offset: -2px;
}
#TopHeader form.HeaderSearch input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #604d2a;
  flex: 1 1 auto;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 100%;
  letter-spacing: 0.3px;
  min-width: 0;
  outline: 0;
  padding: 0 10px 0 0;
  width: auto;
}
#TopHeader form.HeaderSearch input::placeholder {
  color: #77713f;
  opacity: 1;
}
#TopHeader form.HeaderSearch input::-webkit-search-decoration,
#TopHeader form.HeaderSearch input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* from 1025px the box stays open at the right, next to the menu button (owner, 2026-11-06), and the nav ends before it */
@media all and (min-width: 1025px) {
  #TopHeader .SearchToggle { display: none; }
  #TopHeader form.HeaderSearch {
    display: flex;
    height: 36px;
    left: auto;
    right: 64px;
    top: 12px;
    width: 230px;
    z-index: 25;
  }
  #TopHeader form.HeaderSearch button.Close { display: none; }
  #TopHeader form.HeaderSearch button.Go { width: 34px; }
  #TopHeader form.HeaderSearch button.Go svg { height: 18px; width: 18px; }
  #TopHeader form.HeaderSearch input { font-size: 14px; }
  #TopHeader nav { width: calc(100% - 553px); }
}
/* a little wider on big screens; all ten nav links show from 1,564px (the a.Later rules above) */
@media all and (min-width: 1500px) {
  #TopHeader form.HeaderSearch { width: 260px; }
  #TopHeader nav { width: calc(100% - 583px); }
}

/* ---- the homepage hero (top.php #Hero): the store photo under a dark tint, the shop's line over the page's H1, the
   search, two buttons and the old welcome box's order line. It sits in #Canvas between the fixed masthead (60px) and the paper panel, so it is
   the full width of the window; the panel's top padding (the masthead's room) then goes, and the hero keeps the gap ---- */
#Hero {
  background: #2b1b0f url(../img/hero.jpg) center / cover no-repeat;
  box-sizing: border-box;
  color: #fff;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  margin: 60px 0 0;
  padding: 72px 20px 64px;
  position: relative;
  text-align: center;
  z-index: 2; /* its suggestions panel hangs over the columns' panel (#Container, z-index 1) */
}
body.home #Container { padding-top: 24px; }
/* the photo files are already darkened (img/hero.jpg is img/dtr-share.jpg at 62%); this is the rest of the tint */
#Hero:before {
  background: linear-gradient(rgba(36, 22, 12, 0.42), rgba(36, 22, 12, 0.56));
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
/* wide enough for the H1 on one line from tablets up; the search box and the order line keep their own widths */
#Hero .Inner {
  margin: 0 auto;
  max-width: 820px;
  position: relative;
}
#Hero h1 {
  background: none;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 40px;
  font-weight: 700;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 46px;
  margin: 0 0 22px;
  text-indent: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  text-transform: none;
  text-wrap: balance;
}
/* the shop's own line, small over the H1 (the H1 says what and where for local searches; owner, 2026-11-06) */
#Hero p.Kicker {
  color: #ffd4c2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 18px;
  margin: 0 0 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
#Hero a {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#Hero a:hover { color: #ffd4c2; }
#Hero form.BeerSearch {
  display: flex;
  gap: 10px;
  margin: 0 auto 18px;
  max-width: 600px;
  position: relative;
}
#Hero form.BeerSearch input {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 6px;
  box-sizing: border-box;
  color: #604d2a;
  flex: 1 1 auto;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 16px;
  height: 48px;
  min-width: 0;
  padding: 0 16px;
}
#Hero form.BeerSearch input::placeholder {
  color: #77713f;
  opacity: 1;
}
#Hero form.BeerSearch input::-webkit-search-decoration,
#Hero form.BeerSearch input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
#Hero form.BeerSearch > button {
  -webkit-appearance: none;
  appearance: none;
  background: #cc4410;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  height: 48px;
  letter-spacing: 1px;
  margin: 0;
  padding: 0 22px;
  text-shadow: 0 2px 1px #b14013;
  text-transform: uppercase;
  transition: background 0.2s;
}
#Hero form.BeerSearch > button:hover { background: #e0531a; }
#Hero p.Go {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
}
#Hero p.Go a {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 6px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 20px;
  padding: 7px 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
#Hero p.Go a:hover {
  background: #fff;
  color: #cc4410;
}
/* the welcome box's button, down the page to the New Arrivals list (#NewArrivals has a scroll margin in welcome.css) */
#Hero p.Go a.Shop {
  background: #cc4410;
  border-color: #cc4410;
}
#Hero p.Go a.Shop:after { content: " \2193"; }
#Hero p.Go a.Shop:hover {
  background: #e0531a;
  border-color: #e0531a;
  color: #fff;
}
#Hero p.Order {
  font-size: 14px;
  line-height: 21px;
  margin: 20px auto 0;
  max-width: 560px;
  text-wrap: pretty;
}
#Hero p.Bye {
  font-size: 14px;
  line-height: 21px;
  margin: 4px 0 0;
}
#Hero form.BeerSearch > button:focus-visible,
#Hero p.Go a:focus-visible,
#Hero a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
/* a white ring off a white box over the dark photo read as a dark ring; the brand orange hugging the box instead */
#Hero form.BeerSearch input:focus-visible {
  outline: 3px solid #f15c22;
  outline-offset: 0;
}
/* with the welcome box gone, the left column holds only the Instagram grid, which social.css hides up to 1024px */
@media all and (max-width: 1024px) {
  #LeftColumn { display: none; }
}
@media all and (max-width: 767px) {
  #Hero {
    background-image: url(../img/hero-phone.jpg);
    padding: 34px 15px 28px;
  }
  body.home #Container { padding-top: 18px; }
  #Hero h1 {
    font-size: 28px;
    line-height: 33px;
    margin-bottom: 18px;
  }
  #Hero p.Kicker {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
  }
}
@media all and (max-width: 480px) {
  #Hero form.BeerSearch > button { font-size: 16px; padding: 0 16px; }
  #Hero p.Go a { font-size: 13px; padding: 6px 12px; }
}
@media all and (max-width: 360px) {
  #Hero form.BeerSearch { gap: 8px; }
  #Hero form.BeerSearch > button { letter-spacing: 0.5px; padding: 0 11px; }
}

/* ---- suggestions under either box (js/app.js builds them): a white panel with the best matches, their labels and
   prices, each a link to its beer page, and a last row that runs the search in the list ---- */
form.BeerSearch .Suggest {
  background: #fff;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  color: #604d2a;
  display: none;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  left: 0;
  max-height: calc(100vh - 150px);
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  text-align: left;
  top: calc(100% + 6px);
  z-index: 60;
}
form.BeerSearch .Suggest.is-open { display: block; }
form.BeerSearch .Suggest .Head {
  background: #f3efe4;
  color: #77713f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 15px;
  padding: 8px 14px;
  text-transform: uppercase;
}
form.BeerSearch .Suggest a.Item {
  align-items: center;
  border-top: 1px solid #efe9da;
  color: #604d2a;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  text-decoration: none;
}
form.BeerSearch .Suggest a.Item:first-of-type { border-top: 0; }
form.BeerSearch .Suggest a.Item:hover,
form.BeerSearch .Suggest a.Item.is-active { background: #fff1e8; }
form.BeerSearch .Suggest a.Item img {
  background: #fff;
  border-radius: 4px;
  flex: 0 0 auto;
  height: 44px;
  object-fit: contain;
  width: 44px;
}
form.BeerSearch .Suggest a.Item .T {
  flex: 1 1 auto;
  min-width: 0;
}
form.BeerSearch .Suggest a.Item .N {
  color: #2b1b0f;
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
form.BeerSearch .Suggest a.Item .B {
  color: #77713f;
  display: block;
  font-size: 13px;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
form.BeerSearch .Suggest mark {
  background: none;
  color: #cc4410;
}
form.BeerSearch .Suggest a.Item .P {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 17px;
  text-align: right;
}
form.BeerSearch .Suggest a.Item .P strong {
  color: #cc4410;
  display: block;
  font-size: 15px;
  font-weight: 700;
}
form.BeerSearch .Suggest a.Item .P em {
  color: #77713f;
  display: block;
  font-style: normal;
}
form.BeerSearch .Suggest button.All {
  -webkit-appearance: none;
  appearance: none;
  background: #faf7f0;
  border: 0;
  border-top: 1px solid #efe9da;
  color: #cc4410;
  cursor: pointer;
  display: block;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 14px;
  text-align: left;
  width: 100%;
}
form.BeerSearch .Suggest button.All:hover,
form.BeerSearch .Suggest button.All.is-active { background: #fff1e8; }
/* the masthead box: under the bar on phones and tablets (the box spans the bar), 400px under the box on desktops */
#TopHeader form.HeaderSearch .Suggest { top: calc(100% + 9px); }
@media all and (min-width: 1025px) {
  #TopHeader form.HeaderSearch .Suggest {
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    width: 400px;
  }
}
@media all and (max-width: 480px) {
  form.BeerSearch .Suggest a.Item { gap: 10px; padding: 8px 12px; }
  form.BeerSearch .Suggest a.Item .P strong { font-size: 14px; }
}
/* inside the hero the panel keeps its own colours (the hero's links are white and underlined) */
#Hero form.BeerSearch .Suggest a.Item,
#Hero form.BeerSearch .Suggest a.Item:hover {
  color: #604d2a;
  text-decoration: none;
}
#Hero form.BeerSearch .Suggest a.Item:focus-visible { outline-color: #cc4410; }