/*
Theme Name:   Elicyne (Astra Child)
Theme URI:    https://elicyne.example
Description:  Elicyne Essentials storefront — an Astra child theme. Keeps the custom Elicyne landing page as the homepage and carries the brand palette/fonts onto every WooCommerce page (shop, product, cart, checkout, account) for one cohesive site.
Author:       Elicyne Essentials
Template:     astra
Version:      1.0.0
Text Domain:  elicyne-astra-child
*/

/* Brand tokens — sampled from the product packaging. */
:root {
  --cream:      #f7ede6;
  --cream-2:    #f1e3d8;
  --sand:       #e7d3c2;
  --ink:        #2e211b;
  --ink-soft:   #5a473e;
  --brick:      #a8412e;
  --brick-deep: #8c3526;
  --brand:      #a8412e;
  --gold:       #c9a24b;
  --gold-2:     #e6c66e;
  --gold-deep:  #b08534;
  --line:       rgba(58, 43, 37, 0.14);
  --white:      #fffaf4;
  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Allura", "Cormorant Garamond", cursive;
}

/* -------------------------------------------------------------
   Re-map Astra's global colour variables to the Elicyne palette.
   Astra uses --ast-global-color-0 (blue) for links/accents and
   -1 for hover. Overriding them recolours Astra's whole accent
   system to terracotta in one place — kills the default blue.
   ------------------------------------------------------------- */
:root,
body {
  --ast-global-color-0: #a8412e; /* primary / links  -> brick   */
  --ast-global-color-1: #8c3526; /* hover            -> brick-deep */
  --ast-global-color-2: #2e211b; /* headings         -> ink      */
  --ast-global-color-3: #5a473e; /* text             -> ink-soft */
  --ast-global-color-5: #f7ede6; /* light bg         -> cream    */
  --ast-link-color: #a8412e;
  --ast-link-hover-color: #8c3526;
}

/* Catch any remaining default-blue links/hovers site-wide */
a { color: var(--brick); }
a:hover, a:focus { color: var(--brick-deep); }

/* -------------------------------------------------------------
   Override Astra's defaults so EVERY page matches the brand:
   Astra forces body{color:#808285;background:#fff} + its own font.
   ------------------------------------------------------------- */
body,
body.elicyne-store-page,
.ast-container {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}
#page,
#content.site-content { background-color: var(--cream); }

/* Store content container: comfortable width + padding (Astra had flattened
   .ast-container to full width, so the cart was stuck to the edges). */
.elicyne-store-page #content .ast-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.2rem, 5vw, 3rem) !important;
  padding-right: clamp(1.2rem, 5vw, 3rem) !important;
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
  box-sizing: border-box;
}

/* WooCommerce BLOCK cart/checkout: make the block fill the container and
   center, instead of left-sticking with its own width/alignment. */
.elicyne-store-page .wp-block-woocommerce-cart,
.elicyne-store-page .wp-block-woocommerce-checkout,
.elicyne-store-page .wc-block-cart,
.elicyne-store-page .wc-block-checkout {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}
/* The cart's two-column layout (items + totals sidebar) — keep it tidy */
.elicyne-store-page .wc-block-components-sidebar-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.elicyne-store-page .wc-block-cart__main,
.elicyne-store-page .wc-block-checkout__main { flex: 1 1 60%; min-width: 0; }
.elicyne-store-page .wc-block-cart__sidebar,
.elicyne-store-page .wc-block-checkout__sidebar { flex: 1 1 34%; }
/* On mobile the block goes single-column */
@media (max-width: 768px) {
  .elicyne-store-page .wc-block-components-sidebar-layout { flex-direction: column; }
  .elicyne-store-page .wc-block-cart__main,
  .elicyne-store-page .wc-block-cart__sidebar { flex: 1 1 100%; width: 100%; }
}

/* Headings use the brand serif everywhere */
body h1, body h2, body h3, body h4,
.entry-title, .product_title,
.woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  color: var(--ink);
}

/* -------------------------------------------------------------
   Protect the shared Elicyne nav from Astra's generic header/CSS.
   Astra sets header{z-index:99;position:relative} which breaks our
   sticky nav, and its container rules can disturb the grid + the
   mobile hamburger. Force the essentials.
   ------------------------------------------------------------- */
header.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
}
.announce { z-index: 201; position: relative; }

/* Brand logo in the shared nav (keep it small & tidy regardless of source size) */
.nav__logo { height: 46px !important; width: auto !important; }
.nav.is-scrolled .nav__logo { height: 38px !important; }

/* Footer logo — keep it modestly sized (it was rendering too large). */
.footer__logo {
  height: 60px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain;
}

/* Hamburger — hidden on desktop, shown on mobile, clearly visible bars */
.nav__menu {
  display: none;
  background: transparent !important;
  border: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 30px !important;
  height: 26px !important;
  padding: 0 !important;
  cursor: pointer;
}
/* The three bars — explicit size + brand terracotta so they always show on cream */
.nav__menu span {
  display: block !important;
  width: 26px !important;
  height: 3px !important;
  background-color: #a8412e !important; /* terracotta — high contrast on cream */
  border-radius: 3px !important;
  transition: transform 0.4s, opacity 0.3s;
}
.drawer { z-index: 199; }
@media (max-width: 980px) {
  header.nav { grid-template-columns: auto 1fr auto !important; }
  .nav__menu { display: flex !important; }
  .nav__links--left { display: none !important; }
  .nav__links--right a:not(.nav__cta) { display: none !important; }
  .nav__brand { justify-content: flex-start !important; }
}

/* Body copy / links inside Astra content */
.ast-container p,
.ast-container li,
.woocommerce, .woocommerce-page { color: var(--ink); }
.ast-container a:not(.button):not(.wp-block-button__link) { color: var(--brick); }
.ast-container a:not(.button):not(.wp-block-button__link):hover { color: var(--brick-deep); }

/* -------------------------------------------------------------
   Brand buttons — match the landing page's terracotta pill.
   Covers Astra defaults + WooCommerce + block buttons.
   ------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wp-block-button__link,
.wc-block-components-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
button.single_add_to_cart_button {
  background: var(--brick) !important;
  background-color: var(--brick) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.95em 2em !important;
  box-shadow: 0 10px 26px -14px rgba(168,65,46,0.5) !important;
  transition: background 0.4s, transform 0.4s, box-shadow 0.4s !important;
  text-decoration: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
button.single_add_to_cart_button:hover {
  background: var(--brick-deep) !important;
  background-color: var(--brick-deep) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(140,53,38,0.6) !important;
}

/* Quantity stepper + small "added" buttons stay readable */
.woocommerce .quantity input.qty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

/* Sale badge + price in brand tones */
.woocommerce span.onsale {
  background: var(--brick) !important;
  color: var(--white) !important;
  border-radius: 100px;
}
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price { color: var(--ink); }