/*
Theme Name: Technical Surveyor
Theme URI: https://technicalsurveyor.in
Author: B Mehaboob
Author URI: https://technicalsurveyor.in
Description: A modern, professional WordPress theme for GIS and cadastral surveying professionals. Features gradient backgrounds, responsive design, and advanced AdSense integration. Built by B Mehaboob, a dynamic GIS and revenue land surveying professional with over 6 years of specialized experience in cadastral surveys, spatial data analysis, and project management.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: technical-surveyor
Tags: modern, gradient, responsive, surveying, technical, GIS, cadastral, professional, land-surveying
*/

/* ==========================================================================
   DESIGN SYSTEM STYLE GUIDE
   ========================================================================== 
   
   This stylesheet implements a comprehensive modern design system with:
   - Centralized design tokens for consistency
   - Fluid typography that scales across viewports
   - Advanced light/dark theme support with system preference detection
   - Modern component library (buttons, cards, badges, forms)
   - Responsive grid layouts with mobile-first approach
   - WCAG AA accessibility compliance
   - Performance optimizations for Core Web Vitals
   
   TABLE OF CONTENTS:
   1. Design Token System (Colors, Typography, Spacing, Shadows, etc.)
   2. Dark Theme Overrides
   3. Accessibility Features (Skip Links, Focus States)
   4. Typography System
   5. Form Input Components
   6. Layout System (Containers, Grids)
   7. Header & Navigation
   8. Button Component System
   9. Card Component System
   10. Badge & Chip Components
   11. Pricing Card Component
   12. Section Header Pattern
   13. Footer Design
   14. Responsive Grid Utilities
   15. Animations & Transitions
   16. WordPress Integration
   17. Print Styles
   
   DESIGN TOKEN USAGE:
   - Always use CSS custom properties (var(--token-name)) for consistency
   - Never hardcode colors, spacing, or typography values
   - Semantic color tokens adapt automatically to light/dark themes
   - Fluid typography scales smoothly using clamp() functions
   
   RESPONSIVE BREAKPOINTS:
   - Mobile: < 768px (single column layouts)
   - Tablet: 768px - 1024px (2-column layouts)
   - Desktop: > 1024px (3-column layouts)
   
   ACCESSIBILITY REQUIREMENTS:
   - All interactive elements must have minimum 44x44px touch targets
   - Text contrast must meet WCAG AA standards (4.5:1 for normal, 3:1 for large)
   - All icon-only buttons must have aria-label attributes
   - Focus indicators must be visible with 2px solid outline
   - Respect prefers-reduced-motion for animations
   - Support keyboard navigation for all interactive elements
   
   PERFORMANCE BEST PRACTICES:
   - Use GPU-accelerated transforms (translate3d, translateZ)
   - Minimize CSS custom property recalculations
   - Use Intersection Observer for scroll animations
   - Lazy load images below the fold
   - Preconnect to external font domains
   - Use font-display: swap for web fonts
   
   ========================================================================== */

/* ==========================================================================
   MODERN DESIGN TOKEN SYSTEM
   ========================================================================== */

/*
 * Design Token Architecture
 * 
 * This section defines the complete design token system for the theme.
 * Tokens are organized by category: typography, spacing, colors, shadows,
 * border radius, transitions, and content widths.
 * 
 * Light theme tokens are defined in :root and [data-theme="light"]
 * Dark theme overrides are defined in [data-theme="dark"]
 * 
 * DESIGN TOKEN CATEGORIES:
 * 
 * 1. TYPOGRAPHY TOKENS
 *    - Font families: Display (Instrument Serif) and Body (DM Sans)
 *    - Fluid sizes: Use clamp() for responsive scaling across viewports
 *    - Scale: xs, sm, base, lg, xl, 2xl, 3xl
 *    - Usage: Always use var(--text-*) instead of hardcoded font sizes
 * 
 * 2. SPACING SCALE TOKENS
 *    - Consistent scale from 0.25rem (4px) to 6rem (96px)
 *    - Based on 4px baseline grid for visual rhythm
 *    - Usage: var(--space-1) through var(--space-24)
 *    - Use cases:
 *      --space-1 to --space-3: Small gaps, icon spacing
 *      --space-4 to --space-6: Component padding, medium gaps
 *      --space-8 to --space-12: Section spacing, large gaps
 *      --space-16 to --space-24: Major section separation
 * 
 * 3. COLOR TOKENS (Semantic Naming)
 *    - Background colors: --color-bg, --color-surface, --color-surface-2
 *    - Text colors: --color-text, --color-text-muted, --color-text-faint
 *    - Interactive colors: --color-primary, --color-primary-hover, --color-accent
 *    - Utility colors: --color-divider, --color-border, --color-success, --color-orange
 *    - Purpose: Semantic names allow automatic theme switching
 *    - Usage: Always use semantic tokens, never hardcode hex values
 * 
 * 4. SHADOW TOKENS (Elevation Hierarchy)
 *    - --shadow-sm: Subtle elevation (cards at rest)
 *    - --shadow-md: Medium elevation (cards on hover, dropdowns)
 *    - --shadow-lg: High elevation (modals, featured cards)
 *    - Uses oklch color space for perceptual uniformity
 *    - Automatically adjusts opacity for dark theme
 * 
 * 5. BORDER RADIUS TOKENS
 *    - --radius-sm (6px): Small elements, inputs
 *    - --radius-md (8px): Standard elements
 *    - --radius-lg (12px): Cards, containers
 *    - --radius-xl (16px): Large cards
 *    - --radius-2xl (24px): Hero sections
 *    - --radius-full (9999px): Pills, badges, fully rounded buttons
 * 
 * 6. TRANSITION TOKENS
 *    - --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1)
 *    - Optimized easing for smooth, natural motion
 *    - Use for all interactive state changes
 * 
 * 7. CONTENT WIDTH TOKENS
 *    - --content-narrow (640px): Focused reading content
 *    - --content-default (960px): Standard content width
 *    - --content-wide (1200px): Full-width layouts
 * 
 * REQUIREMENTS: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9
 */

:root,
[data-theme="light"] {
    /* =================================================================
       TYPOGRAPHY TOKENS
       ================================================================= */
    
    /* Font Families */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
    
    /* Fluid Typography Scale - Uses clamp() for responsive sizing */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
    
    /* =================================================================
       SPACING SCALE TOKENS
       ================================================================= */
    
    /* Consistent spacing scale from 0.25rem to 6rem */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* =================================================================
       COLOR TOKENS - LIGHT THEME
       ================================================================= */
    
    /* Semantic color naming for light theme */
    --color-bg: #f4f6f5;
    --color-surface: #f8faf9;
    --color-surface-2: #ffffff;
    --color-surface-offset: #edf0ee;
    --color-divider: #d5ddd9;
    --color-border: #c8d3ce;
    --color-text: #1a2420;
    --color-text-muted: #627069;
    --color-text-faint: #9eb0a9;
    --color-text-inverse: #ffffff;
    --color-primary: #0a7c6e;
    --color-primary-hover: #086558;
    --color-accent: #1e6fa0;
    --color-success: #0a7c6e;
    --color-orange: #d97706;
    
    /* Shadow tokens with oklch color space for perceptual uniformity */
    --shadow-sm: 0 1px 2px oklch(0.18 0.02 165 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.18 0.02 165 / 0.09);
    --shadow-lg: 0 12px 32px oklch(0.18 0.02 165 / 0.13);
    
    /* =================================================================
       BORDER RADIUS TOKENS
       ================================================================= */
    
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* Fully rounded */
    
    /* =================================================================
       TRANSITION TOKENS
       ================================================================= */
    
    /* Interactive element timing and easing */
    --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    
    /* =================================================================
       CONTENT WIDTH TOKENS
       ================================================================= */
    
    --content-narrow: 640px;
    --content-default: 960px;
    --content-wide: 1200px;
    
    /* =================================================================
       LEGACY COMPATIBILITY TOKENS
       ================================================================= */
    
    /* Maintain backward compatibility with existing theme code */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --light-bg: var(--color-bg);
    --card-bg: var(--color-surface-2);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-light: var(--color-text-faint);
    --border-color: var(--color-border);
    --container-max: var(--content-wide);
    --container-padding: var(--space-6);
    
    /* Legacy spacing tokens */
    --space-xs: var(--space-2);
    --space-sm: var(--space-3);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    
    /* Legacy shadow tokens */
    --shadow-xl: 0 20px 50px oklch(0.18 0.02 165 / 0.15);
    
    /* Gradients - Preserved for backward compatibility */
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-6: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

/* =================================================================
   DARK THEME COLOR OVERRIDES
   ================================================================= */

/*
 * Dark Theme Color System
 * 
 * Dark theme uses oklch color space for better perceptual uniformity
 * and more natural color transitions in low-light environments.
 * 
 * OKLCH BENEFITS:
 * - Perceptually uniform color space (equal visual differences)
 * - Better color interpolation than RGB or HSL
 * - Consistent lightness across hues
 * - More natural dark mode color adjustments
 * 
 * COLOR ADJUSTMENTS FOR DARK MODE:
 * - Backgrounds: Darker values (#111915 to #202822)
 * - Text: Lighter, desaturated colors for reduced eye strain
 * - Primary colors: Brighter, more saturated for visibility
 * - Shadows: Deeper, higher opacity for depth perception
 * - Borders: Subtle, low-contrast for visual hierarchy
 * 
 * ACCESSIBILITY CONSIDERATIONS:
 * - All text maintains WCAG AA contrast ratios (4.5:1 minimum)
 * - Primary color adjusted for visibility on dark backgrounds
 * - Reduced brightness on images (opacity: 0.9) to prevent glare
 * 
 * REQUIREMENTS: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.9
 */

[data-theme="dark"] {
    /* Background and surface colors */
    --color-bg: #111915;
    --color-surface: #161e19;
    --color-surface-2: #1b231d;
    --color-surface-offset: #202822;
    --color-divider: #2d3730;
    --color-border: #3a4540;
    
    /* Text colors */
    --color-text: #c8d4ce;
    --color-text-muted: #6e8a7a;
    --color-text-faint: #4a5a50;
    --color-text-inverse: #1a2420;
    
    /* Primary and accent colors - adjusted for dark backgrounds */
    --color-primary: #3fb8a4;
    --color-primary-hover: #4fcfba;
    --color-accent: #5b9fd9;
    --color-success: #3fb8a4;
    --color-orange: #f59e0b;
    
    /* Shadow tokens with oklch - deeper shadows for dark mode */
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.32);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
    --shadow-xl: 0 20px 50px oklch(0 0 0 / 0.55);
    
    /* Legacy compatibility - map to new tokens */
    --light-bg: var(--color-bg);
    --card-bg: var(--color-surface-2);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-light: var(--color-text-faint);
    --border-color: var(--color-border);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
}

/* Dark Mode Global Styles */
[data-theme="dark"] body {
    background-color: var(--light-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .site-header {
    background: #1a1a2e;
    /* Fallback */
    background: linear-gradient(135deg, #1a1a2e 0%, #2d3748 100%);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .card-custom,
[data-theme="dark"] .post,
[data-theme="dark"] .page-section,
[data-theme="dark"] .comments-area,
[data-theme="dark"] .comment-body,
[data-theme="dark"] .comment-respond,
[data-theme="dark"] .toc-container,
[data-theme="dark"] .off-canvas-menu,
[data-theme="dark"] .search-field,
[data-theme="dark"] .page-numbers {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .toc-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .toc-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .entry-content h1,
[data-theme="dark"] .entry-content h2,
[data-theme="dark"] .entry-content h3,
[data-theme="dark"] .entry-content h4,
[data-theme="dark"] .entry-content h5,
[data-theme="dark"] .entry-content h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .widget-title,
[data-theme="dark"] .comments-title,
[data-theme="dark"] .comment-reply-title {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .off-canvas-nav a {
    color: var(--text-primary);
}

[data-theme="dark"] .off-canvas-nav a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 1rem;
}

.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.dark-mode-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Icon transitions */
.dark-mode-toggle i {
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover i {
    transform: rotate(20deg);
}

[data-theme="dark"] .dark-mode-toggle {
    background: rgba(255, 255, 255, 0.1);
    color: #ffd700;
    /* Gold color for sun icon */
}

/* Smooth theme transition for all elements */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.site-header,
.card-custom,
.post,
.page-section,
.comments-area,
.comment-body,
.comment-respond,
.toc-container,
.off-canvas-menu,
.search-field,
.page-numbers {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Ensure images don't look too bright in dark mode */
[data-theme="dark"] img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Tablet and up - Adjust container padding */
@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-6);
    }
}

/* Desktop and up - Adjust container padding */
@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-8);
    }
}

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   ACCESSIBILITY - Skip Links & Focus Styles
   ========================================================================== */

/*
 * Accessibility Features Implementation
 * 
 * This section implements WCAG AA accessibility requirements including:
 * - Skip-to-content links for keyboard navigation
 * - Visible focus indicators for all interactive elements
 * - Proper focus management for keyboard users
 * 
 * SKIP LINKS:
 * - Hidden by default (positioned off-screen)
 * - Visible when focused via keyboard (Tab key)
 * - Allows users to bypass navigation and jump to main content
 * - Positioned at top of page with high z-index
 * - Requirement: 10.3
 * 
 * FOCUS INDICATORS:
 * - 2px solid outline in primary color
 * - 2px offset for visibility against backgrounds
 * - Applied to all interactive elements (links, buttons, inputs)
 * - Uses :focus-visible to show only for keyboard navigation
 * - Requirements: 10.1, 10.2
 * 
 * KEYBOARD NAVIGATION:
 * - All interactive elements are keyboard accessible
 * - Logical tab order maintained
 * - Enter/Space activates buttons
 * - Escape closes modals and menus
 * - Requirement: 10.10
 * 
 * TOUCH TARGET SIZES:
 * - Minimum 44x44px for all interactive elements
 * - Ensures usability on touch devices
 * - Meets WCAG AA success criterion 2.5.5
 * - Requirement: 5.8
 * 
 * REQUIREMENTS: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.10
 */

/* Skip link - Hidden by default, visible on focus for keyboard users */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 100000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-text-inverse);
    outline-offset: 2px;
}

/* Focus visible styles for better keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Enhanced focus indicators for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure all interactive elements are focusable */
a,
button,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
    outline-offset: 2px;
}

/* Skip-to-content link styles - visible on focus */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 100000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-text-inverse);
    outline-offset: 2px;
}


/* Sidebar Layout */
#secondary {
    position: relative;
    height: 100%;
}

.sidebar-inner {
    position: sticky;
    top: 2rem;
    /* Allow scrolling within sidebar if taller than viewport */
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    /* Hide scrollbar for cleaner UI */
    scrollbar-width: none;
    /* Firefox */
}

.sidebar-inner::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

/* ==========================================================================
   CLS PREVENTION - Reserve space for dynamic content (ads)
   ========================================================================== */

/* Ad containers - smaller initial height to prevent huge white gaps */
.ad-container,
.adsense-wrapper,
.ad-widget {
    min-height: 100px;
    contain: layout style;
    transition: min-height 0.3s ease, opacity 0.3s ease;
    position: relative;
}

/* AdSense ins elements - moderate height, will collapse if empty */
.adsbygoogle {
    min-height: 100px;
    display: block;
    background: transparent;
}

/* Skeleton loading - subtle, only visible while loading */
.adsbygoogle:not([data-ad-status])::before {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #f5f5f5 25%, #eeeeee 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: adSkeletonLoading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes adSkeletonLoading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* When ad loads and fills, expand naturally */
.adsbygoogle[data-ad-status="filled"] {
    min-height: auto;
}

.adsbygoogle[data-ad-status="filled"]::before {
    display: none;
}

/* When ad is unfilled/empty - COLLAPSE to minimal space */
.adsbygoogle[data-ad-status="unfilled"] {
    min-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.adsbygoogle[data-ad-status="unfilled"]::before {
    display: none;
}

/* Hide empty ad wrappers completely */
.adsense-wrapper:has(.adsbygoogle[data-ad-status="unfilled"]),
.ad-container:has(.adsbygoogle[data-ad-status="unfilled"]) {
    min-height: 0;
    padding: 0;
    margin: 0;
}

.ad-display-1,
.ad-display-vertical,
.ad-display-horizontal,
.ad-in-article,
.ad-mid-content {
    min-height: 100px;
}

.ad-autorelaxed {
    min-height: 150px;
}

/* Mobile: even smaller initial heights */
@media (max-width: 767px) {

    .ad-container,
    .adsense-wrapper,
    .ad-widget {
        min-height: 50px;
    }

    .adsbygoogle {
        min-height: 50px;
    }

    .adsbygoogle:not([data-ad-status])::before {
        height: 50px;
    }

    .ad-display-1,
    .ad-display-vertical,
    .ad-display-horizontal,
    .ad-in-article,
    .ad-mid-content {
        min-height: 50px;
    }

    .ad-autorelaxed {
        min-height: 100px;
    }
}

/* Filled ads show at full size */
.adsense-wrapper .adsbygoogle[data-ad-status="filled"],
.ad-container .adsbygoogle[data-ad-status="filled"] {
    min-height: auto;
}

/* ==========================================================================
   TABLE OF CONTENTS - Modern UI/UX Design
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS - Clean & Modern Redesign
   ========================================================================== */

.toc-container {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: 2rem 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* TOC Header */
.toc-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.toc-header:hover {
    background: #f1f5f9;
}

.toc-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.toc-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    letter-spacing: -0.01em;
}

.toc-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toc-count {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
}

.toc-toggle-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toc-toggle-btn:hover {
    color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
}

.toc-toggle-btn i {
    transition: transform 0.3s ease;
}

/* Progress Bar */
.toc-progress {
    height: 2px;
    background: transparent;
    overflow: hidden;
}

.toc-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width 0.3s ease;
}

/* TOC Navigation */
.toc-nav {
    padding: 1rem;
    max-height: 500px;
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

/* Collapsed State */
.toc-container.collapsed .toc-nav {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* TOC List */
.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.toc-list li {
    margin: 0;
    padding: 0;
}

/* TOC Links */
.toc-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.15rem 0;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
}

.toc-link:hover {
    background: #f8fafc;
    color: var(--primary);
    border-left-color: rgba(102, 126, 234, 0.3);
}

.toc-link.active {
    background: rgba(102, 126, 234, 0.05);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 500;
}

.toc-link.active::before {
    display: none;
}

/* TOC Number */
.toc-number {
    display: none;
    /* Cleaner look without numbers */
}

/* Level Indentation */
.toc-level-2 .toc-link {
    padding-left: 0.75rem;
}

.toc-level-3 .toc-link {
    padding-left: 1.75rem;
    font-size: 0.9rem;
}

.toc-level-4 .toc-link {
    padding-left: 2.75rem;
    font-size: 0.85rem;
}

/* Custom Scrollbar */
.toc-nav::-webkit-scrollbar {
    width: 4px;
}

.toc-nav::-webkit-scrollbar-track {
    background: transparent;
}

.toc-nav::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
}

.toc-nav::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .toc-container {
        margin: 1.5rem 0;
        border-radius: 8px;
    }

    .toc-header {
        padding: 0.75rem 1rem;
    }

    .toc-nav {
        padding: 0.75rem;
        max-height: 350px;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Force theme font on ALL elements - override any custom HTML fonts */
/* EXCEPT Font Awesome icons which need their own font */
body *:not([class*="fa"]):not(i),
body p,
body span:not([class*="fa"]),
body div,
body a,
body li,
body td,
body th,
body label,
body input,
body textarea,
body button,
body select,
.entry-content *:not([class*="fa"]):not(i),
.entry-content-fullwidth *:not([class*="fa"]):not(i),
.page-content *:not([class*="fa"]):not(i),
.post-content *:not([class*="fa"]):not(i),
.fullwidth-page-content *:not([class*="fa"]):not(i) {
    font-family: var(--font-body);
}

/* Headings use display font */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content-fullwidth h1,
.entry-content-fullwidth h2,
.entry-content-fullwidth h3,
.entry-content-fullwidth h4,
.entry-content-fullwidth h5,
.entry-content-fullwidth h6 {
    font-family: var(--font-display);
}

/* Ensure Font Awesome icons use their own font */
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/*
 * Typography System - SifaGeoLabs Feel
 * 
 * This typography system creates a refined, sophisticated feel with:
 * - Lighter font weights (400 instead of 600) for elegance
 * - Tighter line-height (1.15) for display text
 * - Subtle letter-spacing adjustments for optical balance
 * - text-wrap: balance for headings (prevents orphans)
 * - text-wrap: pretty for paragraphs (better line breaks)
 * 
 * FONT FAMILIES:
 * - Display: Instrument Serif (elegant serif for headings)
 * - Body: DM Sans (clean, modern sans-serif)
 * 
 * REQUIREMENTS: 3.1, 3.2, 3.3, 3.5, 3.6, 3.7, 3.8
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 400; /* Lighter weight for refined feel */
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-3xl);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

h5 {
    font-size: var(--text-base);
    font-weight: 600; /* Slightly heavier for smaller headings */
}

h6 {
    font-size: var(--text-sm);
    font-weight: 600;
}

p {
    margin-bottom: 1.25rem;
    color: var(--color-text);
    line-height: 1.6;
    text-wrap: pretty;
}

/* Emphasized text in headings */
h1 em,
h2 em,
h3 em {
    font-style: italic;
    color: var(--color-primary);
    font-weight: 400;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   FORM INPUTS - Global Text Input Styling
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background: #ffffff !important;
    border: 2px solid #333333 !important;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

input::placeholder,
textarea::placeholder {
    color: #718096;
    opacity: 1;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* File input */
input[type="file"] {
    padding: 8px;
    border: 2px solid #333333;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

/* Labels */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Form groups */
.form-group,
.wpcf7-form-control-wrap {
    margin-bottom: 1rem;
}

/* ==========================================================================
   LAYOUT - Container & Grid
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

.section {
    padding: var(--space-lg) 0;
    width: 100%;
}

/* ==========================================================================
   FULL WIDTH LAYOUT - Elementor Style
   ========================================================================== */

/* Full Width Container - No Max Width */
.fullwidth-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.page-section-fullwidth {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.site-main-fullwidth {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Full Width Article */
.fullwidth-article {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Full Width Thumbnail - Edge to Edge */
.fullwidth-thumbnail {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
}

.fullwidth-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Full Width Content Wrapper */
.fullwidth-content-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Full Width Headers - Can be Centered */
.entry-header-fullwidth {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--container-padding) var(--space-lg);
    text-align: center;
}

.entry-title-fullwidth {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--text-primary);
}

/* Full Width Page Content */
.fullwidth-page-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Full Width Entry Content - Expandable */
.entry-content-fullwidth {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Default: Center Regular Content Blocks */
.entry-content-fullwidth>* {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

/* Ordered and Unordered Lists - Proper Containment */
.entry-content-fullwidth ol,
.entry-content-fullwidth ul {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--container-padding) + 2rem);
    padding-right: var(--container-padding);
    box-sizing: border-box;
    list-style-position: outside;
}

/* Nested Lists */
.entry-content-fullwidth ol ol,
.entry-content-fullwidth ol ul,
.entry-content-fullwidth ul ol,
.entry-content-fullwidth ul ul {
    padding-left: 2rem;
    padding-right: 0;
}

/* List Items */
.entry-content-fullwidth li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Blockquotes */
.entry-content-fullwidth blockquote {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--container-padding) + 2rem);
    padding-right: var(--container-padding);
    box-sizing: border-box;
    border-left: 4px solid var(--primary);
}

/* Pre and Code Blocks */
.entry-content-fullwidth pre,
.entry-content-fullwidth code {
    max-width: 1200px;
    overflow-x: auto;
    word-wrap: break-word;
    box-sizing: border-box;
}

/* Tables */
.entry-content-fullwidth table {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
    overflow-x: auto;
    display: block;
}

/* Figures and Images */
.entry-content-fullwidth figure,
.entry-content-fullwidth img {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Ensure all text elements are contained */
.entry-content-fullwidth p,
.entry-content-fullwidth h1,
.entry-content-fullwidth h2,
.entry-content-fullwidth h3,
.entry-content-fullwidth h4,
.entry-content-fullwidth h5,
.entry-content-fullwidth h6,
.entry-content-fullwidth div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* Full Width Blocks - Remove Centering for Edge-to-Edge */
.entry-content-fullwidth .alignfull,
.entry-content-fullwidth .wp-block-cover.alignfull,
.entry-content-fullwidth .wp-block-group.alignfull,
.entry-content-fullwidth .elementor-section,
.entry-content-fullwidth .elementor-section-wrap,
.entry-content-fullwidth .elementor-container,
.entry-content-fullwidth .wp-block-cover__inner-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full Width for Elementor Sections */
.fullwidth-container .elementor-section,
.fullwidth-container .elementor-section-wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* Full Width Comments Wrapper */
.fullwidth-comments-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--container-padding);
}

/* Entry Footer Full Width */
.entry-footer-fullwidth {
    width: 100%;
    max-width: 1200px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-lg) var(--container-padding);
    text-align: center;
    border-top: 1px solid var(--border-color);
}

/* Ad Containers in Full Width */
.ad-before-content-fullwidth,
.ad-after-content-fullwidth {
    width: 100%;
    max-width: 1200px;
    margin: var(--space-lg) auto;
    padding: 0 var(--container-padding);
}

/* ==========================================================================
   FULL WIDTH LAYOUT - RESPONSIVE FIXES
   ========================================================================== */

/* Mobile: Ensure all content stays within bounds */
@media (max-width: 767px) {

    .entry-content-fullwidth,
    .fullwidth-page-content,
    .fullwidth-content-wrapper {
        overflow-x: hidden !important;
    }

    /* Lists on Mobile - Extra Safety */
    .entry-content-fullwidth ol,
    .entry-content-fullwidth ul {
        padding-left: calc(var(--container-padding) + 1.5rem);
        padding-right: var(--container-padding);
        margin-left: 0;
        margin-right: 0;
    }

    /* Nested Lists on Mobile */
    .entry-content-fullwidth ol ol,
    .entry-content-fullwidth ol ul,
    .entry-content-fullwidth ul ol,
    .entry-content-fullwidth ul ul {
        padding-left: 1.5rem;
    }

    /* All content elements */
    .entry-content-fullwidth>* {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        margin-left: 0;
        margin-right: auto;
    }

    /* Prevent any element from overflowing */
    .entry-content-fullwidth * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Tables on Mobile - Scroll Horizontally */
    .entry-content-fullwidth table {
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Blockquotes on Mobile */
    .entry-content-fullwidth blockquote {
        padding-left: calc(var(--container-padding) + 1rem);
        padding-right: var(--container-padding);
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   UNIVERSAL CONTENT SAFETY - ALL TEMPLATES
   ========================================================================== */

/* Ensure ALL content containers never overflow */
.entry-content,
.post-content,
.page-content,
.entry-content-fullwidth,
.fullwidth-page-content {
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

/* ALL Lists - Universal Safety */
.entry-content ol,
.entry-content ul,
.post-content ol,
.post-content ul,
.page-content ol,
.page-content ul {
    padding-left: 2rem;
    padding-right: 1rem;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    list-style-position: outside;
}

/* List Items - Universal */
.entry-content li,
.post-content li,
.page-content li,
.entry-content-fullwidth li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* Images - Never Overflow */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.entry-content img,
.post-content img,
.page-content img,
.entry-content-fullwidth img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Figures */
figure {
    max-width: 100%;
    margin: 1.5rem auto;
    overflow: hidden;
}

figcaption {
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.5rem;
    padding: 0 1rem;
}

/* iframes and Embeds - Responsive */
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Video Embeds - Responsive Wrapper */
.wp-block-embed,
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.wp-block-embed iframe,
.wp-block-embed object,
.wp-block-embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Tables - Always Scrollable on Small Screens */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Pre and Code - Prevent Overflow */
pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 4px;
    max-width: 100%;
    box-sizing: border-box;
}

code {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Blockquotes - Universal */
blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: var(--text-secondary);
    font-style: italic;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Buttons and Links - No Overflow */
a,
button,
.btn,
.btn-custom,
.btn-custom-outline {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Entry Meta - Responsive */
.entry-meta {
    flex-wrap: wrap;
    overflow: hidden;
}

@media (max-width: 767px) {
    .entry-meta {
        font-size: 0.875rem;
    }

    .entry-meta span {
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   END FULL WIDTH LAYOUT
   ========================================================================== */

/* ==========================================================================
   PERFORMANCE & QUALITY OPTIMIZATIONS
   ========================================================================== */

/* Smooth Scrolling - Modern Browsers */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Font Loading Optimization */
/* Note: Google Fonts loaded via link tag in header.php with font-display:swap */
/* Space Grotesk web font handles FOUT automatically */

/* Image Loading - Lazy Load Support */
/* NOTE: Removed opacity:0 to prevent CLS - browser handles lazy loading natively */
img[loading="lazy"] {
    opacity: 1;
    /* Keep full opacity - no lazy fade animation to prevent CLS */
}

/* Focus Indicators - Accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Skip to Content Link - Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Print Styles */
@media print {

    .site-header,
    .site-footer,
    .adsense-wrapper,
    .adsbygoogle,
    .share-buttons,
    .post-navigation-modern,
    nav,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }
}

/* Dark Mode Readiness (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here when needed */
}

/* Text Selection */
::selection {
    background: var(--primary);
    color: white;
}

::-moz-selection {
    background: var(--primary);
    color: white;
}

/* Improved Typography - Better Readability */
p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1:first-child,
h2:first-child,
h3:first-child {
    margin-top: 0;
}

/* Better Link Styles */
a {
    transition: all 0.2s ease;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Form Elements - Better UX */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

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(--primary);
    outline: none;
}

/* Better Button Styles */
button,
input[type="submit"],
input[type="button"] {
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    border-radius: 4px;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translate3d(0, -2px, 0);
    /* GPU-accelerated */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Smooth Animations */
* {
    transition-timing-function: ease-in-out;
}

/* Reduce Motion for Accessibility */
@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;
    }
}

/* Better Hover States for Cards - GPU accelerated */
.card-custom,
.post {
    will-change: transform;
}

.card-custom:hover {
    transform: translate3d(0, -5px, 0);
    /* GPU-accelerated */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Better Focus States for Navigation */
.site-header a:focus {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Improved Spacing for Better Readability */
.entry-content>*+*,
.post-content>*+*,
.page-content>*+*,
.entry-content-fullwidth>*+* {
    margin-top: 1.5rem;
}

/* Better Table Styling */
table {
    border: 1px solid var(--border-color);
}

table th,
table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table th {
    background: #f8f9fa;
    font-weight: 600;
}

table tr:hover {
    background: #f8f9fa;
}

/* ==========================================================================
   END PERFORMANCE & QUALITY OPTIMIZATIONS
   ========================================================================== */

/* Section Title - Centered */
.section-title {
    text-align: center;
    margin-bottom: var(--space-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section-title h2 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    background: var(--gradient-2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title p {
    color: var(--text-light);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0;
}

/* Text utilities */
.text-center {
    text-align: center;
}

.mt-5 {
    margin-top: var(--space-lg);
}

/* Centering for all content areas */
.site-main,
.page-content,
.post-content,
.entry-content,
.hero-content {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 1200px;
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

/* Article/Post centering */
article,
.post,
.page-article {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Center container children */
.container>* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Elementor sections centering */
.elementor-section-wrap,
.elementor-section,
.elementor-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* WordPress block centering */
.wp-block-group,
.wp-block-columns,
.wp-block-cover {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

/* Icon centering */
.elementor-icon-box-wrapper,
.elementor-icon-box-content,
.elementor-icon-box-icon,
.elementor-image-box-wrapper,
.elementor-widget-icon,
.elementor-widget-icon-box {
    text-align: center !important;
}

.elementor-icon-box-icon {
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.elementor-icon,
.elementor-icon i,
.elementor-image-box-img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Font Awesome icons centering */
.entry-content i,
.page-content i,
.card-icon,
.post-category-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* No gap between header and hero */
.hero {
    margin-top: 0;
}

/* Content Grid - for pages with sidebar */
.content-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr 300px;
        gap: var(--space-xl);
    }
}

/* Card Grid - for post listings */
.grid-container {
    display: grid;
    gap: var(--space-md);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (min-width: 600px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   HEADER - Sticky Navigation
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: oklch(from var(--color-bg) l c h / 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-divider);
    transition: all var(--transition-interactive);
    padding: 0 !important;
    margin: 0 !important;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3);
    max-width: var(--content-wide);
    margin: 0 auto;
    padding-inline: var(--space-6);
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .header-inner {
        min-height: 70px;
    }
}

/* Site Branding */
.site-branding {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.site-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
}

.site-title i {
    font-size: 1.4rem;
    color: white;
    /* Fallback */
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-title span {
    color: white;
    -webkit-text-fill-color: white;
}

@media (min-width: 768px) {
    .site-title {
        font-size: 1.35rem;
        gap: 0.625rem;
    }

    .site-title i {
        font-size: 1.5rem;
    }
}

/* Custom Logo - WordPress the_custom_logo() output */
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
}

.custom-logo-link img,
.custom-logo,
.site-branding img {
    max-height: 45px !important;
    min-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (min-width: 768px) {

    .custom-logo-link img,
    .custom-logo,
    .site-branding img {
        max-height: 55px !important;
    }
}

/* Navigation */
.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .main-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 0.5rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #ffffff !important;
    border-radius: var(--radius-sm);
    transition: none;
    background: transparent !important;
}

.main-navigation a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Submenu */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
}

.main-navigation .menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation .sub-menu a {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
}

.main-navigation .sub-menu a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Mobile Menu Toggle - ALWAYS visible on mobile */
.menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle i {
    color: white;
    font-size: 1.25rem;
}

.menu-toggle:hover,
.menu-toggle:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    outline: none;
}

/* Hide menu toggle on desktop */
@media (min-width: 768px) {
    .menu-toggle {
        display: none !important;
    }
}

/* Show desktop nav on large screens */
.desktop-nav ul {
    display: none;
}

@media (min-width: 768px) {
    .desktop-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ============================================
   OFF-CANVAS MENU
   ============================================ */

/* ==========================================================================
   OFF-CANVAS MENU
   ========================================================================== */

/* Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    z-index: 99998;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ... existing code ... */

/* ==========================================================================
   BREADCRUMBS & ADS
   ========================================================================== */

.breadcrumbs {
    padding: 1rem 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
}

.breadcrumbs a {
    color: var(--primary);
    font-weight: 500;
}

.breadcrumbs a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.breadcrumbs .current {
    font-weight: 600;
    color: var(--text-secondary);
}

.ad-container {
    margin: 2rem 0;
    text-align: center;
    background: #f9f9f9;
    padding: 1rem;
    border: 1px dashed #ddd;
    border-radius: var(--radius-sm);
    min-height: 100px;
    /* CLS prevention - reserve space for ads */
}

/* AdSense wrapper CLS prevention */
.adsense-wrapper,
.ad-widget,
.ad-display-1,
.ad-in-article,
.ad-mid-content {
    min-height: 100px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

/* Mobile ad container fix - prevent cutting off */
@media (max-width: 767px) {

    .ad-container,
    .adsense-wrapper,
    .ad-widget,
    .ad-display-1,
    .ad-in-article,
    .ad-mid-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .ad-container .adsbygoogle,
    .adsense-wrapper .adsbygoogle,
    ins.adsbygoogle {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.ad-container .widget {
    margin: 0;
}

/* Typography Improvements for Article */
.entry-content p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #2d3748;
    /* Darker gray for better contrast */
}

.entry-content h2,
.entry-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1a202c;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Off-Canvas Container - Hidden by default */
.off-canvas-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--color-surface-2);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Only show on mobile screens */
@media (max-width: 767px) {
    .off-canvas-menu {
        display: flex;
    }
}

.off-canvas-menu.active {
    right: 0 !important;
}

/* Off-Canvas Header */
.off-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--color-divider);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.off-canvas-logo {
    flex: 1;
}

.off-canvas-logo .custom-logo-link img,
.off-canvas-logo .custom-logo {
    max-height: 45px;
    width: auto;
}

.off-canvas-logo .site-title {
    color: white;
    font-size: 1rem;
}

.off-canvas-logo .site-title i {
    color: white;
}

.off-canvas-logo .site-title span {
    color: white;
    -webkit-text-fill-color: white;
}

/* Close button */
.off-canvas-close {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.off-canvas-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Off-Canvas Content */
.off-canvas-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Off-Canvas Navigation */
.off-canvas-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.off-canvas-nav li {
    margin-bottom: 0.25rem;
}

.off-canvas-nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-height: 44px;
}

.off-canvas-nav a:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

/* Add dropdown indicator for mobile */
.off-canvas-nav .menu-item-has-children>a::after {
    content: '\f078';
    /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.off-canvas-nav .menu-item-has-children.submenu-open>a::after {
    transform: rotate(180deg);
}

.off-canvas-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
    margin-top: 0.25rem;
    display: none;
    /* Hidden by default */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.off-canvas-nav .sub-menu.open {
    display: block;
    animation: slideDown 0.3s ease forwards;
}

/* Support for nested submenus */
.off-canvas-nav .sub-menu .sub-menu {
    margin-left: 1rem;
    background: rgba(102, 126, 234, 0.08);
}

.off-canvas-nav .sub-menu .sub-menu a {
    padding-left: 3rem;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.off-canvas-nav .sub-menu a {
    padding: 0.75rem 1rem 0.75rem 2rem;
    /* Indented */
    font-size: 0.95rem;
    color: var(--color-text-muted);
    min-height: 44px;
}

.off-canvas-nav .sub-menu a::after {
    content: none;
}

/* Hide off-canvas on desktop - FORCE HIDE */
@media (min-width: 768px) {
    .off-canvas-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        right: -9999px !important;
    }

    .menu-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .menu-toggle,
    #menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }
}

/* On mobile (below 768px) - show menu toggle, hide off-canvas by default */
@media (max-width: 767px) {
    .off-canvas-menu {
        display: flex !important;
        flex-direction: column;
        right: -300px;
        visibility: visible;
    }

    .off-canvas-menu.active {
        right: 0 !important;
    }

    .menu-overlay {
        display: block !important;
        opacity: 0;
        visibility: hidden;
    }

    .menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .menu-toggle,
    #menu-toggle {
        display: flex !important;
    }

    /* Hide desktop nav on mobile */
    .desktop-nav ul,
    .main-navigation.desktop-nav ul {
        display: none !important;
    }
}

/* Body class when menu is open */
body.menu-open {
    overflow: hidden;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-1);
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero {
        min-height: 60vh;
    }
}

@media (min-width: 1024px) {
    .hero {
        min-height: 70vh;
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 80%, rgba(79, 172, 254, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 87, 108, 0.3) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--space-lg);
    max-width: 800px;
}

.hero-icon {
    font-size: 3rem;
    color: white;
    margin-bottom: var(--space-md);
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
    .hero-icon {
        font-size: 4rem;
        margin-bottom: var(--space-lg);
    }
}

.hero-content h1 {
    font-size: 1.75rem;
    color: white;
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-content h1 {
        font-size: 3.5rem;
    }
}

.hero-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}

@media (min-width: 768px) {
    .hero-content p {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card-custom,
.post {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center;
}

.card-custom:hover,
.post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Card content centering */
.card-content,
.card-content-custom,
.post-content-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Card icon centering */
.card-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page Article - Clean for custom content */
.page-article {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    border: none;
}

.page-section {
    background: #f8fafc;
    min-height: auto;
    padding: 0;
}

@media (min-width: 768px) {
    .page-section {
        padding: 0;
    }
}

.page-content {
    padding: 0;
}

@media (min-width: 768px) {
    .page-content {
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .page-content {
        padding: 0;
    }
}

/* Hide entry-header when empty */
.page-article .entry-header:empty {
    display: none;
}

.page-article .entry-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.page-article .entry-title {
    font-size: 1.5rem;
    color: #1a202c;
    margin: 0;
}

@media (min-width: 768px) {
    .page-article .entry-title {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .page-article .entry-title {
        font-size: 2.5rem;
    }
}

.page-thumbnail {
    width: 100%;
    overflow: hidden;
}

.page-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.card-icon,
.post-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.card-icon i,
.post-category-icon i {
    font-size: 1.25rem;
    color: white;
}

.card-content,
.post-content,
.page-content {
    padding: var(--space-md);
}

@media (min-width: 768px) {

    .card-content,
    .post-content,
    .page-content {
        padding: var(--space-lg);
    }
}

.card-content h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
    .card-content h3 {
        font-size: 1.25rem;
    }
}

.card-content p {
    font-size: 0.9375rem;
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

/* Post/Page Thumbnail */
.post-thumbnail,
.page-thumbnail {
    position: relative;
    overflow: hidden;
}

.post-thumbnail img,
.page-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (min-width: 768px) {

    .post-thumbnail img,
    .page-thumbnail img {
        height: 250px;
    }
}

/* Thumbnail hover - GPU accelerated */
.card-custom:hover .post-thumbnail img,
.post:hover .post-thumbnail img {
    transform: scale3d(1.05, 1.05, 1);
    /* GPU-accelerated */
}

/* ==========================================================================
   ENTRY CONTENT (Posts & Pages)
   ========================================================================== */

.entry-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.entry-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .entry-title {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .entry-title {
        font-size: 2.25rem;
    }
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-faint);
}

.entry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.entry-meta i {
    color: var(--color-primary);
    font-size: 0.8125rem;
}

.entry-meta a {
    color: var(--color-primary);
}

.entry-meta a:hover {
    text-decoration: underline;
}

/* Entry Content */
.entry-content {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: #2d3748;
    max-width: 75ch;
}

@media (min-width: 768px) {
    .entry-content {
        font-size: 1.125rem;
        line-height: 1.8;
    }
}

@media (min-width: 1024px) {
    .entry-content {
        font-size: 1.1875rem;
    }
}

.entry-content p {
    margin-bottom: 1.5rem;
    color: #2d3748;
}

.entry-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1a1f36;
    font-weight: 700;
    line-height: 1.3;
}

.entry-content h3 {
    font-size: 1.3125rem;
    margin-top: 2rem;
    margin-bottom: 0.875rem;
    color: #1a1f36;
    font-weight: 600;
    line-height: 1.35;
}

@media (min-width: 768px) {
    .entry-content h2 {
        font-size: 1.75rem;
    }

    .entry-content h3 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .entry-content h2 {
        font-size: 2rem;
    }

    .entry-content h3 {
        font-size: 1.625rem;
    }
}

.entry-content ul,
.entry-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.entry-content li {
    margin-bottom: 0.375rem;
}

.entry-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(102, 126, 234, 0.3);
}

.entry-content a:hover {
    text-decoration-color: var(--primary);
}

.entry-content img {
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
}

.entry-content blockquote {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    padding-left: var(--space-lg);
    border-left: 4px solid var(--primary);
    background: rgba(102, 126, 234, 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.entry-content code {
    background: var(--gradient-3);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.875em;
}

.entry-content pre {
    background: #1a1a2e;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-md) 0;
}

.entry-content pre code {
    background: none;
    padding: 0;
    color: #e2e8f0;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
}

.entry-content th,
.entry-content td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.entry-content th {
    background: var(--gradient-4);
    color: white;
    font-weight: 600;
}

.entry-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

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

/* ==========================================================================
   MODERN BUTTON COMPONENT SYSTEM
   ========================================================================== */

/*
 * Button Base Class
 * 
 * Provides the foundation for all button variants with:
 * - Flex layout for icon + text combinations
 * - Minimum 44x44px touch target size (WCAG AA)
 * - Fully rounded corners using design tokens
 * - Smooth interactive transitions
 * - Gap spacing for icon + text layouts
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-interactive);
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    line-height: 1.5;
}

/* Primary Button Variant */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

/* Outline Button Variant */
.btn-outline {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-surface-2);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface-2);
}

/* Ghost Button Variant */
.btn-ghost {
    color: var(--color-text-muted);
    background: transparent;
}

.btn-ghost:hover {
    color: var(--color-text);
    background: var(--color-surface-offset);
}

/* Large Button Size Variant */
.btn-lg {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-base);
}

/* ==========================================================================
   CARD COMPONENT SYSTEM
   ========================================================================== */

/*
 * Card Component Architecture
 * 
 * The card system provides a modern, elevated container design for content.
 * Cards use surface colors, borders, shadows, and hover effects for depth.
 * 
 * Components:
 * - .card: Base card container
 * - .card-header: Top section with icon and metadata
 * - .card-icon: Icon container with background
 * - .card-title: Card heading
 * - .card-content: Main content area
 */

/* Base Card Container */
.card {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-interactive);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Card Hover Effects */
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

/* Card Header Section */
.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Card Icon Container */
.card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-surface-offset);
    border: 1px solid var(--color-divider);
    overflow: hidden;
}

/* Card Icon Image */
.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

/* Card Title */
.card-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600; /* Keep 600 for card titles for hierarchy */
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

/* Card Title Link */
.card-title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-interactive);
}

.card-title a:hover {
    color: var(--color-primary);
}

/* Card Content */
.card-content {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Card Content Paragraphs */
.card-content p {
    margin-bottom: var(--space-3);
}

.card-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   BADGE COMPONENT SYSTEM
   ========================================================================== */

/*
 * Badge Component Architecture
 * 
 * Badges are small status indicators used to highlight important information,
 * product states, or feature availability. They use semantic colors with
 * 15% opacity backgrounds for subtle visual hierarchy.
 * 
 * Variants:
 * - .badge-live: Success/active state (green)
 * - .badge-beta: Warning/testing state (orange)
 * - .badge-new: Accent/new feature state (blue)
 * - .badge-soon: Muted/coming soon state (gray)
 * 
 * Requirements: 17.1, 17.2, 17.3, 17.4, 17.5, 17.6, 17.7, 17.8, 17.9
 */

/* Base Badge Class */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Badge Variant: Live/Active */
.badge-live {
    background: oklch(from var(--color-success) l c h / 0.15);
    color: var(--color-success);
}

/* Badge Variant: Beta/Testing */
.badge-beta {
    background: oklch(from var(--color-orange) l c h / 0.15);
    color: var(--color-orange);
}

/* Badge Variant: New Feature */
.badge-new {
    background: oklch(from var(--color-accent) l c h / 0.15);
    color: var(--color-accent);
}

/* Badge Variant: Coming Soon */
.badge-soon {
    background: oklch(from var(--color-text-muted) l c h / 0.15);
    color: var(--color-text-muted);
}

/* ==========================================================================
   FEATURE CHIP COMPONENT SYSTEM
   ========================================================================== */

/*
 * Feature Chip Component Architecture
 * 
 * Chips are compact elements used to display tags, categories, features,
 * or metadata. They have a subtle background and border for visual grouping
 * without overwhelming the content.
 * 
 * Components:
 * - .feature-chip: Individual chip element
 * - .feature-chips: Container for multiple chips with flex-wrap
 * 
 * Requirements: 18.1, 18.2, 18.3, 18.4, 18.5, 18.6, 18.7, 18.8, 18.9
 */

/* Base Feature Chip Class */
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    background: var(--color-surface-offset);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-divider);
    line-height: 1.2;
    transition: all var(--transition-interactive);
}

/* Feature Chip Hover State */
.feature-chip:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Feature Chips Container */
.feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* ==========================================================================
   PRICING CARD COMPONENT
   ========================================================================== */

/*
 * Pricing Card Component System
 * 
 * Modern pricing card components for displaying service tiers and product pricing.
 * 
 * Components:
 * - .pricing-card: Base pricing card with card background and border
 * - .pricing-card.featured: Featured variant with primary border and elevated shadow
 * - .pricing-popular: Badge for featured/popular plans
 * - .pricing-amount: Large display font for pricing amounts
 * - .pricing-features-list: Feature list with checkmark icons
 * 
 * Features:
 * - Flex column layout with appropriate gap spacing
 * - Full-width CTA buttons
 * - Elevated shadow for featured cards
 * - Consistent spacing using design tokens
 * 
 * Requirements: 19.1, 19.2, 19.3, 19.4, 19.5, 19.6, 19.7, 19.8, 19.9
 */

/* Base Pricing Card */
.pricing-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all var(--transition-interactive);
    position: relative;
}

/* Featured Pricing Card Variant */
.pricing-card.featured {
    border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: var(--shadow-md);
}

/* Pricing Popular Badge */
.pricing-popular {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: oklch(from var(--color-primary) l c h / 0.15);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Pricing Card Header */
.pricing-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Pricing Card Title */
.pricing-card-title {
    font-size: var(--text-lg);
    font-weight: 600; /* Keep 600 for pricing titles */
    color: var(--color-text);
    margin: 0;
}

/* Pricing Card Description */
.pricing-card-description {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Pricing Amount */
.pricing-amount {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400; /* Lighter weight for elegance */
    color: var(--color-text);
    margin: var(--space-2) 0;
}

.pricing-amount-currency {
    font-size: var(--text-lg);
    vertical-align: super;
}

.pricing-amount-period {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Pricing Features List */
.pricing-features-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pricing-features-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.5;
}

/* Checkmark Icon */
.pricing-features-list li::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: oklch(from var(--color-success) l c h / 0.15);
    color: var(--color-success);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--text-xs);
}

/* Pricing Card CTA */
.pricing-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* Featured Card Hover Effect */
.pricing-card.featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   MODERN FORM INPUT STYLING
   ========================================================================== */

/*
 * Form Input Component System
 * 
 * Provides modern, accessible form input styling with:
 * - Consistent border and border-radius using design tokens
 * - Surface-offset background for visual depth
 * - Primary color focus states with box-shadow
 * - Smooth transitions for interactive feedback
 * - Proper padding and sizing for usability
 * 
 * Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7, 7.8, 7.9
 */

/* Base Form Input Styles */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-offset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    color: var(--color-text);
    transition: all var(--transition-interactive);
    outline: none;
    box-sizing: border-box;
}

/* Focus States */
.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.12);
}

/* Placeholder Styling */
.form-input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* Textarea Specific Styles */
textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select Dropdown Styling */
select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23627069' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

/* Form Labels */
.form-label,
label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* Form Groups */
.form-group {
    margin-bottom: var(--space-4);
}

/* Disabled State */
.form-input:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-surface);
}

/* ==========================================================================
   SECTION LABEL AND TITLE PATTERN
   ========================================================================== */

/*
 * Section Header Component System
 * 
 * Provides consistent section headers with labels and titles for content organization.
 * This pattern creates a clear visual hierarchy for page sections.
 * 
 * Components:
 * - .section-header: Container for section label and title
 * - .section-label: Small uppercase label with primary color
 * - .section-title: Large display heading
 * - .section-sub: Optional subtitle text
 * 
 * Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9
 */

/* Section Header Container */
.section-header {
    margin-bottom: var(--space-12);
    text-align: left;
}

/* Section Label - Small uppercase text with primary color */
.section-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Increased for refined feel */
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
}

/* Section Title - Large display heading */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400; /* Lighter weight for elegance */
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

/* Section Subtitle - Optional descriptive text */
.section-sub {
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    text-wrap: pretty;
}

/* Centered Section Header Variant */
.section-header.centered {
    text-align: center;
}

/* Responsive Typography Adjustments */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: var(--space-8);
    }
}

/* ==========================================================================
   RESPONSIVE GRID LAYOUT SYSTEM
   ========================================================================== */

/*
 * Comprehensive Grid Utilities for Responsive Layouts
 * 
 * This grid system provides flexible, responsive layouts using CSS Grid.
 * It supports auto-fill, fixed columns, and responsive breakpoints.
 * 
 * GRID CLASSES:
 * 
 * 1. .grid (Base Grid Container)
 *    - Establishes grid context with gap spacing
 *    - Uses var(--space-5) for consistent gaps
 *    - Requirement: 9.6
 * 
 * 2. .grid-auto (Auto-Fill Responsive Grid)
 *    - Automatically fills columns based on available space
 *    - Minimum column width: 320px
 *    - Maximum column width: 1fr (equal distribution)
 *    - Uses minmax(min(320px, 100%), 1fr) for responsiveness
 *    - Requirement: 9.2
 * 
 * 3. .grid-2 (Two-Column Grid)
 *    - Fixed 2-column layout on desktop
 *    - Collapses to single column on mobile (< 768px)
 *    - Requirement: 9.4
 * 
 * 4. .grid-3 (Three-Column Grid)
 *    - Fixed 3-column layout on desktop (> 1024px)
 *    - 2 columns on tablet (768px - 1024px)
 *    - Single column on mobile (< 768px)
 *    - Requirement: 9.5
 * 
 * RESPONSIVE BREAKPOINTS:
 * - Mobile: < 768px → Single column for all grids
 * - Tablet: 768px - 1024px → 2 columns for .grid-3
 * - Desktop: > 1024px → Full column count
 * - Requirements: 9.3, 9.4, 9.5
 * 
 * USAGE EXAMPLES:
 * 
 * Auto-fill grid (responsive columns):
 * <div class="grid grid-auto">
 *   <div class="card">...</div>
 *   <div class="card">...</div>
 * </div>
 * 
 * Fixed 3-column grid:
 * <div class="grid grid-3">
 *   <div class="card">...</div>
 *   <div class="card">...</div>
 *   <div class="card">...</div>
 * </div>
 * 
 * ACCESSIBILITY:
 * - Grid maintains logical reading order
 * - Content remains readable at all breakpoints
 * - Requirement: 9.9
 * 
 * REQUIREMENTS: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.9
 */

/* Base grid class */
.grid {
    display: grid;
    gap: var(--space-5);
}

/* Auto-fill grid - responsive columns based on content width */
.grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* Fixed 2-column grid */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Fixed 3-column grid */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet breakpoint (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 3-column grid becomes 2 columns on tablet */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile breakpoint (< 768px) */
@media (max-width: 767px) {
    /* All grids become single column on mobile */
    .grid-auto,
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LEGACY BUTTON STYLES (Backward Compatibility)
   ========================================================================== */

.btn-custom-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: var(--gradient-2);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
    min-height: 48px;
    min-width: 48px;
    text-decoration: none;
}

.btn-custom-primary:hover {
    transform: translate3d(0, -2px, 0);
    /* GPU-accelerated */
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
    color: white;
}

.btn-custom-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    min-width: 48px;
    text-decoration: none;
}

.btn-custom-outline:hover {
    background: var(--primary);
    color: white;
}

@media (max-width: 767px) {

    .btn-custom-primary,
    .btn-custom-outline {
        padding: 1rem 1.5rem;
        min-height: 52px;
        font-size: 1rem;
    }
}

/* ==========================================================================
   POST META & NAVIGATION
   ========================================================================== */

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-faint);
    margin-bottom: var(--space-sm);
}

.post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.post-meta i {
    color: var(--color-primary);
}

.post-title {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
    .post-title {
        font-size: 1.25rem;
    }
}

.post-title a {
    color: var(--text-primary);
}

.post-title a:hover {
    color: var(--primary);
}

.post-excerpt {
    font-size: 0.9375rem;
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

/* Post Navigation */
.post-navigation-modern {
    margin-top: var(--space-xl);
}

.nav-links-modern {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 600px) {
    .nav-links-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

.nav-item {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.nav-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.nav-link-modern {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    text-decoration: none;
}

.nav-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon i {
    font-size: 1.125rem;
    color: white;
}

.nav-content {
    flex: 1;
    min-width: 0;
}

.nav-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-faint);
    margin-bottom: 0.25rem;
}

.nav-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

.nav-meta {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    margin-top: 0.25rem;
}

.nav-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: oklch(from var(--color-primary) l c h / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-arrow i {
    font-size: 0.875rem;
    color: var(--color-primary);
}

.nav-next-modern .nav-link-modern {
    flex-direction: row-reverse;
    text-align: right;
}

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

.share-buttons h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.share-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.share-links a {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
}

/* ==========================================================================
   SIDEBAR & WIDGETS
   ========================================================================== */

.widget-area {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .widget-area {
        padding: var(--space-lg);
    }
}

.widget {
    margin-bottom: var(--space-lg);
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border);
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--color-primary);
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget li {
    margin-bottom: var(--space-xs);
}

.widget a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.widget a:hover {
    background: oklch(from var(--color-primary) l c h / 0.08);
    color: var(--color-primary);
}

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

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    padding-block: var(--space-12);
    margin-top: var(--space-16);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.footer-widget h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.footer-widget p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget li {
    margin-bottom: var(--space-2);
}

.footer-widget a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-interactive);
}

.footer-widget a:hover {
    color: var(--color-primary);
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: var(--space-2);
}

.footer-menu a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-interactive);
}

.footer-menu a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-divider);
}

.footer-bottom p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.footer-bottom a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-interactive);
}

.footer-bottom a:hover {
    color: var(--color-primary);
}

.powered-by {
    font-size: 0.8125rem;
    opacity: 0.85;
    margin-top: var(--space-xs);
}

.powered-by a {
    font-weight: 600;
    color: #4facfe;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
}

input[type="submit"],
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-2);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
    min-height: 44px;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

/* Search Form */
.search-form {
    position: relative;
    max-width: 100%;
}

.search-form .search-field {
    padding-right: 3rem;
}

.search-form .search-submit {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    min-height: auto;
    background: transparent;
    color: var(--text-light);
    box-shadow: none;
}

.search-form .search-submit:hover {
    color: var(--primary);
    transform: translateY(-50%);
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */

.comments-area {
    margin-top: var(--space-2xl);
    padding: var(--space-lg);
    background: #ffffff;
    border-top: 1px solid var(--border-color);
}

.comments-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comments-title span {
    color: var(--text-primary);
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list li {
    margin-bottom: var(--space-md);
}

.comment-body {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.comment-body:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
}

.comment-author-avatar {
    flex-shrink: 0;
}

.comment-author-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-content-wrapper {
    flex: 1;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comment-author {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 0.85rem;
    color: var(--text-light);
}

.comment-metadata a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s;
}

.comment-metadata a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.comment-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.reply {
    text-align: right;
}

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    transition: all 0.2s ease;
}

.comment-reply-link:hover {
    background: var(--primary);
    color: white;
}

.comment-reply-link .reply-icon {
    font-size: 0.8em;
}

/* Threaded Comments */
.children {
    list-style: none;
    padding-left: 0;
    margin-left: 3rem;
    margin-top: var(--space-md);
    position: relative;
}

/* Mobile responsive threaded comments */
@media (max-width: 768px) {
    .children {
        margin-left: 1rem;
    }
}

.children::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

@media (max-width: 768px) {
    .children::before {
        left: -0.5rem;
    }
}

/* Comment Form */
.comment-respond {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: #f8fafc;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.comment-reply-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-reply-title small a {
    font-size: 0.85rem;
    color: #ef4444;
    font-weight: normal;
}

.comment-form {
    display: grid;
    gap: var(--space-md);
}

.comment-form-comment {
    order: 4;
    /* Move comment box to bottom if needed, or keep standard */
}

.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.form-submit {
    margin-top: var(--space-md);
}

.submit {
    background: var(--primary);
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

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

.pagination,
.nav-links:not(.nav-links-modern) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
    padding: var(--space-md) 0;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 var(--space-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: oklch(from var(--color-primary) l c h / 0.05);
}

.page-numbers.current {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.page-numbers.dots {
    border: none;
    background: transparent;
    pointer-events: none;
}

@media (max-width: 767px) {
    .page-numbers {
        min-width: 44px;
        height: 44px;
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    z-index: 99999;
    transition: top 0.3s ease;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0.5rem;
    outline: 3px solid white;
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus visible styles for better keyboard navigation */
*:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body {
        color: #000;
        background: #fff;
    }

    a {
        text-decoration: underline;
    }

    button,
    .btn-custom-primary,
    .btn-custom-outline {
        border: 2px solid currentColor;
    }
}

/* Large text mode support */
@media (prefers-reduced-transparency: reduce) {
    * {
        background-color: solid !important;
    }
}

/* Ensure sufficient color contrast */
.card-custom a,
.post a {
    color: #1a1f36;
    font-weight: 500;
}

.card-custom a:hover,
.post a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ==========================================================================
   ANIMATIONS - GPU Optimized for PageSpeed
   ========================================================================== */

/* Float animation - OPTIMIZED with GPU compositing */
.float-animation {
    animation: float 4s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
    /* Force GPU layer */
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-10px) translateZ(0);
    }
}

/* GPU-accelerated transitions for common interactive elements */
.btn-custom,
.btn-custom-outline,
.card-custom,
.nav-link-modern,
.toc-link,
.menu-item a {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Skeleton loading - use transform instead of background-position */
.adsbygoogle:not([data-ad-status])::before {
    animation: none;
    /* Disable skeleton animation for PageSpeed */
    background: #f5f5f5;
}

/* Reduced Motion - Always respect user preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   WORDPRESS CLASSES
   ========================================================================== */

.alignleft {
    float: left;
    margin: 0 var(--space-md) var(--space-md) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--space-md) var(--space-md);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
    background: #f8fafc;
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    margin-bottom: var(--space-md);
}

.wp-caption img {
    border-radius: var(--radius-sm);
}

.wp-caption-text {
    font-size: 0.8125rem;
    color: var(--text-light);
    text-align: center;
    margin-top: var(--space-xs);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.gallery-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   SITE MAIN LAYOUT FIXES
   ========================================================================== */

.site-main {
    min-width: 0;
}

/* Full width for pages/posts without sidebar */
.site-main>article {
    margin-bottom: var(--space-lg);
}

/* Page Links */
.page-links {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.page-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin: 0 0.125rem;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.page-links a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Edit Link */
.edit-link {
    display: inline-flex;
    margin-top: var(--space-sm);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {

    .site-header,
    .main-navigation,
    .site-footer,
    .share-buttons,
    .post-navigation-modern,
    .comments-area {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .card-custom,
    .post,
    article {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   ========================================================================== */

/*
 * Elementor Editor Fix - Prevent theme colors from affecting editor
 * The Elementor editor needs its own colors to remain visible
 */

/* Fix white text in Elementor editor */
.elementor-editor-active .elementor-element-editable,
.elementor-editor-active .elementor-editor-element-settings,
.elementor-editor-active .elementor-widget-text-editor,
.elementor-editor-active .elementor-text-editor,
.elementor-editor-active p,
.elementor-editor-active h1,
.elementor-editor-active h2,
.elementor-editor-active h3,
.elementor-editor-active h4,
.elementor-editor-active h5,
.elementor-editor-active h6 {
    color: #000000 !important;
}

/* Ensure Elementor editor background is visible */
.elementor-editor-active .elementor-element {
    background-color: transparent !important;
}

/* Fix Elementor preview mode text visibility */
body.elementor-editor-active,
body.elementor-editor-preview {
    color: #000000 !important;
}

/* Elementor widget text should be visible in editor */
.elementor-editor-active .elementor-widget-container {
    color: #000000 !important;
}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY - Ensure borders are visible
   ========================================================================== */

/* Elementor widgets with borders */
.elementor-widget-container {
    border-color: #e2e8f0 !important;
}

/* Elementor Icon boxes, info boxes, image boxes with borders */
.elementor-icon-box-wrapper,
.elementor-icon-box-content,
.elementor-info-box,
.elementor-flip-box,
.elementor-image-box-wrapper,
.elementor-cta,
.elementor-widget-icon-box .elementor-widget-container,
.elementor-widget-image-box .elementor-widget-container,
.elementor-widget-icon-list .elementor-widget-container {
    border-color: #e2e8f0 !important;
}

/* Force borders on Elementor elements that have border settings */
.elementor-element[data-settings*="border"],
.elementor-widget-container[style*="border"] {
    border-style: solid !important;
    border-color: #e2e8f0 !important;
}

/* Ensure borders show when set inline */
[style*="border-width"] {
    border-style: solid !important;
    border-color: #e2e8f0 !important;
}

/* Entry content boxes and elements */
.entry-content .wp-block-group,
.entry-content .wp-block-column,
.entry-content .wp-block-cover,
.entry-content figure,
.entry-content .wp-block-table {
    border-color: #e2e8f0 !important;
}

/* General box styling for visibility */
.entry-content [class*="box"],
.entry-content [class*="card"],
.page-content [class*="box"],
.page-content [class*="card"],
.elementor [class*="box"],
.elementor [class*="card"] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

/* Common Elementor box styling */
.elementor-icon-box-icon,
.elementor-image-box-img {
    border-color: #e2e8f0 !important;
}

/* Custom box class for manually added borders */
.bordered-box,
.border-box,
.has-border {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    padding: 1.5rem;
}

/* ==========================================================================
   LAYOUT ISOLATION - NUCLEAR PROTECTION
   ========================================================================== */

/* 
   STRATEGY: ID-based specificity.
   These rules use #IDs which override class-based styles from custom pages.
*/

/* 1. HEADER PROTECTION (#master-site-header) */

#master-site-header {
    /* Layout & Positioning */
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    z-index: 99999 !important;
    /* Above everything */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    /* Visuals */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    /* Reset Potential Interference */
    float: none !important;
    clear: both !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip: auto !important;
    overflow: visible !important;
}

/* Protect the container inside header */
#master-site-header>.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 0.75rem !important;
    /* STRICT MOBILE PADDING */
    display: block !important;
    position: relative !important;
}

/* Protect inner flex container */
#master-site-header .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    width: 100% !important;
    gap: 1rem !important;
    padding: 0 !important;
    /* No inner padding allowed */
    margin: 0 !important;
}

/* Protect Logo */
#master-site-header .site-branding,
#master-site-header .custom-logo-link {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#master-site-header img,
#master-site-header .custom-logo {
    max-height: 38px !important;
    min-height: 35px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    /* Soft round, not distorted */
}

/* Protect Navigation */
#master-site-header .main-navigation {
    position: static !important;
    /* Let flex handle it */
    padding: 0 !important;
    margin: 0 !important;
}

/* Protect Menu Toggle (Mobile) */
#master-site-header .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop overrides */
@media (min-width: 768px) {
    #master-site-header .header-inner {
        min-height: 70px !important;
    }

    #master-site-header img,
    #master-site-header .custom-logo {
        max-height: 55px !important;
    }

    #master-site-header>.container {
        padding: 0 1.5rem !important;
        /* STRICT DESKTOP PADDING */
    }

    #master-site-header .menu-toggle {
        display: none !important;
    }
}

/* 2. FOOTER PROTECTION (#master-site-footer) */

#master-site-footer {
    /* Layout */
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-top: auto !important;
    /* Sticky footer behavior */
    padding: 3rem 0 !important;
    /* STRICT FOOTER VERTICAL PADDING */
    z-index: 10 !important;
    box-sizing: border-box !important;

    /* Visuals */
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
    color: #edf2f7 !important;
    border: none !important;

    /* Resets */
    float: none !important;
    clear: both !important;
}

#master-site-footer>.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 0.75rem !important;
    /* STRICT FOOTER CONTAINER PADDING */
}

/* Protect Footer Grid */
#master-site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    margin-bottom: var(--space-8) !important;
    width: 100% !important;
}

/* Protect Footer Headings */
#master-site-footer h3,
#master-site-footer .widget-title {
    color: var(--color-text) !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    margin: 0 0 var(--space-4) 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: left !important;
    font-family: inherit !important;
}

/* Footer Desktop Overrides */
@media (min-width: 768px) {
    #master-site-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-8) !important;
    }

    #master-site-footer>.container {
        padding: 0 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    #master-site-footer .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
    }
}

/* 3. GLOBAL & MOBILE SAFETY NET */
@media (max-width: 767px) {

    /* Force viewport constraint */
    html {
        width: 100vw !important;
        overflow-x: hidden !important;
    }

    body {
        width: 100% !important;
        position: relative !important;
        overflow-x: hidden !important;
        /* Be careful with overflow-x hidden on body, sometimes breaks sticky headers, 
           but needed if users add wide tables */
    }

    /* Force full width on header/footer */
    #master-site-header,
    #master-site-footer {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
    }

    /* Force logo size safety on small screens */
    #master-site-header img {
        max-width: 150px !important;
        /* Prevents huge logos */
    }
}

/* ==========================================================================
   GOOGLE ADSENSE INTEGRATION STYLES
   ========================================================================== */

/* AdSense Wrapper - Universal container for all ads */
.adsense-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 2.5rem auto;
    padding: 1.5rem;
    overflow: hidden;
    text-align: center;
    clear: both;
    display: block;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    /* CLS Protection */
    min-height: 280px;
    transition: min-height 0.3s ease;
}

/* Ad Label - "Advertisement" text */
.ad-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    text-align: center;
}

/* AdSense Unit - The actual ad container - FULLY RESPONSIVE */
.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    background: transparent;
    min-height: 100px;
    /* Fallback min-height */
    box-sizing: border-box !important;
    overflow: visible !important;
    /* Prevent clipping on mobile */
    position: relative;
    z-index: 1;
}

/* Header Ad Styles - Horizontal */
.ad-header {
    margin: 2rem auto 2rem;
    max-width: var(--container-max);
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 120px;
    /* Height for horizontal ad + padding */
}

.ad-header .adsbygoogle {
    min-height: 90px;
    max-height: 280px;
}

/* Sidebar Ad Styles - Vertical */
.ad-sidebar {
    margin: 2rem 0;
    min-height: 300px;
}

.adsense-sidebar-widget {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.ad-sidebar .adsbygoogle {
    min-height: 250px;
    max-height: 600px;
}

/* In-Content Ad Styles - Responsive/Rectangle */
.ad-in-content {
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    border-top: 2px solid #e2e8f0;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    min-height: 320px;
    /* Standard rect ad height */
}

.ad-in-content .adsbygoogle {
    min-height: 250px;
}

/* Mid-Content Ad - Fluid/Autorelaxed */
.ad-mid-content {
    min-height: 280px;
}

/* Footer Ad Styles - Horizontal */
.ad-footer-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 3rem auto 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: 120px;
}

.ad-footer {
    margin: 0 auto;
}

.ad-footer .adsbygoogle {
    min-height: 90px;
    max-height: 280px;
}

/* Widget Area Ad Container */
.ad-container {
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    /* Prevent clipping on mobile */
    overflow: visible;
    box-sizing: border-box;
}

.ad-after-header {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.ad-before-content,
.ad-after-content {
    margin: 2.5rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Display Ad 1 - Auto-responsive ad unit */
.ad-display-1 {
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow: visible;
    /* Allow proper display on mobile */
    min-height: auto;
}

.ad-display-1 .adsbygoogle {
    min-height: 90px;
    max-height: 280px;
    width: 100% !important;
}

/* In-Article Ad - Fluid format */
.ad-in-article {
    width: 100%;
    max-width: 100%;
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border-top: 3px solid #667eea;
    border-bottom: 3px solid #764ba2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    overflow: visible;
    /* Allow proper display on mobile */
    min-height: auto;
}

.ad-in-article .adsbygoogle {
    min-height: 200px;
    width: 100% !important;
}

.ad-in-article-container {
    width: 100%;
    max-width: 100%;
    clear: both;
    box-sizing: border-box;
}

/* Mid-Content Ad - Inserted at 50% position */
.ad-mid-content {
    width: 100%;
    max-width: 100%;
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border-top: 2px solid #4facfe;
    border-bottom: 2px solid #00f2fe;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    overflow: visible;
    /* Allow proper display on mobile */
    min-height: auto;
}

.ad-mid-content .adsbygoogle {
    min-height: 200px;
    width: 100% !important;
}

/* Sticky Sidebar Ad - HIGH CTR placement */
.adsense-sticky-widget {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: box-shadow 0.3s ease;
}

.adsense-sticky-widget:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.adsense-sticky-widget .adsbygoogle {
    min-height: 250px;
    max-height: 600px;
}

/* Responsive Ad Adjustments */

/* Extra Small Devices (Portrait Phones, 0-479px) */
@media (max-width: 479px) {
    .adsense-wrapper {
        margin: 1.5rem auto;
        padding: 0.75rem;
        max-width: 100%;
        overflow-x: visible;
        /* Changed from hidden to visible to prevent clipping */
    }

    .ad-header,
    .ad-footer-container {
        padding: 0.75rem;
        margin: 1rem auto;
    }

    .ad-header .adsbygoogle {
        min-height: 50px;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ad-in-content {
        margin: 1.5rem auto;
        padding: 1rem 0.75rem;
    }

    .ad-before-content,
    .ad-after-content {
        padding: 1rem;
        margin: 1.5rem 0;
    }

    .ad-container {
        padding: 0.75rem;
        max-width: 100%;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    /* Display Ad 1 - Extra Small Mobile */
    .ad-display-1 {
        margin: 1rem auto;
        padding: 0.75rem;
        max-width: 100%;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-display-1 .adsbygoogle {
        min-height: 50px;
        max-height: 250px;
        width: 100% !important;
        overflow-x: visible;
        /* Allow full ad display */
    }

    /* In-Article Ad - Extra Small Mobile */
    .ad-in-article {
        margin: 1.5rem auto;
        padding: 1rem 0.75rem;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-in-article .adsbygoogle {
        min-height: 100px;
        width: 100% !important;
        overflow-x: visible;
        /* Allow full ad display */
    }

    /* Mid-Content Ad - Extra Small Mobile */
    .ad-mid-content {
        margin: 1.5rem auto;
        padding: 1rem 0.75rem;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-mid-content .adsbygoogle {
        min-height: 100px;
        width: 100% !important;
        overflow-x: visible;
        /* Allow full ad display */
    }

    /* Sticky Sidebar - Disable on extra small mobile */
    .adsense-sticky-widget {
        position: static !important;
        margin-bottom: 1rem;
        padding: 0.75rem;
    }

    .adsense-sticky-widget .adsbygoogle {
        min-height: 200px;
    }
}

/* Small Mobile Devices (480px-767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .adsense-wrapper {
        margin: 2rem auto;
        padding: 1rem;
        max-width: 100%;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-header,
    .ad-footer-container {
        padding: 1rem;
        margin: 1.5rem auto;
    }

    .ad-header .adsbygoogle {
        min-height: 60px;
        width: 100% !important;
    }

    .ad-in-content {
        margin: 2rem auto;
        padding: 1.5rem 1rem;
    }

    .ad-before-content,
    .ad-after-content {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    .ad-container {
        padding: 1rem;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    /* Display Ad 1 - Small Mobile */
    .ad-display-1 {
        margin: 1.5rem auto;
        padding: 1rem;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-display-1 .adsbygoogle {
        min-height: 60px;
        max-height: 250px;
        width: 100% !important;
        overflow-x: visible;
        /* Allow full ad display */
    }

    /* In-Article Ad - Small Mobile */
    .ad-in-article {
        margin: 2rem auto;
        padding: 1.5rem 1rem;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-in-article .adsbygoogle {
        min-height: 150px;
        width: 100% !important;
        overflow-x: visible;
        /* Allow full ad display */
    }

    /* Mid-Content Ad - Small Mobile */
    .ad-mid-content {
        margin: 2rem auto;
        padding: 1.5rem 1rem;
        overflow-x: visible;
        /* Prevent horizontal clipping */
    }

    .ad-mid-content .adsbygoogle {
        min-height: 150px;
        width: 100% !important;
        overflow-x: visible;
        /* Allow full ad display */
    }

    /* Sticky Sidebar - Disable on small mobile */
    .adsense-sticky-widget {
        position: static !important;
        margin-bottom: 1.5rem;
    }
}

/* Tablets Portrait (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .adsense-wrapper {
        margin: 2.5rem auto;
        padding: 1.25rem;
        max-width: 100%;
    }

    .ad-header .adsbygoogle {
        min-height: 90px;
        width: 100% !important;
    }

    .ad-footer .adsbygoogle {
        min-height: 90px;
        width: 100% !important;
    }

    /* Display Ad 1 - Tablet */
    .ad-display-1 {
        margin: 2rem auto;
        padding: 1.25rem;
    }

    .ad-display-1 .adsbygoogle {
        min-height: 90px;
        max-height: 280px;
        width: 100% !important;
    }

    /* In-Article Ad - Tablet */
    .ad-in-article {
        margin: 3rem auto;
        padding: 2rem 1.5rem;
    }

    .ad-in-article .adsbygoogle {
        min-height: 200px;
        width: 100% !important;
    }

    /* Mid-Content Ad - Tablet */
    .ad-mid-content {
        margin: 3rem auto;
        padding: 2rem 1.5rem;
    }

    .ad-mid-content .adsbygoogle {
        min-height: 200px;
        width: 100% !important;
    }

    /* Sticky Sidebar - Enable on tablet */
    .adsense-sticky-widget {
        position: sticky;
        top: 20px;
    }
}

/* Tablets Landscape & Small Desktops (992px-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .adsense-wrapper {
        margin: 2.5rem auto;
        padding: 1.5rem;
        max-width: 100%;
    }

    .ad-header .adsbygoogle,
    .ad-footer .adsbygoogle {
        min-height: 100px;
        max-height: 280px;
        width: 100% !important;
    }

    .ad-in-content .adsbygoogle {
        min-height: 280px;
    }

    /* Display Ad 1 - Small Desktop */
    .ad-display-1 .adsbygoogle {
        min-height: 100px;
        max-height: 280px;
        width: 100% !important;
    }

    /* In-Article Ad - Small Desktop */
    .ad-in-article {
        margin: 3.5rem auto;
        padding: 2.25rem 1.75rem;
    }

    .ad-in-article .adsbygoogle {
        min-height: 230px;
        width: 100% !important;
    }

    /* Mid-Content Ad - Small Desktop */
    .ad-mid-content {
        margin: 3.5rem auto;
        padding: 2.25rem 1.75rem;
    }

    .ad-mid-content .adsbygoogle {
        min-height: 230px;
        width: 100% !important;
    }
}

/* Medium Desktops (1200px-1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {

    .ad-header .adsbygoogle,
    .ad-footer .adsbygoogle {
        min-height: 100px;
        max-height: 280px;
        width: 100% !important;
    }

    .ad-in-content .adsbygoogle {
        min-height: 300px;
    }

    /* Display Ad 1 - Medium Desktop */
    .ad-display-1 .adsbygoogle {
        min-height: 100px;
        max-height: 280px;
        width: 100% !important;
    }

    /* In-Article Ad - Medium Desktop */
    .ad-in-article {
        margin: 4rem auto;
        padding: 2.5rem 2rem;
    }

    .ad-in-article .adsbygoogle {
        min-height: 250px;
        width: 100% !important;
    }

    /* Mid-Content Ad - Medium Desktop */
    .ad-mid-content {
        margin: 4rem auto;
        padding: 2.5rem 2rem;
    }

    .ad-mid-content .adsbygoogle {
        min-height: 250px;
        width: 100% !important;
    }
}

/* Large Desktops & 4K (1440px+) */
@media (min-width: 1440px) {
    .adsense-wrapper {
        margin: 3rem auto;
        padding: 2rem;
        max-width: var(--container-max);
    }

    .ad-header .adsbygoogle,
    .ad-footer .adsbygoogle {
        min-height: 120px;
        max-height: 280px;
        width: 100% !important;
    }

    .ad-in-content .adsbygoogle {
        min-height: 320px;
    }

    /* Display Ad 1 - Large Desktop */
    .ad-display-1 {
        margin: 2.5rem auto;
        padding: 2rem;
    }

    .ad-display-1 .adsbygoogle {
        min-height: 120px;
        max-height: 280px;
        width: 100% !important;
    }

    /* In-Article Ad - Large Desktop */
    .ad-in-article {
        margin: 4.5rem auto;
        padding: 3rem 2.5rem;
    }

    .ad-in-article .adsbygoogle {
        min-height: 280px;
        width: 100% !important;
    }

    /* Mid-Content Ad - Large Desktop */
    .ad-mid-content {
        margin: 4.5rem auto;
        padding: 3rem 2.5rem;
    }

    .ad-mid-content .adsbygoogle {
        min-height: 280px;
        width: 100% !important;
    }
}

/* ==========================================================================
   UNIVERSAL AD RESPONSIVENESS - COMPLETE SCREEN COMPATIBILITY
   ========================================================================== */

/* Core AdSense Unit - Enforced 100% Width on ALL Screens */
.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

/* Ensure all ad containers are fully responsive */
.adsense-wrapper,
.ad-container,
.ad-display-1,
.ad-in-article,
.ad-mid-content,
.ad-header,
.ad-footer,
.ad-sidebar,
.ad-footer-container,
.adsense-sidebar-widget,
.adsense-sticky-widget {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Force ins elements to be responsive */
ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent horizontal overflow on small screens */
@media (max-width: 767px) {

    .adsense-wrapper,
    .ad-container,
    .ad-display-1,
    .ad-in-article,
    .ad-mid-content,
    .ad-header,
    .ad-footer,
    .ad-footer-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    /* Ensure body doesn't cause overflow */
    body {
        overflow-x: hidden !important;
    }

    /* Extra safety for ad containers */
    .adsbygoogle {
        max-width: 100vw !important;
    }
}

/* ==========================================================================
   EXTRA GRANULAR BREAKPOINTS FOR COMPLETE COMPATIBILITY
   ========================================================================== */

/* Very Small Phones (0-359px) - iPhone SE 1st Gen, Galaxy Fold */
@media (max-width: 359px) {

    .adsense-wrapper,
    .ad-display-1,
    .ad-in-article,
    .ad-mid-content {
        padding: 0.5rem !important;
        margin: 0.75rem auto !important;
    }

    .adsbygoogle {
        min-height: 50px !important;
        max-height: 200px !important;
    }
}

/* Small Phones (360-414px) - Most Android phones */
@media (min-width: 360px) and (max-width: 414px) {

    .ad-display-1 .adsbygoogle,
    .ad-header .adsbygoogle {
        min-height: 50px !important;
        max-height: 250px !important;
    }

    .ad-in-article .adsbygoogle,
    .ad-mid-content .adsbygoogle {
        min-height: 100px !important;
    }
}

/* Large Phones (415-599px) - iPhone Plus, Pixel */
@media (min-width: 415px) and (max-width: 599px) {

    .ad-display-1 .adsbygoogle,
    .ad-header .adsbygoogle {
        min-height: 60px !important;
        max-height: 250px !important;
    }

    .ad-in-article .adsbygoogle,
    .ad-mid-content .adsbygoogle {
        min-height: 120px !important;
    }
}

/* Small Tablets (600-767px) - iPad Mini Portrait */
@media (min-width: 600px) and (max-width: 767px) {

    .ad-display-1 .adsbygoogle,
    .ad-header .adsbygoogle {
        min-height: 70px !important;
        max-height: 250px !important;
    }

    .ad-in-article .adsbygoogle,
    .ad-mid-content .adsbygoogle {
        min-height: 150px !important;
    }
}

/* iPad Portrait & Similar (768-834px) */
@media (min-width: 768px) and (max-width: 834px) {
    .adsense-wrapper {
        padding: 1.25rem !important;
    }

    .ad-display-1 .adsbygoogle {
        min-height: 90px !important;
        max-height: 280px !important;
    }
}

/* iPad Landscape & iPad Pro Portrait (835-1024px) */
@media (min-width: 835px) and (max-width: 1024px) {

    .ad-display-1 .adsbygoogle,
    .ad-header .adsbygoogle {
        min-height: 90px !important;
    }

    .adsense-sticky-widget {
        position: sticky !important;
        top: 20px !important;
    }
}

/* iPad Pro Landscape & Small Desktop (1025-1365px) */
@media (min-width: 1025px) and (max-width: 1365px) {
    .ad-display-1 .adsbygoogle {
        min-height: 100px !important;
        max-height: 280px !important;
    }
}

/* Standard Desktop (1366-1919px) */
@media (min-width: 1366px) and (max-width: 1919px) {
    .adsense-wrapper {
        max-width: 1200px !important;
    }

    .ad-display-1 .adsbygoogle {
        min-height: 110px !important;
        max-height: 280px !important;
    }
}

/* Full HD & 2K (1920-2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .adsense-wrapper {
        max-width: 1400px !important;
    }

    .ad-display-1 .adsbygoogle {
        min-height: 120px !important;
        max-height: 300px !important;
    }
}

/* 4K & 5K Displays (2560px+) */
@media (min-width: 2560px) {
    .adsense-wrapper {
        max-width: 1600px !important;
        padding: 3rem !important;
    }

    .ad-display-1 .adsbygoogle {
        min-height: 150px !important;
        max-height: 350px !important;
    }

    .ad-in-article .adsbygoogle,
    .ad-mid-content .adsbygoogle {
        min-height: 300px !important;
    }
}

/* ==========================================================================
   ORIENTATION-SPECIFIC OPTIMIZATIONS
   ========================================================================== */

/* Portrait Mode Optimization */
@media (orientation: portrait) and (max-width: 767px) {
    .adsense-wrapper {
        padding: 0.75rem !important;
    }

    .ad-display-1,
    .ad-in-article,
    .ad-mid-content {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Landscape Mode Optimization */
@media (orientation: landscape) and (max-height: 500px) {

    .ad-display-1 .adsbygoogle,
    .ad-header .adsbygoogle {
        min-height: 50px !important;
        max-height: 100px !important;
    }

    .adsense-wrapper {
        margin: 1rem auto !important;
        padding: 0.75rem !important;
    }
}

/* ==========================================================================
   DEVICE-SPECIFIC FIXES
   ========================================================================== */

/* iPhone X/11/12/13/14/15 - Notch Safety */
@supports (padding: max(0px)) {

    .adsense-wrapper,
    .ad-display-1,
    .ad-in-article,
    .ad-mid-content {
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    }
}

/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
    .adsense-wrapper {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .ad-display-1,
    .ad-in-article,
    .ad-mid-content {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
}

/* Ad Placeholder Styles (for development/testing) */
.ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cbd5e0;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    margin: 1rem 0;
    border-radius: 12px;
    color: #718096;
    font-weight: 600;
    text-align: center;
    min-height: 250px;
}

/* AdSense Loading State */
.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* Ensure ads don't break layout */
.adsbygoogle {
    overflow: hidden;
}

/* Improve ad visibility and compliance */
.adsense-wrapper::before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    margin-bottom: 1rem;
    border-radius: 2px;
}

/* Screen Reader Text for Ad Labels */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

/* Print Styles - Hide ads when printing */
@media print {

    .adsense-wrapper,
    .adsbygoogle,
    .ad-container,
    .ad-placeholder,
    .adsense-sidebar-widget {
        display: none !important;
    }
}

/* ==========================================================================
   ADSENSE COMPLIANCE - CONTENT QUALITY ENHANCEMENTS
   ========================================================================== */

/* Author Bio Box (AdSense requirement for trust and authority) */
.author-bio-box {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    margin: 3rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 1.375rem;
    margin-bottom: 0.75rem;
    color: #1a1f36;
}

.author-name a {
    color: var(--primary);
    text-decoration: none;
}

.author-name a:hover {
    text-decoration: underline;
}

.author-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1rem;
}

.author-links {
    margin-top: 1rem;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-height: 40px;
}

@media (max-width: 767px) {
    .author-bio-box {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
        text-align: center;
    }

    .author-avatar img {
        margin: 0 auto;
    }
}

/* Enhanced Entry Meta (AdSense requires clear date/author) */
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    font-size: 0.9375rem;
}

.entry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
}

.entry-meta i {
    color: var(--color-primary);
    font-size: 0.875rem;
}

.entry-meta a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.entry-meta a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.reading-time {
    color: var(--color-text-muted);
    font-weight: 500;
}

@media (max-width: 767px) {
    .entry-meta {
        gap: 1rem;
        font-size: 0.875rem;
    }
}

/* Category Links (improved visibility) */
.cat-links-text {
    margin: 0.75rem 0 1.5rem;
    font-size: 0.9375rem;
}

.cat-links-text a {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    margin-right: 0.5rem;
    background: rgba(91, 111, 216, 0.1);
    color: var(--primary);
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cat-links-text a:hover {
    background: var(--primary);
    color: white;
}

/* Content Quality Notice */
.content-quality-notice {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
}

.content-quality-notice strong {
    color: #856404;
}

/* ==========================================================================
   SEARCH FORM - Modern & Clean
   ========================================================================== */

.search-form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.search-input-group {
    display: flex;
    position: relative;
    width: 100%;
}

.search-field {
    width: 100%;
    padding: 1rem 1.25rem;
    padding-right: 3.5rem;
    /* Space for button */
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full) !important;
    /* Pill shape */
    font-size: 1rem;
    background: #ffffff;
    color: var(--text-primary);
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.search-field:focus {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    outline: none;
}

.search-submit {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 44px;
    /* Circle size */
    padding: 0;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.search-submit:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.search-submit:active {
    transform: scale(0.95);
}

/* ==========================================================================
   404 PAGE - Redesigned
   ========================================================================== */

.error-404 {
    padding: var(--space-xl) 0;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-title {
    font-size: clamp(6rem, 15vw, 10rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: var(--space-md);
    opacity: 0.8;
}

.page-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-weight: 500;
}

.error-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: var(--space-lg);
}

.error-search {
    margin: var(--space-xl) 0;
}

.error-404 .widget-area {
    margin-top: var(--space-2xl);
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error-404 .widget {
    background: #f8fafc;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.error-404 .widget-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    padding-bottom: 0.25rem;
}

/* ==========================================================================
   ARCHIVE & CATEGORY STYLES
   ========================================================================== */

.archive-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
    width: 100%;
}

@media (max-width: 767px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

.no-results {
    padding: var(--space-xl);
    background: #f8fafc;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px dashed var(--border-color);
}

/* ==========================================================================
   UI ELEMENT REFINEMENT - Buttons & Inputs
   ========================================================================== */

/* Primary Button */
.btn-custom-primary,
.btn-primary,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    background: var(--gradient-1);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-custom-primary:hover,
.btn-primary:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    color: #ffffff;
    filter: brightness(1.1);
}

.btn-custom-primary:active,
.btn-primary:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
    transform: translateY(1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Outline Button */
.btn-custom-outline,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--primary);
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-custom-outline:hover,
.btn-outline:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
    text-decoration: none;
}

.btn-custom-outline i,
.btn-outline i {
    transition: transform 0.3s ease;
}

.btn-custom-outline:hover i,
.btn-outline:hover i {
    transform: translateX(4px);
}

/* Disabled State */
button:disabled,
input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */

/*
 * Scroll-Based Reveal Animation System
 * 
 * This system provides smooth, performant scroll-triggered animations using
 * the Intersection Observer API instead of scroll event listeners.
 * 
 * PERFORMANCE BENEFITS:
 * - Uses Intersection Observer API (no scroll event listeners)
 * - Elements unobserved after reveal for optimal performance
 * - GPU-accelerated transforms (translateY)
 * - Respects prefers-reduced-motion preference
 * - Requirements: 8.2, 8.3, 8.7
 * 
 * ANIMATION BEHAVIOR:
 * - Initial state: opacity: 0, translateY(20px) - hidden and shifted down
 * - Visible state: opacity: 1, translateY(0) - fully visible at natural position
 * - Duration: 500ms with smooth easing curve
 * - Easing: cubic-bezier(0.16, 1, 0.3, 1) for natural motion
 * - Requirements: 8.1, 8.4, 8.5
 * 
 * STAGGERED DELAYS:
 * - .reveal-delay-1: 80ms delay
 * - .reveal-delay-2: 160ms delay
 * - .reveal-delay-3: 240ms delay
 * - .reveal-delay-4: 320ms delay
 * - .reveal-delay-5: 400ms delay
 * - .reveal-delay-6: 480ms delay
 * - Use for sequential card reveals in grids
 * - Requirement: 8.6
 * 
 * USAGE EXAMPLES:
 * 
 * Single element reveal:
 * <div class="reveal">Content appears on scroll</div>
 * 
 * Staggered card grid:
 * <div class="grid grid-3">
 *   <div class="card reveal reveal-delay-1">Card 1</div>
 *   <div class="card reveal reveal-delay-2">Card 2</div>
 *   <div class="card reveal reveal-delay-3">Card 3</div>
 * </div>
 * 
 * ACCESSIBILITY:
 * - Respects prefers-reduced-motion media query
 * - Animations disabled for users who prefer reduced motion
 * - Content remains accessible without animations
 * - Requirement: 8.8, 10.8
 * 
 * JAVASCRIPT INTEGRATION:
 * - Implemented in js/scroll-reveal.js
 * - Automatically initializes on DOM ready
 * - Observes all elements with .reveal class
 * - Adds .visible class when element enters viewport
 * - Requirement: 8.7, 8.9
 * 
 * REQUIREMENTS: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8, 8.9
 */

/* Base reveal state - visible by default for safety */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Only hide if JavaScript is confirmed loaded AND page is ready */
body.js-enabled.reveal-ready .reveal:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
}

/* Fallback: Show content if JavaScript doesn't load */
.no-js .reveal,
body:not(.js-enabled) .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Visible state - triggered by Intersection Observer */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay classes for sequential animations */
.reveal-delay-1 {
    transition-delay: 80ms;
}

.reveal-delay-2 {
    transition-delay: 160ms;
}

.reveal-delay-3 {
    transition-delay: 240ms;
}

.reveal-delay-4 {
    transition-delay: 320ms;
}

.reveal-delay-5 {
    transition-delay: 400ms;
}

.reveal-delay-6 {
    transition-delay: 480ms;
}

/* Respect user's motion preferences - disable animations */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3,
    .reveal-delay-4,
    .reveal-delay-5,
    .reveal-delay-6 {
        transition-delay: 0ms;
    }
    
    /* Disable off-canvas menu animations */
    .off-canvas-menu,
    .menu-overlay {
        transition: none;
    }
    
    .off-canvas-nav .sub-menu {
        transition: none;
    }
    
    .off-canvas-nav .sub-menu.open {
        animation: none;
    }
}