/*
Theme Name: David Swaddle Blocks
Theme URI: https://swaddle.com
Author: David Swaddle
Description: Block theme for swaddle.com — strategic learning & workforce transformation. Native Gutenberg implementation of the David Personal Brand 26 "Iridescent" design system: tokens live in theme.json, section layouts are block patterns, and the remaining effects below are registered block styles visible in the editor.
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: davidswaddle-blocks
*/

/* ============================================================
   Everything here renders in BOTH the front end and the editor
   (loaded via add_editor_style), so the editor stays WYSIWYG.
   Only effects that Gutenberg's UI cannot express live here;
   most are attached to block styles pickable in the sidebar.
   ============================================================ */

/* ---- Gradient text (used inside the hero heading) ---- */
.grad-text {
  background: var(--wp--preset--gradient--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Paragraph styles ---- */
.is-style-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--violet);
}
.is-style-mono-label {
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.is-style-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--wp--custom--radius);
  border: 1px solid var(--wp--custom--glass-border);
  background: var(--wp--custom--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--wp--preset--color--violet);
}
.is-style-tag.has-text-color { border-color: var(--wp--custom--glass-border); }

/* ---- Buttons: motion + glass variant ---- */
.wp-block-button__link {
  transition: all 150ms var(--wp--custom--ease-out);
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--wp--preset--shadow--pop);
  filter: brightness(1.06);
  color: #fff;
}
.wp-block-button__link:active { transform: scale(0.98); }
.wp-block-button.is-style-glass .wp-block-button__link {
  background: var(--wp--custom--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--wp--custom--glass-border);
  color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-glass .wp-block-button__link:hover {
  filter: none;
  color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-ink .wp-block-button__link {
  background: var(--wp--preset--color--ink);
  color: #fff;
}

/* ---- Group styles ---- */
/* Mesh panel: iridescent radial background + house radius */
.is-style-mesh-panel {
  background: var(--wp--preset--gradient--mesh);
  border-radius: var(--wp--custom--radius);
}

/* Card: white surface, hairline border, violet-tinted shadow, hover */
.is-style-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius);
  box-shadow: var(--wp--preset--shadow--card);
  transition: border-color 150ms var(--wp--custom--ease-out);
}
.is-style-card:hover { border-color: var(--wp--preset--color--border-strong); }

/* Hairline card: border only */
.is-style-hairline {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius);
  transition: border-color 150ms var(--wp--custom--ease-out);
}

/* Glass panel (over mesh backgrounds) */
.is-style-glass-panel {
  background: var(--wp--custom--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--wp--custom--glass-border);
  border-radius: var(--wp--custom--radius);
}

/* Stat strip: shared hairline frame with internal dividers */
.is-style-stat-strip {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius);
}
.is-style-stat-strip > * {
  flex: 1 1 0;
  padding: 24px 28px;
  margin: 0 !important;
}
.is-style-stat-strip > * + * { border-left: 1px solid var(--wp--preset--color--border); }
@media (max-width: 1000px) {
  .is-style-stat-strip { flex-wrap: wrap !important; }
  .is-style-stat-strip > * { flex: 1 1 50%; min-width: 50%; }
  .is-style-stat-strip > *:nth-child(odd) { border-left: 0; }
  .is-style-stat-strip > *:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--border); }
}
@media (max-width: 720px) {
  .is-style-stat-strip > * { flex: 1 1 100%; min-width: 100%; border-left: 0 !important; }
  .is-style-stat-strip > * + * { border-top: 1px solid var(--wp--preset--color--border); }
}

/* ---- Query loop: card posts ---- */
.wp-block-post-template.is-style-cards { list-style: none; padding: 0; }
.wp-block-post-template.is-style-cards > .wp-block-post {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius);
  padding: 22px;
  transition: border-color 150ms var(--wp--custom--ease-out);
}
.wp-block-post-template.is-style-cards > .wp-block-post:hover { border-color: var(--wp--preset--color--border-strong); }
.wp-block-post-template.is-style-cards .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.wp-block-post-template.is-style-cards .wp-block-post-excerpt p { margin: 0; }
/* Cards inherit the global 64px block gap; use card-scale rhythm instead */
.wp-block-post-template.is-style-cards .wp-block-post > * + * { margin-block-start: 10px; }

/* ---- Navigation: current page emphasis ---- */
.wp-block-navigation a:hover { color: var(--wp--preset--color--ink); }
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
}

/* ---- Post content (single posts) ---- */
.wp-block-post-content { font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--body); }
.wp-block-post-content h2, .wp-block-post-content h3 { margin: 1.6em 0 0.5em; }
.wp-block-post-content p { margin: 0 0 1.1em; }
.wp-block-post-content a { font-weight: 600; }

/* ---- Motion: scroll fade-in (motion.js adds .is-visible) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .fade-in { opacity: 0; transform: translateY(8px); transition: opacity 280ms var(--wp--custom--ease-out), transform 280ms var(--wp--custom--ease-out); }
  html.js-motion .fade-in.is-visible { opacity: 1; transform: none; }
}



/* ---- Small helpers the hero needs ---- */
.home-hero h1 { max-width: 720px; line-height: 1.03; text-wrap: balance; }
.home-hero .has-lead-font-size { max-width: 580px; line-height: 1.55; }

/* ---- Button size utilities (Additional CSS class on the block) ---- */
.wp-block-button.btn-lg .wp-block-button__link { padding: 14px 26px; font-size: 15px; }
.wp-block-button.btn-sm .wp-block-button__link { padding: 8px 14px; font-size: 12.5px; }

/* ---- Header / footer chrome ---- */
.site-header { padding-top: 22px; padding-bottom: 22px; }
.site-main { padding-top: 8px; }
.site-footer { border-top: 1px solid var(--wp--preset--color--border); margin-top: 48px; }
.site-footer-inner { padding-top: 24px; padding-bottom: 36px; }
.site-footer-inner p { margin: 0; }
.footer-links a { color: var(--wp--preset--color--body); font-weight: 500; }
.footer-links a:hover { color: var(--wp--preset--color--ink); }

/* ---- Section helpers ---- */
.more-link { font-size: 14px; }
.more-link a { font-weight: 600; }
.about-body { max-width: 560px; }
.picto { margin: 0 0 6px; }
.picto img { width: 32px; height: 32px; }
.headshot { margin: 0; }
.headshot img { width: 100%; border-radius: var(--wp--custom--radius); border: 1px solid var(--wp--preset--color--border); display: block; }
.is-style-card h3 a, .is-style-card h3 a:hover { color: var(--wp--preset--color--ink); }
.is-style-cards .wp-block-post-terms::after { content: " ·"; }

/* Page/post title banners on mesh */
.page-banner { padding: 48px 56px; }
.page-banner h1 { font-size: clamp(32px, 4vw, 42px); line-height: 1.08; letter-spacing: -0.025em; max-width: 760px; text-wrap: balance; margin: 0; }
.writing-banner h1 { font-size: clamp(34px, 4.5vw, 46px); line-height: 1.05; }
.writing-banner p { max-width: 560px; }
.back-link { font-size: 14px; }
.back-link a { font-weight: 600; }

/* CTA combo divider */
.cta-combo { gap: 56px; }
.cta-combo .cta-col-b { border-left: 1px solid var(--wp--custom--glass-border); padding-left: 56px; }
@media (max-width: 781px) {
  .cta-combo .cta-col-b { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--custom--glass-border); padding-top: 32px; }
}

/* ============================================================
   Phase 2 — inner pages (Services, About, Contact, Writing)
   ============================================================ */

/* Legacy design-token aliases: PHP-rendered markup (forms) and any
   copied classic-theme snippets keep working under this theme. */
:root {
  --ink: var(--wp--preset--color--ink);
  --text-body: var(--wp--preset--color--body);
  --text-muted: var(--wp--preset--color--muted);
  --violet: var(--wp--preset--color--violet);
  --border: var(--wp--preset--color--border);
  --border-strong: var(--wp--preset--color--border-strong);
  --surface-tint: var(--wp--preset--color--tint);
  --radius: 10px;
  --shadow-card: var(--wp--preset--shadow--card);
  --shadow-pop: var(--wp--preset--shadow--pop);
  --danger: #e11d48;
  --danger-soft: #fdeaef;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.9);
  --font-mono: var(--wp--preset--font-family--ibm-plex-mono);
  --gradient-brand: var(--wp--preset--gradient--brand);
  --gradient-mesh: var(--wp--preset--gradient--mesh);
}
.hairline-card { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); }

/* Page heroes (Services / About / Contact) */
.page-hero h1 { font-size: clamp(34px, 4.6vw, 48px); line-height: 1.05; max-width: 700px; text-wrap: balance; margin: 0; }
.page-hero .sub { font-size: 18px; line-height: 1.55; max-width: 560px; }

/* Service rows */
.svc-h2 { line-height: 1.12; }
.svc-row { gap: 48px; }
.svc-row .wp-block-column > * + * { margin-block-start: 14px; }
.arrow-item { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.arrow-item .arrow { color: var(--wp--preset--color--violet); font-weight: 700; }
.evidence { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--border); font-size: 13px; }
.evidence .ev-label { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 11px; color: var(--wp--preset--color--violet); letter-spacing: 0.08em; margin-right: 6px; }

/* About page */
.headshot-pop { margin: 0; }
.headshot-pop img { width: 100%; border-radius: var(--wp--custom--radius); box-shadow: var(--wp--preset--shadow--pop); display: block; }
.fact-row p { margin: 0; font-size: 14px; }
.xp-row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.xp-row:last-child { border-bottom: 0; }
@media (max-width: 720px) { .xp-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } }

/* Pictogram size variants */
.picto-22 img { width: 22px; height: 22px; }
.picto-30 img { width: 30px; height: 30px; }
.picto-36 img { width: 36px; height: 36px; }

/* Contact page */
.contact-grid { gap: 48px; }
.contact-line { font-size: 14.5px; margin: 0; }
.contact-line a { font-weight: 600; }
.contact-line-plain { font-size: 14.5px; margin: 0; }
.contact-card-h { font-size: 20px; letter-spacing: -0.015em; margin: 0; }
.wp-block-button.is-style-outline .wp-block-button__link { background: #fff; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--border-strong); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--ink); filter: none; }

/* Writing page featured panel */
.featured-post .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.featured-post .featured-excerpt { max-width: 560px; font-size: 15.5px; }
.featured-post .featured-excerpt p { margin: 0; }
.featured-post .wp-block-post-terms, .featured-post .wp-block-post-date { margin: 0; }
.featured-post .wp-block-post-terms::after { content: " \00B7"; }

/* Single post banner meta separator */
.page-banner .wp-block-post-terms::after { content: " \00B7"; }

/* ============================================================
   Forms & newsletter panel — markup rendered by PHP
   (inc/forms.php via [ds_newsletter]), ported from the classic
   theme so the working form keeps its look.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600;
  border-radius: var(--wp--custom--radius); cursor: pointer; border: 1px solid transparent;
  padding: 11px 20px; font-size: 13.5px; line-height: 1.2;
  transition: all 150ms var(--wp--custom--ease-out);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--wp--preset--shadow--pop); }
.btn:active { transform: scale(0.98); }
.btn-gradient { background: var(--wp--preset--gradient--brand); color: #fff; }
.btn-gradient:hover { filter: brightness(1.06); color: #fff; }
.btn-glass { background: var(--wp--custom--glass-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--wp--preset--color--ink); border-color: var(--wp--custom--glass-border); }
.btn.btn-lg { padding: 14px 26px; font-size: 15px; }

.newsletter-panel {
  border-radius: var(--wp--custom--radius);
  background: var(--wp--preset--color--tint);
  border: 1px solid var(--wp--preset--color--border);
  padding: 40px 48px;
  display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center;
}
.newsletter-panel h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--wp--preset--color--ink); }
.newsletter-panel p { font-size: 15px; line-height: 1.6; margin: 10px 0 0; max-width: 440px; color: var(--wp--preset--color--body); }
@media (max-width: 1000px) {
  .newsletter-panel { grid-template-columns: 1fr; gap: 24px; }
}

.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field > .lbl { font-size: 12.5px; font-weight: 600; color: var(--wp--preset--color--ink); }
.ds-input, .ds-select, .ds-textarea {
  font-family: var(--wp--preset--font-family--space-grotesk); font-size: 14px; color: var(--wp--preset--color--ink);
  padding: 10px 14px; border-radius: var(--wp--custom--radius); border: 1px solid var(--wp--preset--color--border);
  outline: none; background: #fff; width: 100%;
  transition: border-color 150ms, box-shadow 150ms;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--wp--preset--color--violet); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.ds-textarea { min-height: 120px; resize: vertical; font-size: 14.5px; padding: 12px 14px; }
.ds-select-wrap { position: relative; }
.ds-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.ds-select-wrap::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--wp--preset--color--violet); font-size: 11px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .form-2col { grid-template-columns: 1fr; } }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }