/* Green Earth Marketplace — main stylesheet
   Palette: linen / forest / sage / honey / ink

   NOTE (July 2026): every variable in :root below can now be overridden
   from the admin "🎨 Design" tab. includes/header.php injects a <style>
   block with the saved values immediately AFTER this file loads, so the
   defaults here are what you get when nothing has been customized (and
   what the "Reset design" button restores). Change a default in both
   places if you ever hand-edit one: here AND in includes/functions.php
   (gem_color_fields / gem_fonts / gem_frames).                          */

:root {
  --linen:  #F7F4EC;
  --cream:  #FFFDF7;
  --ink:    #21301F;
  --forest: #2E5233;
  --sage:   #ADC2A2;
  --sage-lt:#E4EBDD;
  --honey:  #D89B2C;
  --honey-dk:#B87F17;
  --radius: 14px;
  /* ADDED July 2026: photo frame shape, editable in the admin Design tab.
     These defaults reproduce the original hand-tuned "arch"; the other
     shape options (rounded / oval / leaf / square) live in gem_frames()
     in includes/functions.php and are injected by includes/header.php. */
  --frame-lg: 46% 46% var(--radius) var(--radius) / 32% 32% var(--radius) var(--radius);
  --frame-sm: 30% 30% var(--radius) var(--radius) / 20% 20% var(--radius) var(--radius);
  --wrap:   1120px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--linen);
}

img { max-width: 100%; display: block; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--honey-dk); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--forest);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.15rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--forest);
  color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 236, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sage-lt);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--forest); }
.brand-mark { color: var(--honey); display: grid; place-items: center; }
/* ADDED July 2026: styles for a custom logo uploaded via the admin Design
   tab (replaces the leaf SVG inside .brand-mark — see includes/header.php).
   Height is set inline per the chosen size; width stays proportional but
   is capped so very wide logos can't crowd the nav. */
.brand-logo { width: auto; max-width: 150px; object-fit: contain; border-radius: 6px; display: block; }
/* "Crop the logo into a circle" option — forces a square box and crops,
   which cleans up square photos/logos on white backgrounds. */
.brand-logo.round { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.brand-tag { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--honey-dk); }

.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; color: var(--ink);
  padding: 8px 12px; border-radius: 999px; font-weight: 500; font-size: 0.95rem;
}
.site-nav a:hover { background: var(--sage-lt); color: var(--forest); }
.site-nav a.active { background: var(--forest); color: #fff; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--sage);
  border-radius: 10px; padding: 9px 10px; cursor: pointer;
}
.nav-toggle span:not(.sr-only) {
  display: block; width: 20px; height: 2px; background: var(--forest); margin: 4px 0;
}

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 90px) 0 clamp(30px, 5vw, 70px); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.eyebrow {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--honey-dk); font-weight: 700; margin: 0 0 14px;
}
.lede { font-size: 1.18rem; max-width: 34em; }

.btn {
  display: inline-block; margin-top: 10px;
  background: var(--forest); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
.btn-honey { background: var(--honey); color: var(--ink); }
.btn-honey:hover { background: #fff; color: var(--ink); }

/* Signature photo frame.
   CHANGED July 2026: the border-radius values were hardcoded here (the
   original "arch"); they now come from --frame-lg / --frame-sm so the
   admin Design tab can switch shapes site-wide. Everything else about
   the frames (border, shadow, sizing) is unchanged. */
.arch, .arch-sm { overflow: hidden; background: var(--sage-lt); }
.arch {
  border-radius: var(--frame-lg);
  border: 6px solid var(--cream);
  box-shadow: 0 18px 40px rgba(33, 48, 31, 0.14);
}
.arch img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.arch-sm {
  border-radius: var(--frame-sm);
  border: 5px solid var(--cream);
  box-shadow: 0 14px 32px rgba(33, 48, 31, 0.12);
}
.arch-sm img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

/* ---------- Marquee band ---------- */
.marquee {
  background: var(--honey); color: var(--ink);
  overflow: hidden; white-space: nowrap;
  padding: 11px 0; font-weight: 700; letter-spacing: 0.04em;
  border-top: 2px solid var(--honey-dk); border-bottom: 2px solid var(--honey-dk);
}
.marquee-track { display: inline-flex; animation: marquee 38s linear infinite; }
.marquee-track span { padding-right: 12px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-tint { background: var(--sage-lt); }

.split {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.split-flip .split-photo { order: 2; }
.split-copy p { margin: 0 0 1em; }
.split-copy ul { padding-left: 1.2em; margin: 0 0 1em; }
.split-copy li { margin-bottom: 6px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--forest); color: #fff;
  padding: clamp(40px, 6vw, 70px) 0;
}
.page-hero h1 { color: #fff; margin: 0; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--forest); color: #fff; padding: clamp(52px, 7vw, 90px) 0; }
.newsletter-inner { text-align: center; max-width: 640px; }
.newsletter h2 { color: #fff; }
.newsletter p { color: var(--sage-lt); font-size: 1.1rem; }

/* ---------- Contact cards ---------- */
.contact-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 24px;
}
.contact-card {
  background: var(--cream); border: 1px solid var(--sage-lt);
  border-radius: var(--radius); padding: 18px 20px;
}
.contact-card h3 { margin-bottom: 6px; }
.contact-card p { margin: 0 0 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #E8EBE2; margin-top: 0; }
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; padding-top: 56px; padding-bottom: 32px;
}
.footer-col h3 { color: var(--honey); font-size: 1rem; letter-spacing: 0.06em; }
.footer-col a { color: #fff; }
.footer-col p { margin: 0 0 10px; }
.hours-line { margin: 0 0 4px; }
.social-links a { margin-right: 16px; font-weight: 700; }
.footer-tagline { font-style: italic; color: var(--sage); margin-top: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 18px; padding-bottom: 22px;
  font-size: 0.88rem; color: var(--sage);
}
.footer-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .split-flip .split-photo { order: 0; }
  .arch img { min-height: 280px; }
  .arch-sm img { min-height: 240px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--cream);
    border-bottom: 1px solid var(--sage-lt);
    padding: 12px 24px 18px; gap: 2px;
    box-shadow: 0 14px 24px rgba(33,48,31,0.1);
  }
  .site-nav.open { display: flex; }
  .site-nav a { border-radius: 10px; padding: 12px 14px; }
  .contact-cards { grid-template-columns: 1fr; }
}