/* =========================================================================
   Portal toast notifications — site-wide styled confirmations (window.blcToast)
   ========================================================================= */
#blc-portal-toast-wrap {
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    pointer-events: none;
}
.blc-portal-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    color: #111827;
    border: 1px solid #d9dce2;
    border-left: 5px solid #b0822f;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 12px 34px rgba(17, 24, 39, 0.20);
    font-size: 1rem;
    line-height: 1.45;
    animation: blc-portal-toast-in 0.3s cubic-bezier(.2, .8, .2, 1);
}
.blc-portal-toast-success { border-left-color: #059669; }
.blc-portal-toast-error   { border-left-color: #b32d2e; }
.blc-portal-toast-info    { border-left-color: #b0822f; }
.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: #9ca3af;
    padding: 0 2px;
    margin: -2px -2px 0 0;
}
.blc-portal-toast-x:hover { color: #111827; }
.blc-portal-toast-out { animation: blc-portal-toast-out 0.25s ease forwards; }
@keyframes blc-portal-toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes blc-portal-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}
@media (max-width: 600px) {
    #blc-portal-toast-wrap { left: 16px; right: 16px; top: 16px; max-width: none; }
}

/* =========================================================================
   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;
}

/* Filled pill button (Create Account) */
.blc-nav-auth-btn {
    background-color: #111827 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
    display: block;
}

.blc-nav-auth-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Switch link inside modal */
.blc-nav-auth-switch {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: #111827;
    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;
    padding: 1rem;
}

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

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

#blc-nav-modal-overlay .blc-modal {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
    font-family: inherit;
}

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

#blc-nav-modal-overlay .blc-modal-close:hover { color: #374151; }

#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: #111827;
    margin: 0 0 0.5rem 0;
}

#blc-nav-modal-overlay .blc-modal-desc {
    font-size: 0.95rem;
    color: #6b7280;
    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: #fff;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d9dce2;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

#blc-nav-modal-overlay .blc-modal-input:focus {
    border-color: #111827;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.15);
}

#blc-nav-modal-overlay .blc-modal-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background-color: #111827;
    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: #000000; }
#blc-nav-modal-overlay .blc-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }

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

#blc-nav-modal-overlay .blc-modal-cancel:hover { color: #374151; }

#blc-nav-modal-overlay .blc-modal-error {
    display: none;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    color: #dc2626;
    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); }

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

.blc-nav-profile-btn:hover,
.blc-nav-profile-btn[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.08);
}

.blc-nav-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    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: #111827;
    border-bottom: 1px solid #f0f0f0;
    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: #6b7280;
}

.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: #374151;
    text-decoration: none;
    cursor: pointer;
}

.blc-nav-profile-item:hover { background: #f3f4f6; color: #111827; }

.blc-nav-profile-signout { color: #b91c1c; }
.blc-nav-profile-signout:hover { background: #fef2f2; color: #b91c1c; }

/* Primary "Start New Chat" action at the top of the dropdown. */
.blc-nav-profile-cta {
    background: #111827;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}
.blc-nav-profile-cta:hover { background: #3c434a; 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: #111827; color: #fff; border-color: #111827; }
.blc-btn-primary:hover { background: #000; color: #fff; }
.blc-btn-secondary { background: #fff; color: #111827; border-color: #111827; }
.blc-btn-secondary:hover { background: #111827; color: #fff; }
.blc-btn-danger { background: #b32d2e; color: #fff; border-color: #b32d2e; }
.blc-btn-danger:hover { background: #8f2424; color: #fff; }
.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 chat + 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*="/features"]),
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
   chat box, chat history, and account content to the same extent. */
:root { --blc-wide: 1140px; }

/* Dashboard: post-content holds the chat box, "Chat History" heading + list. */
body.blc-wide-content .wp-block-post-content {
    max-width: var(--blc-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
}
body.blc-wide-content .wp-block-post-content > * {
    max-width: 100% !important;
    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, Chat, Chat 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 #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;
}

/* ── 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: #111827;
}
/* Bar contents → cream. Targets the site title, top-level nav links, and the
   injected chat/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-profile-btn,
body.blc-inner-header header .blc-nav-auth-link {
    color: #fffdf4 !important;
}
/* Logged-out "Create Account" pill inverts on the dark bar. */
body.blc-inner-header header .blc-nav-auth-btn {
    background-color: #fffdf4 !important;
    color: #111827 !important;
}
/* Icon hover: light overlay (a dark hover is invisible on the dark bar). */
body.blc-inner-header header .blc-nav-dash-btn:hover,
body.blc-inner-header header .blc-nav-profile-btn:hover,
body.blc-inner-header header .blc-nav-profile-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* The site logo is a dark image; render it cream/white on the dark inner-page
   header so it's visible (brightness(0) makes it a solid silhouette, invert(1)
   flips it to near-white). Homepage keeps the original dark logo. */
body.blc-inner-header header .wp-block-site-logo img,
body.blc-inner-header header img.custom-logo,
body.blc-inner-header header a.custom-logo-link img,
body.blc-inner-header header img[src*="bayareasupport-logo"] {
    filter: brightness(0) invert(1);
}

/* ─────────────────────────────────────────────────────────────────────────
   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, chat UI, and auth controls so the
   marketing pages and the gated app pages (Dashboard / Chat / Chat 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 #eee;
    font-weight: 600; color: #111827; 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: #6b7280;
    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: #374151; font-size: 1rem; font-family: inherit;
    background: none; border: none; cursor: pointer;
}
.blc-mobile-link:hover { background: #f3f4f6; color: #111827; }
.blc-mobile-signout { color: #b91c1c; }
.blc-mobile-signout:hover { background: #fef2f2; color: #b91c1c; }
.blc-mobile-cta { background: #111827; color: #fff; font-weight: 600; text-align: center; margin-top: 4px; }
.blc-mobile-cta:hover { background: #000; 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: #111827; z-index: 100;
    }
    body.blc-inner-header .blc-mobile-toggle { color: #fffdf4; }

    .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: #fff; 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 / Chat / Chat 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; }

    /* Chat interface: tighter padding, wider bubbles, contained media. */
    .blc-chat-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; }
}