/* Public website controls. Loaded after the legacy information-page theme.
 * The scoped !important declarations replace that theme's important geometry
 * and states without changing controls inside the authenticated application.
 * Keep component layout in chloe-public.css / chloe-info.css.
 */
html body:is(.public-site, .chloe-info-page) :is(.public-button, .nav-portal, .info-home, .info-tabs a, .contact-action, .contact-submit, .public-menu-button, .text-link) {
    --public-control-bg: #FFFFFF;
    --public-control-hover: #F3F7FF;
    --public-control-active: #E8EFFF;
    --public-control-border: #9ABCF8;
    --public-control-ink: #030E35;
    box-sizing: border-box;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    min-height: 46px !important;
    height: auto !important;
    align-items: center;
    justify-content: center;
    gap: 9px !important;
    padding: 11px 20px !important;
    border: 1px solid var(--public-control-border) !important;
    border-radius: 8px !important;
    background: var(--public-control-bg) !important;
    color: var(--public-control-ink) !important;
    font-family: var(--font-chloe-text, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    overflow: visible;
    box-shadow: var(--public-control-shadow, 0 2px 6px rgba(3, 14, 53, .07)) !important;
    outline: 3px solid transparent !important;
    outline-offset: 3px !important;
    transform: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

html body:is(.public-site, .chloe-info-page) :is(.public-button-primary, .public-button-dark, .nav-portal, .contact-action, .contact-submit, .info-tabs a[aria-current="page"]) {
    --public-control-bg: #495BD6;
    --public-control-hover: #3D4FC4;
    --public-control-active: #3445B2;
    --public-control-border: #495BD6;
    --public-control-ink: #FFFFFF;
}

html body:is(.public-site, .chloe-info-page) :is(.public-button, .nav-portal, .info-home, .info-tabs a, .contact-action, .contact-submit, .public-menu-button, .text-link):hover:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
    border-color: var(--public-control-hover-border, #495BD6) !important;
    background: var(--public-control-hover) !important;
    color: var(--public-control-ink) !important;
    box-shadow: var(--public-control-shadow-hover, 0 3px 9px rgba(3, 14, 53, .12)) !important;
    transform: none !important;
}

html body:is(.public-site, .chloe-info-page) :is(.public-button, .nav-portal, .info-home, .info-tabs a, .contact-action, .contact-submit, .public-menu-button, .text-link):active:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
    background: var(--public-control-active) !important;
    color: var(--public-control-ink) !important;
    box-shadow: var(--public-control-shadow-active, inset 0 1px 2px rgba(3, 14, 53, .12)) !important;
    transform: none !important;
}

html body:is(.public-site, .chloe-info-page) :is(a, button):focus-visible {
    outline: 3px solid #495BD6 !important;
    outline-offset: 3px !important;
}

html body:is(.public-site, .chloe-info-page) :is(.public-button, .nav-portal, .info-home, .info-tabs a, .contact-action, .contact-submit, .public-menu-button, .text-link):is(:disabled, [aria-disabled="true"]) {
    border-color: #CDD5E5 !important;
    background: #E9EDF5 !important;
    color: #596278 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

html body:is(.public-site, .chloe-info-page) :is(.public-button, .nav-portal, .contact-action, .contact-submit, .text-link) svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    color: currentColor !important;
    transform: none !important;
}

html body.public-site a.nav-portal { flex: 0 0 auto; white-space: nowrap; }
html body.public-site button.public-menu-button { display: none; width: 46px; flex: 0 0 46px; padding: 11px !important; }
html body.public-site a.text-link {
    --public-control-bg: transparent;
    --public-control-hover: transparent;
    --public-control-active: transparent;
    --public-control-border: transparent;
    --public-control-hover-border: transparent;
    --public-control-ink: #3D4FC4;
    --public-control-shadow: none;
    --public-control-shadow-hover: none;
    --public-control-shadow-active: none;
    justify-content: flex-start;
    padding: 11px 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #3D4FC4 !important;
    box-shadow: none !important;
}
html body.chloe-info-page .info-tabs a { padding-inline: 14px !important; }

@media (max-width: 980px) {
    html body.public-site button.public-menu-button { display: inline-flex; flex-direction: column; gap: 5px !important; }
    html body.public-site a.nav-portal { width: 100%; white-space: normal; }
}
@media (max-width: 720px) {
    html body.chloe-info-page .info-header { flex-wrap: wrap; gap: 12px; }
    html body.chloe-info-page .info-tabs { flex-wrap: wrap; overflow: visible; }
    html body.chloe-info-page .info-tabs a { flex: 1 1 calc(50% - 8px); }
}
@media (prefers-reduced-motion: reduce) {
    html body:is(.public-site, .chloe-info-page) :is(a, button) { transition: none !important; }
}