/*
Theme Name: BulbClick Metallic
Theme URI: https://example.com/bulbclick-metallic
Author: Custom Theme Author
Author URI: https://example.com
Description: A high-end WordPress theme with a Bulb-Click Metallic aesthetic — featuring stadium-shaped components, hard-edged solid shadows, brushed metal surfaces, and dynamic post card architecture.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
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: bulbclick-metallic
Tags: custom-menu, featured-images, theme-options, custom-logo, full-width-template, rtl-language-support
*/

/* ============================================================
   GLOBAL CSS VARIABLES
   ============================================================ */
:root {
    /* ── Spec-defined Primary: Electric Blue ───────────────── */
    --bcm-primary:        #3b82f6;
    --bcm-primary-glow:   rgba(59, 130, 246, 0.7);

    /* ── Spec-defined Shadow ───────────────────────────────── */
    --bcm-shadow-color:   #000000;
    --bcm-shadow:         6px 6px 0px #000000;
    --bcm-glow-intensity: 8px;

    /* ── Geometry ─────────────────────────────────────────── */
    --bcm-radius-pill:    60px;   /* headers / hero */
    --bcm-radius-card:    30px;   /* cards (spec: 30px) */
    --bcm-header-height:  56px;   /* slim floating pill */

    /* ── Metallic surface ─────────────────────────────────── */
    /* Spec: 145deg, #e0e0e0 → #ffffff → #d1d1d1 + 1px #c0c0c0 border */
    --bcm-metal-bg:       linear-gradient(145deg, #e0e0e0 0%, #ffffff 50%, #d1d1d1 100%);
    --bcm-metal-border:   1px solid #c0c0c0;
    --bcm-metal-dark:     linear-gradient(145deg, #2a2a2a 0%, #444444 50%, #1a1a1a 100%);
    --bcm-metal-dark-border: 1px solid #444444;

    /* ── Spec-defined Premium Gold ────────────────────────── */
    --bcm-premium:        #FFD700;
    --bcm-premium-text:   #7a5c00;

    /* ── Typography (spec: Inter + system-ui, Black weights) ─ */
    --bcm-font-main:      'Inter', 'system-ui', -apple-system, sans-serif;
    --bcm-font-mono:      'JetBrains Mono', 'Courier New', monospace;

    /* ── Transitions ──────────────────────────────────────── */
    --bcm-transition:     0.18s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Light-mode defaults (before JS sets data-theme) ─── */
    --bcm-bg:           #f5f5f5;
    --bcm-surface:      #ffffff;
    --bcm-text:         #111111;
    --bcm-text-muted:   #555555;
    --bcm-border:       #c0c0c0;
}

/* Dark mode variables */
[data-theme="dark"] {
    --bcm-bg:           #111111;
    --bcm-surface:      #1e1e1e;
    --bcm-text:         #f0f0f0;
    --bcm-text-muted:   #a0a0a0;
    --bcm-border:       #333333;
    --bcm-metal-bg:     var(--bcm-metal-dark);
    --bcm-metal-border: var(--bcm-metal-dark-border);
}

[data-theme="light"] {
    --bcm-bg:           #f5f5f5;
    --bcm-surface:      #ffffff;
    --bcm-text:         #111111;
    --bcm-text-muted:   #555555;
    --bcm-border:       #c0c0c0;
    --bcm-metal-border: 1px solid #c0c0c0;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--bcm-font-main);
    background-color: var(--bcm-bg, #f5f5f5);
    color: var(--bcm-text, #111111);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

a:hover {
    color: var(--bcm-primary);
    /* No global underline — each component manages its own hover decoration.
       Content body text links add underline via .bcm-content a:hover below. */
    text-decoration: none;
}

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: var(--bcm-font-main);
    border: none;
    background: none;
}

input, textarea, select {
    font-family: var(--bcm-font-main);
}

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

.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    background: var(--bcm-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 99999;
    border-radius: 0 0 4px 0;
}

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

:focus-visible {
    outline: 2px solid var(--bcm-primary);
    outline-offset: 2px;
}

/* ============================================================
   LAYOUT WRAPPERS
   ============================================================ */
.bcm-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.bcm-section {
    padding: 60px 0;
}

.bcm-main-content {
    /* header top:16px + header height + 8px breathing room */
    padding-top: calc(16px + var(--bcm-header-height) + 8px);
    min-height: 70vh;
}

/* ============================================================
   RESOLVED BASE COLORS (no FOUC before JS theme toggle)
   ============================================================ */
body {
    background-color: var(--bcm-bg);
    color: var(--bcm-text);
}

/* ============================================================
   INDEX / ARCHIVE PAGE ELEMENTS
   ============================================================ */
.bcm-posts-header {
    margin-bottom: 32px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bcm-border, #e0e0e0);
}

.bcm-posts-title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bcm-text);
    margin: 0;
}

.bcm-no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    font-size: 1rem;
    color: var(--bcm-text-muted);
    background: var(--bcm-metal-bg);
    border-radius: var(--bcm-radius-card);
    box-shadow: var(--bcm-shadow);
}

/* ============================================================
   SOLID SHADOW UTILITY (Core Aesthetic)
   ============================================================ */
.bcm-shadow {
    box-shadow: var(--bcm-shadow);
}

/* (metal utility merged above) */

/* Metal surface utility — always apply the spec border */
.bcm-metal {
    background: var(--bcm-metal-bg);
    border: var(--bcm-metal-border);
}

/* Glow hover utility */
.bcm-glow-hover {
    transition: filter var(--bcm-transition), transform var(--bcm-transition);
}

.bcm-glow-hover:hover {
    /* Spec: 8px electric-blue drop-shadow glow */
    filter: drop-shadow(0 0 8px var(--bcm-primary-glow));
}

.bcm-glow-hover:active {
    /* Spec: scale(1.05) Bulb-Click pop-out */
    transform: scale(1.05);
}

/* ============================================================
   WORDPRESS DEFAULT CLASS SUPPORT
   ============================================================ */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--bcm-text-muted); }
.sticky { border-left: 4px solid var(--bcm-primary); padding-left: 12px; }
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }
.size-full { width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

/* ============================================================
   BODY / WYSIWYG CONTENT  — prose links DO get underline
   ============================================================ */
.entry-content a:hover,
.wp-block-group a:hover,
.bcm-content a:hover {
    text-decoration: underline;
}