/*
  Pamela's Cooking with Class: warm rustic theme.
  Colors and fonts come from Pam's design system (styles.css in her branding folder),
  mapped onto Bootstrap so every page picks them up.
*/

:root {
  --brand-cream: #F9F1E3;
  --brand-card: #FEF8ED;
  --brand-cocoa: #271610;
  --brand-primary: #983E1B;
  --brand-primary-hover: #7E3215;
  --brand-terracotta: #B74B21;
  --brand-secondary: #EEDBC1;
  --brand-muted: #EDE3D2;
  --brand-muted-fg: #645048;
  --brand-accent: #DE9F5F;
  --brand-wheat: #EABB79;
  --brand-border: #DBCBB9;
  --brand-gradient: linear-gradient(135deg, #B74B21, #D98941);
  --brand-shadow: 0 20px 50px -20px rgba(110, 50, 20, 0.35);
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Bootstrap overrides */
  --bs-body-bg: var(--brand-cream);
  --bs-body-color: var(--brand-cocoa);
  --bs-body-font-family: var(--font-body);
  --bs-secondary-color: var(--brand-muted-fg);
  --bs-border-color: var(--brand-border);
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: 152, 62, 27;
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-link-hover-color-rgb: 126, 50, 21;
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 152, 62, 27;
  --bs-border-radius: 0.5rem;
  --bs-tertiary-bg: var(--brand-muted);
}

body {
  background-color: var(--brand-cream);
  color: var(--brand-cocoa);
  font-family: var(--font-body);
}

h1, h2, h3, h4, .display-font, .navbar-brand {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.text-muted {
  color: var(--brand-muted-fg) !important;
}

/* Header and footer */
.site-header {
  background: var(--brand-card);
  border-bottom: 1px solid var(--brand-border);
}

.site-header .navbar-brand img {
  height: 56px;
  width: 56px;
}

.site-header .nav-link {
  color: var(--brand-cocoa);
  font-weight: 500;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: var(--brand-primary);
}

.site-footer {
  background: var(--brand-cocoa);
  color: #EDE3D2;
  padding: 2rem 0;
  margin-top: 3rem;
}

.site-footer a {
  color: var(--brand-wheat);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: 152, 62, 27;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: 152, 62, 27;
}

/* Junior Chefs uses the warm wheat accent */
.btn-warning {
  --bs-btn-bg: var(--brand-wheat);
  --bs-btn-border-color: var(--brand-wheat);
  --bs-btn-color: var(--brand-cocoa);
  --bs-btn-hover-bg: var(--brand-accent);
  --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-hover-color: var(--brand-cocoa);
}

.text-bg-primary {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.text-bg-warning {
  background-color: var(--brand-wheat) !important;
  color: var(--brand-cocoa) !important;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand-primary);
}

.nav-pills .nav-link:not(.active) {
  color: var(--brand-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-terracotta);
  box-shadow: 0 0 0 0.2rem rgba(183, 75, 33, 0.2);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Cards */
.card {
  --bs-card-bg: var(--brand-card);
  --bs-card-border-color: var(--brand-border);
}

.card-warm {
  box-shadow: var(--brand-shadow);
  border: none;
  overflow: hidden;
}

/* Home page */
.hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background: url("/images/hero-cooking.jpg") center / cover no-repeat;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--brand-shadow);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(39, 22, 16, 0.82) 0%, rgba(39, 22, 16, 0.55) 45%, rgba(39, 22, 16, 0.05) 80%);
}

.hero-content {
  position: relative;
  color: #FEF8ED;
  padding: 2.5rem;
  max-width: 34rem;
}

.hero-content .hero-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  margin-bottom: 1rem;
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
}

.section-title {
  font-family: var(--font-display);
  text-align: center;
  margin: 3rem 0 1.5rem;
}

.offer-card img.offer-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.offer-card .offer-logo {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.about-photo {
  border-radius: 1rem;
  box-shadow: var(--brand-shadow);
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 11;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .hero {
    min-height: 420px;
    border-radius: 0.75rem;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(39, 22, 16, 0.35) 0%, rgba(39, 22, 16, 0.85) 70%);
  }

  .hero {
    align-items: flex-end;
  }

  .hero-content {
    padding: 1.5rem;
  }

  .hero-content .hero-logo {
    width: 88px;
    height: 88px;
  }

  .site-header .navbar-brand img {
    height: 44px;
    width: 44px;
  }
}