/*
Theme Name: Kreativly
Theme URI: https://kreativly.ai
Description: Kreativly marketing-site child theme for Kadence. Carries the brand design system (tokens, type, components) so the WordPress site stays visually continuous with the live Next.js site. Light theme only, external facing. Brand look comes from theme.json presets plus the component classes below, not per-block style dumps.
Author: Kreativly
Author URI: https://kreativly.ai
Template: kadence
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kreativly
*/

/* ============================================================
   Tokens, ported 1:1 from the shipped marketing design system
   (site-build/assets/site.css). No invented values. WordPress
   also generates --wp--preset--* vars from theme.json; these
   literal tokens back the component classes below.
   ============================================================ */
:root {
  /* Background */
  --bg-cream: #fafaf7;
  --bg-white: #ffffff;
  --bg-paper: #f5f3ee;
  --bg-input: #ffffff;
  --bg-ink: #1c1c24;
  --bg-void: #111118;

  /* Foreground */
  --fg-ink: #1c1c24;
  --fg-charcoal: #3a3a4a;
  --fg-slate: #6b7280;
  --fg-silver: #9999aa;
  --fg-smoke: #eae8e2;

  /* Brand */
  --brand-orange: #e8621a;
  --brand-orange-dark: #c4501a;
  --brand-orange-deep: #a33e10;
  --brand-orange-light: #f4a261;
  --brand-orange-tint: #fdf1e8;
  --brand-orange-glow: rgba(232, 98, 26, 0.15);

  /* Semantic */
  --color-success: #15803d;
  --color-success-bg: #ebf7f0;
  --color-warning: #c2410c;
  --color-warning-bg: #fff4ed;
  --color-error: #b91c1c;
  --color-error-bg: #fef2f2;
  --color-info: #1d4ed8;
  --color-info-bg: #eef4ff;

  /* Type families */
  --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-logo-serif: 'Playfair Display', Georgia, serif;
  --font-logo-sans: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;

  /* Spacing (8px grid) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radii */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(28,28,36,.06), 0 2px 8px rgba(28,28,36,.04);
  --shadow-md: 0 4px 16px rgba(28,28,36,.08), 0 1px 3px rgba(28,28,36,.04);
  --shadow-lg: 0 12px 40px rgba(28,28,36,.1), 0 4px 12px rgba(28,28,36,.05);
  --shadow-brand: 0 4px 20px rgba(232,98,26,.28);

  /* Motion */
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Light base niceties. Body font, colours and background are
   set in theme.json; these only add polish that presets do not.
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-orange-tint); color: var(--brand-orange-deep); }

/* ============================================================
   Component classes the block patterns apply via the block
   "Additional CSS class(es)" field (className). Kept to what
   the four starter patterns use, plus a couple of brand-signature
   helpers. Add more from site.css as pages need them.
   ============================================================ */

/* Eyebrow / mono labels */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-slate);
}
.eyebrow.on-dark { color: var(--brand-orange-light); }
.mono { font-family: var(--font-mono); }

/* Hero headline. Font family and size come from presets; this
   class carries the editorial line-height and the italic accent. */
.hero-head {
  line-height: 1.03;
  letter-spacing: -0.022em;
  overflow-wrap: break-word;
}
.hero-head em,
.hero-head .italic {
  font-style: italic;
  color: var(--brand-orange);
}
.lede {
  line-height: 1.6;
  max-width: 46ch;
}
.lede strong, .lede b { color: var(--fg-ink); font-weight: 600; }
.hero-fine {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--fg-slate);
}

/* Section supporting text */
.section-sub {
  line-height: 1.6;
  color: var(--fg-charcoal);
  max-width: 54ch;
}

/* Mono index label used inside cards */
.card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--brand-orange);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Badge / pill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-orange-tint);
  color: var(--brand-orange-deep);
}

/* ============================================================
   Block-style variations (registered in functions.php).
   ============================================================ */

/* Group style: "Kreativly Card" — white surface used in grids */
.wp-block-group.is-style-kreativly-card {
  background: var(--bg-white);
  border: 1px solid var(--fg-smoke);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  height: 100%;
  transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base);
}
.wp-block-group.is-style-kreativly-card:hover {
  border-color: #d8d5cf;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.wp-block-group.is-style-kreativly-card :where(h1, h2, h3, h4) {
  font-family: var(--font-editorial);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-ink);
}
.wp-block-group.is-style-kreativly-card p {
  line-height: 1.62;
  color: var(--fg-slate);
}

/* Group style: "Kreativly Ink Band" — dark rounded CTA panel */
.wp-block-group.is-style-kreativly-ink {
  background: var(--bg-ink);
  color: var(--bg-cream);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5.5vw, 76px) clamp(24px, 4vw, 64px);
  text-align: center;
}
.wp-block-group.is-style-kreativly-ink :where(h1, h2, h3, h4) {
  font-family: var(--font-editorial);
  font-weight: 500;
  color: var(--bg-cream);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.wp-block-group.is-style-kreativly-ink p {
  color: color-mix(in srgb, var(--bg-cream) 66%, transparent);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ============================================================
   FAQ. Uses the core Details block inside a group.faq.
   ============================================================ */
.faq .wp-block-details {
  border-bottom: 1px solid var(--fg-smoke);
  padding: 0;
}
.faq .wp-block-details summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-ink);
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--brand-orange);
  transition: transform var(--duration-base);
}
.faq .wp-block-details[open] summary::after {
  content: '\2013'; /* en dash as the minus glyph */
}
.faq .wp-block-details p {
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-charcoal);
  max-width: 70ch;
}
.faq .wp-block-details p strong { color: var(--fg-ink); font-weight: 600; }

/* ============================================================
   Buttons. Base fill (brand orange), radius and hover live in
   theme.json (styles.elements.button). This only brands the
   core "Outline" style used for secondary actions on light.
   ============================================================ */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--fg-ink);
  border: 1px solid var(--fg-smoke);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  background: transparent;
  border-color: var(--fg-ink);
  color: var(--fg-ink);
}

/* ============================================================
   Reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wp-block-group.is-style-kreativly-card,
  .wp-block-group.is-style-kreativly-card:hover {
    transition: none;
    transform: none;
  }
}