/* ==========================================================================
   Herbal Dispatch help centre — Help Scout Docs custom CSS
   Upload at: Manage → Docs → Herbal Dispatch FAQ → Custom Code → Upload stylesheet
   Matches the help.herodispatch.com template on the Herbal Dispatch palette.

   Every rule here was applied to the live site and the result measured, not
   written from a reading of the markup. Notes on what fought back:

   1. .category cards carry width:104px and box-sizing:content-box, a Bootstrap 2
      leftover. In a 360px grid column that renders a 158px card, which was the
      cramped look. Section 4 forces width:auto and border-box; measured back at
      360px.
   2. The logo is NOT an <img>. Help Scout renders
      <a class="brand"><span>Herbal Dispatch FAQ</span></a> and the logo is a
      background image on that span with text-indent:-9000px hiding the words.
      Carried forward in section 1. Remove it and the header goes blank.
      The mark is now the round HD badge, embedded as a data URI in :root, so
      the span is square (96px desktop, 54px mobile) rather than a wide
      wordmark slot, and the bar grew to 114px to hold it, matching the new
      storefront theme's header.
   3. The search button already contains <i class="icon-search"></i><span>Search
      </span>. Only the glyph is hidden here. Do not add a ::after with
      content:'Search' or the button says it twice.
   4. Help Scout injects its own <style> from the colour pickers, setting
      .navbar-inner to #125a5b and nav links to #c0c0c0. This file loads after
      and wins.
   5. The nav emits a link per public collection plus the Beacon's CONTACT.
      Section 1 hides the collection links and cases the Beacon label, leaving
      Hero's exact pair: Help Center and Contact.

   SETTINGS ALREADY CHANGED IN HELP SCOUT (2026-09-10), for the record:
   - Docs home link text: "HELP CENTER" → "Help Center"
   - Site description (the hero heading): "How Can We Help?" → "How can we help?"
   - Show on homepage: Categories → Most Popular Articles
   - Collection "POPULAR" (an empty TEST COLLECTION): Public → Private, which
     takes it out of the nav without deleting anything

   HERO PARITY PASS (2026-09-10, after reviewing Hero's own stylesheet at
   s3.amazonaws.com/.../helpscout-hero-dispatch.css): Hero's file contains no
   rule that builds or reveals the category cards, so the cards were always a
   Help Scout setting, not CSS. With "Most Popular Articles" selected, HD now
   emits Hero's exact markup: section.most-pop-articles.two-col + hr.sep +
   section.category-list. Confirmed live. The numbers below were then matched to
   Hero's measured values: hero band sized by 1792/600 ratio (429px at 1280px
   wide, same as Hero), h1 46px Helvetica Neue, search row 56px, section
   headings 27px Helvetica Neue, card radius 16px, card title 18px, article
   count 13px. Palette stays Herbal Dispatch teal; Hero's file is coral.

   STILL OPTIONAL, one field each:
   - The list heading reads "POPULAR ARTICLES" because that is the collection's
     name. Rename it to "Most Popular Articles" for exact Hero parity. Left alone
     here because renaming changes the collection slug and any bookmarked
     /collection/1-popular-articles link.
   - The Beacon's label is genuinely "CONTACT" inside the Beacon, which may be
     shared with other sites. Cased with CSS here rather than edited there.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --hd-teal:#10595A;
  --hd-teal-dark:#0C4041;
  --hd-coral:#DC4F3F;
  --hd-coral-dark:#C13E30;
  --hd-ink:#101A1C;
  --hd-muted:#586B6D;
  --hd-line:#D6E3E3;
  --hd-line-soft:#EDF2F2;
  --hd-paper:#FBFDFD;
  --hd-bar:#F1F0EE;                 /* the light top bar Hero uses */

  /* Hero sets every heading in Helvetica Neue and body copy in Inter. Matched
     here so the two help centres set type identically. */
  --hd-display:"Helvetica Neue",Helvetica,"Liberation Sans",Arial,sans-serif;

  /* The round Herbal Dispatch badge, embedded so the header never depends on
     an external file staying put. Sized to the new storefront theme, which
     draws assets/img/hd-seal.png at 96px in a 114px bar (9px clear above and
     below) and 54px in a 72px bar on mobile. Those exact numbers are used
     below. 192px source so it stays crisp at 96px on retina. Replace the data
     URI to change the mark. */
  --hd-logo:url('data:image/png;base64,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');

  --hd-sand:#EDEAE4;                /* the warm circle behind Hero's card icons */

  --hd-ic-member:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC4F3F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><circle cx='8.5' cy='11' r='2.2'/><path d='M5 16.2c.7-1.4 2-2.2 3.5-2.2s2.8.8 3.5 2.2'/><path d='M15 10h4'/><path d='M15 14h4'/></svg>");
  --hd-ic-order:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC4F3F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M2 3h2.2l2.4 12.1a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.2L21 7H5.4'/></svg>");
  --hd-ic-product:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC4F3F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>");

  --hd-doc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
}

body,
.navbar,
#docsSearch,
#contentArea{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--hd-ink);
  background:#fff;
}

/* ==========================================================================
   1. Top bar: light, logo left, nav right, sentence case
   ========================================================================== */

.navbar .navbar-inner,
#mainNav .navbar-inner{
  background:var(--hd-bar);
  border:none;
  box-shadow:none;
  min-height:114px;
  filter:none;
}
/* Hero's measured header geometry: a 1080px centred container with zero
   padding, so at 1280 the logo starts at x:100 and the nav ends 100px from the
   right edge. Below 1080 Hero pads the bar itself by 14px rather than the
   container. Hero only applies that under 979px, which leaves its logo flush
   against the window edge between 979 and 1080; the gutter is carried up to
   1079 here so HD never does that. */
#mainNav .container-fluid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1080px;
  margin:0 auto;
  padding:0;
}
/* Bootstrap 2 puts a clearfix ::before on .container-fluid. In a flex row that
   becomes a real zero-width flex item, and the 24px gap after it pushed the
   logo 24px right of the container edge. Measured: x:124 with it, x:100
   without, which is Hero's number. */
#mainNav .container-fluid::before,
#mainNav .container-fluid::after{display:none;}
@media(max-width:1079px){
  .navbar .navbar-inner,#mainNav .navbar-inner{padding:0 14px;}
}

/* the logo: background image on the span, text pushed off screen */
#mainNav .brand{
  display:flex;
  align-items:center;
  height:114px;
  padding:0;
  margin:0;
  text-shadow:none;
}
#mainNav .brand span{
  display:block;
  width:96px;
  height:96px;
  text-indent:-9000px;
  overflow:hidden;
  background:var(--hd-logo) left center / contain no-repeat;
}
@media(max-width:600px){
  .navbar .navbar-inner,#mainNav .navbar-inner{min-height:72px;}
  #mainNav .brand{height:72px;}
  #mainNav .brand span{width:54px;height:54px;}
}

/* nav right, sentence case. Hero's nav is not uppercase; that single
   difference does most of the work of making this look like Hero. */
/* .nav-collapse is height:0 until Bootstrap opens it, so the ul overflows it
   and starts ON the bar's centre line instead of being centred on it, which
   left the links sitting low. translateY(-50%) pulls the ul up by half its own
   height without touching layout, so the links centre at every width while
   keeping their right edge on the container edge. Measured: links and badge
   both centre at y:57 desktop and y:36 mobile. Do not swap this for absolute
   positioning; below 980px the collapse box is not at the container's right
   edge and the links fly off screen. */
#mainNav .nav-collapse{margin-left:auto;}
#mainNav ul.nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
  float:none;
  white-space:nowrap;
  transform:translateY(-50%);
}
#mainNav ul.nav > li{float:none;margin:0;}
.navbar .nav li a,
#mainNav ul.nav > li > a{
  text-transform:none;
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  color:var(--hd-ink);
  padding:0 15px;
  background:none;
  text-shadow:none;
  transition:color .15s;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus,
#mainNav ul.nav > li > a:hover{
  color:var(--hd-teal);
  background:none;
}

/* Hero does not mark the current page in the bar */
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus{
  color:var(--hd-ink);
  background:none;
  box-shadow:none;
}
.navbar .nav .active a::after{display:none;}

/* HD has exactly two nav links and they fit inline down to 320px (measured:
   badge ends at x:74, first link starts at x:98). The ul is display:flex at
   every width, so Bootstrap's toggle never hides anything and just sat there
   as a dead control. Hidden rather than styled. */
#mainNav .btn-navbar{display:none;}

/* Hero's nav is exactly two items: Help Center and Contact. HD's site also
   emits a link per public collection, and the Beacon adds CONTACT in caps.
   Verified live: the nav is Help Center (/), the collection (/collection/...)
   and the Beacon's CONTACT (href="#"). These two rules leave Hero's pair. */
#mainNav ul.nav > li:has(> a[href^="/collection/"]){display:none;}
/* the Beacon label is set inside the Beacon itself and is shared, so it is
   cased here rather than edited there */
#mainNav ul.nav > li > a[href="#"]{text-transform:lowercase;}
#mainNav ul.nav > li > a[href="#"]::first-letter{text-transform:uppercase;}

/* ==========================================================================
   2. Hero
   ========================================================================== */

#docsSearch{
  /* The dark layer is a gradient over whatever image is set in Customize, so
     the heading stays readable on any photo. Raise .55 toward .70 if a new
     hero image is busy through the middle. */
  background-image:
    linear-gradient(rgba(8,18,18,.55), rgba(8,18,18,.55)),
    url('https://cdn.shopify.com/s/files/1/0569/5550/2675/files/Herbal_Dispatch_hero.jpg?v=1659753358');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* Hero parity: the band is sized by ratio, not padding, so it lands at the
     same height as help.herodispatch.com at every width. border-box keeps the
     20px side gutter out of the ratio maths. */
  box-sizing:border-box;
  aspect-ratio:1792 / 600;
  min-height:340px;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:none;
}
#docsSearch h1{
  font-family:var(--hd-display);
  font-weight:700;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
  text-transform:none;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
  margin:0 0 32px;
}
@media(max-width:760px){
  #docsSearch{aspect-ratio:auto;min-height:210px;padding:26px 16px;}
  #docsSearch h1{font-size:30px;line-height:1.1;margin-bottom:24px;}
}

/* search field: white pill, coral button flush against it */
#docsSearch #searchBar{
  display:flex;
  max-width:640px;
  margin:0 auto;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
#docsSearch #searchBar input.search-query{
  flex:1;
  min-width:0;
  height:56px;
  margin:0;
  padding:0 22px;
  border:none;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  font-family:'Inter',sans-serif;
  font-size:16px;
  color:var(--hd-ink);
}
#docsSearch #searchBar input.search-query:focus{outline:none;box-shadow:none;}
#docsSearch #searchBar input.search-query::placeholder{color:#8A9A9B;}

#docsSearch #searchBar button{
  flex:none;
  width:118px;
  height:56px;
  border:none;
  border-radius:0;
  background:var(--hd-coral);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s;
}
#docsSearch #searchBar button:hover{background:var(--hd-coral-dark);}
/* the label span is already in the markup; only the glyph is hidden */
#docsSearch #searchBar button i.icon-search{display:none;}
#docsSearch #searchBar button span{display:inline;}
@media(max-width:520px){
  #docsSearch #searchBar button{width:92px;font-size:15px;}
  #docsSearch #searchBar input.search-query{height:50px;}
  #docsSearch #searchBar button{height:50px;}
}

/* the type-ahead dropdown */
#serp-dd{border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(16,26,28,.18);}
#serp-dd .result a{color:var(--hd-ink);}
#serp-dd .result a:hover,
#serp-dd .result > li.active{background:var(--hd-line-soft);color:var(--hd-teal);}

/* ==========================================================================
   3. Most Popular Articles, two columns

   Turn this on at Customize → "Show on homepage" → Most Popular Articles. That
   setting gives the article list AND the category cards below it, which is
   exactly Hero's homepage. Verified live on HD.

   HD now emits Hero's markup: <section class="most-pop-articles two-col">,
   <hr class="sep">, <section class="category-list">. Earlier it emitted
   <section class="threeCol row-fluid"><section class="collection">; the rules
   for that older wrapper are kept below so the file survives either shape.

   The document icon is a real <i class="icon-article-doc"> in the markup, so it
   needs colouring, not generating.
   ========================================================================== */

#contentArea{max-width:1120px;margin:0 auto;padding:64px 32px 44px;}
@media(max-width:640px){#contentArea{padding:44px 18px 32px;}}

/* flatten Help Scout's column wrapper */
#contentArea .threeCol.row-fluid,
#contentArea .twoCol.row-fluid{display:block;width:auto;margin:0;}
#contentArea .threeCol .collection,
#contentArea .twoCol .collection{
  float:none;width:auto;margin:0;padding:0;background:none;border:none;box-shadow:none;
}

#contentArea .collection-head,
.most-pop-articles h2{text-align:center;padding:0;border:none;}
/* The wrapper carries the gap in the legacy collection layout; in Hero's
   .most-pop-articles layout there is no wrapper, so the heading carries it
   itself. Without this the heading sits flush on the first row of links. */
#contentArea .collection-head{margin:0 0 34px;}
#contentArea .collection-head h2{margin:0;}
.most-pop-articles h2{margin:0 0 40px;}
@media(max-width:640px){.most-pop-articles h2{margin:0 0 28px;}}
#contentArea .collection-head h2,
.most-pop-articles h2{
  padding:0;
  font-family:var(--hd-display);
  font-weight:700;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--hd-ink);
  text-transform:none;
}
#contentArea .collection-head h2 a{color:var(--hd-ink);text-decoration:none;}
#contentArea .collection-head h2 a:hover{color:var(--hd-teal);}
/* Hero has no subtitle under the heading */
#contentArea .collection-head p{display:none;}
@media(max-width:640px){
  #contentArea .collection-head h2,
  .most-pop-articles h2{font-size:23px;}
}

#contentArea .collection-body{padding:0;background:none;border:none;}

#contentArea ul.popArticles,
.most-pop-articles.two-col ul.popArticles{
  columns:2;
  column-gap:56px;
  max-width:940px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
@media(max-width:760px){
  #contentArea ul.popArticles,
  .most-pop-articles.two-col ul.popArticles{columns:1;}
}
#contentArea ul.popArticles li{
  break-inside:avoid;
  margin:0 0 16px;
  padding:0;
  list-style:none;
  border:none;
  background:none;
}
#contentArea ul.popArticles li a{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:0;
  font-size:16px;
  line-height:1.5;
  color:var(--hd-ink);
  text-decoration:none;
  transition:color .15s;
}
#contentArea ul.popArticles li a:hover{
  color:var(--hd-teal);
  text-decoration:underline;
  text-underline-offset:2px;
}
#contentArea ul.popArticles li a i{flex:none;margin-top:2px;color:var(--hd-muted);opacity:.85;}
#contentArea ul.popArticles li a:hover i{color:var(--hd-teal);opacity:1;}

hr.sep{border:none;border-top:1px solid var(--hd-line);margin:52px 0;}

/* ==========================================================================
   4. Collection heading + category cards

   Two things about Help Scout's own stylesheet that have to be overridden by
   force here, both verified on the live page:
     - .category is width:104px and box-sizing:content-box, a Bootstrap 2
       leftover. Inside a grid column that makes a 158px card in a 360px slot,
       which is exactly the cramped look. width:auto + border-box fixes it.
     - it also carries margin:0 2.875px 20px, which fights the grid gap.
   Hero's cards show an icon, the title and the article count. The description
   paragraph is hidden to match; delete that rule to keep the descriptions.
   ========================================================================== */

/* the collection heading ("POPULAR ARTICLES"). The capitals are the collection's
   real name, not CSS, so rename it in Help Scout to "Most Popular Articles" to
   match Hero exactly. */
.collection-category > h2,
#contentArea .collection-category h2{
  text-align:center;
  font-family:var(--hd-display);
  font-weight:700;
  font-size:27px;
  letter-spacing:-.02em;
  color:var(--hd-ink);
  text-transform:none;
  margin:0 0 34px;
}
@media(max-width:640px){.collection-category > h2{font-size:23px;}}

.category-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  float:none;
}
@media(max-width:900px){.category-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.category-list{grid-template-columns:1fr;}}
.category-list::before,
.category-list::after{display:none;}          /* kill the Bootstrap clearfix */

.category-list .category,
#contentArea .category-list a.category{
  box-sizing:border-box;
  width:auto;
  max-width:none;
  min-height:0;
  margin:0;
  float:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border:1px solid var(--hd-line);
  border-radius:16px;
  padding:34px 26px 30px;
  text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.category-list .category:hover{
  border-color:var(--hd-teal);
  box-shadow:0 10px 26px rgba(16,89,90,.09);
  transform:translateY(-2px);
}

/* the circular icon Hero puts above each title */
.category-list .category::before{
  content:'';
  width:74px;
  height:74px;
  flex:none;
  border-radius:50%;
  background-color:var(--hd-sand);
  background-repeat:no-repeat;
  background-position:center;
  background-size:32px 32px;
  margin-bottom:20px;
}
#category-4::before{background-image:var(--hd-ic-member);}
#category-6::before{background-image:var(--hd-ic-order);}
#category-5::before{background-image:var(--hd-ic-product);}

.category-list .category h3{
  font-family:var(--hd-display);
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--hd-ink);
  text-transform:none;
  margin:0 0 10px;
}
/* Hero shows icon + title + count only. Remove this rule to keep descriptions. */
.category-list .category > p:not(.article-count){display:none;}

.category-list .category .article-count{
  font-size:13px;
  font-weight:600;
  color:var(--hd-coral);
  margin:0;
}

/* ==========================================================================
   5. Collection and article pages
   ========================================================================== */

#contentArea h1,
#fullArticle h1{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--hd-ink);
}
#fullArticle{font-size:16px;line-height:1.75;color:#22312F;}
#fullArticle h2,
#fullArticle h3{
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--hd-ink);
}
#fullArticle a,
.contentWrapper a,
.collection a{color:var(--hd-teal);}
#fullArticle a:hover,
.contentWrapper a:hover,
.collection a:hover{color:var(--hd-coral);}
#fullArticle blockquote{
  border-left:3px solid var(--hd-teal);
  background:var(--hd-line-soft);
  border-radius:0 10px 10px 0;
  padding:14px 20px;
  margin:22px 0;
  color:#2C4142;
}
#fullArticle code,
#fullArticle pre{
  background:var(--hd-line-soft);
  border-radius:8px;
  color:var(--hd-ink);
}

.article-list li a{color:var(--hd-ink);text-decoration:none;}
.article-list li a:hover{color:var(--hd-teal);text-decoration:underline;}

/* breadcrumbs */
#contentArea .breadcrumb,
.breadcrumb{
  background:none;
  padding:0;
  margin-bottom:18px;
  font-size:13px;
  color:var(--hd-muted);
}
.breadcrumb a{color:var(--hd-muted);}
.breadcrumb a:hover{color:var(--hd-teal);}

/* was this helpful / feedback footer */
.rating,
#fullArticle + .rating{border-top:1px solid var(--hd-line);padding-top:24px;}

/* ==========================================================================
   6. Footer
   ========================================================================== */

#contentArea footer.center,
footer.center{
  border-top:1px solid var(--hd-line);
  margin-top:56px;
  padding-top:26px;
  font-size:13px;
  color:var(--hd-muted);
}
footer.center a{color:var(--hd-muted);}
footer.center a:hover{color:var(--hd-teal);}