/* ==========================================================================
   Herbal Dispatch help centre — complete stylesheet
   --------------------------------------------------------------------------
   This file now REPLACES your old custom CSS rather than sitting beside it.
   The previous version was only meant to replace one rule, which is why
   swapping it in blanked the navbar, the white headline, the coral search
   button and the rounded category cards. Those are all rebuilt below from
   measurements taken off the site before the change.

   The hero image URL is filled in. Nothing to substitute.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header
   Help Scout's theme settings paint the navbar teal (#125a5b). The site ran
   it white with dark links, so that is restored here.
   -------------------------------------------------------------------------- */
.navbar .navbar-inner {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D6E3E3;
  box-shadow: none;
}

.navbar .brand,
.navbar .brand span {
  color: #101A1C !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

.navbar .nav li a {
  color: #586B6D !important;
  font-weight: 600;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a {
  color: #125A5B !important;
}

/* --- Logo ----------------------------------------------------------------
   Keep a logo uploaded under Docs > Settings so Help Scout renders an <img>
   here for these rules to act on. Which file you upload no longer matters:
   the rule below replaces whatever it serves. Any of the seal PNGs will do.
   -------------------------------------------------------------------------- */
/* Matched to herbaldispatch.com, measured at 1440: a 115px header with a
   96x96 seal whose left edge lands at x=150. Help Scout's own values were a
   99px navbar and a 56px mark, because .brand carries padding 31/11 top and
   bottom. 9px symmetric padding around a 96px mark gives exactly 115. */
.navbar .brand {
  padding: 9px 20px 9px 0 !important;
  height: auto !important;
}

/* The seal is embedded below as a data URI, deliberately.

   Help Scout caps the logo upload: a 512x512 PNG comes back out of its CDN at
   150x150. At a 96px box that is 192 device pixels on a Retina screen drawn
   from 150px of source, so it is upscaled and soft no matter what the CSS
   says. The main site looks sharp because hd-seal.png is 560x560 going into
   the same 96px.

   content:url() replaces the <img> Help Scout renders, so the 150px file is
   never used. The embedded copy is 288x288 (covers 3x displays) reduced to a
   16-colour palette, which is only 8.5KB because the seal is flat teal and
   white. No second file to host, and no URL to keep alive.

   Geometry matches herbaldispatch.com exactly: 96x96, left edge at x=150,
   115px header. */
.navbar .brand img {
  height: 96px !important;
  width: 96px !important;
  max-height: none !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  content: url("data:image/png;base64,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") !important;
}

/* The main site runs a 1200px content column with 30px inner padding, which
   is what puts its logo at x=150. Help Scout's navbar container is 1080 with
   20px padding (logo at 180) and is content-box, so max-width alone would not
   line up — border-box is doing real work here. Desktop only. */
@media (min-width: 980px) {
  .navbar .navbar-inner > .container-fluid {
    box-sizing: border-box !important;
    max-width: 1200px !important;
    padding: 0 30px !important;
    margin: 0 auto !important;
  }
}

/* Hides the "Herbal Dispatch FAQ" text once a real logo is present, so the two
   never show together. Harmless while the slot is still empty. */
.navbar .brand:has(img) span {
  display: none;
}

/* The nav list is position:absolute, so margins move nothing — it has to be
   centred with offsets. Doing it as 50% + translate rather than a fixed top
   means it stays centred if the logo size changes later. Desktop only: below
   980 this becomes the collapsed mobile menu and must stay put. */
@media (min-width: 980px) {
  .navbar ul.nav {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
  }
}

/* (An external-hosting alternative used to live here. Removed: the seal is
   embedded above, so there is no file to host and no URL to keep alive.) */

/* --------------------------------------------------------------------------
   2. Hero band
   The band measures 1440x482 at desktop and 1015x340 where the layout stops
   shrinking. Both are 2.99:1, and so is the image, so cover does nothing on
   desktop: what is in the file is what renders, at every desktop width.

   The scrim is a radial, not a flat wash. It sits heaviest behind the
   headline and search field in the centre, where the slate is empty anyway,
   and fades to almost nothing at the edges so the member card, the wax seal
   and the cartons keep their contrast.
   -------------------------------------------------------------------------- */
/* The 482px min-height and the flex centring were coming from the old CSS.
   Without them Help Scout collapses the band to about 204px, which is a 7:1
   letterbox: the card loses its top and bottom and the picture reads as a
   stripe. 482 at 1440 is what gives the band its 2.99:1 shape.

   The URL carries Shopify's own crop parameters. The source file is 2750x1536
   (1.79:1) and the band is 2.99:1, so browser-side cover would throw away
   about 40 percent of its height. width=2400&height=803&crop=center makes
   Shopify serve it pre-cut to the band's exact ratio, which also halves the
   download. Keep those parameters if you swap the image; change the filename
   only. */
#docsSearch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 482px;
  padding: 0 20px;
  background:
    radial-gradient(ellipse 62% 78% at 50% 50%,
      rgba(6, 16, 16, .46) 0%,
      rgba(6, 16, 16, .28) 60%,
      rgba(6, 16, 16, .08) 100%),
    #0B1416 url("https://cdn.shopify.com/s/files/1/0656/0097/9199/files/Gemini_Generated_Image_2oo2go2oo2go2oo2.jpg?v=1789415909&width=2400&height=803&crop=center")
    center / cover no-repeat;
}

#docsSearch h1 {
  color: #FFFFFF !important;
  font-size: 46px;
  font-weight: 700;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}

/* Below 768 the band becomes 375x210 (1.79:1), so cover crops the sides and
   the headline plus the full-width field cover most of what survives. A flat,
   heavier wash keeps the text clean and lets the slate work as texture.
   Add background-position: 18% center; here to pull the member card into
   frame on a phone; left out because the search field then sits on top of it. */
@media (max-width: 767px) {
  #docsSearch {
    min-height: 240px;
    background:
      linear-gradient(rgba(6, 16, 16, .62), rgba(6, 16, 16, .66)),
      #0B1416 url("https://cdn.shopify.com/s/files/1/0656/0097/9199/files/Gemini_Generated_Image_2oo2go2oo2go2oo2.jpg?v=1789415909&width=1000")
      center / cover no-repeat;
  }
  #docsSearch h1 { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   3. Search field
   620 wide, 56 tall, 11px corners, coral button. Rebuilt to the measurements
   the old CSS was producing.
   -------------------------------------------------------------------------- */
#searchBar {
  width: 620px;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0;
  border-radius: 11px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

/* The input is the FULL width of the form and the button is absolutely
   positioned on top of it at the right. So the input's right corners must be
   rounded too, or its white square corners show through behind the button's
   rounded ones — that was the white notch above and below the Search button.
   All four corners at 11px; the left two are the ones you actually see. */
#searchBar .search-query {
  height: 56px !important;
  padding: 0 22px !important;
  font-size: 16px !important;
  color: #101A1C !important;
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

/* Help Scout ships this button at right:-1px, so it hangs a pixel past the
   form and leaves a white hairline down the outside edge. Pinned to 0. */
#searchBar button {
  position: absolute !important;
  top: 24px !important;
  bottom: 24px !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  height: 56px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 600;
  color: #FFFFFF !important;
  background: #DC4F3F !important;
  border: 0 !important;
  border-radius: 0 11px 11px 0 !important;
  text-shadow: none;
}

#searchBar button:hover,
#searchBar button:focus {
  background: #C13E30 !important;
}

/* --------------------------------------------------------------------------
   4. Category cards
   White, 16px corners, generous padding. Link colour comes back to brand ink
   instead of Help Scout's stock blue (#4381B5).
   -------------------------------------------------------------------------- */
/* Help Scout lays these out as content-box inline-blocks: a 367px width plus
   52px of padding, 2px of border and 17px of margin comes to 438px each, so
   three need 1315px inside a 1080px list and the third wraps. A three-column
   grid ignores whatever width the theme sets and splits the row evenly. */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.category-list .category {
  box-sizing: border-box !important;
  width: auto !important;
  margin: 0 !important;
  background: #FFFFFF;
  border: 1px solid #D6E3E3;
  border-radius: 16px;
  padding: 34px 26px 30px;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}

@media (max-width: 900px) {
  .category-list { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 600px) {
  .category-list { grid-template-columns: 1fr !important; }
}

.category-list .category:hover {
  border-color: #125A5B;
  box-shadow: 0 6px 20px rgba(16, 26, 28, .08);
}

.category-list .category,
.category-list .category a,
.category-list .category h3 {
  color: #101A1C;
}

.category-list .category a:hover {
  color: #125A5B;
}

/* --------------------------------------------------------------------------
   5. Popular articles
   -------------------------------------------------------------------------- */
/* This block was already two columns; what made it look wrong is that Help
   Scout caps it at max-width:800px with margin:0 140px inside a 1080px
   container, so it sat narrower and inset from the category grid below and
   the page read as two different content widths. Now it fills the same
   1080px column, and the longer titles fit on one line each. */
.most-pop-articles {
  max-width: none !important;
  width: auto !important;
  margin: 0 0 36px !important;
}

.most-pop-articles .popArticles {
  column-count: 2 !important;
  column-gap: 56px !important;
}

/* Stops a two-line title splitting across the column break. */
.most-pop-articles .popArticles li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

@media (max-width: 600px) {
  .most-pop-articles .popArticles { column-count: 1 !important; }
}

.most-pop-articles h2 {
  color: #101A1C;
  font-weight: 700;
}

.most-pop-articles .popArticles a {
  color: #125A5B;
}

.most-pop-articles .popArticles a:hover {
  color: #DC4F3F;
}

/* --------------------------------------------------------------------------
   6. Page ground
   -------------------------------------------------------------------------- */
body {
  background: #FBFDFD;
}
