/**
Theme Name: Astra Child Theme
Theme URI: https://wpastra.com/
Author: wsa
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra Child theme
Version: 1.0
Template: astra
/* Note: The CSS files are loaded from assets/css/ folder. */

:root {
    --hero-title-start: #65BDAE;
    --coral-bright: #D7FF81;
    --hero-title-end: #dff0ed;

    /* --hero-title-start: #ED5F53;
    --coral-bright: #9F857C;
    --hero-title-end: #65BDAE; */

    --hero-title-start2: #65BDAE;
    --coral-bright2: #65BDAE;
    --hero-title-end2: #65BDAE;


    --primaryaccentgradient: linear-gradient(135deg, var(--hero-title-start) 0%, var(--coral-bright) 52%, var(--hero-title-end) 100%);
    --primarybuttongradient: linear-gradient(90deg, var(--hero-title-start2) 0%, var(--coral-bright2) 50%, var(--hero-title-end2) 100%);
    --primaryaccentcolor: var(--primaryaccentgradient);
    /* Use this when a solid color is required (e.g. text color) */
    --primaryaccentcolorsolid: var(--hero-title-start);
    /* --primarybuttoncolor: var(--primarybuttongradient); */
    /* --primarybuttoncolor: #16e9c6; */
    --primarybuttoncolor: #93d89d;

    --primarybuttontextcolor: #121212;
    --primarytextcolor: #999999;
}

.site-info:after {
    content: none !important;
}

.ast-footer-copyright {
    content: none !important;
}

/**
 * BOF to make the header fixed.
 */
#ast-desktop-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* Adjust the z-index as needed */
    /*    background-color: #000000;*/
}

#ast-mobile-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* Adjust the z-index as needed */
    /*    background-color: #000000;*/
}

/* Ensure header stays fixed in all scenarios */
#ast-desktop-header,
#ast-mobile-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Primary menu: green only for non-selected items (selected keeps theme default) */
.main-header-menu .menu-item:not(.current-menu-item):not(.current_page_item)>a,
.main-header-menu .menu-item:not(.current-menu-item):not(.current_page_item)>.menu-link,
#ast-desktop-header .main-header-menu .menu-item:not(.current-menu-item):not(.current_page_item)>a,
#ast-desktop-header .main-header-menu .menu-item:not(.current-menu-item):not(.current_page_item)>.menu-link,
#ast-mobile-header .main-header-menu .menu-item:not(.current-menu-item):not(.current_page_item)>a,
#ast-mobile-header .main-header-menu .menu-item:not(.current-menu-item):not(.current_page_item)>.menu-link {
    color: #999999;
}

/*Adjust body padding to prevent content from hiding behind the fixed header */
body {
    padding-top: 1%;
    background-color: #121212;

}

/* Default heading color */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #F2F2F2 !important;
}

.ast-separate-container {
    background-color: #121212;
}

.ast-separate-container .ast-article-single:not(.ast-related-post) {
    background-color: #121212;
    color: #999999;
    /* Set text color to white */
}

.ast-separate-container .ast-article-single:not(.ast-related-post) h1,
.ast-separate-container .ast-article-single:not(.ast-related-post) h2,
.ast-separate-container .ast-article-single:not(.ast-related-post) h3,
.ast-separate-container .ast-article-single:not(.ast-related-post) h4,
.ast-separate-container .ast-article-single:not(.ast-related-post) h5,
.ast-separate-container .ast-article-single:not(.ast-related-post) h6 {
    color: #999999;
    /* Set all heading colors to white */
}




/* Next Styling*/
/* Next Styling*/
.homepage-div {
    align-items: stretch;
    /* Align items to stretch vertically */
    justify-content: space-between;
    max-width: 100%;
    display: flex;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 6.5%;
}


.homepage-text-div {
    max-width: 50%;
    width: 100%;
    line-height: 1.5;
    display: flex;
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Align items to the left horizontally */
    flex-direction: column;
    color: #999999;
    text-align: right;
    /* Ensure text is left-aligned */
    font-size: 30px;
}

.headtextspan-homepage-text-div {
    width: 100%;
    font-size: 50px;
    font-weight: bold;
    color: #F2F2F2 !important;
}

/* Keep homepage headline on one line (desktop) */
@media (min-width: 768px) {
    .headtextspan-homepage-text-div {
        white-space: nowrap;
        font-size: clamp(36px, 3.2vw, 50px);
        text-align: left;
    }
}

.focus-headtextspan-homepage-text-div {
    background: var(--primaryaccentcolor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /*green yellow*/
    font-weight: bold;
}

.subtextspan-homepage-text-div {
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 50px;
    width: 100%;
}

.homepage-subpoints {
    margin: 0;
}

.homepage-subpoints>div {
    padding-left: 1.25rem !important;
    margin: 0.25rem 0;
}

/* Homepage text column alignment overrides */
.homepage-text-div .subtextspan-homepage-text-div {
    text-align: left;
}

.homepage-text-div .launch-row-desktop {
    justify-content: center;
}

/* Launching soon + Join Waitlist same row */
.launch-row,
.launch-row-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Mobile copy: hidden on desktop, shown on mobile (below image) */
.launch-row-mobile {
    display: none;
}

.waitlist-cta-button,
.waitlist-submit {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primarybuttontextcolor);
    background: var(--primarybuttoncolor);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Make homepage "JOIN WAITLIST" more prominent on desktop */
@media (min-width: 768px) {
    .launch-row-desktop .waitlist-cta-button {
        padding: 0.9rem 1.75rem;
        font-size: 1.125rem;
        border-radius: 10px;
    }
}

/* Tablet tuning (including iPad 1024x1366) */
@media (min-width: 768px) and (max-width: 1100px) {
    .homepage-div {
        margin-top: 10%;
        gap: 2rem;
        align-items: center;
    }

    .homepage-text-div {
        max-width: 56%;
        font-size: 24px;
        align-items: flex-start;
        text-align: left;
    }

    .headtextspan-homepage-text-div {
        white-space: normal;
        font-size: clamp(42px, 4.4vw, 50px);
    }

    .subtextspan-homepage-text-div {
        margin-left: 0;
        margin-bottom: 2rem;
    }

    .homepage-images-div {
        max-width: 44%;
    }

    .homepage-images-div .app-ss-image {
        max-height: 460px;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
}

.waitlist-cta-button:visited {
    color: var(--primarybuttontextcolor);
}

.waitlist-cta-button:hover,
.waitlist-submit:hover {
    background: var(--primarybuttoncolor);
    color: #ffffff;
}

.waitlist-submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

/* Waitlist page section (left-aligned) */
#join-waitlist {
    scroll-margin-top: 100px;
}

.waitlist-section {
    width: 100%;
    max-width: 480px;
    margin: 2rem 0;
    padding: 0 5%;
    text-align: left;
}

.waitlist-section-title {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #F2F2F2;
}

.waitlist-success-message {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(131, 219, 93, 0.35);
    background: rgba(131, 219, 93, 0.08);
    border-radius: 10px;
    color: #F2F2F2;
}

.waitlist-intro {
    margin: 0.25rem 0 0.6rem 0;
}

.waitlist-submit-error {
    margin-top: 0.75rem;
    color: #ef4444;
    font-size: 0.9rem;
}

.waitlist-field-error {
    margin-top: 0.35rem;
    color: #ef4444;
    font-size: 0.85rem;
}

.waitlist-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.waitlist-benefits li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #999999;
    line-height: 1.4;
}

.waitlist-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primaryaccentgradient);
}

.waitlist-form {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 0.75rem 0;
}

.waitlist-field {
    margin-bottom: 1rem;
}

.waitlist-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F2F2F2;
    margin-bottom: 0.25rem;
}

.waitlist-field .optional {
    font-weight: 400;
    color: #999999;
}

.waitlist-field input,
.waitlist-field select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #F2F2F2;
    box-sizing: border-box;
}

.waitlist-field textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #F2F2F2;
    box-sizing: border-box;
    max-height: 72px;
    resize: vertical;
}

.waitlist-field input::placeholder {
    color: #666;
}

.waitlist-field textarea::placeholder {
    color: #666;
}

.waitlist-field-desc {
    display: block;
    font-size: 0.75rem;
    color: #999999;
    margin-top: 0.25rem;
    line-height: 1.3;
}



.homepage-images-div {
    max-width: 50%;
    width: 100%;
}

.homepage-images-div .app-ss-image {
    display: block;
    max-height: 500px;
    margin: 20px auto;
    width: auto;

}

/* Homepage embedded waitlist (hidden until CTA click) */
.homepage-waitlist-container {
    width: 100%;
    padding: 0 5%;
    margin: 2rem 0 0 0;
}

/* Store buttons styling */
.homepage-images-div .download-links {
    text-align: center;
    margin-top: 20px;
}

.homepage-images-div .store-button {
    margin: 5px;
    width: auto;
    height: 50px;
    /* Ensure the buttons aren't too large */
}

.mobile-social-icons-div {
    margin-top: 50px;
    display: none;
}

.mobile-download-buttons {
    display: none;
}

.download-buttons {
    display: block;
}

/* For body text */
.custom-center-div {
    width: 100%;
    text-align: center;
}

/* Team page shortcode */
.team-page-section {
    width: 100%;
    max-width: 900px;
    padding: 0 5%;
    margin: 2rem auto;
}

.team-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.team-member-card {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.5rem;
    text-align: center;
}

.team-member-photo {
    width: 220px;
    height: 220px;
    border-radius: 999px;
    border: 4px solid #8a8a8a;
    object-fit: cover;
    margin: 0 auto 1rem;
    display: block;
}

.team-member-name {
    /* color: var(--primarytextcolor); */
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.12rem 0;
}

.team-member-role {
    color: var(--primarytextcolor);
    font-size: 1rem;
    line-height: 1.25;
    margin: 0 0 0.6rem 0;
}

.team-member-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primarytextcolor);
}

.team-member-linkedin-icon {
    width: 5rem;
    /* height: 28px; */
    display: block;
}

.team-member-linkedin:hover {
    color: #93d89d;
    opacity: 0.9;
}


/* For about us and contact us image div */
.wp-block-uagb-container {
    max-height: 300px;
    margin-bottom: 50px;
}




/* BOF Media query for mobile devices */
@media (max-width: 767px) {
    .homepage-div {
        margin-top: 35%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
        flex-direction: column;
    }

    .homepage-div .custom-center-div {
        display: none;
    }

    .subtextspan-homepage-text-div {
        margin-bottom: 0px;
        margin-left: 5px;
        text-align: center !important;
    }

    .launch-row,
    .launch-row-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1rem;
    }

    /* .launch-row-desktop {
        display: none;
    } */

    .waitlist-section {
        margin-left: auto;
        margin-right: auto;
        padding: 0 5%;
    }

    .homepage-text-div {
        align-items: flex-start;
        text-align: center;
        font-size: 16px;
        margin-bottom: 5%;
    }

    .headtextspan-homepage-text-div {
        font-size: 25px;
        white-space: normal;
    }

    .mobile-social-icons-div {
        display: block;
    }

    .mobile-download-buttons {
        display: block;
    }

    .download-buttons {
        display: none;
    }

    .ast-separate-container {
        padding-top: 25%;
    }

    /* Keep 2 team columns side by side on mobile too */
    .team-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .team-member-card {
        padding: 0.75rem;
    }

    .team-member-photo {
        width: 120px;
        height: 120px;
    }

     .team-member-name {
        font-size: 0.75rem!important; 
        margin: 0 0 0.1rem 0;
    }

    .team-member-role {
        font-size: 0.7rem!important; 
        margin: 0 0 0.5rem 0;
    } 

    .team-member-linkedin-icon {
        width: 3.5rem;
        /* height: 30px; */
    }


}

/* EOF Media query for mobile devices */