/*
Theme Name: UI Sucks Theme
Theme URI: https://example.com/ui-sucks-theme
Author: UI Sucks Team
Author URI: https://example.com
Description: Modern production-ready theme built with plain CSS custom properties, a hand-authored utility layer (css/utility-classes.css), and advanced WP Customizer controls.
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ui-sucks
Tags: custom-colors, custom-menu, featured-images, flexible-header, responsive-layout
*/

/* ==========================================================================
   1. CSS Custom Properties (:root) - Variable Bindings
   ========================================================================== */
:root {
    /* Brand Color Palette */
    --uis-color-brand-blue: #1d4ed8;
    --uis-color-brand-orange: #d97706;
    --uis-color-brand-dark: #0f172a;
    --uis-color-brand-light: #f8fafc;

    /* Light/Dark Property Bindings */
    --uis-bg-primary: #ffffff;
    --uis-bg-secondary: #f8fafc;
    --uis-bg-card: #ffffff;
    --uis-text-primary: #0f172a;
    --uis-text-secondary: #64748b;
    --uis-text-muted: #94a3b8;
    --uis-border-color: #e2e8f0;

    /* A lighter --uis-border-color reads as invisible on the theme's dark
       panels (hero video box, forum section, footer) -- this is what
       border-slate-700/800/900 used to hardcode for exactly that context. */
    --uis-dark-border-color: #334155;

    /* Header/Footer -- kept as their own tokens (not tied to bg-primary/
       bg-secondary) since this theme's default design intentionally keeps
       the header light and the footer dark regardless of dark-mode
       preference; customizing them doesn't follow the light/dark toggle
       below the way body/card backgrounds do. */
    --uis-header-bg: #ffffff;
    --uis-header-text: #1e293b;
    --uis-footer-bg: #020617;
    --uis-footer-text: #94a3b8;

    /* Glassmorphism Border and Backdrop Parameters */
    --uis-glass-bg: rgba(255, 255, 255, 0.75);
    --uis-glass-border: rgba(226, 232, 240, 0.8);
    --uis-glass-blur: 12px;
    --uis-glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);

    /* Dynamic Typography */
    --uis-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Spacing Parameters */
    --uis-spacing-xs: 0.25rem;
    --uis-spacing-sm: 0.5rem;
    --uis-spacing-md: 1rem;
    --uis-spacing-lg: 1.5rem;
    --uis-spacing-xl: 2rem;
}

/* Dark Mode Override Support */
@media (prefers-color-scheme: dark) {
    :root {
        --uis-bg-primary: #0f172a;
        --uis-bg-secondary: #1e293b;
        --uis-bg-card: #1e293b;
        --uis-text-primary: #f8fafc;
        --uis-text-secondary: #94a3b8;
        --uis-text-muted: #64748b;
        --uis-border-color: #334155;

        --uis-glass-bg: rgba(15, 23, 42, 0.75);
        --uis-glass-border: rgba(51, 65, 85, 0.8);
        --uis-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    }
}

/* ==========================================================================
   2. Comprehensive CSS Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: var(--uis-font-family);
    scroll-behavior: smooth;
}

body {
    background-color: var(--uis-bg-primary);
    color: var(--uis-text-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

/* Plain element selectors are enough here -- header.php/footer.php each
   have exactly one <header>/<footer> landmark, and using the element
   itself (not a class) means there's no Tailwind-style utility class of
   equal or higher specificity left in the markup to silently win instead,
   which is exactly what was overriding these before this fix. */
header {
    background-color: var(--uis-header-bg);
    color: var(--uis-header-text);
    border-color: var(--uis-border-color);
}

footer {
    background-color: var(--uis-footer-bg);
    color: var(--uis-footer-text);
    border-color: var(--uis-border-color);
}

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

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

button,
[role="button"] {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

/* ==========================================================================
   3. Glassmorphism Utilities & UI Component Overrides
   ========================================================================== */
.uis-glass-panel {
    background: var(--uis-glass-bg);
    backdrop-filter: blur(var(--uis-glass-blur));
    -webkit-backdrop-filter: blur(var(--uis-glass-blur));
    border: 1px solid var(--uis-glass-border);
    box-shadow: var(--uis-glass-shadow);
}

/* WordPress Core Alignments & Accessibility */
.alignleft {
    float: left;
    margin-right: var(--uis-spacing-lg);
}

.alignright {
    float: right;
    margin-left: var(--uis-spacing-lg);
}

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

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

.screen-reader-text:focus {
    background-color: var(--uis-bg-primary);
    border-radius: 4px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--uis-color-brand-blue);
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}