/*
Theme Name: Ancient Games Child
Theme URI: https://ancientgames.org
Description: Custom child theme for ancientgames.org - Ancient games and their modern descendants
Author: ancientgames.org
Author URI: https://ancientgames.org
Template: astra
Version: 1.2.0
Text Domain: ancientgames-child
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --ag-primary: #8B4513;
    --ag-secondary: #C19A6B;
    --ag-bg: #FDF8F0;
    --ag-text: #2C1810;
    --ag-accent: #B8860B;
    --ag-card: #F5EDE0;
    --ag-border: #D4C4A8;
    --ag-link-hover: #6B3410;
    --ag-footer-bg: #2C1810;
    --ag-footer-text: #E8DDD0;

    --ast-global-color-0: #8B4513 !important;
    --ast-global-color-1: #6B3410 !important;
    --ast-global-color-2: #2C1810 !important;
    --ast-global-color-3: #2C1810 !important;
    --ast-global-color-4: #FDF8F0 !important;
    --ast-global-color-5: #B8860B !important;
    --ast-global-color-6: #F5EDE0 !important;
    --ast-global-color-7: #FDF8F0 !important;
    --ast-normal-container-width: 1200px !important;
    --ast-narrow-container-width: 1200px !important;
}

/* ==========================================================================
   Global
   ========================================================================== */
body {
    background-color: var(--ag-bg) !important;
    color: var(--ag-text) !important;
    font-family: 'Crimson Text', Georgia, serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.site-title, .site-title a,
.entry-title, .entry-title a,
.page-title, .ast-archive-title {
    font-family: 'MedievalSharp', Georgia, cursive !important;
    color: var(--ag-primary) !important;
    font-weight: 400 !important;
}

h1, .entry-title { font-size: 2.4rem !important; }
h2, .entry-content h2 { font-size: 1.8rem !important; margin-top: 2rem; }
h3, .entry-content h3 { font-size: 1.4rem !important; }
h4 { font-size: 1.2rem !important; }

.entry-content {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: var(--ag-text) !important;
}

.entry-content p {
    margin-bottom: 1.25em;
}

/* UI / Meta fonts */
.entry-meta, .post-navigation, .comments-area, .widget,
.site-footer, nav, .breadcrumb, .ast-breadcrumbs, .ag-breadcrumbs {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
    color: var(--ag-primary) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: var(--ag-link-hover) !important;
}

.entry-content a {
    text-decoration: underline;
    text-decoration-color: var(--ag-secondary);
    text-underline-offset: 2px;
}

.entry-content a:hover {
    text-decoration-color: var(--ag-primary);
}

/* ==========================================================================
   Header
   ========================================================================== */
.ast-primary-header-bar,
.ast-above-header-bar,
#ast-desktop-header .ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap,
#masthead {
    background-color: var(--ag-footer-bg) !important;
}

.site-title, .ast-site-identity .site-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.site-title a, .ast-site-identity .site-title a {
    font-family: 'MedievalSharp', cursive !important;
    color: var(--ag-secondary) !important;
    font-size: 1.8rem !important;
    display: inline-block !important;
    visibility: visible !important;
    letter-spacing: 0.02em;
}

.site-title a:hover {
    color: #fff !important;
}

/* Nav menu */
.ast-builder-menu .menu-item > a,
.ast-header-break-point .ast-builder-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > .menu-link,
.main-header-menu .menu-item > .menu-link {
    color: var(--ag-footer-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ast-builder-menu .menu-item > a:hover,
.ast-builder-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item > .menu-link:hover {
    color: var(--ag-accent) !important;
}

.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .ast-mobile-menu-trigger-minimal {
    color: var(--ag-secondary) !important;
}

.ast-hfb-header .ast-builder-menu .menu-item > a,
.ast-mobile-popup-drawer .menu-item > a {
    color: var(--ag-text) !important;
}

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.ast-container,
.site-content .ast-container,
.ast-narrow-container .site-content > .ast-container,
.ast-narrow-container .ast-container,
.ast-plain-container .site-content > .ast-container,
.ast-separate-container .site-content > .ast-container,
.ast-separate-container .ast-container {
    max-width: 1200px !important;
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}

.ast-plain-container .ast-article-single,
.ast-separate-container .ast-article-single,
.ast-narrow-container .ast-article-single {
    max-width: 100% !important;
    width: 100% !important;
}

.ast-plain-container .entry-content,
.ast-separate-container .entry-content,
.ast-narrow-container .entry-content,
.entry-content {
    max-width: 100% !important;
    width: 100% !important;
}

.ast-narrow-container .site-content > .ast-container {
    max-width: 1200px !important;
}

/* ==========================================================================
   Single Post Layout — CLEAN, no border, no card box
   ========================================================================== */
.ast-separate-container .ast-article-single,
.ast-plain-container .ast-article-single,
.ast-narrow-container .ast-article-single,
article.post,
article.page {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 1.5rem 0 !important;
    margin-bottom: 2rem;
}

.ast-separate-container .ast-article-single .entry-header .entry-title {
    margin-bottom: 0.5rem;
}

/* Featured image — clean, no border */
.ast-article-single .post-thumb img,
.ast-article-single .wp-post-image {
    border-radius: 4px;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Archive / Blog Cards — subtle, shadow only on hover
   ========================================================================== */
.ast-separate-container .ast-article-post,
.ast-plain-container .ast-article-post {
    background: var(--ag-card) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
}

.ast-separate-container .ast-article-post:hover,
.ast-plain-container .ast-article-post:hover {
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.12);
    transform: translateY(-2px);
}

/* Blog grid */
@media (min-width: 769px) {
    .ast-separate-container .ast-row,
    .ast-plain-container .ast-row,
    .ast-blog-grid-2 .ast-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }

    .ast-separate-container .ast-col-md-6,
    .ast-plain-container .ast-col-md-6,
    .ast-blog-grid-2 .ast-col-md-6 {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* Featured images in cards — clean */
.ast-article-post .post-thumb img,
.ast-article-post .ast-blog-featured-section img {
    border-radius: 4px;
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    border: none;
}

.ast-article-post .entry-title {
    font-size: 1.3rem !important;
    margin-top: 0.75rem;
}

.ast-article-post .entry-title a {
    color: var(--ag-primary) !important;
}

.ast-article-post .entry-title a:hover {
    color: var(--ag-accent) !important;
}

/* ==========================================================================
   Blockquotes — subtle, no heavy borders
   ========================================================================== */
blockquote,
.wp-block-quote {
    border-left: 3px solid var(--ag-accent) !important;
    background: transparent !important;
    padding: 0.5rem 1.5rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 0;
    font-style: italic;
    color: var(--ag-text) !important;
}

blockquote cite,
.wp-block-quote cite {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--ag-primary) !important;
    display: block;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Images in content — NO borders
   ========================================================================== */
.entry-content img {
    border-radius: 4px;
    border: none !important;
}

.wp-block-image figcaption,
.entry-content .wp-caption-text {
    font-size: 0.8rem;
    color: var(--ag-primary);
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================================================
   Buttons / CTAs
   ========================================================================== */
.ast-button,
.wp-block-button__link,
.entry-content .wp-block-button__link {
    background-color: var(--ag-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease;
    text-decoration: none !important;
}

.ast-button:hover,
.wp-block-button__link:hover {
    background-color: var(--ag-primary) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer,
.ast-footer-overlay,
.ast-small-footer,
footer.site-footer,
.ast-footer-copyright,
.site-below-footer-wrap,
.ast-builder-footer-grid-columns {
    background-color: var(--ag-footer-bg) !important;
    color: var(--ag-footer-text) !important;
}

.site-footer a, .ast-footer-copyright a {
    color: var(--ag-secondary) !important;
}

.site-footer a:hover {
    color: #fff !important;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.ag-breadcrumbs-wrap {
    background: var(--ag-card);
    border-bottom: 1px solid var(--ag-border);
    width: 100%;
}

.ag-breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
}

.ag-breadcrumbs, .ag-breadcrumbs a, .ag-breadcrumbs span {
    font-size: 0.8rem !important;
    color: var(--ag-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.ag-breadcrumbs a:hover {
    color: var(--ag-accent) !important;
}

.ag-breadcrumbs .breadcrumb_last {
    color: var(--ag-text) !important;
    font-weight: 600;
}

/* ==========================================================================
   Entry Meta
   ========================================================================== */
.entry-meta, .entry-meta a, .entry-meta span {
    color: var(--ag-primary) !important;
    font-size: 0.85rem !important;
}

.entry-meta a:hover {
    color: var(--ag-link-hover) !important;
}

/* ==========================================================================
   Category Labels
   ========================================================================== */
.cat-links a, .entry-meta .cat-links a {
    background: var(--ag-accent) !important;
    color: #fff !important;
    padding: 0.15rem 0.6rem;
    border-radius: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
}

.cat-links a:hover {
    background: var(--ag-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.entry-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    border: none;
    overflow: hidden;
}

.entry-content th {
    background: var(--ag-primary) !important;
    color: #fff !important;
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.entry-content td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--ag-border);
}

.entry-content tr:nth-child(even) td {
    background: rgba(193, 154, 107, 0.06);
}

/* ==========================================================================
   Stackable Blocks
   ========================================================================== */
.stk-block-heading__text {
    font-family: 'MedievalSharp', cursive !important;
    color: var(--ag-primary) !important;
}

/* ==========================================================================
   Main content background
   ========================================================================== */
.ast-separate-container .ast-article-post,
.ast-separate-container #primary {
    background: transparent !important;
}

.site-content, #content.site-content {
    background: var(--ag-bg) !important;
}

.ast-separate-container #primary > .ast-container {
    background: transparent !important;
}

/* ==========================================================================
   Stackable Hero — limit height on homepage
   ========================================================================== */
.stk-block-hero .stk-block-hero__content {
    min-height: 350px !important;
    max-height: 400px !important;
}

/* ==========================================================================
   Lists
   ========================================================================== */
.entry-content ul, .entry-content ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.entry-content li {
    margin-bottom: 0.4em;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 768px) {
    h1, .entry-title { font-size: 1.8rem !important; }
    h2, .entry-content h2 { font-size: 1.4rem !important; }

    body, .entry-content {
        font-size: 16px !important;
    }

    article.post, article.page {
        padding: 1rem 0 !important;
    }

    .site-title a, .ast-site-identity .site-title a {
        font-size: 1.3rem !important;
    }
}

/* ==========================================================================
   Scroll-to-top
   ========================================================================== */
.ast-scroll-top-icon {
    background-color: var(--ag-primary) !important;
    border: none !important;
}

.ast-scroll-top-icon:hover {
    background-color: var(--ag-accent) !important;
}

/* ==========================================================================
   Page background between posts (archive)
   ========================================================================== */
.ast-separate-container .ast-row {
    background: transparent !important;
}
