/*
Theme Name: Astra Child
Theme URI: https://thenativenature.com/
Description: Child theme of Astra, built for The Native Nature dairy farm.
Author: Mind Web Solutions
Author URI: https://mindwebsolutions.in/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth. Change a value here, it updates site-wide.
   ========================================================================== */

:root {

  /* --- Brand colours (from logo) --- */
  --tnn-green-900: #0F3D22;   /* darkest, footer */
  --tnn-green-800: #14532D;   /* primary: header, headings, buttons */
  --tnn-green-600: #2D6A4F;   /* hover state for primary */
  --tnn-green-400: #4CAF50;   /* secondary: icons, badges, accents */
  --tnn-green-100: #E4F0E4;   /* light green wash, section tints */

  --tnn-red:       #C62828;   /* accent: sale badges only, use sparingly */
  --tnn-red-dark:  #A31F1F;   /* hover state for accent */

  /* --- Neutrals --- */
  --tnn-cream:     #FDF8EC;   /* page background */
  --tnn-cream-alt: #F7F0DF;   /* alternating section background */
  --tnn-white:     #FFFFFF;   /* cards, product surfaces */
  --tnn-ink:       #1F2421;   /* body text */
  --tnn-muted:     #6B7A6E;   /* captions, meta, secondary text */
  --tnn-line:      #E3DECF;   /* borders, dividers */

  /* --- Typography --- */
  --tnn-font-head: 'Nunito', -apple-system, 'Segoe UI', sans-serif;
  --tnn-font-body: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (1.25 ratio, fluid) */
  --tnn-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --tnn-h2: clamp(1.85rem, 1.4rem + 1.8vw, 2.75rem);
  --tnn-h3: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --tnn-h4: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --tnn-body: 1.0625rem;      /* 17px, comfortable for long copy */
  --tnn-small: 0.875rem;      /* 14px, meta and captions */

  --tnn-lh-tight: 1.15;       /* headings */
  --tnn-lh-body: 1.7;         /* paragraphs */

  /* --- Spacing scale --- */
  --tnn-space-xs: 8px;
  --tnn-space-sm: 16px;
  --tnn-space-md: 24px;
  --tnn-space-lg: 40px;
  --tnn-space-xl: 64px;
  --tnn-section: clamp(48px, 6vw, 88px);   /* vertical section padding */

  /* --- Shape and depth --- */
  --tnn-radius-sm: 8px;
  --tnn-radius: 14px;
  --tnn-radius-lg: 24px;
  --tnn-radius-pill: 999px;

  --tnn-shadow-sm: 0 1px 3px rgba(31, 36, 33, 0.06);
  --tnn-shadow: 0 6px 20px rgba(31, 36, 33, 0.08);
  --tnn-shadow-lg: 0 14px 40px rgba(31, 36, 33, 0.12);

  --tnn-transition: 0.25s ease;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background-color: var(--tnn-cream) !important;
  font-family: var(--tnn-font-body) !important;
  font-size: var(--tnn-body) !important;
  line-height: var(--tnn-lh-body) !important;
  color: var(--tnn-ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   GLOBAL HEADINGS

   These use !important to beat Astra's inline styles, but they are SCOPED so
   they never reach inside a custom block. Any element carrying .tnn-custom,
   and everything inside it, is exempt.

   This means custom components (header, footer, hero sections, landing pages)
   style their own headings freely with no !important war and no edits here.

   RULE: put class="tnn-custom" on the root element of every custom block.
   -------------------------------------------------------------------------- */

:is(h1, h2, h3, h4, h5, h6, .entry-title, .woocommerce-loop-product__title, .product_title):not(.tnn-custom):not(.tnn-custom *) {
  font-family: var(--tnn-font-head) !important;
  color: var(--tnn-green-800) !important;
  line-height: var(--tnn-lh-tight) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
}

:is(h1, .entry-title):not(.tnn-custom):not(.tnn-custom *) { font-size: var(--tnn-h1) !important; }
h2:not(.tnn-custom):not(.tnn-custom *) { font-size: var(--tnn-h2) !important; }
h3:not(.tnn-custom):not(.tnn-custom *) { font-size: var(--tnn-h3) !important; }
h4:not(.tnn-custom):not(.tnn-custom *) { font-size: var(--tnn-h4) !important; }

/* Same exemption for body text, links and paragraphs inside custom blocks */
.tnn-custom, .tnn-custom * { line-height: inherit; }
.tnn-custom a { color: inherit; }

p { margin-bottom: var(--tnn-space-md); }

a {
  color: var(--tnn-green-600);
  text-decoration: none;
  transition: color var(--tnn-transition);
}
a:hover, a:focus { color: var(--tnn-green-400); }

/* Visible keyboard focus, accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tnn-green-400) !important;
  outline-offset: 3px !important;
}

/* Section rhythm helpers, use these classes on Elementor sections */
.tnn-section { padding-block: var(--tnn-section); }
.tnn-bg-cream { background-color: var(--tnn-cream); }
.tnn-bg-alt   { background-color: var(--tnn-cream-alt); }
.tnn-bg-tint  { background-color: var(--tnn-green-100); }
.tnn-bg-dark  { background-color: var(--tnn-green-800); color: var(--tnn-cream); }
.tnn-bg-dark h1, .tnn-bg-dark h2, .tnn-bg-dark h3, .tnn-bg-dark h4 {
  color: var(--tnn-cream) !important;
}

/* Eyebrow label above section headings */
.tnn-eyebrow {
  font-family: var(--tnn-font-body);
  font-size: var(--tnn-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tnn-green-400);
  display: block;
  margin-bottom: var(--tnn-space-xs);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--tnn-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  background-color: var(--tnn-green-800) !important;
  color: var(--tnn-cream) !important;
  border: 2px solid var(--tnn-green-800) !important;
  border-radius: var(--tnn-radius-pill) !important;
  padding: 13px 30px !important;
  transition: all var(--tnn-transition) !important;
  box-shadow: none !important;
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--tnn-green-600) !important;
  border-color: var(--tnn-green-600) !important;
  color: var(--tnn-cream) !important;
  transform: translateY(-2px);
  box-shadow: var(--tnn-shadow) !important;
}

/* Secondary / outline button, add class tnn-btn-outline */
.tnn-btn-outline,
.woocommerce a.button.tnn-btn-outline {
  background-color: transparent !important;
  color: var(--tnn-green-800) !important;
  border-color: var(--tnn-green-800) !important;
}
.tnn-btn-outline:hover {
  background-color: var(--tnn-green-800) !important;
  color: var(--tnn-cream) !important;
}

/* Accent button, order/urgency only. Add class tnn-btn-accent */
.tnn-btn-accent,
.woocommerce a.button.tnn-btn-accent {
  background-color: var(--tnn-red) !important;
  border-color: var(--tnn-red) !important;
  color: #FFFFFF !important;
}
.tnn-btn-accent:hover {
  background-color: var(--tnn-red-dark) !important;
  border-color: var(--tnn-red-dark) !important;
}

/* ==========================================================================
   4. HEADER AND FOOTER
   ========================================================================== */

.site-header,
.ast-primary-header-bar {
  background-color: var(--tnn-cream) !important;
  border-bottom: 1px solid var(--tnn-line) !important;
}

.main-header-menu a,
.ast-header-break-point .main-navigation a {
  font-family: var(--tnn-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: var(--tnn-ink) !important;
}
.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
  color: var(--tnn-green-800) !important;
}

.site-footer,
.ast-small-footer,
.footer-adv {
  background-color: var(--tnn-green-900) !important;
  color: var(--tnn-cream) !important;
}
.site-footer a, .ast-small-footer a { color: var(--tnn-cream) !important; }
.site-footer a:hover { color: var(--tnn-green-400) !important; }

/* ==========================================================================
   5. WOOCOMMERCE: PRODUCT CARDS
   ========================================================================== */

.woocommerce ul.products li.product {
  background: var(--tnn-white) !important;
  border: 1px solid var(--tnn-line) !important;
  border-radius: var(--tnn-radius) !important;
  padding: var(--tnn-space-sm) !important;
  text-align: center;
  transition: all var(--tnn-transition);
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--tnn-green-400) !important;
  box-shadow: var(--tnn-shadow) !important;
  transform: translateY(-4px);
}

.woocommerce ul.products li.product img {
  border-radius: var(--tnn-radius-sm) !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 1px;           /* paired with aspect-ratio, Elementor flex safety */
  object-fit: cover;
  margin-bottom: var(--tnn-space-sm) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  font-family: var(--tnn-font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--tnn-green-800) !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--tnn-muted) !important;
  font-weight: 400 !important;
  font-size: 0.9375rem !important;
}

/* Sale badge, the one place red appears */
.woocommerce span.onsale {
  background-color: var(--tnn-red) !important;
  color: #FFFFFF !important;
  font-family: var(--tnn-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--tnn-radius-pill) !important;
  padding: 6px 14px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   6. WOOCOMMERCE: SINGLE PRODUCT, CART, CHECKOUT
   ========================================================================== */

.woocommerce div.product .product_title { margin-bottom: var(--tnn-space-xs) !important; }

.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty {
  border: 1px solid var(--tnn-line) !important;
  border-radius: var(--tnn-radius-sm) !important;
  padding: 12px 8px !important;
  font-family: var(--tnn-font-body) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--tnn-green-400) !important;
  background: var(--tnn-white) !important;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--tnn-green-400) !important;
  background-color: var(--tnn-green-100) !important;
  border-radius: var(--tnn-radius-sm);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--tnn-green-600) !important; }

.woocommerce-error {
  border-top-color: var(--tnn-red) !important;
  border-radius: var(--tnn-radius-sm);
}

.woocommerce table.shop_table,
.woocommerce-checkout #order_review {
  border: 1px solid var(--tnn-line) !important;
  border-radius: var(--tnn-radius) !important;
  background: var(--tnn-white);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border: 1px solid var(--tnn-line) !important;
  border-radius: var(--tnn-radius-sm) !important;
  padding: 12px 14px !important;
  font-family: var(--tnn-font-body) !important;
  background: var(--tnn-white) !important;
}

/* ==========================================================================
   7. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .woocommerce ul.products li.product:hover,
  .elementor-button:hover { transform: none !important; }
}

/* ==========================================================================
   8. MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  :root { --tnn-body: 1rem; }

  .woocommerce ul.products li.product { padding: 12px !important; }

  .ast-button, .button, .elementor-button,
  .woocommerce a.button, .woocommerce button.button {
    padding: 12px 24px !important;
    width: auto;
  }
}

/* ==========================================================================
   9. CUSTOM STYLES
   Add new rules below this line only.
   ========================================================================== */