/**
 * @file component_styles.css
 * @version 1.1.0
 * @description Styles native Zendesk Guide components (zd-callout, zd-accordion, zd-tabs)
 *   so they match the custom HTML modules in envato_hc_stylesheet.css.
 * @author Simon Agliati
 * @dependencies envato_hc_stylesheet.css (design tokens, article typography);
 *   callout icons are the same /hc/theming_assets IDs used by .bs-callout.
 * @lastUpdated 2026-09-16
 *
 * Mapping:
 *   zd-callout .wysiwyg-callout-info    -> .bs-callout.bs-callout-info
 *   zd-callout .wysiwyg-callout-warning -> .bs-callout.bs-callout-warning
 *   zd-callout .wysiwyg-callout-error   -> .bs-callout.bs-callout-danger
 *   zd-callout .wysiwyg-callout-tip     -> blockquote.envato-hint
 *   zd-accordion (.numbered)            -> ul.accordion (.numbered)
 *   zd-tabs                             -> .tabbed-module.tab-module-article
 *
 * Selectors are scoped to .article-body so they beat Zendesk's wysiwyg-* rules.
 */

/* === Native Callouts ==================================================== */

/* zd-callout is a custom element and renders inline by default */
.article-body zd-callout.wysiwyg-callout {
    display: block;
    position: relative;
    padding: 20px 20px 20px 60px;
    margin: 15px 0;
    border: none;
    border-radius: var(--roundness-subtle, 4px);
    font-family: var(--font-family-regular);
    font-size: var(--font-size-3x, 16px);
    line-height: var(--font-height-normal, 150%);
    color: var(--color-content-primary);
}

.article-body zd-callout.wysiwyg-callout > p {
    margin: 0;
}

.article-body zd-callout.wysiwyg-callout > p + p {
    margin-top: 1em;
}

.article-body zd-callout.wysiwyg-callout a,
.article-body zd-callout.wysiwyg-callout a:visited,
.article-body zd-callout.wysiwyg-callout a:hover {
    color: var(--color-content-brand-accent);
    text-decoration: none;
    background: transparent;
}

/* Zendesk styles <span class="wysiwyg-callout-icon"> with its own mask.
   Hide it and draw the theme icon with ::before, matching .bs-callout::before. */
.article-body zd-callout.wysiwyg-callout > .wysiwyg-callout-icon {
    display: none !important;
}

.article-body zd-callout.wysiwyg-callout::before {
    position: absolute;
    left: 26px; /* 60px padding − 34px, same offset as .bs-callout::before */
    top: 20px;
    margin: 0;
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
}

/* Info  (was .bs-callout-info) */
.article-body zd-callout.wysiwyg-callout-info {
    background: var(--color-blue-25);
}

.article-body zd-callout.wysiwyg-callout-info::before {
    content: url(/hc/theming_assets/01HZ68S2WEMS73TCASQJ7F2H7Q);
    top: 22px;
}

/* Warning  (was .bs-callout-warning) */
.article-body zd-callout.wysiwyg-callout-warning {
    background: var(--color-surface-brand-accent);
}

.article-body zd-callout.wysiwyg-callout-warning::before {
    content: url(/hc/theming_assets/01J1P7ZDAB9XTKK8W1YG6SEP5A);
}

/* Error  (was .bs-callout-danger) */
.article-body zd-callout.wysiwyg-callout-error {
    background: var(--color-veryberry-25);
}

.article-body zd-callout.wysiwyg-callout-error::before {
    content: url(/hc/theming_assets/01J1P7ZCWPY5GWR0H5Z5PYYCHA);
}

/* Tip  (was blockquote.envato-hint): bordered box, no icon, "Hint:" inline */
.article-body zd-callout.wysiwyg-callout-tip {
    padding: var(--spacing-3x);
    background: transparent;
    border: 1px solid var(--color-grey-100, #CCC);
    border-radius: var(--roundness-subtle, 4px);
    text-align: start;
}

.article-body zd-callout.wysiwyg-callout-tip::before {
    content: none;
}

.article-body zd-callout.wysiwyg-callout-tip > p:first-of-type::before {
    content: "Hint:";
    display: inline;
    margin-right: 5px;
    color: var(--color-content-brand-accent);
    font-weight: var(--font-weight-median, 600);
}

/* Callouts: mobile (mirrors .bs-callout at 768px) */
@media (max-width: 768px) {
    .article-body zd-callout.wysiwyg-callout {
        padding: 40px 20px 10px 20px;
        margin: 20px 0;
        text-align: center;
    }

    .article-body zd-callout.wysiwyg-callout::before,
    .article-body zd-callout.wysiwyg-callout-info::before {
        left: 50%;
        top: 12px;
        transform: translateX(-50%);
    }

    .article-body zd-callout.wysiwyg-callout-tip {
        padding: var(--spacing-3x);
        text-align: start;
    }
}

/* === Native Accordion =================================================== */

.article-body zd-accordion.wysiwyg-disclosure {
    display: block;
    margin: 40px 0 0;
    padding: 0;
}

.article-body zd-accordion.wysiwyg-disclosure > details {
    margin: 0 0 60px;
    padding: 0;
}

/* Zendesk adds border-top on details+details; drop it and keep the heading underline. */
.article-body zd-accordion.wysiwyg-disclosure > details + details {
    border-top: none;
}

/* Header row (was ul.accordion > li > div:nth-child(1) + h3) */
.article-body zd-accordion.wysiwyg-disclosure > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3x);
    margin: 0;
    padding: 0 0 20px;
    border-bottom: 1px solid #E2E2E2;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-median, 600);
    font-size: var(--font-size-3x, 16px);
    line-height: var(--font-height-normal, 150%);
    letter-spacing: 0;
    color: var(--color-content-primary);
}

.article-body zd-accordion.wysiwyg-disclosure > details > summary::-webkit-details-marker,
.article-body zd-accordion.wysiwyg-disclosure > details > summary::marker {
    display: none;
    content: "";
}

.article-body zd-accordion.wysiwyg-disclosure > details > summary:focus-visible {
    outline: 2px solid var(--color-purple-500);
    outline-offset: 4px;
}

/* Chevron (closed) — same glyph as ul.accordion > li > div:nth-child(1)::after */
.article-body zd-accordion.wysiwyg-disclosure > details > summary::after {
    content: "";
    display: block;
    flex: 0 0 23px;
    width: 23px;
    height: 7px;
    margin: 0;
    padding: 0;
    border: none;
    transform: none;
    transition: none;
    -webkit-mask: none;
    mask: none;
    background: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.7201 6.78017C6.57958 6.92086 6.38894 6.99999 6.1901 7.00017H5.8101C5.61168 6.99786 5.42182 6.91905 5.2801 6.78017L0.150096 1.64017C0.0554401 1.54628 0.00219727 1.41848 0.00219727 1.28517C0.00219727 1.15185 0.0554401 1.02405 0.150096 0.930165L0.860096 0.220165C0.95226 0.126101 1.07841 0.0730934 1.2101 0.0730934C1.34179 0.0730934 1.46793 0.126101 1.5601 0.220165L6.0001 4.67017L10.4401 0.220165C10.534 0.125509 10.6618 0.0722656 10.7951 0.0722656C10.9284 0.0722656 11.0562 0.125509 11.1501 0.220165L11.8501 0.930165C11.9448 1.02405 11.998 1.15185 11.998 1.28517C11.998 1.41848 11.9448 1.54628 11.8501 1.64017L6.7201 6.78017Z' fill='%23505050'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Chevron (open) — same glyph as ul.accordion > li.open > div:nth-child(1)::after */
.article-body zd-accordion.wysiwyg-disclosure > details[open] > summary::after {
    width: 23px;
    height: 25px;
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_839_11086)'%3E%3Cpath d='M11.28 8.22C11.4205 8.07931 11.6111 8.00018 11.81 8H12.19C12.3884 8.0023 12.5783 8.08112 12.72 8.22L17.85 13.36C17.9446 13.4539 17.9979 13.5817 17.9979 13.715C17.9979 13.8483 17.9446 13.9761 17.85 14.07L17.14 14.78C17.0478 14.8741 16.9217 14.9271 16.79 14.9271C16.6583 14.9271 16.5321 14.8741 16.44 14.78L12 10.33L7.55997 14.78C7.46609 14.8747 7.33829 14.9279 7.20497 14.9279C7.07166 14.9279 6.94386 14.8747 6.84997 14.78L6.14997 14.07C6.05532 13.9761 6.00208 13.8483 6.00208 13.715C6.00208 13.5817 6.05532 13.4539 6.14997 13.36L11.28 8.22Z' fill='%23333333'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_839_11086'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.article-body zd-accordion.wysiwyg-disclosure > details > .wysiwyg-disclosure-content {
    padding-top: var(--spacing-3x);
    font-family: var(--font-family-regular);
    font-size: var(--font-size-3x, 16px);
    line-height: var(--font-height-normal, 150%);
    color: var(--color-content-primary);
}

/* Numbered variant: add class="numbered" to <zd-accordion> in the source
   (was ul.accordion.numbered) */
.article-body zd-accordion.wysiwyg-disclosure.numbered {
    counter-reset: accordion-counter;
}

.article-body zd-accordion.wysiwyg-disclosure.numbered > details {
    counter-increment: accordion-counter;
}

.article-body zd-accordion.wysiwyg-disclosure.numbered > details > summary::before {
    content: counter(accordion-counter) ". ";
    white-space: pre;
    margin-right: -0.5em;
}

/* === Native Tabs ======================================================== */

.article-body zd-tabs {
    display: block;
    margin-bottom: 40px;
}

.article-body zd-tabs > .wysiwyg-tabs {
    display: block;
}

.article-body zd-tabs details {
    margin: 0;
    padding: 0;
    border: none;
}

/* Tab strip — mirrors div.tab-module-article > nav > ul.tabs */
.article-body zd-tabs [role="tablist"] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--spacing-5x);
    margin: 0 0 40px;
    padding: var(--spacing-3x) 0 0;
    list-style: none;
    border-bottom: none;
    background: transparent;
}

/* Individual tab — mirrors .tabs > li > a + .menuanimate.
   Selectors must beat Zendesk's
   `.wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab { color: inherit }`. */
.article-body zd-tabs .wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab,
.article-body zd-tabs [role="tab"] {
    display: flex;
    padding: var(--spacing-3x) 0 var(--spacing-2x);
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: var(--font-family-regular);
    font-size: var(--font-size-3x, 16px);
    font-weight: var(--font-weight-neutral, 400);
    line-height: var(--font-height-normal, 150%);
    text-transform: capitalize;
    color: var(--color-content-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: border-bottom 300ms linear, color 0.1s ease-in-out;
}

.article-body zd-tabs .wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab:hover,
.article-body zd-tabs .wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab[aria-selected="true"],
.article-body zd-tabs [role="tab"]:hover,
.article-body zd-tabs [role="tab"][aria-selected="true"] {
    color: var(--color-content-primary);
    border-bottom-color: var(--color-purple-500);
}

/* Match the old "hover another tab dims the selected underline" behaviour */
.article-body zd-tabs [role="tablist"]:hover [role="tab"][aria-selected="true"]:not(:hover) {
    border-bottom-color: transparent;
}

.article-body zd-tabs [role="tab"]:focus-visible {
    outline: 2px solid var(--color-purple-500);
    outline-offset: 2px;
}

/* Panel content — mirrors div.tab-module-article p / h3 */
.article-body zd-tabs [role="tabpanel"],
.article-body zd-tabs .wysiwyg-disclosure-content {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-3x, 16px);
    line-height: var(--font-height-normal, 150%);
    color: var(--color-content-primary);
}

.article-body zd-tabs [role="tabpanel"] p,
.article-body zd-tabs .wysiwyg-disclosure-content p {
    font-weight: var(--font-weight-neutral, 400);
    font-size: var(--font-size-3x, 16px);
    line-height: var(--font-height-normal, 150%);
}

.article-body zd-tabs [role="tabpanel"] h3,
.article-body zd-tabs .wysiwyg-disclosure-content h3 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--font-weight-bulky, 700);
    font-size: var(--font-size-3x, 16px);
    line-height: 125%;
}

/* Tabs: mobile — stacked strip (native tabs cannot recreate the JS dropdown) */
@media (max-width: 766px) {
    .article-body zd-tabs [role="tablist"] {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        margin: 0 0 40px;
        padding: 0;
        border: 1px solid var(--color-border-tertiary);
        border-radius: 6px;
        background: var(--color-always-white);
    }

    .article-body zd-tabs .wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab,
    .article-body zd-tabs [role="tab"] {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 10px 16px;
        border-bottom: none;
        border-radius: 6px;
        transition: none;
    }

    .article-body zd-tabs .wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab:hover,
    .article-body zd-tabs [role="tab"]:hover {
        background: var(--color-interactive-tertiary-hover);
        color: var(--color-content-primary);
        border-bottom-color: transparent;
    }

    .article-body zd-tabs .wysiwyg-tabs-active > .wysiwyg-tabs-bar > .wysiwyg-tabs-tab[aria-selected="true"],
    .article-body zd-tabs [role="tab"][aria-selected="true"] {
        color: var(--color-content-primary);
        border-bottom-color: transparent;
        font-weight: var(--font-weight-median, 600);
    }

    .article-body zd-tabs [role="tablist"]:hover [role="tab"][aria-selected="true"]:not(:hover) {
        border-bottom-color: transparent;
    }
}