/* ===================
   Christmas Countdown Theme - main.css
   Premium festive base styles, variables, accessibility, and colors
   =================== */

/* Variables & Fonts */
: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;
}

/* Fonts (load via Google Fonts in theme) */
body, html {
  font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(to bottom, var(--primary-red) 0%, var(--dark-red) 100%);
  color: var(--text-white);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Layout container */
.site-main, .page-content {
  max-width: 560px;
  width: 100vw;
  margin: 0 auto;
  padding: 24px 12px;
  background: transparent;
}

/* Premium Heading Style */
.site-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.3rem;
  color: var(--gold-accent);
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px var(--primary-red);
  margin-bottom: 18px;
}

.site-footer {
  font-size: 1rem;
  color: var(--text-gray);
  text-align: center;
  padding: 24px 0 8px 0;
  background: transparent;
}

/* Links & Buttons */
a {
  color: var(--gold-accent);
  text-decoration: none;
  transition: color .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;
  border-radius: 7px;
  border: none;
  padding: 12px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .14s;
}
button:hover, .button:hover {
  background: var(--panel-parchment);
  color: var(--festive-green);
}

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

.flex-row { display: flex; flex-direction: row; gap: 18px; }
.flex-column { display: flex; flex-direction: column; gap: 13px; }

/* Panel base (for overlays, content boxes, etc.) */
.panel {
  border-radius: 12px;
  background: rgba(255,255,255,0.09);
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  padding: 18px 12px;
  margin-top: 16px;
}

.parchment-panel {
  background: linear-gradient(135deg, var(--panel-parchment) 96%, var(--panel-parchment-border) 100%);
  color: #775032;
  border: 2px solid var(--panel-parchment-border);
  box-shadow: 0 2px 12px rgba(171,139,89,0.16);
}

.chalkboard-panel {
  background: linear-gradient(135deg, var(--panel-chalkboard) 82%, var(--panel-chalkboard-border) 100%);
  color: var(--text-white);
  border: 2px solid var(--panel-chalkboard-border);
  box-shadow: 0 2px 24px rgba(76,85,74,0.18);
  font-family: 'Architects Daughter', cursive, sans-serif;
}

/* Responsive design */
@media (max-width: 1024px) {
  body { font-size: 16px; }
  .site-title { font-size: 1.6rem; }
  .site-main, .page-content { max-width: 98vw; }
}
@media (max-width: 767px) {
  body { font-size: 14px; }
  .site-title { font-size: 1.2rem; }
  .site-main, .page-content { max-width: 99vw; padding: 0 3px; }
  .flex-row { flex-direction: column; gap: 9px; }
}

/* Accessibility: reduce motion for users who prefer */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* End main.css */