/*
Theme Name: Carnivore Smash Burger Theme
Theme URI: https://carnivoresmash.ky/
Description: A premium, high-impact WordPress theme for Carnivore Smash Burger, replicating the high-fidelity React design with custom HSL variables and brutalist shadows.
Author: Antigravity
Author URI: https://google.com
Version: 1.5.0
License: GNU General Public License v2 or later
Text Domain: carnivore-smash
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --background: 0 0% 7%; /* Exact #121212 */
    --foreground: 40 30% 96%;
    --card: 0 0% 10%;
    --card-foreground: 40 30% 96%;

    /* Carnivore signature red - Reverted to Punchy Tone per User Feedback */
    --primary: 357 73% 47%;
    --primary-foreground: 40 30% 96%;
    --primary-glow: 357 85% 58%;

    --secondary: 0 0% 14%;
    --secondary-foreground: 40 30% 96%;
    --muted: 0 0% 14%;
    --muted-foreground: 40 10% 70%;
    --accent: 42 95% 55%;
    --accent-foreground: 0 0% 7%;

    --border: 0 0% 18%;
    --radius: 0.25rem;

    --gradient-meat: linear-gradient(135deg, hsl(357 73% 47%) 0%, hsl(15 85% 50%) 100%);
    --gradient-dark: linear-gradient(180deg, hsl(0 0% 7%) 0%, hsl(0 0% 4%) 100%);
    --gradient-radial: radial-gradient(ellipse at center, hsl(357 73% 47% / 0.25) 0%, transparent 70%);

    --shadow-glow: 0 0 60px hsl(357 73% 47% / 0.5);
    --shadow-brutal: 8px 8px 0 hsl(0 0% 0%);
    --shadow-card: 0 20px 60px -10px hsl(0 0% 0% / 0.8);

    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    background-image: 
        radial-gradient(circle at 20% 0%, hsl(357 73% 47% / 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, hsl(357 73% 47% / 0.05) 0%, transparent 50%);
    overflow-x: hidden;
}

h1, .font-display {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    font-weight: 400;
    font-size: 154px; /* 128px * 1.2 */
}

h2 {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-size: 72px; /* Increased from 48px to massive 72px per designer spec */
    line-height: 0.9;
    color: rgb(248, 246, 242);
}
@media (max-width: 768px) {
    h2 {
        font-size: 60px; /* Increased from 42px for massive impact */
        line-height: 0.95;
    }
}

.font-anton { font-family: 'Anton', sans-serif; }
.font-bebas { font-family: 'Bebas Neue', sans-serif; }

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

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Vertical Rhythm Utility - Global Section Padding */
.section-padding {
    padding: 8rem 0;
}

@media (max-width: 1024px) {
    .section-padding {
        padding: 10rem 0 !important; /* Bumped to 10rem and wider breakpoint to force visual visibility */
    }
}

/* Utilities */
.text-primary { color: hsl(var(--primary)); }
.text-outline {
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
    color: transparent;
}

/* Section Label Utility (Lighthouse Fix) */
.section-label {
    font-family: 'Bebas Neue', sans-serif;
    color: hsl(var(--primary));
    letter-spacing: 0.3em;
    font-size: 1.125rem;
    margin-bottom: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
}

.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-brutal { box-shadow: var(--shadow-brutal); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    border-radius: 4px;
}

.btn-primary {
    background-color: hsl(var(--primary));
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    background-color: hsl(var(--primary-glow));
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 40px hsl(357 73% 47% / 0.6);
}

/* Menu Tab styles moved to section-menu.php for better local control */

.menu-category-section {
    display: none;
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.menu-category-section.active {
    display: block;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
header {
    height: 90px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: transparent;
    transition: all 0.4s ease;
}

header.scrolled {
    background: rgba(18, 18, 18, 0.95); /* #121212 with opacity */
    backdrop-filter: blur(10px);
    height: 75px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Animations */
.animate-fade-up {
    opacity: 0;
    animation: fadeUp 0.8s ease-out forwards;
}

@media (max-width: 768px) {
    .menu-tabs {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 3.5rem;
        list-style: none;
        margin-bottom: 5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 0;
        margin-left: 0;
        flex-wrap: wrap;
    }
}