/*
Theme Name: Working With Joe Genesis Child V2
Theme URI: https://workingwithjoe.co.uk
Description: A minimal, content-led Genesis child theme for coaching websites with easy customization controls and accessible responsive templates.
Author: Perplexity
Author URI: https://www.perplexity.ai
Version: 2.0
Template: genesis
Text Domain: working-with-joe-genesis
*/

:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.72rem + 0.18vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.22vw, 1rem);
  --text-base: clamp(1rem, 0.98rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.04rem + 0.48vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.45rem + 1.8vw, 3.2rem);
  --text-3xl: clamp(2.6rem, 1.7rem + 2.8vw, 4.8rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --color-bg: var(--wwj-bg, #f6f3ee);
  --color-surface: var(--wwj-surface, #fbf8f3);
  --color-surface-2: var(--wwj-surface-2, #fffdf9);
  --color-border: var(--wwj-border, #d8d2c7);
  --color-divider: var(--wwj-divider, #e1dbd1);
  --color-text: var(--wwj-text, #241f18);
  --color-text-muted: var(--wwj-text-muted, #666056);
  --color-text-faint: var(--wwj-text-faint, #9e968b);
  --color-text-inverse: var(--wwj-text-inverse, #fbf8f2);
  --color-primary: var(--wwj-primary, #355c57);
  --color-primary-hover: var(--wwj-primary-hover, #284842);
  --color-primary-highlight: var(--wwj-primary-highlight, #dbe5e2);

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(24,20,14,0.05);
  --shadow-md: 0 12px 30px rgba(24,20,14,0.08);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-default: 72rem;
  --content-narrow: 42rem;
  --font-display: var(--wwj-font-display, 'Instrument Serif'), Georgia, serif;
  --font-body: var(--wwj-font-body, 'Work Sans'), system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #181613;
  --color-surface: #201d19;
  --color-surface-2: #26231e;
  --color-border: #3a352f;
  --color-divider: #322d28;
  --color-text: #ece5db;
  --color-text-muted: #b3aa9d;
  --color-text-faint: #857c71;
  --color-text-inverse: #191511;
  --color-primary: #92b9b3;
  --color-primary-hover: #b2cfca;
  --color-primary-highlight: #2a3735;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.22);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.32);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  background: var(--color-bg);
  color: var(--color-text);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
a, button, input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.screen-reader-text,
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-full);
  z-index: 9999;
}
.skip-link:focus,
.screen-reader-text:focus {
  top: 1rem;
}
.site-container { background: var(--color-bg); }
.wrap,
.wwj-container {
  width: min(calc(100% - 2rem), var(--content-default));
  margin: 0 auto;
}
.wwj-narrow {
  width: min(calc(100% - 2rem), var(--content-narrow));
  margin: 0 auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.nav-primary .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.75rem;
}
.title-area,
.site-title-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.site-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.wwj-brand-mark {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  flex: 0 0 auto;
}
.genesis-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.genesis-nav-menu a,
.theme-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.theme-toggle {
  background: none;
  border: 0;
  cursor: pointer;
}
.content-sidebar-wrap,
.content,
.site-inner {
  width: 100%;
  max-width: none;
  float: none;
}
.content-sidebar-wrap { padding: 0; display: block; }
main, section { display: block; }
.wwj-home section,
.page .entry,
.single .entry,
.archive-description,
.archive .content .entry,
.blog .content .entry,
.home.blog .content .entry {
  padding: clamp(var(--space-12), 7vw, var(--space-20)) 0;
  border-top: 1px solid var(--color-divider);
}
.hero {
  padding: clamp(var(--space-16), 10vw, 8rem) 0 var(--space-16);
  border-top: 0;
}
.hero-grid,
.section-intro,
.two-col,
.contact-box,
.template-grid {
  display: grid;
  gap: var(--space-8);
}
.hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); gap: var(--space-12); align-items: end; }
.section-intro { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); margin-bottom: var(--space-10); }
.two-col,
.contact-box,
.template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h1, h2, .entry-title, .archive-title, .page-title {
  font-family: var(--font-display);
  font-weight: 400;
}
h1 { font-size: var(--text-3xl); max-width: 10ch; }
h2, .entry-title, .archive-title, .page-title { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; margin-bottom: var(--space-3); }
p, li { max-width: 72ch; }
.hero p.lead,
.section-intro p,
.card p,
.about-block p,
.contact-card p,
.muted,
.entry-content p,
.entry-content li,
.archive-description p {
  color: var(--color-text-muted);
}
.hero p.lead {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  max-width: 36rem;
}
.entry-content { max-width: 72ch; }
.entry-content > * + * { margin-top: 1rem; }
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.button,
.wp-block-button__link,
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}
.btn-primary,
.button,
.wp-block-button__link {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover,
.button:hover,
.wp-block-button__link:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
}
.btn-secondary {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
  color: var(--color-text);
}
.side-note,
.card,
.about-block,
.contact-box,
.page .entry,
.single .entry,
.archive-description,
.archive .content .entry,
.blog .content .entry,
.home.blog .content .entry,
.template-panel {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: var(--radius-xl);
}
.side-note,
.page .entry,
.single .entry,
.archive-description,
.archive .content .entry,
.blog .content .entry,
.home.blog .content .entry,
.template-panel {
  padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.card {
  padding: var(--space-6);
  min-height: 15rem;
  box-shadow: var(--shadow-sm);
}
.kicker {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}
.quote {
  background: var(--color-primary-highlight);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
}
.quote p {
  max-width: 19ch;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.14;
  color: var(--color-text);
}
.list { display: grid; gap: var(--space-4); }
.list-item {
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.list-item strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.about-block,
.contact-box {
  background: var(--color-surface-2);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.contact-box { box-shadow: var(--shadow-md); }
.contact-card {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: calc(var(--radius-xl) - var(--space-3));
  padding: var(--space-6);
}
.entry-meta,
.entry-footer,
.post-info,
.post-meta { color: var(--color-text-faint); font-size: var(--text-sm); }
.widget { margin-bottom: var(--space-8); }
.site-footer {
  padding: var(--space-8) 0 var(--space-12);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 960px) {
  .hero-grid,
  .section-intro,
  .two-col,
  .contact-box,
  .template-grid,
  .cards,
  .nav-primary .wrap {
    grid-template-columns: 1fr;
    display: grid;
  }
  .genesis-nav-menu { justify-content: flex-start; }
  h1,
  .entry-title,
  .archive-title,
  .page-title { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}