/*
Theme Name: Lost in the Rhythm
Theme URI: https://www.lostintherhythm.com
Author: Lost in the Rhythm
Description: Custom PHP theme for Lost in the Rhythm — deep, soulful, spiritual house record label. Includes a lightweight custom shop (no plugin) for vinyl and merch.
Version: 1.0.0
Text Domain: litr
*/

/* ==========================================================================
   0. CSS RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font-family: inherit; }

/* ==========================================================================
   1. DESIGN TOKENS
   Replace these values with your real brand colors / fonts / logo sizing.
   Keeping them centralized here means the whole site updates from one place.
   ========================================================================== */
:root {
    /* Colors — pulled from your live site's Kubio design tokens (gold/red/black/white) */
    --color-bg: #0a0a0a;
    --color-bg-alt: #161616;
    --color-text: #ffffff;
    --color-text-muted: #b3b3b3;
    --color-gold: #fac507;     /* --kubio-color-1 on live site */
    --color-red: #c61c0d;      /* --kubio-color-2 on live site */
    --color-accent: var(--color-gold);
    --color-accent-alt: var(--color-red);
    --color-border: #262626;

    /* Type — matches your live site: Poppins headings, Roboto body.
       "--font-mono" is a legacy name from an earlier design pass that used
       a monospace typeface for labels/nav/prices — the real site never
       used one, so this now points to Poppins like everything else,
       rather than renaming every rule that references it. */
    --font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

    /* Layout */
    --container-width: 1200px;
    --gutter: 24px;
    --radius: 2px; /* label sites usually read sharper, not rounded */
}

/* ==========================================================================
   2. LAYOUT / CONTAINER
   ========================================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ==========================================================================
   3. HEADER / NAV
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(12, 12, 13, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}
.site-logo { font-family: var(--font-heading); font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 0; }
.site-logo a { display: inline-block; line-height: normal; }
/* Hard cap regardless of WP's exact markup (custom-logo-link > custom-logo, or a bare img) —
   protects against exactly what broke in the last deploy: an uncapped full-res logo. */
.site-logo img,
.site-logo .custom-logo {
    height: 36px !important;
    width: auto !important;
    max-width: 220px;
    display: block;
}
.primary-nav ul { display: flex; gap: 28px; align-items: center; }
.primary-nav a {
    /* Matches the real site's actual nav CSS: Poppins, normal case,
       no letter-spacing — confirmed against the live theme's stylesheet
       (nav rules used text-transform:none, font-weight:400). */
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}
.primary-nav a:hover,
.primary-nav a.is-active { color: var(--color-accent); }
.cart-link {
    position: relative;
    font-family: var(--font-mono);
    font-size: 13px;
}
.cart-count {
    display: inline-block;
    margin-left: 6px;
    background: var(--color-accent);
    color: #0c0c0d;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 50%;
}
.menu-toggle { display: none; background: none; border: 0; color: var(--color-text); }

@media (max-width: 780px) {
    .primary-nav { display: none; }
    .menu-toggle { display: block; }
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; }
h3 { font-weight: 500; }
p { margin: 0 0 1em; color: var(--color-text-muted); font-weight: 300; }
.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
}

/* ==========================================================================
   5b. GLOW DIVIDER — a short glowing red line, used under section headers
   and eyebrows to bring the label's red accent into the page rather than
   leaving gold to carry the entire palette on its own.
   ========================================================================== */
.glow-divider {
    width: 56px;
    height: 3px;
    background: var(--color-red);
    border: none;
    margin: 14px 0 22px;
    box-shadow:
        0 0 8px 1px rgba(198, 28, 13, 0.7),
        0 0 20px 4px rgba(198, 28, 13, 0.35);
}
.glow-divider--center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px;
    border: 1px solid var(--color-text);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn:hover { background: var(--color-text); color: var(--color-bg); }
.btn--accent { border-color: var(--color-accent); background: var(--color-accent); color: #0c0c0d; transition: all 0.2s ease; }
.btn--accent:hover {
    opacity: 0.9;
    background: var(--color-accent);
    color: #0c0c0d;
    /* A touch of the label's red on hover, so red isn't confined to the
       divider lines — a small interactive echo of the brand's second color. */
    box-shadow: 0 0 16px 2px rgba(198, 28, 13, 0.5);
}
.btn--full { width: 100%; text-align: center; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
    padding: 120px 0 80px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}
.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.25;
    pointer-events: none;
}
.hero__content { position: relative; max-width: 720px; }

/* ==========================================================================
   7. PRODUCT GRID (Shop / Store)
   ========================================================================== */
.shop-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.shop-filters a {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.shop-filters a.is-active,
.shop-filters a:hover { color: var(--color-accent); border-color: var(--color-accent); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gutter);
}
.product-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    transition: border-color 0.15s ease;
}
.product-card:hover { border-color: var(--color-text-muted); }
.product-card__image { aspect-ratio: 1/1; overflow: hidden; background: #000; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 16px; }
.product-card__type {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}
.product-card__title { font-size: 16px; margin: 6px 0; }
.product-card__price { font-family: var(--font-mono); font-size: 14px; }
.product-card__stock {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 6px;
}
.product-card__stock.is-low { color: var(--color-accent-alt); }
.product-card__stock.is-out { color: #666; }

/* ==========================================================================
   8. SINGLE PRODUCT
   ========================================================================== */
.product-single {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    padding: 64px 0;
}
.product-single__gallery img { border: 1px solid var(--color-border); margin-bottom: 12px; }
.product-single__price { font-family: var(--font-mono); font-size: 22px; margin: 12px 0 24px; }
.variant-picker { margin: 20px 0; }
.variant-picker__label {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-option {
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 13px;
    cursor: pointer;
}
.variant-option.is-selected { border-color: var(--color-accent); color: var(--color-accent); }
.variant-option.is-disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.qty-input {
    width: 64px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 10px;
    text-align: center;
}

@media (max-width: 780px) {
    .product-single { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   9. CART DRAWER
   ========================================================================== */
.cart-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(420px, 100%);
    height: 100%;
    background: var(--color-bg-alt);
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.cart-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em;
}
.cart-drawer__items { flex: 1; overflow-y: auto; padding: 20px; }
.cart-line { display: flex; gap: 12px; margin-bottom: 20px; }
.cart-line img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--color-border); }
.cart-line__meta { flex: 1; }
.cart-line__title { font-size: 14px; margin-bottom: 4px; }
.cart-line__variant { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
.cart-line__remove { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); cursor: pointer; }
.cart-drawer__footer { padding: 20px; border-top: 1px solid var(--color-border); }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--font-mono); margin-bottom: 16px; }
.cart-empty { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 13px; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 56px 0 32px;
    margin-top: 96px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 32px;
    margin-bottom: 40px;
}
.site-footer h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__bottom {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex; justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 780px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}