/*
 * Communityline Portal - header account area: the highlighted "Log in" button,
 * its learning-hub panel and the hub pick list (also used by the phone menu and
 * the "choose your hub" sign-up page, /register). Loaded after clp-modern.css.
 */

/* ---- Account button ---- */
.clp-account { position: relative; display: flex; align-items: center; flex-shrink: 0; margin-left: 8px; }
.clp-account-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 18px;
    border: 0; border-radius: 999px;
    background: var(--clp-primary, #16307a); color: #fff !important;
    font-size: 14.5px; font-weight: 700; line-height: 1; white-space: nowrap;
    text-decoration: none !important; cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(22, 48, 122, .6), inset 0 -2px 0 rgba(0, 0, 0, .14);
    transition: background-color .15s, transform .15s, box-shadow .15s;
}
.clp-account-btn:hover { background: var(--clp-primary-dark, #0f2257); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(22, 48, 122, .7); }
.clp-account-btn:focus-visible { outline: 3px solid var(--clp-accent, #f4ce0a); outline-offset: 2px; }
.clp-account-btn .la { font-size: 18px; }
.clp-account-btn .clp-account-caret { font-size: 12px; transition: transform .15s; }
.clp-account-btn[aria-expanded="true"] .clp-account-caret { transform: rotate(180deg); }

/* ---- Learning-hub panel ---- */
.clp-login-panel {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 1060;
    width: 390px; max-width: calc(100vw - 24px);
    padding: 20px;
    border: 1px solid var(--clp-border, #eaecf0); border-radius: 18px;
    background: #fff; color: var(--clp-ink, #101828);
    box-shadow: 0 28px 64px -20px rgba(16, 24, 40, .38);
    text-align: left;
}
.clp-login-panel[hidden] { display: none; }
.clp-login-panel.is-docked { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; overflow-y: auto; }
.clp-login-kicker { margin: 0 0 4px; color: var(--clp-muted, #667085); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.clp-login-title { margin: 0 0 14px; color: var(--clp-ink, #101828); font-size: 18px; font-weight: 800; line-height: 1.3; }
.clp-login-staff {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--clp-border, #eaecf0);
    color: var(--clp-muted, #667085) !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.clp-login-staff .la { font-size: 17px; }
.clp-login-staff:hover { color: var(--clp-primary, #16307a) !important; }

/* ---- Hub pick list ---- */
.clp-hubpick { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.clp-hubpick > li { overflow: hidden; border: 1px solid var(--clp-border, #eaecf0); border-radius: 14px; background: #fff; }
.clp-hubpick__main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--clp-ink, #101828) !important; text-decoration: none !important; transition: background-color .15s; }
.clp-hubpick__main:hover, .clp-hubpick__main:focus-visible { background: var(--clp-soft, #f8f9fb); }
.clp-hubpick__main:focus-visible { outline: 3px solid var(--clp-primary, #16307a); outline-offset: -3px; }
.clp-hubpick__main img, .clp-hubpick__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; }
.clp-hubpick__icon { display: grid; place-items: center; background: var(--clp-soft, #f8f9fb); color: var(--clp-primary, #16307a); font-size: 22px; }
.clp-hubpick__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; }
.clp-hubpick__text strong { font-size: 15px; font-weight: 800; }
.clp-hubpick__text span { color: var(--clp-muted, #667085); font-size: 12.5px; }
.clp-hubpick__text small { margin-top: 3px; color: var(--clp-muted, #667085); font-size: 12.5px; font-style: italic; }
.clp-hubpick__go { flex: none; color: var(--clp-primary, #16307a); font-size: 13px; font-weight: 800; white-space: nowrap; }
.clp-hubpick__alt {
    display: block; padding: 9px 14px;
    border-top: 1px solid var(--clp-border, #eaecf0); background: var(--clp-soft, #f8f9fb);
    color: var(--clp-primary, #16307a) !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important;
}
.clp-hubpick__alt:hover { text-decoration: underline !important; }

/* ---- "Choose your learning hub" sign-up page (/register) ---- */
.clp-hubchoose { max-width: 660px; margin: 0 auto; }
.clp-hubchoose .clp-hubpick { gap: 14px; }
.clp-hubchoose .clp-hubpick__main { padding: 16px 18px; }
.clp-hubchoose .clp-hubpick__main img, .clp-hubchoose .clp-hubpick__icon { width: 52px; height: 52px; }
.clp-hubchoose .clp-hubpick__text strong { font-size: 17px; }
.clp-hubchoose__foot { margin: 24px 0 0; color: var(--clp-muted, #667085); font-size: 14px; line-height: 1.8; text-align: center; }

/* ---- Phone menu ---- */
.clp-offcanvas-account { padding: 4px 24px 14px; }
.clp-offcanvas-account__title { margin: 0 0 10px; color: var(--clp-ink, #101828); font-size: 15px; font-weight: 800; }
.clp-offcanvas-account > .clp-account-btn { width: 100%; justify-content: center; }

/* ---- Dark theme ---- */
.dark-theme .clp-account-btn { background: #2f52c4; }
.dark-theme .clp-account-btn:hover { background: #3c61d6; }
.dark-theme .clp-login-panel,
.dark-theme .clp-hubpick > li { border-color: rgba(255, 255, 255, .12); background: #1f1f24; }
.dark-theme .clp-hubpick__main img { background: #fff; }
.dark-theme .clp-hubpick__main:hover, .dark-theme .clp-hubpick__main:focus-visible { background: #27272e; }
.dark-theme .clp-hubpick__alt { border-color: rgba(255, 255, 255, .12); background: #26262c; color: #8ab4ec !important; }
.dark-theme .clp-hubpick__go, .dark-theme .clp-login-staff:hover { color: #8ab4ec !important; }
.dark-theme .clp-hubpick__icon { background: #26262c; color: #8ab4ec; }

/* ---- Widths ---- */
/* Mid-desktop: the full menu is tight here, so the button drops its caret and padding. */
@media (min-width: 1200px) and (max-width: 1440px) {
    .clp-account { margin-left: 4px; }
    .clp-account-btn { height: 40px; padding: 0 14px; gap: 6px; font-size: 14px; }
    .clp-account-btn .clp-account-caret { display: none; }
}
@media (max-width: 1199px) {
    .clp-account { margin-left: 0; }
    .clp-account-btn { height: 38px; padding: 0 14px; gap: 6px; font-size: 13.5px; }
}
/* Phones: icon-only button; the label stays for screen readers. */
@media (max-width: 575px) {
    .clp-account > .clp-account-btn,
    .clp-login > .clp-account-btn { width: 38px; padding: 0; justify-content: center; }
    .clp-account > .clp-account-btn span,
    .clp-login > .clp-account-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .clp-login > .clp-account-btn .clp-account-caret { display: none; }
}