/* ==========================================================================
   OneBuy audience switcher
   Markup: [onebuy_audience_switcher] — inc/audience-switcher.php
   ========================================================================== */

.onebuy-switcher {
    --obs-navy: #10394F;
    --obs-teal: #41BEB1;
    --obs-border: #DCE5E8;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.onebuy-switcher *,
.onebuy-switcher *::before,
.onebuy-switcher *::after { box-sizing: border-box; }

.onebuy-switcher__heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #61737D;
}

.onebuy-switcher__links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.onebuy-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 15px 30px;
    border: 2px solid var(--obs-border);
    border-radius: 999px;
    background: var(--obs-navy);
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.onebuy-switcher__link:hover,
.onebuy-switcher__link:focus {
    border-color: var(--obs-navy);
    /* color: var(--obs-navy) !important; */
}

/* Each section keeps its own brand colour: Organisations navy, Personal teal.
   Solid means "you are here"; the other section is white and outlined, so the
   pair says which side of the site you are on at a glance. */
.onebuy-switcher__link--org,
.onebuy-switcher__link--org:hover,
.onebuy-switcher__link--org:focus {
    background: var(--obs-navy);
    border-color: var(--obs-navy);
    color: #fff !important;
}

.onebuy-switcher__link--personal,
.onebuy-switcher__link--personal:hover,
.onebuy-switcher__link--personal:focus {
    background: var(--obs-teal);
    border-color: var(--obs-teal);
    color: #fff !important;
}

.onebuy-switcher__link--org:not(.is-current),
.onebuy-switcher__link--org:not(.is-current):hover,
.onebuy-switcher__link--org:not(.is-current):focus {
    background: #fff;
    border-color: var(--obs-navy);
    color: var(--obs-navy) !important;
}

.onebuy-switcher__link--personal:not(.is-current),
.onebuy-switcher__link--personal:not(.is-current):hover,
.onebuy-switcher__link--personal:not(.is-current):focus {
    background: #fff;
    border-color: var(--obs-teal);
    color: var(--obs-teal) !important;
}

.onebuy-switcher__link:focus-visible {
    outline: 2px solid var(--obs-teal);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   One type scale for the whole header button row

   The toggle pills and the Login / Join buttons sit side by side, so they are
   set together here rather than drifting apart in two files. This is smaller
   than the 16px/3px Login and Join carried before: at that size the toggle's
   "FOR ORGANISATIONS" is wide enough to push the nav onto a second line.

   Only the two header buttons are listed. .cyan_btn / .cyan_border_btn -- the
   hero and in-page buttons sharing those rules in custom-style.css -- keep the
   original scale on purpose. custom-style.css is enqueued first (functions.php),
   so equal specificity resolves in this file's favour.
   -------------------------------------------------------------------------- */

.onebuy-switcher__link,
.site-header .ast-primary-header-bar .main-header-menu .cyan_header_btn.menu-item > .menu-link,
.site-header .ast-primary-header-bar .main-header-menu .cyan_header_border_btn.menu-item > .menu-link,
.header-widget-area .cyan_header_btn.menu-item > .menu-link,
.header-widget-area .cyan_header_border_btn.menu-item > .menu-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media only screen and (max-width: 1200px) {
    .onebuy-switcher__link,
    .site-header .ast-primary-header-bar .main-header-menu .cyan_header_btn.menu-item > .menu-link,
    .site-header .ast-primary-header-bar .main-header-menu .cyan_header_border_btn.menu-item > .menu-link,
    .header-widget-area .cyan_header_btn.menu-item > .menu-link,
    .header-widget-area .cyan_header_border_btn.menu-item > .menu-link {
        font-size: 13px;
        letter-spacing: 1px;
    }
}


/* --------------------------------------------------------------------------
   Narrow screens — full width, still one row while it fits
   -------------------------------------------------------------------------- */

@media (max-width: 921px) {
    .onebuy-switcher {
        justify-content: center;
        width: 100%;
    }

    .onebuy-switcher__links { width: 100%; }

    .onebuy-switcher__link {
        flex: 1 1 0;
        min-height: 44px;
        padding: 10px 14px;
    }
}

/* Stacked variant for the mobile menu, where the pills sit above the links. */
.onebuy-switcher--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
    background: #F2F5F6;
    border-radius: 10px;
}

.onebuy-switcher--stacked .onebuy-switcher__links {
    flex-direction: column;
    align-items: stretch;
}

.onebuy-switcher--stacked .onebuy-switcher__link {
    min-height: 44px;
}

/* :not(.is-current) matters — this rule has the same specificity as the
   .is-current rule above and comes later, so without it the active pill would
   be painted white while keeping its white text. */
.onebuy-switcher--stacked .onebuy-switcher__link:not(.is-current) {
    background: #fff;
}

/* --------------------------------------------------------------------------
   Hero offset

   Adding the switcher row took the header from 94px to 169px. The header is
   transparent and fixed, so page heroes were built to sit underneath it — and
   the extra 75px started covering their first line.

   The padding goes on the hero's inner wrapper, not the section: the section
   keeps its background running to the very top of the viewport (which is the
   point of a transparent header) while its content clears the taller header.

   Desktop only. Below Astra's 921.99px breakpoint the header is a single
   83px bar and heroes already clear it by a wide margin — adding this there
   would only open a gap.
   -------------------------------------------------------------------------- */

/* @media (min-width: 922px) {
    .hero_section > .e-con-inner {
        padding-top: 75px;
    }
} */

/* --------------------------------------------------------------------------
   The same two pills, as menu items

   For the off-canvas (mobile) menu, where the header's HTML element is not
   rendered. Add two Custom Links to the menu and give each one a CSS class in
   Appearance > Menus (Screen Options > CSS Classes):

       For Organisations  ->  /            ->  onebuy-pill-org
       For Individuals    ->  /personal/   ->  onebuy-pill-personal

   WordPress puts the class on the <li>, so these rules target its link. The
   colours match the header pills and, like them, do not change with the
   current section.

   Astra's Customizer CSS styles the mobile menu link at four classes deep
   (.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link),
   which outweighs anything this file can reasonably write, so the properties
   it sets there -- background, border, display, padding, colour -- are forced.
   Without that the pill keeps Astra's white background and, with white text,
   reads as an empty row.
   -------------------------------------------------------------------------- */

.onebuy-pill-org,
.onebuy-pill-personal {
    width: calc(50% - 25px) !important;
    flex: 0 0 auto !important;
    margin: 14px 0 !important;
    border-bottom: 0 !important;
}

.onebuy-pill-org {
    margin-left: 20px !important;
    margin-right: 10px !important;
}

.onebuy-pill-personal {
    margin-right: 20px !important;
}

.onebuy-pill-org > a,
.onebuy-pill-personal > a,
.onebuy-pill-org > .menu-link,
.onebuy-pill-personal > .menu-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 999px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* The same scale the header row uses below 1200px, so the pills read the
       same whether they are in the header or the off-canvas menu. */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.25;
    text-align: center;
}

/* The section you are in: solid, in that section's colour. */
.onebuy-pill-org > a,
.onebuy-pill-org > .menu-link,
.onebuy-pill-org > a:hover,
.onebuy-pill-org > .menu-link:hover {
    background: #10394F !important;
    border-color: #10394F !important;
    color: #fff !important;
}

.onebuy-pill-personal > a,
.onebuy-pill-personal > .menu-link,
.onebuy-pill-personal > a:hover,
.onebuy-pill-personal > .menu-link:hover {
    background: #41BEB1 !important;
    border-color: #41BEB1 !important;
    color: #fff !important;
}

/* The section you are not in: white, outlined, coloured text -- so the solid
   pill reads as "you are here". Keyed off the body class rather than
   current-menu-item, which would only match one of the Personal pages. */
.onebuy-section-personal .onebuy-pill-org > a,
.onebuy-section-personal .onebuy-pill-org > .menu-link,
.onebuy-section-personal .onebuy-pill-org > a:hover,
.onebuy-section-personal .onebuy-pill-org > .menu-link:hover {
    background: #fff !important;
    border-color: #10394F !important;
    color: #10394F !important;
}

.onebuy-section-org .onebuy-pill-personal > a,
.onebuy-section-org .onebuy-pill-personal > .menu-link,
.onebuy-section-org .onebuy-pill-personal > a:hover,
.onebuy-section-org .onebuy-pill-personal > .menu-link:hover {
    background: #fff !important;
    border-color: #41BEB1 !important;
    color: #41BEB1 !important;
}

/* --------------------------------------------------------------------------
   Login / Join, coloured by section

   These are the existing header menu buttons (.cyan_header_border_btn and
   .cyan_header_btn, base styles in custom-style.css), which were teal on every
   page. They now take the colour of the section you are in: navy on the
   Organisation side, teal on the Personal side. Only the colours are set here
   -- size, radius and type stay in custom-style.css, so there is one place to
   change the shape of these buttons.

   The body class comes from cra_onebuy_section_body_class(). Each selector is
   the custom-style.css one with that class in front, which outweighs it
   without needing !important.
   -------------------------------------------------------------------------- */

/* Organisation side: navy. */
.onebuy-section-org .site-header .ast-primary-header-bar .main-header-menu .cyan_header_btn.menu-item > .menu-link {
    background: #10394F;
    border-color: #10394F;
    color: #FFFFFF;
}

.onebuy-section-org .site-header .ast-primary-header-bar .main-header-menu .cyan_header_btn.menu-item > .menu-link:hover {
    background: #FFFFFF;
    color: #10394F;
}

.onebuy-section-org .site-header .ast-primary-header-bar .main-header-menu .cyan_header_border_btn.menu-item > .menu-link {
    border-color: #10394F;
    color: #10394F;
}

.onebuy-section-org .site-header .ast-primary-header-bar .main-header-menu .cyan_header_border_btn.menu-item > .menu-link:hover {
    background: #10394F;
    color: #FFFFFF;
}

/* Personal side: teal. Already the inherited colour, but stated so the pair
   reads as one decision and survives an edit to custom-style.css. */
.onebuy-section-personal .site-header .ast-primary-header-bar .main-header-menu .cyan_header_btn.menu-item > .menu-link {
    background: #41BEB1;
    border-color: #41BEB1;
    color: #FFFFFF;
}

.onebuy-section-personal .site-header .ast-primary-header-bar .main-header-menu .cyan_header_btn.menu-item > .menu-link:hover {
    background: #FFFFFF;
    color: #41BEB1;
}

.onebuy-section-personal .site-header .ast-primary-header-bar .main-header-menu .cyan_header_border_btn.menu-item > .menu-link {
    border-color: #41BEB1;
    color: #41BEB1;
}

.onebuy-section-personal .site-header .ast-primary-header-bar .main-header-menu .cyan_header_border_btn.menu-item > .menu-link:hover {
    background: #41BEB1;
    color: #FFFFFF;
}

/* The same two buttons again in the header widget, which is where they show on
   narrow screens. custom-style.css only styles them inside this breakpoint, so
   the override stays inside it too -- outside it there is no button to recolour. */
@media only screen and (max-width: 1024px) {

    .onebuy-section-org .header-widget-area .cyan_header_btn.menu-item > .menu-link {
        background: #10394F;
        border-color: #10394F;
        color: #FFFFFF;
    }

    .onebuy-section-org .header-widget-area .cyan_header_btn.menu-item > .menu-link:hover {
        background: #FFFFFF;
        color: #10394F;
    }

    .onebuy-section-org .header-widget-area .cyan_header_border_btn.menu-item > .menu-link {
        border-color: #10394F;
        color: #10394F;
    }

    .onebuy-section-org .header-widget-area .cyan_header_border_btn.menu-item > .menu-link:hover {
        background: #10394F;
        color: #FFFFFF;
    }

    .onebuy-section-personal .header-widget-area .cyan_header_btn.menu-item > .menu-link {
        background: #41BEB1;
        border-color: #41BEB1;
        color: #FFFFFF;
    }

    .onebuy-section-personal .header-widget-area .cyan_header_btn.menu-item > .menu-link:hover {
        background: #FFFFFF;
        color: #41BEB1;
    }

    .onebuy-section-personal .header-widget-area .cyan_header_border_btn.menu-item > .menu-link {
        border-color: #41BEB1;
        color: #41BEB1;
    }

    .onebuy-section-personal .header-widget-area .cyan_header_border_btn.menu-item > .menu-link:hover {
        background: #41BEB1;
        color: #FFFFFF;
    }

    .cyan_header_border_btn, .cyan_header_btn {
        /* display: none !important; */
    }
    .header-widget-area.widget-area.site-header-focus-item.header-widget-area-inner .mobile-hide{
        display: none !important;
    }

    .main-header-bar-navigation .main-header-menu.ast-menu-shadow.ast-nav-menu.ast-flex.submenu-with-border.stack-on-mobile .cyan_header_border_btn{
        display: none !important;
    }
    .ast-header-break-point .dropdown-menu-toggle {
        border: unset !important;
    }
    .site-header .menu-item:has(> .menu-link > img.avatar) .dropdown-menu-toggle:not(:has(svg))::after, .site-header .dashboard-menu .dropdown-menu-toggle:not(:has(svg))::after{
        transform: unset !important;
    }
}

li.personal-cyan a {
    color: #41beb1 !important;
}

/* ==========================================================================
   Off-canvas drawer (mobile + tablet)

   Everything below is scoped to #ast-mobile-popup, which is Astra's slide-out
   panel. That container does not exist in the desktop header, so none of this
   can reach the desktop menus.

   Two things the panel gets wrong on its own:
   - The switcher is in an HTML element whose row carries 20px of side padding,
     while the nav list below runs edge to edge. Left alone the pills sit on a
     different grid from the links.
   - Login / Join are menu items here, and the button styles in custom-style.css
     are scoped to .ast-primary-header-bar / .header-widget-area, neither of
     which the panel is -- so "Join" renders as plain text.
   ========================================================================== */

/* The HTML element and its wrapper are shrink-to-fit flex items, so without
   this the pills size to their text instead of the panel. */
#ast-mobile-popup .ast-header-html,
#ast-mobile-popup .ast-builder-html-element {
    width: 100%;
}

#ast-mobile-popup .onebuy-switcher {
    width: 100%;
    margin: 2px 0 16px;
    gap: 10px;
    justify-content: stretch;
}

#ast-mobile-popup .onebuy-switcher__links {
    display: flex;
    width: 100%;
    gap: 10px;
}

#ast-mobile-popup .onebuy-switcher__link {
    flex: 1 1 0;
    /* min-width:auto is the flex default, which floors each pill at its own
       min-content width -- that is why "FOR ORGANISATIONS" came out wider than
       "FOR INDIVIDUALS". Zero lets them settle as equal halves. */
    min-width: 0;
    min-height: 46px;
    padding: 11px 8px;
    font-size: clamp(11px, 2.9vw, 13px);
    letter-spacing: .5px;
    white-space: nowrap;
}

/* Smallest phones: "FOR ORGANISATIONS" is the longest label and runs out of
   pill at this width, so the tracking and side padding come off to keep it on
   one line rather than letting it spill. */
@media (max-width: 360px) {
    #ast-mobile-popup .onebuy-switcher__link {
        padding: 11px 4px;
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* Login / Join as real buttons, on the same 20px grid as the pills above.
   Colour follows the section, like the header buttons do. */
#ast-mobile-popup .cyan_header_btn.menu-item > .menu-link,
#ast-mobile-popup .cyan_header_border_btn.menu-item > .menu-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 10px 20px;
    padding: 12px 20px !important;
    border: 1px solid transparent !important;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    /* Astra gives panel menu links width:100%; with side margins on top of
       that the button runs 20px past the panel edge. */
    width: auto !important;
}

#ast-mobile-popup .cyan_header_btn.menu-item,
#ast-mobile-popup .cyan_header_border_btn.menu-item {
    border-bottom: 0 !important;
}

/* Filled (Join) */
#ast-mobile-popup .onebuy-section-org .cyan_header_btn.menu-item > .menu-link,
.onebuy-section-org #ast-mobile-popup .cyan_header_btn.menu-item > .menu-link {
    background: #10394F !important;
    border-color: #10394F !important;
    color: #FFFFFF !important;
}

.onebuy-section-personal #ast-mobile-popup .cyan_header_btn.menu-item > .menu-link {
    background: #41BEB1 !important;
    border-color: #41BEB1 !important;
    color: #FFFFFF !important;
}

/* Outlined (Login) -- currently hidden in the panel, styled so it is correct
   the moment that rule is lifted. */
.onebuy-section-org #ast-mobile-popup .cyan_header_border_btn.menu-item > .menu-link {
    background: transparent !important;
    border-color: #10394F !important;
    color: #10394F !important;
}

.onebuy-section-personal #ast-mobile-popup .cyan_header_border_btn.menu-item > .menu-link {
    background: transparent !important;
    border-color: #41BEB1 !important;
    color: #41BEB1 !important;
}

/* A little air between the nav links and the button block below them. */
#ast-mobile-popup .ast-builder-menu-2 {
    margin-top: 10px;
}


/* ==========================================================================
   Account control (avatar + name + chevron)

   The logged-in menu item is a WordPress custom link whose title holds an
   avatar <img>, a bare text node with the member's name, and Astra's chevron.
   Nothing styled it, so it inherited the default link blue and -- because the
   link becomes a flex row in the header -- the 24px avatar was stretched to
   the full 44px line height and showed as a grey rectangle.

   The item is rendered in three places (desktop secondary menu, mobile header
   widget, off-canvas panel) and only the mobile copy carries a .dashboard-menu
   class; the others are identified by menu id, which changes if the menu is
   rebuilt. :has() matches all three by their shape instead, so this keeps
   working if the menu is recreated. Browsers without :has() still get the
   avatar fix below, which needs no parent selector.
   ========================================================================== */

/* a.menu-link is in the selector to outrank Astra's
   `.ast-mobile-header-wrap a.menu-link img { border-radius: 4px }`. */
.site-header a.menu-link img.avatar,
#ast-mobile-popup a.menu-link img.avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    /* flex-basis auto + align-self center stop the row stretching it. */
    flex: 0 0 auto;
    align-self: center;
    border-radius: 50%;
    object-fit: cover;
    background: #E8EEF1;
}

.site-header .menu-item:has(> .menu-link > img.avatar) > .menu-link,
#ast-mobile-popup .menu-item:has(> .menu-link > img.avatar) > .menu-link,
.site-header .dashboard-menu > .menu-link,
#ast-mobile-popup .dashboard-menu > .menu-link {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: auto !important;
    padding: 5px 8px 5px 5px !important;
    border: 1px solid #DCE5E8;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    /* The display name is stored lower case ("parth valani"). */
    text-transform: capitalize;
    white-space: nowrap;
}

/* Astra's chevron is an inline SVG in a block span, so it stretches with the
   row like the avatar did. */
.site-header .menu-item:has(> .menu-link > img.avatar) > .menu-link .dropdown-menu-toggle,
#ast-mobile-popup .menu-item:has(> .menu-link > img.avatar) > .menu-link .dropdown-menu-toggle,
.site-header .dashboard-menu > .menu-link .dropdown-menu-toggle,
#ast-mobile-popup .dashboard-menu > .menu-link .dropdown-menu-toggle {
    display: flex !important;
    align-items: center;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-header .menu-item:has(> .menu-link > img.avatar) .ast-arrow-svg,
#ast-mobile-popup .menu-item:has(> .menu-link > img.avatar) .ast-arrow-svg,
.site-header .dashboard-menu .ast-arrow-svg,
#ast-mobile-popup .dashboard-menu .ast-arrow-svg {
    width: 11px;
    height: 11px;
}

/* The header-widget copy of this item ships an empty toggle span -- the SVG
   chevron is only in the desktop and off-canvas copies -- so draw one. The
   span itself stays: Astra binds opening the sub-menu to it, so hiding it
   would stop the account menu opening at all. :not(:has(svg)) keeps this off
   the copies that already have an icon. */
.site-header .dropdown-menu-toggle:not(:has(svg)),
#ast-mobile-popup .dropdown-menu-toggle:not(:has(svg)) {
    min-width: 14px;
    justify-content: center;
}

.site-header .menu-item:has(> .menu-link > img.avatar) .dropdown-menu-toggle:not(:has(svg))::after,
.site-header .dashboard-menu .dropdown-menu-toggle:not(:has(svg))::after {
    content: "";
    width: 7px;
    height: 7px;
    /* Rotating a square lifts its visual centre, so nudge it back down. */
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .75;
}

/* Section colours, matching the buttons beside it. */
.onebuy-section-org .site-header .menu-item:has(> .menu-link > img.avatar) > .menu-link,
.onebuy-section-org #ast-mobile-popup .menu-item:has(> .menu-link > img.avatar) > .menu-link,
.onebuy-section-org .site-header .dashboard-menu > .menu-link,
.onebuy-section-org #ast-mobile-popup .dashboard-menu > .menu-link {
    border-color: rgba(16, 57, 79, .22);
    color: #10394F !important;
    fill: #10394F;
}

.onebuy-section-personal .site-header .menu-item:has(> .menu-link > img.avatar) > .menu-link,
.onebuy-section-personal #ast-mobile-popup .menu-item:has(> .menu-link > img.avatar) > .menu-link,
.onebuy-section-personal .site-header .dashboard-menu > .menu-link,
.onebuy-section-personal #ast-mobile-popup .dashboard-menu > .menu-link {
    border-color: rgba(65, 190, 177, .45);
    color: #2A9C90 !important;
    fill: #2A9C90;
}

/* Phones: the name is a bare text node with no element of its own, so there is
   nothing to hide it with -- zeroing the font size on the row does it, and the
   avatar and chevron are elements so they are unaffected. The name is still in
   the dropdown underneath. */
@media (max-width: 600px) {

    .site-header .menu-item:has(> .menu-link > img.avatar) > .menu-link,
    .site-header .dashboard-menu > .menu-link {
        gap: 4px;
        padding: 5px 4px 5px 5px !important;
        font-size: 0;
    }
}

.ast-mobile-popup-inner .dashboard-menu {
    display: none !important;
}