/*
 Theme Name:   Home Cook Picks Child
 Theme URI:    https://homecookpicks.com
 Description:  Child theme for Hello Elementor — Warm Artisan Kitchen design system.
               Pairs with Elementor for full page building.
 Author:       Home Cook Picks
 Author URI:   https://homecookpicks.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  homecookpicks-child
*/

/* ============================================================
   DESIGN SYSTEM — Warm Artisan Kitchen
   Movement: Contemporary Artisan (Bon Appétit meets boutique cookbook)
   ============================================================

   Color Palette:
     --hcf-cream:        #FEFAF4   Background warm cream
     --hcf-green:        #2D5016   Forest green (primary)
     --hcf-green-dark:   #1E3A0E   Darker green (hover states)
     --hcf-green-light:  #3D6B20   Lighter green (accents)
     --hcf-amber:        #E8A020   Golden amber (accent)
     --hcf-amber-dark:   #C8881A   Darker amber (hover)
     --hcf-brick:        #B84C2A   Brick red (secondary accent)
     --hcf-espresso:     #1E1208   Near-black text
     --hcf-stone:        #C8BBA8   Warm stone (muted)
     --hcf-card:         #FDFAF6   Card background
     --hcf-border:       #EDE5D8   Border color

   Typography:
     Display:  'Fraunces', Georgia, serif
     Body:     'Source Serif 4', Georgia, serif
     UI/Label: 'Outfit', system-ui, sans-serif

   ============================================================ */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
  --hcf-cream:        #FEFAF4;
  --hcf-green:        #2D5016;
  --hcf-green-dark:   #1E3A0E;
  --hcf-green-light:  #3D6B20;
  --hcf-amber:        #E8A020;
  --hcf-amber-dark:   #C8881A;
  --hcf-brick:        #B84C2A;
  --hcf-espresso:     #1E1208;
  --hcf-stone:        #C8BBA8;
  --hcf-card:         #FDFAF6;
  --hcf-border:       #EDE5D8;
  --hcf-muted-text:   #6B5E4E;
  --hcf-light-bg:     #F5EFE6;

  --hcf-font-display: 'Fraunces', Georgia, serif;
  --hcf-font-body:    'Source Serif 4', Georgia, serif;
  --hcf-font-ui:      'Outfit', system-ui, -apple-system, sans-serif;

  --hcf-radius:       10px;
  --hcf-radius-lg:    16px;
  --hcf-radius-xl:    24px;

  --hcf-shadow-sm:    0 2px 8px rgba(30, 18, 8, 0.06);
  --hcf-shadow-md:    0 4px 16px rgba(30, 18, 8, 0.10);
  --hcf-shadow-lg:    0 8px 32px rgba(30, 18, 8, 0.14);
}

/* ── Base Reset & Body ───────────────────────────────────────── */
body {
  background-color: var(--hcf-cream);
  color: var(--hcf-espresso);
  font-family: var(--hcf-font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hcf-font-display);
  color: var(--hcf-espresso);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p {
  font-family: var(--hcf-font-body);
  color: var(--hcf-espresso);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

a {
  color: var(--hcf-green);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--hcf-amber); }

/* ── Elementor Global Overrides ──────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--hcf-font-display) !important;
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--hcf-font-body);
  line-height: 1.8;
}

/* ── Utility Classes (usable in Elementor Custom CSS) ────────── */

/* Buttons */
.hcf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--hcf-green);
  color: #fff !important;
  font-family: var(--hcf-font-ui);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--hcf-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}
.hcf-btn-primary:hover {
  background-color: var(--hcf-green-dark);
  transform: translateY(-1px);
  color: #fff !important;
}

.hcf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: var(--hcf-espresso) !important;
  font-family: var(--hcf-font-ui);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 27px;
  border-radius: var(--hcf-radius);
  border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.hcf-btn-secondary:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.9);
}

.hcf-btn-amber {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--hcf-amber);
  color: var(--hcf-espresso) !important;
  font-family: var(--hcf-font-ui);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--hcf-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}
.hcf-btn-amber:hover {
  background-color: var(--hcf-amber-dark);
  transform: translateY(-1px);
}

/* Badges / Pills */
.hcf-pill {
  display: inline-block;
  background-color: var(--hcf-green);
  color: #fff;
  font-family: var(--hcf-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}

.hcf-pill-amber {
  background-color: var(--hcf-amber);
  color: var(--hcf-espresso);
}

.hcf-pill-brick {
  background-color: var(--hcf-brick);
  color: #fff;
}

/* Cards */
.hcf-card {
  background-color: var(--hcf-card);
  border: 1px solid var(--hcf-border);
  border-radius: var(--hcf-radius-lg);
  box-shadow: var(--hcf-shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hcf-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hcf-shadow-md);
}

/* Section backgrounds */
.hcf-bg-cream    { background-color: var(--hcf-cream); }
.hcf-bg-light    { background-color: var(--hcf-light-bg); }
.hcf-bg-green    { background-color: var(--hcf-green); }
.hcf-bg-espresso { background-color: var(--hcf-espresso); }

/* Section labels */
.hcf-section-label {
  font-family: var(--hcf-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hcf-amber);
  display: block;
  margin-bottom: 12px;
}

/* Divider accent */
.hcf-divider {
  width: 48px;
  height: 3px;
  background-color: var(--hcf-amber);
  border-radius: 2px;
  margin: 16px 0 24px;
}

/* Star rating */
.hcf-stars {
  color: var(--hcf-amber);
  font-size: 16px;
  letter-spacing: 2px;
}

/* Pros / Cons lists */
.hcf-pros-list,
.hcf-cons-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hcf-pros-list li::before {
  content: "✓ ";
  color: var(--hcf-green);
  font-weight: 700;
}
.hcf-cons-list li::before {
  content: "✗ ";
  color: var(--hcf-brick);
  font-weight: 700;
}
.hcf-pros-list li,
.hcf-cons-list li {
  font-family: var(--hcf-font-body);
  font-size: 15px;
  padding: 4px 0;
  color: var(--hcf-espresso);
}

/* Ingredient checklist */
.hcf-ingredient-list {
  list-style: none;
  padding: 0;
}
.hcf-ingredient-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--hcf-font-body);
  font-size: 15px;
  border-bottom: 1px solid var(--hcf-border);
  cursor: pointer;
}
.hcf-ingredient-list li:last-child { border-bottom: none; }
.hcf-ingredient-list li.checked {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Recipe step cards */
.hcf-step {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: var(--hcf-card);
  border: 1px solid var(--hcf-border);
  border-radius: var(--hcf-radius-lg);
  margin-bottom: 16px;
}
.hcf-step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--hcf-amber);
  color: var(--hcf-espresso);
  font-family: var(--hcf-font-display);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hcf-step-content h4 {
  font-family: var(--hcf-font-display);
  font-size: 17px;
  margin: 0 0 8px;
}
.hcf-step-content p {
  font-family: var(--hcf-font-body);
  font-size: 15px;
  margin: 0;
  line-height: 1.7;
}

/* Appliance callout */
.hcf-appliance-callout {
  background: linear-gradient(135deg, #2D5016 0%, #1E3A0E 100%);
  border-radius: var(--hcf-radius-xl);
  padding: 32px 36px;
  color: #fff;
}
.hcf-appliance-callout h3 {
  color: #fff;
  font-family: var(--hcf-font-display);
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.hcf-appliance-callout p {
  color: rgba(255,255,255,0.85);
  font-family: var(--hcf-font-body);
  font-size: 15px;
  margin-bottom: 20px;
}
.hcf-appliance-callout .hcf-callout-label {
  font-family: var(--hcf-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hcf-amber);
  display: block;
  margin-bottom: 8px;
}

/* Nutrition table */
.hcf-nutrition-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--hcf-radius-lg);
  overflow: hidden;
  border: 1px solid var(--hcf-border);
}
.hcf-nutrition-table thead th {
  background-color: var(--hcf-green);
  color: #fff;
  font-family: var(--hcf-font-ui);
  font-size: 13px;
  padding: 12px 16px;
  text-align: left;
}
.hcf-nutrition-table tbody tr:nth-child(even) {
  background-color: var(--hcf-light-bg);
}
.hcf-nutrition-table tbody td {
  padding: 10px 16px;
  font-family: var(--hcf-font-ui);
  font-size: 14px;
  border-bottom: 1px solid var(--hcf-border);
}

/* FAQ accordion */
.hcf-faq-item {
  border-bottom: 1px solid var(--hcf-border);
  padding: 16px 0;
}
.hcf-faq-question {
  font-family: var(--hcf-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--hcf-espresso);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hcf-faq-answer {
  font-family: var(--hcf-font-body);
  font-size: 15px;
  color: var(--hcf-muted-text);
  padding-top: 12px;
  line-height: 1.7;
}

/* Bottom line callout */
.hcf-bottom-line {
  background-color: var(--hcf-light-bg);
  border-left: 4px solid var(--hcf-amber);
  border-radius: 0 var(--hcf-radius-lg) var(--hcf-radius-lg) 0;
  padding: 24px 28px;
  margin: 32px 0;
}
.hcf-bottom-line p {
  font-family: var(--hcf-font-body);
  font-size: 16px;
  font-style: italic;
  color: var(--hcf-espresso);
  margin: 0;
}

/* Stat bar */
.hcf-stat {
  text-align: center;
}
.hcf-stat-number {
  font-family: var(--hcf-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--hcf-amber);
  display: block;
  line-height: 1;
}
.hcf-stat-label {
  font-family: var(--hcf-font-ui);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  display: block;
  margin-top: 4px;
}

/* Newsletter section */
.hcf-newsletter-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--hcf-border);
  border-radius: var(--hcf-radius);
  font-family: var(--hcf-font-ui);
  font-size: 15px;
  background-color: #fff;
  color: var(--hcf-espresso);
  outline: none;
  transition: border-color 0.2s ease;
}
.hcf-newsletter-input:focus {
  border-color: var(--hcf-green);
}

/* Breadcrumb */
.hcf-breadcrumb {
  font-family: var(--hcf-font-ui);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.hcf-breadcrumb a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.hcf-breadcrumb a:hover { color: var(--hcf-amber); }
.hcf-breadcrumb span { color: rgba(255,255,255,0.4); }

/* Product rank badge */
.hcf-rank-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--hcf-green);
  color: #fff;
  font-family: var(--hcf-font-ui);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* ── Navigation ──────────────────────────────────────────────── */
.site-header,
.elementor-location-header {
  background-color: var(--hcf-green) !important;
}

/* Elementor nav menu overrides */
.elementor-nav-menu .elementor-item {
  font-family: var(--hcf-font-ui) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.9) !important;
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--hcf-amber) !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer,
.elementor-location-footer {
  background-color: var(--hcf-espresso) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hcf-step { flex-direction: column; gap: 12px; }
  .hcf-appliance-callout { padding: 24px 20px; }
  .hcf-bottom-line { padding: 18px 20px; }
}