/*
Theme Name: Storefront - San Pedro Shop
Template: storefront
Description: Storefront child theme carrying San Pedro Shop's editorial design direction (PROJECT_PLAN.md §8) - white background, Fraunces serif headings, Work Sans body, single green accent.
Version: 1.0.3
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --sp-bg: #ffffff;
  --sp-bg-soft: #faf9f6;
  --sp-text: #1c1c1a;
  --sp-muted: #6b6b64;
  --sp-line: #e7e5df;
  --sp-accent: #3f6b4a;
  --sp-accent-dark: #2e5038;
  --sp-accent-soft: #eaf1ec;
  --sp-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sp-font-sans: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font-sans);
}

h1, h2, h3, h4,
.site-title, .site-title a {
  font-family: var(--sp-font-serif) !important;
  font-weight: 500;
  color: var(--sp-text);
}

a { color: var(--sp-accent-dark); }
a:hover { color: var(--sp-accent); }

.site-header { background: var(--sp-bg); border-bottom: 1px solid var(--sp-line); box-shadow: none; }
.site-branding .site-title a { font-size: 26px; letter-spacing: 0.01em; }

.main-navigation ul li a { font-family: var(--sp-font-sans); text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
.main-navigation { background: transparent; }

button, input[type="submit"], input[type="button"], .button, .woocommerce a.button, .added_to_cart,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background-color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-family: var(--sp-font-sans) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px !important;
}
button:hover, input[type="submit"]:hover, .button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background-color: var(--sp-accent-dark) !important;
  border-color: var(--sp-accent-dark) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--sp-accent-dark);
}

.woocommerce span.onsale {
  background-color: var(--sp-accent) !important;
}

.site-header-cart .cart-contents {
  color: var(--sp-text) !important;
}
.site-header-cart .cart-contents:hover {
  color: var(--sp-accent-dark) !important;
}

.storefront-primary-navigation, .site-footer {
  background-color: var(--sp-bg-soft);
}

.site-footer { border-top: 1px solid var(--sp-line); color: var(--sp-muted); }
.site-footer a { color: var(--sp-text); }

/* Media & Text / Cover block spacing on the homepage reads closer to the editorial mockup */
.wp-block-cover { margin-bottom: 0; }
.wp-block-media-text { margin: 64px 0; }
.wp-block-media-text .wp-block-media-text__content { padding: 0 48px; }

.sp-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--sp-accent);
  font-weight: 600;
  margin-bottom: 10px;
  font-family: var(--sp-font-sans);
}

.sp-offer-banner {
  background: var(--sp-accent-soft);
  border-top: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
  padding: 40px 0;
}

/* ---------- Homepage custom sections (ported from design/style.css) ---------- */

.sp-hero { position: relative; margin: 0 0 -1px; }
.sp-hero img { width: 100%; height: 62vh; min-height: 420px; object-fit: cover; display: block; }
.sp-hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 65%);
  color: #fff; padding: 64px 32px 40px;
}
.sp-hero-copy h1 { color: #fff !important; font-size: clamp(32px, 5vw, 56px); max-width: 720px; margin: 0 0 16px; }
.sp-hero-copy p { max-width: 520px; font-size: 17px; opacity: 0.92; margin-bottom: 24px; color: #fff; }

.sp-btn {
  display: inline-block; background: var(--sp-accent); color: #fff !important;
  padding: 13px 28px; border-radius: 2px; text-decoration: none; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--sp-accent);
}
.sp-btn:hover { background: var(--sp-accent-dark); color: #fff !important; }
.sp-btn-outline-dark { background: transparent; color: var(--sp-text) !important; border-color: var(--sp-text); }

.sp-offer-banner { background: var(--sp-accent-soft); border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-offer-banner-inner { display: flex; align-items: center; gap: 48px; max-width: 1180px; margin: 0 auto; padding: 40px 32px; }
.sp-offer-banner img { width: 220px; height: 220px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.sp-offer-copy { flex: 1; }
.sp-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--sp-accent); font-weight: 600; margin-bottom: 8px; }
.sp-offer-banner h2 { font-size: 30px; margin: 0 0 10px; }
.sp-price-line { font-size: 18px; margin-bottom: 6px; }
.sp-price-line strong { font-family: var(--sp-font-serif); font-size: 24px; color: var(--sp-accent-dark); }
.sp-fine-print { font-size: 13px; color: var(--sp-muted); margin-bottom: 18px; }

.sp-section { max-width: 1180px; margin: 0 auto; padding: 72px 32px; }
.sp-section-row { display: flex; align-items: center; gap: 56px; }
.sp-section-row.sp-reverse { flex-direction: row-reverse; }
.sp-section-row .sp-media { flex: 1; }
.sp-section-row .sp-media img { width: 100%; height: 400px; object-fit: cover; border-radius: 2px; }
.sp-section-row .sp-copy { flex: 1; }
.sp-section-row h2 { font-size: 30px; margin: 0 0 12px; }
.sp-section-row p { color: var(--sp-muted); font-size: 16px; max-width: 460px; }

.sp-explainer { background: var(--sp-bg-soft); padding: 72px 32px; text-align: center; }
.sp-explainer h2 { font-size: 30px; }
.sp-explainer .sp-lede { max-width: 640px; margin: 0 auto 40px; color: var(--sp-muted); }
.sp-steps { display: flex; gap: 36px; justify-content: center; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; }
.sp-step { max-width: 260px; text-align: left; }
.sp-step .sp-num { font-family: var(--sp-font-serif); font-size: 36px; color: var(--sp-accent); margin-bottom: 6px; }
.sp-step h3 { font-size: 17px; margin: 0 0 8px; }
.sp-step p { font-size: 14px; color: var(--sp-muted); }

.sp-newsletter { background: var(--sp-text); color: #fff; padding: 56px 32px; text-align: center; }
.sp-newsletter h2 { color: #fff !important; font-size: 26px; }
.sp-newsletter p { color: rgba(255,255,255,0.7); margin-bottom: 20px; }

@media (max-width: 860px) {
  .sp-section-row, .sp-section-row.sp-reverse { flex-direction: column; }
  .sp-offer-banner-inner { flex-direction: column; text-align: center; }
  .sp-steps { flex-direction: column; align-items: center; }
}

/* Front page: hide the redundant "Home" page title, collapse Gutenberg block-gap between custom sections */
.home .page-header,
.home .entry-header {
  display: none !important;
}
.home .entry-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.home main.site-main { padding-top: 0; }