/*
Theme Name:  Urban Produce
Theme URI:   https://urbanproduce.co.za
Description: Urban Produce child theme for Storefront. Green/earth palette, Inter + Lora fonts.
Author:      The Digital Opportunity
Author URI:  https://t-do.co.za
Template:    storefront
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: urban-produce
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --up-forest-50:  #f0fdf4;
  --up-forest-100: #dcfce7;
  --up-forest-200: #bbf7d0;
  --up-forest-400: #4ade80;
  --up-forest-600: #16a34a;
  --up-forest-700: #15803d;
  --up-forest-800: #166534;
  --up-forest-900: #14532d;
  --up-forest-950: #052e16;

  --up-earth-50:  #fefce8;
  --up-earth-100: #fef9c3;
  --up-earth-300: #fde047;
  --up-earth-600: #ca8a04;
  --up-earth-700: #a16207;
  --up-earth-800: #78350f;
  --up-earth-900: #451a03;

  --up-primary:        var(--up-forest-800);
  --up-primary-light:  var(--up-forest-600);
  --up-primary-pale:   var(--up-forest-50);
  --up-accent:         var(--up-earth-700);
  --up-text:           #1a1a1a;
  --up-text-muted:     #6b7280;
  --up-border:         var(--up-forest-200);
  --up-bg:             #ffffff;
  --up-bg-tint:        var(--up-forest-50);

  --up-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --up-font-serif:     'Lora', Georgia, serif;

  --up-radius:         0.5rem;
  --up-radius-lg:      1rem;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--up-font-sans);
  color: var(--up-text);
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--up-font-serif);
  color: var(--up-forest-950);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

p { margin-bottom: 1.25rem; }

a {
  color: var(--up-primary-light);
  text-decoration: none;
}
a:hover { color: var(--up-primary); text-decoration: underline; }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.site-header {
  background: var(--up-forest-950) !important;
  border-bottom: 3px solid var(--up-forest-700);
}

.site-header .site-title a,
.site-header .site-description {
  color: #ffffff !important;
}

.main-navigation ul li a {
  color: #e2e8f0 !important;
  font-family: var(--up-font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--up-forest-400) !important;
  text-decoration: none;
}

/* Cart icon in nav */
.storefront-handheld-footer-bar .cart .count,
.site-header .cart-contents .count {
  background: var(--up-forest-600);
  color: #fff;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--up-forest-800) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--up-radius) !important;
  font-family: var(--up-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.03em !important;
  padding: 0.75rem 1.75rem !important;
  transition: background 0.2s, transform 0.1s !important;
  cursor: pointer !important;
}

.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--up-forest-700) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
  background: var(--up-forest-600) !important;
}

.button-outline {
  background: transparent !important;
  color: var(--up-forest-800) !important;
  border: 2px solid var(--up-forest-800) !important;
}

.button-outline:hover {
  background: var(--up-forest-50) !important;
  color: var(--up-forest-900) !important;
}

/* ============================================================
   HERO SECTION (for pages using .up-hero class)
   ============================================================ */
.up-hero {
  background: linear-gradient(135deg, var(--up-forest-950) 0%, var(--up-forest-800) 60%, var(--up-forest-600) 100%);
  color: #ffffff;
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.up-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.up-hero h1 {
  color: #ffffff;
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

.up-hero .up-hero-sub {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--up-forest-200);
  max-width: 640px;
  margin: 0 auto 2rem;
  font-family: var(--up-font-sans);
}

.up-hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.up-section {
  padding: 4rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.up-section-tint {
  background: var(--up-bg-tint);
  padding: 4rem 1.5rem;
}

.up-section-dark {
  background: var(--up-forest-950);
  color: #ffffff;
  padding: 4rem 1.5rem;
}

.up-section-dark h2,
.up-section-dark h3 {
  color: var(--up-forest-200);
}

.up-label {
  display: inline-block;
  font-family: var(--up-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--up-forest-600);
  margin-bottom: 0.75rem;
}

.up-section-tint .up-label,
.up-section-dark .up-label {
  color: var(--up-forest-400);
}

/* ============================================================
   CARD GRID
   ============================================================ */
.up-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.up-card {
  background: #ffffff;
  border: 1px solid var(--up-border);
  border-radius: var(--up-radius-lg);
  padding: 1.75rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.up-card:hover {
  box-shadow: 0 8px 30px rgba(22, 101, 52, 0.12);
  transform: translateY(-2px);
}

.up-card-icon {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.up-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--up-forest-900);
}

.up-card p {
  font-size: 0.9rem;
  color: var(--up-text-muted);
  margin: 0;
}

/* ============================================================
   WOOCOMMERCE — SHOP & PRODUCTS
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--up-font-serif);
  color: var(--up-forest-900);
  font-size: 1.1rem;
}

.woocommerce ul.products li.product {
  border: 1px solid var(--up-border);
  border-radius: var(--up-radius-lg);
  padding: 1rem;
  transition: box-shadow 0.2s;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 20px rgba(22, 101, 52, 0.1);
}

.woocommerce ul.products li.product .price {
  color: var(--up-forest-700);
  font-weight: 700;
  font-family: var(--up-font-sans);
}

.woocommerce .woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--up-text-muted);
}

/* Product category badges */
.woocommerce span.onsale {
  background: var(--up-forest-700);
  border-radius: var(--up-radius);
}

/* ============================================================
   CHECKOUT & FORMS
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--up-border) !important;
  border-radius: var(--up-radius) !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--up-font-sans) !important;
  transition: border-color 0.2s !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--up-forest-600) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.1) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--up-forest-950) !important;
  color: var(--up-forest-200) !important;
  border-top: 3px solid var(--up-forest-800);
}

.site-footer a {
  color: var(--up-forest-400) !important;
}

.site-footer a:hover {
  color: var(--up-forest-200) !important;
}

.site-footer .widget-title {
  color: #ffffff !important;
  font-family: var(--up-font-serif);
  font-size: 1.1rem;
}

/* ============================================================
   DOKAN VENDOR PAGES
   ============================================================ */
.dokan-store-wrap .dokan-store-header {
  background: var(--up-forest-800);
}

.dokan-btn,
.dokan-btn-theme {
  background: var(--up-forest-700) !important;
  color: #fff !important;
  border-radius: var(--up-radius) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .up-hero { padding: 3rem 1.25rem; }
  .up-section { padding: 2.5rem 1rem; }
  .up-hero-btns { flex-direction: column; align-items: center; }
}