/*
Theme Name: KnowAll Child Theme
Template: knowall
*/

/* ============================================================
   BANANA BALL HELP CENTER — BRAND STYLESHEET
   Fonts: Anton (headings) + Open Sans (body)
   Navy:      #1C2653
   Dark Navy: #0A1B2D
   Yellow:    #FFCD2A
   Green:     #89B153
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ── GLOBAL ──────────────────────────────────────────────── */
body,
.wp-site-blocks,
.entry-content,
.wp-block-post-content {
    font-family: 'Open Sans', Arial, sans-serif !important;
}

/* All headings use Anton (site-wide, catches anything the section rules miss) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.hkb-category__title,
.heroickb-categories-list__item-post-title,
.entry-title,
.hkb-article-title,
.widget-title,
.wp-block-post-title {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
}

/* Anton & Bebas Neue ship a single weight (400). Rendering them at 600/700
   makes the browser fake a bold — the "fuzzy/scrunched" look. Force 400 so the
   real (already heavy) glyphs render crisply. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.hkb-category__title,
.heroickb-categories-list__item-title,
.heroickb-categories-list__item-post-title,
.heroickb-categories-list h2,
.hkb-section-title,
.kb-home-columns .wp-block-heading,
.widget-title,
.entry-title,
.hkb-article-title,
.wp-block-post-title,
.bb-mm-head,
.bb-mm-feature__t,
.bb-footer-nav__list a {
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
}

/* ── HEADER / NAV ────────────────────────────────────────── */
.site-header-banner {
    background-color: #0A1B2D !important;
}

.wp-block-navigation-item__content {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}

.wp-block-navigation-item__content:hover {
    color: #FFCD2A !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #0A1B2D !important;
}

/* ── HERO / SEARCH BLOCK ─────────────────────────────────── */
.wp-block-heroickb-search {
    /* Background-agnostic: the container provides the band colour
       (navy homepage hero, navy interior page-header). Also kills the
       KnowAll/Heroic default teal (#26BFBE) frame. */
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border-color: transparent !important;
}

.wp-block-heroickb-search .wp-block-heading,
.wp-block-heroickb-search h1,
.wp-block-heroickb-search h2,
.wp-block-heroickb-search h3,
.wp-block-heroickb-search p {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    color: #ffffff !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.heroickb-sb-inputwrapper {
    background: #ffffff !important;
    /* Clean pill search (CIMcloud-style) instead of the heavy yellow frame */
    border-radius: 999px !important;
    /* width:100% forces it to actually reach 750px — max-width alone leaves it
       sized to its content, so it never widens. */
    width: 100% !important;
    max-width: 750px !important;
    margin: 0 auto !important;
    border: 1px solid #d9dee6 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden !important;
}

.heroickb-sb-inputwrapper:focus-within {
    border-color: #FFCD2A !important;
    box-shadow: 0 0 0 3px rgba(255, 205, 42, 0.35) !important;
}

.heroickb-sb-inputwrapper__input_wo_cat {
    color: #333333 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 16px !important;
    background: transparent !important;
    /* Stretch to fill the pill (overrides any fixed input size) */
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

.heroickb-sb-inputwrapper__input_wo_cat::placeholder {
    color: #999999 !important;
}

.heroickb-sb-inputwrapper__btn {
    background-color: #FFCD2A !important;
    color: #0A1B2D !important;
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 0 20px !important;
}

.heroickb-sb-inputwrapper__btn:hover {
    background-color: #e6b800 !important;
}

/* Search block inner wrapper: transparent + constrained to the pill width so
   there's no wider white/yellow box behind the search bar (removes the stray
   "double yellow strokes" that showed below the pill). */
.heroickb-sb {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    max-width: 750px !important;
    margin: 0 auto !important;
}

/* Live-search results dropdown. The plugin shows it (data-wp-bind--hidden=
   "!context.isOpen") only when there's an active search, so give it a proper
   white panel with a subtle grey frame + shadow. Scoped to the container only
   (not the inner messages) so we don't double up borders. */
.heroickb-searchresults__wo-cat,
.heroickb-searchresults {
    background: #ffffff !important;
    border: 1px solid #e2e5ea !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 14px 32px rgba(10, 27, 45, 0.16) !important;
    text-align: left !important;
}

/* The parent theme caps the interior page-header search block at 330px on
   desktop (@media min-width:768px .ht-pageheader-block .wp-block-heroickb-search).
   Override it so the interior search matches the 750px pill. */
@media screen and (min-width: 768px) {
    .ht-pageheader-block .wp-block-heroickb-search {
        max-width: 750px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ── CATEGORY CARDS ──────────────────────────────────────── */
.hkb-category {
    border: 2px solid #e8e8e8 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.hkb-category:hover {
    border-color: #FFCD2A !important;
    box-shadow: 0 4px 16px rgba(10, 27, 45, 0.10) !important;
}

.hkb-category__title,
.heroickb-categories-list h2 {
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1C2653 !important;
}

.hkb-category__description {
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    line-height: 1.55 !important;
}

.hkb-category__count {
    color: #FFCD2A !important;
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    background: #0A1B2D !important;
    border-radius: 3px !important;
    padding: 2px 8px !important;
}

.kb-home-columns .wp-block-heading,
.hkb-section-title {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1C2653 !important;
}

/* ── ARTICLE PAGE ────────────────────────────────────────── */
/* Article titles: Anton, but NOT uppercased (natural case). */
h1.wp-block-post-title,
.entry-title {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    color: #1C2653 !important;
    line-height: 1.15 !important;
}

.entry-content h2,
.wp-block-post-content h2 {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1C2653 !important;
    border-bottom: 1px solid #FFCD2A !important;
    padding-bottom: 6px !important;
    margin-top: 32px !important;
}

.entry-content h3,
.wp-block-post-content h3 {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    color: #1C2653 !important;
}

.entry-content a,
.wp-block-post-content a {
    color: #1C2653 !important;
    text-decoration: underline !important;
    text-decoration-color: #FFCD2A !important;
    text-underline-offset: 3px !important;
}

.entry-content a:hover,
.wp-block-post-content a:hover {
    color: #89B153 !important;
}

.entry-content hr,
.wp-block-post-content hr {
    border: none !important;
    border-top: 1px solid #FFCD2A !important;
    margin: 32px 0 !important;
}

.entry-content strong,
.wp-block-post-content strong {
    color: #1C2653 !important;
}

.entry-content blockquote,
.wp-block-post-content blockquote {
    border-left: 4px solid #FFCD2A !important;
    background: #fffbef !important;
    padding: 12px 16px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* ── TABLE OF CONTENTS ───────────────────────────────────── */
.ht-mobile-toc {
    background-color: #0A1B2D !important;
    border-left: 4px solid #FFCD2A !important;
    border-radius: 4px !important;
}

.ht-mobile-toc * {
    color: #ffffff !important;
}

.wp-block-group.ht-mobile-toc a:hover {
    color: #FFCD2A !important;
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.wp-block-heroickb-category-breadcrumb,
.wp-block-heroickb-category-breadcrumb a {
    color: #666666 !important;
    font-size: 13px !important;
}

/* ── TAGS ────────────────────────────────────────────────── */
.hkb-article-tags a {
    background: #f0f0f0 !important;
    color: #1C2653 !important;
    border-radius: 3px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    border: 1px solid #e0e0e0 !important;
    display: inline-block !important;
}

.hkb-article-tags a:hover {
    background: #FFCD2A !important;
    border-color: #FFCD2A !important;
    color: #0A1B2D !important;
}

/* ── RELATED ARTICLES ────────────────────────────────────── */
.wp-block-group.hkb-article-related .wp-block-heading {
    border-bottom: 1px solid #89B153 !important;
}

.wp-block-group.hkb-article-related a {
    color: #1C2653 !important;
    text-decoration: none !important;
}

.wp-block-group.hkb-article-related a:hover {
    color: #89B153 !important;
}

/* ── POPULAR ARTICLES SIDEBAR ────────────────────────────── */
.heroickb-article-widget .wp-block-heading,
.heroickb-article-widget h2,
.widget-title {
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1C2653 !important;
    border-bottom: 1px solid #FFCD2A !important;
    padding-bottom: 6px !important;
}

.heroickb-article-link {
    color: #1C2653 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.heroickb-article-link:hover {
    color: #FFCD2A !important;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.wp-block-button__link {
    background-color: #1C2653 !important;
    color: #ffffff !important;
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
}

.wp-block-button__link:hover {
    background-color: #FFCD2A !important;
    color: #0A1B2D !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer-content {
    background-color: #0A1B2D !important;
}

.site-footer-content *,
.site-footer__copyright,
.site-footer__copyright a {
    color: #cccccc !important;
    font-size: 13px !important;
}

.site-footer__copyright a:hover {
    color: #FFCD2A !important;
}

/* ── NO-RESULTS SEARCH CONTACT PROMPT (Task 6) ───────────── */
.bb-search-help {
    margin-top: 24px !important;
    padding: 20px 24px !important;
    background: #fffbef !important;
    border-left: 4px solid #FFCD2A !important;
    border-radius: 0 4px 4px 0 !important;
    max-width: 640px !important;
}

.bb-search-help__lead {
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #1C2653 !important;
    margin: 0 0 8px !important;
}

.bb-search-help p {
    color: #333333 !important;
    line-height: 1.6 !important;
    margin: 0 0 8px !important;
}

.bb-search-help a {
    color: #1C2653 !important;
    text-decoration: underline !important;
    text-decoration-color: #FFCD2A !important;
    font-weight: 600 !important;
}

.bb-search-help a:hover {
    color: #89B153 !important;
}

/* ============================================================
   HOMEPAGE — CIMcloud-style full-width left-icon category grid
   ============================================================ */

/* 2-column responsive grid */
.wp-block-heroickb-category-card .heroickb-categories-list--column-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* Boxed card with left accent border (brand green) */
.heroickb-categories-list__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid #89B153 !important;
    border-radius: 6px !important;
    padding: 24px 26px !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

.heroickb-categories-list__item:hover {
    border-left-color: #FFCD2A !important;
    box-shadow: 0 6px 20px rgba(10, 27, 45, 0.10) !important;
    transform: translateY(-2px) !important;
}

/* Card link wraps the whole card contents */
.heroickb-categories-list__item-header,
.heroickb-categories-list__item > a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    text-decoration: none !important;
}

/* Icon sits to the LEFT, in a navy tile */
.heroickb-categories-list__item-icon {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.heroickb-categories-list__item-icon svg,
.heroickb-categories-list__item-icon img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
}

/* Title + description stack to the right of the icon */
.heroickb-categories-list__item-post {
    flex: 1 1 auto !important;
}

.heroickb-categories-list__item-post-title,
.heroickb-categories-list__item-post h2,
.heroickb-categories-list__item-post h3,
.heroickb-categories-list__item-post h4 {
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1C2653 !important;
    margin: 0 0 6px !important;
}

.heroickb-categories-list__item-post-excerpt-entry {
    color: #666666 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.heroickb-categories-list__item-post-excerpt-count {
    color: #89B153 !important;
    font-family: 'Anton', Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

/* ── ARTICLE NEXT-STEP CTAs (three separate yellow-tinted blocks) ── */
.bb-article-cta {
    background: #FFF6D6 !important;
    border: 1px solid #F5DE8E !important;
    border-radius: 10px !important;
    margin: 0 0 12px !important;
}

/* Give the first card a little air below the content and the last some
   breathing room before the "Was this helpful?" rating. */
.bb-article-cta + .bb-article-cta { margin-top: 0 !important; }

.bb-article-cta__link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    text-decoration: none !important;
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    color: #0A1B2D !important;
    border-radius: 10px !important;
    transition: background-color .15s ease, color .15s ease !important;
}

.bb-article-cta__arrow {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
    transition: transform .15s ease !important;
}

.bb-article-cta__link:hover {
    background-color: #FFCD2A !important;
    color: #0A1B2D !important;
}

.bb-article-cta__link:hover .bb-article-cta__arrow {
    transform: translateX(4px) !important;
}

/* ── HOMEPAGE CONTACT CTA (below the grid) ───────────────── */
.bb-home-cta {
    margin-top: 40px !important;
}

.bb-home-cta .wp-block-group {
    text-align: center !important;
    border-radius: 8px !important;
}

.bb-home-cta .wp-block-buttons {
    justify-content: center !important;
}

/* Single column on mobile */
@media (max-width: 781px) {
    .wp-block-heroickb-category-card .heroickb-categories-list--column-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ── SUPPORT PHONE: business-hours only ──────────────────── */
/* The head script adds .bb-support-closed to <html> outside Mon–Fri
   9am–5pm ET; hide the phone option then, leaving only the form option. */
.bb-support-closed .bb-phone-option {
    display: none !important;
}

/* ============================================================
   HEADER + DELTA-STYLE MEGA MENU
   ============================================================ */
.bb-header { background: #0A1B2D; }

.bb-header__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bb-header__logo img { max-height: 46px; width: auto; display: block; }

.bb-header__nav { display: flex; align-items: center; gap: 22px; }

.bb-header__trigger {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff;
    font-family: 'Anton', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    transition: color .15s ease, border-color .15s ease;
}
/* keep it flat in every state — no theme button background/outline */
.bb-header__trigger:hover,
.bb-header__trigger:focus,
.bb-header__trigger:active {
    background: transparent !important;
    outline: none;
    box-shadow: none !important;
}
.bb-header__trigger:hover { color: #FFCD2A; }
.bb-header__trigger:focus-visible { outline: 2px solid #FFCD2A; outline-offset: 4px; }
.bb-header__trigger[aria-expanded="true"] { border-bottom-color: #FFCD2A; color: #FFCD2A; }
.bb-header__trigger .bb-caret { transition: transform .2s ease; font-size: 12px; }
.bb-header__trigger[aria-expanded="true"] .bb-caret { transform: rotate(180deg); }

.bb-header__portal {
    background: #FFCD2A;
    color: #0A1B2D;
    font-family: 'Anton', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 1;
    padding: 13px 24px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bb-header__portal:hover { background: #ffd94a; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,205,42,.38); }
.bb-header__portal:active { transform: translateY(0); box-shadow: none; }

/* hamburger (mobile only) */
.bb-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 8px;
}
.bb-header__burger:hover span { background: #FFCD2A; }
.bb-header__burger span { display: block; height: 2px; background: #ffffff; border-radius: 2px; }

/* mega panel */
.bb-megamenu { background: #0A1B2D; border-top: 1px solid rgba(255,255,255,.10); }
.bb-megamenu[hidden] { display: none; }
.bb-megamenu__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 24px 42px;
    display: grid;
    grid-template-columns: 1.15fr 24px 1fr 1fr 1fr;
    gap: 28px;
}

.bb-mm-head {
    font-family: 'Anton', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFCD2A;
    margin: 0 0 18px;
}

.bb-mm-feature { display: flex; align-items: center; gap: 14px; margin: 0 -12px 6px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: #ffffff; transition: background .18s ease; }
.bb-mm-feature svg { width: 34px; height: 34px; flex: 0 0 34px; transition: transform .18s ease; }
.bb-mm-feature img, .bb-mm-feature__img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; transition: transform .18s ease; }
.bb-mm-feature:hover img { transform: scale(1.1); }
/* Category card icons rendered as media images (client PNG tiles) */
.heroickb-categories-list__item-icon img,
.heroickb-category__icon { width: 100%; height: auto; max-width: 40px; display: block; }
.bb-mm-feature__t { font-family: 'Anton', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; font-size: 16px; display: block; transition: color .18s ease; }
.bb-mm-feature__s { display: block; font-size: 12px; color: #9fb0c4; margin-top: 2px; }
.bb-mm-feature:hover { background: rgba(255,255,255,.06); }
.bb-mm-feature:hover .bb-mm-feature__t { color: #FFCD2A; }
.bb-mm-feature:hover svg { transform: scale(1.1); }

.bb-mm-divider { width: 1px; background: rgba(255,255,255,.12); justify-self: center; }

.bb-mm-links a { display: block; color: #dbe3ec; text-decoration: none; font-size: 15px; padding: 7px 0; transition: color .15s ease, transform .15s ease; }
.bb-mm-links a:hover { color: #FFCD2A; transform: translateX(3px); }
.bb-mm-links a.bb-mm-strong { color: #ffffff; font-weight: 600; }
.bb-mm-links a.bb-mm-strong:hover { color: #FFCD2A; }

/* Scoped to beat the more-specific `.bb-mm-links a` rule (which was forcing
   padding:7px 0 and font-size:15px onto the pill). */
.bb-mm-links a.bb-mm-pill {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    background: #FFCD2A;
    color: #0A1B2D;
    font-family: 'Anton', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .5px;
    line-height: 1;
    padding: 13px 28px;
    border-radius: 999px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bb-mm-links a.bb-mm-pill:hover {
    color: #0A1B2D;
    background: #ffd94a;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,205,42,.38);
}
.bb-mm-links a.bb-mm-pill:active { transform: translateY(0); box-shadow: none; }

/* mobile */
/* Drawer-only portal button (shown on mobile, hidden on desktop). */
.bb-mm-portal-mobile { display: none; }

@media (max-width: 1024px) {
    /* Article page: Still Need Help + Related now live in the content column
       (so they always render). The sidebar holds only the Contents TOC, which
       the theme hides on mobile — that's fine, no empty gap. Also drop the
       navy mobile-TOC box below the title. */
    .ht-mobile-toc { display: none !important; }
}

@media (max-width: 900px) {
    /* Tablet/phone: hamburger opens the mega menu as a single-column drawer. */
    .bb-header__trigger { display: none; }
    .bb-header__burger { display: flex; }
    .bb-header__inner { padding: 14px 18px; gap: 12px; }
    .bb-header__logo img { max-height: 40px; }
    .bb-header__nav { gap: 12px; }

    /* Portal button moves into the drawer on mobile (out of the header bar). */
    .bb-header__portal { display: none !important; }
    .bb-mm-portal-mobile {
        display: block;
        background: #FFCD2A;
        color: #0A1B2D;
        font-family: 'Anton', Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 15px;
        text-align: center;
        padding: 14px;
        border-radius: 999px;
        text-decoration: none;
        margin: 0 0 12px;
    }

    .bb-megamenu__inner {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 18px 20px 26px;
        max-height: 76vh;
        overflow-y: auto;
    }
    .bb-mm-divider { display: none; }
    .bb-mm-head { margin: 18px 0 8px; }
    .bb-mm-featured .bb-mm-head { margin-top: 0; }
}

@media (max-width: 600px) {
    .bb-header__inner { padding: 12px 14px; }
    .bb-header__logo img { max-height: 34px; }
}

/* ============================================================
   BEBAS NEUE — small section headers, Help Topics trigger, footer nav
   ============================================================ */

/* Small section headers (Still Need Help, Related Articles, no-results,
   mega-menu column labels). Higher-specificity + !important to beat the
   global Anton heading rule. */
.bb-home-cta .wp-block-heading,
.bb-sidebar-help .wp-block-heading,
.hkb-section-title,
.bb-search-help__lead,
.bb-mm-head {
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    letter-spacing: 1px !important;
}

/* Help Topics nav trigger */
.bb-header__trigger {
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    letter-spacing: 1.5px !important;
}

/* ── FOOTER NAV (menu from Appearance → Menus) ───────────── */
.bb-footer-nav__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
    justify-content: flex-end !important;
}

.bb-footer-nav__list a {
    font-family: 'Bebas Neue', 'Anton', Helvetica, Arial, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 16px !important;
    color: #cccccc !important;
    text-decoration: none !important;
    transition: color .15s ease !important;
}

.bb-footer-nav__list a:hover {
    color: #FFCD2A !important;
}

@media (max-width: 640px) {
    .bb-footer-nav__list { justify-content: center !important; }

    /* Stack footer vertically with the nav on top and copyright at the bottom. */
    .site-footer-content > .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
    }
    .site-footer-content .bb-footer-nav { order: 1 !important; }
    .site-footer-content .site-footer__copyright { order: 2 !important; margin: 0 !important; }
}

/* ── SUPPORT CTA button layout ───────────────────────────── */
/* The CTA is a dynamic block, so it doesn't emit core's per-instance layout
   CSS (wp-container-*). Give the buttons reliable spacing/alignment here. */
.bb-sidebar-help .wp-block-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 6px !important;
}
/* Reset core's flex-basis:100% (from wp-block-button__width-100) — in a flex
   COLUMN that maps to height and makes the buttons overlap. */
.bb-sidebar-help .wp-block-button {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.bb-sidebar-help .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.bb-home-cta .wp-block-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

/* Support CTA (inline) buttons: reliable centered row with a real gap and
   auto-width buttons, so it matches the homepage even inside the article
   content column (prevents the buttons overlapping when they wrap). */
.bb-home-cta .wp-block-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
}
.bb-home-cta .wp-block-button {
    display: inline-block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.bb-home-cta .wp-block-button .wp-block-button__link {
    display: block !important;
}

/* Mobile: stack the homepage CTA buttons full-width so they match the
   interior "Still Need Help" box (both buttons the same size). */
@media (max-width: 640px) {
    .bb-home-cta .wp-block-buttons {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .bb-home-cta .wp-block-button {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .bb-home-cta .wp-block-button .wp-block-button__link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}


/* Logo UI updates */
.team-logo{
    min-height: 275px;
}

/* Homepage CTA spacing: ~40px of white space between the category grid and
   the "Still Need Help" box. The KnowAll theme + block CSS force
   `.wp-block-group.has-background { margin-top:0 !important }` (specificity
   0,2,0) and load after this file, so we need 0,3,0 to win — the CTA also
   carries `.has-background`. */
.wp-block-group.bb-home-cta.has-background {
    margin-top: 40px !important;
}

/* ── EMBEDDED FORM (Monday WorkForms iframe on a page) ────── */
.bb-form-embed {
    max-width: 820px;
    margin: 0 auto;
}
.bb-form-embed iframe {
    width: 100%;
    min-height: 1150px;
    border: 0;
    display: block;
    background: #ffffff;
    border-radius: 8px;
}
@media (max-width: 640px) {
    .bb-form-embed iframe { min-height: 1450px; }
}

/* ── MOBILE TUNING ───────────────────────────────────────── */
@media (max-width: 640px) {
    /* 1. Homepage hero ("How can we help?"): trim the top padding from the
       inline 90px down to 45px. Scoped to the home hero; !important beats the
       block's inline padding-top. */
    body.home .wp-block-group.has-primary-background-color {
        padding-top: 45px !important;
    }

    /* 2. Category cards: tighter cards + a 2-line clamped excerpt so the grid
       isn't such a long scroll on phones. */
    .wp-block-heroickb-category-card .heroickb-categories-list__item {
        padding: 15px 18px !important;
    }
    .heroickb-categories-list__item-post-excerpt-entry {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}