/*
Theme Name:   Nutrilily
Theme URI:    https://nutrilily.co.uk
Description:  Child theme of Kadence for Nutrilily — forest green, gold and linen, with a custom homepage template.
Author:       Nutrilily
Template:     kadence
Version:      1.3.0
Text Domain:  nutrilily
*/

/* =========================================================
   1. BRAND TOKENS
   Kadence draws almost everything from --global-palette1..9,
   so overriding these retheme the site globally.
   ========================================================= */
:root,
body,
.wp-site-blocks {
  --nl-forest:   #142110;
  --nl-moss:     #1E3218;
  --nl-gold:     #C9A961;
  --nl-gold-lt:  #E3C27E;
  --nl-gold-dk:  #A8874A;
  --nl-linen:    #EEDECF;
  --nl-linen-dp: #E0CDBA;
  --nl-kraft:    #C0A68D;
  --nl-paper:    #F7F0E7;
  --nl-ink:      #241E18;

  /* Kadence palette mapping */
  --global-palette1: #C9A961;  /* primary accent  */
  --global-palette2: #A8874A;  /* accent hover    */
  --global-palette3: #142110;  /* strong headings */
  --global-palette4: #1E3218;  /* headings        */
  --global-palette5: #4C4136;  /* body text       */
  --global-palette6: #6E6055;  /* light text      */
  --global-palette7: #E0CDBA;  /* subtle bg       */
  --global-palette8: #F7F0E7;  /* light bg        */
  --global-palette9: #FFFFFF;  /* white           */

  --global-palette-highlight:       #A8874A;
  --global-palette-highlight-alt:   #C9A961;
  --global-palette-highlight-alt2:  #142110;

  --global-body-font-family: "Jost", "Segoe UI", sans-serif;
  --global-heading-font-family: "Cormorant Garamond", Georgia, serif;
}

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */
body {
  font-family: var(--global-body-font-family);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--nl-ink);
  background: var(--nl-linen);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--global-heading-font-family);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--nl-forest);
}

h1, .entry-title { font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.6rem; }

p { max-width: 72ch; }

/* =========================================================
   3. HEADER / NAVIGATION
   ========================================================= */
.site-header-wrap,
#masthead {
  background: var(--nl-forest);
  border-bottom: 1px solid rgba(201, 169, 97, 0.28);
}

.site-title,
.site-branding .site-title a {
  font-family: var(--global-heading-font-family);
  letter-spacing: 0.16em;
  color: var(--nl-gold-lt);
  font-weight: 400;
}

.header-navigation .header-menu-container > ul > li > a,
.main-navigation a {
  color: #D9D5C6;
  font-size: 14.5px;
  letter-spacing: 0.05em;
  font-weight: 300;
}

.header-navigation .header-menu-container > ul > li > a:hover,
.main-navigation a:hover {
  color: var(--nl-gold-lt);
}

/* Underline on hover rather than a background block */
.header-navigation ul li.menu-item > a::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--nl-gold);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}
.header-navigation ul li.menu-item > a:hover::after { transform: scaleX(1); }

.header-cart-wrap .kadence-header-cart-wrap a,
.header-account-wrap a { color: var(--nl-gold-lt); }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.wp-block-button__link,
.button,
button,
input[type="submit"],
.kb-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--global-body-font-family);
  font-size: 14.5px;
  letter-spacing: 0.09em;
  font-weight: 400;
  text-transform: none;
  background: var(--nl-gold);
  color: var(--nl-forest);
  border: 1px solid var(--nl-gold);
  border-radius: 0;
  padding: 15px 30px;
  transition: background 0.18s ease, color 0.18s ease;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--nl-gold-lt);
  border-color: var(--nl-gold-lt);
  color: var(--nl-forest);
}

/* Primary purchase actions get the darker, more deliberate treatment */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button {
  background: var(--nl-forest);
  border-color: var(--nl-forest);
  color: var(--nl-gold-lt);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
  background: var(--nl-moss);
  border-color: var(--nl-moss);
  color: var(--nl-gold-lt);
}

.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--nl-gold-dk);
  border-color: var(--nl-gold);
}

/* =========================================================
   5. WOOCOMMERCE — SHOP LOOP
   Hairline frames rather than drop shadows.
   ========================================================= */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--nl-paper);
  border: 1px solid var(--nl-linen-dp);
  border-radius: 0;
  box-shadow: none;
  padding-bottom: 22px;
  transition: border-color 0.18s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--nl-gold);
  box-shadow: none;
  transform: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--global-heading-font-family);
  font-size: 24px;
  font-weight: 500;
  color: var(--nl-forest);
  padding: 0 20px;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  font-family: var(--global-heading-font-family);
  font-size: 21px;
  color: var(--nl-gold-dk);
  padding: 0 20px;
}

.woocommerce ul.products li.product .button {
  margin: 12px 20px 0;
  display: block;
  text-align: center;
  background: transparent;
  color: var(--nl-forest);
  border-color: var(--nl-forest);
}
.woocommerce ul.products li.product .button:hover {
  background: var(--nl-forest);
  color: var(--nl-gold-lt);
}

/* Sale flash */
.woocommerce span.onsale {
  background: var(--nl-forest);
  color: var(--nl-gold-lt);
  border-radius: 0;
  font-family: var(--global-body-font-family);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  min-height: auto;
  min-width: auto;
  padding: 7px 14px;
  line-height: 1;
}

/* =========================================================
   6. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================= */
.woocommerce div.product .product_title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--global-heading-font-family);
  font-size: 30px;
  color: var(--nl-gold-dk);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--nl-linen-dp);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 26px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--global-body-font-family);
  font-size: 15px;
  color: #5E5348;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--nl-forest);
  border-bottom-color: var(--nl-gold);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce .quantity .qty {
  border: 1px solid rgba(20, 33, 16, 0.28);
  border-radius: 0;
  background: var(--nl-paper);
  padding: 12px;
}

/* =========================================================
   7. FORMS / CART / CHECKOUT
   ========================================================= */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--nl-paper);
  border: 1px solid rgba(20, 33, 16, 0.28);
  border-radius: 0;
  font-family: var(--global-body-font-family);
  font-size: 15px;
  color: var(--nl-ink);
  padding: 14px 16px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--nl-gold);
  outline: none;
  box-shadow: 0 0 0 1px var(--nl-gold);
}

.woocommerce table.shop_table {
  border: 1px solid var(--nl-linen-dp);
  border-radius: 0;
}
.woocommerce table.shop_table th {
  font-family: var(--global-body-font-family);
  font-weight: 500;
  color: var(--nl-forest);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--nl-gold);
  background: var(--nl-paper);
  border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--nl-gold-dk); }

/* Coupon field — you asked for discount codes, so make it visible
   rather than the usual easy-to-miss link. */
.woocommerce-form-coupon-toggle .woocommerce-info {
  border-top-color: var(--nl-gold);
}
.woocommerce form.checkout_coupon {
  border: 1px solid var(--nl-gold);
  border-radius: 0;
  background: var(--nl-paper);
}

/* =========================================================
   8. FOOTER
   ========================================================= */
#colophon,
.site-footer-wrap,
.site-bottom-footer-wrap {
  background: var(--nl-forest);
  color: #9E9A8C;
}
#colophon a { color: #BEBAAB; }
#colophon a:hover { color: var(--nl-gold-lt); }
#colophon h2, #colophon h3, #colophon h4,
#colophon .widget-title {
  color: #D9D5C6;
  font-family: var(--global-body-font-family);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.03em;
}
.site-bottom-footer-wrap {
  border-top: 1px solid rgba(201, 169, 97, 0.2);
}

/* =========================================================
   9. ACCESSIBILITY & MOTION
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--nl-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   10. HOMEPAGE (front-page.php)
   Prefixed .nl- throughout so nothing collides with Kadence.
   ========================================================= */
.nl-home { overflow-x: hidden; }
.nl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* --- hero --- */
.nl-hero {
  background-size: cover;
  background-position: center 82%;
  background-repeat: no-repeat;
  background-color: var(--nl-linen);
  min-height: clamp(440px, 64vh, 620px);
  display: flex;
  align-items: center;
}
.nl-hero-copy { max-width: min(560px, 52%); }
.nl-hero h1 {
  font-family: var(--global-heading-font-family);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  color: var(--nl-forest);
  margin: 0;
}
.nl-hero h1 em { font-style: italic; color: var(--nl-gold-dk); }
.nl-rule { display: block; width: 60px; height: 1px; background: var(--nl-gold-dk); margin: 26px 0 22px; }
.nl-hero p { max-width: 40ch; color: #4C4136; font-size: 17px; }
.nl-cta { display: flex; gap: 13px; margin-top: 34px; flex-wrap: wrap; }

.nl-btn {
  font-family: var(--global-body-font-family);
  font-size: 14.5px;
  letter-spacing: 0.09em;
  font-weight: 400;
  padding: 15px 30px;
  border: 1px solid var(--nl-forest);
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  transition: background 0.18s ease, color 0.18s ease;
}
.nl-btn-solid { background: var(--nl-forest); color: var(--nl-gold-lt); }
.nl-btn-solid:hover { background: var(--nl-moss); color: var(--nl-gold-lt); }
.nl-btn-ghost { color: var(--nl-forest); background: transparent; }
.nl-btn-ghost:hover { background: rgba(20, 33, 16, 0.08); }

/* --- pillars --- */
.nl-pillars { background: var(--nl-forest); color: #CFC9BC; }
.nl-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 60px 28px; }
.nl-pillar { padding: 0 42px; border-left: 1px solid rgba(201, 169, 97, 0.28); }
.nl-pillar:first-child { padding-left: 0; border-left: 0; }
.nl-pillar h3 {
  font-family: var(--global-heading-font-family);
  font-size: 31px; font-weight: 400; color: var(--nl-gold-lt); margin: 0 0 8px;
}
.nl-pillar p { font-size: 15.5px; max-width: 32ch; color: #B4AE9F; margin: 0; }

/* --- sections --- */
.nl-section { padding: 92px 0; }
.nl-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 44px; gap: 20px; flex-wrap: wrap;
}
.nl-sec-head h2 {
  font-family: var(--global-heading-font-family);
  font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 400;
  color: var(--nl-forest); line-height: 1.1; margin: 0;
}
.nl-sec-head a {
  font-size: 14.5px; color: var(--nl-gold-dk);
  border-bottom: 1px solid var(--nl-gold); padding-bottom: 3px;
}

/* --- story --- */
.nl-story {
  background: var(--nl-paper);
  border-top: 1px solid var(--nl-linen-dp);
  border-bottom: 1px solid var(--nl-linen-dp);
}
.nl-story-grid {
  display: grid; grid-template-columns: 1fr 0.9fr;
  gap: 64px; align-items: center; padding: 92px 28px;
}
.nl-story h2 {
  font-family: var(--global-heading-font-family);
  font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 300;
  color: var(--nl-forest); line-height: 1.15; margin: 0 0 20px;
}
.nl-story p { margin-bottom: 15px; max-width: 54ch; color: #54483D; }
.nl-story p:last-of-type { margin-bottom: 0; }
.nl-story-img img { width: 100%; display: block; border: 1px solid var(--nl-linen-dp); }

/* --- sign-up --- */
.nl-signup { background: var(--nl-linen-dp); padding: 74px 0; }
.nl-signup-in { max-width: 600px; margin: 0 auto; text-align: center; }
.nl-signup h2 {
  font-family: var(--global-heading-font-family);
  font-size: 2.3rem; font-weight: 400; color: var(--nl-forest); margin: 0 0 10px;
}
.nl-signup p { color: #584C41; font-size: 16px; margin-bottom: 24px; }
.nl-form { display: flex; gap: 10px; }
.nl-form input {
  flex: 1; padding: 15px 18px; border: 1px solid rgba(20, 33, 16, 0.3);
  background: var(--nl-paper); font-family: var(--global-body-font-family);
  font-size: 15px; color: var(--nl-ink); border-radius: 0;
}
.nl-form input::placeholder { color: #8C7F72; }
.nl-form .nl-btn { white-space: nowrap; }

/* --- homepage responsive --- */
@media (max-width: 900px) {
  .nl-hero { min-height: 300px; align-items: flex-end; }
  .nl-hero .nl-wrap { width: 100%; }
  .nl-hero-copy { max-width: 100%; background: var(--nl-linen); padding: 34px 0 4px; }
  .nl-pillars-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 28px; }
  .nl-pillar { padding: 0 0 0 20px; border-left: 1px solid rgba(201, 169, 97, 0.28); }
  .nl-pillar:first-child { padding-left: 20px; border-left: 1px solid rgba(201, 169, 97, 0.28); }
  .nl-story-grid { grid-template-columns: 1fr; gap: 36px; padding: 64px 28px; }
  .nl-section { padding: 64px 0; }
}
@media (max-width: 520px) {
  .nl-form { flex-direction: column; }
}

/* =========================================================
   11. HERO BACKGROUND VIDEO
   Only applies when /images/hero.mp4 exists. The still image
   remains as poster and as the fallback, so nothing breaks
   if the video is slow, blocked or removed.
   ========================================================= */

.nl-hero--video {
  position: relative;
  overflow: hidden;
}

.nl-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Keep the copy above the video */
.nl-hero--video .nl-wrap {
  position: relative;
  z-index: 2;
}

/* The linen panel behind the text sits between video and copy */
.nl-hero--video .nl-hero-copy::before {
  z-index: 1;
}

/* Phones: video is a poor trade for the bandwidth and it
   competes with the copy on a narrow screen. Show the still. */
@media (max-width: 780px) {
  .nl-hero-video { display: none; }
}

/* Respect a visitor's request for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nl-hero-video { display: none; }
}