/*
Theme Name:  Chefz Dogz
Theme URI:   https://chefzdogz.com
Author:      Chef Inderpal S. Chawla
Author URI:  https://chefzdogz.com
Description: Official WordPress theme for Chefz Dogz Food Truck — Columbus, Ohio. Features editable truck schedule, home page, and full WordPress Customizer support.
Version:     1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chefzdogz
Tags:        food-truck, restaurant, schedule, custom-colors, full-site-editing
*/

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

:root {
  --cd-green-dark:  #0f3d1a;
  --cd-green-mid:   #1a5c25;
  --cd-green-light: #2a7a35;
  --cd-yellow:      #f5c800;
  --cd-yellow-deep: #d4a900;
  --cd-red:         #c8200a;
  --cd-red-bright:  #e02a10;
  --cd-cream:       #fff8e7;
  --cd-white:       #ffffff;
  --cd-charcoal:    #111111;
  --cd-dark2:       #0d0d0d;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--cd-charcoal);
  color: var(--cd-cream);
  overflow-x: hidden;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cd-yellow); }
a:hover { color: var(--cd-yellow-deep); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', cursive;
  line-height: 1;
  color: var(--cd-white);
}

p { margin-bottom: 1rem; }

/* ─── UTILITY ────────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.section-label {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 4px;
  text-transform: uppercase; color: var(--cd-yellow); margin-bottom: 12px; display: block;
}
.text-yellow { color: var(--cd-yellow); }
.text-red    { color: var(--cd-red-bright); }

.btn-primary {
  background: var(--cd-yellow);
  color: var(--cd-charcoal);
  font-weight: 800; font-size: 0.9rem; letter-spacing: 2px;
  text-transform: uppercase; padding: 16px 36px;
  border: none; cursor: pointer; text-decoration: none;
  display: inline-block; transition: all 0.2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-primary:hover {
  background: var(--cd-yellow-deep); color: var(--cd-charcoal);
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,200,0,0.35);
}
.btn-secondary {
  border: 2px solid var(--cd-yellow); color: var(--cd-yellow);
  font-weight: 800; font-size: 0.9rem; letter-spacing: 2px;
  text-transform: uppercase; padding: 14px 32px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: all 0.2s; background: transparent;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-secondary:hover { background: rgba(245,200,0,0.1); transform: translateY(-2px); }

/* ─── SCROLL REVEAL ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 4%; }
}