/*
Theme Name: Christmas Countdown Theme
Theme URI: https://howmanydaysuntil.christmas/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: Premium, code-driven, mobile-optimized WordPress theme for Christmas countdowns with elegant festive colors, responsive layout, and code-based background effects.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: christmas-countdown-theme
*/

/* ========== CSS VARIABLES FOR FESTIVE COLORS & TYPOGRAPHY ========== */
:root {
  --primary-red: #8B0000;
  --dark-red: #3d0a0a;
  --festive-green: #2C5F2D;
  --gold-accent: #D4AF37;
  --bg-navy: #171a1c;
  --text-white: #F8F9FA;
  --text-gray: #B8C5D6;
  --panel-parchment: #f5ecd6;
  --panel-parchment-border: #e3c190;
  --panel-chalkboard: #23332d;
  --panel-chalkboard-border: #3e402c;
}

/* ========== BASE RESET & GLOBAL STYLES ========== */
html, body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(to bottom, var(--primary-red) 0%, var(--dark-red) 100%);
  min-height: 100vh;
  color: var(--text-white);
  font-size: 18px;
  line-height: 1.6;
}

/* ========== MAIN CONTENT CONTAINER ========== */
.site-main {
  max-width: 540px;
  width: 96vw;
  margin: 54px auto 24px auto;
  padding: 0 12px;
}

/* ========== HEADER & FOOTER ========== */
.site-header {
  width: 100%;
  padding: 27px 0 0 0;
  text-align: center;
}
.site-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.7rem;
  letter-spacing: 2px;
  color: var(--gold-accent);
  text-shadow: 0 2px 10px var(--primary-red);
}

.site-footer {
  width: 100%;
  padding: 28px 0 16px 0;
  text-align: center;
  color: var(--text-gray);
  font-size: 1rem;
  background: transparent;
}

/* ========== LINK & INTERACTION STYLES ========== */
a {
  color: var(--gold-accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover, a:focus {
  color: var(--festive-green);
  text-decoration: underline;
}

button, .button {
  background: var(--gold-accent);
  color: var(--primary-red);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  cursor: pointer;
  transition: background .14s, color .14s;
}
button:hover, .button:hover {
  background: var(--panel-parchment);
  color: var(--festive-green);
}

/* ========== UTILITIES ========== */
.centered {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ========== MEDIA QUERIES: MOBILE OPTIMIZATION ========== */
@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }
  .site-title { font-size: 2.1rem; }
  .site-main { max-width: 98vw; }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
    padding: 0;
  }
  .site-title { font-size: 1.35rem; }
  .site-main { max-width: 99vw; padding: 0 4px; }
  .flex-row { flex-direction: column; gap: 9px; }
}

/* ========== ACCESSIBILITY: REDUCE MOTION ========= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}