/*
Theme Name:   greenos
Theme URI:    https://greenos.org
Description:  greenos is a child theme of Astra.
Author:       Jason Pogodzinski
Author URI:   https://giantsponge.com
Template:     astra
Version:      1.2.1
Text Domain:  greenos
*/

/* =========================================
   0. THEME VARIABLES (COLORS)
   ========================================= */
:root {
    /* Brand Colors */
    --theme-primary:   #0274BF;  /* Teal/Blue - Buttons, H2 borders */
    --theme-secondary: #1B9C85;  /* Rose/Pink - Icons, Bullets, Nav Underlines */
    
    /* Text Colors */
    --text-main:       #333333;
    --text-medium:     #555555; /* Login help text */
    --text-light:      #666666; /* Breadcrumbs */
    --text-lighter:    #999999; /* Nav separators */
    --text-dark:       #444444; /* H3 */
    --text-blue-head:  #5555ff; /* H4 (#55f) */
    
    /* Button & Link Colors */
    --link-blue:       #0073aa;
    --btn-pill-bg:     #9eb7c2; /* Read More default */
    --btn-pill-hover:  #1c81e0; /* Read More hover */
    --white:           #ffffff;
    --black:           #000000;
    
    /* Borders & Backgrounds */
    --bg-overlay:      rgba(0, 0, 0, 0.6);
    --header-bg:       rgba(0, 0, 0, 0.9);
    --header-border:   rgba(0, 0, 0, 0.1);
    --border-light:    #dddddd;
    --border-lighter:  #eeeeee;
    --border-dotted:   #aaaaaa;
    --nav-hover:       #f0f0f0;
    
    /* Utility */
    --error-bg:        #ffe0e0;
    --shadow-soft:     rgba(0, 0, 0, 0.2);
    --shadow-card:     rgba(0, 0, 0, 0.1);
}

/* =========================================
   1. GLOBAL LAYOUT & CONTAINERS
   ========================================= */

.site .site-content #primary {
    margin-top: 0px;
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
    padding: 30px;
}

.ast-separate-container #primary, 
.ast-separate-container.ast-left-sidebar #primary, 
.ast-separate-container.ast-right-sidebar #primary {
    padding: 0;
    margin: 0em 0;
}

.ast-container, 
.ast-container-fluid {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}

.gsgallery-max-width-container {
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */

header#masthead.site-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--header-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--header-border);
}

.ast-site-title-wrap {
    padding-left: 20px;
}

.ast-builder-layout-element.site-header-focus-item.ast-header-account {
    padding-right: 20px;
}

.ast-builder-menu-1 .sub-menu,
.ast-builder-menu-1 .inline-on-mobile .sub-menu {
    border: 0;
}

/* Language Switcher */
.gt_switcher_wrapper {
    margin-left: -5%;
    margin-bottom: 29px;
}
/* =========================================
   Astra Main Menu - Active State Fix
   ========================================= */

/* 1. Target the ACTIVE link in the Main Navigation */
.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-ancestor > a,
.ast-header-break-point .main-header-menu .menu-item.current-menu-item > a {
    color: var(--white) !important;
    font-weight: bolder;
    background-color: transparent; /* Remove default grey background if present */
    position: relative; /* Needed to anchor the underline */
}

/* 2. Create the Pink Underline */
.main-navigation .menu-item.current-menu-item > a::after,
.main-navigation .menu-item.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: 0;       /* Align to bottom of the menu item */
    left: 0;
    width: 80%;     /* Span the full width of the text */
    height: 3px;    
    background: var(--white);
    pointer-events: none;
}

/* Optional: Ensure the hover state matches the active style logic */
.main-navigation .menu-item:hover > a {
    background-color: var(--nav-hover);
}
/* =========================================
   3. TYPOGRAPHY & HEADINGS
   ========================================= */

/* H1 */
h1.entry-title {
    font-size: 48px;
    font-weight: bolder;
}

body.astra-hide-featured-artist-title h1.entry-title {
    display: none !important;
}

/* H2 */
h2.entry-title.ast-blog-single-element a {
    font-size: 2rem;
    font-weight: bolder;
    line-height: 2rem;
}

h2.entry-title.ast-blog-single-element a:hover {
    text-decoration: underline;
}

h2.wp-block-heading {
    font-size: 42px;
    font-weight: 700;
    border-left: 8px solid var(--theme-primary);
    padding-left: 15px;
    margin-bottom: 20px;
    margin-top: .5em;
}

/* H3 */
h3.wp-block-heading {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    border-bottom: 2px dotted var(--border-dotted);
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* H4 */
h4.wp-block-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-blue-head);
    text-transform: none;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Line Heights */
body.archive .ast-archive-description .ast-archive-title, 
body.archive .ast-archive-description .ast-archive-title * {
    line-height: normal;
}

.archive .entry-title, 
.blog .entry-title, 
.search .entry-title {
    line-height: normal;
}

/* =========================================
   4. POSTS & ARCHIVES
   ========================================= */

/* FIXME: INCOMPLETE SELECTOR. 
   Likely meant to be .ast-post-format-standard or similar. */
article.type-post .ast-post-format- {
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Archive Descriptions */
body.archive .ast-archive-description {
    text-align: left;
    max-width: 750px !important;
    padding-top: 1em;
    padding-bottom: 3em;
    padding-left: 3em;
    padding-right: 3em;
    margin-left: auto;
    margin-right: auto;
}

/* Read More Button */
p.ast-blog-single-element.ast-read-more-container.read-more {
    padding: 8px 20px;
    background-color: var(--btn-pill-bg);
    color: var(--white);
    border-radius: 25px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

p.ast-blog-single-element.ast-read-more-container.read-more:hover {
    background-color: var(--btn-pill-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow-soft);
}

p.ast-blog-single-element.ast-read-more-container.read-more a {
    color: inherit;
    text-decoration: none;
}

p.ast-blog-single-element.ast-read-more-container.read-more a:hover {
    text-decoration: underline;
}

/* Artist Button */
a.ast-button.artist-page-button {
    font-size: 12px;
    padding: 5px 10px;
}

/* Hero Overlay */
.hero-overlay {
    position: relative;
}

.hero-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-overlay);
    z-index: 1;
}

.hero-overlay > * {
    position: relative;
    z-index: 2;
}

/* Separators */
hr.wp-block-separator {
    display: none;
}

.after-content-shortcode > * {
    text-align: center;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   5. LISTS & CATEGORIES
   ========================================= */

/* Conflicting rule commented out by user */
/* ul.wp-block-list li {
    margin-left: 30px;
} 
*/

ol.wp-block-list li {
    margin-left: 60px;
}

ul.children li {
    margin-left: 10px;
}
 
/* .wp-block-categories-list {
   margin-left: 10%;
} */

ul.wp-block-categories-list li {
    list-style: none;
    position: relative;
    padding-left: 10px;
}

ul.wp-block-categories-list li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--theme-secondary);
    font-weight: bold;
    margin-right: 5px;
}

/* Main List Style (Overrides the commented-out rule above) */
ul.wp-block-list li {
    list-style: none;
    position: relative;
    padding-left: 10px;
    margin-left: 0px;
}

ul.wp-block-list li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--theme-primary);
    font-weight: bold;
    margin-right: 5px;
}

/* =========================================
   6. COMMENTS & FORMS
   ========================================= */

details.comment-collapse summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    margin: 1em 0;
}

.comment-form-wrapper {
    margin-top: 1em;
}

.login-to-comment {
    margin: 1.5em 0;
    font-style: italic;
    color: var(--text-medium);
}

.login-to-comment a {
    text-decoration: underline;
    color: var(--link-blue);
}

.comment-author {
    display: none;
}

.comment-meta.commentmetadata {
    display: none;
}

#primary > .comments-area {
    display: none;
}

.comments {
    border: 2px dashed var(--border-lighter);
    padding: 1em;
}

/* .comment-content {} */

#wd_captcha6 {
    width: 150px;
}

/* Custom Login Form */
.custom-login-wrapper {
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
    background-color: var(--white);
    box-shadow: 0 10px 30px var(--shadow-card);
    border-radius: 8px;
    font-family: inherit;
}

.custom-login-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.custom-login-wrapper label {
    font-weight: bold;
    font-size: 14px;
}

.custom-login-wrapper input[type="text"],
.custom-login-wrapper input[type="password"] {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    width: 100%;
    box-sizing: border-box;
}

.custom-login-wrapper input[type="submit"] {
    background-color: var(--theme-primary);
    color: var(--white);
    border: none;
    padding: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.custom-login-wrapper input[type="submit"]:hover {
    background-color: var(--theme-primary);
}

.custom-login-wrapper .login-error {
    background: var(--error-bg);
    border: 1px solid var(--theme-primary);
    padding: 0.75rem;
    border-radius: 4px;
    color: var(--theme-primary);
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
}

.custom-login-wrapper .login-remember label {
    font-weight: normal;
}

.custom-login-wrapper .login-submit,
.custom-login-wrapper .login-remember {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-login-wrapper p.forgetmenot,
.custom-login-wrapper .login .forgetmenot {
    margin: 0 auto;
    text-align: center;
}

/* =========================================
   7. SEARCH & SIDEBARS
   ========================================= */

#secondary {
    margin: 0em 0 2.5em;
}

.astra-search-form-container {
    text-align: center;
}

/* =========================================
   8. MISC / COOKIES / CUSTOM ELEMENTS
   ========================================= */

body > div.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    visibility: hidden;
}

/* Breadcrumbs */
.custom-breadcrumb {
    background-color: var(--white);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-lighter);
    text-align: center;
    line-height: 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.custom-breadcrumb a {
    text-decoration: none;
}

.custom-breadcrumb a:hover {
    text-decoration: underline;
}

.heart-icon {
    width: 2rem;
    height: 2rem;
    fill: var(--theme-secondary);
}

/* =========================================
   9. CUSTOM CATEGORY NAVIGATION
   ========================================= */

/* Theme categories work */
.top-category-nav {
    background-color: var(--white);
    padding: 0;
    position: relative;
    z-index: 101;
}

.top-category-nav ul {
    list-style: none;
    margin: 0;
    padding: 0px 0;
    text-align: center;
}

.top-category-nav li {
    display: inline-block;
    padding: 4px 6px;
    position: relative;
    transition: background-color 0.2s ease;
}

.top-category-nav a {
    text-decoration: none;
    display: block;
    padding: 5px 5px;
}

.top-category-nav a:hover {
    text-decoration: none;
}

/* Top-Level Nav Styles */
.top-category-nav.top-level-nav {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0;
}

.top-category-nav.top-level-nav a {
    font-size: .85rem;
    font-weight: bold;
    color: var(--text-main);
}

/* Sub-Level Nav Styles */
.top-category-nav.sub-level-nav {
    border-bottom: 1px solid var(--border-lighter);
    padding-top: 0;
}

.top-category-nav.sub-level-nav a {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 0px 5px;
}

/* Hover and Active Styles */
.top-category-nav li:hover {
    background-color: var(--nav-hover);
}

.top-category-nav li.active-cat-parent {
    background-color: transparent;
}

.top-category-nav li.active-cat-parent a {
    color: var(--black) !important;
    font-weight: bolder;
    position: relative;
}

.top-category-nav.sub-level-nav li.active-cat-parent a {
    color: var(--black) !important;
}

.top-category-nav li.active-cat-parent a::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--theme-secondary);
    position: absolute;
    bottom: 0;
    left: 0;
}

.top-category-nav li.nav-separator {
    padding: 0 5px;
    pointer-events: none;
}

.top-category-nav li.nav-separator span {
    font-weight: 500;
    color: var(--text-lighter);
    font-size: 1rem;
    padding: 5px 0;
    display: inline-block;
}

/* =========================================
   10. MEDIA QUERIES
   ========================================= */

@media (max-width: 921px) {
    header.entry-header:not(.related-entry-header) {
        text-align: center;
    }

    .ast-header-break-point .site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
        /* display: grid; */
        padding: 10px;
    }

    h1,
    .entry-content :where(h1) {
        text-align: center;
    }

    body.archive .ast-archive-description p {
        font-size: 1.1rem;
        line-height: 1.4rem;
    }

    h1.entry-title {
        font-size: 30px;
        font-weight: bolder;
    }

    h2.wp-block-heading {
        /* text-align: center; */
        font-size: 28px;
    }
}