/*
Theme Name:   Volq Coffee
Theme URI:    https://volqcoffee.com
Description:  Child theme for Volq Coffee — based on Astra. Premium coffee brand aesthetic.
Author:       Volq Coffee
Author URI:   https://example.com
Template:     astra
Version:      1.0.2
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  volq-coffee
*/

/* ── Import parent theme styles ─────────────────────────────────────────── */
@import url("../astra/style.css");

/* ── Google Fonts: Playfair Display (headings) + Lato (body) ────────────── */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;700&display=swap");

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
  --color-dark:       #0e0d0b;
  --color-espresso:   #1a1208;
  --color-gold:       #c8a96e;
  --color-gold-light: #dfc08e;
  --color-cream:      #f5f0e8;
  --color-white:      #ffffff;
  --color-text:       #1e1b17;
  --color-text-light: #4a4035;
  --color-muted:      #a89880;

  --font-heading: "Playfair Display", Georgia, serif;
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

  --transition: 0.35s ease;
  --border-radius: 4px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--color-dark);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
}

.home.ast-plain-container,
.home.ast-separate-container,
.woocommerce-shop.ast-plain-container,
.woocommerce-shop.ast-separate-container {
  background-color: var(--color-dark);
}

.home .site-content > .ast-container,
.woocommerce-shop .site-content > .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: block;
}

.home #primary,
.woocommerce-shop #primary {
  width: 100%;
  margin: 0;
  padding: 0;
}

.home .site-main,
.woocommerce-shop .site-main,
.woocommerce-shop .ast-woocommerce-container {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* Headings: gold on dark (homepage/shop), espresso on light pages */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Override heading colour on light-background pages so gold on white is legible */
.woocommerce-cart h1, .woocommerce-cart h2, .woocommerce-cart h3,
.woocommerce-cart h4, .woocommerce-cart h5, .woocommerce-cart h6,
.woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3,
.woocommerce-checkout h4, .woocommerce-checkout h5, .woocommerce-checkout h6,
.woocommerce-account h1, .woocommerce-account h2, .woocommerce-account h3,
.woocommerce-account h4, .woocommerce-account h5, .woocommerce-account h6,
.woocommerce-order-received h1, .woocommerce-order-received h2, .woocommerce-order-received h3 {
  color: var(--color-espresso);
}

.page:not(.home):not(.woocommerce-page) h1,
.page:not(.home):not(.woocommerce-page) h2,
.page:not(.home):not(.woocommerce-page) h3,
.page:not(.home):not(.woocommerce-page) h4 {
  color: var(--color-espresso);
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-gold-light); }

/* Scope cream text only to dark-background sections */
.orai-hero p,
.orai-section--dark p,
.orai-section--darker p,
.orai-cta p,
.orai-testimonial p,
.orai-shop-hero p,
.orai-shop-cta p,
.home .site-main p,
.woocommerce-shop .site-main p {
  color: var(--color-cream);
}

/* WooCommerce transactional pages (cart, checkout, account) use Astra light containers.
   Set color at the container level so ALL child elements (td, th, span, strong, div, p,
   label, a) inherit dark text instead of the cream body color. */
.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-account #primary,
.woocommerce-order-received #primary {
  color: var(--color-text);
  background-color: #ffffff;
}

.woocommerce-cart #primary *,
.woocommerce-checkout #primary *,
.woocommerce-account #primary *,
.woocommerce-order-received #primary * {
  color: inherit;
}

/* Re-apply gold to prices and links inside those pages */
.woocommerce-cart #primary a,
.woocommerce-checkout #primary a,
.woocommerce-account #primary a,
.woocommerce-order-received #primary a {
  color: #8b6320;
}
.woocommerce-cart #primary a:hover,
.woocommerce-checkout #primary a:hover,
.woocommerce-account #primary a:hover {
  color: var(--color-espresso);
}

.woocommerce-cart #primary .woocommerce-Price-amount,
.woocommerce-checkout #primary .woocommerce-Price-amount,
.woocommerce-order-received #primary .woocommerce-Price-amount {
  color: var(--color-espresso) !important;
  font-weight: 700;
}

/* Buttons inside WC pages keep their own styles */
.woocommerce-cart #primary .button,
.woocommerce-checkout #primary .button,
.woocommerce-account #primary .button,
.woocommerce-order-received #primary .button {
  color: var(--color-dark) !important;
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
}
.woocommerce-cart #primary .button:hover,
.woocommerce-checkout #primary .button:hover {
  background-color: var(--color-gold-light) !important;
  border-color: var(--color-gold-light) !important;
}

/* Remove the old element-by-element overrides (now redundant) */

/* Content pages (About, Contact, Blends, etc.) */
.page:not(.home):not(.woocommerce-page) p { color: var(--color-text); }

/* ── Header / Navigation ─────────────────────────────────────────────────── */
.site-header,
#masthead {
  background-color: rgba(14, 13, 11, 0.92);
  border-bottom: 1px solid rgba(200, 169, 110, 0.25);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .site-title a {
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Main nav links */
.main-navigation a {
  color: var(--color-cream);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  transition: color var(--transition);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--color-gold);
}

/* ── Hero / Full-screen Banner ───────────────────────────────────────────── */
.orai-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-espresso);
}

.orai-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  pointer-events: none;
}

.orai-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14,13,11,0.6) 0%,
    rgba(14,13,11,0.3) 50%,
    rgba(14,13,11,0.8) 100%
  );
}

.orai-hero__content {
  position: relative;
  text-align: center;
  padding: 2rem;
  max-width: 760px;
}

.orai-hero__eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.25rem;
}

.orai-hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.12;
  margin-bottom: 1.5rem;
  color: var(--color-white);
}

.orai-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(245, 240, 232, 0.8);
  margin-bottom: 2.5rem;
  font-weight: 300;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn,
.orai-btn,
.wp-block-button__link {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  background: transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn:hover,
.orai-btn:hover,
.wp-block-button__link:hover {
  background: var(--color-gold);
  color: var(--color-dark);
}

.btn--filled {
  background: var(--color-gold);
  color: var(--color-dark);
}
.btn--filled:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

/* ── Section Layout ──────────────────────────────────────────────────────── */
.orai-section {
  padding: 6rem 1.5rem;
}

.home .orai-hero,
.home .orai-section,
.home .orai-cta,
.home .orai-shop-hero,
.home .orai-shop-cta,
.woocommerce-shop .orai-shop-hero,
.woocommerce-shop .orai-shop-cta {
  width: 100%;
}

.orai-section--dark   { background-color: var(--color-dark); }
.orai-section--darker { background-color: var(--color-espresso); }
.orai-section--cream  { background-color: var(--color-cream); color: var(--color-text); }
.orai-section--cream h2, .orai-section--cream h3 { color: var(--color-espresso); }
.orai-section--cream p { color: var(--color-text); }

.orai-container {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

.home img,
.woocommerce-shop img {
  max-width: 100%;
  height: auto;
}

.orai-section__label {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 0.75rem;
}

.orai-section__title {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: 1.25rem;
}

.orai-section__intro {
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 3rem;
  color: rgba(245, 240, 232, 0.75);
}

/* ── Product Cards ───────────────────────────────────────────────────────── */
.orai-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}

.orai-card {
  background-color: #161410;
  border: 1px solid rgba(200, 169, 110, 0.15);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.orai-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 169, 110, 0.5);
}

.orai-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.orai-card__body {
  padding: 1.5rem;
}

.orai-card__tag {
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 0.5rem;
}

.orai-card__title {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  color: var(--color-white);
}

.orai-card__desc {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* WooCommerce product integration */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  color: var(--color-gold);
}
.woocommerce ul.products li.product {
  background: #161410;
  border: 1px solid rgba(200, 169, 110, 0.15);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: transform var(--transition);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
}
.woocommerce ul.products li.product .price { color: var(--color-gold-light); }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  color: rgba(245, 240, 232, 0.7);
}

.woocommerce .woocommerce-ordering select {
  background: #161410;
  border: 1px solid rgba(200, 169, 110, 0.25);
  color: var(--color-cream);
}

.orai-shop-hero {
  background: linear-gradient(180deg, #120f0b 0%, #1a1208 100%);
  border: 1px solid rgba(200, 169, 110, 0.12);
  border-radius: var(--border-radius);
  margin: 1.5rem 0 2.5rem;
  overflow: hidden;
}

.orai-shop-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 2.5rem;
}

.orai-shop-hero__title {
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 3.3rem);
  margin-bottom: 1rem;
}

.orai-shop-hero__intro {
  color: rgba(245, 240, 232, 0.8);
  font-size: 1rem;
  line-height: 1.9;
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.orai-shop-hero__actions,
.orai-shop-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.orai-shop-meta {
  display: grid;
  gap: 1rem;
}

.orai-shop-meta__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 169, 110, 0.18);
  border-radius: var(--border-radius);
  padding: 1.25rem;
}

.orai-shop-meta__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.45rem;
}

.orai-shop-meta__card strong {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
}

.orai-shop-cta {
  margin-top: 3rem;
  padding: 2rem 0 0;
}

.orai-shop-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 1.5rem;
  align-items: center;
  background: rgba(200, 169, 110, 0.07);
  border: 1px solid rgba(200, 169, 110, 0.16);
  border-radius: var(--border-radius);
  padding: 2rem;
}

.orai-shop-cta__title {
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.orai-shop-cta__text {
  color: rgba(245, 240, 232, 0.76);
  margin: 0;
}

.wpcf7 form {
  display: grid;
  gap: 1rem;
}

.wpcf7 form p,
.wpcf7 form label {
  color: #4d453c;
  font-weight: 400;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(26, 18, 8, 0.14);
  border-radius: var(--border-radius);
  color: #2c2c2c;
  padding: 0.9rem 1rem;
  margin-top: 0.45rem;
}

.wpcf7 textarea {
  min-height: 170px;
  resize: vertical;
}

.wpcf7 input[type="submit"] {
  display: inline-block;
  width: auto;
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--border-radius);
  color: var(--color-dark);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.9rem 2.1rem;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}

.wpcf7 input[type="submit"]:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

/* ── Story / About Split ─────────────────────────────────────────────────── */
.orai-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 768px) {
  .orai-split { grid-template-columns: 1fr; gap: 3rem; }
}

.orai-split__image {
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}

/* ── Divider / Gold Line ─────────────────────────────────────────────────── */
.orai-divider {
  width: 48px;
  height: 2px;
  background: var(--color-gold);
  margin: 1.25rem 0 2rem;
}

/* ── Testimonials ────────────────────────────────────────────────────────── */
.orai-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.orai-testimonial {
  background: rgba(200, 169, 110, 0.07);
  border-left: 3px solid var(--color-gold);
  padding: 2rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.orai-testimonial__quote {
  font-style: italic;
  font-size: 1rem;
  color: rgba(245, 240, 232, 0.85);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.orai-testimonial__author {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ── Contact / CTA Banner ────────────────────────────────────────────────── */
.orai-cta {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, var(--color-espresso) 0%, #2a1c0e 100%);
  border-top: 1px solid rgba(200, 169, 110, 0.2);
  border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: #080705;
  border-top: 1px solid rgba(200, 169, 110, 0.2);
  padding: 3rem 1.5rem;
  text-align: center;
}

.site-footer,
.site-footer p,
.site-footer a {
  font-size: 0.82rem;
  color: rgba(245, 240, 232, 0.45);
  letter-spacing: 0.06em;
}
.site-footer a:hover { color: var(--color-gold); }

/* ── Responsive Utilities ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .orai-section { padding: 4rem 1.25rem; }
  .orai-hero__title { font-size: 2.25rem; }
  .orai-shop-hero__grid,
  .orai-shop-cta__grid {
    grid-template-columns: 1fr;
  }

  .home .site-content > .ast-container,
  .woocommerce-shop .site-content > .ast-container {
    padding-left: 0;
    padding-right: 0;
  }

  .orai-hero {
    min-height: 78vh;
  }
}