/* =========================================================================
 Theme tokens + dark mode (PORTAL ONLY). --bas-* stay stable in tokens.css;
 these portal-scoped rules flip the surface/text tokens under [data-theme=dark].
 nav-auth.css loads only on portal/auth pages, so this never touches marketing.
 ========================================================================= */
:root { color-scheme: light; --bas-on-dark: #fffdf4; --bas-pacific-ink: #0e3d4f; }
/* Form controls don't inherit font-family in Firefox/Safari — force it so every
   portal button/input/select/textarea uses the site font. Controls that need a
   specific face (e.g. monospace) set their own font-family and override this. */
button, input, select, textarea, optgroup { font-family: inherit; }
html[data-theme="dark"] {
 color-scheme: dark;
 --bas-cream: #0e3d4f; --bas-cream-2: #0c3644; --bas-white: #123f52; --bas-tint: #0e3d4f;
 --bas-ink-black: #f2f7f8; --bas-ink-strong: #cfdade; --bas-ink: #a7bac1; --bas-muted: #9aacb5;
 --bas-border: #1e5164; --bas-border-cool: #6690a3;
 --bas-pacific: #081f29; --bas-pacific-ink: #6bbfdb;
 --bas-amber-bg: rgba(252,211,77,0.16); --bas-amber-text: #f5d98a;
 /* Dark-mode WCAG AA text tokens: as TEXT on navy the fills are too dark, so text
    usages route through lighter *-text tokens (fills keep the dark tokens for white text). */
 --bas-orange-text: #ff8a7a; --bas-success-text: #34d399; --bas-danger-text: #ef8b8b;
 /* Was falling back to a LIGHT #f6f5f1 in dark mode (e.g. the notifications group
    header), leaving light text on a light strip. Give it a dark tone. */
 --bas-surface-2: #0c3644;
}
html[data-theme="dark"] body { background-color: var(--bas-cream); }

/* =========================================================================
   Portal toast notifications — site-wide styled confirmations (window.blcToast)
   ========================================================================= */
#blc-portal-toast-wrap {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 46px;
    max-width: min(520px, calc(100vw - 32px));
    pointer-events: none;
}
.blc-portal-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bas-white);
    color: var(--bas-ink-black,#132025);
    border: 1px solid var(--bas-border-cool,#d9dce2);
    border-left: 6px solid var(--bas-orange,#ff4532);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.22);
    font-size: 1.075rem;
    line-height: 1.5;
    animation: blc-portal-toast-in 0.3s cubic-bezier(.2, .8, .2, 1);
}
.blc-portal-toast-success { border-left-color: var(--bas-success,#059669); }
.blc-portal-toast-error   {
    /* Keep the readable card background + ink text from .blc-portal-toast (works
       in light and dark); signal "error" with the red border accent only, since
       --bas-danger text is unreadable on the dark-mode card. */
    border-color: rgba(179,45,46,0.35);
    border-left-color: var(--bas-danger,#b32d2e);
}
.blc-portal-toast-info    { border-left-color: var(--bas-orange,#ff4532); }
.blc-portal-toast-msg { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.blc-portal-toast-x {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--bas-muted);
    padding: 0 2px;
    margin: -2px -2px 0 0;
}
.blc-portal-toast-x:hover { color: var(--bas-ink-black,#132025); }
.blc-portal-toast-out { animation: blc-portal-toast-out 0.25s ease forwards; }
@keyframes blc-portal-toast-in {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes blc-portal-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-24px); }
}
@media (max-width: 600px) {
    #blc-portal-toast-wrap { max-width: calc(100vw - 24px); }
}

/* =========================================================================
   Nav Auth — injected into .wp-block-navigation__container
   ========================================================================= */

/* Plain-text nav link (Sign In, My Account, Sign Out) */
.blc-nav-auth-link {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: block;
}

/* Header "Sign In" button — matches the marketing header CTA (International Orange). */
.blc-nav-auth-btn {
    background-color: var(--bas-orange,#ff4532) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 9px;
    padding: 0.55rem 1.15rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
    display: block;
}

.blc-nav-auth-btn:hover {
    background-color: var(--bas-orange-dark,#e63321) !important;
    color: #ffffff !important;
}

/* On /login and /signup the auth form is already on the page, so the header's
   Sign In button is redundant — hide it (desktop + mobile). */
body.blc-auth-page .blc-nav-auth-btn,
body.blc-auth-page #blc-mobile-signin { display: none !important; }

/* Switch link inside modal */
.blc-nav-auth-switch {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: var(--bas-ink-black,#132025);
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

/* =========================================================================
   Nav auth modal overlay
   ========================================================================= */

#blc-nav-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    /* A taller card (e.g. the account-setup wizard) keeps a gap top + bottom and
       scrolls the overlay instead of clipping against the window edges. */
    padding: 2rem 1rem;
    overflow-y: auto;
}

#blc-nav-modal-overlay.blc-nav-modal-open {
    display: flex;
}

/* =========================================================================
   Modal card — same visual as request-frontend.css .blc-modal
   ========================================================================= */

#blc-nav-modal-overlay .blc-modal {
    background: var(--bas-white);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    /* Centre when it fits; margin:auto (not align-items) so a tall card scrolls
       inside the overlay instead of clipping past the top edge. */
    margin: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
    font-family: inherit;
    /* Base text colour so labels + inherited text follow the theme (dark box in
       dark mode would otherwise show black inherited text). */
    color: var(--bas-ink-strong,#3c434a);
}
#blc-nav-modal-overlay .blc-modal-label { color: var(--bas-ink-black,#132025); }

#blc-nav-modal-overlay .blc-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--bas-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

#blc-nav-modal-overlay .blc-modal-close:hover { color: var(--bas-ink-strong); }

#blc-nav-modal-overlay .blc-modal-icon   { margin-bottom: 1rem; }

#blc-nav-modal-overlay .blc-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bas-ink-black,#132025);
    margin: 0 0 0.5rem 0;
}

#blc-nav-modal-overlay .blc-modal-desc {
    font-size: 0.95rem;
    color: var(--bas-muted);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

#blc-nav-modal-overlay .blc-modal-field {
    text-align: left;
    margin-bottom: 1rem;
}

#blc-nav-modal-overlay .blc-modal-input {
    background: var(--ui-surface,#fff);
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ui-border-strong,#828a93);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    color: var(--ui-text,#132025);
    box-sizing: border-box;
}

#blc-nav-modal-overlay .blc-modal-input:focus {
    border-color: var(--ui-focus-ring,#0e3d4f);
    box-shadow: 0 0 0 2px var(--ui-focus-ring,#0e3d4f);
}

/* Autofill fix: browsers repaint an autofilled input (saved email/password) with
   their own light background, which hides the light dark-mode text. Force the
   theme's surface via the inset box-shadow trick and set the fill colour to the
   theme ink so autofilled logins stay readable in both themes. */
#blc-nav-modal-overlay .blc-modal-input:-webkit-autofill,
#blc-nav-modal-overlay .blc-modal-input:-webkit-autofill:hover,
#blc-nav-modal-overlay .blc-modal-input:-webkit-autofill:focus,
.blc-acct-input:-webkit-autofill,
.blc-acct-input:-webkit-autofill:hover,
.blc-acct-input:-webkit-autofill:focus,
.blc-req-gate input:-webkit-autofill,
.blc-req-gate input:-webkit-autofill:hover,
.blc-req-gate input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ui-text,#132025);
    -webkit-box-shadow: 0 0 0 100px var(--ui-surface,#fff) inset;
    box-shadow: 0 0 0 100px var(--ui-surface,#fff) inset;
    caret-color: var(--ui-text,#132025);
}

#blc-nav-modal-overlay .blc-modal-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background-color: var(--bas-orange,#ff4532);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s;
}

#blc-nav-modal-overlay .blc-modal-btn:hover    { background-color: var(--bas-orange-dark,#e63321); }
#blc-nav-modal-overlay .blc-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* SSO / social sign-in buttons — used in the sign-in modal, the onboarding
   set-password lightbox, and the /login gate form. */
.blc-sso-row { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.9rem 0 0.2rem; width: 100%; }
.blc-sso-sep { display: flex; align-items: center; gap: 0.6rem; color: var(--bas-muted); font-size: 0.78rem; margin-bottom: 0.1rem; }
.blc-sso-sep::before, .blc-sso-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bas-border); }
.blc-sso-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.6rem 1rem; border: 1px solid var(--bas-border-cool,#d9dce2); border-radius: 9px; background: var(--bas-white); color: var(--bas-ink-black,#132025); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.blc-sso-btn:hover { background: var(--bas-cream-2); border-color: var(--bas-border-cool); color: var(--bas-ink-black,#132025); }
.blc-sso-btn svg { flex: 0 0 auto; }
.blc-sso-apple svg { color: var(--bas-ink-black,#132025); }

#blc-nav-modal-overlay .blc-modal-cancel {
    display: inline-block;
    margin-top: 0.75rem;
    background: none;
    border: none;
    color: var(--bas-muted);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}

#blc-nav-modal-overlay .blc-modal-cancel:hover { color: var(--bas-ink-strong); }

/* ── Account-setup wizard: method choice, profile photo, phone/SMS ── */
#blc-nav-modal-overlay .blc-setup-choices { margin: 0.4rem 0 0.9rem; }
#blc-nav-modal-overlay .blc-setup-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0 0 1rem; }
#blc-nav-modal-overlay .blc-setup-avatar {
    /* overflow stays visible so the "+" badge (positioned just outside the circle)
       isn't clipped; the uploaded photo is clipped to the circle on the img itself. */
    position: relative; width: 88px; height: 88px; border-radius: 50%; cursor: pointer;
    background: var(--bas-cream-2,#fbf8f0); border: 2px dashed var(--bas-border-cool,#d9dce2);
    display: flex; align-items: center; justify-content: center; overflow: visible;
}
#blc-nav-modal-overlay .blc-setup-avatar:hover { border-color: var(--bas-orange,#ff4532); }
#blc-nav-modal-overlay .blc-setup-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#blc-nav-modal-overlay .blc-setup-avatar-badge {
    position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--bas-pacific-ink,#0e3d4f); color: #fff; border: 2px solid var(--bas-white,#fff);
    display: flex; align-items: center; justify-content: center;
}
#blc-nav-modal-overlay .blc-setup-avatar-badge svg { width: 15px; height: 15px; }
#blc-nav-modal-overlay .blc-setup-avatar-hint { font-size: 0.78rem; color: var(--bas-muted,#8a8f98); }
#blc-nav-modal-overlay .blc-setup-sms {
    display: flex; align-items: flex-start; gap: 8px; text-align: left;
    font-size: 0.82rem; line-height: 1.5; color: var(--bas-ink-strong,#3c434a);
    margin: 0.6rem 0 0; cursor: pointer;
}
#blc-nav-modal-overlay .blc-setup-sms input { margin-top: 3px; flex: 0 0 auto; }

#blc-nav-modal-overlay .blc-modal-error {
    display: none;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(179,45,46,0.14);
    color: var(--bas-danger-text);
    border-radius: 8px;
    font-size: 0.85rem;
}

/* ── Profile menu (logged-in header) ─────────────────────────────────────── */
.blc-nav-dash,
.blc-nav-profile {
    position: relative;
    display: flex;
    align-items: center;
}

.blc-nav-dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    line-height: 0;
    text-decoration: none;
    transition: background 0.15s ease;
}

.blc-nav-dash-btn:hover { background: rgba(0, 0, 0, 0.08); }

/* Matches the marketing header's account icon (.site-account__btn): an
   International Orange rounded square with a white icon. */
.blc-nav-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: var(--bas-orange,#ff4532);
    color: #fff;
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s ease;
}
.blc-nav-profile-btn svg { width: 22px; height: 22px; }

.blc-nav-profile-btn:hover,
.blc-nav-profile-btn[aria-expanded="true"] {
    background: var(--bas-orange-dark,#e63321);
}

.blc-nav-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bas-white);
    border: 1px solid var(--bas-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    padding: 6px;
    z-index: 9999;
}

.blc-nav-profile-menu[hidden] { display: none; }

.blc-nav-profile-welcome {
    padding: 8px 12px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bas-ink-black,#132025);
    border-bottom: 1px solid var(--bas-border);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blc-nav-profile-code {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--bas-muted);
}

.blc-nav-profile-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 9px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--bas-ink-strong);
    text-decoration: none;
    cursor: pointer;
}

.blc-nav-profile-item:hover { background: var(--bas-cream-2); color: var(--bas-ink-black,#132025); }
/* bas-layout sets `.wp-block-navigation a{color:#132025!important}` for the header;
   that also hits these injected menu links (making them black on the dark menu). Beat
   it for the <a> items so their colour follows the theme token. (Sign Out is a button,
   untouched, so it keeps its red.) */
.blc-nav-profile-menu a.blc-nav-profile-item { color: var(--bas-ink-strong) !important; }
.blc-nav-profile-menu a.blc-nav-profile-item:hover { color: var(--bas-ink-black,#132025) !important; }

/* Theme control: a sectioned sliding toggle at the top of the profile menu. */
/* Theme segmented control (.ui-theme-seg) spacing inside the profile menu. */
.blc-nav-profile-menu .ui-theme-seg { margin: 2px 0 4px; }
.blc-nav-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--bas-ink-strong); }
.blc-nav-theme-row:hover { background: var(--bas-cream-2); }
.blc-nav-switch { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: var(--bas-border-cool,#cfd8dc); transition: background .18s ease; }
.blc-nav-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.blc-nav-switch.is-on { background: var(--bas-orange,#ff4532); }
.blc-nav-switch.is-on .blc-nav-switch-knob { transform: translateX(16px); }
.blc-nav-menu-sep { height: 1px; background: var(--bas-border); margin: 6px 4px; }

/* Grouped tools ("Tools" label + indented tool links) */
.blc-nav-profile-label {
    margin: 6px 4px 2px;
    padding: 6px 8px 2px;
    border-top: 1px solid var(--bas-border);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bas-muted);
}
.blc-nav-profile-sub { padding-left: 20px; }

.blc-nav-profile-signout { color: var(--bas-danger-text,#b32d2e); }
.blc-nav-profile-signout:hover { background: rgba(179,45,46,0.14); color: var(--bas-danger-text,#b32d2e); }

/* Primary "Start New Request" action at the top of the dropdown. */
.blc-nav-profile-cta {
    background: var(--bas-orange,#ff4532);
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}
.blc-nav-profile-cta:hover { background: var(--bas-orange-dark,#e63321); color: #fff; }

/* ── Shared portal action button ──────────────────────────────────────────
   One source of truth for standalone action buttons across the whole portal
   (dashboard, plan, my-account, and blocks). nav-auth.css loads on every
   front-end page, so this is always available. Menu ROWS use
   .blc-nav-profile-item, not this — those are a different pattern. */
.blc-btn {
    display: inline-block;
    align-self: flex-start;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s, color .15s, border-color .15s;
}
.blc-btn-primary { background: var(--bas-orange-btn,#cc3624); color: #fff; border-color: var(--bas-orange-btn,#cc3624); }
.blc-btn-primary:hover { background: var(--bas-orange-btn-hover,#b02f1e); color: #fff; border-color: var(--bas-orange-btn-hover,#b02f1e); }
.blc-btn-secondary { background: var(--bas-white); color: var(--bas-ink-black,#132025); border-color: var(--bas-ink-black,#132025); }
.blc-btn-secondary:hover { background: var(--bas-ink-black,#132025); color: var(--bas-white); }
.blc-btn-danger { background: var(--bas-danger,#b32d2e); color: #fff; border-color: var(--bas-danger,#b32d2e); }
.blc-btn-danger:hover { background: #8f2424; color: #fff; }
/* Hero "Teammates" action: icon + label aligned (shown inline-flex by JS). */
.blc-hero-teammates { align-items: center; gap: 6px; }
.blc-hero-teammates svg { flex: 0 0 auto; }
.blc-btn:disabled, .blc-btn[disabled] { opacity: 0.5; cursor: default; }

/* On logged-in app pages, nav-auth.js strips the marketing links and leaves
   just the request + profile icons. Hide those links from first paint too so they
   don't flash for a split second before the script runs. (Graceful no-op in
   browsers without :has — the JS still prunes them.) */
body.blc-app-nav .wp-block-navigation li:has(> a[href*="/how-it-works"]),
body.blc-app-nav .wp-block-navigation li:has(> a[href*="/pricing"]),
body.blc-app-nav .wp-block-navigation li:has(> a[href*="/contact"]) {
    display: none !important;
}

/* ── Wide content: match the header width on Dashboard + My Account ───────────
   Header is a 1140px constrained container with 1rem side padding; align the
   request box, request history, and account content to the same extent. */
:root { --blc-wide: 1140px; }

/* Portal content column: capped to --blc-wide (1140px) and centered, matching
   the header. The children are then forced to width:100% (below) so they fill
   this column instead of shrinking to their content — which was why /dashboard
   and /profile looked narrower than /plan. */
body.blc-wide-content .wp-block-post-content {
    /* post-content is a flex item in the theme's .wp-site-blocks column, so it
       shrinks to its content width unless stretched. width:100% (+ align-self)
       makes it fill to the 1140 cap on EVERY page — without this, pages with
       narrower content (dashboard/profile) collapsed while /plan filled it. */
    width: 100% !important;
    align-self: stretch !important;
    max-width: var(--blc-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box;
}

/* 75%-width pages (profile, plan, start-plan): a narrower centered content
   column than the full-width pages (dashboard, request, request-history). Placed after
   the rule above so it wins for pages carrying both classes. */
body.blc-content-75 .wp-block-post-content {
    width: 100% !important;
    align-self: stretch !important;
    max-width: calc(var(--blc-wide) * 0.75) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box;
}

/* Signup wizard: resize ONLY the intake form per step (Step 1/2/4 = 50%, Step 3 =
   75% of --blc-wide) — the page's full-width hero/content bands are left untouched,
   so backgrounds/heights match the other pages. The !important overrides the
   theme's is-layout-constrained cap so the form can exceed the content size on
   Step 3. The intake step JS toggles blc-signup-50 / blc-signup-75; the server sets
   blc-signup-50 up front to avoid a first-paint flash. */
body.blc-signup-50 .bas-intake { max-width: calc(var(--blc-wide) * 0.5) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box; }
body.blc-signup-75 .bas-intake { max-width: calc(var(--blc-wide) * 0.75) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box; }
body.blc-wide-content .wp-block-post-content > * {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* My Account: keep the full-width blue banners as backgrounds, but size the
   heading/description + white settings card to the content width and CENTER
   them on the page (card hugs its content — no big empty white area). */
body.blc-wide-content .wp-block-group.alignfull.is-layout-constrained > * {
    max-width: var(--blc-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Default card styling for the app pages: a consistent outline + shadow on
   every card (Dashboard Company Updates & Support, Request, Request History, and the
   My Account Settings card). Applied here in CSS because WordPress strips inline
   box-shadow from saved block markup (safecss_filter_attr). Targets the rounded
   cream card group that sits directly inside a full-bleed cream section — the
   shape produced by blc_app_card(), so new cards get it automatically. The
   .blc-card class is an explicit opt-in hook for any future card. */
.blc-card,
body.blc-wide-content .wp-block-group.alignfull.has-background > .wp-block-group.has-background {
    border: 1px solid var(--bas-border,#e7e4d8);
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.10);
    border-radius: 16px;
}

/* Dashboard cards: WordPress's global block-gap rule
   ( :root :where(.is-layout-flow) > * { margin-block-start: 1.5rem } )
   inserts an unsightly gap between a card's header and body — and above the
   first body element when a block leads with a <style> tag (e.g. Your Support
   Plan). Neutralize that gap INSIDE the dashboard cards only. Card-to-card
   spacing comes from the column/flex gap, not this margin, so it stays intact. */
.blc-dash-grid .wp-block-group.has-border-color > *,
.blc-dash-grid .wp-block-group.has-border-color .wp-block-group > * {
    margin-block-start: 0;
}
/* Account Settings content fills the centered card and is left-aligned.
   Every section is forced to full width so the short-form sections (Personal
   Info, Password, Language) don't collapse to their content width and get
   centered like the wider Two-Factor section. */
body.blc-wide-content #blc-account-app {
    align-items: stretch !important;
    text-align: left !important;
}
body.blc-wide-content #blc-account-app > *,
body.blc-wide-content #blc-account-app .blc-acct-form,
body.blc-wide-content #blc-account-app .blc-acct-field {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch !important;
    text-align: left !important;
    box-sizing: border-box;
}

/* Pin the app-page content bodies to the shared wide width so /request and
   /dashboard fill the same extent as the /plan card (whose card already spans
   --blc-wide). Targets the inner containers directly, so they match regardless
   of the group's inline contentSize. */
body.blc-wide-content [data-blc-req],
body.blc-wide-content .blc-dash-grid {
    max-width: var(--blc-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Clean portal content ────────────────────────────────────────────────────
   Portal pages now emit flat, hand-authored markup (.blc-phero + .blc-card) as
   direct children of wp:post-content instead of nested WP group wrappers, so
   every page shares one content width and the DOM stays clean. The cream page
   background sits behind the dark header + pacific footer. */
body.blc-wide-content { background-color: var(--bas-cream,#fffdf4); }
body.blc-wide-content .wp-block-post-content { padding-bottom: 3rem !important; }

/* "Back to Dashboard" — an outlined pill button above the hero on portal
   sub-pages. The .blc-backrow <div> wrapper is what the page markup emits (it
   stops wpautop from <p>-wrapping the link); the pill hugs its content inside.
   Light on the cream page by default; fills pacific on hover. */
.blc-backrow { margin: 1.75rem 0 0; }
.blc-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    color: var(--bas-pacific-ink);
    background: var(--bas-white);
    border: 1px solid var(--bas-border,#e7e4d8);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Left arrow, drawn in CSS because kses strips inline <svg> from saved page
   content. currentColor keeps it in step with the text (pacific → cream). */
.blc-back::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .15s ease;
}
.blc-back:hover {
    background: var(--bas-pacific,#0e3d4f);
    color: var(--bas-on-dark);
    border-color: var(--bas-pacific,#0e3d4f);
    box-shadow: 0 2px 8px rgba(14, 61, 79, 0.18);
}
.blc-back:hover::before { transform: translateX(-2px); }
.blc-back:focus-visible { outline: 2px solid var(--bas-pacific-ink); outline-offset: 2px; }
/* When the back row precedes the hero, tighten the hero's top padding. */
.blc-backrow + .blc-phero { padding-top: 1rem; }

/* Breadcrumbs — same pill as .blc-back. First crumb = the Dashboard hero icon
   (home); last crumb = the current page as a filled "you are here" pill. The
   row reuses .blc-backrow (margin + hero spacing). */
.blc-crumbs { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.blc-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    color: var(--bas-pacific-ink);
    background: var(--bas-white);
    border: 1px solid var(--bas-border,#e7e4d8);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.blc-crumb:hover {
    background: var(--bas-pacific,#0e3d4f);
    color: var(--bas-on-dark);
    border-color: var(--bas-pacific,#0e3d4f);
    box-shadow: 0 2px 8px rgba(14, 61, 79, 0.18);
}
a.blc-crumb:focus-visible { outline: 2px solid var(--bas-pacific-ink); outline-offset: 2px; }
.blc-crumb--home { padding: 0.45rem 0.7rem; }
.blc-crumb--home svg { width: 1.05rem; height: 1.05rem; display: block; }
/* Current page: a filled pill (matches the .blc-back hover colour), not a link. */
.blc-crumb--current {
    background: var(--bas-pacific,#0e3d4f);
    color: var(--bas-on-dark);
    border-color: var(--bas-pacific,#0e3d4f);
    cursor: default;
}
.blc-crumb-sep { color: var(--bas-muted); font-size: 1.05rem; line-height: 1; }

.blc-phero { text-align: center; padding: 3rem 0 0.5rem; }
/* Split hero: title + sub left, action (e.g. New support request) right, same row. */
.blc-phero--split { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; flex-wrap: wrap; }
.blc-phero--split .blc-phero__text { flex: 1 1 auto; }
.blc-phero--split .blc-phero__sub { margin-bottom: 0; }
.blc-phero--split .blc-phero__action { flex: 0 0 auto; }
.blc-phero--split .blc-phero__action .blc-btn { font-size: 1rem; padding: 0.75rem 1.4rem; }
@media (max-width: 640px) {
    .blc-phero--split { justify-content: flex-start; }
    .blc-phero--split .blc-phero__text { flex-basis: 100%; }
}
.blc-phero__title {
    margin: 0 0 0.5rem;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bas-ink-black,#132025);
    font-family: var(--wp--preset--font-family--prata-regular, "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.blc-phero__sub { margin: 0 0 1.5rem; font-size: 1.1rem; line-height: 1.6; color: var(--bas-ink-strong); }
/* Icon to the LEFT of a page title (Plan / Team & Devices / Billing) — matches the
   Settings-hub tile icon. */
.blc-phero__titlerow { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; }
.blc-phero__titlerow .blc-phero__title { margin: 0; }
.blc-phero__ico { flex: 0 0 auto; display: inline-flex; color: var(--ui-accent); }
.blc-phero__ico svg { width: 2.1rem; height: 2.1rem; display: block; }

.blc-card {
    background: var(--bas-white);
    border: 1px solid var(--bas-border,#e7e4d8);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.10);
    overflow: hidden;
    margin: 0 0 1.25rem;
}
/* Response-time asterisk note shown directly UNDER a portal content card (e.g. the
   /portal/settings/plan "Your plan" card), outside the card itself. */
.blc-plan-respfoot { margin: 0 0 1.25rem; padding: 0.5rem 0 0 1.5rem; font-size: 0.82rem; line-height: 1.5; color: var(--ui-text-muted); }
/* Gap below the hero: .blc-dash-grid / [data-blc-req] get a margin-block-start
   from WordPress's flow layout, giving /dashboard and /request a nice gap under the
   sub. A top-level .blc-card's margin shorthand zeroes its margin-top, so it
   loses that gap. Restore it here (only for cards that are a direct child of the
   content, so cards INSIDE the dashboard columns are untouched). */
body.blc-wide-content .wp-block-post-content > .blc-card { margin-top: 1.5rem; }
.blc-card--fill { display: flex; flex-direction: column; flex: 1 1 auto; }
.blc-card--fill .blc-card__body { flex: 1 1 auto; }
.blc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bas-pacific,#0e3d4f);
    color: var(--bas-on-dark);
    padding: 1rem 1.5rem;
}
/* Match the 34px title-button height so card headers are the same height whether
   or not a card has a title action (e.g. Your Profile / Useful Links have none). */
.blc-card__title { font-size: 1rem; font-weight: 500; min-height: 34px; display: inline-flex; align-items: center; }
/* Groups an optional lead icon (e.g. a tool's lottie) with the title, left-aligned. */
.blc-card__titlewrap { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.blc-card__body { padding: 1.5rem; }

/* ── Dark header on inner pages (every page except the homepage) ──────────────
   Full-width dark bar with cream text/logo. Homepage keeps the light header. */
body.blc-inner-header header.wp-block-template-part {
    background-color: var(--bas-pacific,#0e3d4f);
    border-bottom: 2px solid var(--bas-orange,#ff4532);
}
/* Bar contents → cream. Targets the site title, top-level nav links, and the
   injected request/profile icons — NOT the profile dropdown popover (kept light). */
body.blc-inner-header header .wp-block-site-title,
body.blc-inner-header header .wp-block-site-title a,
body.blc-inner-header header .wp-block-navigation__container > li > a,
body.blc-inner-header header .blc-nav-dash-btn,
body.blc-inner-header header .blc-nav-auth-link {
    color: var(--bas-on-dark) !important;
}
/* Profile icon keeps its orange-square look (white glyph) on the dark bar. */
body.blc-inner-header header .blc-nav-profile-btn {
    color: #fff !important;
}
/* Logged-out "Sign In" pill stays International Orange on the dark bar. */
body.blc-inner-header header .blc-nav-auth-btn {
    background-color: var(--bas-orange,#ff4532) !important;
    color: #ffffff !important;
}
/* Icon hover: light overlay (a dark hover is invisible on the dark bar). */
body.blc-inner-header header .blc-nav-dash-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}
/* Profile icon hover matches the marketing button: orange -> orange-dark. */
body.blc-inner-header header .blc-nav-profile-btn:hover,
body.blc-inner-header header .blc-nav-profile-btn[aria-expanded="true"] {
    background: var(--bas-orange-dark,#e63321) !important;
}

/* The uploaded logo is now pre-colored (orange Golden-Gate bridge + cream
   wordmark) for the dark inner-page header, so no whitening filter is applied. */

/* ─────────────────────────────────────────────────────────────────────────
   Responsive / mobile layer. The site had no @media rules; this is the
   baseline. Block columns already stack at ≤781px — these rules tune the
   type scale, section spacing, buttons, request UI, and auth controls so the
   marketing pages and the gated app pages (Dashboard / Request / Request History /
   My Account) read well on phones.
   ───────────────────────────────────────────────────────────────────────── */

/* Tablet / large phone. */
@media (max-width: 782px) {
    /* Nothing should force sideways scrolling. */
    html, body { overflow-x: hidden; }

    /* Headings scale down so long titles never overflow their container. */
    .wp-block-cover h1.wp-block-heading,
    h1.wp-block-heading { font-size: 2.3rem !important; line-height: 1.18 !important; }
    h2.wp-block-heading { font-size: 1.9rem !important; line-height: 1.22 !important; }
}

/* ── Custom mobile menu (drawer) ─────────────────────────────────────────────
   Desktop shows the normal nav; the toggle/drawer/backdrop are hidden. On mobile
   the WP nav is hidden and this drawer takes over. */
.blc-mobile-toggle,
.blc-mobile-backdrop,
.blc-mobile-drawer { display: none; }

/* Drawer internals (only ever visible on mobile). */
.blc-mobile-drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--bas-border);
    font-weight: 600; color: var(--bas-ink-black,#132025); font-size: 1rem;
}
.blc-mobile-welcome { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.blc-mobile-close {
    background: none; border: none; cursor: pointer; color: var(--bas-muted);
    padding: 4px; line-height: 0;
}
.blc-mobile-links { display: flex; flex-direction: column; padding: 0.5rem; gap: 2px; }
.blc-mobile-link {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 0.85rem 1rem; border-radius: 8px; text-decoration: none;
    color: var(--bas-ink-strong); font-size: 1rem; font-family: inherit;
    background: none; border: none; cursor: pointer;
}
.blc-mobile-link:hover { background: var(--bas-cream-2); color: var(--bas-ink-black,#132025); }
.blc-mobile-signout { color: var(--bas-danger-text,#b32d2e); }
.blc-mobile-signout:hover { background: rgba(179,45,46,0.14); color: var(--bas-danger-text,#b32d2e); }
.blc-mobile-cta { background: var(--bas-orange,#ff4532); color: #fff; font-weight: 600; text-align: center; margin-top: 4px; }
.blc-mobile-cta:hover { background: var(--bas-orange-dark,#e63321); color: #fff; }

@media (max-width: 781px) {
    /* Replace the theme's nav (invisible hamburger + empty overlay) with ours. */
    header .wp-block-navigation { display: none !important; }
    header.wp-block-template-part { position: relative; }

    /* Cream hamburger anchored to the right of the (dark) header bar. */
    .blc-mobile-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);
        width: 44px; height: 44px; padding: 0;
        background: none; border: none; cursor: pointer;
        color: var(--bas-ink-black,#132025); z-index: 100;
    }
    body.blc-inner-header .blc-mobile-toggle { color: var(--bas-on-dark); }

    .blc-mobile-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0; visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 100000;
    }
    .blc-mobile-backdrop.open { opacity: 1; visibility: visible; }

    .blc-mobile-drawer {
        display: flex; flex-direction: column; overflow-y: auto;
        position: fixed; top: 0; right: 0; bottom: 0;
        width: 75%; max-width: 320px;
        background: var(--bas-white); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
        transform: translateX(100%); transition: transform 0.28s ease;
        z-index: 100001;
    }
    .blc-mobile-drawer.open { transform: translateX(0); }

    body.blc-mobile-lock { overflow: hidden; }

    /* Footer copyright ("© 2026 Island. All rights reserved.") centers on mobile
       when the footer columns stack. It's the only left-aligned footer text. */
    footer .has-text-align-left { text-align: center !important; }
}

/* ── Gated app pages: mobile layout tweaks (desktop untouched) ──────────────
   Scoped to body.blc-wide-content = Dashboard / Request / Request History / My Account / Manage Plan.
   Uses the 781px breakpoint so it lines up with WordPress's column stacking. */
@media (max-width: 781px) {
    /* Tighten the hero band's title/subtitle spacing on phones. */
    body.blc-wide-content .wp-block-group.alignfull[style*="padding-top:3rem"] {
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Dashboard 1:3 layout: when the columns stack, show the RIGHT column
       (Important Notices + Support) first, then the LEFT column (Useful Links).
       wrap-reverse flips which stacked line is on top without changing the
       columns' flex-basis, so the desktop side-by-side layout is unaffected. */
    body.blc-wide-content .wp-block-columns {
        flex-wrap: wrap-reverse !important;
    }
}

/* Phone. */
@media (max-width: 600px) {
    h1.wp-block-heading { font-size: 2rem !important; }
    h2.wp-block-heading { font-size: 1.55rem !important; }
    h3.wp-block-heading { font-size: 1.2rem !important; }

    /* Tall marketing sections (5rem top/bottom) tighten up on phones. */
    .wp-block-group[style*="padding-top:5rem"]    { padding-top: 3rem !important; }
    .wp-block-group[style*="padding-bottom:5rem"] { padding-bottom: 3rem !important; }

    /* Homepage hero: don't force a tall cover, and tighten the frosted card. */
    .wp-block-cover { min-height: auto !important; }
    .wp-block-cover .wp-block-group[style*="padding:2.75rem"] { padding: 1.5rem !important; }

    /* Stack call-to-action buttons full width so they're easy to tap. */
    .wp-block-buttons { flex-direction: column; align-items: stretch; }
    .wp-block-buttons > .wp-block-button { width: 100%; }
    .wp-block-buttons > .wp-block-button > .wp-block-button__link { display: block; text-align: center; }

    /* Request interface: tighter padding, wider bubbles, contained media. */
    .blc-req-messages { padding: 1.15rem !important; }
    .blc-msg { max-width: 90% !important; }
    .blc-msg-image, .blc-msg-file { max-width: min(240px, 68vw) !important; }

    /* Profile dropdown always fits the viewport. */
    .blc-nav-profile-menu { min-width: 210px; max-width: calc(100vw - 1.5rem); }

    /* Auth / payment modals get a little more room. */
    #blc-nav-modal-overlay .blc-modal { padding: 1.5rem; }
}

/* ── Notification bell (portal header) ───────────────────────────────────── */
.blc-nav-bell { position: relative; display: flex; align-items: center; }
.blc-nav-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; padding: 0; border: none; border-radius: 9px; background: rgba(0, 0, 0, 0.06); color: inherit; cursor: pointer; transition: background 0.15s; }
.blc-nav-bell-btn:hover, .blc-nav-bell-btn[aria-expanded="true"] { background: rgba(0, 0, 0, 0.12); }
.blc-nav-bell-btn svg { width: 22px; height: 22px; }
.blc-nav-bell-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.blc-nav-bell-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bas-orange,#ff4532); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; }
.blc-nav-bell-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; max-width: 88vw; background: var(--bas-white); border: 1px solid var(--bas-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(19, 32, 37, 0.16); z-index: 70; overflow: hidden; }
.blc-nav-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--bas-border); font-weight: 600; color: var(--bas-ink-black,#132025); font-size: 0.95rem; }
.blc-nav-bell-readall { background: none; border: 0; color: var(--bas-muted); font-size: 0.8rem; cursor: pointer; padding: 0; }
.blc-nav-bell-readall:hover { color: var(--bas-orange,#ff4532); }
.blc-nav-bell-list { max-height: min(60vh, 420px); overflow-y: auto; }
.blc-nav-bell-empty { margin: 0; padding: 1.5rem 1rem; text-align: center; color: var(--bas-muted); font-size: 0.88rem; }
.blc-nav-bell-item { display: flex; gap: 0.6rem; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--bas-border); padding: 0.7rem 0.9rem; cursor: pointer; font: inherit; }
.blc-nav-bell-item:last-child { border-bottom: 0; }
.blc-nav-bell-item:hover { background: var(--bas-cream-2); }
.blc-nav-bell-item.is-unread { background: rgba(255,69,50,0.08); }
.blc-nav-bell-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.blc-nav-bell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blc-nav-bell-title { font-size: 0.9rem; font-weight: 600; color: var(--bas-ink-black,#132025); }
.blc-nav-bell-snip { font-size: 0.82rem; color: var(--bas-ink-strong); line-height: 1.35; }
.blc-nav-bell-time { font-size: 0.72rem; color: var(--bas-muted); }

/* Bell icon reads cream on the dark inner-page header, matching the profile icon. */
body.blc-inner-header header .blc-nav-bell-btn { color: var(--bas-on-dark); background: rgba(255, 255, 255, 0.10); }
body.blc-inner-header header .blc-nav-bell-btn:hover,
body.blc-inner-header header .blc-nav-bell-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.20); }

/* Notice re-open lightbox launched from a bell notification. */
.blc-nav-note-lb { display: none; position: fixed; inset: 0; z-index: 100001; background: rgba(17, 24, 39, 0.5); align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow: auto; }
.blc-nav-note-lb.open { display: flex; }
.blc-nav-note-box { background: var(--bas-white); border-radius: 14px; max-width: 520px; width: 100%; margin: auto; box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25); overflow: hidden; }
.blc-nav-note-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bas-border,#e7e4d8); }
.blc-nav-note-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--bas-ink-black,#132025); }
.blc-nav-note-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--bas-muted); cursor: pointer; padding: 0 0.35rem; border-radius: 6px; }
.blc-nav-note-close:hover { background: var(--bas-cream-2); color: var(--bas-ink-black,#132025); }
.blc-nav-note-body { padding: 1.25rem; color: var(--bas-ink-strong,#3c434a); font-size: 1rem; line-height: 1.65; white-space: pre-wrap; max-height: min(60vh, 520px); overflow: auto; }

/* ── Theme toggle (portal header + mobile drawer) ──────────────────────────── */
.blc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; padding: 0; background: transparent; border: none; border-radius: 9px; color: inherit; cursor: pointer; transition: background 0.15s; }
.blc-theme-toggle:hover { background: rgba(0,0,0,0.08); }
.blc-theme-toggle__icon { width: 20px; height: 20px; display: block; }
.blc-theme-toggle__sun { display: none; }
html[data-theme="dark"] .blc-theme-toggle__moon { display: none; }
html[data-theme="dark"] .blc-theme-toggle__sun { display: block; }
body.blc-inner-header header .blc-theme-toggle { color: var(--bas-on-dark); }
body.blc-inner-header header .blc-theme-toggle:hover { background: rgba(255,255,255,0.14); }
.blc-mobile-theme { color: var(--bas-ink-strong,#3c434a); }

/* ── Language selector (logged-out header: /login, /signup) ────────────────── */
.blc-lang-select { position: relative; display: inline-flex; align-items: center; }
.blc-lang-select__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 40px; padding: 0 0.7rem; background: transparent; border: none; border-radius: 9px; color: inherit; cursor: pointer; transition: background 0.15s; font-family: inherit; }
.blc-lang-select__btn:hover { background: rgba(0,0,0,0.08); }
.blc-lang-select__globe { width: 20px; height: 20px; display: block; }
.blc-lang-select__code { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; }
.blc-lang-select__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; max-height: 340px; overflow-y: auto; display: none; flex-direction: column; background: var(--bas-white,#fff); border: 1px solid var(--bas-border,#e7e4d8); border-radius: 11px; box-shadow: 0 12px 32px rgba(19, 32, 37, 0.14); padding: 0.4rem; z-index: 100; }
.blc-lang-select.is-open .blc-lang-select__menu { display: flex; }
.blc-lang-select__opt { text-align: left; padding: 0.55rem 0.85rem; border: 0; background: transparent; border-radius: 8px; color: var(--bas-ink-strong,#3c434a); font-size: 0.98rem; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; }
.blc-lang-select__opt:hover { background: var(--bas-cream-2,#fbf8f0); }
.blc-lang-select__opt.is-current { color: var(--bas-orange,#ff4532); font-weight: 700; }
body.blc-inner-header header .blc-lang-select__btn { color: var(--bas-on-dark); }
body.blc-inner-header header .blc-lang-select__btn:hover { background: rgba(255,255,255,0.14); }

/* Theme toggle + language selector live in one nav item so the space between them
   matches the marketing header (1.5rem) rather than the wider nav block-gap. */
.blc-nav-controls { display: inline-flex; align-items: center; gap: 1.5rem; }

/* /login + /signup keep a light (white) header, so the injected theme toggle and
   language selector need the marketing header's white-chip look — otherwise they
   inherit the .blc-inner-header dark-header treatment (light icon, no background)
   and vanish on white. Comes after the .blc-inner-header rules so it wins. */
body.blc-auth-page header .blc-theme-toggle,
body.blc-auth-page header .blc-lang-select__btn {
	background: var(--bas-white,#ffffff);
	color: var(--bas-ink-black,#132025);
}
body.blc-auth-page header .blc-theme-toggle:hover,
body.blc-auth-page header .blc-lang-select__btn:hover {
	background: var(--bas-cream-2,#fbf8f0);
}
html[data-theme="dark"] body.blc-auth-page header .blc-theme-toggle,
html[data-theme="dark"] body.blc-auth-page header .blc-lang-select__btn {
	background: rgba(255,255,255,0.12);
	color: var(--bas-on-dark);
}
html[data-theme="dark"] body.blc-auth-page header .blc-theme-toggle:hover,
html[data-theme="dark"] body.blc-auth-page header .blc-lang-select__btn:hover {
	background: rgba(255,255,255,0.2);
}

/* ── Settings hub: tile grid of destinations (account + plan options) ── */
.blc-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.blc-settings-tile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem 1.25rem;
    background: var(--bas-white);
    border: 1px solid var(--bas-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.blc-settings-tile:hover {
    /* Outline matches this tile's illustration colour (--blc-tile-hue, set inline
       in blc_settings_tiles); falls back to the brand orange. */
    border-color: var(--blc-tile-hue, var(--bas-orange));
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
    transform: translateY(-2px);
}
.blc-settings-tile__ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Flat per-tile color is set inline (blc_settings_tiles); this is the
       fallback for any tile without one. Icon is white to sit on the fill. */
    background: var(--bas-pacific-ink);
    color: #fff;
    margin-bottom: 0.25rem;
    box-shadow: 0 5px 14px rgba(17, 24, 39, 0.18);
}
.blc-settings-tile__ico svg { width: 26px; height: 26px; }
.blc-settings-tile:hover .blc-settings-tile__ico { transform: scale(1.05); transition: transform 0.15s ease; }
/* Dark mode: the per-tile illustration hues (navy shades especially) go near-black
   on the dark card. Lighten each badge to a tint of its own colour and use a dark
   glyph, so every tile's illustration stays clearly visible. */
html[data-theme="dark"] .blc-settings-tile__ico {
    background: color-mix(in srgb, var(--blc-tile-hue, var(--bas-pacific-ink)), #ffffff 48%) !important;
    color: #0e2a33 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
.blc-settings-tile__title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--bas-ink-black);
}
.blc-settings-tile__sub {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--bas-muted);
}
@media (max-width: 780px) { .blc-settings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .blc-settings-grid { grid-template-columns: 1fr; } }

/* Notification preferences matrix (Settings > Notifications) */
.blc-nm-matrix { display: flex; flex-direction: column; gap: 1rem; }
.blc-nm-group { border: 1px solid var(--bas-border); border-radius: 12px; overflow: hidden; }
.blc-nm-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.85rem; background: var(--bas-surface-2, #f6f5f1); border-bottom: 1px solid var(--bas-border); }
.blc-nm-grouptitle { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--bas-ink-strong); }
.blc-nm-cols { display: grid; grid-template-columns: repeat(3, 46px); gap: 0; flex: 0 0 auto; }
.blc-nm-col { text-align: center; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--bas-muted); }
.blc-nm-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-top: 1px solid var(--bas-border); }
.blc-nm-row:first-of-type { border-top: 0; }
.blc-nm-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blc-nm-label { font-size: 0.88rem; font-weight: 500; color: var(--bas-ink-strong); }
.blc-nm-desc { font-size: 0.76rem; line-height: 1.4; color: var(--bas-muted); }
.blc-nm-cells { display: grid; grid-template-columns: repeat(3, 46px); gap: 0; flex: 0 0 auto; }
.blc-nm-cell { display: flex; align-items: center; justify-content: center; }
.blc-nm-cell input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--bas-orange); margin: 0; }
.blc-nm-cell input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }
.blc-nm-na { color: var(--bas-border); font-size: 0.9rem; }
.blc-nm-lock { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bas-success-text, #047857); white-space: nowrap; }
.blc-nm-hint { font-size: 0.78rem; color: var(--bas-muted); margin: 0 0 0.85rem; }
@media (max-width: 520px) {
    .blc-nm-cols { grid-template-columns: repeat(3, 38px); }
    .blc-nm-cells { grid-template-columns: repeat(3, 38px); }
    .blc-nm-lock { font-size: 0.52rem; }
}

/* =========================================================================
 Inline text links in portal body copy get the same prominent indicator as
 marketing: a thick, offset International-Orange underline (thickens on hover).
 Scoped to prose (p / li / dd) inside the theme's post-content, so cards,
 buttons and nav are untouched. --bas-orange-text flips lighter in dark mode.
 WCAG 2.2 AA: weight + heavy underline is a non-color cue.
 ========================================================================= */
.wp-block-post-content :is(p, li, dd) a:not(.btn):not(.blc-btn):not(.button):not(.wp-element-button) {
	color: var(--bas-orange-text, #c9351f);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--bas-orange, #ff4532);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.wp-block-post-content :is(p, li, dd) a:not(.btn):not(.blc-btn):not(.button):not(.wp-element-button):hover {
	text-decoration-thickness: 3px;
}

/* ── Seamless in-portal navigation (bas-portal-nav.js) ─────────────────────── */
/* Loading spinner centered over the content area while a swap loads. The JS
   sets left/top to the content area's center; translate(-50%,-50%) anchors it. */
.bas-pnav-spinner {
	position: fixed;
	z-index: 100000;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .15s ease;
}
.bas-pnav-spinner.is-active { opacity: 1; }
.bas-pnav-spinner__circle {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid var(--ui-border, rgba(15, 23, 42, .12));
	border-top-color: var(--ui-accent, #0e7c8f);
	animation: bas-pnav-spin .7s linear infinite;
}
@keyframes bas-pnav-spin { to { transform: rotate(360deg); } }

/* Content area cross-fade during the swap. */
.wp-block-post-content {
	transition: opacity .18s ease;
}
.wp-block-post-content.bas-pnav-out {
	opacity: 0;
}

/* Visually-hidden live region that announces the new page to screen readers. */
.bas-pnav-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.bas-pnav-spinner__circle { animation-duration: 1.4s; } /* gentler spin */
	.wp-block-post-content { transition: none; }
	.wp-block-post-content.bas-pnav-out { opacity: 1; }
}