/**
Theme Name: Astra Child LeanPlugins.com
Author: LeanPlugins
Author URI: http://leanplugins.test/about
Description: LeanPlugins started with a simple problem: WordPress websites are often slow because of bloated plugins. As a developer, I decided to build a solution. Our plugins are meticulously crafted to be lightweight and efficient, giving you all the power you need without the unnecessary code. The result? A faster, cleaner website and a better experience for your visitors.
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

@media (min-width: 922px) {
    .site-content .ast-container {
        display: block;
    }
}

/* Standard Image Handling - Prevents stretched/distorted images */
.responsive-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
}

/* For images in fixed-height containers (like screenshot gallery) */
.responsive-img-contained {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* For images that should fill container (cropped if needed) */
.responsive-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   CUSTOM SITE HEADER (replaces Astra masthead site-wide)
   ============================================================ */

/* Mobile menu hamburger: clear inactive vs active (open) states. */
#lp-site-header .lp-nav-toggle {
    color: #111827;            /* inactive: near-black icon */
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}
#lp-site-header .lp-nav-toggle:hover {
    background: #f3f4f6;       /* subtle gray hover */
    color: #111827;
}
#lp-site-header .lp-nav-toggle[aria-expanded="true"] {
    color: #fff;               /* active/open: brand purple pill */
    background: #492cdd;
}

/* Custom logo pulled from the Customizer, sized to fit the 64px header bar. */
#lp-site-header .lp-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
#lp-site-header .lp-logo .custom-logo {
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* Sticky header that respects the WP admin bar at every breakpoint. */
.lp-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* Admin bar is 32px tall on desktop (>782px) ... */
.admin-bar .lp-sticky {
    top: 32px;
}

/* ... and 46px on mobile (<=782px), where it is also position:fixed,
   so the sticky header must clear that height. */
@media screen and (max-width: 782px) {
    .admin-bar .lp-sticky {
        top: 46px;
    }
}

/* Native primary menu rendered inside our header: strip default list/link chrome
   so the Tailwind utilities on the <ul>/<a> control the look. */
#lp-site-header .lp-nav ul,
#lp-site-header .lp-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#lp-site-header .lp-nav a,
#lp-site-header .lp-mobile-menu a {
    color: #000; /* full black resting text */
    text-decoration: none;
    transition: color 0.15s ease;
}
#lp-site-header .lp-nav a:hover {
    color: #492cdd; /* brand purple on hover */
}

/* Header action buttons (Get Pro / Download Free): keep their own text color on
   hover/focus. Astra's a:hover repaints links to its theme color, which made the
   white "Get Pro" label vanish against the gradient. */
#lp-site-header a.text-white,
#lp-site-header a.text-white:hover,
#lp-site-header a.text-white:focus {
    color: #fff;
}
#lp-site-header a.text-gray-900:hover,
#lp-site-header a.text-gray-900:focus {
    color: #111827;
}
/* Active item: same purple highlight treatment as the dropdown hover. */
#lp-site-header .lp-nav .current-menu-item > a,
#lp-site-header .lp-nav .current-menu-ancestor > a,
#lp-site-header .lp-nav .current-menu-parent > a {
    color: #492cdd;
    background: #f0ecff;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}
#lp-site-header .lp-mobile-menu a:hover,
#lp-site-header .lp-mobile-menu .current-menu-item > a,
#lp-site-header .lp-mobile-menu .current-menu-ancestor > a,
#lp-site-header .lp-mobile-menu .current-menu-parent > a {
    color: #492cdd;
}

/* ---- Desktop dropdown (Our Plugins, etc.) ---- */
#lp-site-header .lp-nav .menu-item-has-children {
    position: relative;
}
/* Caret after a parent item */
#lp-site-header .lp-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.7;
}
#lp-site-header .lp-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    /* Use a transparent top border as the visual gap instead of margin, so there is
       no un-hoverable dead zone between the parent item and the dropdown (which
       caused the menu to flicker/jump closed while moving the cursor down). */
    border-top: 0.5rem solid transparent;
    background-clip: padding-box;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 60;
}
#lp-site-header .lp-nav .menu-item-has-children:hover > .sub-menu,
#lp-site-header .lp-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#lp-site-header .lp-nav .sub-menu li {
    list-style: none;
}
#lp-site-header .lp-nav .sub-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: #374151;
    white-space: nowrap;
}
#lp-site-header .lp-nav .sub-menu a:hover,
#lp-site-header .lp-nav .sub-menu .current-menu-item > a {
    background: #f0ecff;
    color: #492cdd;
}

/* ---- Mobile submenu (inline, indented) ---- */
#lp-site-header .lp-mobile-menu .sub-menu {
    list-style: none;
    margin: 0.25rem 0 0.25rem 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#lp-site-header .lp-mobile-menu .sub-menu a {
    color: #4b5563;
}

/* ============================================================
   HEADER RESPONSIVE LAYOUT (3 tiers)

   The header has three content groups: logo, horizontal nav, and the
   CTA group (Download Free + Purchase Pro buttons, plus the hamburger
   toggle). Tailwind's `.container` caps its width at the breakpoint max
   (768px at md, 1024px at lg, 1280px at xl), so the usable width jumps
   at 1024px and 1280px — that is why the tier boundaries sit there.

   - Mobile (<1024px):   logo + hamburger only (nav + buttons hidden).
                         Below 1024 the menu + buttons cannot share a row.
   - Tablet (1024-1279): two rows — logo centered on top, then the menu
                         left-aligned and the buttons right-aligned.
   - Desktop (>=1280):   one row — logo left, menu + buttons grouped right.
   ============================================================ */

/* Mobile: logo + hamburger only. */
@media (max-width: 1023.98px) {
    #lp-site-header .lp-nav { display: none; }
    #lp-site-header > .container > div:last-child > div:first-child { display: none; }
    #lp-site-header #lp-nav-toggle { display: inline-flex; }
    #lp-site-header #lp-mobile-nav:not(.hidden) { display: block; }
}

/* Tablet: two rows. Row 1 = logo centered. Row 2 = menu (left) + buttons (right). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    #lp-site-header > .container {
        flex-wrap: wrap;
        height: auto;
        row-gap: 0.625rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    #lp-site-header .lp-logo { flex-basis: 100%; justify-content: center; }
    #lp-site-header .lp-nav { display: flex; margin-right: auto; }
    #lp-site-header #lp-nav-toggle { display: none; }
    #lp-site-header #menu-main-menu > li > a { white-space: nowrap; }
}

/* Laptop + large: single row, logo left, menu + buttons grouped to the right. */
@media (min-width: 1280px) {
    #lp-site-header .lp-nav { margin-left: auto; }
    #lp-site-header > .container > div:last-child { margin-left: 1.5rem; }
}

/* No-CTA pages (everything except the product page): there are no action
   buttons, so the nav is right-aligned. The header carries `lp-no-cta`
   (added in html-site-header.php). Logo stays left, nav is pushed to the
   right. This also overrides the tablet two-row rules back to a single row. */
@media (min-width: 1024px) {
    #lp-site-header.lp-no-cta > .container {
        flex-wrap: nowrap;
        height: 4rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    #lp-site-header.lp-no-cta .lp-logo {
        flex-basis: auto;
        justify-content: flex-start;
    }
    #lp-site-header.lp-no-cta .lp-nav {
        display: flex;
        margin: 0 0 0 auto;
    }
    #lp-site-header.lp-no-cta > .container > div:last-child {
        margin-left: 0;
    }
}

/*
 * Link hover override for the Tailwind landing pages.
 *
 * Astra applies `a:hover { color: var(--ast-global-color-...) }`, which repaints
 * every link on these pages to its theme link-hover color, clashing with the
 * Tailwind utility colors on our buttons and links.
 *
 * Scoped to #primary.site-main so it only affects the custom landing templates.
 * `revert` drops Astra's hover color and lets the link keep the color set by its
 * own Tailwind class (text-white, text-[#492cdd], etc.). Tailwind `hover:text-*`
 * utilities still take effect: they are their own :hover rules and are not
 * touched by this reset.
 */
#primary.site-main a:hover,
#primary.site-main a:focus {
    color: revert;
}

/*
 * Links on dark, gradient, or transparent backgrounds are set to white via the
 * Tailwind `.text-white` utility. Keep them white on hover/focus so they never
 * fall back to a dark resting/link color against a dark surface. This mirrors the
 * Tailwind intent (text-white = white) and removes the need to add hover:text-white
 * to every such link by hand.
 */
#primary.site-main a.text-white,
#primary.site-main a.text-white:hover,
#primary.site-main a.text-white:focus {
    color: #fff;
}

/*
 * Pricing billing toggle pills (v2). These are <button> elements, so Astra's
 * default button theme paints them blue with its own text color, overriding the
 * Tailwind bg-white / text-gray classes. Strip the theme button chrome so the
 * Tailwind utilities on each pill control its look. Active/inactive colors are
 * still toggled in JS via bg-white / text-gray-900 / text-gray-500.
 */
#primary.site-main .lp-bill-toggle,
#primary.site-main .lp-bill-toggle:hover,
#primary.site-main .lp-bill-toggle:focus {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
    text-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
/* Re-apply the Tailwind state classes the reset above would otherwise flatten. */
#primary.site-main .lp-bill-toggle.bg-white { background-color: #fff; }
#primary.site-main .lp-bill-toggle.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
#primary.site-main .lp-bill-toggle.text-gray-900 { color: #111827; }
#primary.site-main .lp-bill-toggle.text-gray-500 { color: #6b7280; }