@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/* --- Theme Variables (MWC Mapping) --- */

:root, [data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: rgb(243 189 110);
  --md-sys-color-on-primary: rgb(68 43 0);
  --md-sys-color-primary-container: rgb(98 64 0);
  --md-sys-color-on-primary-container: rgb(255 221 177);
  --md-sys-color-secondary: rgb(221 195 161);
  --md-sys-color-on-secondary: rgb(61 46 22);
  --md-sys-color-secondary-container: rgb(86 68 42);
  --md-sys-color-on-secondary-container: rgb(250 222 188);
  --md-sys-color-tertiary: rgb(183 206 162);
  --md-sys-color-on-tertiary: rgb(35 53 22);
  --md-sys-color-tertiary-container: rgb(57 76 43);
  --md-sys-color-on-tertiary-container: rgb(211 234 189);
  --md-sys-color-background: rgb(24 18 11);
  --md-sys-color-on-background: rgb(237 225 212);
  --md-sys-color-surface: rgb(24 18 11);
  --md-sys-color-on-surface: rgb(237 225 212);
  --md-sys-color-outline: rgb(155 143 128);
  --md-sys-color-surface-container: rgb(37 31 23);
  --md-sys-color-surface-container-low: rgb(32 27 19);
}

[data-theme="light"] {
  color-scheme: light;
  --md-sys-color-primary: rgb(126 87 15);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(255 221 177);
  --md-sys-color-on-primary-container: rgb(98 64 0);
  --md-sys-color-secondary: rgb(111 91 64);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(250 222 188);
  --md-sys-color-on-secondary-container: rgb(86 68 42);
  --md-sys-color-tertiary: rgb(80 100 64);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(211 234 189);
  --md-sys-color-on-tertiary-container: rgb(57 76 43);
  --md-sys-color-background: rgb(255 248 244);
  --md-sys-color-on-background: rgb(32 27 19);
  --md-sys-color-surface: rgb(255 248 244);
  --md-sys-color-on-surface: rgb(32 27 19);
  --md-sys-color-outline: rgb(129 117 103);
  --md-sys-color-surface-container: rgb(248 236 223);
  --md-sys-color-surface-container-low: rgb(254 242 229);
}

/* --- Pico.css Overrides (Universal Mapping) --- */

:root {
  --pico-font-family: 'Cabin', sans-serif;
  --pico-header-font-family: 'Lora', serif;
  
  --pico-primary: var(--md-sys-color-primary);
  --pico-primary-hover: var(--md-sys-color-primary-container);
  --pico-primary-focus: rgba(126, 87, 15, 0.125);
  --pico-primary-inverse: var(--md-sys-color-on-primary);
  
  --pico-background-color: var(--md-sys-color-background);
  --pico-color: var(--md-sys-color-on-background);
  
  --pico-h1-color: var(--md-sys-color-primary);
  --pico-h2-color: var(--md-sys-color-secondary);
  --pico-h3-color: var(--md-sys-color-tertiary);
  
  --pico-nav-link-color: var(--md-sys-color-on-background);
  --pico-nav-link-hover-color: var(--md-sys-color-primary);
  
  --pico-card-background-color: var(--md-sys-color-surface-container);
  --pico-border-color: var(--md-sys-color-outline);
  
  /* Form Element Overrides */
  --pico-form-element-background-color: var(--md-sys-color-surface-container-low);
  --pico-form-element-border-color: var(--md-sys-color-outline);
  --pico-form-element-color: var(--md-sys-color-on-surface);
  --pico-form-element-focus-color: var(--md-sys-color-primary);
}

/* --- Global & Semantic Styles --- */

body {
  font-family: var(--pico-font-family);
  background-color: var(--pico-background-color);
  color: var(--pico-color);
  line-height: 1.6;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pico-header-font-family);
  font-weight: 700;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline);
  padding: 1rem 0;
  transition: background-color 0.3s ease;
}

header h1 {
  font-size: 1.75rem;
  margin-bottom: 0;
}

header p {
  font-size: 0.9rem;
  margin-bottom: 0;
  color: var(--md-sys-color-secondary);
}

nav ul {
  padding: 0;
}

nav a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-size: 0.8rem;
  color: var(--pico-color); /* Use body color instead of primary/blue */
}

nav a:hover {
  color: var(--pico-primary); /* Highlight on hover */
  text-decoration: none;
}

main {
  padding: 3rem 0;
}

footer {
  margin-top: 5rem;
  padding: 3rem 0;
  border-top: 1px solid var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

footer small {
  display: block;
  opacity: 0.8;
}

/* Full-bleed Hero Styles */
.hero-full-bleed {
  width: 100%;
  height: 60vh;
  min-height: 300px;
  overflow: hidden;
  position: relative;
  margin: 0 0 4rem 0;
}

.hero-full-bleed figure {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  width: 100%;
}

.hero-full-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  border: none;
  box-shadow: none;
  max-width: none; /* Override the 100% max-width for hero */
}

.hero-pumpkin {
  height: 80vh;
}

.hero-pumpkin img {
  object-position: center 80%;
}

/* Typography & Content Spacing */

h2 {
  margin-top: 3rem;
  border-left: 6px solid var(--md-sys-color-primary-container);
  padding-left: 1.25rem;
}

h3 {
  margin-top: 1rem;
}

p {
  margin-bottom: 1.5rem;
}

figure {
  margin: 2.5rem 0;
}

figure img {
  border-radius: 20px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

figcaption {
  margin-top: 0.75rem;
  font-family: var(--pico-header-font-family);
  font-style: italic;
  text-align: center;
  color: var(--md-sys-color-secondary);
}

/* Custom CTA Button Utility */
.cta-button {
  display: inline-block;
  background-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
  padding: 0.8rem 2rem;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--pico-font-family);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.cta-button:hover {
  background-color: var(--md-sys-color-on-tertiary-container);
  color: var(--md-sys-color-tertiary-container);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Signup Form Styles */
#signup-container {
  margin: 2rem 0;
  max-width: 600px;
}

#signup-container input[type="submit"] {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  font-weight: 700;
}

#signup-container input[type="submit"]:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

#signup-container input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--md-sys-color-outline);
}

.hp-check {
  display: none !important;
  visibility: hidden;
}

#success-message ins {
  text-decoration: none;
  color: var(--md-sys-color-tertiary);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  header h1 { font-size: 1.5rem; }
  main { padding: 2rem 0; }
  h2 { font-size: 1.5rem; }
}