/*
Theme Name: Ember & Earth
Theme URI: https://ember-and-earth.com
Author: Ember & Earth
Author URI: https://ember-and-earth.com
Description: Warm, earthy block theme for the Ember & Earth sustainable smoking & lifestyle shop. Two line themes — Classic (sage + matte gold) and Cinder Collective (taupe rose + rose gold). Bundled local fonts (Cinzel · Cormorant Garamond · Mulish), WooCommerce-ready, GDPR-friendly.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ember-and-earth
Tags: full-site-editing, block-patterns, e-commerce, custom-colors, custom-logo, block-styles, editor-style, translation-ready
*/

/* =========================================================================
   Ember & Earth — supplementary front-end styles.
   Most styling lives in theme.json + block supports. This file covers the
   few editorial details that block supports can't express cleanly.
   ========================================================================= */

/* ---- Eyebrow label (tracked-out caps, Cinzel) ---- */
.ee-eyebrow{
  font-family: var(--wp--preset--font-family--wordmark);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--gold-700);
  display: inline-block;
}
.ee-eyebrow.is-on-dark{ color: var(--wp--preset--color--gold-300); }

/* ---- Gold-diamond ornament divider ---- */
.ee-ornament{
  display:flex; align-items:center; gap:14px;
  color: var(--wp--preset--color--gold-500);
}
.ee-ornament::before, .ee-ornament::after{
  content:""; flex:1; height:1px; background: var(--wp--preset--color--clay-300);
}
.ee-ornament .ee-gem{
  width:8px; height:8px; background: var(--wp--preset--color--gold-500); transform: rotate(45deg);
}

/* ---- Soft card lift on hover (category / feature tiles) ---- */
.ee-lift{ transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s cubic-bezier(.22,.61,.36,1); }
.ee-lift:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47,46,39,.10); }

/* ---- Announcement bar ---- */
.ee-anno{
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.01em;
}

/* ---- CSS product "puck" (placeholder for real photography) ---- */
.ee-puck{
  width: min(54%, 220px); aspect-ratio:1; border-radius:50%;
  margin-inline:auto;
  box-shadow: 0 18px 30px rgba(47,46,39,.22), inset 0 2px 6px rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 38% 32%, var(--wp--preset--color--sage-700), var(--wp--preset--color--sage-500));
}
.ee-puck .ee-puck-inner{
  width:54%; aspect-ratio:1; border-radius:50%;
  background: var(--wp--preset--color--sage-500);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.30), 0 0 0 2px var(--wp--preset--color--sage-700);
  display:flex; align-items:center; justify-content:center;
}
.ee-puck .ee-puck-ring{
  width:34%; aspect-ratio:1; border-radius:50%;
  border:1.5px solid var(--wp--preset--color--sage-700); opacity:.7;
}

/* ---- Sticky translucent header ---- */
.ee-header{
  position: sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--wp--preset--color--cream-50) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--sand-200);
}

/* ---- Button press feedback (mirrors design-system motion) ---- */
.wp-element-button:active, .wp-block-button__link:active{
  transform: translateY(1px) scale(.985);
}

/* ---- Pill "ghost/secondary" button style ---- */
.is-style-ee-secondary .wp-block-button__link,
.wp-block-button.is-style-ee-secondary .wp-block-button__link{
  background: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--ink-900) !important;
  border: 1.5px solid var(--wp--preset--color--clay-300) !important;
}
.is-style-ee-secondary .wp-block-button__link:hover{
  background: var(--wp--preset--color--cream-100) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .ee-lift, .wp-element-button, .wp-block-button__link{ transition: none !important; }
}