/* ============================================================
 * Scoped Bootstrap Utilities — scoped inside .whc-bar
 * Replaces the full Bootstrap CDN to avoid overriding the theme
 * ============================================================ */

/* --- Flex Layout --- */

.whc-bar .d-flex           { display: flex !important; }
.whc-bar .flex-row         { flex-direction: row !important; }
.whc-bar .justify-content-between { justify-content: space-between !important; }
.whc-bar .align-items-center      { align-items: center !important; }
.whc-bar .h-100           { height: 100% !important; }

/* --- Buttons --- */
.whc-bar .btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    line-height: 1;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* btn-primary */
.whc-bar .btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.whc-bar .btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* btn-outline-primary */
.whc-bar .btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
}
.whc-bar .btn-outline-primary:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* --- Text & Alignment --- */
.whc-bar .small {
    font-size: 1rem;
}

.whc-bar .align-middle {
    vertical-align: middle;
}

.whc-bar .z-1000 {
    z-index: 1000;
}

.whc-bar .text-white {
    color: #fff !important;
}

.whc-bar .text-black {
    color: #27283C !important;
}

/* ============================================================
 * Bar Component & Banner Styles
 * ============================================================ */

.whc-bar .ml-16 {
  margin-left: 16px;
}

.whc-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 100000;
    padding: 6px 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
    background: #FFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif!important;
    /* Matches Extendify's 300ms reframe when the AI agent docks */
    transition: top 300ms ease-in-out, left 300ms ease-in-out, right 300ms ease-in-out, border-radius 300ms ease-in-out;
}

/* Ensure all plugin elements use border-box since global Bootstrap is gone */
.whc-bar,
.whc-bar *,
.whc-bar *::before,
.whc-bar *::after {
    box-sizing: border-box !important;
}

#custom-guest-top-bar {
    background: #0663DD !important;
}

/* Fix UI break when line breaks in mobile size */
#custom-admin-top-bar .upsell-div,
#custom-guest-top-bar .visitor-content {
    line-height: 1;
}

.whc-bar .trial-visitor-btn {
    min-width: 88px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: var(--warning-yellow, #FFC008) !important;
    font-weight: 700 !important;
    color: #27283C !important;
    line-height: 1;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whc-bar .countdown-client {
    font-weight: 700 !important;
}

.whc-bar .btn-manage,
.whc-bar .upgrade-to-paid {
    padding: 2px 8px !important;
}

.whc-bar .btn-text {
    color: var(--Interactive-Blue, #06F);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

.whc-header-container {
    margin: 0;
    width: calc(100% - var(--admin-menu-width));
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    left: var(--admin-menu-width);
    margin-left: -20px;
}

.whc-bar .site-setup-banner {
    display: flex;
    height: 60px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: #FFF;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
    margin-bottom: 1px;
}

.whc-header-center {
    gap: 10px;
}

.whc-bar .site-setup-button {
    display: flex !important;
    height: 37px;
    min-width: 88px;
    padding: 18px 12px !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    border-radius: 4px !important;
    background: var(--Interaction-blue, #06F) !important;
    text-align: center;
    /* Body Text */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal !important;
}

#admin-popup-overlay {
    top: 72px!important;
}

/* --- Misc & Overrides --- */
/* Button font ~13px */
.whc-bar .btn.btn-smaller {
    font-size: 0.8125rem; /* ~13px */
}

/* Hide compact suffix by default */
.whc-bar .compact-suffix {
    display: none;
}

/* --- Responsive ---
 * Classes toggled by updateBannerBreakpoints() in JS, which measures the banner's
 * own rendered width rather than viewport width. This ensures the correct
 * breakpoints fire in Extendify split-screen, where the banner is narrower than
 * the full viewport.
 * ------------------------------------------------------------------ */

/* ≤1200px effective width */
#custom-guest-top-bar.whc-bar--below-xl .countdown-block {
    display: none;
}

/* ≤992px effective width */
#custom-guest-top-bar.whc-bar--below-lg .logo-div,
#custom-guest-top-bar.whc-bar--below-lg .created_with,
#custom-guest-top-bar.whc-bar--below-lg .branding-text,
#custom-guest-top-bar.whc-bar--below-lg .branding-period,
#custom-guest-top-bar.whc-bar--below-lg .countdown-block {
    display: none;
}

#custom-guest-top-bar.whc-bar--below-lg .free_trial::after {
    content: ".";
}

/* ≤768px effective width */
#custom-admin-top-bar.whc-bar--below-md {
    padding: 6px 12px;
}

#custom-admin-top-bar.whc-bar--below-md .logo-div,
#custom-admin-top-bar.whc-bar--below-md .your_free_trial_has {
    display: none;
}

#custom-admin-top-bar.whc-bar--below-md.today-mode .today-compact-prefix {
    display: inline !important;
}

#custom-admin-top-bar.whc-bar--below-md .admin-bar-content {
    flex: 1;
    justify-content: space-between;
}

#custom-admin-top-bar.whc-bar--below-md .compact-suffix {
    display: inline !important;
}

/* ============================================================
 * Page Layout Offsets
 * Gated by classes setBannerLayoutClasses() puts on <html> once the trial
 * data loads, so removing them (converted / expired) drops every offset:
 *   whc-banner-active            banner is visible
 *   whc-banner-wp-admin          wp-admin screen (otherwise frontend)
 *   whc-banner-has-toolbar       WP admin bar or Extendify toolbar is shown
 *   whc-banner-extendify-toolbar Extendify's simple toolbar replaces the admin bar
 *
 * --wp-admin--admin-bar--height is what core (wp-admin html padding, sticky
 * block offset, scroll-padding-top) and the Extendable theme read as "height
 * of the fixed UI at the top of the viewport", so we set it to banner + fixed
 * toolbar height rather than hard-coding offsets per element.
 * ============================================================ */

html.whc-banner-active {
    --whc-banner-height: 40px;
    --whc-toolbar-height: 0px;       /* toolbar height in the document flow */
    --whc-toolbar-fixed-height: 0px; /* part of it that stays fixed while scrolling */
    --wp-admin--admin-bar--height: calc(var(--whc-banner-height) + var(--whc-toolbar-fixed-height)) !important;
}

html.whc-banner-active.whc-banner-has-toolbar {
    --whc-toolbar-height: 32px;
    --whc-toolbar-fixed-height: 32px;
}

@media screen and (max-width: 782px) {
    html.whc-banner-active.whc-banner-has-toolbar {
        --whc-toolbar-height: 46px;
        --whc-toolbar-fixed-height: 46px;
    }
}

/* Core makes #wpadminbar position:absolute at <=600px so it scrolls away; Extendify's toolbar stays fixed */
@media screen and (max-width: 600px) {
    html.whc-banner-active.whc-banner-has-toolbar:not(.whc-banner-extendify-toolbar) {
        --whc-toolbar-fixed-height: 0px;
    }
}

html.whc-banner-active #wpadminbar {
    top: var(--whc-banner-height) !important;
}

/* Extendify simple toolbar: fixed at top:0, shown on the frontend instead of
   #wpadminbar once Extendify Launch is completed (or per-user preference) */
html.whc-banner-active #extendify-toolbar {
    top: var(--whc-banner-height);
}

/* --- Frontend --- */

/* Overrides core's and Extendify toolbar's html { margin-top: 32px/46px !important } */
html.whc-banner-active:not(.whc-banner-wp-admin) {
    margin-top: calc(var(--whc-banner-height) + var(--whc-toolbar-height)) !important;
}

/* Common fixed header/navigation selectors */
html.whc-banner-active:not(.whc-banner-wp-admin) :is(header.fixed-top, .navbar-fixed-top, .fixed-top, .site-header.fixed,
.elementor-element-fixed, .sticky-header, .is-fixed .site-header) {
    top: var(--wp-admin--admin-bar--height) !important;
}

/* Core sticky blocks: core zeroes the offset at <=600px because the admin bar scrolls away, the banner doesn't */
html.whc-banner-active :where(.is-position-sticky) {
    --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height);
}

/* Extendable theme sticky header: the theme only offsets it for body.admin-bar (and
   drops that at <=782px), so it slides under the banner when scrolling. Reading
   --wp-admin--admin-bar--position-offset first keeps Extendify's docked mode working,
   which sets it to 0px inline on the header. */
html.whc-banner-active body header.wp-block-template-part:has(.ext-header-sticky) {
    top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height));
}

/* Floating pill header over a full-screen hero keeps its --ext-header-offset gap */
html.whc-banner-active body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill),
html.whc-banner-active body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
    top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height)));
}

/* --- wp-admin --- */

/* html.wp-toolbar padding follows --wp-admin--admin-bar--height above. At <=600px core
   moves the admin bar's 46px to #wpbody padding instead, so only add the banner. */
@media screen and (max-width: 600px) {
    html.whc-banner-active.whc-banner-wp-admin.wp-toolbar {
        padding-top: var(--whc-banner-height);
    }

    /* #wpadminbar is position:absolute here, inside #wpcontent (position:relative at
       this width), which already starts below the banner padding */
    html.whc-banner-active.whc-banner-wp-admin #wpadminbar {
        top: 0 !important;
    }
}

/* When the admin menu is taller than the window, core's pinMenu() (wp-admin/js/common.js)
   sets inline position:absolute with a top computed from the admin bar height alone,
   which puts the menu one banner height too low. */
html.whc-banner-active.whc-banner-wp-admin #adminmenuwrap[style*="absolute"] {
    margin-top: calc(-1 * var(--whc-banner-height));
}

/* --- Extendify AI agent docked-left split screen (written against Extendify 3.2.3, rechecked against 3.2.4) ---
 * Extendify toggles html.extendify-agent-docked while the sidebar is open and
 * html.extendify-agent-skeleton while it's mounting after a reload. It frames the
 * site at left:384px with an 8px gutter, moves the admin bar / toolbar into the
 * frame, and shifts .wp-site-blocks with an inline
 * transform: translateX(384px) translateY(40px) scale(s), 40px being gutter + bar.
 * The banner becomes the top of that frame; the bar and site move down by the
 * banner height. Numbers and breakpoint mirror extendify/src/Agent/agent.css,
 * src/Toolbar/toolbar.css and app/Agent/Skeleton.php.
 * ------------------------------------------------------------------ */
@media (min-width: 783px) {
    /* body is position:fixed while docked (Extendify's skeleton zeroes this margin too), and
       .wp-site-blocks is the scroll container, already below the banner and bar, so sticky
       blocks inside it need no offset. Extendify only zeroes it inline on the header. */
    html.whc-banner-active:not(.whc-banner-wp-admin):is(.extendify-agent-docked, .extendify-agent-skeleton) {
        margin-top: 0 !important;
        --wp-admin--admin-bar--height: 0px !important;
    }

    /* 1rem radius matches the frame's inner corners: the banner sits above the frame
       overlay (z-index 99999), so the frame can't mask its corners like it does the bar's */
    html.whc-banner-active:is(.extendify-agent-docked, .extendify-agent-skeleton) .whc-bar {
        top: 8px;
        left: 384px;
        right: 8px;
        border-radius: 1rem 1rem 0 0;
    }

    html.whc-banner-active:is(.extendify-agent-docked, .extendify-agent-skeleton) #wpadminbar,
    html.whc-banner-active #extendify-toolbar.ext-tb-agent-open,
    html.whc-banner-active.extendify-agent-skeleton #extendify-toolbar {
        border-radius: 0;
    }

    html.whc-banner-active #extendify-toolbar.ext-tb-agent-open,
    html.whc-banner-active.extendify-agent-skeleton #extendify-toolbar {
        top: calc(8px + var(--whc-banner-height));
    }

    /* `translate` composes with Extendify's inline transform, so this adds to its translateY(40px) */
    html.whc-banner-active:is(.extendify-agent-docked, .extendify-agent-skeleton) .wp-site-blocks {
        translate: 0 var(--whc-banner-height);
    }

    /* Extendify sizes the scaled scroll container to end at the frame bottom when it
       starts 40px down; shorten it by the banner. tan(atan2(a, b)) = a / b is
       Extendify's scale, the same expression Skeleton.php uses. */
    html.whc-banner-active.extendify-agent-docked .wp-site-blocks {
        height: calc((100vh - 40px - var(--whc-banner-height) - var(--extendify-notification-bar-height, 0px)) / tan(atan2(calc(100vw - 384px), 100vw))) !important;
    }
}