/*
Theme Name:        TechPulse Pro
Theme URI:         https://techpulsepro.com
Author:            TechPulse Team
Author URI:        https://techpulsepro.com
Description:       A premium technology blog and software discovery platform theme with dark/light mode, AJAX search, software directory, computer specs, AI tools directory, and AdSense-optimized layouts.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       techpulse-pro
Tags:              technology, blog, dark-mode, ajax, software-directory, responsive, custom-post-types, adsense, seo
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  CSS Reset & Box Model
   3.  Base Typography
   4.  Layout Utilities
   5.  Accessibility
   6.  WordPress Core Classes
   7.  Smooth Transitions (Dark Mode)
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand Colors */
    --color-primary:        #1a73e8;
    --color-primary-hover:  #1557b0;
    --color-primary-light:  rgba(26, 115, 232, 0.12);
    --color-secondary:      #6c63ff;
    --color-secondary-hover:#5a52d5;
    --color-accent:         #00bcd4;
    --color-accent-hover:   #0097a7;

    /* Light Mode Surfaces */
    --color-bg:             #f5f7fb;
    --color-surface:        #ffffff;
    --color-surface-2:      #f0f4ff;
    --color-surface-3:      #e8edf5;

    /* Light Mode Text */
    --color-text:           #1e293b;
    --color-text-muted:     #64748b;
    --color-text-subtle:    #94a3b8;
    --color-heading:        #0f172a;

    /* Light Mode Borders */
    --color-border:         #e2e8f0;
    --color-border-light:   #f1f5f9;

    /* Status Colors */
    --color-success:        #10b981;
    --color-warning:        #f59e0b;
    --color-danger:         #ef4444;
    --color-info:           #3b82f6;

    /* Dark Mode (toggled by [data-theme="dark"]) */
    --color-dark-bg:        #0f172a;
    --color-dark-surface:   #1e293b;
    --color-dark-surface-2: #263248;
    --color-dark-surface-3: #2d3f5a;
    --color-dark-text:      #e2e8f0;
    --color-dark-muted:     #94a3b8;
    --color-dark-subtle:    #64748b;
    --color-dark-heading:   #f8fafc;
    --color-dark-border:    #334155;
    --color-dark-border-light: #1e293b;

    /* Semantic Tokens (resolved per theme) */
    --bg:                   var(--color-bg);
    --surface:              var(--color-surface);
    --surface-2:            var(--color-surface-2);
    --surface-3:            var(--color-surface-3);
    --text:                 var(--color-text);
    --text-muted:           var(--color-text-muted);
    --text-subtle:          var(--color-text-subtle);
    --heading:              var(--color-heading);
    --border:               var(--color-border);
    --border-light:         var(--color-border-light);

    /* Typography */
    --font-sans:            'DM Sans', 'Outfit', system-ui, -apple-system, sans-serif;
    --font-display:         'Space Grotesk', 'Syne', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:              0.75rem;     /* 12px */
    --text-sm:              0.875rem;    /* 14px */
    --text-base:            1rem;        /* 16px */
    --text-lg:              1.125rem;    /* 18px */
    --text-xl:              1.25rem;     /* 20px */
    --text-2xl:             1.5rem;      /* 24px */
    --text-3xl:             1.875rem;    /* 30px */
    --text-4xl:             2.25rem;     /* 36px */
    --text-5xl:             3rem;        /* 48px */

    --font-normal:          400;
    --font-medium:          500;
    --font-semibold:        600;
    --font-bold:            700;
    --font-extrabold:       800;

    --leading-tight:        1.25;
    --leading-snug:         1.375;
    --leading-normal:       1.5;
    --leading-relaxed:      1.625;
    --leading-loose:        2;

    /* Spacing */
    --space-1:              0.25rem;
    --space-2:              0.5rem;
    --space-3:              0.75rem;
    --space-4:              1rem;
    --space-5:              1.25rem;
    --space-6:              1.5rem;
    --space-8:              2rem;
    --space-10:             2.5rem;
    --space-12:             3rem;
    --space-16:             4rem;
    --space-20:             5rem;
    --space-24:             6rem;

    /* Layout */
    --container-sm:         640px;
    --container-md:         768px;
    --container-lg:         1024px;
    --container-xl:         1280px;
    --container-2xl:        1440px;
    --container-max:        1320px;
    --container-padding:    1.5rem;

    /* Border Radius */
    --radius-sm:            0.25rem;
    --radius-md:            0.5rem;
    --radius-lg:            0.75rem;
    --radius-xl:            1rem;
    --radius-2xl:           1.5rem;
    --radius-full:          9999px;

    /* Shadows */
    --shadow-sm:            0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-md:            0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05);
    --shadow-lg:            0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.05);
    --shadow-xl:            0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);
    --shadow-primary:       0 4px 20px rgba(26, 115, 232, 0.25);
    --shadow-card:          0 2px 12px rgba(0,0,0,.06);
    --shadow-card-hover:    0 8px 30px rgba(0,0,0,.12);

    /* Z-Index Scale */
    --z-base:               0;
    --z-raised:             10;
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-overlay:            300;
    --z-modal:              400;
    --z-toast:              500;

    /* Transitions */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;
    --transition-bounce:    300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Header */
    --header-height:        70px;
    --topbar-height:        40px;

    /* Sidebar */
    --sidebar-width:        320px;
    --gap-grid:             1.5rem;
}

/* Dark Mode Token Override */
[data-theme="dark"] {
    --bg:           var(--color-dark-bg);
    --surface:      var(--color-dark-surface);
    --surface-2:    var(--color-dark-surface-2);
    --surface-3:    var(--color-dark-surface-3);
    --text:         var(--color-dark-text);
    --text-muted:   var(--color-dark-muted);
    --text-subtle:  var(--color-dark-subtle);
    --heading:      var(--color-dark-heading);
    --border:       var(--color-dark-border);
    --border-light: var(--color-dark-border-light);

    --shadow-sm:    0 1px 2px 0 rgba(0,0,0,.25);
    --shadow-md:    0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.25);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.35);
    --shadow-card:  0 2px 12px rgba(0,0,0,.3);
    --shadow-card-hover: 0 8px 30px rgba(0,0,0,.5);
}


/* ============================================================
   2. CSS RESET & BOX MODEL
   ============================================================ */

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

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

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-8) 0;
}

/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: var(--heading);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    color: var(--text);
    margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--font-semibold); }

em, i { font-style: italic; }

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface-2);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--color-secondary);
}

pre {
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    overflow-x: auto;
    margin: var(--space-6) 0;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);
}

blockquote {
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
    background: var(--color-primary-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text);
    font-style: italic;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow {
    max-width: 800px;
}

.container--wide {
    max-width: 1440px;
}

/* Site Layout */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
    padding: var(--space-8) 0;
}

/* Content + Sidebar Grid */
.content-sidebar-wrap {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--gap-grid);
    align-items: start;
}

@media (max-width: 1024px) {
    .content-sidebar-wrap {
        grid-template-columns: 1fr;
    }
}

/* Cards Grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--gap-grid);
}

@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }
}

/* Section Titles */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    gap: var(--space-4);
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 4px;
    height: 1.2em;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-full);
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
}

.section-link {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.section-link:hover {
    gap: var(--space-2);
}

/* ============================================================
   5. ACCESSIBILITY
   ============================================================ */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    z-index: var(--z-toast);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
   6. WORDPRESS CORE CLASSES
   ============================================================ */

/* Alignment */
.alignleft   { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright  { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { margin-inline: auto; display: block; }
.alignwide   { width: calc(100% + 4rem); margin-inline: -2rem; max-width: none; }
.alignfull   { width: 100vw; margin-inline: calc(-50vw + 50%); max-width: none; }

/* Captions */
.wp-caption {
    max-width: 100%;
    text-align: center;
}

.wp-caption-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* Gallery */
.gallery {
    display: grid;
    gap: var(--space-3);
}

.gallery-columns-2  { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3  { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4  { grid-template-columns: repeat(4, 1fr); }

.gallery-item img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* Screen Reader Text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Sticky Sidebar */
.widget-area .widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.widget-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* Pagination */
.pagination,
.posts-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-12) 0;
}

.page-numbers,
.nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.page-numbers.current,
.page-numbers:hover,
.nav-links a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Tag Cloud */
.tagcloud a {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm) !important;
    margin: var(--space-1);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.tagcloud a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ============================================================
   7. SMOOTH TRANSITIONS — DARK MODE
   ============================================================ */

/* Apply smooth transitions when switching themes */
body,
body *:not(.no-transition) {
    transition:
        background-color var(--transition-slow),
        border-color var(--transition-slow),
        color var(--transition-slow),
        box-shadow var(--transition-slow);
}

/* But keep fast transitions for interactive elements */
a,
button,
input,
.btn,
.card,
[class*="hover"] {
    transition-duration: var(--transition-fast) !important;
    transition-property: color, background-color, border-color, box-shadow, transform, opacity !important;
}

/* Disable all transitions on page load to prevent flash */
.preload * {
    transition: none !important;
}

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

@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .ad-zone,
    #dark-mode-toggle,
    .live-search-bar,
    .news-ticker {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

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