/**
 * Modern CSS enhancements for AccessPress Pro
 * 
 * This file adds CSS custom properties (variables) and modern CSS features
 * while maintaining backward compatibility with the existing theme styles.
 * 
 * @package AccessPress Pro
 * @version 2.09
 */

/* CSS Custom Properties for theme customization */
:root {
    /* Colors - default values, overridden by dynamic CSS */
    --ap-primary-color: #1e73be;
    --ap-primary-hover: #155a96;
    --ap-text-color: #666666;
    --ap-heading-color: #555555;
    --ap-link-color: #1e73be;
    --ap-link-hover: #155a96;
    
    /* Typography */
    --ap-font-primary: 'Open Sans', sans-serif;
    --ap-font-heading: 'Open Sans Condensed', sans-serif;
    --ap-font-size-base: 15px;
    --ap-line-height-base: 1.8;
    
    /* Spacing */
    --ap-spacing-xs: 5px;
    --ap-spacing-sm: 10px;
    --ap-spacing-md: 15px;
    --ap-spacing-lg: 20px;
    --ap-spacing-xl: 30px;
    --ap-spacing-xxl: 40px;
    
    /* Transitions */
    --ap-transition-fast: 0.2s ease-in-out;
    --ap-transition-normal: 0.3s ease-in-out;
    --ap-transition-slow: 0.5s ease-in-out;
}

/* Modern transitions for interactive elements */
a,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.bttn {
    transition: all var(--ap-transition-fast);
}

/* Improved focus styles for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--ap-primary-color);
    outline-offset: 2px;
}

/* Modern box-shadow for cards and elevated elements */
.featured-post,
.ap-pricing-table,
.widget,
.portfolio-item {
    transition: box-shadow var(--ap-transition-normal);
}

.featured-post:hover,
.ap-pricing-table:hover,
.portfolio-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Lazy loading styles for images */
img[loading="lazy"] {
    background: #f0f0f0;
}

/* Modern grid layout support */
@supports (display: grid) {
    .portfolio-listing.portfolio_grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--ap-spacing-lg);
    }
    
    .portfolio-listing.portfolio_grid .portfolio {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Flexbox enhancements */
.site-header .main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.site-header .main-navigation ul li {
    position: relative;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Performance optimizations */
.site-header,
.site-footer {
    will-change: transform;
}

/* Better font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Modern button styles with CSS variables */
.bttn,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: var(--ap-primary-color);
    border: none;
    color: white;
    padding: var(--ap-spacing-sm) var(--ap-spacing-lg);
    cursor: pointer;
    font-family: var(--ap-font-primary);
    font-size: var(--ap-font-size-base);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.bttn:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    background-color: var(--ap-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Modern form styling */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    border: 1px solid #ddd;
    padding: var(--ap-spacing-sm);
    font-family: var(--ap-font-primary);
    font-size: var(--ap-font-size-base);
    transition: border-color var(--ap-transition-fast);
    border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ap-primary-color);
}

/* Responsive improvements */
@media (max-width: 1170px) {
    body {
        min-width: 100%;
    }
    
    .wrapper {
        width: 100%;
        padding: 0 var(--ap-spacing-lg);
    }
}

/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    #comments {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
    
    a {
        text-decoration: underline;
    }
}

/* Dark mode support (optional, respects system preference) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}