/* ============================================================
   ZELPH HELP CENTER — Custom Help Scout Stylesheet

   Paste this into:  Docs → Sites → your site → Custom Code → Custom CSS

   Covers:
   - Webfont (Readex Pro) global
   - Slim topbar (logo left, nav right)
   - Search hero (Zelph green button)
   - Collection section headers + injected descriptions
   - 3-column responsive category card grid
   - Dark Zelph green cards (#0D3B26) with white text + icons
   ============================================================ */


/* ------------------------------------------------------------
   Webfont: Readex Pro (Google Fonts, variable)
   Following Quaderno's pattern: body = weight 300, headings = 500.
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160..700&display=swap');

body {
    font-family: 'Readex Pro', system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-optical-sizing: auto !important;
    font-variant-numeric: lining-nums tabular-nums slashed-zero;
    /* No global font-weight — defaults to 400. Specific elements (paragraphs,
       sidebar items, article body) override down to 300 where appropriate. */
}

input,
select,
textarea {
    font-family: 'Readex Pro', system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

button {
    font-family: 'Readex Pro', system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;   /* Quaderno explicitly lightens buttons */
}

/* Headings and emphasis: medium (500) instead of bold */
h1, h2, h3, h4, h5, h6,
strong, b,
#fullArticle strong {
    font-weight: 500 !important;
}

/* Italic only on blockquotes */
#fullArticle blockquote {
    font-style: italic;
}


/* ------------------------------------------------------------
   0. Topbar — slim, logo left, nav right (Quaderno-style)
   ------------------------------------------------------------ */

.navbar {
    margin-bottom: 0 !important;
}

.navbar .navbar-inner {
    background: #0D3B26 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 64px !important;
    height: 64px !important;
}

.navbar .navbar-inner .container-fluid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo: smaller, left-aligned, no extra padding */
.navbar .brand {
    margin: 0 auto 0 0 !important;     /* margin-right: auto pushes nav to the right */
    padding: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    position: static !important;
}

.navbar .brand img {
    content: url('https://www.zelph.com/images/zelph-logo-white.svg') !important;
    height: 36px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    vertical-align: middle !important;
}

/* Hide hamburger button on desktop */
.navbar .btn-navbar {
    display: none !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    margin-left: auto !important;
    padding: 6px 10px !important;
}

.navbar .btn-navbar .icon-bar {
    background: #fff !important;
    box-shadow: none !important;
}

/* Force nav to show inline on desktop, override HS's absolute positioning */
@media (min-width: 768px) {
    .navbar .nav-collapse,
    .navbar .nav-collapse.collapse {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        clear: none !important;
    }

    .navbar nav {
        display: flex !important;
        align-items: center !important;
        position: static !important;
    }

    .navbar .nav,
    .navbar ul.nav {
        position: static !important;        /* override HS's position: absolute */
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2rem !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
        text-align: left !important;
    }

    .navbar .nav > li,
    .navbar ul.nav li {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        border: none !important;
        line-height: 1 !important;
    }

    .navbar .nav > li > a,
    .navbar ul.nav li a {
        line-height: 1 !important;
    }
}

/* Nav link styling (applies everywhere) */
.navbar ul.nav li a {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: 6px 8px !important;
    text-decoration: none !important;
    background: transparent !important;
    text-shadow: none !important;
    transition: opacity 0.15s ease !important;
}

.navbar ul.nav li a:hover {
    color: #ffffff !important;
    opacity: 0.75 !important;
    background: transparent !important;
}

/* Hide the dropdown caret triangle on each nav item */
.navbar ul.nav li a .caret {
    display: none !important;
}

/* Hide the duplicate mobile-only contact item */
#contactMobile {
    display: none !important;
}

/* Mobile: show hamburger, hide expanded nav until tapped */
@media (max-width: 767px) {
    .navbar .navbar-inner .container-fluid {
        padding: 0 1rem !important;
    }

    .navbar .btn-navbar {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .navbar .nav-collapse {
        position: absolute !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        background: #0D3B26 !important;
        padding: 1rem 1.5rem !important;
        z-index: 100 !important;
    }

    .navbar .nav-collapse.collapse {
        display: none !important;
    }

    .navbar .nav-collapse.collapse.in {
        display: block !important;
    }

    .navbar ul.nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
}


/* ------------------------------------------------------------
   1. Search hero
   ------------------------------------------------------------ */

#docsSearch {
    background: #f7f8f9;
    padding: 3rem 1rem;
}

#docsSearch h1 {
    font-size: 0 !important;          /* hide original copy */
    line-height: 0 !important;
    margin: 0 auto 1.5rem !important;
    max-width: 720px;
    text-align: center;
}

#docsSearch h1::before {
    content: 'How can we help?';
    display: block;
    font-size: 2.25rem !important;
    font-weight: 500 !important;
    line-height: 48px !important;
    color: #1a1a1a;
}

#searchBar {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
}

#searchBar .search-query {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: none;
    color: #1a1a1a;
    padding: 0.75rem 1rem;
    height: 48px;
    font-size: 1rem;
    font-weight: 300;
}

#searchBar button {
    background: #0D3B26;
    border: none;
    color: #fff;
    border-radius: 0 8px 8px 0;
    padding: 0 1.75rem;
    font-size: 1.25rem;
    font-weight: 300;
    height: 48px;
    cursor: pointer;
}

#searchBar button:hover {
    background: #155F44;
}


/* ------------------------------------------------------------
   2. Content area + section headers
   ------------------------------------------------------------ */

#contentArea {
    padding: 3rem 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.collection-category {
    margin-bottom: 3.5rem;
}

.collection-category h2 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 36px;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
    padding: 0;
    border: none;
    text-align: left;
}

.collection-category h2 a {
    color: inherit;
    text-decoration: none;
}

.collection-category h2 a:hover {
    color: #0D3B26;
}


/* ------------------------------------------------------------
   3. Inject collection descriptions on the home page
   (Help Scout's home-page markup doesn't include collection
   descriptions, so we add them via ::after.)
   ------------------------------------------------------------ */

.collection-category h2::after {
    content: '';
    display: block;
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    font-weight: 300;
    color: #6b7280;
    line-height: 24px;
}

#collection-category-27 h2::after {
    content: 'Get oriented with Zelph and check you meet the requirements before you onboard.';
}

#collection-category-43 h2::after {
    content: 'Guides for retailers running consignment, resale, or seller-network operations on Zelph.';
}

#collection-category-1 h2::after {
    content: 'Everything retailers need: setup, products, inventory, orders, and getting paid.';
}

#collection-category-14 h2::after {
    content: 'Everything suppliers need: setup, catalogue, inventory, and fulfilment.';
}


/* ------------------------------------------------------------
   4. Category card grid — force 3 columns
   ------------------------------------------------------------ */

section.category-list,
section.category-list.two-col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    section.category-list,
    section.category-list.two-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

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


/* ------------------------------------------------------------
   5. Category card styling — dark Zelph green with white text
   (Icon sits at top via background-image — see section 6
   for per-category icon URLs.)
   ------------------------------------------------------------ */

.category-list .category {
    background-color: #0D3B26 !important;
    background-position: top 24px center !important;
    background-repeat: no-repeat !important;
    background-size: 56px auto !important;
    border: 1px solid #0D3B26 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(13, 59, 38, 0.15) !important;
    box-sizing: border-box !important;
    min-height: 240px !important;
    padding: 100px 24px 24px !important;
    text-align: center !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.category-list .category:hover {
    background-color: #155F44 !important;
    border-color: #155F44 !important;
    box-shadow: 0 8px 24px rgba(13, 59, 38, 0.25) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.category-list .category h3 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 24px;
    color: #ffffff !important;
    margin: 0 0 0.5rem 0;
}

.category-list .category p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 0 0.75rem 0;
}

.category-list .category .article-count {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.9) !important;
}


/* ------------------------------------------------------------
   6. Per-category icons — Iconify CDN (Heroicons, white)

   Iconify serves SVGs with a ?color= parameter, so we can
   request white icons directly.
   ------------------------------------------------------------ */

/* About Zelph */
#category-30 {
    background-image: url("https://api.iconify.design/heroicons:information-circle.svg?color=white") !important;
}

/* Requirements */
#category-101 {
    background-image: url("https://api.iconify.design/heroicons:check-badge.svg?color=white") !important;
}

/* Seller Network */
#category-71 {
    background-image: url("https://api.iconify.design/heroicons:user-group.svg?color=white") !important;
}

/* Sourcing & Lookups */
#category-72 {
    background-image: url("https://api.iconify.design/heroicons:magnifying-glass.svg?color=white") !important;
}

/* Payouts */
#category-92 {
    background-image: url("https://api.iconify.design/heroicons:banknotes.svg?color=white") !important;
}

/* Getting Started (Retailers + Suppliers) */
#category-9,
#category-17 {
    background-image: url("https://api.iconify.design/heroicons:rocket-launch.svg?color=white") !important;
}

/* Managing Products (Retailers + Suppliers) */
#category-12,
#category-21 {
    background-image: url("https://api.iconify.design/heroicons:cube.svg?color=white") !important;
}

/* Inventory (Retailers + Suppliers) */
#category-68,
#category-70 {
    background-image: url("https://api.iconify.design/heroicons:archive-box.svg?color=white") !important;
}

/* Orders & Shipping (Retailers + Suppliers) */
#category-10,
#category-19 {
    background-image: url("https://api.iconify.design/heroicons:truck.svg?color=white") !important;
}

/* Payments & Taxes (Retailers + Suppliers) */
#category-5,
#category-18 {
    background-image: url("https://api.iconify.design/heroicons:credit-card.svg?color=white") !important;
}

/* Returns, Refunds, & Cancellations (Retailers + Suppliers) */
#category-11,
#category-20 {
    background-image: url("https://api.iconify.design/heroicons:arrow-uturn-left.svg?color=white") !important;
}

/* Best Practices & FAQ (Suppliers only — Retailers' was deleted) */
#category-22 {
    background-image: url("https://api.iconify.design/heroicons:light-bulb.svg?color=white") !important;
}


/* ------------------------------------------------------------
   6b. Lime card variant — Resale & Consignment + Suppliers
   Override colour scheme for these collections:
   - light lime background
   - black text
   - black icons (overriding the white-icon Iconify URLs above)
   ------------------------------------------------------------ */

#collection-category-43 .category-list .category,
#collection-category-14 .category-list .category {
    background-color: #CFFF92 !important;
    border-color: #CFFF92 !important;
    box-shadow: 0 4px 12px rgba(207, 255, 146, 0.25) !important;
}

#collection-category-43 .category-list .category:hover,
#collection-category-14 .category-list .category:hover {
    background-color: #BAE87A !important;
    border-color: #BAE87A !important;
    box-shadow: 0 8px 24px rgba(207, 255, 146, 0.4) !important;
}

#collection-category-43 .category-list .category h3,
#collection-category-14 .category-list .category h3 {
    color: #000000 !important;
}

#collection-category-43 .category-list .category p,
#collection-category-14 .category-list .category p {
    color: rgba(0, 0, 0, 0.75) !important;
}

#collection-category-43 .category-list .category .article-count,
#collection-category-14 .category-list .category .article-count {
    color: #000000 !important;
}

/* Black icons — Resale & Consignment */
#collection-category-43 #category-71 {
    background-image: url("https://api.iconify.design/heroicons:user-group.svg?color=black") !important;
}
#collection-category-43 #category-72 {
    background-image: url("https://api.iconify.design/heroicons:magnifying-glass.svg?color=black") !important;
}
#collection-category-43 #category-92 {
    background-image: url("https://api.iconify.design/heroicons:banknotes.svg?color=black") !important;
}

/* Black icons — Suppliers (override the white ones declared in section 6) */
#collection-category-14 #category-17 {
    background-image: url("https://api.iconify.design/heroicons:rocket-launch.svg?color=black") !important;
}
#collection-category-14 #category-21 {
    background-image: url("https://api.iconify.design/heroicons:cube.svg?color=black") !important;
}
#collection-category-14 #category-70 {
    background-image: url("https://api.iconify.design/heroicons:archive-box.svg?color=black") !important;
}
#collection-category-14 #category-19 {
    background-image: url("https://api.iconify.design/heroicons:truck.svg?color=black") !important;
}
#collection-category-14 #category-18 {
    background-image: url("https://api.iconify.design/heroicons:credit-card.svg?color=black") !important;
}
#collection-category-14 #category-20 {
    background-image: url("https://api.iconify.design/heroicons:arrow-uturn-left.svg?color=black") !important;
}
#collection-category-14 #category-22 {
    background-image: url("https://api.iconify.design/heroicons:light-bulb.svg?color=black") !important;
}


/* ------------------------------------------------------------
   7. Article page typography (single-article views)
   Following Quaderno's hierarchy.
   ------------------------------------------------------------ */

#fullArticle .title,
#categoryHead h1,
#fullArticle h1 {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 48px;
}

#fullArticle h2 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 36px;
}

#fullArticle h3 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 28px;
}

#fullArticle h4 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 24px;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle blockquote,
#fullArticle dd {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 28px;
}

#fullArticle aside {
    font-size: 1.125rem;
    line-height: 28px;
}

#fullArticle pre,
#fullArticle code,
#fullArticle mark,
#fullArticle .inline-code {
    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', Courier, monospace !important;
    font-size: 0.9375rem;
}

#fullArticle table {
    font-size: 0.875rem;
}

#sidebar h3,
.related h3 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    text-transform: none !important;   /* override HS default that uppercases this */
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

#sidebar .nav-list a {
    font-size: 1rem !important;
    font-weight: 300 !important;
    line-height: 28px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus {
    color: #1a1a1a !important;
    text-decoration: underline !important;
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
    font-weight: 500 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Most Popular Articles section */
.most-pop-articles h2 {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    text-align: left !important;
    color: #1a1a1a !important;
}

.most-pop-articles .popArticles a {
    font-size: 1rem !important;
    font-weight: 300 !important;
    line-height: 28px !important;
}


/* ------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------ */

footer {
    padding: 2.5rem 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 300;
}

/* Hide "Last updated X ago" timestamp on articles */
.articleFoot time.lu {
    display: none;
}