/*
 * Per-item menu label styles (website builder Menu tab -> "Label style").
 * Tokens live in OrgWebsiteNav.css_class as wbn-{group}-{value} and land on
 * the rendered link / dropdown row, so the same rules style the org site
 * header, the community takeover header, mobile menus and the builder's
 * live preview chip. See OrgWebsiteNav::getLabelStyleOptions().
 */

/* Trailing icon - sized in em so it always matches the label it follows. */
.wbn-after-icon {
    font-size: 0.72em;
    margin-left: 0.4em;
    vertical-align: 0.08em;
    opacity: 0.85;
    color: currentColor;
    transition: transform 0.18s ease;
}

a:hover > .wbn-after-icon,
a:hover .wbn-after-icon,
a:focus-visible .wbn-after-icon {
    transform: translateX(2px);
}

.wbn-after-caret .wbn-after-icon,
.wbn-after-chevrondown .wbn-after-icon,
.wbn-after-arrowdown .wbn-after-icon,
.wbn-after-trend .wbn-after-icon,
.wbn-after-squarearrow .wbn-after-icon,
.wbn-after-plus .wbn-after-icon,
.wbn-after-star .wbn-after-icon,
.wbn-after-heart .wbn-after-icon {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .wbn-after-icon {
        transition: none;
    }
    a:hover .wbn-after-icon {
        transform: none;
    }
}

/* Weight */
.wbn-weight-medium,
.wbn-weight-medium .website-dd-label,
.wbn-weight-medium .wh-dd-label {
    font-weight: 500 !important;
}

.wbn-weight-bold,
.wbn-weight-bold .website-dd-label,
.wbn-weight-bold .wh-dd-label {
    font-weight: 700 !important;
}

/* The rich-dropdown description line keeps its own weight / style - the
   tokens sit on the whole row link, but only the label should change. */
.wbn-weight-medium .website-dd-desc,
.wbn-weight-medium .wh-dd-desc,
.wbn-weight-bold .website-dd-desc,
.wbn-weight-bold .wh-dd-desc,
.wbn-weight-medium .mobile-nav-subitem-desc,
.wbn-weight-bold .mobile-nav-subitem-desc {
    font-weight: 400 !important;
}

.wbn-italic-on .website-dd-desc,
.wbn-italic-on .wh-dd-desc,
.wbn-italic-on .mobile-nav-subitem-desc {
    font-style: normal;
}

/* Letter case */
.wbn-case-upper {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wbn-case-smallcaps {
    font-variant: small-caps;
    letter-spacing: 0.03em;
}

/* The description line under a rich dropdown label keeps its own case. */
.wbn-case-upper .website-dd-desc,
.wbn-case-upper .wh-dd-desc,
.wbn-case-upper .mobile-nav-subitem-desc,
.wbn-case-smallcaps .website-dd-desc,
.wbn-case-smallcaps .wh-dd-desc,
.wbn-case-smallcaps .mobile-nav-subitem-desc {
    text-transform: none;
    font-variant: normal;
    letter-spacing: normal;
}

/* Size */
.wbn-size-sm {
    font-size: 0.9em;
}

.wbn-size-lg {
    font-size: 1.1em;
}

/* Color */
.wbn-color-primary,
.wbn-color-primary .website-dd-label,
.wbn-color-primary .wh-dd-label {
    color: var(--website-primary, var(--color-primary-600, var(--bs-primary))) !important;
}

.wbn-color-accent,
.wbn-color-accent .website-dd-label,
.wbn-color-accent .wh-dd-label {
    color: var(--website-secondary, var(--color-secondary-500, var(--bs-secondary))) !important;
}

.wbn-color-muted,
.wbn-color-muted .website-dd-label,
.wbn-color-muted .wh-dd-label {
    color: var(--text-muted, var(--bs-secondary-color)) !important;
}

/* The description line keeps its own muted color under a color token. */
.wbn-color-primary .website-dd-desc,
.wbn-color-accent .website-dd-desc,
.wbn-color-primary .wh-dd-desc,
.wbn-color-accent .wh-dd-desc {
    color: var(--website-dropdown-desc-color, var(--text-secondary)) !important;
}

/* Italic */
.wbn-italic-on,
.wbn-italic-on .website-dd-label,
.wbn-italic-on .wh-dd-label {
    font-style: italic;
}

/* Highlight */
.wbn-highlight-underline {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.2s ease;
}

.wbn-highlight-underline:hover,
.wbn-highlight-underline:focus-visible {
    background-size: 100% 1px;
}

.wbn-highlight-pill {
    border-radius: 999px;
    padding-left: 0.85em !important;
    padding-right: 0.85em !important;
    background-color: color-mix(in srgb, var(--website-primary, var(--color-primary-600, #3b6b52)) 12%, transparent);
}

.wbn-highlight-pill:hover,
.wbn-highlight-pill:focus-visible {
    background-color: color-mix(in srgb, var(--website-primary, var(--color-primary-600, #3b6b52)) 20%, transparent);
}

/* Link: the label reads like an inline text link - site link color, always
   underlined, hover color + thicker underline. A row that carries a
   description line underlines only its label span (an underline set on the
   whole link would propagate into the description and can't be undone
   there); icons are inline-block, so the underline never runs under them. */
.wbn-highlight-link,
.wbn-highlight-link .website-dd-label,
.wbn-highlight-link .wh-dd-label {
    color: var(--website-link-color, var(--website-primary, var(--color-primary-600, var(--bs-link-color)))) !important;
}

.wbn-highlight-link:not(:has(.website-dd-desc, .wh-dd-desc, .mobile-nav-subitem-desc)),
.wbn-highlight-link .website-dd-label,
.wbn-highlight-link .wh-dd-label,
.wbn-highlight-link .mobile-nav-label,
.wbn-highlight-link .mobile-nav-subitem-label {
    text-decoration: underline !important;
    text-decoration-color: var(--website-link-decoration-color, currentColor);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}

.wbn-highlight-link:hover,
.wbn-highlight-link:focus-visible,
.wbn-highlight-link:hover .website-dd-label,
.wbn-highlight-link:hover .wh-dd-label {
    color: var(--website-link-hover-color, var(--website-link-color, var(--website-primary, var(--color-primary-700, var(--bs-link-hover-color))))) !important;
}

.wbn-highlight-link:hover:not(:has(.website-dd-desc, .wh-dd-desc, .mobile-nav-subitem-desc)),
.wbn-highlight-link:hover .website-dd-label,
.wbn-highlight-link:hover .wh-dd-label,
.wbn-highlight-link:hover .mobile-nav-label,
.wbn-highlight-link:hover .mobile-nav-subitem-label {
    text-decoration-thickness: 2px;
}

.wbn-highlight-link .website-dd-desc,
.wbn-highlight-link .wh-dd-desc,
.wbn-highlight-link .mobile-nav-subitem-desc {
    text-decoration: none !important;
    color: var(--website-dropdown-desc-color, var(--text-secondary)) !important;
}

/* The trailing icon sits outside the underline. */
.wbn-highlight-link .wbn-after-icon {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .wbn-highlight-link,
    .wbn-highlight-link .website-dd-label,
    .wbn-highlight-link .wh-dd-label {
        transition: none;
    }
    .wbn-highlight-underline {
        transition: none;
    }
}

/* Builder: live preview chip + option pills (Menu tab edit row / add form). */
.wbn-style-panel {
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.wbn-style-panel > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wbn-style-panel > summary::-webkit-details-marker {
    display: none;
}

.wbn-style-panel > summary .wbn-caret {
    transition: transform 0.15s ease;
    font-size: 0.7rem;
}

.wbn-style-panel[open] > summary .wbn-caret {
    transform: rotate(90deg);
}

.wbn-preview {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, inherit);
    font-size: 0.95rem;
    text-decoration: none;
}

.wbn-preview .wbn-preview-lead {
    margin-right: 0.4em;
}

.wbn-style-group .btn {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

/* The chip sets its own base size, so mirror the Size tokens on it. */
.wbn-preview.wbn-size-sm {
    font-size: 0.855rem;
}

.wbn-preview.wbn-size-lg {
    font-size: 1.045rem;
}