/* ============================================================
   Bob Go Help Center — Zoho Desk Guided View Custom CSS
   v3 — targeted at ACTUAL class names live on help.bobgo.co.za
   (Zoho's Header__ / Footer__ / TitleContainer__ / Link__ /
   ArticleDetailLeftContainer__ / SearchBox__ BEM naming)

   Palette source: Bob Brand Guidelines Full V3 (2025)
   Shape/hover patterns borrowed from bobgo.co.za / bobbox.co.za
   ============================================================
   HOW TO USE:
   Setup > Customization > Guided Views > [Your Theme] > CSS
   ============================================================ */

/* Font Awesome — used for the footer social icons (fa-brands).
   @import works fine in this CSS panel (unlike <link>/<style> in
   the Header.html/Footer.html fields, which Zoho strips). */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
  /* --- Bob master brand --- */
  --brand-indigo:      #1e055b;
  --brand-indigo-70:   #61508c;
  --brand-indigo-40:   #a59bbd;
  --brand-indigo-20:   #d2cdde;

  --brand-pink:        #d8328d;
  --brand-pink-70:     #e46faf;
  --brand-pink-40:     #efadd1;
  --brand-pink-20:     #f7d6e8;

  --brand-grey:        #3b3b3b;
  --brand-grey-70:     #767676;
  --brand-grey-40:     #b1b1b1;
  --brand-grey-20:     #d8d8d8;

  /* --- Bob Go pillar colour --- */
  --bobgo-teal:        #139e83;
  --bobgo-teal-70:     #5abba8;
  --bobgo-teal-40:     #a1d8cd;
  --bobgo-teal-20:     #d0ece6;

  --brand-white: #ffffff;

  --ui-accent: var(--bobgo-teal);
  --ui-accent-hover: var(--brand-indigo);
  --ui-shadow-soft: rgba(30, 5, 91, 0.06);
  --ui-shadow-card: rgba(30, 5, 91, 0.10);

  --ui-radius-pill: 1600px;
  --ui-radius-container: 40px;

  --ui-font: "Onest", Arial, sans-serif; /* portal already loads Onest — confirmed live */

  --ui-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ui-transition-med: 0.25s ease;
}

/* ============================================================
   Global type — portal already sets Onest + body bg #f3f5f7,
   both are fine as-is; just correcting colour + weight tokens.
   ============================================================ */
body {
  color: var(--brand-grey) !important;
}

/* ============================================================
   HEADER
   CORRECTION: earlier assumption was that the native title/search/
   "Add Ticket" banner was a separate always-rendered Zoho section
   outside our control. Turns out ${WelcomeText}, ${Search}, and
   ${AddTicket} are all just merge tags available inside Header.html
   itself (confirmed from Zoho's original default template) — so
   since our custom header.html simply doesn't reference
   ${WelcomeText} or ${AddTicket}, those never render at all; nothing
   to hide. ${Search} IS included (in .bg-hero-search, below the
   hero note), so the real functional search widget renders exactly
   there.
   ============================================================ */
#headerContainer.Header__header .Header__bgColor {
  background-color: var(--brand-white) !important;
  opacity: 1 !important;
}

/* The real, functional Zoho search input, rendered via ${Search}
   — moved from the hero to sit below the Track my parcel section,
   per request. Precise selector chain confirmed live:
   #searchBtnContainer > #searchContainer > .SearchCon__searchCon >
   #searchContainer1 > .SearchBox__searchTextbox > input#autoSearchContainer */
.bg-hero-search {
  display: flex;
  justify-content: center;
  width: 100%; /* required — without an explicit width, this collapses to content size under Zoho's #headerContainer (align-items: center), which is the real reason widening max-width alone never worked */
  max-width: 1100px;
  margin: 40px auto 24px;
  padding: 0 24px;
  position: relative;
  box-sizing: border-box;
}
/* Forcing static positioning on the whole wrapper chain + the real
   input — this is what was actually causing it to stick to the top
   of the viewport when scrolled past on mobile (likely Zoho's own
   scroll-triggered "Header__homeNavbarFixed" behavior reaching into
   this wrapper chain, since it originally lived in their sticky
   home banner before we relocated ${Search} here). Previous attempt
   just hid it outright on mobile, which wasn't the ask — this keeps
   it visible and functional, just prevents it from pinning itself. */
.bg-hero-search #searchBtnContainer,
.bg-hero-search #searchContainer,
.bg-hero-search .SearchCon__searchCon,
.bg-hero-search #searchContainer1,
.bg-hero-search .SearchBox__searchpart,
.bg-hero-search .SearchBox__searchTextbox,
.bg-hero-search .Header__searchBox,
.bg-hero-search .Header__searchalt,
.bg-hero-search .Header__searchLink,
.bg-hero-search #autoSearchContainer {
  position: static !important;
  top: auto !important;
}

/* CSS-only fake placeholder — see note in header.html. Only shown
   when the real input is empty (:placeholder-shown covers this
   regardless of focus), via :has() reaching into the deeply-nested
   ${Search} markup. Requires a modern browser (:has() support —
   widely available in current Chrome/Safari/Firefox as of 2025,
   but not universal), and screen readers will still read the real
   underlying placeholder ("Search faq"), not this text — this is a
   purely visual patch, not a true fix. The real fix is changing the
   placeholder string at the source in Zoho's translation settings. */
.bg-search-fake-placeholder {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--ui-font);
  font-size: 16px;
  color: var(--brand-grey-70);
  padding-left: 24px;
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-hero-search:has(#autoSearchContainer:placeholder-shown) .bg-search-fake-placeholder {
  display: block;
}
@media (max-width: 600px) {
  .bg-search-fake-placeholder {
    text-align: center;
    padding-left: 0;
  }
}
/* Strip Zoho's default wrapper chrome (background/border/shadow)
   from every layer around the input — this is what was showing as
   a grey box behind the pill input. Only the input itself should
   be visible. */
.bg-hero-search #searchBtnContainer,
.bg-hero-search #searchContainer,
.bg-hero-search .SearchCon__searchCon,
.bg-hero-search #searchContainer1,
.bg-hero-search .SearchBox__searchpart,
.bg-hero-search .SearchBox__searchTextbox,
.bg-hero-search .Header__searchBox,
.bg-hero-search .Header__searchalt,
.bg-hero-search .Header__searchLink {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 900px !important; /* increased from 480px */
}
#autoSearchContainer {
  font-family: var(--ui-font) !important;
  font-size: 16px !important;
  color: var(--brand-indigo) !important;
  background-color: var(--brand-white) !important;
  border: 1px solid var(--brand-grey-20) !important;
  border-radius: var(--ui-radius-pill) !important;
  padding: 14px 24px !important;
  width: 100% !important; /* !important added — the real input wasn't honoring this at all, meaning Zoho likely sets width via an inline style attribute, which only !important can beat */
  max-width: 900px !important; /* increased from 480px */
}
#autoSearchContainer:focus {
  border-color: var(--bobgo-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--bobgo-teal-20) !important;
}
#autoSearchContainer::placeholder {
  color: transparent !important; /* real placeholder text hidden — our overlay span shows the replacement text instead, otherwise both would show at once, overlapping */
}
/* The "Add Ticket" flyout panel (Header__panelbtns) sits inside
   ${Search}'s own markup chain too — hide it here since we're not
   using ${AddTicket} and don't want its empty wrapper taking space */
.Header__panelbtns {
  display: none !important;
}

/* NOTE ON PLACEHOLDER TEXT: the input's placeholder reads
   "Search faq" — CSS can't rewrite that text (it's an HTML
   attribute, not stylable content). If you want it to say
   "Search for answers" in sentence case as originally asked,
   that has to be changed at the source — check Zoho's
   translation/language strings for this portal (Setup >
   Customization > Translations or similar), not in this
   stylesheet or Header.html. */

/* Breadcrumbs — ${BreadCrumbs} merge tag in header.html, renders
   on every page. Exact class names confirmed live (note Zoho's own
   inconsistent internal casing: breadCrumbText / breadCrumbsLink /
   breadcrumbList all differ slightly — matched exactly as given). */
.bg-breadcrumb-wrap {
  width: 100%; /* same fix as .bg-hero-search — without this it collapses to ~48px under Zoho's #headerContainer (align-items: center), confirmed live */
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 0; /* sits between Track section and Search now — top space to separate from Track, Search box below supplies its own spacing */
  box-sizing: border-box;
}
.BreadCrumbs__breadcrumbsView {
  display: block;
}
.BreadCrumbs__breadcrumbList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.BreadCrumbs__breadCrumbText {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui-font);
  font-size: 14px;
  color: var(--brand-grey-70);
}
.BreadCrumbs__breadCrumbText:not(:last-child)::after {
  content: '/';
  color: var(--brand-grey-40);
  margin-left: 6px;
}
.BreadCrumbs__breadCrumbsLink {
  color: var(--brand-grey-70) !important;
  font-family: var(--ui-font) !important;
  text-decoration: none !important;
}
.BreadCrumbs__breadCrumbsLink:hover {
  color: var(--bobgo-teal) !important;
}
/* current page (plain span, aria-current="page") */
.BreadCrumbs__breadCrumbText span[aria-current="page"] {
  color: var(--brand-indigo);
  font-weight: 600;
}
.BreadCrumbs__clear {
  clear: both;
}

/* ============================================================
   CATEGORY / ARTICLE LIST CARDS
   .TitleContainer__container is the tile used for both the KB
   home category grid AND sub-category listings.
   Currently: 7px radius, grey shadow, unbranded — updating to
   brand-spec 40px container radius + indigo-tinted shadow.
   ============================================================ */
.TitleContainer__container {
  border-radius: var(--ui-radius-container) !important;
  box-shadow: 0 4px 24px var(--ui-shadow-soft) !important;
  border: none !important;
  transition: box-shadow var(--ui-transition-med), transform var(--ui-transition-med) !important;
}
.TitleContainer__container:hover {
  box-shadow: 0 8px 32px var(--ui-shadow-card) !important;
  transform: translateY(-2px);
}

/* List-view rows (toggled via the grid/list icons) — confirmed
   live these had ZERO card styling from Zoho (no padding, radius,
   shadow, or gap — items sat flush against each other). Content
   (icon/title/description/meta) stays the same, just wrapping it
   in the same clean white-card treatment used elsewhere, with a
   gap between each row. */
.TitleContainer__listView {
  display: block !important;
  background-color: var(--brand-white) !important;
  border-radius: var(--ui-radius-container) !important;
  box-shadow: 0 4px 24px var(--ui-shadow-soft) !important;
  padding: 32px !important;
  margin-bottom: 20px !important; /* the gap between each row */
  transition: box-shadow var(--ui-transition-med), transform var(--ui-transition-med) !important;
}
.TitleContainer__listView:hover {
  box-shadow: 0 8px 32px var(--ui-shadow-card) !important;
  transform: translateY(-2px);
}
.TitleContainer__listView:last-child {
  margin-bottom: 0 !important;
}
/* Outer wrapper around the whole list-view set — was showing a
   visible border/stroke around the group; the individual row cards
   already provide their own visual boundary, so this outer one is
   redundant. */
.ModuleCategoryContainer__containerListView {
  border: none !important;
  box-shadow: none !important;
}
/* Same fix, different wrapper — this is the outer box around the
   subcategory list (e.g. "Getting started" cards), confirmed live. */
.KBSubCategoryContainer__boxView {
  border: none !important;
  box-shadow: none !important;
}

/* Subcategory list items (ModuleItem__moduleHeader — e.g. "Getting
   started" under a category) — a different Zoho component from
   .TitleContainer__listView above, but restyled to match the same
   white-card look: rounded card, shadow, padding, gap between rows,
   plus a colored circle behind the folder icon (mirroring the
   Avatar__square circle the category-level component gets by
   default, which this subcategory component doesn't have on its
   own). */
.ModuleItem__moduleHeader {
  background-color: var(--brand-white) !important;
  border-radius: var(--ui-radius-container) !important;
  box-shadow: 0 4px 24px var(--ui-shadow-soft) !important;
  padding: 32px !important;
  margin-bottom: 20px !important;
  align-items: center !important;
  transition: box-shadow var(--ui-transition-med), transform var(--ui-transition-med) !important;
}
.ModuleItem__moduleHeader:hover {
  box-shadow: 0 8px 32px var(--ui-shadow-card) !important;
  transform: translateY(-2px);
}
.ModuleItem__moduleHeader:last-child {
  margin-bottom: 0 !important;
}
.ModuleItem__titleIcon {
  background-color: var(--bobgo-teal) !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  align-items: center !important;
  justify-content: center !important;
}
.ModuleItem__titleIcon .Icon__icon {
  fill: var(--brand-white) !important;
  color: var(--brand-white) !important;
}
.ModuleItem__moduleDescription {
  color: var(--brand-grey) !important;
  font-family: var(--ui-font) !important;
  margin-top: 4px !important;
}
.ModuleItem__moduleDescription.emptydescription {
  display: none !important;
}
.ModuleItem__moduleCount {
  color: var(--brand-grey-70) !important;
  font-family: var(--ui-font) !important;
  font-size: 14px !important;
}

/* Links reused across category tiles + article list items
   (currently a mountain-meadow-green #43bca0 — close to teal
   but off-brand; correcting to exact Bob Go teal) */
.Link__link {
  color: var(--bobgo-teal) !important;
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
}
.Link__link:hover {
  color: var(--brand-indigo) !important;
}

/* ============================================================
   "POPULAR FAQ" WIDGET — restyled to match the corporate site's
   FAQ accordion look (white rounded rows, bold indigo question
   text, chevron on the right).
   NOTE: this widget is just a flat list of links to KB articles —
   there's no expand/collapse panel content in its markup, so the
   chevron here is decorative (matches the visual language) rather
   than a functioning accordion toggle.
   ============================================================ */
.ArticlesContainer__title {
  font-family: var(--ui-font) !important;
  color: var(--brand-indigo) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}
.ArticlesContainer__articleListWidget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none !important;
  box-shadow: none !important;
}
.WidgetsContainer__lftWd {
  border: none !important;
  box-shadow: none !important;
}
.ModuleItem__moduleListItem {
  background-color: var(--brand-white);
  border-radius: 16px;
  box-shadow: 0 2px 12px var(--ui-shadow-soft);
  padding: 20px 24px;
  transition: box-shadow var(--ui-transition-med);
}
.ModuleItem__moduleListItem:hover {
  box-shadow: 0 4px 20px var(--ui-shadow-card);
}
.ModuleItem__artList a.Link__link {
  color: var(--brand-indigo) !important; /* indigo here, not the usual teal — matches the reference image's question text */
  font-size: 17px !important;
  font-weight: 500 !important;
}
.ModuleItem__artList a.Link__link:hover {
  color: var(--bobgo-teal) !important;
}
/* Chevron removed — this list just links out to articles, it
   doesn't expand/collapse, so a chevron implying an accordion
   was misleading. (Note: you mentioned removing this whole
   "Popular FAQ" section from the home page, so this block of CSS
   is currently unused — left in place in case you bring it back
   elsewhere, just without the chevron now.) */

/* ============================================================
   ARTICLE DETAIL PAGE
   ============================================================ */
.ArticleDetailLeftContainer__kbTitle {
  font-family: var(--ui-font) !important;
  color: var(--brand-indigo) !important; /* was pure black — now on-brand */
  font-weight: 500 !important;
}

/* Article container stroke — same pattern as the category/
   subcategory boxes, confirmed live. */
.ArticleDetailLeftContainer__box {
  border: none !important;
  box-shadow: none !important;
}

/* "Helpful?" like/dislike widget — hidden per request. */
.ArticleCmd__articleLike {
  display: none !important;
}

/* Permanent "reader view" — Zoho's reader-view toggle collapses
   the right sidebar (Follow widget, Popular/Recent Articles) and
   expands the article to full width, but does this via some
   internal state/dynamically-generated styling rather than a
   stable, targetable class — I couldn't find a class toggle to
   hook into directly. Instead of replicating Zoho's exact
   mechanism, this forces the same end visual result directly:
   sidebar always hidden, content always full width. Also hides
   the toggle icon itself, so there's no control left to click that
   would exit back to the normal (non-reader) layout. */
.ArticleDetailRightContainer__wrapper {
  display: none !important;
}
.ArticleDetailLeftContainer__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}
.ArticleDetailLeftContainer__IconExPrint {
  display: none !important;
}
.Layout__collapsefullWidth {
  width: 80vw !important;
  max-width: 80vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reading progress bar — completely removed per request (not just
   recoloured/hidden the inner bar, the whole container is gone). */
.Readingprogress__progressContainer {
  display: none !important;
}

/* "FAQs" tag — was styled as a teal pill; now restyled to match
   the live site's heading-style-h5 (24px, weight 600, indigo, no
   background/pill) instead, per updated request.

   NOTE ON THE RENAME: this span's text ("FAQs") is rendered by
   Zoho itself, not something in our HTML — CSS can't edit an
   element's actual text content. The real fix is renaming this at
   the source (likely a category/tab name in your Zoho Desk admin
   settings). As a CSS-only workaround, the line below hides the
   original text and swaps in "Frequently asked questions" via a
   pseudo-element — it'll display correctly, but if Zoho ever
   changes this element's underlying text, this override keeps
   showing the same fixed replacement regardless. Renaming it
   properly at the source is more robust than this workaround. */
.Button__tagPrimary {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0 !important; /* hides the real "FAQs" text */
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important; /* was showing a clickable pointer cursor */
}
.Button__tagPrimary:focus,
.Button__tagPrimary:focus-visible,
.Button__tagPrimary:hover {
  box-shadow: none !important;
  outline: none !important;
}
.Button__tagPrimary::after {
  content: "Frequently asked questions";
  display: inline-block;
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 600;
  color: var(--brand-indigo);
  line-height: 1.2;
}

/* "Follow" button — same pill shape/colour scheme as the hero's
   outline CTA ("Submit a Ticket"). Switched from the narrow
   [data-id="category_follow"] selector to the actual class
   combination, so this applies to every Follow button site-wide,
   not just the one category page where that specific attribute
   happened to be present. */
.Button__neutral.Button__basic.commonStyle__inlineBlock.commonStyle__cursor.commonStyle__overflowDotted.Button__btnlarge {
  background-color: var(--brand-white) !important;
  color: var(--bobgo-teal) !important;
  border: 1px solid var(--bobgo-teal) !important;
  border-radius: var(--ui-radius-pill) !important;
}
.Button__neutral.Button__basic.commonStyle__inlineBlock.commonStyle__cursor.commonStyle__overflowDotted.Button__btnlarge:hover {
  background-color: var(--bobgo-teal-20) !important;
}

/* ============================================================
   FOOTER
   NOTE: since footer.html fully replaces the footer content,
   .Footer__footer is now just Zoho's leftover wrapper div around
   it — it was previously styled as if IT were the visible footer
   (background colour, padding, centered text). That's exactly
   what caused the mismatched colour band above/below the footer
   and the unwanted center-alignment: this wrapper's background
   and text-align were bleeding through/inheriting into .bg-footer.
   Neutralising it here; all real footer styling lives in the
   .bg-footer rules further down.
   ============================================================ */
.Footer__footer {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  border: none !important;
}

::-selection { background: var(--bobgo-teal-20); color: var(--brand-indigo); }

/* ============================================================
   CUSTOM HEADER — for header.html
   Moved here from an inline <style> block because Zoho's
   Header.html field strips <style>/<script> tags on save —
   confirmed by the unstyled preview (plain blue links, default
   <button> chrome). This is why header.html now contains only
   bare markup with these class names.
   ============================================================ */
.bg-header * { box-sizing: border-box; font-family: var(--ui-font); }

/* Break the header (and hero, further below) out of whatever
   width-constrained wrapper Zoho puts around Header.html content —
   this is why the bar wasn't spanning the full page before. */
.bg-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.bg-subnav-wrapper {
  background-color: #14043b;
  padding: 10px 26px 0px 10px;
  margin: 0; /* explicit safeguard against the gap visible below the dark bar */
}
.bg-subnav {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.bg-subnav a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 0 0 4px 0;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease;
}
.bg-subnav a:hover { color: rgba(255, 255, 255, 0.9); }
.bg-subnav a.is-current {
  color: #ffffff;
  border-bottom-color: var(--bobgo-teal);
}
.bg-subnav img { height: 16px; width: auto; display: block; }

.bg-navbar {
  /* Matches .navbar14_container live on bobgo.co.za — confirmed via
     direct inspection that this is a floating, centered,
     shrink-to-content pill (NOT a full-width bar), genuinely
     position:fixed (tested: stays at the same screen position
     regardless of scroll offset), sitting below the pillar bar,
     which itself scrolls away normally since it's not part of this
     fixed element. Values translated from the live site's CSS
     variables into real px/rgba (rem assumes the standard 16px
     root font-size, confirmed live): */
  position: fixed;
  top: 48px; /* approximates the live site's offset so it sits just below the pillar bar on initial load */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: max-content;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 48px; /* 3rem */
  row-gap: 48px;
  background-color: rgba(255, 255, 255, 0.6); /* --_primitives---opacity--white-60, confirmed live as #fff9 */
  backdrop-filter: blur(16px); /* 1rem */
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  border: none; /* live border-width is 0px regardless of the colour variable, so no border renders either way */
  border-radius: 800px; /* 50rem — effectively a full pill regardless of height */
  padding: 16px 24px; /* 1rem 1.5rem */
}
.bg-navbar-inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.bg-logo img { height: 50px; width: auto; display: block; }

.bg-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  /* no flex-grow — that was for the old full-width bar; the pill
     nav needs this row to shrink-wrap, not stretch to fill space */
}
.bg-nav-links > a {
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.bg-nav-links > a:hover { color: var(--bobgo-teal); }

.bg-dropdown { position: relative; }
.bg-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}
.bg-dropdown-toggle:hover { color: var(--bobgo-teal); }
.bg-dropdown-arrow { display: inline-block; font-size: 11px; transition: transform 0.2s ease; }
.bg-dropdown:hover .bg-dropdown-arrow { transform: rotate(180deg); }
.bg-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* was calc(100% + 12px) — that 12px gap was a dead zone: neither the toggle nor the menu occupied it, so moving the mouse through it broke :hover and hid the menu before you could reach it */
  padding-top: 20px; /* visual spacing recreated as internal padding instead, so the box (and therefore the hover area) is now continuous from the toggle down to the menu items, no gap */
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-white);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(30, 5, 91, 0.18);
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  min-width: 200px;
  z-index: 20;
}
.bg-dropdown:hover .bg-dropdown-menu,
.bg-dropdown-menu:hover {
  display: block;
}
.bg-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: var(--brand-indigo);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}
.bg-dropdown-menu a:hover { background-color: var(--bobgo-teal-20); color: var(--bobgo-teal); }

.bg-nav-actions { display: flex; align-items: center; gap: 12px; }
.bg-nav-actions a.bg-login {
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 0 8px;
}
.bg-nav-actions a.bg-login:hover { color: var(--bobgo-teal); }

.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-pill);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.15s ease, color 0.25s ease;
}
.bg-btn-outline {
  background-color: var(--brand-white);
  color: var(--bobgo-teal);
  border: 1px solid var(--bobgo-teal);
}
.bg-btn-outline:hover { background-color: var(--bobgo-teal-20); }
.bg-btn-filled {
  background-color: var(--bobgo-teal);
  color: var(--brand-white);
  border: none;
}
.bg-btn-filled:hover { background-color: var(--brand-indigo); transform: translateY(-1px); }

/* ============================================================
   MOBILE HEADER — matches reference design (rounded floating
   card with logo + hamburger only; pillar bar hidden; full nav
   moves into a slide-down panel toggled by a checkbox hack since
   Zoho strips <script> here, so a JS-driven menu isn't reliable).
   ============================================================ */
.bg-menu-checkbox { display: none; }
.bg-hamburger { display: none; }
.bg-mobile-menu { display: none; } /* hidden by default on ALL sizes — the media query below only changes it to flex when the checkbox is checked, on mobile widths */

@media (max-width: 1024px) {
  .bg-subnav-wrapper { display: none; }

  .bg-header {
    /* keep full-bleed background but let the card float with page
       background showing around it, matching the reference image */
    background-color: transparent;
    padding: 12px;
  }
  .bg-navbar {
    width: calc(100% - 24px); /* explicit, overriding the desktop rule's width:max-content — that was computing narrow here because .bg-mobile-menu is display:none by default and wasn't being counted properly in the max-content calculation */
    max-width: 640px;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(30, 5, 91, 0.08);
    border-bottom: none;
    padding: 12px 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .bg-navbar-inner {
    margin: 0; /* was "0 auto" (for the desktop bar) — same bug as .bg-mobile-menu had: horizontal auto-margins override align-items:stretch, so logo+hamburger were shrinking to content and centering instead of spreading to the true edges */
    width: 100%;
    max-width: none;
  }

  .bg-nav-links, .bg-nav-actions { display: none; }

  .bg-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    width: 28px;
    height: 24px;
    cursor: pointer;
  }
  .bg-hamburger span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background-color: var(--brand-indigo);
    transition: width 0.2s ease;
  }
  .bg-hamburger span:nth-child(1) { width: 24px; }
  .bg-hamburger span:nth-child(2) { width: 24px; }
  .bg-hamburger span:nth-child(3) { width: 16px; }

  .bg-mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    max-width: 640px;
    margin: 10px 0 0; /* reduced from 20px — tighter gap between navbar and menu items */
    width: 100%;
    padding: 16px 20px 28px;
    border-radius: 24px;
    background-color: var(--brand-white);
    box-shadow: 0 4px 24px rgba(30, 5, 91, 0.08);
    max-height: calc(100vh - 100px); /* confirmed live: without this, the menu (984px tall with the new subnav block added) overflowed well past short viewports with no way to scroll to the bottom items */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS momentum-scroll hint — added defensively; I verified the scroll mechanism itself works (scrollTop programmatically reaches the bottom), so if scrolling still doesn't work on your actual device, it's likely either this or a stale deployment rather than a CSS structural issue */
  }
  .bg-mobile-menu a {
    padding: 14px 4px;
    color: var(--brand-indigo);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    /* no border-bottom — the card itself already groups these
       items visually, per-item dividers were redundant */
  }
  .bg-mobile-menu a.bg-btn {
    text-align: center;
    margin-top: 12px;
  }
  .bg-mobile-menu a.bg-btn-filled {
    color: var(--brand-white); /* .bg-mobile-menu a above sets indigo on all links, which has higher specificity than .bg-btn-filled's own white — overriding it explicitly here */
  }
  .bg-mobile-menu a.bg-btn-filled:hover {
    background-color: var(--brand-indigo);
    color: var(--brand-white);
  }
  .bg-mobile-subnav {
    background-color: #14043b;
    border-radius: 24px;
    padding: 24px 20px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px; /* reduced further from 8px per request */
  }
  .bg-mobile-subnav-logo {
    height: 20px;
    width: auto;
    margin-bottom: 4px;
    align-self: flex-start; /* explicit — this tested as already left-aligned, but making it explicit removes any ambiguity */
  }
  .bg-mobile-subnav a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 3px solid transparent;
    width: fit-content;
  }
  .bg-mobile-subnav a.is-current {
    color: var(--brand-white);
    font-weight: 600;
    border-bottom-color: var(--bobgo-teal);
  }
  .bg-menu-checkbox:checked ~ .bg-mobile-menu {
    display: flex;
  }
}

/* ============================================================
   Additional mobile breakpoints for .bg-navbar, layered on top
   of the base @media (max-width: 1024px) rules above — placed
   after that block so they correctly override it at narrower
   widths (all three media queries can match simultaneously, so
   file order matters here).
   ============================================================ */
@media (max-width: 767px) {
  .bg-navbar {
    padding-left: 20px; /* 1.25rem */
    padding-right: 20px; /* 1.25rem */
    /* min-height: 4rem intentionally omitted, per spec (struck through) */
  }
}

@media (max-width: 479px) {
  .bg-navbar {
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    min-height: auto;
    box-shadow: none;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px; /* 0.5rem */
    padding-bottom: 8px; /* 0.5rem */
  }
}

/* ============================================================
   MOBILE HERO — stacked full-width CTAs, matching reference design
   ============================================================ */
@media (max-width: 600px) {
  .bg-hero-ctas { flex-direction: column; }
  .bg-hero-btn { width: 100%; }
}

/* ============================================================
   CUSTOM FOOTER — for footer.html
   Same reason as above: moved out of an inline <style> block.
   ============================================================ */
.bg-footer * { box-sizing: border-box; font-family: var(--ui-font); }
/* The rule above forces Onest onto every element in the footer,
   including the <i class="fa-brands ..."> social icons — Font
   Awesome icons are actually font glyphs, so overriding their
   font-family with Onest breaks them (Onest has no icon glyphs at
   that character code, so nothing renders). Restoring the correct
   icon font here, scoped only to those elements, rather than
   removing the font-family rule globally (which would break Onest
   on every other piece of text in the footer). */
.bg-footer i[class*="fa-"] {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

.bg-footer {
  background-color: #14043b; /* exact live value, consistent across Bob Group sites */
  color: var(--brand-white);
  padding: 64px 24px 32px;
  text-align: left; /* explicit — don't inherit center-alignment from Zoho's wrapper */
  /* full-bleed background, same fix as .bg-header / .bg-hero */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bg-footer, .bg-footer * { text-align: left; }

.bg-footer-inner { max-width: 1280px; margin: 0 auto; }

.bg-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
}

.bg-footer-left { max-width: 280px; }
.bg-footer-logo img { height: 70px; width: auto; margin-bottom: 20px; }
.bg-footer-contact-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.bg-footer-contact { margin-bottom: 4px; font-weight: 400; }
.bg-footer-contact a { color: var(--brand-white); text-decoration: none; }
.bg-footer-contact a:hover { text-decoration: underline; }

/* Social icons are self-contained data-URI images (pink circle +
   dark cutout glyph baked in) — no separate CSS circle needed. */
/* Social icons are Font Awesome glyphs (fa-brands) on a pink circle. */
.bg-footer-social { display: flex; gap: 12px; margin-top: 24px; }
.bg-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand-pink);
  color: var(--brand-white);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.bg-footer-social a:hover { background-color: var(--brand-pink-70); transform: scale(1.08); }
.bg-footer-social i { font-size: 15px; }

.bg-footer-menus {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}
.bg-footer-col-heading {
  color: var(--brand-pink); /* matches brand guide exactly */
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.bg-footer-col a {
  display: block;
  color: var(--brand-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 12px;
}
.bg-footer-col a:hover { color: var(--brand-white); }

.bg-footer-family {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  /* no border-top here — live site has no separator above this row */
}
/* These are full-colour pillar wordmark logos (not white icons),
   same as they appear on the live site — no dimming needed. */
.bg-footer-family img { height: 34px; width: auto; }

.bg-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  /* no border-top here — live site has no separator above this row */
}
.bg-footer-credit { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.bg-footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.bg-footer-legal a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-decoration: underline; /* live site underlines these */
}
.bg-footer-legal a:hover { color: var(--brand-white); }

@media (max-width: 768px) {
  .bg-footer-top { flex-direction: column; }
  .bg-footer-menus { gap: 32px; }
  .bg-footer-bottom { flex-direction: column; align-items: flex-start; }
  .bg-footer-family {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ============================================================
   LANDING HERO — for landing-hero.html
   Same reason as above: moved out of an inline <style> block.
   ============================================================ */
.bg-hero * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-hero {
  background-color: var(--brand-white);
  text-align: center;
  padding: 140px 24px 48px; /* top increased — .bg-navbar is now position:fixed (removed from document flow), so this clears space for the floating pill sitting on top of the page at ~48-90px */
  /* full-bleed background, same fix as .bg-header above */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bg-hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.bg-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--brand-white);
  border: 1px solid rgba(2, 0, 5, 0.1);
  border-radius: var(--ui-radius-pill);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-indigo);
  box-shadow: 0 1px 2px rgba(30, 5, 91, 0.04);
  margin-bottom: 24px;
}
.bg-hero-eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--bobgo-teal);
  color: var(--brand-white);
  font-size: 11px;
  line-height: 1;
}

.bg-hero h1 {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--brand-indigo);
  margin: 0 0 20px;
}

.bg-hero p.bg-hero-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--brand-grey);
  max-width: 620px;
  margin: 0 auto 32px;
}

.bg-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bg-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-pill);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  transition: background-color 0.25s ease, transform 0.15s ease, color 0.25s ease;
}
.bg-hero-btn-filled {
  background-color: var(--bobgo-teal);
  color: var(--brand-white);
  border: none;
}
.bg-hero-btn-filled:hover { background-color: var(--brand-indigo); transform: translateY(-1px); }
.bg-hero-btn-outline {
  background-color: transparent;
  color: var(--bobgo-teal);
  border: 1px solid var(--bobgo-teal);
}
.bg-hero-btn-outline:hover { background-color: var(--bobgo-teal-20); }

@media (max-width: 600px) {
  .bg-hero h1 { font-size: 32px; }
  .bg-hero p.bg-hero-sub { font-size: 16px; }
  .bg-hero { padding-top: 110px; } /* less than desktop's 140px — the fixed navbar pill is more compact on mobile (logo + hamburger only) */
}

/* ============================================================
   TRIAL/DEMO + APP DOWNLOAD CTA — for footer.html, sits directly
   above <footer class="bg-footer">

   Values below scraped directly off the live cta53_ component on
   bobgo.co.za (border-radius, padding, image widths, font sizes,
   colours) rather than guessed. Two colour corrections applied,
   consistent with the rest of this stylesheet: the live gradient's
   mid-tone (#43bca0, an off-brand green) -> official Bob Go teal
   #139e83, and "Book a demo"'s live button colour (#007af9, Bob
   Pay's blue, not Bob Go's) -> Bob Go teal.
   ============================================================ */
.bg-cta * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-cta {
  padding: 64px 24px;
}
.bg-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.bg-cta-card {
  flex: 1 1 400px;
  min-width: 280px;
  border-radius: 16px; /* live value — not the 40px brand-container radius used elsewhere */
  padding: 64px; /* live value */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.bg-cta-card-gradient {
  background: radial-gradient(circle at 50% 0%, #f1ffe9, var(--bobgo-teal) 39%, var(--brand-indigo));
}
.bg-cta-card-light {
  background-color: #d7dbec; /* live value */
}

.bg-cta-card-img {
  width: 350px; /* live fixed width, not full-width */
  max-width: 100%;
  height: auto;
  display: block;
}
.bg-cta-phone-img {
  width: 250px; /* live fixed width */
  max-width: 100%;
  height: auto;
  display: block;
}

.bg-cta-heading {
  font-size: 32px; /* live value — was wrongly 24px before */
  font-weight: 600;
  color: var(--brand-indigo);
  margin: 0;
}
.bg-cta-text {
  font-size: 18px;
  color: var(--brand-indigo); /* live value — this card's body text is indigo, not grey */
  margin: 0;
}
.bg-cta-text-white {
  color: var(--brand-white);
  max-width: 480px;
}

.bg-cta-btn-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bg-cta-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ui-radius-pill);
  padding: 12px 16px;
}
.bg-cta-btn-white {
  background-color: var(--brand-white);
  color: var(--bobgo-teal) !important; /* live: white bg with teal text/border, not indigo text */
  border: 1px solid var(--bobgo-teal);
}
.bg-cta-btn-outline-white {
  background-color: var(--bobgo-teal); /* corrected from live's off-brand blue #007af9 to Bob Go teal */
  color: var(--brand-white) !important;
  border: none;
  padding: 12px 24px;
}

.bg-cta-badge {
  height: 48px;
  width: auto;
  display: block;
}

/* ============================================================
   TRACK MY PARCEL SECTION
   Deliberately distinct background (neutral-lighter) from the
   hero's white, so it reads as its own section, not part of the
   header/hero above it.
   ============================================================ */
.bg-track * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-track {
  background-color: #f8f9fc;
  padding: 64px 24px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bg-track-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}

.bg-track-text {
  flex: 1 1 320px;
  min-width: 280px;
}
.bg-track-text h3 {
  font-size: 32px;
  font-weight: 600;
  color: var(--brand-indigo);
  margin: 0 0 16px;
}
.bg-track-sub {
  font-size: 16px;
  color: var(--brand-grey);
  margin: 0 0 32px;
  line-height: 1.6;
}
.bg-track-btn-wrap {
  display: flex;
  justify-content: flex-start;
}
.bg-track-btn {
  display: inline-block;
  background-color: var(--bobgo-teal);
  color: var(--brand-white) !important;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--ui-font);
  text-decoration: none;
  border: none;
  border-radius: var(--ui-radius-pill);
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color var(--ui-transition-med), transform var(--ui-transition-fast);
}
.bg-track-btn:hover {
  background-color: var(--brand-indigo);
  transform: translateY(-1px);
}

.bg-track-image {
  flex: 1 1 320px;
  min-width: 280px;
}
.bg-track-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ui-radius-container);
  box-shadow: 0 30px 80px -20px rgba(30, 5, 91, 0.18);
}