/**
 * FSE Block Styles for KnowAll Theme
 * Ensures FSE blocks match legacy template styling
 */

/* Article Tags Styling */
.hkb-article-tags {
    font-size: 14px;
    color: #999999;
}

.hkb-article-tags .wp-block-post-terms {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hkb-article-tags .wp-block-post-terms__prefix {
    font-size: 14px;
    color: #999999;
}

.hkb-article-tags .wp-block-post-terms a {
    display: inline-block;
    padding: 5px 10px;
    line-height: 1;
    margin: 0 5px 5px 0;
    background: var(--wp--preset--color--secondary, #f4f5f5);
    color: #666666;
    font-size: 13px;
    text-decoration: none;
    border-radius: 99px;
    transition: all 0.1s ease-in-out;
}

.hkb-article-tags .wp-block-post-terms a:hover {
    background: var(--wp--preset--color--border, #e6e7e7);
    color: #666666;
}

.hkb-article-tags .wp-block-post-terms a:first-child {
    margin-left: 5px;
}

.hkb-article-related {
    margin-block-start: 0 !important;
}
.wp-block-heroickb-article-showcase {
    margin-block-start: 0 !important;
}

/* Related articles - single article page */
body.single-ht_kb .hkb-article-related .heroickb-article-widget-list__entry-title,
body.single-ht_kb .heroickb-article-widget-list__entry-title {
    text-decoration: underline !important;
}

/* Comments Section Styling */
.hkb-comments-section {
    padding-top: 0px;
    margin-block-start: 0px !important;
}

@media print {
    .hkb-comments-section {
        display: none;
    }
}

.ht-commentslist .wp-block-comments-title {
    font-weight: 600;
    color: #333;
    padding-bottom: 10px;
}

.ht-commentslist .wp-block-comment-template {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual Comment Styling */
.ht-comment {
    margin-bottom: 30px !important;
}

.ht-comment__header {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 20px;
}

.ht-comment__authoravatar img {
    border-radius: 50%;
}

.ht-comment__author {
    flex: 1;
}

.ht-comment__authorname {
    color: #333;
    margin: 0 0 8px 0;
}

.ht-comment__authorname a {
    text-decoration: none;
}

.ht-comment__time {
    margin: 0 0 5px 0;
}

.ht-comment__time a {
    text-decoration: none;
}

.ht-comment__actions a {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.ht-comment__actions .comment-edit-link::after {
    content: '\00b7';
    margin: 0 3px 0 8px;
    color: #999;
    position: relative;
    top: -1px;
    font-weight: bold;
}

.ht-comment__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.ht-comment__content p {
    margin: 0 0 20px;
}

.ht-comment__content p:last-child {
    margin-bottom: 0;
}

/* Comment Moderation Notice */
.wp-block-comment .comment-awaiting-moderation {
    background: #f3f8fb;
    padding: 16px 20px;
    margin: 0 0 18px;
    font-size: 15px;
    border-radius: 5px;
}

/* Comment Pagination */
.wp-block-comments-pagination {
    margin-top: 30px;
}

.wp-block-comments-pagination a {
    text-decoration: none;
}

/* Comment Form Styling */
.wp-block-post-comments-form {
    margin-top: 30px;
}

.wp-block-post-comments-form .comment-form-comment {
    margin-bottom: 20px;
}

.wp-block-post-comments-form .comment-reply-title {
    font-weight: 600;
    margin: 0 0 20px;
    color: #333;
    font-size: 22px;
    line-height: 1.3;
    padding: 0 0 10px;
    border-bottom: 1px solid #e6e6e6;
}

.wp-block-post-comments-form .logged-in-as {
    margin: 0 0 20px;
    font-size: 15px;
}

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
    width: 100%;
    max-width: 100%;
}

.wp-block-post-comments-form .required {
    color: red;
}

/* Nested Comments (Replies) */
.wp-block-comment-template .children {
    list-style: none;
    padding-left: 40px;
    margin-top: 20px;
}

@media screen and (min-width: 480px) {
    .wp-block-comment-template .children {
        padding-left: 80px;
    }
}

/* Hide comments if empty */
.wp-block-comments:empty,
.hkb-comments-section:has(.wp-block-comments:empty) {
    display: none;
}

/* Basic Block Alignment & Layout */

.alignfull {
    width: 100%;
    max-width: 100%;
}

.wp-block {
    max-width: 100%;
    box-sizing: border-box;
}

/* Container Padding - Match Legacy .ht-container
   Legacy has 15px on mobile, 20px on 480px+ */
@media screen and (min-width: 480px) {
    .wp-block-group[style*="padding-left:15px"] {
        padding-left: 20px !important;
    }
    .wp-block-group[style*="padding-right:15px"] {
        padding-right: 20px !important;
    }
}

/* Widget & Sidebar Styling
   Matches .widget class: background #f4f5f5, padding 30px, border-radius 5px */

/* Base widget-style group blocks */
.wp-block-group.has-background {
    padding: 30px;
}

/* Widget titles - match .widget .widget__title (15px bold, not 18px medium) */
.wp-block-group.has-background .has-medium-font-size.has-black-color,
.wp-block-group.has-background > .wp-block-paragraph.has-medium-font-size:first-child,
.wp-block-group.has-background > p.has-medium-font-size:first-child {
    margin: 0 0 15px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}

/* Widget body text - match legacy 14px */
.wp-block-group.has-background .has-small-font-size,
.wp-block-group.has-background p.has-small-font-size {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* First element margin reset */
.wp-block-group.has-background > .wp-block-group__inner-container > p:first-of-type,
.wp-block-group.has-background > p:first-of-type,
.wp-block-group.has-background > .wp-block-paragraph:first-child,
.wp-block-group.has-background h1:first-child,
.wp-block-group.has-background h2:first-child,
.wp-block-group.has-background h3:first-child,
.wp-block-group.has-background h4:first-child,
.wp-block-group.has-background h5:first-child,
.wp-block-group.has-background h6:first-child,
.wp-block-group.has-background .wp-block-heading:first-child {
    margin-top: 0;
}

/* Paragraph spacing in widgets */
.wp-block-group.has-background p {
    margin: 0 0 1em;
}

.wp-block-group.has-background p:last-child {
    margin-bottom: 0;
}

/* List styling in widgets - match legacy (exclude navigation) */
.wp-block-group.has-background ul:not(.wp-block-navigation__container),
.wp-block-group.has-background ol:not(.wp-block-navigation__container) {
    padding: 0;
    margin: 0 0 1em;
    list-style-position: inside;
}

.wp-block-group.has-background ul:not(.wp-block-navigation__container) li,
.wp-block-group.has-background ol:not(.wp-block-navigation__container) li {
    margin: 0 0 5px;
}

.wp-block-group.has-background ul:not(.wp-block-navigation__container) li:last-child,
.wp-block-group.has-background ol:not(.wp-block-navigation__container) li:last-child {
    margin-bottom: 0;
}

/* Template part spacing */
.wp-block-template-part .wp-block-group.has-background {
    margin: 0 0 20px;
}

.wp-block-template-part .wp-block-group.has-background:last-child {
    margin-bottom: 0;
}

/* Article List Styling
   Matches .hkb-articlemini: 17px titles, 15px excerpts, border-bottom */

/* Article titles in query loops */
.wp-block-query .wp-block-post-template .wp-block-post-title {
    font-size: 17px !important;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 8px !important;
}

/* Article excerpts */
.wp-block-query .wp-block-post-template .wp-block-post-excerpt {
    font-size: 15px !important;
    line-height: 1.5;
    margin: 0 !important;
}

.wp-block-query .wp-block-post-template .wp-block-post-excerpt p {
    margin: 0 !important;
}

/* Article container spacing - matches .ht-articlelist li */
.wp-block-query .wp-block-post-template > .wp-block-group,
.wp-block-query .wp-block-post-template > article {
    margin-bottom: 22px !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;
    position: relative;
}

.wp-block-query .wp-block-post-template > .wp-block-group:last-child,
.wp-block-query .wp-block-post-template > article:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Make entire article card clickable - extend title link to cover card */
.wp-block-query .wp-block-post-template .wp-block-post-title a {
    text-decoration: none;
}

.wp-block-query .wp-block-post-template .wp-block-post-title a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Ensure hover effect on title when hovering anywhere on card */
.wp-block-query .wp-block-post-template > .wp-block-group:hover .wp-block-post-title a,
.wp-block-query .wp-block-post-template > article:hover .wp-block-post-title a {
    color: var(--wp--preset--color--primary) !important;
}

/* Remove link from excerpt to avoid conflicts */
.wp-block-query .wp-block-post-template .wp-block-post-excerpt a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* Category Header Styling
   Matches .ht-categoryheader: 22px title, 15px description, border-bottom */

.wp-block-heroickb-category-card {
    --heroic-icon-color: currentColor;
}

/* Category Card Styling - Match Legacy .hkb-category
   Title: 18px, #333, line-height 1.25
   Description: 15px, #8a8a8a, line-height 20px */

/* Reset wrapper font-size to prevent inheritance */
.wp-block-heroickb-category-card {
    font-size: 15px !important;
}

/* Category title styling */
.wp-block-heroickb-category-card h4,
.wp-block-heroickb-category-card .heroickb-categories-list__item-post h4,
.wp-block-heroickb-category-card .heroickb-category-card__title,
.wp-block-heroickb-category-card .hkb-category__title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    color: #333 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

/* Category description styling - add spacing between title and description */
.wp-block-heroickb-category-card .heroickb-categories-list__item-post-excerpt,
.wp-block-heroickb-category-card .heroickb-categories-list__item-post-excerpt-entry,
.wp-block-heroickb-category-card .heroickb-category-card__description,
.wp-block-heroickb-category-card .hkb-category__description {
    font-size: 15px !important;
    line-height: 20px !important;
    color: #8a8a8a !important;
    margin: 2px 0 0 !important;
}


/* Taxonomy Category Header - Match Legacy .ht-categoryheader
   Larger title (22px) for single category display on taxonomy pages */

body.tax-ht_kb_category .wp-block-heroickb-category-card {
    font-size: 15px !important;
    margin-block-start: 0 !important;
}

body.tax-ht_kb_category .wp-block-heroickb-category-card h4,
body.tax-ht_kb_category .wp-block-heroickb-category-card .heroickb-categories-list__item-post h4 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: #333 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

body.tax-ht_kb_category .wp-block-heroickb-category-card .heroickb-categories-list__item-post-excerpt,
body.tax-ht_kb_category .wp-block-heroickb-category-card .heroickb-categories-list__item-post-excerpt-entry {
    font-size: 15px !important;
    line-height: 20px !important;
    color: #8a8a8a !important;
    margin: 2px 0 0 !important;
}


/* Remove pointer cursor on taxonomy header (non-clickable) */
body.tax-ht_kb_category .wp-block-heroickb-category-card .heroickb-categories-list__item {
    pointer-events: none;
    cursor: default;
}

/* Taxonomy Category Mobile Padding Fix - Ensure padding on columns */
@media screen and (max-width: 767px) {
    body.tax-ht_kb_category .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    body.tax-ht_kb_category .wp-block-column {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Entry Content Typography
   Matches .hkb-article__content with legacy heading, paragraph, and list styles */

/* Article post content container */
.wp-block-post-content {
    font-size: 15px;
    line-height: 1.6;
}

/* Headings in post content - match legacy sizes */
.wp-block-post-content h1,
.wp-block-post-content .wp-block-heading.has-large-font-size {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 22px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .wp-block-post-content h1,
    .wp-block-post-content .wp-block-heading.has-large-font-size {
        font-size: 38px;
    }
}

.wp-block-post-content h2 {
    font-size: 28px;
    line-height: 1.2;
    padding-top: 22px;
    margin-bottom: 22px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .wp-block-post-content h2 {
        font-size: 30px;
    }
}

.wp-block-post-content h3 {
    font-size: 20px;
    line-height: 1.3;
    padding-top: 22px;
    margin-bottom: 22px;
    font-weight: bold;
}

.wp-block-post-content h4 {
    font-size: 19px;
    line-height: 1.3;
    padding-top: 22px;
    margin-bottom: 22px;
    font-weight: bold;
}

.wp-block-post-content h5 {
    font-size: 18px;
    line-height: 1.3;
    padding-top: 22px;
    margin-bottom: 22px;
    font-weight: bold;
}

.wp-block-post-content h6 {
    font-size: 17px;
    line-height: 1.25;
    padding-top: 22px;
    margin-bottom: 22px;
    font-weight: bold;
}

/* Paragraphs in post content */
.wp-block-post-content p {
    margin-top: 22px;
    margin-bottom: 22px;
}

/* Lists in post content - match legacy (exclude block-specific lists) */
.wp-block-post-content ul:not(.wp-block-navigation__container):not(.ht_toc_list):not(.htoc__itemswrap):not([class*="heroickb-"]):not([class*="hkb-"]),
.wp-block-post-content .wp-block-list {
    list-style-type: circle;
    margin: 0 0 22px;
    padding: 0 0 0 30px;
}

.wp-block-post-content ul:not(.wp-block-navigation__container):not(.ht_toc_list):not(.htoc__itemswrap):not([class*="heroickb-"]):not([class*="hkb-"]) li,
.wp-block-post-content .wp-block-list li {
    margin: 0 0 10px;
    word-break: break-word;
}

.wp-block-post-content ol:not(.wp-block-navigation__container):not(.ht_toc_list):not(.htoc__itemswrap):not([class*="heroickb-"]):not([class*="hkb-"]) {
    margin: 0 0 22px;
    padding: 0 0 0 30px;
}

.wp-block-post-content ol:not(.wp-block-navigation__container):not(.ht_toc_list):not(.htoc__itemswrap):not([class*="heroickb-"]):not([class*="hkb-"]) li {
    margin: 0 0 10px;
}

/* Blockquotes */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
    padding: 0 0 0 22px;
    margin: 44px 0;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.45;
    border-left: 5px solid #e3e4e5;
}

@media screen and (min-width: 768px) {
    .wp-block-post-content blockquote,
    .wp-block-post-content .wp-block-quote {
        padding: 0 0 0 44px;
        font-size: 20px;
    }
}

/* Code blocks */
.wp-block-post-content pre,
.wp-block-post-content .wp-block-code {
    border-radius: 3px;
    background: #f5f5f5;
    border: none;
    padding: 25px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.4;
    color: #4d4d4d;
    overflow-x: auto;
}

/* Tables */
.wp-block-post-content table {
    border: 1px solid #eaeaea;
    margin: 0 0 22px;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.wp-block-post-content table th,
.wp-block-post-content table td {
    background: #fafafa;
    padding: 4px 8px;
    border: 0;
    border-right: 1px solid #eaeaea;
}

.wp-block-post-content table thead th {
    background: #f2f2f2;
    font-weight: 600;
}

/* Image Alignment - Match legacy _entry-content.scss */

/* Images with alignment classes */
.wp-block-post-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-block-post-content img.alignleft {
    margin: 0 auto 11px;
}

@media screen and (min-width: 580px) {
    .wp-block-post-content img.alignleft {
        float: left;
        margin-right: 22px;
        margin-left: 0;
    }
}

.wp-block-post-content img.alignright {
    margin: 0 auto 11px;
}

@media screen and (min-width: 580px) {
    .wp-block-post-content img.alignright {
        float: right;
        margin-left: 22px;
        margin-right: 0;
    }
}

.wp-block-post-content img.aligncenter {
    margin: 0 auto 11px;
    display: block;
}

/* Figure elements with alignment classes */
.wp-block-post-content figure {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post-content figure.alignleft {
    text-align: center;
    margin: 0 auto 11px;
}

@media screen and (min-width: 580px) {
    .wp-block-post-content figure.alignleft {
        text-align: left;
        float: left;
        margin-right: 44px;
        margin-left: 0;
    }
}

.wp-block-post-content figure.alignright {
    text-align: center;
    margin: 0 auto 11px;
}

@media screen and (min-width: 580px) {
    .wp-block-post-content figure.alignright {
        text-align: right;
        float: right;
        margin-left: 44px;
        margin-right: 0;
    }
}

.wp-block-post-content figure.aligncenter {
    text-align: center;
    margin: 0 auto 11px;
}

/* Clear floats after headings with clear:both style */
.wp-block-post-content h2[style*="clear"],
.wp-block-post-content h3[style*="clear"],
.wp-block-post-content h4[style*="clear"],
.wp-block-post-content h5[style*="clear"],
.wp-block-post-content h6[style*="clear"] {
    clear: both;
}

/* Text alignment support */
.wp-block-post-content [style*="text-align: center"],
.wp-block-post-content .has-text-align-center {
    text-align: center;
}

.wp-block-post-content [style*="text-align: left"],
.wp-block-post-content .has-text-align-left {
    text-align: left;
}

.wp-block-post-content [style*="text-align: right"],
.wp-block-post-content .has-text-align-right {
    text-align: right;
}

/* Article Title Styling
   Matches .hkb-article__title: 28-32px depending on screen size */

/* Single article title */
body.single-ht_kb .wp-block-post-title {
    font-size: 28px !important;
    line-height: 1.15;
    margin: 0 0 15px !important;
}

@media screen and (min-width: 480px) {
    body.single-ht_kb .wp-block-post-title {
        font-size: 30px !important;
        line-height: 1.25;
    }
}

@media screen and (min-width: 768px) {
    body.single-ht_kb .wp-block-post-title {
        font-size: 32px !important;
        line-height: 1.3;
        margin: 0 0 30px !important;
    }
}

/* Page Title Styling - Match legacy .hkb-article__title */
body.page .wp-block-post-title,
body.page-template-default .wp-block-post-title {
    font-size: 28px !important;
    line-height: 1.15;
    margin: 0 0 15px !important;
}

@media screen and (min-width: 480px) {
    body.page .wp-block-post-title,
    body.page-template-default .wp-block-post-title {
        font-size: 30px !important;
        line-height: 1.25;
    }
}

@media screen and (min-width: 768px) {
    body.page .wp-block-post-title,
    body.page-template-default .wp-block-post-title {
        font-size: 32px !important;
        line-height: 1.3;
        margin: 0 0 30px !important;
    }
}

/* Related Articles Styling
   Matches .hkb-article-related: 20px title, circle list, 15px text */

/* Related articles section */
.hkb-article-related {
    font-size: 15px;
}

@media print {
    .hkb-article-related {
        display: none;
    }
}

.wp-block-group .wp-block-heading#htoc-related-articles,
.wp-block-group h3#htoc-related-articles,
.hkb-article-related .wp-block-heading {
    font-size: 20px !important;
    margin-bottom: 11px !important;
}

/* Related articles list from showcase block */
.wp-block-heroickb-article-showcase {
    font-size: 15px;
}

.wp-block-heroickb-article-showcase ul {
    list-style: circle;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.wp-block-heroickb-article-showcase a {
    text-decoration: none;
}

/* Navigation & Header Styling */

/* Site Logo */
.site-logo,
.wp-block-image.site-logo,
figure.site-logo {
    margin: 0 32px 0 0 !important;
}

.site-logo img,
.wp-block-image.site-logo img,
figure.site-logo img {
    width: 187px !important;
    height: auto !important;
    max-height: 40px !important;
    max-width: 100% !important;
}

/* Header Banner Container */
.site-header-banner {
    position: relative;
}

@media screen and (min-width: 768px) {
    .site-header-banner {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* Header Inner Flex Container */
.site-header-banner > .wp-block-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

/* Header Navigation - Desktop */
@media screen and (min-width: 768px) {
    /* Navigation wrapper grows to fill space */
    .site-header-banner .wp-block-navigation {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }
    
    /* Navigation list container */
    .site-header-banner .wp-block-navigation__container,
    .site-header-banner .wp-block-navigation .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Navigation items spacing - use margin-left for proper spacing */
    .site-header-banner .wp-block-navigation__container > li,
    .site-header-banner .wp-block-navigation__container > .wp-block-navigation-item {
        margin: 0px !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .site-header-banner .wp-block-navigation__container > li:first-child,
    .site-header-banner .wp-block-navigation__container > .wp-block-navigation-item:first-child {
        margin-left: 0 !important;
    }
    
    /* Navigation link styling */
    .site-header-banner .wp-block-navigation-item a,
    .site-header-banner .wp-block-navigation-item .wp-block-navigation-item__content {
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: normal !important;
        padding: 8px !important;
        border-radius: 5px !important;
        transition: all 0.1s ease-in-out !important;
        white-space: nowrap !important;
        color: #fff !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    
    .site-header-banner .wp-block-navigation-item a:hover,
    .site-header-banner .wp-block-navigation-item .wp-block-navigation-item__content:hover {
        background: rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Submenu dropdown arrow */
    .site-header-banner .wp-block-navigation-submenu__toggle {
        display: none !important;
    }
    
    /* Hide native submenu icon SVG to prevent double arrows */
    .site-header-banner .wp-block-navigation-submenu .wp-block-navigation__submenu-icon,
    .site-header-banner .wp-block-navigation-submenu svg {
        display: none !important;
    }
    
    /* Add custom arrow via ::after */
    .site-header-banner .wp-block-navigation-submenu > a::after,
    .site-header-banner .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
        display: inline-block !important;
        margin: 0 0 0 6px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.1 19' fill='%23fff' %3E %3Cpath d='M17 19c-0.5 0-1-0.2-1.4-0.6L0.6 3.4c-0.8-0.8-0.8-2 0-2.8 0.8-0.8 2-0.8 2.8 0L17 14.2 30.7 0.6c0.8-0.8 2-0.8 2.8 0 0.8 0.8 0.8 2 0 2.8L18.4 18.4C18 18.8 17.5 19 17 19z'/%3E%3C/svg%3E") !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 100% !important;
        content: '' !important;
        height: 9px !important;
        width: 9px !important;
    }
    
    /* Submenu dropdown container */
    .site-header-banner .wp-block-navigation__submenu-container {
        background: #fff !important;
        border: none !important;
        border-radius: 4px !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18) !important;
        z-index: 99999 !important;
        width: 260px !important;
        padding: 0 !important;
        position: absolute !important;
        top: 50px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        opacity: 0 !important;
        max-height: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        transition: opacity 0.15s ease-in-out, max-height 0.5s ease-in-out, visibility 0.15s ease-in-out !important;
    }
    
    /* Show submenu on hover */
    .site-header-banner .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
    .site-header-banner .wp-block-navigation__submenu-container:hover {
        opacity: 1 !important;
        max-height: 700px !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    
    .site-header-banner .wp-block-navigation-submenu:hover > a,
    .site-header-banner .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content {
        background: rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Bridge area for smooth hover */
    .site-header-banner .wp-block-navigation-submenu::after {
        content: '' !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        height: 20px !important;
        background: transparent !important;
        z-index: 99998 !important;
    }
    
    /* Triangle pointer */
    .site-header-banner .wp-block-navigation__submenu-container::before {
        content: ' ' !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: -8px !important;
        margin-left: -4px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        border-bottom: 8px solid #fff !important;
    }
    
    /* Last item dropdown alignment */
    .site-header-banner .wp-block-navigation-item:last-child .wp-block-navigation__submenu-container {
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
    }
    
    .site-header-banner .wp-block-navigation-item:last-child .wp-block-navigation__submenu-container::before {
        left: 85% !important;
    }
    
    /* Dropdown link styling */
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item a,
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
        color: #000 !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
        display: block !important;
    }
    
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child a,
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
        padding-top: 15px !important;
    }
    
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child a,
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
        padding-bottom: 15px !important;
    }
    
    .site-header-banner .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
        background: #fafafa !important;
        color: #000 !important;
    }
}

/* Mobile Navigation */
@media screen and (max-width: 767px) {
    /* Hide navigation when closed */
    .site-header-banner .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
        display: none !important;
    }
    
    /* Show navigation when open - multiple selectors for WordPress compatibility */
    .site-header-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
    .site-header-banner .wp-block-navigation.is-menu-open .wp-block-navigation__responsive-container-content,
    .site-header-banner .has-modal-open .wp-block-navigation__responsive-container-content {
        display: block !important;
    }
    
    /* Mobile toggle button - hide default WordPress icon, use custom */
    .site-header-banner .wp-block-navigation__responsive-container-open,
    .site-header-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open {
        display: block !important;
        float: right !important;
        border: 0 !important;
        background: none !important;
        outline: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 100002 !important;
        width: 30px !important;
        height: 30px !important;
        pointer-events: auto !important;
    }
    
    /* Hide WordPress default hamburger SVG */
    .site-header-banner .wp-block-navigation__responsive-container-open svg {
        opacity: 0 !important;
    }
    
    /* Create custom hamburger icon - three horizontal lines */
    .site-header-banner .wp-block-navigation__responsive-container-open::before,
    .site-header-banner .wp-block-navigation__responsive-container-open::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        width: 30px !important;
        height: 4px !important;
        background: #fff !important;
        border-radius: 3px !important;
        transition: all 0.5s ease-in-out !important;
        display: block !important;
        pointer-events: none !important; /* Let clicks pass through to the button */
    }
    
    /* Top line */
    .site-header-banner .wp-block-navigation__responsive-container-open::before {
        top: 4px !important;
    }
    
    /* Bottom line (with middle line as box-shadow when closed) */
    .site-header-banner .wp-block-navigation__responsive-container-open::after {
        bottom: 4px !important;
        box-shadow: 0 -9px 0 #fff !important;
    }
    
    /* Transform to X when menu is open - multiple selectors for WordPress compatibility */
    .site-header-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open::before,
    .site-header-banner .wp-block-navigation.is-menu-open .wp-block-navigation__responsive-container-open::before,
    .site-header-banner .has-modal-open .wp-block-navigation__responsive-container-open::before,
    .site-header-banner .wp-block-navigation__responsive-container-open.menu-is-open::before {
        top: 13px !important;
        transform: rotate(45deg) !important;
    }
    
    .site-header-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open::after,
    .site-header-banner .wp-block-navigation.is-menu-open .wp-block-navigation__responsive-container-open::after,
    .site-header-banner .has-modal-open .wp-block-navigation__responsive-container-open::after,
    .site-header-banner .wp-block-navigation__responsive-container-open.menu-is-open::after {
        bottom: 13px !important;
        box-shadow: none !important;
        transform: rotate(-45deg) !important;
    }
    
    /* Hide WordPress close button - we use the hamburger toggle instead */
    .site-header-banner .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
    
    /* Mobile navigation block positioning */
    .site-header-banner .wp-block-navigation {
        position: static !important;
    }
    
    /* Mobile menu container when opened - override WordPress core styles */
    .site-header-banner .wp-block-navigation__responsive-container.is-menu-open,
    .site-header-banner .wp-block-navigation.is-menu-open .wp-block-navigation__responsive-container,
    .site-header-banner .has-modal-open .wp-block-navigation__responsive-container {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        height: auto !important;
        background: #fff !important;
        box-shadow: 0px 5px 20px rgba(0,0,0,0.15) !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Mobile menu content - make it visible and full width */
    .site-header-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile navigation list */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        background: #fff !important;
    }
    
    /* Mobile navigation items */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eaeaea !important;
        list-style: none !important;
    }
    
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-item:last-child {
        border-bottom: 0 !important;
    }
    
    /* Mobile navigation links */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-item a,
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-item .wp-block-navigation-item__content {
        color: #333333 !important;
        padding: 15px 20px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        display: block !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-item .wp-block-navigation-item__content:hover {
        background: #fafafa !important;
        color: #333333 !important;
    }
    
    /* Parent submenu item (Features) */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-submenu {
        display: block !important;
        width: 100% !important;
    }
    
    /* Mobile submenu container */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 10px !important;
        transform: none !important;
    }
    
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container::before {
        display: none !important;
    }
    
    /* Mobile submenu item containers */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        display: block !important;
        width: 100% !important;
        border-bottom: 0 !important;
    }
    
    /* Mobile submenu links */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item a,
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
        display: block !important;
        width: 100% !important;
        padding: 5px 20px 5px 40px !important;
        color: rgba(0,0,0,0.7) !important;
        font-size: 15px !important;
    }
    
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content:hover {
        color: rgba(0,0,0,0.9) !important;
    }
    
    /* Remove dropdown arrow on mobile */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-submenu > a::after,
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
        display: none !important;
    }
    
    /* Mobile submenu doesn't need border */
    .site-header-banner .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        border-bottom: 0 !important;
    }
}

@media print {
    .site-header-banner .wp-block-navigation {
        display: none;
    }
}

/* Template spacing */
.wp-block-template-part + .wp-block-template-part {
    margin-top: 0 !important;
}

.wp-block-group.has-background {
    margin-top: 0 !important;
}

/* Footer container */
.site-footer-content {
    padding: 30px 20px !important;
}

@media screen and (min-width: 768px) {
    .site-footer-content {
        padding: 30px 30px !important;
    }
}

/* Footer flex layout */
.site-footer-content > .wp-block-group {
    width: 100%;
}

/* Copyright text */
.site-footer-content p.has-text-color {
    margin: 0 !important;
}

@media screen and (max-width: 479px) {
    .site-footer-content p.has-text-color {
        text-align: center !important;
        margin: 0 0 0 !important;
        width: 100% !important;
    }
}

/* Footer navigation */
.site-footer-content .wp-block-navigation {
    font-size: 14px !important;
}

.site-footer-content .wp-block-navigation__container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 20px !important;
}

.site-footer-content .wp-block-navigation__container > li,
.site-footer-content .wp-block-navigation__container > .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.site-footer-content .wp-block-navigation a,
.site-footer-content .wp-block-navigation .wp-block-navigation-item__content {
    color: #999 !important;
    text-decoration: none !important;
    padding: 0 !important;
    font-size: 14px !important;
}

.site-footer-content .wp-block-navigation a:hover,
.site-footer-content .wp-block-navigation .wp-block-navigation-item__content:hover {
    text-decoration: underline !important;
    background: none !important;
    color: #999 !important;
}

@media screen and (max-width: 479px) {
    .site-footer-content .wp-block-navigation {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .site-footer-content .wp-block-navigation__container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* Footer copyright paragraph styling */
.site-footer-content .site-footer__copyright {
    color: #999;
}

@media screen and (max-width: 479px) {
    .site-footer-content .site-footer__copyright {
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Footer site name highlight color */
.site-footer-content .site-name-highlight,
.site-footer-content a .site-name-highlight {
    color: var(--wp--preset--color--primary, #00b4b3);
    text-decoration-color: var(--wp--preset--color--primary, #00b4b3);
}

.site-footer-content a:has(.site-name-highlight) {
    text-decoration-color: var(--wp--preset--color--primary, #00b4b3);
}

/* Article Last Updated Date */
.hkb-article__lastupdated {
    display: block;
    font-size: 14px;
    color: #999999;
    margin: 0 0 22px;
}

/* TOC child heading indentation - always visible on mobile */
.wp-block-ht-block-toc .ht_toc_list_sub {
    margin: 5px 0 0 10px;
    font-size: 14px;
    transition: all 0.5s ease-in-out;
}

.wp-block-ht-block-toc .ht_toc_list_sub .ht_toc_link {
    margin-left: 10px;
}


/* Sticky sidebar TOC - hide child items by default (desktop only) */
.sticky-sidebar .wp-block-ht-block-toc .ht_toc_list_sub {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
}

/* Sticky sidebar TOC - show child items when parent is active */
.sticky-sidebar .wp-block-ht-block-toc .ht_toc_item.active + .ht_toc_list_sub,
.sticky-sidebar .wp-block-ht-block-toc .ht_toc_list_sub:has(.ht_toc_item.active) {
    opacity: 1;
    max-height: 9999px;
    visibility: visible;
}

/* Desktop only - remove top/bottom margins for rounded style with scrollspy */
@media screen and (min-width: 1025px) {
    .wp-block-ht-block-toc.is-style-rounded[data-htoc-scrollspy="true"] {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Category taxonomy and single article template mobile spacing */
@media screen and (max-width: 767px) {
    body.tax-ht_kb_category .wp-block-template-part + .wp-block-group.is-layout-constrained,
    body.single-ht_kb .wp-block-template-part + .wp-block-group.is-layout-constrained {
        padding-top: 20px !important;
        
        margin: 0;
    }
    
    /* Mobile TOC container spacing - use padding to maintain gray background */
    .ht-mobile-toc {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile TOC title spacing */
    .ht-mobile-toc .ht_toc_title,
    .ht-mobile-toc .htoc__title {
        margin: 0 0 10px !important;
    }
    
    .ht_toc_list_sub {
        margin: 0 0 7px !important;
    }

    
    /* Mobile TOC - match legacy widget appearance */
    .ht-mobile-toc .wp-block-ht-block-toc {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
    }
    
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_link,
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_list li a,
    .ht-mobile-toc .wp-block-ht-block-toc .htoc__itemswrap a,
    .ht-mobile-toc .wp-block-ht-block-toc ul li a,
    .ht-mobile-toc .wp-block-ht-block-toc ol li a,
    .ht-mobile-toc .wp-block-ht-block-toc li a {
        display: block !important;
        padding: 5px 0 !important;
        text-decoration: underline !important;
        color: var(--wp--preset--color--primary, #00b4b3) !important;
        background: none !important;
        background-color: transparent !important;
        font-weight: normal !important;
        border-radius: 0 !important;
    }
    
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_link:hover,
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_list li a:hover,
    .ht-mobile-toc .wp-block-ht-block-toc .htoc__itemswrap a:hover,
    .ht-mobile-toc .wp-block-ht-block-toc ul li a:hover,
    .ht-mobile-toc .wp-block-ht-block-toc ol li a:hover,
    .ht-mobile-toc .wp-block-ht-block-toc li a:hover {
        color: var(--wp--preset--color--primary, #00b4b3) !important;
        text-decoration: underline !important;
        background: none !important;
        background-color: transparent !important;
    }
    
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_item.active > a,
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_list li.active > a,
    .ht-mobile-toc .wp-block-ht-block-toc li.active > a {
        color: var(--wp--preset--color--primary, #00b4b3) !important;
        background: none !important;
        background-color: transparent !important;
        font-weight: normal !important;
        text-decoration: underline !important;
        border-radius: 0 !important;
    }
    
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_item.active > a:hover,
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_list li.active > a:hover,
    .ht-mobile-toc .wp-block-ht-block-toc li.active > a:hover {
        color: var(--wp--preset--color--primary, #00b4b3) !important;
        text-decoration: underline !important;
        background: none !important;
        background-color: transparent !important;
    }
    
    .ht-mobile-toc .wp-block-ht-block-toc .ht_toc_list_sub,
    .ht-mobile-toc .wp-block-ht-block-toc ul ul,
    .ht-mobile-toc .wp-block-ht-block-toc ol ol {
        margin: 5px 0 0 10px !important;
        font-size: 14px;
    }
}

/* Mobile TOC - show in site editor for preview at mobile/tablet sizes only */
@media screen and (max-width: 1024px) {
    .is-root-container .ht-mobile-toc {
        display: block !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile TOC title spacing in site editor */
    .is-root-container .ht-mobile-toc .ht_toc_title,
    .is-root-container .ht-mobile-toc .htoc__title {
        margin: 0 0 10px !important;
    }
}

/* Buttons */

.wp-block-button .wp-block-button__link {
    text-decoration: none;
}

/* Support Widget Exit Button - Legacy Styling */
.wp-block-button.hkb_widget_exit__btn {
    border-radius: 99px !important;
}

.wp-block-button.hkb_widget_exit__btn .wp-block-button__link {
    border-radius: 99px !important;
    font-weight: normal !important;
}


/* Pageheader container */
.ht-pageheader-block {
    width: 100%;
    display: block;
}

@media screen and (min-width: 768px) {
    .ht-pageheader-block {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* Pageheader columns responsive behavior */
@media screen and (max-width: 767px) {
    .ht-pageheader-block .wp-block-columns {
        flex-wrap: wrap;
    }
    
    .ht-pageheader-block .wp-block-column:first-child {
        margin-bottom: 10px !important;
        flex-basis: 100% !important;
    }
    
    .ht-pageheader-block .wp-block-column:last-child {
        flex-basis: 100% !important;
    }
}

@media screen and (min-width: 768px) {
    .ht-pageheader-block .wp-block-columns {
        display: table;
        width: 100%;
    }
    
    .ht-pageheader-block .wp-block-column {
        display: table-cell;
        vertical-align: middle;
    }
    
    .ht-pageheader-block .wp-block-column:first-child {
        width: 100%;
    }
}

/* Breadcrumb wrapper styling */
.ht-pageheader-block .heroickb-breadcrumb-wrap {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 768px) {
    .ht-pageheader-block .heroickb-breadcrumb-wrap {
        margin-bottom: 10px;
    }
}

@media screen and (min-width: 768px) {
    .ht-pageheader-block .heroickb-breadcrumb-wrap {
        padding: 10px 0;
    }
}

/* Breadcrumb list styling - match legacy */
.ht-pageheader-block .heroickb-breadcrumb,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb {
    list-style: none !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #5c5c5c !important;
    letter-spacing: -0.1px !important;
}

@media screen and (min-width: 480px) {
    .ht-pageheader-block .heroickb-breadcrumb,
    .wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb {
        letter-spacing: 0 !important;
        font-size: 14px !important;
    }
}

.ht-pageheader-block .heroickb-breadcrumb:last-child,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb:last-child {
    margin-bottom: 0 !important;
}

/* Breadcrumb items */
.ht-pageheader-block .heroickb-breadcrumb li,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb li {
    display: inline-block !important;
}

.ht-pageheader-block .heroickb-breadcrumb li:last-child,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb li:last-child {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Breadcrumb links */
.ht-pageheader-block .heroickb-breadcrumb a,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb a {
    color: #5c5c5c !important;
    text-decoration: none !important;
}

.ht-pageheader-block .heroickb-breadcrumb a:hover,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb a:hover {
    text-decoration: none !important;
}

/* Breadcrumb separator */
.ht-pageheader-block .heroickb-breadcrumb li:not(:last-child)::after,
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb li:not(:last-child)::after {
    content: "›" !important;
    margin: 0 0.4rem 0 0 !important;
    color: var(--wp--preset--color--primary, #00b4b3) !important;
    font-size: inherit !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Search box in pageheader - match legacy */
.ht-pageheader-block .wp-block-heroickb-search {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .ht-pageheader-block .wp-block-heroickb-search {
        max-width: 330px;
    }
}

/* Search field styling - match legacy */
.ht-pageheader-block .wp-block-heroickb-search input[type="text"],
.ht-pageheader-block .wp-block-heroickb-search .heroickb-search__input,
.ht-pageheader-block .hkb-site-search__field,
.ht-pageheader-block .wp-block-heroickb-search .heroickb-sb-inputwrapper__input,
.ht-pageheader-block .wp-block-heroickb-search .heroickb-sb-inputwrapper__input_wo_cat {
    padding: 10px 15px 10px 0px !important;
    font-size: 15px !important;
    width: 100% !important;
}

@media screen and (max-width: 767px) {
    .ht-pageheader-block .wp-block-heroickb-search input[type="text"],
    .ht-pageheader-block .wp-block-heroickb-search .heroickb-search__input,
    .ht-pageheader-block .wp-block-heroickb-search .heroickb-sb-inputwrapper__input,
    .ht-pageheader-block .wp-block-heroickb-search .heroickb-sb-inputwrapper__input_wo_cat {
        width: 100% !important;
    }
}

@media screen and (min-width: 768px) {
    .ht-pageheader-block .wp-block-heroickb-search input[type="text"],
    .ht-pageheader-block .wp-block-heroickb-search .heroickb-search__input,
    .ht-pageheader-block .wp-block-heroickb-search .heroickb-sb-inputwrapper__input,
    .ht-pageheader-block .wp-block-heroickb-search .heroickb-sb-inputwrapper__input_wo_cat {
        width: 330px !important;
    }
}

/* Search icon positioning */
.ht-pageheader-block .wp-block-heroickb-search .heroickb-search__icon,
.ht-pageheader-block .hkb-site-search::after {
    opacity: 0.5 !important;
    left: 12px !important;
    position: absolute !important;
}

.ht-pageheader-block .wp-block-heroickb-search {
    position: relative !important;
}

/* Hero/Search Header Section (Home & Archive Pages)
   Container wrapper for search block matching legacy max-width: 620px
   Mobile: full width, Desktop: 620px max-width centered */

/* Search container - full width on mobile */
.kb-search-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* On desktop, constrain container to 620px (matching legacy .hkb-searchbox) */
@media screen and (min-width: 768px) {
    .kb-search-container {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }
}

/* Table of Contents (TOC) Styling */

/* TOC theme color styling */
.wp-block-ht-toc-block-toc,
.wp-block-heroickb-dependency-handler .ht-toc-container {
    --toc-primary-color: var(--wp--preset--color--primary, #00b4b3);
    --toc-link-color: var(--wp--preset--color--primary, #00b4b3);
    --toc-hover-color: var(--wp--preset--color--primary-hover, #008a89);
}

.wp-block-ht-toc-block-toc .ht-toc-container .ht-toc-title,
.wp-block-heroickb-dependency-handler .ht-toc-container .ht-toc-title {
    color: var(--wp--preset--color--primary, #00b4b3) !important;
    border-bottom-color: var(--wp--preset--color--primary, #00b4b3) !important;
}

.wp-block-ht-toc-block-toc .ht-toc-container .ht-toc-list a,
.wp-block-heroickb-dependency-handler .ht-toc-container .ht-toc-list a {
    color: var(--wp--preset--color--primary, #00b4b3) !important;
}

.wp-block-ht-toc-block-toc .ht-toc-container .ht-toc-list a:hover,
.wp-block-heroickb-dependency-handler .ht-toc-container .ht-toc-list a:hover {
    color: #ffffff !important;
    background-color: var(--wp--preset--color--primary, #00b4b3) !important;
}

/* Pagination */

.wp-block-query-pagination {
    margin-top: 20px;
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-numbers {
    font-size: 14px;
    border-radius: 3px;
    padding: 10px 15px;
}

/* HeroicKB Feedback Block
   Override modern block styles to match legacy template design
   Uses block's customizable SVG icons in compact legacy layout */

.wp-block-heroickb-feedback .heroickb-feedback,
.wp-block-heroickb-feedback .ht-voting {
    background: var(--wp--preset--color--secondary, #f4f5f5);
    padding: 15px 30px 20px;
    margin: 0;
}

/* Increase bottom padding when comment form or thanks message is visible */
.wp-block-heroickb-feedback .ht-voting:has(.ht-voting-comment),
.wp-block-heroickb-feedback .ht-voting:has(.ht-voting-thanks) {
    padding-bottom: 75px;
}

@media print {
    .wp-block-heroickb-feedback .heroickb-feedback,
    .wp-block-heroickb-feedback .ht-voting {
        display: none;
    }
}

/* Title styling to match legacy */
.wp-block-heroickb-feedback .heroickb-feedback__title,
.wp-block-heroickb-feedback .hkb-feedback__title {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    color: #4d4d4d !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    padding: 0 !important;
}

/* Voting links container */
.wp-block-heroickb-feedback .heroickb-voting-links,
.wp-block-heroickb-feedback .ht-voting-links {
    margin: 0 auto !important;
    text-align: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

/* Upvote and Downvote buttons - icon + text design using block's SVG icons */
.wp-block-heroickb-feedback .heroickb-voting-upvote,
.wp-block-heroickb-feedback .heroickb-voting-downvote,
.wp-block-heroickb-feedback .ht-voting-upvote,
.wp-block-heroickb-feedback .ht-voting-downvote {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 7px !important;
    padding: 0 !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    overflow: visible !important;
    position: relative !important;
}

/* Icon container - legacy size with proper padding */
.wp-block-heroickb-feedback .heroickb-voting-upvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-downvote-icon,
.wp-block-heroickb-feedback .ht-voting-upvote-icon,
.wp-block-heroickb-feedback .ht-voting-downvote-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    padding: 8px 20px !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Icon SVG sizing - match legacy 20px */
.wp-block-heroickb-feedback .heroickb-voting-upvote-icon svg,
.wp-block-heroickb-feedback .heroickb-voting-downvote-icon svg,
.wp-block-heroickb-feedback .ht-voting-upvote-icon svg,
.wp-block-heroickb-feedback .ht-voting-downvote-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* HIDE text labels - icon only design */
/* Can be overridden by setting upvoteText/downvoteText in block attributes */
.wp-block-heroickb-feedback .heroickb-voting-upvote-label,
.wp-block-heroickb-feedback .heroickb-voting-downvote-label,
.wp-block-heroickb-feedback .ht-voting-upvote-label,
.wp-block-heroickb-feedback .ht-voting-downvote-label {
    display: none !important;
    margin: 0 !important;
}

/* Default icon colors to match legacy design (green upvote, red downvote) */
/* NOTE: The block only supports one iconDefaultBgColor for both buttons */
/* We override BOTH buttons to ensure correct colors regardless of template setting */
/* The block's hover states (from attributes) will still work correctly */
/* High specificity needed to override block's ID-based inline styles */

/* Upvote - Green */
[id*="kb-feedback-"] .ht-voting-upvote:not(:hover):not(.active) .ht-voting-upvote-icon,
[id*="kb-feedback-"] .heroickb-voting-upvote:not(:hover):not(.active) .heroickb-voting-upvote-icon,
.wp-block-heroickb-feedback .ht-voting-upvote:not(:hover):not(.active) .ht-voting-upvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-upvote:not(:hover):not(.active) .heroickb-voting-upvote-icon {
    background-color: #5fd87f !important;
}

/* Downvote - Red (default state) */
[id*="kb-feedback-"] .ht-voting-downvote:not(:hover):not(.active) .ht-voting-downvote-icon,
[id*="kb-feedback-"] .heroickb-voting-downvote:not(:hover):not(.active) .heroickb-voting-downvote-icon,
.wp-block-heroickb-feedback .ht-voting-downvote:not(:hover):not(.active) .ht-voting-downvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-downvote:not(:hover):not(.active) .heroickb-voting-downvote-icon {
    background-color: #e9726f !important;
}

/* ACTIVE STATE - Show which button was clicked */
/* Active upvote - darker green with visual emphasis */
[id*="kb-feedback-"] .ht-voting-upvote.active .ht-voting-upvote-icon,
[id*="kb-feedback-"] .heroickb-voting-upvote.active .heroickb-voting-upvote-icon,
.wp-block-heroickb-feedback .ht-voting-upvote.active .ht-voting-upvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-upvote.active .heroickb-voting-upvote-icon {
    background-color: #41cc6c !important;
    box-shadow: 0 0 0 3px rgba(65, 204, 108, 0.2) !important;
    transform: scale(1.05) !important;
}

/* Active downvote - darker red with visual emphasis */
[id*="kb-feedback-"] .ht-voting-downvote.active .ht-voting-downvote-icon,
[id*="kb-feedback-"] .heroickb-voting-downvote.active .heroickb-voting-downvote-icon,
.wp-block-heroickb-feedback .ht-voting-downvote.active .ht-voting-downvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-downvote.active .heroickb-voting-downvote-icon {
    background-color: #e1615d !important;
    box-shadow: 0 0 0 3px rgba(225, 97, 93, 0.2) !important;
    transform: scale(1.05) !important;
}

/* HOVER STATE - Visual feedback on hover */
[id*="kb-feedback-"] .ht-voting-upvote:hover:not(.active) .ht-voting-upvote-icon,
[id*="kb-feedback-"] .heroickb-voting-upvote:hover:not(.active) .heroickb-voting-upvote-icon,
.wp-block-heroickb-feedback .ht-voting-upvote:hover:not(.active) .ht-voting-upvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-upvote:hover:not(.active) .heroickb-voting-upvote-icon {
    background-color: #41cc6c !important;
    transform: scale(1.02) !important;
    transition: all 0.2s ease !important;
}

[id*="kb-feedback-"] .ht-voting-downvote:hover:not(.active) .ht-voting-downvote-icon,
[id*="kb-feedback-"] .heroickb-voting-downvote:hover:not(.active) .heroickb-voting-downvote-icon,
.wp-block-heroickb-feedback .ht-voting-downvote:hover:not(.active) .ht-voting-downvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-downvote:hover:not(.active) .heroickb-voting-downvote-icon {
    background-color: #e1615d !important;
    transform: scale(1.02) !important;
    transition: all 0.2s ease !important;
}

/* Smooth transitions for all states */
.wp-block-heroickb-feedback .heroickb-voting-upvote-icon,
.wp-block-heroickb-feedback .heroickb-voting-downvote-icon,
.wp-block-heroickb-feedback .ht-voting-upvote-icon,
.wp-block-heroickb-feedback .ht-voting-downvote-icon {
    transition: all 0.2s ease !important;
}

/* Comment section styling */
.wp-block-heroickb-feedback .heroickb-voting-comment,
.wp-block-heroickb-feedback .ht-voting-comment {
    margin: 20px 0 0 !important;
    max-width: 100% !important;
    text-align: left !important;
}

.wp-block-heroickb-feedback .heroickb-voting-comment .heroickb-voting-comment__textarea,
.wp-block-heroickb-feedback .ht-voting-comment .ht-voting-comment__textarea,
.wp-block-heroickb-feedback .heroickb-voting-comment textarea,
.wp-block-heroickb-feedback .ht-voting-comment textarea {
    margin: 0 0 20px !important;
    line-height: 1.5 !important;
    width: 100% !important;
}

.wp-block-heroickb-feedback .heroickb-voting-comment .heroickb-voting-comment__submit,
.wp-block-heroickb-feedback .ht-voting-comment .ht-voting-comment__submit,
.wp-block-heroickb-feedback .heroickb-voting-comment button,
.wp-block-heroickb-feedback .ht-voting-comment button {
    float: right !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    background-color: var(--wp--preset--color--primary, #00b4b3) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.wp-block-heroickb-feedback .heroickb-voting-comment .heroickb-voting-comment__submit:hover,
.wp-block-heroickb-feedback .ht-voting-comment .ht-voting-comment__submit:hover,
.wp-block-heroickb-feedback .heroickb-voting-comment button:hover,
.wp-block-heroickb-feedback .ht-voting-comment button:hover {
    background-color: var(--wp--preset--color--primary-hover, #008f8e) !important;
}

/* Thanks message styling */
.wp-block-heroickb-feedback .ht-voting-thanks {
    margin: 20px 0 0 !important;
    padding: 1em !important;
    text-align: center !important;
    background: #f0f9ff !important;
    border-radius: 4px !important;
}

/* Sticky Sidebar - Hide on mobile (mobile TOC is shown instead) */
@media screen and (max-width: 767px) {
    .wp-block-column.sticky-sidebar {
        display: none !important;
    }
}

/* Breadcrumb Arrow Override - Match Legacy Style */
/* This replaces the simple text arrow (›) with the legacy SVG arrow icon */
/* Applied to both frontend and site editor */

/* Remove default margin from breadcrumb links */
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb li a {
    margin-right: 0 !important;
}

body .wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb-wrap .heroickb-breadcrumb li a {
    margin-right: 0 !important;
}

/* Replace text arrow with legacy SVG arrow */
.wp-block-heroickb-category-breadcrumb .heroickb-breadcrumb li:not(:last-child)::after {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 2px !important;
    position: relative !important;
    top: 1px !important;
    background-color: var(--wp--preset--color--primary, #00b4b3) !important;
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='12' width='12' viewBox='0 0 16 16'%3E%3Cpath d='M6 13.4L4.6 12 8.6 8 4.6 4 6 2.6 11.4 8z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=UTF-8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='12' width='12' viewBox='0 0 16 16'%3E%3Cpath d='M6 13.4L4.6 12 8.6 8 4.6 4 6 2.6 11.4 8z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

/* Fix dashicons font family - critical for icon display in editor */
.wp-block-ht-block-toc .dashicons,
.wp-block-ht-block-toc .dashicons-before:before {
    font-family: dashicons !important;
}


.ka-not-found-sub {
    color: #ffffffe6 !important;
}

 footer, .wp-block-template-part {
    margin-block-start: 0 !important;
 }

/* HT Blocks - Tab Block Styling
   Ensure consistency between legacy and FSE templates */

.wp-block-ht-blocks-tabs,
.wp-block-hb-tabs {
    margin: 1em 0;
}

/* Remove list markers from tab navigation */
.wp-block-hb-tabs__nav,
.wp-block-ht-blocks-tabs .wp-block-hb-tabs__nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
}

.wp-block-hb-tabs__nav li,
.wp-block-ht-blocks-tabs .wp-block-hb-tabs__nav li {
    list-style: none !important;
    margin: 0 0 -1px !important;
    padding: 0.8em 1em !important;
}

/* Tab navigation items */
.wp-block-hb-tabs__head {
    position: relative;
    background: #f0f2f5;
    border-top: 1px solid #e6e8eb;
    border-right: 1px solid #e6e8eb;
    color: #333;
    white-space: nowrap;
    line-height: 1;
}

.wp-block-hb-tabs__head:first-child {
    border-left: 1px solid #e6e8eb;
}

.wp-block-hb-tabs__head[data-hb-tabs-tab--state="inactive"]:hover {
    cursor: pointer;
}

.wp-block-hb-tabs__head[data-hb-tabs-tab--state="active"] {
    background: #fff;
}

.wp-block-hb-tabs__head[data-hb-tabs-tab--state="active"] .wp-block-hb-tabs__head_item {
    font-weight: bolder;
}

/* Tab content */
.wp-block-hb-tabs__content {
    padding: 0.25em 1em;
    border: 1px solid #e6e8eb;
    display: none;
}

.wp-block-hb-tabs__content[data-hb-tabs-tab--state="active"] {
    display: block;
}

/* Mobile responsiveness */
@media screen and (max-width: 599px) {
    .wp-block-hb-tabs__nav li {
        width: 100%;
    }
    
    .wp-block-hb-tabs__nav li:last-child {
        border-bottom: 1px solid #e6e8eb;
    }
}

@media screen and (min-width: 600px) {
    .wp-block-hb-tabs__nav {
        display: inline-flex;
        flex-wrap: nowrap;
    }
}