/*
Theme Name:   No1 Princess Child
Theme URI:    https://example.com/
Description:  Kadence child theme for the No1 Princess site. Custom CSS to match the Figma design lives here.
Author:       No1 Princess
Template:     kadence
Version:      1.0.0
Text Domain:  no1princess-child
*/

/* ============================================================
   1. DESIGN TOKENS (pull these exact values from Figma)
   ============================================================ */
:root {
  /* Brand colors — replace with your Figma hex values */
  --np-color-primary:   #d4af37; /* e.g. gold */
  --np-color-secondary: #1a1a1a;
  --np-color-accent:    #ff4f81;
  --np-color-text:      #222222;
  --np-color-muted:     #6b7280;
  --np-color-bg:        #ffffff;

  /* Typography — replace with your Figma fonts/sizes */
  --np-font-heading: "Playfair Display", serif;
  --np-font-body:    "Inter", sans-serif;

  --np-fs-h1: clamp(2rem, 5vw, 3.5rem);
  --np-fs-h2: clamp(1.5rem, 4vw, 2.5rem);
  --np-fs-body: 1rem;

  /* Spacing scale */
  --np-space-sm: 0.5rem;
  --np-space-md: 1rem;
  --np-space-lg: 2rem;
  --np-space-xl: 4rem;

  /* Layout */
  --np-container: 1200px;
  --np-radius: 12px;
}

/* ============================================================
   2. GLOBAL OVERRIDES
   ============================================================ */
body {
  font-family: var(--np-font-body);
  color: var(--np-color-text);
}

h1, h2, h3, h4 {
  font-family: var(--np-font-heading);
}

/* ============================================================
   3. ANIMATION INITIAL STATES
   Elements with .np-reveal start hidden ONLY when JS + motion are
   allowed (html.np-anim is added early by functions.php). GSAP then
   reveals them. No JS / reduced-motion = always visible (no flash).
   ============================================================ */
html.np-anim .np-reveal {
  opacity: 0;
  transform: translateY(32px);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .np-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   4. SECTION STYLES
   Add your Figma section styles below as you build each page.
   ============================================================ */

/* Example: hero section
.np-hero {
  padding-block: var(--np-space-xl);
  background: var(--np-color-secondary);
  color: #fff;
}
*/

/* ============================================================
   5. KADENCE COLOUR OVERRIDE
   The Kadence parent theme tints headings (and bare links) with
   its own palette colour — a dark navy — which overrode our
   section text colours on the custom templates (e.g. the white
   "Got a question? There's an answer." turned navy).
   Re-assert: headings + unclassed links inherit their section's
   colour (cream on dark sections, ink on light). Headings carry
   no hover state, so !important here is safe.
   ============================================================ */
:is(.np-home, .np-contact-page, .np-loc-page, .np-about-page) :is(h1, h2, h3, h4, h5, h6) { color: inherit !important; }
:is(.np-home, .np-contact-page, .np-loc-page, .np-about-page) a:not([class]) { color: inherit; }