/**
 * Theme Name: Astra SV Child - Neo Brutalist
 * Author: Stream Vulture
 * Description: Neo-brutalist child theme for Astra. Applies hard offset shadows, bold borders, pill-shaped tags, and a high-contrast black/white/hot-pink color scheme to Astra's native blog grid, single posts, header, and footer. All styling is CSS-only — no template overrides, no hook manipulation.
 * Version: 2.0.2
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: astra-sv-child
 * Template: astra
 */

/* Design tokens are loaded via separate <link> tag — see functions.php enqueue */

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

body {
    font-family: var( --nb-font-sans ) !important;
    background-color: var( --nb-gray-bg ) !important;
    color: var( --nb-black );
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var( --nb-font-sans );
    letter-spacing: -0.02em;
    font-weight: 800;
}

a {
    color: var( --nb-black );
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var( --nb-transition );
}

a:hover {
    color: var( --nb-pink );
}

::selection {
    background-color: var( --nb-pink );
    color: var( --nb-white );
}

/* ============================================
   BLOG GRID — POST CARDS
   ============================================ */

/* Remove Astra's default soft shadow; use our border instead */
.ast-blog-layout-4-grid .ast-article-inner,
.ast-blog-layout-6-grid .ast-article-inner {
    background: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-lg ) !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: var( --nb-transition );
    height: 100%;
}

.ast-blog-layout-4-grid .ast-article-inner:hover,
.ast-blog-layout-6-grid .ast-article-inner:hover {
    transform: translate( -3px, -3px );
    box-shadow: var( --nb-shadow-md ) !important;
}

/* Card spacing between grid columns */
.ast-blog-layout-4-grid .ast-article-post,
.ast-blog-layout-6-grid .ast-article-post {
    margin-bottom: 2rem;
}

/* Inner content padding */
.ast-blog-layout-4-grid .post-content,
.ast-blog-layout-6-grid .post-content {
    padding: var( --nb-space-6 );
}

/* ============================================
   FEATURED IMAGES (BLOG GRID)
   ============================================ */

.ast-blog-featured-section .post-thumb-img-content {
    border-bottom: var( --nb-border ) !important;
    margin-bottom: 0;
}

.ast-blog-featured-section img {
    width: 100%;
    height: 220px !important;
    object-fit: cover !important;
    display: block;
}

/* ============================================
   CATEGORY & TAG LINKS — PILL STYLE
   ============================================ */

.cat-links a,
.tags-links a,
.ast-taxonomy-container.cat-links a,
.ast-taxonomy-container.tags-links a {
    display: inline-flex !important;
    align-items: center;
    padding: 0.25rem 0.75rem !important;
    background: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-xl ) !important;
    font-size: var( --nb-text-xs ) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: var( --nb-black ) !important;
    transition: var( --nb-transition );
    line-height: 1.6;
}

.cat-links a:hover,
.tags-links a:hover,
.ast-taxonomy-container.cat-links a:hover,
.ast-taxonomy-container.tags-links a:hover {
    transform: translate( -2px, -2px );
    box-shadow: var( --nb-shadow-sm ) !important;
    color: var( --nb-black ) !important;
}

/* Badge-style categories (Astra option) */
.ast-taxonomy-container.cat-links.badge a {
    background: var( --nb-black );
    color: var( --nb-white );
}

/* ============================================
   POST TITLES (BLOG GRID)
   ============================================ */

.entry-title,
.entry-title a {
    text-decoration: none !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var( --nb-black );
    transition: var( --nb-transition );
}

.entry-title a:hover {
    color: var( --nb-pink ) !important;
}

.ast-blog-layout-4-grid .entry-title,
.ast-blog-layout-6-grid .entry-title {
    font-size: var( --nb-text-xl );
    margin-bottom: var( --nb-space-3 );
    line-height: 1.3;
}

/* ============================================
   POST META (BLOG GRID)
   ============================================ */

.entry-meta {
    font-size: var( --nb-text-sm );
    color: var( --nb-gray-dark );
}

.entry-meta a {
    color: var( --nb-gray-dark );
    text-decoration: none;
}

.entry-meta a:hover {
    color: var( --nb-black );
}

.posted-on .published,
.posted-on .updated {
    font-weight: 500;
}

/* ============================================
   EXCERPT
   ============================================ */

.ast-excerpt-container {
    font-size: var( --nb-text-base );
    color: var( --nb-gray-dark );
    line-height: 1.6;
}

.ast-excerpt-container p {
    margin: 0 0 var( --nb-space-4 ) 0;
}

/* ============================================
   READ MORE BUTTON
   ============================================ */

.ast-read-more-container a,
.read-more a {
    display: inline-flex !important;
    align-items: center;
    padding: var( --nb-space-2 ) var( --nb-space-4 ) !important;
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-sm ) !important;
    font-weight: 600 !important;
    font-size: var( --nb-text-sm );
    text-decoration: none !important;
    transition: var( --nb-transition );
    line-height: 1.5;
}

.ast-read-more-container a:hover,
.read-more a:hover {
    transform: translate( -2px, -2px );
    box-shadow: var( --nb-shadow-md );
    color: var( --nb-white ) !important;
    background: var( --nb-black ) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.ast-pagination .page-numbers,
.ast-pagination a,
.ast-pagination span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var( --nb-space-3 );
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-sm ) !important;
    font-weight: 600 !important;
    font-size: var( --nb-text-sm );
    text-decoration: none !important;
    color: var( --nb-black );
    transition: var( --nb-transition );
    margin: 0 2px;
}

.ast-pagination .page-numbers.current,
.ast-pagination .current {
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
}

.ast-pagination a:hover {
    transform: translate( -1px, -1px );
    box-shadow: var( --nb-shadow-sm ) !important;
}

.ast-pagination .dots {
    border: none;
    background: none;
}

/* ============================================
   SINGLE POST LAYOUT
   ============================================ */

.ast-article-single {
    background: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-lg ) !important;
    padding: var( --nb-space-12 ) !important;
    box-shadow: var( --nb-shadow-md ) !important;
}

.ast-single-post .entry-title,
.single .entry-title {
    font-size: var( --nb-text-5xl );
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var( --nb-space-4 );
}

@media ( max-width: 543px ) {
    .ast-single-post .entry-title,
    .single .entry-title {
        font-size: var( --nb-text-3xl );
    }
}

/* Single post featured image */
.ast-single-post-featured-section .post-thumb-img-content,
.single-post .post-thumb-img-content {
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-md ) !important;
    overflow: hidden;
    margin-bottom: var( --nb-space-8 );
}

.ast-single-post-featured-section img,
.single-post .post-thumb-img-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   SINGLE POST CONTENT TYPOGRAPHY
   ============================================ */

.entry-content {
    font-size: var( --nb-text-lg );
    line-height: 1.8;
    color: var( --nb-black );
}

.entry-content p {
    margin-bottom: var( --nb-space-6 );
}

.entry-content h2 {
    font-size: var( --nb-text-3xl );
    font-weight: 700;
    margin-top: var( --nb-space-10 );
    margin-bottom: var( --nb-space-4 );
}

.entry-content h3 {
    font-size: var( --nb-text-2xl );
    font-weight: 700;
    margin-top: var( --nb-space-8 );
    margin-bottom: var( --nb-space-3 );
}

.entry-content a {
    text-decoration: underline;
    text-decoration-color: var( --nb-pink );
    text-underline-offset: 3px;
    color: var( --nb-black );
}

.entry-content a:hover {
    color: var( --nb-pink );
}

.entry-content img {
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-md ) !important;
}

.entry-content blockquote {
    border-left: 4px solid var( --nb-black );
    padding-left: var( --nb-space-6 );
    margin: var( --nb-space-8 ) 0;
    font-style: italic;
    font-size: var( --nb-text-xl );
    color: var( --nb-gray-dark );
}

.entry-content ul,
.entry-content ol {
    margin-bottom: var( --nb-space-6 );
    padding-left: var( --nb-space-6 );
}

.entry-content li {
    margin-bottom: var( --nb-space-2 );
}

.entry-content code {
    font-family: var( --nb-font-mono );
    background: var( --nb-gray-bg );
    padding: 2px 6px;
    border-radius: var( --nb-radius-sm );
    border: 1px solid var( --nb-gray-light );
    font-size: 0.9em;
}

.entry-content pre {
    background: var( --nb-black );
    color: var( --nb-white );
    padding: var( --nb-space-6 );
    border-radius: var( --nb-radius-md );
    overflow-x: auto;
    margin: var( --nb-space-6 ) 0;
    border: var( --nb-border );
}

.entry-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* Single post tags */
.single .tags-links {
    display: flex;
    flex-wrap: wrap;
    gap: var( --nb-space-2 );
    margin-top: var( --nb-space-8 );
    padding-top: var( --nb-space-6 );
    border-top: var( --nb-border );
}

/* ============================================
   HEADER (Astra Header Builder)
   ============================================ */

.ast-primary-header-bar {
    border-bottom: var( --nb-border ) !important;
    background: var( --nb-white ) !important;
}

#ast-desktop-header {
    border-bottom: var( --nb-border ) !important;
    background: var( --nb-white ) !important;
}

/* Header menu links — pill hover effect */
.main-header-menu > li > a,
.ast-builder-menu-1 .menu-item > a {
    border-radius: var( --nb-radius-xl ) !important;
    font-weight: 600 !important;
    font-size: var( --nb-text-base );
    transition: var( --nb-transition );
    border: 2px solid transparent !important;
}

.main-header-menu > li > a:hover,
.ast-builder-menu-1 .menu-item > a:hover {
    border-color: var( --nb-black ) !important;
    transform: translate( -1px, -1px );
    box-shadow: 2px 2px 0 0 var( --nb-black ) !important;
}

/* Current menu item */
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current_page_item > a {
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
}

/* Header CTA button (if using Astra button component) */
.ast-header-button-1 .ast-button {
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-sm ) !important;
    font-weight: 600 !important;
    transition: var( --nb-transition );
}

.ast-header-button-1 .ast-button:hover {
    transform: translate( -2px, -2px );
    box-shadow: var( --nb-shadow-md ) !important;
    background: var( --nb-pink ) !important;
    color: var( --nb-black ) !important;
}

/* Site title in header */
.site-title,
.site-logo-img {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.site-title a {
    text-decoration: none;
    color: var( --nb-black );
}

.site-title a:hover {
    color: var( --nb-black );
}

/* Mobile header */
#ast-mobile-header {
    border-bottom: var( --nb-border ) !important;
    background: var( --nb-white ) !important;
}

.ast-mobile-header-wrap .ast-button {
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
}

/* ============================================
   FOOTER (Astra Footer Builder)
   ============================================ */

.site-footer {
    background: var( --nb-black ) !important;
    color: var( --nb-white );
    border-top: 4px solid var( --nb-pink );
}

.site-footer a {
    color: var( --nb-white );
    text-decoration: none;
    opacity: 0.8;
    transition: var( --nb-transition );
}

.site-footer a:hover {
    color: var( --nb-pink );
    opacity: 1;
}

.site-footer .widget-title,
.site-footer .ast-footer-widget-title {
    color: var( --nb-white );
    font-weight: 700;
    font-size: var( --nb-text-lg );
}

.site-footer .widget {
    color: rgba( 255, 255, 255, 0.8 );
}

.site-footer .widget a {
    color: rgba( 255, 255, 255, 0.8 );
}

.site-footer .widget a:hover {
    color: var( --nb-pink );
}

/* Footer copyright text */
.ast-footer-copyright {
    color: rgba( 255, 255, 255, 0.7 );
    font-size: var( --nb-text-sm );
}

/* Footer menu (rendered from the 'nb_footer_menu' location) */
.nb-footer-menu {
    display: flex;
    justify-content: center;
    padding: var( --nb-space-4 ) var( --nb-space-6 ) 0;
}

.nb-footer-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var( --nb-space-6 );
    list-style: none;
    margin: 0;
    padding: 0;
}

.nb-footer-menu a {
    font-size: var( --nb-text-sm );
    text-decoration: none;
}

/* Footer social icons */
.site-footer .ast-builder-social-element {
    border: 2px solid rgba( 255, 255, 255, 0.3 ) !important;
    border-radius: 50%;
    color: var( --nb-white ) !important;
    transition: var( --nb-transition );
}

.site-footer .ast-builder-social-element:hover {
    border-color: var( --nb-white ) !important;
    background: var( --nb-white );
    color: var( --nb-black ) !important;
    transform: translate( -1px, -1px );
    box-shadow: 2px 2px 0 0 rgba( 255, 255, 255, 0.3 );
}

/* ============================================
   SIDEBAR / WIDGETS
   ============================================ */

#secondary .widget {
    background: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-md ) !important;
    padding: var( --nb-space-6 ) !important;
    margin-bottom: var( --nb-space-6 );
}

#secondary .widget:last-child {
    margin-bottom: 0;
}

#secondary .widget-title {
    font-weight: 700;
    font-size: var( --nb-text-lg );
    margin-bottom: var( --nb-space-4 );
    padding-bottom: var( --nb-space-3 );
    border-bottom: 2px solid var( --nb-gray-light );
}

#secondary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#secondary ul li {
    padding: var( --nb-space-2 ) 0;
    border-bottom: 1px solid var( --nb-gray-light );
}

#secondary ul li:last-child {
    border-bottom: none;
}

#secondary ul li a {
    text-decoration: none;
    color: var( --nb-black );
}

#secondary ul li a:hover {
    color: var( --nb-pink );
}

/* ============================================
   COMMENTS
   ============================================ */

.comments-area {
    background: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-lg ) !important;
    padding: var( --nb-space-8 ) !important;
    margin-top: var( --nb-space-8 );
}

.comments-title {
    font-size: var( --nb-text-2xl );
    font-weight: 700;
}

.ast-comment {
    border-bottom: 2px solid var( --nb-gray-light );
    padding-bottom: var( --nb-space-4 );
}

#respond .submit,
#respond .ast-button {
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-sm ) !important;
    padding: var( --nb-space-3 ) var( --nb-space-6 ) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: var( --nb-transition );
}

#respond .submit:hover,
#respond .ast-button:hover {
    transform: translate( -2px, -2px );
    box-shadow: var( --nb-shadow-md );
    color: var( --nb-white );
    background: var( --nb-black );
}

/* ============================================
   CONTAINER WIDTH
   ============================================ */

.site-content .ast-container {
    max-width: 76rem;
}

/* ============================================
   SEARCH FORM
   ============================================ */

.widget_search .search-field {
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-sm ) !important;
    padding: var( --nb-space-3 ) var( --nb-space-4 ) !important;
    font-family: var( --nb-font-sans );
    font-size: var( --nb-text-base );
}

.widget_search .search-submit {
    background: var( --nb-black ) !important;
    color: var( --nb-white ) !important;
    border: var( --nb-border ) !important;
    border-radius: var( --nb-radius-sm ) !important;
    padding: var( --nb-space-3 ) var( --nb-space-6 ) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: var( --nb-transition );
}

.widget_search .search-submit:hover {
    transform: translate( -2px, -2px );
    box-shadow: var( --nb-shadow-md );
}

/* ============================================
   404 / SEARCH RESULTS
   ============================================ */

.error-404 .page-title,
.search .page-title {
    font-size: var( --nb-text-5xl );
    font-weight: 800;
    margin-bottom: var( --nb-space-6 );
}

/* ============================================
   RESPONSIVE GRID — 1 COLUMN ON MOBILE
   ============================================ */

@media ( max-width: 768px ) {
    .ast-blog-layout-4-grid .ast-article-post,
    .ast-blog-layout-6-grid .ast-article-post {
        width: 100% !important;
    }

    .ast-article-single {
        padding: var( --nb-space-6 );
    }
}

/* ============================================
   CONTENT WIDTH FOR SINGLE POSTS
   ============================================ */

.ast-single-post .entry-content,
.single .entry-content {
    max-width: 48rem;
    margin: 0 auto;
}