/*
Theme Name:   Pinup Forge
Theme URI:    https://pinupforge.com
Description:  WoodMart child theme for Pinup Forge — 3D-printed pin-up resin figures from independent designers, forged in Athens. Midnight Velvet aesthetic.
Author:       John (Pinup Forge)
Author URI:   https://pinupforge.com
Template:     woodmart
Version:      0.5.0
Text Domain:  pinupforge
*/

/* =========================================================================
   1. CSS custom properties — Midnight Velvet (merchant-confirmed 2026-07-11)
   Tokens from design/source/prototype/themes.jsx `midnight`.
   ========================================================================= */
:root {
  /* Palette */
  --pf-bg:         #15131a;  /* deep aubergine-black */
  --pf-bgAlt:      #201c28;
  --pf-paper:      #1c1923;  /* card background */
  --pf-ink:        #f4e6d2;  /* warm cream foreground */
  --pf-inkSoft:    #a89a86;
  --pf-accent:     #e8a23a;  /* gold */
  --pf-accentAlt:  #c25a72;  /* dusty rose */
  --pf-rule:       rgba(244,230,210,.16);
  --pf-cardShadow: 0 1px 0 rgba(0,0,0,.3), 0 16px 36px -16px rgba(0,0,0,.6);

  /* Typography */
  --pf-font-display: "Bebas Neue", Impact, sans-serif;
  --pf-font-serif:   "Playfair Display", serif;
  --pf-font-body:    "DM Sans", system-ui, sans-serif;
  --pf-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --pf-container:    1320px;
  --pf-page-pad-x:   32px;
  --pf-section-pad:  80px;

  /* Radius */
  --pf-r-card:   4px;
  --pf-r-modal:  6px;
  --pf-r-btn:    4px;
}

/* =========================================================================
   1b. WoodMart variable remap — their components (side cart, shop grid,
   forms, buttons) read these tokens, so mapping them to PF tokens themes
   the whole parent UI. Defined on html:root/html body to out-rank the
   parent's own :root/body definitions wherever they load.
   ========================================================================= */
html:root, html body {
  --wd-main-bgcolor: var(--pf-bg);
  --wd-primary-color: var(--pf-accent);
  --wd-alternative-color: var(--pf-accentAlt);
  --wd-title-color: var(--pf-ink);
  --wd-text-color: var(--pf-inkSoft);
  --wd-link-color: var(--pf-ink);
  --wd-link-color-hover: var(--pf-accent);
  --wd-form-bg: var(--pf-paper);
  --wd-form-color: var(--pf-ink);
  --wd-form-brd-color: var(--pf-rule);
  --wd-form-brd-color-focus: var(--pf-accent);
  --bgcolor-white: var(--pf-paper);
  --btn-accented-bgcolor: var(--pf-accent);
  --btn-accented-bgcolor-hover: #d18f2e;
  --btn-accented-color: var(--pf-paper);
}

/* Off-canvas cart panel — parent hardcodes a light background. */
html body .cart-widget-side {
  background-color: var(--pf-paper);
  color: var(--pf-ink);
}

/* =========================================================================
   2. Base
   ========================================================================= */
/* html body / html body h* out-rank WoodMart's late-loading options CSS
   (body{background:#fff;color:#767676}, Poppins headings) on every page. */
html body {
  background: var(--pf-bg);
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  color: var(--pf-ink);
}

h1, h2, h3, h4, .pf-display {
  font-family: var(--pf-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 0.98;
}

/* WoodMart's generated typography CSS (Poppins on h1–h6) loads after this
   file and wins the cascade on bare type selectors. Class-scoped repeats
   for every PF component heading so ours out-rank it. */
.pf-display-font,
.pf-hero__title,
.pf-section-head h2,
.pf-card__name,
.pf-series-card__body h3,
.pf-process__step h3,
.pf-newsletter h2,
.pf-marquee__track {
  font-family: var(--pf-font-display);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  color: var(--pf-ink);
}
.pf-newsletter h2 { color: var(--pf-paper); }
.pf-hero__title .pf-italic-accent {
  font-family: var(--pf-font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}

/* WoodMart paints .woocommerce-Price-amount its own green — reset inside
   PF components (inherit the component's mono/ink styling). */
.pf-price .woocommerce-Price-amount,
.pf-price .woocommerce-Price-amount bdi,
.pf-hero__card .pf-hero__card-meta .woocommerce-Price-amount,
.pf-hero__card .pf-hero__card-meta .woocommerce-Price-amount bdi {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.pf-italic-accent {
  font-family: var(--pf-font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pf-mono {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--pf-inkSoft);
}

.pf-promo-meta {
  font-family: var(--pf-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

/* Price formatting — tabular numerals for clean alignment */
.pf-price {
  font-family: var(--pf-font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   3. Optional grain overlay — toggle via body class
   ========================================================================= */
.pf-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/images/grain.svg");
  opacity: 0.06;
  mix-blend-mode: multiply;
  z-index: 9999;
}

/* =========================================================================
   4. Shared utilities — container, buttons, section heads, eyebrows
   ========================================================================= */
.pf-container {
  max-width: var(--pf-container);
  margin: 0 auto;
  padding-left: var(--pf-page-pad-x);
  padding-right: var(--pf-page-pad-x);
}

/* Buttons — DM Sans 600, uppercase, .06em (handoff "Buttons" spec) */
.pf-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--pf-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--pf-r-btn);
  background: var(--pf-ink);
  color: var(--pf-paper);
  transition: transform 0.08s, background 0.15s, color 0.15s;
}
.pf-btn:hover { transform: translateY(-1px); color: var(--pf-paper); }
.pf-btn--accent { background: var(--pf-accent); }
.pf-btn--ghost {
  background: transparent;
  color: var(--pf-ink);
  border: 1px solid var(--pf-ink);
}
.pf-btn--ghost:hover { color: var(--pf-ink); }
.pf-btn--link {
  background: transparent;
  color: var(--pf-ink);
  padding: 0 0 2px;
  border-radius: 0;
  border-bottom: 1px solid var(--pf-ink);
}
.pf-btn--link:hover { color: var(--pf-accent); border-color: var(--pf-accent); transform: none; }
.pf-btn--sm { font-size: 11.5px; padding: 9px 14px; }
.pf-btn--lg { font-size: 14px; padding: 16px 24px; }

/* WoodMart skins bare <button>/<input type=submit> elements; repeat the
   variant colors element-scoped so .pf-btn wins on real form buttons too. */
button.pf-btn, button.pf-btn:hover,
input.pf-btn, input.pf-btn:hover {
  background: var(--pf-ink);
  color: var(--pf-paper);
  border: 0;
}
button.pf-btn--accent, button.pf-btn--accent:hover,
input.pf-btn--accent, input.pf-btn--accent:hover {
  background: var(--pf-accent);
  color: var(--pf-paper);
}
button.pf-btn--ghost, button.pf-btn--ghost:hover {
  background: transparent;
  color: var(--pf-ink);
  border: 1px solid var(--pf-ink);
}

/* Section header — eyebrow row + big display title */
.pf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pf-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pf-inkSoft);
  margin-bottom: 12px;
}
.pf-kicker__num { color: var(--pf-accent); font-weight: 700; }
.pf-kicker__rule { flex: 0 0 22px; height: 1px; background: var(--pf-rule); }
.pf-section-head h2 {
  font-size: 46px;
  letter-spacing: 0.01em;
  line-height: 1.02;
  max-width: 700px;
}

/* Figure placeholder — striped fallback when no product photo exists */
.pf-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pf-r-card);
  background: repeating-linear-gradient(135deg, var(--pf-ph-a, #2c2733) 0 14px, var(--pf-ph-b, #3a3340) 14px 28px);
}
.pf-figure--landscape { aspect-ratio: 3 / 2; }
.pf-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pf-obj-pos, center top);
  display: block;
}
.pf-figure__silhouette {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-figure__silhouette span {
  width: 44%;
  height: 70%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 60% 60% 30% 30% / 50% 50% 30% 30%;
}
.pf-figure__label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--pf-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.55);
  padding: 3px 6px;
  border-radius: 2px;
}
.pf-figure__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--pf-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pf-paper);
  background: var(--pf-accent);
  padding: 3px 7px;
  text-transform: uppercase;
  z-index: 1;
}

/* Component CSS lives in assets/css/*.css, enqueued per-page. */