/*
Theme Name: Astra Child
Author: Jscriptz
Description: Child theme of Astra
Version: 1.0
Template: astra

This is the child theme for Astra theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
/* === Global background to match jscriptz.com === */

/* Use the same body background color as your homepage */
body {
    /* TODO: set this to whatever you use on jscriptz.com */
    background-color: #020617; /* example dark slate */
    color: #e5e7eb;
}

/* Kill Astra's white page wrapper so the body background shows */
.site,
.ast-plain-container,
.ast-page-builder-template .site-content > .ast-container {
    background-color: transparent;
}

/* Blog index/archive + single post spacing */
body.blog .site-main,
body.archive .site-main,
body.single-post .site-main {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

/* Post "card" style on dark background */
body.blog .entry,
body.archive .entry,
body.single-post .entry {
    background-color: rgba(15, 23, 42, 0.92);
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 2rem 2.25rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.75);
}

/* Tweak text colors for readability on dark */
body.blog .entry-title a,
body.archive .entry-title a,
body.single-post .entry-title {
    color: #e5e7eb;
}

body.blog .entry-title a:hover,
body.archive .entry-title a:hover {
    color: #38bdf8; /* accent – adjust to match your homepage */
}

body.blog .entry-meta,
body.archive .entry-meta,
body.single-post .entry-meta {
    color: #9ca3af;
}

body.blog .entry-content,
body.archive .entry-content,
body.single-post .entry-content {
    color: #e5e7eb;
}


/* === Header bar to mirror jscriptz.com === */

/* Main desktop header + mobile header background */
.main-header-bar,
.ast-mobile-header-wrap {
    /* If your homepage header is a solid color, just use background-color */
    /* background-color: #020617; */

    /* Example radial-ish dark gradient; tweak to match your homepage */
    background: radial-gradient(circle at top, #0f172a 0, #020617 55%, #020617 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

/* Site title / logo text
.site-title a {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e5e7eb;
}

.site-title a:hover {
    color: #38bdf8; /* accent
} */

/* Primary menu links
.main-header-menu > li > a,
.ast-header-custom-item a {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    font-size: 0.95rem;
    color: #e5e7eb;
    padding-inline: 0.9rem;
    padding-block: 0.55rem;
    border-radius: 9999px; /* pill */
}
*/
/* Hover + current menu item
.main-header-menu > li > a:hover,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a {
    background-color: rgba(15, 23, 42, 0.9);
    color: #38bdf8;
}*/

/* Mobile menu toggle & off-canvas */
.ast-button-wrap .menu-toggle {
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    background-color: #020617;
}
/*
.ast-mobile-popup-drawer .main-header-menu > li > a {
    padding-block: 0.75rem;
    border-radius: 0.75rem;
}*/


/* Remove Astra's active-link dot / circle */
.main-header-menu > li > a::before,
.main-header-menu > li.current-menu-item > a::before,
.main-header-menu > li.current-menu-ancestor > a::before {
    content: none !important;
    display: none !important;
}
/* === Dark theme for blog-related pages === */

/* Body background on blog index, archives, single posts */
body.blog,
body.archive,
body.single-post {
    background-color: #020617 !important; /* match jscriptz.com */
    color: #e5e7eb;
}
.ast-plain-container.ast-no-sidebar .entry-content > .alignfull, .ast-page-builder-template .ast-no-sidebar .entry-content > .alignfull{
    background-color: #020617;
}
/* Let the body background show through */
body.blog .site,
body.archive .site,
body.single-post .site,
body.blog .site-content,
body.archive .site-content,
body.single-post .site-content,
body.blog .ast-container,
body.archive .ast-container,
body.single-post .ast-container {
    background: transparent !important;
}

/* Extra breathing room */
body.blog .site-main,
body.archive .site-main,
body.single-post .site-main {
    padding-top: 3rem;
    padding-bottom: 4rem;
}
/* Blog hero title area */
body.blog .site-main > header,
body.blog .page-header,
body.blog .ast-archive-description {
    max-width: 960px;
    margin: 0 auto 2.5rem;
    text-align: left;
}

body.blog .site-main > header h1,
body.blog .page-header h1,
body.blog .ast-archive-description h1 {
    font-size: clamp(2.25rem, 3vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f9fafb;
}
/* Post cards on blog index + archives */
body.blog .site-main > article,
body.archive .site-main > article {
    background-color: rgba(15, 23, 42, 0.98);
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 2rem 2.25rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.85);
}

/* Thumbnail image inside cards */
body.blog .site-main > article img,
body.archive .site-main > article img {
    border-radius: 1.25rem;
    display: block;
    margin-bottom: 1.25rem;
}

/* Titles + links */
body.blog .site-main > article .entry-title,
body.archive .site-main > article .entry-title {
    margin-bottom: 0.5rem;
}

body.blog .site-main > article .entry-title a,
body.archive .site-main > article .entry-title a {
    color: #e5e7eb;
    text-decoration: none;
}

body.blog .site-main > article .entry-title a:hover,
body.archive .site-main > article .entry-title a:hover {
    color: #38bdf8; /* accent */
}

/* Meta + excerpt */
body.blog .site-main > article .entry-meta,
body.archive .site-main > article .entry-meta {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

body.blog .site-main > article .entry-summary,
body.archive .site-main > article .entry-summary,
body.blog .site-main > article .entry-content,
body.archive .site-main > article .entry-content {
    color: #e5e7eb;
}
/* Single post wrapper */
body.single-post .site-main > article {
    background-color: rgba(15, 23, 42, 0.98);
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 2.5rem 2.75rem;
    margin-bottom: 3rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.85);
}

/* Single post title */
body.single-post .entry-title {
    color: #f9fafb;
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: 0.75rem;
}

/* Single post meta */
body.single-post .entry-meta {
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

/* Single post body text */
body.single-post .entry-content {
    color: #e5e7eb;
}
/* --- Remove Astra's bubble / circle on active menu item --- */

.ast-desktop .main-header-menu li.current-menu-item,
.ast-desktop .main-header-menu li.current-menu-ancestor {
    box-shadow: none !important;
}

/* Kill any pseudo-elements on the <li> itself */
.ast-desktop .main-header-menu li.current-menu-item::before,
.ast-desktop .main-header-menu li.current-menu-item::after,
.ast-desktop .main-header-menu li.current-menu-ancestor::before,
.ast-desktop .main-header-menu li.current-menu-ancestor::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    background: none !important;
    border: 0 !important;
}

/* And on the link inside */
.ast-desktop .main-header-menu li.current-menu-item > a::before,
.ast-desktop .main-header-menu li.current-menu-item > a::after,
.ast-desktop .main-header-menu li.current-menu-ancestor > a::before,
.ast-desktop .main-header-menu li.current-menu-ancestor > a::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    background: none !important;
    border: 0 !important;
}
/* --- Frosted / blurred header bar to match main site --- */

.site-header,
.main-header-bar,
.ast-mobile-header-wrap {
    position: sticky;       /* sticks to top while scrolling */
    top: 0;
    z-index: 999;

    /* Dark gradient with a bit of transparency */
    background: radial-gradient(circle at top,
    rgba(15, 23, 42, 0.96) 0,
    rgba(2, 6, 23, 0.94) 55%,
    rgba(2, 6, 23, 0.98) 100%
    );

    /* Frosted glass feel */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* Slim translucent border + soft shadow */
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85);
}

/* Make sure header inner container is transparent so the frosted bg shows */
.main-header-bar .ast-container,
.ast-mobile-header-wrap .ast-container {
    background: transparent !important;
}
/* Kill the circular highlight behind primary menu items */
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item::before,
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Make sure only the link has the pill background, not the <li> */
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep the pill on the link itself */
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item > a {
    position: relative;
    z-index: 1;
}
/* === 1. Remove Astra "bubble" effect in primary header === */

/* No background / shadow on the <li> itself */
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item,
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item.current-menu-item,
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item.current-menu-ancestor,
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item.current_page_item {
    background: transparent !important;
    box-shadow: none !important;
}

/* Nuke ALL pseudo-elements that could be drawing the circle */
.ast-primary-header-bar .main-header-menu > .menu-item::before,
.ast-primary-header-bar .main-header-menu > .menu-item::after,
.ast-primary-header-bar .main-header-menu > .menu-item > a::before,
.ast-primary-header-bar .main-header-menu > .menu-item > a::after,
.ast-primary-header-bar .main-header-menu .menu-link::before,
.ast-primary-header-bar .main-header-menu .menu-link::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Re-declare the pill JUST on the link
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item > a {
    position: relative;
    z-index: 1;
    border-radius: 9999px;
    padding-inline: 0.9rem;
    padding-block: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #e5e7eb;
    background: transparent;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}*/


/* === 2A. Blog index layout: grid like "Selected Projects" === */

body.blog .site-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.25rem;
}

/* Make the blog header span full width above the cards */
body.blog .site-main > header,
body.blog .site-main > .page-header,
body.blog .site-main > .ast-archive-description {
    grid-column: 1 / -1;
}
/* === 2B. Blog cards to match Selected Projects === */

/* Dark canvas behind everything (you already mostly have this) */
body.blog {
    background-color: #020617;
}

/* Each article = one card */
body.blog .site-main > article {
    display: flex;
    flex-direction: column;
    border-radius: 1.75rem;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.9);
}

/* Featured image: keep it clean and full-bleed at the top */
body.blog .site-main > article .post-thumb,
body.blog .site-main > article .ast-blog-featured-section {
    margin: 0;
}

body.blog .site-main > article img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.75rem 1.75rem 0 0;
}

/* Card body */
body.blog .site-main > article .entry-header,
body.blog .site-main > article .entry-content,
body.blog .site-main > article .entry-summary {
    padding: 1.5rem 1.75rem 1.75rem;
    background: radial-gradient(circle at top left, #0f172a 0, #020617 55%, #020617 100%);
}

/* Title link */
body.blog .site-main > article .entry-title {
    margin-bottom: 0.25rem;
}

body.blog .site-main > article .entry-title a {
    color: #f9fafb;
    text-decoration: none;
}

body.blog .site-main > article .entry-title a:hover {
    color: #38bdf8;
}

/* Meta + excerpt text */


body.blog .site-main > article .entry-summary p,
body.blog .site-main > article .entry-content p {
    color: #e5e7eb;
    font-size: 0.95rem;
}
/* Single post page: one big card on the dark canvas */
body.single-post {
    background-color: #020617;
}


body.single-post .site-main > article {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 1.75rem;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.9);
}

body.single-post .entry-header,
body.single-post .entry-content {
    padding: 2.25rem 2.5rem 2.5rem;
    background: radial-gradient(circle at top left, #0f172a 0, #020617 55%, #020617 100%);
}


/* Fix stray white backgrounds on blog index & paged blog */
/* Astra "separate container" wrappers -> transparent so body shows through */

body.blog.ast-separate-container .site-content,
body.blog.ast-separate-container .site-content .ast-container,
body.blog.ast-separate-container .ast-archive-description,
body.blog.ast-separate-container .ast-archive-description-wrap,
body.blog.ast-separate-container .ast-row,
body.blog.ast-separate-container .ast-row .site-main {
    background-color: transparent !important;
}

/* Make sure the area around the cards is on the dark canvas */
body.blog {
    background-color: #020617 !important;
}
/* Blog grid cards – match "Selected Projects" look */
body.blog.ast-separate-container .ast-blog-layout-4-grid .ast-article-inner,
body.blog.ast-plain-container .ast-blog-layout-4-grid .ast-article-inner {
    border-radius: 1.5rem;
    overflow: hidden;
    background: radial-gradient(circle at top left,rgba(66,97,173,.18),transparent 60%),linear-gradient(180deg,#020818,#020617);
    border: 1px solid rgba(148, 163, 184, 0.35);          /* subtle outline */
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.9);        /* same vibe as main cards */
    transform: translateY(0);
    transition:
            transform 0.18s ease-out,
            box-shadow 0.18s ease-out,
            border-color 0.18s ease-out,
            background 0.18s ease-out;
}

/* Hover lift */
body.blog.ast-separate-container .ast-blog-layout-4-grid .ast-article-inner:hover,
body.blog.ast-plain-container .ast-blog-layout-4-grid .ast-article-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.95);
    border-color: rgba(148, 163, 184, 0.6);
}
/* STEP-01 / STEP-02 / STEP-03 label contrast */
.uagb-ifb-title-prefix {
    color: #e5f0ff; /* much lighter, good contrast on dark bg */
    font-weight: 500;
}

/* Footer nav contrast */
.site-primary-footer-wrap,
.site-primary-footer-wrap .menu-link,
.site-primary-footer-wrap .menu-link:visited {
    color: #e5f0ff;
}

.site-primary-footer-wrap .menu-link:hover,
.site-primary-footer-wrap .menu-link:focus {
    color: #ffffff;
}