/*
Theme Name:   DeepMagpie Child
Theme URI:    https://deepmagpie.com
Description:  Child theme for deepmagpie.com — built on Astra
Author:       Hashan Ruchira
Author URI:   https://deepmagpie.com
Template:     astra
Version:      1.2.0
Text Domain:  deepmagpie-child
*/

/* ============================================================
   IMPORTS & FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    --dm-black:       #0a0a0a;
    --dm-dark:        #111827;
    --dm-gray-dark:   #374151;
    --dm-gray:        #6b7280;
    --dm-gray-light:  #9ca3af;
    --dm-border:      #e5e7eb;
    --dm-bg:          #f9fafb;
    --dm-white:       #ffffff;
    --dm-accent:      #1d4ed8;
    --dm-accent-dark: #1e40af;
    --dm-accent-soft: #eff6ff;
    --dm-gold:        #d97706;
    --dm-red:         #dc2626;

    --dm-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --dm-font-heading: 'DM Serif Display', Georgia, serif;

    --dm-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --dm-shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --dm-shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

    --dm-radius:     6px;
    --dm-radius-lg:  12px;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
    font-family: var(--dm-font-body) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--dm-dark) !important;
    background-color: var(--dm-bg) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-article-post-title,
.post-title {
    font-family: var(--dm-font-heading) !important;
    color: var(--dm-black) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem) !important; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem) !important; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important; }
h4 { font-size: 1.2rem !important; }

p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: var(--dm-gray-dark) !important;
    margin-bottom: 1.25rem !important;
}

a {
    color: var(--dm-accent) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: var(--dm-accent-dark) !important;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header,
#masthead,
.ast-site-header-wrap {
    background-color: var(--dm-white) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    box-shadow: var(--dm-shadow-sm) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.ast-logo-title-inline .site-title a,
.site-title a {
    font-family: var(--dm-font-heading) !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: var(--dm-black) !important;
    letter-spacing: -0.02em;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.main-navigation,
#site-navigation,
.ast-main-header-bar,
.ast-primary-header-bar {
    background: var(--dm-white) !important;
}

.main-navigation a,
.ast-main-navigation > li > a,
.menu-item > a {
    font-family: var(--dm-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--dm-gray-dark) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 0.75rem !important;
    transition: color 0.2s ease !important;
}

.main-navigation a:hover,
.ast-main-navigation > li > a:hover,
.menu-item > a:hover,
.current-menu-item > a {
    color: var(--dm-accent) !important;
}

/* Dropdown */
.ast-main-navigation .sub-menu,
.main-navigation .sub-menu {
    background: var(--dm-white) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: var(--dm-radius) !important;
    box-shadow: var(--dm-shadow-md) !important;
    min-width: 200px !important;
}

.main-navigation .sub-menu a,
.ast-main-navigation .sub-menu a {
    font-size: 0.85rem !important;
    text-transform: none !important;
    padding: 0.5rem 1rem !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

.main-navigation .sub-menu li:last-child a {
    border-bottom: none !important;
}

/* ============================================================
   CATEGORY / TOPIC LABELS
   ============================================================ */
.category-label,
.ast-article-inner-wrap .cat-links a,
.entry-meta .cat-links a,
.post-meta .cat-links a,
.ast-woocommerce-container .cat-links a {
    display: inline-block !important;
    background: var(--dm-accent) !important;
    color: var(--dm-white) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================================
   ARTICLE / POST CARDS
   ============================================================ */
.ast-article-post,
.ast-article-inner-wrap,
article.type-post {
    background: var(--dm-white) !important;
    border-radius: var(--dm-radius-lg) !important;
    border: 1px solid var(--dm-border) !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    margin-bottom: 1.5rem !important;
}

.ast-article-post:hover,
.ast-article-inner-wrap:hover {
    box-shadow: var(--dm-shadow-lg) !important;
    transform: translateY(-2px) !important;
}

.ast-article-post .entry-title a,
.ast-article-inner-wrap .entry-title a {
    color: var(--dm-black) !important;
    font-family: var(--dm-font-heading) !important;
}

.ast-article-post .entry-title a:hover,
.ast-article-inner-wrap .entry-title a:hover {
    color: var(--dm-accent) !important;
}

/* Thumbnail images */
.ast-article-post .wp-post-image,
.ast-article-inner-wrap .wp-post-image,
.post-thumbnail img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.ast-article-post:hover .wp-post-image,
.ast-article-inner-wrap:hover .wp-post-image {
    transform: scale(1.03) !important;
}

.ast-article-post .ast-blog-featured-section,
.ast-article-inner-wrap .ast-blog-featured-section {
    overflow: hidden !important;
}

/* Post meta (date, author) */
.entry-meta,
.posted-on,
.byline {
    font-size: 0.8rem !important;
    color: var(--dm-gray-light) !important;
    font-family: var(--dm-font-body) !important;
}

/* ============================================================
   FEATURED / HERO POST
   ============================================================ */
.ast-archive-description,
.blog-layout-1 .ast-article-post:first-child,
.featured-post {
    border-radius: var(--dm-radius-lg) !important;
    overflow: hidden !important;
}

/* ============================================================
   SECTION HEADINGS (widget titles)
   ============================================================ */
.widget-title,
.widgettitle,
.wp-block-heading,
h2.wp-block-heading {
    font-family: var(--dm-font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--dm-gray) !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid var(--dm-accent) !important;
    margin-bottom: 1.25rem !important;
}

/* ============================================================
   FIX 1 — UAGB HERO CONTAINER FULL-WIDTH
   Root cause: uagb-container-inner-blocks-wrap has
   align-items:center (flex column), which collapses the post
   grid to its min-content width instead of filling the container.
   The hero is NOT a sidebar layout — it's ast-no-sidebar with a
   Spectra/UAGB page-builder template.
   ============================================================ */
.wp-block-uagb-container.uagb-block-c457815b > .uagb-container-inner-blocks-wrap {
    align-items: stretch !important;
}

/* Force the post grid itself to fill the stretched container */
.uagb-block-e7380393.wp-block-uagb-post-grid,
.uagb-block-e7380393 {
    width: 100% !important;
    min-width: 0 !important;
}

/* ============================================================
   FIX 2 — UAGB POST GRID TITLE TEXT BREAKING
   The title element inside Spectra post grids is .uagb-post__title,
   NOT .entry-title. Previous rules targeted the wrong selector.
   The UAGB-generated CSS sets padding-right:450px on the post
   card — intentional for the background-image bleed zone.
   Font must be small enough to fit the remaining ~650px text area.
   ============================================================ */
.uagb-post__title,
.uagb-post__title a,
.uagb-post__title .uagb-text-link {
    font-family: var(--dm-font-heading) !important;
    font-size: clamp(1rem, 2vw, 1.75rem) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    line-height: 1.3 !important;
    color: var(--dm-white) !important;
}

/* Date in post meta also inherits bad wrapping */
.uagb-post__date,
.uagb-post__author {
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    word-break: normal !important;
}

/* ============================================================
   FIX 3 — HIDE EMPTY UAGB POST GRIDS AND THEIR SECTIONS
   UAGB renders data-total="0" on grids with no matching posts.
   This is the reliable, direct selector — no :has() guessing.
   ============================================================ */

/* Hide the grid itself */
.wp-block-uagb-post-grid[data-total="0"] {
    display: none !important;
}

/* Hide the parent UAGB container section when its grid has no posts */
.wp-block-uagb-container:has(.wp-block-uagb-post-grid[data-total="0"]):not(:has(.wp-block-uagb-post-grid[data-total]:not([data-total="0"]))) {
    display: none !important;
}

/* Section heading orphan — hide heading + separator if the
   sibling grid is also hidden */
.wp-block-uagb-advanced-heading:has(+ .wp-block-uagb-post-grid[data-total="0"]),
.wp-block-uagb-advanced-heading + .wp-block-uagb-post-grid[data-total="0"] {
    display: none !important;
}

/* Fallback: "No post found!" text nodes that UAGB renders
   inside the grid wrapper when data-total > 0 but filter matches 0 */
.uagb-post__inner-wrap:only-child > p:only-child,
.uagb-post-grid-inner > p {
    display: none !important;
}

/* Hide broken/empty ad images */
img[src=""],
img:not([src]),
img[src*="placeholder"],
img[src*="dummy"] {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* ============================================================
   FIX 4 — SECTION/WIDGET HEADINGS NO-WRAP
   "PODCAS\nTS" breaks because the UAGB heading element has
   no white-space constraint and the container is narrow.
   ============================================================ */
.uagb-heading-text,
.widget-title,
.widgettitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.ast-sidebar-widget-area,
#secondary,
.widget-area {
    background: transparent !important;
}

.widget {
    background: var(--dm-white) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: var(--dm-radius-lg) !important;
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--dm-shadow-sm) !important;
}

/* ============================================================
   BUTTONS & CTA
   ============================================================ */
.ast-button,
.wp-block-button__link,
.button,
input[type="submit"],
button[type="submit"] {
    background: var(--dm-accent) !important;
    color: var(--dm-white) !important;
    font-family: var(--dm-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: var(--dm-radius) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    letter-spacing: 0.02em !important;
}

.ast-button:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--dm-accent-dark) !important;
    transform: translateY(-1px) !important;
    color: var(--dm-white) !important;
}

/* ============================================================
   NEWSLETTER / SUBSCRIPTION FORM
   ============================================================ */
.newsletter-section,
[class*="subscribe"],
[class*="newsletter"] {
    background: var(--dm-dark) !important;
    border-radius: var(--dm-radius-lg) !important;
    padding: 2.5rem !important;
    color: var(--dm-white) !important;
}

[class*="subscribe"] h2,
[class*="subscribe"] h3,
[class*="newsletter"] h2,
[class*="newsletter"] h3 {
    color: var(--dm-white) !important;
}

.newsletter-section input[type="email"],
[class*="subscribe"] input[type="email"] {
    border-radius: var(--dm-radius) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 0.65rem 1rem !important;
    font-family: var(--dm-font-body) !important;
    background: rgba(255,255,255,0.1) !important;
    color: var(--dm-white) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon,
.ast-footer-wrap {
    background: var(--dm-dark) !important;
    color: var(--dm-gray-light) !important;
    border-top: 3px solid var(--dm-accent) !important;
    padding-top: 3rem !important;
}

.site-footer a,
#colophon a {
    color: var(--dm-gray-light) !important;
    transition: color 0.2s ease !important;
}

.site-footer a:hover,
#colophon a:hover {
    color: var(--dm-white) !important;
}

.site-footer .widget-title,
#colophon .widget-title,
.site-footer .widgettitle {
    color: var(--dm-white) !important;
    border-bottom-color: var(--dm-gold) !important;
}

.site-footer p,
#colophon p {
    color: var(--dm-gray-light) !important;
    font-size: 0.875rem !important;
}

.ast-footer-copyright {
    background: var(--dm-black) !important;
    color: var(--dm-gray) !important;
    font-size: 0.8rem !important;
    padding: 1rem 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.ast-breadcrumbs,
.breadcrumb {
    background: transparent !important;
    font-size: 0.8rem !important;
    color: var(--dm-gray-light) !important;
    padding: 0.75rem 0 !important;
}

.ast-breadcrumbs a,
.breadcrumb a {
    color: var(--dm-accent) !important;
}

/* ============================================================
   SINGLE POST / ARTICLE CONTENT
   ============================================================ */
.entry-content {
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
    color: var(--dm-gray-dark) !important;
    max-width: 740px !important;
}

.entry-content h2,
.entry-content h3 {
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
}

.entry-content blockquote {
    border-left: 4px solid var(--dm-accent) !important;
    padding: 1rem 1.5rem !important;
    background: var(--dm-accent-soft) !important;
    border-radius: 0 var(--dm-radius) var(--dm-radius) 0 !important;
    font-style: italic !important;
    color: var(--dm-gray-dark) !important;
    margin: 1.5rem 0 !important;
}

.entry-content code,
.entry-content pre {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 0.875rem !important;
    background: var(--dm-bg) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: var(--dm-radius) !important;
    padding: 0.2em 0.5em !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.page-numbers,
.ast-pagination a,
.nav-links a {
    border: 1px solid var(--dm-border) !important;
    border-radius: var(--dm-radius) !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.875rem !important;
    color: var(--dm-gray-dark) !important;
    transition: all 0.2s ease !important;
}

.page-numbers.current,
.ast-pagination a:hover,
.nav-links a:hover {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-white) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    body {
        font-size: 15px !important;
    }

    .widget {
        padding: 1rem !important;
    }

    .ast-article-post .wp-post-image,
    .ast-article-inner-wrap .wp-post-image {
        height: 180px !important;
    }

    .site-footer,
    #colophon {
        padding-top: 2rem !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.15rem !important; }
}

/* ============================================================
   UTILITY — READING PROGRESS / SCROLL FEEL
   ============================================================ */
html {
    scroll-behavior: smooth;
}

*:focus-visible {
    outline: 2px solid var(--dm-accent) !important;
    outline-offset: 3px !important;
}

::selection {
    background: var(--dm-accent) !important;
    color: var(--dm-white) !important;
}