/*
Theme Name:     Astra-child
Theme URI:      
Description:    Astra child theme.
Author:         Me
Author URI:     
Template:       astra
Version:        0.1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    /* Brand Palette */
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --accent-color: #3399ff;
    --text-color: #333333;
    --secondary-text-color: #444444;
    --text-light: #ffffff;
    --bg-color: #ffffff;
    --second-bg-color: #f5f5f5;
    --section-bg: #fafafa;

    /* Global Colors Mapping */
    --ast-global-color-0: var(--primary-color) !important;          /* Primary */
    --ast-global-color-1: var(--primary-hover) !important;          /* Primary Hover */
    --ast-global-color-2: var(--text-color) !important;             /* Text */
    --ast-global-color-3: var(--secondary-text-color) !important;   /* Heading */
    --ast-global-color-4: var(--bg-color) !important;               /* Background */
    --ast-global-color-5: var(--second-bg-color) !important;        /* Secondary BG */
    --ast-global-color-6: var(--accent-color) !important;           /* Accent / Links */
}

## Custom fixes for theme - start
/* MANDATORY — Do not remove. Hides theme-rendered page title headers; content headings are in Gutenberg blocks */
.entry-header, .entry-title {
    display: none !important;
}
/* Restore spacing between header/menu and content after hiding entry-header */
.site-content > .ast-container {
    padding-top: 2rem !important;
}
/* Fix scroll to top button color */
#ast-scroll-top {
    background-color: var(--primary-color) !important;
}
/* Remove default margins from flow layout to ensure consistent spacing */
:root :where(.is-layout-flow) > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
/* Keep navigation menu items as clean inline links — never style as cards/buttons */
.main-header-menu .menu-item {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.main-header-menu .menu-link {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Do not add padding, margin, or border-radius to theme header/footer — Astra controls their layout */
.site-header,
.site-footer {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.site-footer .site-below-footer-wrap,
.site-footer .site-above-footer-wrap {
    border: none !important;
}
## Custom fixes for theme - end

/* Typography */
body {
    font-family: 'Roboto', sans-serif !important;
    color: var(--text-color) !important;
    background-color: var(--bg-color) !important;
    line-height: 1.8 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif !important;
    color: var(--secondary-text-color) !important;
    font-weight: 500 !important;
}

/* Airy spacing - generous padding and margins */
.wp-block-group {
    padding: 3rem 1.5rem !important;
}

.section-padding {
    padding: 4rem 1.5rem !important;
}

.wp-block-heading {
    margin-bottom: 1.5rem !important;
}

.wp-block-paragraph {
    margin-bottom: 1.25rem !important;
}

/* Rounded corners */
.wp-block-button__link,
.wp-block-image img,
.wp-block-cover,
.card,
.wp-block-group {
    border-radius: 12px !important;
}

/* Primary buttons */
.wp-block-button__link {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    padding: 0.875rem 2rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.wp-block-button__link:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* Links */
a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

a:hover {
    color: var(--primary-hover) !important;
}

/* Site header */
.site-header {
    background-color: var(--second-bg-color) !important;
}

.main-header-menu a {
    color: var(--secondary-text-color) !important;
    font-weight: 400 !important;
    transition: color 0.3s ease !important;
}

.main-header-menu a:hover {
    color: var(--primary-color) !important;
}

/* Site footer */
.site-footer {
    background-color: var(--second-bg-color) !important;
    color: var(--secondary-text-color) !important;
    padding: 2rem 0 !important;
}

/* Sections with background */
.section-bg {
    background-color: var(--section-bg) !important;
}

/* Hero sections */
.hero {
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 4rem 2rem !important;
}

.hero h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
}

.hero p {
    font-size: 1.25rem !important;
    margin-bottom: 2rem !important;
    color: var(--text-color) !important;
}

/* Cover blocks with dark backgrounds */
.on-dark {
    color: var(--text-light) !important;
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6,
.on-dark p {
    color: var(--text-light) !important;
}

.on-dark .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--text-light) !important;
    color: var(--text-light) !important;
}

.on-dark .wp-block-button__link:hover {
    background-color: var(--text-light) !important;
    color: var(--primary-color) !important;
}

/* Responsive spacing */
@media (max-width: 768px) {
    .wp-block-group {
        padding: 2rem 1rem !important;
    }
    
    .section-padding {
        padding: 3rem 1rem !important;
    }
    
    .hero {
        min-height: 50vh !important;
        padding: 3rem 1.5rem !important;
    }
    
    .hero h1 {
        font-size: 2rem !important;
    }
    
    .hero p {
        font-size: 1.125rem !important;
    }
}