/**
 * Modern Light Theme Styles for Python Scraper
 * Inspired by videoplus.ro - Clean, minimal, modern design
 */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --modern-white: #ffffff;
    --modern-gray-50: #f9fafb;
    --modern-gray-100: #f3f4f6;
    --modern-gray-200: #e5e7eb;
    --modern-gray-300: #d1d5db;
    --modern-gray-400: #9ca3af;
    --modern-gray-500: #6b7280;
    --modern-gray-600: #4b5563;
    --modern-gray-700: #374151;
    --modern-gray-800: #1f2937;
    --modern-gray-900: #111827;
    --modern-blue-500: #3b82f6;
    --modern-blue-600: #2563eb;
    --modern-blue-700: #1d4ed8;
    --modern-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --modern-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --modern-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --modern-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --modern-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --modern-radius: 0.5rem;
    --modern-radius-lg: 0.75rem;
    --modern-radius-xl: 1rem;
}

/* ========================================
   GLOBAL BODY STYLES
   ======================================== */
body {
    background-color: var(--modern-gray-50) !important;
}

/* ========================================
   MODERN HEADER STYLES
   ======================================== */

/* Header wrapper - sticky with shadow */
#masthead,
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    transition: box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Header bars - clean white background with subtle shadow */
.ast-primary-header-bar,
.ast-primary-header,
.main-header-bar,
.site-primary-header-wrap,
.ast-above-header-bar,
.ast-above-header,
.site-above-header-wrap {
    background-color: var(--modern-white) !important;
    box-shadow: var(--modern-shadow-sm) !important;
    border-bottom: 1px solid var(--modern-gray-200) !important;
}

/* Reduce navbar height - compact header */
.ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap,
.ast-desktop .ast-primary-header-bar .site-primary-header-wrap,
#ast-desktop-header .ast-primary-header-bar {
    min-height: auto !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.ast-primary-header-bar .ast-builder-grid-row,
.ast-desktop .ast-builder-grid-row {
    min-height: 50px !important;
    align-items: center !important;
}

/* Reduce logo container padding */
.ast-builder-layout-element[data-section="title_tagline"],
.site-branding,
.ast-site-identity {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reduce logo image size to fit compact header */
.site-logo-img .custom-logo-link img,
.custom-logo {
    max-height: 40px !important;
    width: auto !important;
}

/* Compact menu items */
.main-header-menu .menu-item > .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    line-height: 1.3 !important;
}

/* Header row alignment */
.ast-primary-header-bar .ast-builder-grid-row > .site-header-primary-section-left,
.ast-primary-header-bar .ast-builder-grid-row > .site-header-primary-section-right,
.ast-primary-header-bar .ast-builder-grid-row > .site-header-primary-section-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove default Astra borders */
.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
    border-bottom-width: 0 !important;
}

/* Add shadow to entire header */
#masthead {
    box-shadow: var(--modern-shadow) !important;
}

/* Mobile header */
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-wrap .ast-above-header-bar {
    background-color: var(--modern-white) !important;
}

/* ========================================
   NAVIGATION STYLES
   ======================================== */

/* Navigation links - Gray with smooth transitions */
.main-header-menu .menu-item > .menu-link,
.ast-header-menu-1 .menu-item > .menu-link,
.ast-builder-menu .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link,
[data-section="section-hb-menu-1"] .menu-item > .menu-link,
.ast-above-header .main-header-menu .menu-item > .menu-link,
.ast-primary-header .main-header-menu .menu-item > .menu-link {
    color: var(--modern-gray-700) !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}

/* Navigation hover - Blue color */
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .menu-item:focus > .menu-link,
.ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item:hover > .menu-link,
[data-section="section-hb-menu-1"] .menu-item:hover > .menu-link {
    color: var(--modern-blue-600) !important;
}

/* Active menu item */
.main-header-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-item.current-menu-ancestor > .menu-link {
    color: var(--modern-blue-600) !important;
}

/* Submenu styles */
.main-header-menu .sub-menu,
.ast-builder-menu .main-header-menu .sub-menu {
    background-color: var(--modern-white) !important;
    border: 1px solid var(--modern-gray-200) !important;
    border-radius: var(--modern-radius) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    padding: 0.5rem 0 !important;
}

.main-header-menu .sub-menu .menu-item > .menu-link {
    color: var(--modern-gray-700) !important;
    padding: 0.5rem 1rem !important;
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link {
    color: var(--modern-blue-600) !important;
    background-color: var(--modern-gray-50) !important;
}

/* ========================================
   LOGO & SITE IDENTITY
   ======================================== */

/* Replace custom logo PNG with new SVG logo */
.site-logo-img .custom-logo-link {
    display: block !important;
    background: url('../images/pythonscraper-logo.svg') no-repeat left center !important;
    background-size: contain !important;
    width: 220px !important;
    height: 55px !important;
}

/* Hide the original PNG image */
.site-logo-img .custom-logo-link img,
.custom-logo-link .custom-logo {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fallback: If site title is shown instead of logo */
.ast-site-identity .site-title a,
.site-title a {
    display: inline-block !important;
    background: url('../images/pythonscraper-logo.svg') no-repeat center center !important;
    background-size: contain !important;
    width: 200px !important;
    height: 50px !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

/* Site title hover */
.ast-site-identity .site-title a:hover,
.site-logo-img .custom-logo-link:hover {
    opacity: 0.9 !important;
}

/* Site description */
.ast-site-identity .site-description {
    color: var(--modern-gray-500) !important;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .site-logo-img .custom-logo-link {
        width: 180px !important;
        height: 45px !important;
    }
    
    .ast-site-identity .site-title a,
    .site-title a {
        width: 160px !important;
        height: 40px !important;
    }
}

@media (max-width: 480px) {
    .site-logo-img .custom-logo-link {
        width: 150px !important;
        height: 38px !important;
    }
    
    .ast-site-identity .site-title a,
    .site-title a {
        width: 140px !important;
        height: 35px !important;
    }
}

/* ========================================
   MOBILE MENU STYLES
   ======================================== */

/* Mobile toggle button */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
    color: var(--modern-gray-700) !important;
    border: none !important;
    background: transparent !important;
}

.mobile-menu-toggle-icon .ast-mobile-svg {
    fill: var(--modern-gray-700) !important;
}

/* Mobile menu popup */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-header-content {
    background-color: var(--modern-white) !important;
}

/* Mobile menu links */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
    color: var(--modern-gray-700) !important;
    font-weight: 500 !important;
}

.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link {
    color: var(--modern-blue-600) !important;
    background-color: var(--modern-gray-100) !important;
}

/* Mobile menu toggle */
.ast-builder-menu-mobile .main-navigation .menu-item > .ast-menu-toggle {
    color: var(--modern-gray-500) !important;
}

/* Mobile popup close button */
.ast-mobile-popup-drawer.active .menu-toggle-close {
    color: var(--modern-gray-700) !important;
}

/* ========================================
   BLOG CARDS - MODERN LAYOUT
   ======================================== */

/* Main content area */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li {
    background-color: var(--modern-white) !important;
    border-radius: var(--modern-radius-lg) !important;
    box-shadow: var(--modern-shadow) !important;
    border: 1px solid var(--modern-gray-200) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* Blog post cards hover effect */
.ast-separate-container .ast-article-post:hover {
    box-shadow: var(--modern-shadow-lg) !important;
    transform: translateY(-2px) !important;
}

/* Post inner content */
.ast-article-post .ast-article-inner {
    background-color: transparent !important;
    border-radius: var(--modern-radius-lg) !important;
    overflow: hidden !important;
}

/* Post thumbnails */
.ast-article-post .post-thumb-img-content img,
.ast-article-post .ast-blog-featured-section img {
    border-radius: var(--modern-radius-lg) var(--modern-radius-lg) 0 0 !important;
}

/* Post titles */
.ast-article-post .entry-title,
.ast-article-post .entry-title a {
    color: var(--modern-gray-900) !important;
    font-weight: 600 !important;
    transition: color 0.15s ease !important;
}

.ast-article-post .entry-title a:hover {
    color: var(--modern-blue-600) !important;
}

/* Post meta */
.ast-article-post .entry-meta,
.ast-article-post .entry-meta * {
    color: var(--modern-gray-500) !important;
}

.ast-article-post .entry-meta a:hover {
    color: var(--modern-blue-600) !important;
}

/* Post excerpt */
.ast-article-post .entry-content p,
.ast-article-post .ast-excerpt-container {
    color: var(--modern-gray-600) !important;
}

/* Category/taxonomy labels */
.ast-article-post .cat-links a,
.ast-blog-single-element.ast-taxonomy-container a {
    color: var(--modern-blue-600) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.ast-article-post .cat-links a:hover {
    color: var(--modern-blue-700) !important;
}

/* Read more link */
.ast-article-post .ast-read-more-container a,
.ast-article-post .read-more a,
.ast-article-post .read-more-link,
.read-more-container .read-more-link {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--modern-blue-600) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    margin-top: 0.75rem !important;
}

.ast-article-post .ast-read-more-container a:hover,
.ast-article-post .read-more a:hover,
.ast-article-post .read-more-link:hover,
.read-more-container .read-more-link:hover {
    color: var(--modern-blue-700) !important;
}

/* Read more arrow */
.read-more-arrow {
    display: inline-block !important;
    margin-left: 0.375rem !important;
    transition: transform 0.15s ease !important;
}

.read-more-link:hover .read-more-arrow {
    transform: translateX(4px) !important;
}

/* Read more container */
.read-more-container {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* ========================================
   SIDEBAR STYLES
   ======================================== */

#secondary {
    background-color: transparent !important;
}

#secondary .widget {
    background-color: var(--modern-white) !important;
    border-radius: var(--modern-radius-lg) !important;
    box-shadow: var(--modern-shadow) !important;
    border: 1px solid var(--modern-gray-200) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

#secondary .widget-title {
    color: var(--modern-gray-900) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid var(--modern-gray-100) !important;
}

#secondary .widget a {
    color: var(--modern-blue-600) !important;
    transition: color 0.15s ease !important;
}

#secondary .widget a:hover {
    color: var(--modern-blue-700) !important;
}

#secondary .widget ul li {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--modern-gray-100) !important;
}

#secondary .widget ul li:last-child {
    border-bottom: none !important;
}

/* ========================================
   BUTTONS
   ======================================== */

.ast-button,
.ast-custom-button,
button,
input[type="submit"],
.wp-block-button__link {
    background-color: var(--modern-blue-600) !important;
    color: var(--modern-white) !important;
    border: none !important;
    border-radius: var(--modern-radius) !important;
    font-weight: 500 !important;
    padding: 0.625rem 1.25rem !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.ast-button:hover,
.ast-custom-button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--modern-blue-700) !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   SEARCH STYLES
   ======================================== */

.ast-header-search .astra-search-icon,
.ast-search-menu-icon .ast-icon {
    color: var(--modern-gray-700) !important;
    fill: var(--modern-gray-700) !important;
}

.ast-header-search .astra-search-icon:hover {
    color: var(--modern-blue-600) !important;
    fill: var(--modern-blue-600) !important;
}

.search-form .search-field {
    border: 1px solid var(--modern-gray-300) !important;
    border-radius: var(--modern-radius) !important;
    background-color: var(--modern-white) !important;
}

.search-form .search-field:focus {
    border-color: var(--modern-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.site-footer {
    background-color: var(--modern-white) !important;
    border-top: 1px solid var(--modern-gray-200) !important;
}

.site-footer .site-info {
    color: var(--modern-gray-500) !important;
}

.site-footer a {
    color: var(--modern-gray-600) !important;
}

.site-footer a:hover {
    color: var(--modern-blue-600) !important;
}

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

.ast-pagination a,
.ast-pagination span {
    border-radius: var(--modern-radius) !important;
}

.ast-pagination .page-numbers {
    background-color: var(--modern-white) !important;
    border: 1px solid var(--modern-gray-300) !important;
    color: var(--modern-gray-700) !important;
}

.ast-pagination .page-numbers:hover {
    background-color: var(--modern-gray-50) !important;
    border-color: var(--modern-blue-500) !important;
    color: var(--modern-blue-600) !important;
}

.ast-pagination .page-numbers.current {
    background-color: var(--modern-blue-600) !important;
    border-color: var(--modern-blue-600) !important;
    color: var(--modern-white) !important;
}

/* ========================================
   LINKS AND TYPOGRAPHY
   ======================================== */

a {
    color: var(--modern-blue-600) !important;
    transition: color 0.15s ease !important;
}

a:hover {
    color: var(--modern-blue-700) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title {
    color: var(--modern-gray-900) !important;
}

/* Body text */
body, p {
    color: var(--modern-gray-700) !important;
}

/* ========================================
   SMOOTH SCROLLING
   ======================================== */
html {
    scroll-behavior: smooth;
}

/* ========================================
   CONTENT CONTAINER REFINEMENTS
   ======================================== */

.ast-separate-container #primary {
    background-color: transparent !important;
}

.ast-separate-container .ast-article-post {
    margin-bottom: 1.5rem !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 921px) {
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-mobile-header-wrap .ast-above-header-bar {
        box-shadow: var(--modern-shadow) !important;
    }
    
    .ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
        box-shadow: var(--modern-shadow-xl) !important;
    }
}