/*
Theme Name: Sejatwa (Blocksy Child)
Theme URI: https://sejatwa.com
Description: Apothecary-botanical design system for Sejatwa — doctor-formulated Ayurvedic nutraceuticals. Child theme of Blocksy. See docs/BLUEPRINT.md §7.
Author: Tankar Solutions
Template: blocksy
Version: 0.1.0
Text Domain: sejatwa
*/

/* ──────────────────────────────────────────────
   Design tokens — apothecary-botanical (BLUEPRINT §7.1)
   ────────────────────────────────────────────── */
:root {
  /* Palette */
  --sej-parchment:   #F4EEE1;  /* warm background */
  --sej-green:       #1B3A27;  /* deep botanical green — primary */
  --sej-green-700:   #244e35;
  --sej-gold:        #C5871A;  /* turmeric gold — signature accent */
  --sej-gold-600:    #a8710f;
  --sej-ink:         #221E16;  /* warm ink — text */
  --sej-sage:        #7C8B73;  /* sage support */
  --sej-sage-200:    #DDE3D5;
  --sej-cream:       #FBF8F1;  /* card surface */
  --sej-line:        #E4DBCB;  /* hairline / borders */

  /* Type */
  --sej-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sej-font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii / shadow / motion */
  --sej-radius:    14px;
  --sej-radius-sm: 8px;
  --sej-shadow:    0 6px 24px rgba(27, 58, 39, 0.08);
  --sej-shadow-lg: 0 14px 48px rgba(27, 58, 39, 0.12);
  --sej-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──────────────────────────────────────────────
   Base typography
   ────────────────────────────────────────────── */
body {
  font-family: var(--sej-font-body);
  color: var(--sej-ink);
  background: var(--sej-parchment);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .entry-title, .woocommerce-loop-product__title,
.product_title {
  font-family: var(--sej-font-display);
  font-optical-sizing: auto;
  color: var(--sej-green);
  letter-spacing: -0.01em;
}

/* ──────────────────────────────────────────────
   Buttons — calm, premium (no loud sale tone)
   ────────────────────────────────────────────── */
.wp-block-button__link,
.button, button.button, input.button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
  background: var(--sej-green) !important;
  color: var(--sej-parchment) !important;
  border: 1px solid var(--sej-green) !important;
  border-radius: var(--sej-radius-sm);
  font-family: var(--sej-font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--sej-ease), background 0.25s var(--sej-ease), box-shadow 0.25s var(--sej-ease);
}
.button:hover, button.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background: var(--sej-green-700) !important;
  transform: translateY(-2px);
  box-shadow: var(--sej-shadow);
}

/* Gold accent button utility */
.sej-btn-gold,
.woocommerce a.button.sej-btn-gold {
  background: var(--sej-gold) !important;
  border-color: var(--sej-gold) !important;
  color: #fff !important;
}
.sej-btn-gold:hover { background: var(--sej-gold-600) !important; }

/* ──────────────────────────────────────────────
   .sej-btn component — used sitewide (home, PLP, PDP).
   Defined here (always loaded) so it styles on every template.
   ────────────────────────────────────────────── */
.sej-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sej-font-body); font-weight: 700; font-size: .95rem;
  padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .3s var(--sej-ease), box-shadow .3s var(--sej-ease), background .3s var(--sej-ease), color .3s var(--sej-ease);
}
.sej-btn--green { background: var(--sej-green); color: var(--sej-parchment); }
.sej-btn--green:hover { background: var(--sej-green-700); transform: translateY(-2px); box-shadow: var(--sej-shadow); color: #fff; }
.sej-btn--gold { background: var(--sej-gold); color: #fff; }
.sej-btn--gold:hover { background: var(--sej-gold-600); transform: translateY(-2px); box-shadow: var(--sej-shadow); }
.sej-btn--ghost { background: transparent; color: var(--sej-green); border-color: var(--sej-green); }
.sej-btn--ghost:hover { background: var(--sej-green); color: var(--sej-parchment); transform: translateY(-2px); }

/* ──────────────────────────────────────────────
   Product cards — soft, premium lift
   ────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  background: var(--sej-cream);
  border: 1px solid var(--sej-line);
  border-radius: var(--sej-radius);
  padding: 14px;
  transition: transform 0.3s var(--sej-ease), box-shadow 0.3s var(--sej-ease);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--sej-shadow-lg);
}
.woocommerce ul.products li.product .price { color: var(--sej-green); font-weight: 700; }

/* Links */
a { color: var(--sej-gold-600); }
a:hover { color: var(--sej-gold); }

/* ──────────────────────────────────────────────
   Sitewide layout helpers + default page template
   ────────────────────────────────────────────── */
.sej-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sej-basicpage { background: var(--sej-parchment); padding: clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px); }
.sej-basicpage__title { font-family: var(--sej-font-display); color: var(--sej-green); font-size: clamp(2rem,4vw,3rem); line-height: 1.08; margin: 0 0 1.4rem; }
.sej-basicpage__content { line-height: 1.7; color: #4a4334; }
.sej-basicpage__content h2, .sej-basicpage__content h3 { font-family: var(--sej-font-display); color: var(--sej-green); }
.sej-basicpage__content a { color: var(--sej-gold-600); }
.sej-basicpage__content a:hover { color: var(--sej-gold); }

/* ──────────────────────────────────────────────
   Free-shipping announcement bar (sitewide)
   ────────────────────────────────────────────── */
.sej-announce {
  background: var(--sej-green);
  color: var(--sej-parchment);
  font-family: var(--sej-font-body);
  font-size: .82rem;
  font-weight: 600;
  overflow: hidden;
}
.sej-announce__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding: 8px 16px;
  text-align: center;
}
.sej-announce__track span:first-child { color: var(--sej-gold); }
@media (max-width: 600px) {
  .sej-announce__track span:nth-child(n+3) { display: none; }
}

/* ──────────────────────────────────────────────
   Journal post elements (medically-reviewed byline, CTA, disclaimer)
   ────────────────────────────────────────────── */
.sej-medrev {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: var(--sej-cream); border: 1px solid var(--sej-line);
  border-left: 4px solid var(--sej-green);
  border-radius: var(--sej-radius-sm); padding: 12px 16px; margin: 0 0 26px;
  font-size: .9rem; color: var(--sej-green-700);
}
.sej-medrev__badge {
  font-family: var(--sej-font-body); font-weight: 800; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sej-green);
  background: rgba(124,139,115,.18); padding: .3rem .7rem; border-radius: 999px;
}
.sej-medrev strong { color: var(--sej-ink); }

.sej-post-cta {
  background: var(--sej-green); border-radius: var(--sej-radius-sm);
  padding: 16px 20px; margin: 28px 0;
}
.sej-post-cta a { color: var(--sej-gold) !important; font-weight: 700; text-decoration: none; }
.sej-post-cta a:hover { color: #fff !important; }

.sej-disclaimer {
  font-size: .84rem; line-height: 1.55; color: var(--sej-sage);
  border-top: 1px solid var(--sej-line); padding-top: 16px; margin-top: 32px;
}
.sej-disclaimer strong { color: var(--sej-green-700); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}