/*
Theme Name:   Storefront Atlas Wild
Theme URI:    https://atlaswildexperiences.com/
Description:  Child theme of Storefront, reskinned to the Atlas Wild Experiences brand (forest/cream/sand/rust, Playfair Display + Afacad Flux, cut corners, no drop shadows).
Author:       Atlas Wild Experiences
Template:     storefront
Version:      1.0.1
Text Domain:  storefront-atlaswild
*/

/* ── brand tokens, ported from the static site's variables.css ───────────── */
:root {
  --awe-forest: #2c3c1a;
  --awe-moss: #687532;
  --awe-rust: #8c3900;
  --awe-orange: #dd7d36;
  --awe-sand: #ffdd9d;
  --awe-cream: #f4e7ce;
  --awe-black: #000000;
  --awe-white: #ffffff;

  --awe-font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --awe-font-body: "Afacad Flux", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --awe-radius: 2px;
  --awe-border: #cbc3a9;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/playfair-display/PlayfairDisplay-latin-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Afacad Flux";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/afacad-flux/AfacadFlux-latin-var.woff2") format("woff2-variations");
}

/* ── base type ─────────────────────────────────────────────────────────── */
body,
button,
input,
select,
textarea {
  font-family: var(--awe-font-body);
  color: var(--awe-forest);
}
body {
  background-color: var(--awe-cream);
}
h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--awe-font-display);
  font-weight: 600;
  color: var(--awe-forest);
  letter-spacing: -0.008em;
}
a {
  color: var(--awe-rust);
}
a:hover {
  color: var(--awe-forest);
}

/* No drop shadows anywhere — rules instead, per the brand's own "elevation"
   rule (0 0 0 1px border, never a shadow). Storefront leans on box-shadow for
   several default affordances (skip link, sticky elements); this cancels the
   ones a shopper actually sees. */
.storefront-handheld-footer-bar,
.site-header,
.woocommerce ul.products li.product,
.product .images,
.button,
.added_to_cart {
  box-shadow: none !important;
}

/* Corners are cut, not softened — 2px across the board, not Storefront's 3px. */
.button,
.woocommerce ul.products li.product,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
input,
select,
textarea {
  border-radius: var(--awe-radius) !important;
}

/* Notices: the brand has no blue anywhere — swap WooCommerce's default blue
   "info" banner for the same forest/rust language used everywhere else. */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--awe-moss) !important;
  background-color: var(--awe-cream) !important;
  color: var(--awe-forest) !important;
}
.woocommerce-error {
  border-top-color: var(--awe-rust) !important;
  background-color: var(--awe-cream) !important;
  color: var(--awe-forest) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--awe-moss) !important;
}
.woocommerce-error::before {
  color: var(--awe-rust) !important;
}

/* ── header: same black/sand lockup as the marketing site's header ───────── */
.site-header {
  background-color: var(--awe-black);
  border-bottom: 0;
}
.site-header .site-branding {
  padding: 0.75em 0;
}
.site-header a {
  color: var(--awe-sand);
}
.site-header-cart a,
.site-header .woocommerce-breadcrumb a {
  color: var(--awe-sand);
}
.storefront-primary-navigation {
  background-color: var(--awe-black);
}
.storefront-primary-navigation ul.menu > li > a,
#site-navigation a {
  color: var(--awe-cream);
  font-family: var(--awe-font-body);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-size: 0.85em;
}
.storefront-primary-navigation ul.menu > li:hover > a,
.storefront-primary-navigation ul.menu > li > a:hover {
  color: var(--awe-sand);
}

/* Site title/description text is replaced by the real lockup via the
   Customizer's Site Identity logo (Storefront swaps to the logo image
   automatically once one is set — see storefront_site_title_or_logo()),
   so no template override is needed; this just sizes the image sensibly. */
.site-branding .custom-logo-link img {
  max-height: 54px;
  width: auto;
}

/* ── buttons: rust fill, cream text, no shadow, no gradient ───────────────── */
.button,
a.button,
button.button,
input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--awe-rust) !important;
  background-image: none !important;
  color: var(--awe-white) !important;
  font-family: var(--awe-font-body) !important;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--awe-rust) !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--awe-forest) !important;
  border-color: var(--awe-forest) !important;
  color: var(--awe-white) !important;
}

/* ── price + sale badge: rust for price, no red anywhere (the brand has no
   red — see DESIGN.md) ────────────────────────────────────────────────── */
.woocommerce .price {
  color: var(--awe-forest);
  font-family: var(--awe-font-body);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.woocommerce .price ins {
  color: var(--awe-rust);
}
.onsale {
  background-color: var(--awe-orange) !important;
  color: var(--awe-black) !important;
  border: 0 !important;
  font-family: var(--awe-font-body);
  letter-spacing: 0.055em;
}

/* ── product grid: thin rule border instead of Storefront's card shadow ──── */
.woocommerce ul.products li.product {
  border: 1px solid var(--awe-border);
  padding: 1em;
  background: var(--awe-white);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.1em;
}

/* ── footer: forest, matching the marketing site's footer ground ─────────── */
.site-footer {
  background-color: var(--awe-forest);
  color: var(--awe-cream);
  padding-top: 2.5em;
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
  color: var(--awe-cream);
}
.site-footer a {
  color: var(--awe-cream);
  text-decoration: underline;
}
.site-footer a:hover {
  color: var(--awe-sand);
}
.site-footer .widget-area {
  border-top-color: rgba(244, 231, 206, 0.25);
}

/* ── breadcrumb, tabs, misc chrome ─────────────────────────────────────── */
.woocommerce-breadcrumb {
  color: var(--awe-forest);
  font-family: var(--awe-font-body);
}
.woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--awe-rust);
}
.star-rating span::before,
.star-rating::before {
  color: var(--awe-orange);
}