/* ============================================================
   Atlas RFID — Help Scout Docs stylesheet
   Upload via Manage > Docs > [site] > Custom Code > Upload stylesheet.
   Help Scout loads this AFTER its own theme CSS, which is why many of the
   !important flags that were needed in the Headers box are gone here.
   Fonts and Font Awesome are linked from the Headers snippet, not @imported,
   so they download in parallel with this file.
   ============================================================ */

/* ---------- Brand tokens (NEW: one place to change a color) ---------- */
:root {
  --atlas-orange: #F25D27;
  --atlas-orange-700: #C2431A;
  --atlas-maroon: #400101;
  --atlas-parchment: #FAF0E1;
  --atlas-space: #1D1C1A;      /* CHANGED: real brand text color, was #333 */
  --atlas-gray: #666666;
  --atlas-border: #E7E2DB;     /* CHANGED: warm hairline, was #e5e5e5 / #ccc */
  --atlas-border-strong: #D8D2C9;
  --font-display: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Typography ---------- */
h1, h2, .navbar .brand, .navbar .nav > li > a,
#searchBar button, #sidebar button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
body, p, ul, ol, .article-list, #sidebar, .description, h3, h4 {
  font-family: var(--font-body) !important;
}
body { color: var(--atlas-space); }

/* NEW: readable measure + nicer wrapping in article bodies.
   Long full-width lines are the #1 readability complaint in Docs themes. */
#fullArticle, .article, .article-body {
  max-width: 74ch;
  line-height: 1.65;
  text-wrap: pretty;
}
#fullArticle h2, #fullArticle h3 { margin-top: 1.8em; }

/* ---------- Header ---------- */
.navbar {
  border-bottom: 5px solid var(--atlas-orange) !important;
  padding: 15px 0 !important;
  /* CHANGED: background removed. Help Scout's Branding > Header background
     wins this one, so set parchment there instead of overriding here. */
}
.navbar .brand img { height: 38px !important; width: auto !important; max-width: 100% !important; }
/* NEW: header must not force sideways scroll on phones. The forced 38px logo
   + three nav links + container padding exceeds 360px, so let the row wrap
   (no-op at desktop) and shrink the lockup at phone width. */
.navbar .container, .navbar .container-fluid { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 600px) {
  .navbar .brand img { height: 28px !important; }
  #mainNav { flex: 1 0 100%; }
  .navbar .nav { flex-wrap: wrap; justify-content: center; gap: 18px !important; padding-left: 0 !important; }
}

/* ---------- Surfaces (CHANGED: was injected from JS, now static so
              there is no flash of Help Scout blue on first paint) ---------- */
/* CHANGED: guessed hero ids did not match the live theme. The JS below finds
   the full-width band that wraps the homepage search and tags it .atlas-hero,
   so this works regardless of what Help Scout names it. */
.atlas-hero, #home-hero, #hero, .search-wrap {
  background-color: var(--atlas-parchment) !important;
}
#content, body, section.container-fluid, .most-popular, .category-list {
  background-color: #ffffff !important;
}

/* ---------- Links ----------
   CHANGED — important: the old rule forced every link to #333 with no
   underline, including links inside article text. That removes the only
   cue that a word is a link (fails WCAG 1.4.1) and is bad for a KB where
   cross-links are the main navigation. Now: chrome links are neutral,
   in-content links look like links. */
a { color: var(--atlas-space) !important; text-decoration: none; }
a:hover { color: var(--atlas-orange) !important; }

.navbar a, #sidebar a, .article-list a, .category a, .most-popular a,
.search-results a, #search-results a, .ui-menu-item a {
  color: var(--atlas-space) !important;
  text-decoration: none !important;
}
.navbar a:hover, #sidebar a:hover, .article-list a:hover, .category a:hover,
.most-popular a:hover, .search-results a:hover, #search-results a:hover,
.ui-state-focus { color: var(--atlas-orange) !important; }

#fullArticle a, .article-body a {
  color: var(--atlas-orange-700) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
#fullArticle a:hover, .article-body a:hover { color: var(--atlas-orange) !important; }

/* NEW: visible keyboard focus everywhere. You picked Atkinson Hyperlegible
   for accessibility — this is the other half of that. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid rgba(242, 93, 39, 0.4);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- Category grid ----------
   CHANGED: inline-block + width:45% + min-width:300px could overflow and
   force horizontal scroll on small phones, and depended on source
   whitespace for gutters. CSS Grid handles both and stays a clean 2x2. */
.category-list {
  display: grid !important;
  /* min() keeps the 280px floor from overflowing a 320-360px viewport */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  max-width: 850px !important;
  margin: 60px auto !important;
  padding: 0 20px;
  text-align: center !important;
  list-style: none;
}
.category-list .category {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--atlas-border) !important;
  padding: 40px 24px !important;
  background: #fff !important;
  border-radius: 10px !important;     /* CHANGED: brand radius-lg, was 4px */
  box-sizing: border-box !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.category-list .category:hover {
  border-color: var(--atlas-orange) !important;
  box-shadow: 0 6px 18px rgba(64, 1, 1, 0.08);
  transform: translateY(-3px);         /* brand card-hover lift */
}
.category-list .category h3 { margin: 0 0 8px; font-weight: 700; }
/* CHANGED: .description alone did not match — the live theme wraps the article
   count in a different element, so target any non-heading text in the card.
   The card is inside an <a>, which is why Help Scout's Link color reached it. */
.category-list .category :is(p, span, small, div, .description, .count) {
  color: var(--atlas-gray) !important;
}
.category-list .category h3 { color: var(--atlas-space) !important; }

/* NEW: the uploaded logo PNG has a baked-in white background, which shows as a
   white box on the parchment header. Real fix is a transparent-background PNG
   (assets/logos/ has one); multiply blends it into the parchment meanwhile. */
.navbar .brand img { mix-blend-mode: multiply; }
/* Lucide renders an inline <svg>, so size it directly instead of by font-size.
   stroke-width 1.75 matches the design system's linework. */
.cat-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 15px;
  color: var(--atlas-orange);
  stroke-width: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .category-list .category { transition: none; }
  .category-list .category:hover { transform: none; }
}

/* ---------- Search ---------- */
#searchBar form, #sidebar form, .search-form form {
  display: flex !important; align-items: center !important;
  border: none !important; box-shadow: none !important;
}
.search-query {
  height: 44px !important;
  border: 1px solid var(--atlas-border-strong) !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  flex: 1 !important; min-width: 0 !important;   /* NEW: stops flex overflow */
  padding: 0 15px !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
}
#searchBar button, .search-form button {
  height: 44px !important;
  background: var(--atlas-orange) !important;
  border: 1px solid var(--atlas-orange) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 0 30px !important;
  color: #fff !important;
  cursor: pointer;
  transition: background 120ms ease;
}
#searchBar button:hover, .search-form button:hover {
  background: var(--atlas-orange-700) !important;
  border-color: var(--atlas-orange-700) !important;
}
#sidebar button {
  height: 44px !important; background: #fff !important;
  border: 1px solid var(--atlas-border-strong) !important; border-left: none !important;
  border-radius: 0 4px 4px 0 !important; padding: 0 15px !important; cursor: pointer;
}
/* CHANGED: was written for a Font Awesome glyph (font-size). Sizes the Lucide
   SVG instead — and if Help Scout supplies its own icon element here, the
   font-size fallback still applies. */
#sidebar button svg, #sidebar button i {
  width: 18px; height: 18px; font-size: 18px !important;
  color: var(--atlas-orange) !important;
  stroke-width: 2;
}

/* NEW: article page must not scroll sideways on phones. Help Scout's stock
   theme may already collapse the sidebar; these rules are harmless if so, and
   they save us if it doesn't (the live markup is JS-rendered, so we could not
   confirm). Adjust the selector if your theme names the sidebar wrapper
   something else. */
@media (max-width: 600px) {
  #sidebar, .sidebar, .article-sidebar {
    width: auto !important;
    float: none !important;
    margin: 0 0 32px !important;
  }
  #fullArticle, .article, .article-body { max-width: 100% !important; }
  .article-layout, .row-fluid, #content .row { display: block !important; }
}

#poweredBy { display: none !important; }