/*
Theme Name: Hand Crafted Gems
Theme URI: https://handcraftedgems.co.uk
Author: W Web Design
Description: Lightweight custom theme for Hand Crafted Gems (WooCommerce) using code-registered ACF blocks. No page builder, no build step.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: hcg
*/

/* ==========================================================================
   Design tokens — the ONLY place for cross-block values.
   Brand: magenta chrome + signature yellow CTA + soft pink accent.
   ========================================================================== */
:root {
  /* Brand */
  --hcg-primary:      #BD669D;   /* brand magenta — chrome, links */
  --hcg-primary-dark: #A8528A;   /* hover/active */
  --hcg-primary-deep: #44293C;   /* deep plum — dark surfaces (footer) */
  --hcg-primary-tint: #F7E9F1;   /* pale magenta fills */
  --hcg-accent:       #F7B0D0;   /* soft pink */

  /* Action (signature CTA) */
  --hcg-action:       #F6D606;   /* yellow — buttons / add to basket */
  --hcg-action-hover: #E3C500;   /* yellow hover */

  /* Text */
  --hcg-ink:          #1A202C;   /* primary text / headings */
  --hcg-ink-soft:     #5b6270;   /* secondary text */

  /* Surfaces */
  --hcg-bg:           #f8f5f7;   /* page background (faint warm) */
  --hcg-card-bg:      #ffffff;   /* discrete card surfaces only */
  --hcg-line:         #ece4ea;   /* hairline borders */

  /* Accents */
  --hcg-sale:         #c0392b;   /* sale price / clearance */
  --hcg-star:         #f5a623;   /* rating stars */

  /* Type */
  --hcg-font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hcg-font-head:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --hcg-content-max:  1280px;
  --hcg-gutter:       clamp(16px, 4vw, 40px);
  --hcg-header-height: 84px;
  --hcg-radius:       14px;
  --hcg-radius-sm:    8px;
  --hcg-shadow:       0 6px 24px rgba(33, 33, 33, .08);
  --hcg-shadow-lg:    0 14px 40px rgba(33, 33, 33, .12);
  --hcg-transition:   .25s cubic-bezier(.2, .7, .3, 1);

  /* Backward-compat aliases (older block/shop CSS referenced these names) */
  --hcg-heading:      var(--hcg-ink);
  --hcg-text:         var(--hcg-ink-soft);
  --hcg-text-muted:   var(--hcg-ink-soft);
  --hcg-border:       var(--hcg-line);
  --hcg-surface:      #faf2f7;
  --hcg-surface-alt:  #f2e7ef;
  --hcg-radius-btn:   999px;
  --hcg-content-max:  1280px;
  --hcg-fs-base:      16px;
  --hcg-fs-section:   clamp(1.6rem, 3vw, 2.25rem);
  --hcg-fs-feature:   clamp(2rem, 4vw, 3rem);
  --hcg-fs-product:   1rem;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--hcg-bg);
  color: var(--hcg-ink);
  font-family: var(--hcg-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hcg-font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--hcg-ink);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

a { color: var(--hcg-primary-dark); text-decoration: none; transition: color var(--hcg-transition); }
a:hover { color: var(--hcg-ink); }

img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.hcg-container {
  width: 100%;
  max-width: var(--hcg-content-max);
  margin-inline: auto;
  padding-inline: var(--hcg-gutter);
}

.hcg-section { padding-block: clamp(40px, 6vw, 80px); }

/* Vertical breathing room for every WooCommerce surface (shop, archives,
   single product, cart, checkout, account). The .hcg-shop wrapper is emitted by
   the WC content hooks and by page.php, so one rule keeps spacing consistent. */
.hcg-shop { padding-block: clamp(28px, 5vw, 56px); }

/* Buttons — signature yellow pill (dark ink text). */
.hcg-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.6em;
  border-radius: 999px;
  background: var(--hcg-action);
  color: var(--hcg-ink);
  font-weight: 700;
  border: 2px solid var(--hcg-action);
  cursor: pointer;
  transition: background var(--hcg-transition), border-color var(--hcg-transition), transform var(--hcg-transition);
}
.hcg-btn:hover { background: var(--hcg-action-hover); border-color: var(--hcg-action-hover); color: var(--hcg-ink); transform: translateY(-2px); }

.hcg-btn--magenta { background: var(--hcg-primary); border-color: var(--hcg-primary); color: #fff; }
.hcg-btn--magenta:hover { background: var(--hcg-primary-dark); border-color: var(--hcg-primary-dark); color: #fff; }

.hcg-btn--ghost { background: transparent; color: var(--hcg-ink); border-color: var(--hcg-ink); }
.hcg-btn--ghost:hover { background: var(--hcg-ink); color: #fff; border-color: var(--hcg-ink); }

.hcg-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hcg-primary);
  margin-bottom: .6em;
}

.hcg-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--hcg-ink); color: #fff; padding: .75em 1em; border-radius: 0 0 var(--hcg-radius-sm) 0;
}
.hcg-skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

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