/* ============================================================
   BASECAMP 5 HELP DOCS

   Header:     light cream hero, dark text, hidden h1
   Card art:   solid colors from the Basecamp app palette
   Palettes:   header vars near the top, card art vars in
               the "Cover art colors" section
   ============================================================ */


/* -------------------------------------------------------
   Fonts
------------------------------------------------------- */

@font-face {
  font-family: 'Graphik';
  font-style: normal;
  font-weight: normal;
  src: url('https://helpscout-docs.37signals.com/Graphik-Regular-Cy-Gr-Web.woff') format('woff');
}

@font-face {
  font-family: 'Graphik';
  font-style: normal;
  font-weight: bold;
  src: url('https://helpscout-docs.37signals.com/Graphik-Semibold-Cy-Gr-Web.woff') format('woff');
}

@font-face {
  font-family: 'Graphik';
  font-style: italic;
  font-weight: normal;
  src: url('https://helpscout-docs.37signals.com/Graphik-RegularItalic-Cy-Gr-Web.woff') format('woff');
}

@font-face {
  font-family: 'Graphik';
  font-style: italic;
  font-weight: bold;
  src: url('https://helpscout-docs.37signals.com/Graphik-SemiboldItalic-Cy-Gr-Web.woff') format('woff');
}


/* -------------------------------------------------------
   Base
------------------------------------------------------- */

body {
  font-family: 'Graphik', 'Helvetica Neue', helvetica, 'Apple Color Emoji', arial, sans-serif;
  background-color: #ffffff;
  color: #2a2a2a;
}

.container-fluid {
  max-width: 1080px;
  padding: 0 2em;
}

h1, h2, h3, h4, h5, h6 {
  color: #1a7ee8 !important;
}

/* H3 and below in articles: dark charcoal, not blue,
   so section headers (H2) and subsection headers (H3) read as distinct levels */
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
  color: #2a2a2a !important;
}


/* -------------------------------------------------------
   Header palette

   The navbar and the search area share one color so they
   read as a single continuous hero band.

   Deep slate keeps the header in the blue family without
   competing with the Getting Started card cover, which
   uses --bc-blue (#42a3ff).

   --bc-header-tint is the same hue mixed 90% with white.
   It is only used for the search button hover state.

   Note: #1a7ee8 still appears elsewhere in this file as
   the body heading and link color. That is intentional —
   only the header hero changed.
------------------------------------------------------- */

:root {
  --bc-header:        #f1ede4;
  --bc-header-text:   #2a2a2a;
  --bc-header-border: #e6ded0;
  --bc-field-border:  #d8c6a6;
  --bc-header-accent: #1a7ee8;
  --bc-header-tint:   #f4efe4;
}

/* Previous deep slate header. To revert, swap these five
   values in above — no other rule needs to change.

   --bc-header:        #274a63;
   --bc-header-text:   #ffffff;
   --bc-header-border: transparent;
   --bc-field-border:  transparent;
   --bc-header-accent: #274a63;
   --bc-header-tint:   #e9edef;

   Note that reverting also means the nav pill borders and
   hover wash need to go back to white-based rgba values —
   see the two commented alternatives in the .nav rules. */


/* -------------------------------------------------------
   Top nav — light background, dark links

   The header logo must be an asset with dark artwork. A
   white-on-transparent logo disappears on this background.
------------------------------------------------------- */

.navbar {
  max-width: 100%;
  margin: 0 0 0 0;
  border-bottom: none;
  background-color: var(--bc-header);
}

.navbar .navbar-inner {
  background-color: var(--bc-header);
  box-shadow: none;
  padding-bottom: 16px;
}

.navbar .nav {
  position: static;
  margin: 0 auto;
  float: none;
  text-align: center;
}

.navbar .nav li a,
.navbar .nav li.active a {
  padding: 8px 22px !important;
  color: var(--bc-header-text) !important;
  font-size: 1rem;
  font-weight: bold;
  /* On a dark header this was rgba(255, 255, 255, 0.7) */
  border: 2px solid rgba(42, 42, 42, 0.35) !important;
  border-radius: 10px !important;
  margin: 0 4px;
  line-height: 1;
  text-shadow: none !important;
}

.navbar .nav li a:hover,
.navbar .nav li.active a:hover {
  color: var(--bc-header-text) !important;
  border-color: var(--bc-header-text) !important;
  /* On a dark header this was rgba(255, 255, 255, 0.1) */
  background-color: rgba(42, 42, 42, 0.06) !important;
  text-decoration: none !important;
}

.navbar .nav li a:focus {
  color: var(--bc-header-text) !important;
  outline: auto;
}

/* Logo — TODO: swap for BC5 logo URL once available */
#mainNav .brand {
  padding: 1.25em 0 0.75em 0;
  float: none;
  text-align: center;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

#mainNav .brand img {
  height: 52px !important;
  width: auto !important;
  vertical-align: middle;
}

#mainNav .brand span {
  display: none;
}

/* Site name text rendered by Help Scout below the logo image */
#mainNav .brand a,
#mainNav .brand p,
#mainNav .brand h1 {
  color: var(--bc-header-text) !important;
  text-shadow: none !important;
  font-size: 1.375rem !important;
  font-weight: bold !important;
  vertical-align: middle;
}

.navbar .nav .active .caret {
  display: none;
}

.navbar .btn-navbar {
  display: none;
}

.nav-collapse,
.nav-collapse.collapse {
  height: auto;
  overflow: visible;
  transform: none;
}


/* -------------------------------------------------------
   Search area — extends the header hero

   Help Scout renders an h1 here from the site name /
   tagline field under Settings → Customize.

   Important: if that field is left empty, Help Scout omits
   the element entirely and the homepage ends up with no h1
   at all. The outline then starts at the H2 collection
   names, which is a level skip for anyone navigating by
   heading, and it drops the strongest on-page heading
   signal for search.

   So keep text in that field and hide the h1 visually
   below, rather than clearing the text.
------------------------------------------------------- */

#docsSearch {
  background-color: var(--bc-header);
  padding: 1em 1em 3em 1em;
  text-align: center;
  border-color: transparent;
  /* The cream hero and the white page below are close in
     tone, so this hairline keeps the boundary deliberate.
     Safe to remove if you prefer the softer transition. */
  border-bottom: 1px solid var(--bc-header-border);
}

/* Visually hidden, not removed. The element stays in the
   accessibility tree and readable by crawlers while taking
   up no space on screen.

   Do not replace this with display: none or
   visibility: hidden. Both drop the element from the
   accessibility tree and are discounted by search engines,
   which lands you back where you started.

   clip is deprecated but remains the most widely supported
   form of this technique; clip-path covers modern
   browsers. Keeping both is deliberate. */
#docsSearch h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* To bring the hero headline back on screen, comment out
   the rule above and uncomment this one.

#docsSearch h1 {
  display: block !important;
  color: var(--bc-header-text) !important;
  font-size: 1.625rem;
  font-weight: bold;
  margin-bottom: 0.75em;
  letter-spacing: -0.3px;
}
*/

#serp-dd {
  z-index: 1000;
}

/* The border sits on the form rather than on the input.
   The Search button is absolutely positioned inside this
   element, so an input border would be hidden behind the
   button along the right edge and the outline would break.
   Because padding is 0, the button still resolves to the
   input's exact height and the alignment fix holds. */
#searchBar {
  position: relative !important;
  display: block !important;
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff !important;
  border: 1px solid var(--bc-field-border) !important;
  border-radius: 6px;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Note: Help Scout does not currently render an
   .input-append wrapper — this rule matches nothing on the
   live page. Kept as a defensive reset in case the markup
   changes. The Search button is a direct child of
   #searchBar and is positioned against it. */
#searchBar .input-append {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}

/* Vertical padding and line-height are whole pixels on
   purpose. At the input's 18px font size, 0.75em padding
   is 13.5px and a 1.25 line-height is 22.5px, making the
   input 49.5px tall. The Search button is positioned with
   top: 0 / bottom: 0, and the browser rounds its height up
   to 50px — so the button overhung the input by half a
   pixel, which is a visible step on a retina display.
   14 + 22 + 14 gives exactly 50px and the two align.
   If you change the font size here, keep these three
   values summing to a whole number. */
#searchBar .search-query {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 100px 14px 1.25em !important;
  margin: 0 !important;
  height: auto !important;
  border: none !important;
  /* All four corners, not just the left pair. The border
     lives on #searchBar, which is rounded and cannot use
     overflow: hidden (that clips #serp-dd). A square right
     corner on this input therefore pokes into the parent's
     curved border band, and a child's background paints on
     top of its parent's border — which erased the border at
     the top-right and bottom-right corners. Rounding all
     four makes the input follow the inner curve instead. */
  border-radius: 5px !important;
  background-color: #ffffff !important;
  color: #2a2a2a !important;
  box-shadow: none !important;
  float: none !important;
  line-height: 22px !important;
}

#searchBar button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 90px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: #ffffff !important;
  color: var(--bc-header-accent) !important;
  font-weight: bold !important;
  border-radius: 0 5px 5px 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  float: none !important;
  text-align: center !important;
}

#searchBar button:hover {
  background-color: var(--bc-header-tint) !important;
}


/* -------------------------------------------------------
   Contact button
------------------------------------------------------- */

/* Contact button hidden — Beacon ("Need Help?") handles this instead */
#contact,
#contactMobile {
  display: none !important;
}


/* -------------------------------------------------------
   Homepage: collection labels
   (Help Center / Learning Center h2 headings)
------------------------------------------------------- */

.collection-category {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5em 2em 0;
}

.collection-category h2 {
  font-size: 0.875rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  font-weight: 700 !important;
  margin-bottom: 1.25em !important;
  text-align: left !important;
}


/* -------------------------------------------------------
   Homepage: category cards with banner images

   Each card shows a 170px image banner at the top, then
   category name, description, and article count below.

   Images are applied per-category via background-image
   on each category's ID selector (see bottom of file).
   Until artwork is ready, a solid-color gradient fills
   the image area as a placeholder.

   To add real artwork, replace the linear-gradient in
   each per-category rule with: url('https://your-cdn/image.jpg')
   Keep the same background-size/repeat/position values.
------------------------------------------------------- */

.category-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

.category-list .category {
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  min-height: auto !important;
  vertical-align: top;
  text-decoration: none;
  border-radius: 8px !important;
  border: 1px solid #e0d8cc !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  /* 123px against a 246px card is exactly 2:1, which is the
     aspect ratio of the exported cover art. If you drop to
     3 columns permanently, 143px keeps the same ratio.
     Note the band stays 123px at the narrower breakpoints,
     so solid colors are fine but image art would stretch —
     use background-size: cover if you swap art back in. */
  background-size: 100% 123px !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  padding: 135px 16px 14px !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.category-list .category:hover {
  border-color: #c8b898 !important;
}

.category-list .category:hover h3 {
  text-decoration: underline;
}

.category-list .category:before {
  display: none !important;
}

/* Category name

   min-height reserves two lines whether the title needs them
   or not. At the 4-column width "Account, Billing, & Settings"
   is the only name that wraps, and without this its blue
   underline sat 21px below its neighbours' — a misaligned
   horizontal rule reads as a bug.

   line-height and box-sizing are pinned so the 2.8em stays
   exactly two lines rather than drifting with inherited
   values.

   If you shorten that category name in Help Scout so nothing
   wraps, you can delete all three properties and get about
   24px per row back. */
.category-list h3 {
  box-sizing: content-box !important;
  line-height: 1.4 !important;
  min-height: 2.8em !important;
  margin: 0 0 0.4em 0 !important;
  padding: 0 0 0.4em 0 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #1a7ee8 !important;
  background-color: transparent !important;
  position: static !important;
  display: block !important;
  text-decoration: none !important;
  border-bottom: 2px solid #1a7ee8 !important;
}

/* Category description */
.category-list .category p {
  color: #445566 !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  margin: 0 0 0.4em 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

/* Article count */
.category-list .category .article-count {
  color: #999999 !important;
  background-color: transparent !important;
  font-size: 0.8125rem !important;
  display: block !important;
  margin: 0 !important;
}

/* Column ladder. Four columns need roughly 1080px of
   viewport to stay above ~240px per card; below that they get
   too narrow for the titles. Order matters — the narrowest
   query has to come last to win. */

@media screen and (max-width: 1024px) {
  .category-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media screen and (max-width: 820px) {
  .category-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: single column */
@media screen and (max-width: 600px) {
  .category-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* -------------------------------------------------------
   Learning Center — cream band

   Targets the second .collection-category on the page.
   This assumes Help Center comes first, Learning Center
   second — which matches the current Help Scout setup.
------------------------------------------------------- */

.collection-category + .collection-category {
  background-color: #f6ebd7;
  max-width: 100%;
  padding: 2.5em 0 3em;
  margin-top: 3em;
}

.collection-category + .collection-category > h2 {
  max-width: 1080px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 2em;
  color: #aaaaaa !important;
}

.collection-category + .collection-category .category-list {
  max-width: 1080px;
  margin: 0 auto !important;
  padding: 0 2em;
}

/* Amber underline accent instead of blue */
.collection-category + .collection-category .category-list .category {
  background-color: #fffdf6 !important;
  border-color: #d8c6a6 !important;
}

.collection-category + .collection-category .category-list h3 {
  border-bottom-color: #c4952a !important;
}

.collection-category + .collection-category .category-list .category p {
  color: #6a5a40 !important;
}

.collection-category + .collection-category .category-list .category .article-count {
  color: #a08060 !important;
}


/* -------------------------------------------------------
   Cover art colors — Basecamp app palette

   Card covers use the same swatches as the Basecamp app
   so the help center reads as part of the product.

   Colors are declared once as custom properties and
   referenced by the nth-child rules below. To recolor a
   card, change which var() it points at. To retune a
   swatch everywhere it appears, change it here.

   To swap in real artwork later, replace a rule's
   linear-gradient with url('https://your-cdn/image.png')
   and keep the background-size / repeat / position values
   set further up in this file.

   Help Docs order:
     1. Getting Started               blue
     2. Using Basecamp                green
     3. Working With Your Team        yellow
     4. Personal Settings             purple
     5. Apps & Integrations           brown
     6. Troubleshooting & FAQs        red
     7. Account, Billing, & Settings  gray

   Learning Center order:
     1. The 37signals Way             pink
     2. Field Guides                  green
     3. Classes                       orange

   Green appears in both collections. The two cards sit in
   different rows on the homepage, so they never touch.
------------------------------------------------------- */

:root {
  --bc-yellow: #e9b60f;
  --bc-orange: #f58e02;
  --bc-red:    #fd6c44;
  --bc-pink:   #ef63b8;
  --bc-purple: #ae80ff;
  --bc-blue:   #42a3ff;
  --bc-green:  #56b66f;
  --bc-brown:  #b59977;
  --bc-gray:   #9a9fa2;
}

/* -------------------------------------------------------
   Dark mode cover colors

   Swaps in Basecamp's dark-mode swatches when the
   visitor's system is set to dark.

   Note: the rest of this stylesheet is light-only, so
   these values currently land on a white page. The dark
   swatches are tuned for dark backgrounds and will read
   duller here. To keep the light values for everyone,
   comment out this entire @media block.
------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bc-yellow: #cd9c35;
    --bc-orange: #d7751a;
    --bc-red:    #da5b45;
    --bc-pink:   #ce5997;
    --bc-purple: #a364e5;
    --bc-blue:   #3a8ae6;
    --bc-green:  #409f65;
    --bc-brown:  #9e8464;
    --bc-gray:   #828b8f;
  }
}

/* Help Docs — one color per card position */
.category-list .category:nth-child(1) { background-image: linear-gradient(var(--bc-blue),   var(--bc-blue));   } /* Getting Started              */
.category-list .category:nth-child(2) { background-image: linear-gradient(var(--bc-green),  var(--bc-green));  } /* Using Basecamp               */
.category-list .category:nth-child(3) { background-image: linear-gradient(var(--bc-yellow), var(--bc-yellow)); } /* Working With Your Team       */
.category-list .category:nth-child(4) { background-image: linear-gradient(var(--bc-purple), var(--bc-purple)); } /* Personal Settings            */
.category-list .category:nth-child(5) { background-image: linear-gradient(var(--bc-brown),  var(--bc-brown));  } /* Apps & Integrations          */
.category-list .category:nth-child(6) { background-image: linear-gradient(var(--bc-red),    var(--bc-red));    } /* Troubleshooting & FAQs       */
.category-list .category:nth-child(7) { background-image: linear-gradient(var(--bc-gray),   var(--bc-gray));   } /* Account, Billing, & Settings */

/* Learning Center — override nth-child colors for its 3 cards */
.collection-category + .collection-category .category-list .category:nth-child(1) { background-image: linear-gradient(var(--bc-pink),   var(--bc-pink));   } /* The 37signals Way */
.collection-category + .collection-category .category-list .category:nth-child(2) { background-image: linear-gradient(var(--bc-green),  var(--bc-green));  } /* Field Guides      */
.collection-category + .collection-category .category-list .category:nth-child(3) { background-image: linear-gradient(var(--bc-orange), var(--bc-orange)); } /* Classes           */


/* -------------------------------------------------------
   Article list (inside category pages)
------------------------------------------------------- */

.articleList {
  margin-top: 2em;
}

.articleList li {
  padding: 0.875em 0 0.5em 0;
  margin: 0.25em 0;
  border-top: 1px solid #d8c6a6;
}

.articleList a {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: #1a7ee8;
}

.articleList a:hover {
  text-decoration: underline;
}


/* -------------------------------------------------------
   Article / entry page
------------------------------------------------------- */

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  font-size: 1.05rem;
  line-height: 1.7;
}

#fullArticle a {
  font-size: inherit !important;
  color: #1a7ee8;
}

#fullArticle a:hover {
  text-decoration: underline;
}

#sidebar {
  margin-top: 3.25em;
}

#main-content {
  background: none;
  padding: 32px 0 0 40px;
}

/* Narrower sidebar, wider content on desktop.
   Sidebar floats left, main-content floats right —
   overriding Bootstrap's span3/span9 percentages. */
@media screen and (min-width: 769px) {
  #sidebar {
    width: 185px !important;
  }

  #main-content {
    width: calc(100% - 213px) !important; /* 185px sidebar + ~28px gutter */
  }
}

@media (max-width: 768px) {
  #main-content {
    background: none;
    padding: 0;
  }
}

.contentWrapper {
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  border: none;
}

.contentWrapper h1 {
  font-weight: bold;
  color: #1a7ee8;
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 1em;
}

#categoryHead .sort {
  display: none;
}

#sidebar .nav-list a {
  color: #1a7ee8;
  font-size: 1rem;
}

#sidebar .nav-list a:hover {
  color: #1a7ee8;
  text-decoration: underline;
}

/* Hide "last updated" timestamp */
.articleFoot time.lu {
  display: none;
}

/* Jump list */
.subnav {
  list-style: none;
  padding: 0 0 0 1em;
  margin: 0 0 1.5em 0;
  border-left: 1px dashed #d8c6a6;
}

.subnav li {
  font-size: 1rem !important;
  margin: 4px 0;
}

.subnav a {
  font-weight: normal !important;
  color: #1a7ee8 !important;
  padding: 0 !important;
  font-size: inherit !important;
}

.subnav .icon-article-doc {
  display: none !important;
}


/* -------------------------------------------------------
   Article media
------------------------------------------------------- */

.icon-print {
  display: none !important;
}

#fullArticle a img {
  border: 0;
}

#fullArticle details {
  margin-bottom: 1.5em;
}

#fullArticle details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
}

#fullArticle details summary > * {
  display: inline;
}

#fullArticle details[open] summary {
  margin-bottom: 1em;
}

#fullArticle source,
#fullArticle video {
  height: auto;
  max-width: 100%;
  width: 100%;
}

#fullArticle video {
  border: 1px solid #d8c6a6;
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5em;
  margin-top: -4px;
  overflow: hidden;
  padding: 4px;
}


/* -------------------------------------------------------
   Footer
------------------------------------------------------- */

footer p {
  margin-top: 4em;
  margin-bottom: 5em;
  text-align: center;
  color: #888888;
  font-size: 0.875rem;
}


/* -------------------------------------------------------
   Tabbed content (for article-level CSS tabs)
------------------------------------------------------- */

.tabs input[type="radio"] { display: none; }

.tabs {
  border: 1px solid #d4d0c8;
  border-radius: 8px;
}

.tab-labels {
  display: flex;
  border-bottom: 1px solid #d4d0c8;
  margin-bottom: 0;
  padding: 0 8px;
}

.tab-labels label {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-labels label:hover { color: #222; }

.tab-panel { display: none; }

.panels {
  background: #fffff8;
  border-radius: 0 0 8px 8px;
  padding: 20px 24px;
}

.tabs #t1:checked ~ .tab-labels label[for="t1"],
.tabs #t2:checked ~ .tab-labels label[for="t2"],
.tabs #t3:checked ~ .tab-labels label[for="t3"] {
  color: #1a56db;
  border-bottom-color: #1a56db;
  font-weight: 700;
}

.tabs #t1:checked ~ .panels #panel1,
.tabs #t2:checked ~ .panels #panel2,
.tabs #t3:checked ~ .panels #panel3 { display: block; }