/*
Theme Name: News Theme
Theme URI: https://howzit.blog
Author: Bernard Posniak
Author URI: https://howzit.blog
Description: A minimalist, mobile-first, high-performance WordPress theme optimized for Core Web Vitals, Answer Engines (LLMs), and Google Ads. Built with Pico.css and Alpine.js.
Version: 1.0.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: news-theme
Tags: news, minimalist, fast, seo, accessible, mobile-first
*/

:root {
    /* Brand Colors (OnDigital Palette) */
    --primary: #0F172A;
    --primary-hover: #1e293b;
    --primary-focus: #334155;
    --primary-inverse: #ffffff;
    
    --secondary: #4F46E5;
    --secondary-hover: #4338ca;
    
    --accent: #FF6B35;
    
    /* Typography & Spacing defaults for Pico.css overrides */
    --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --pico-font-size: 100%; /* 16px usually */
    --pico-line-height: 1.5;
    --pico-border-radius: 0.25rem;
    
    /* WCAG 2.2 spacing */
    --nav-element-spacing-vertical: 1rem;
    --nav-link-spacing-vertical: 1rem;
}

/* 
 * --------------------------------------------------------------------------
 * Core Overrides for Pico.css 
 * --------------------------------------------------------------------------
 */

/* Ensure minimum touch targets for WCAG 2.2 (44px) */
a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
}

/* Focus visibility for Accessibility */
:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
}

/* Container width for readability */
main.container {
    max-width: 800px; /* Reading width optimization */
}

/* Header customization */
body > header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    background-color: var(--pico-background-color);
    position: sticky;
    top: 0;
    z-index: 99;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    background: var(--primary);
    color: var(--primary-inverse);
    padding: 1rem;
    z-index: 1000;
    text-decoration: none;
    font-weight: bold;
}

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

/* Utility: Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}