/*
Theme Name:  Nik Ranger
Theme URI:   https://nikranger.com
Author:      Nik Ranger
Author URI:  https://nikranger.com/about/
Description: Hand-coded WordPress theme for nikranger.com. No page builder. System font stack. Zero third-party data storage.
Version:     1.0.4
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.1
License:     Private
Text Domain: nikranger
*/

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --white:              #ffffff;
  --black:              #0d0d0d;
  --gray-50:            #f8f8f8;
  --gray-100:           #f0f0f0;
  --gray-200:           #e0e0e0;
  --gray-400:           #999999;
  --gray-600:           #555555;
  --green:              #2F7A27;
  --green-dark:         #1f5219;
  --green-light:        #e8f5e6;
  --green-dim:          rgba(47,122,39,0.08);
  --green-panel:        #d4ead1;
  --green-panel-border: #bdd9b9;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --text-xs:   0.72rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow:    0 4px 16px rgba(0,0,0,0.08);

  --max-w:  1100px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-y: scroll; scroll-padding-top: 80px; }
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
button, input, select, textarea { font-family: inherit; }
input, select, textarea { max-width: 100%; }

/* ============================================================
   UTILITIES
============================================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--green);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  z-index: 1000;
  transition: top 0.15s;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  font-family: var(--font-sans);
  line-height: 1;
}
.btn-primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-1px);
  color: var(--white);
}
.btn-outline {
  background: transparent;
  color: var(--black);
  border-color: var(--gray-200);
}
.btn-outline:hover {
  border-color: var(--black);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--green-dark);
  border-color: transparent;
  padding-inline: 0;
}
.btn-ghost:hover { color: var(--green); }
.btn-ghost::after { content: ' →'; }

/* ============================================================
   HEADER
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-100);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.logo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--green-dark);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--gray-200);
  overflow: hidden;
}
.logo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.site-logo {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--black);
  display: block;
  line-height: 1.1;
}
.site-logo span { color: var(--green); }
.logo-subtitle {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gray-600);
  display: none;
}
@media (min-width: 780px) { .logo-subtitle { display: block; } }

/* Primary nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.primary-nav a:not(.btn) {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-600);
  transition: color 0.15s;
}
.primary-nav a.btn, .primary-nav a.btn-primary { color: var(--white); }
.primary-nav a:not(.btn):hover { color: var(--black); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav a[aria-current="page"] {
  color: var(--black);
  font-weight: 700;
}


/* Green stripe divider */
.site-stripe {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--green) 0px,
    var(--green) 40px,
    transparent 40px,
    transparent 48px
  );
  opacity: 0.3;
}

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb-wrap {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  padding-block: 0.875rem;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--black); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb-sep { color: var(--gray-400); font-weight: 400; }
.breadcrumb-current { color: var(--gray-400); font-weight: 400; }

/* Yoast breadcrumb compatibility */
.yoast-breadcrumb { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.yoast-breadcrumb a { color: var(--black); font-size: var(--text-sm); font-weight: 600; }
.yoast-breadcrumb a:hover { color: var(--green); }
.yoast-breadcrumb .breadcrumb_last { color: var(--gray-400); font-size: var(--text-sm); font-weight: 400; }

/* ============================================================
   SECTION SHARED PATTERNS
============================================================ */
.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.section--green {
  background: var(--green-panel);
  border-top: 1px solid var(--green-panel-border);
  border-bottom: 1px solid var(--green-panel-border);
}

.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
  display: block;
}
.section-heading {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.section-heading::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 3px;
  bottom: -4px;
  left: 0;
  background-image: linear-gradient(to right, rgba(47,122,39,0.5), rgba(0,0,0,0));
}
.section-lead {
  font-size: var(--text-lg);
  color: var(--gray-600);
  line-height: 1.75;
  max-width: 64ch;
  margin-bottom: 2rem;
}

/* ============================================================
   CARDS
============================================================ */
.card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow);
}
.card--clickable {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.card--clickable:hover { transform: translateY(-2px); }

/* Post cards — used in blog archive and homepage grid */
.post-card { padding: 0; }
.post-card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--green-light);
  overflow: hidden;
}
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.card--clickable:hover .post-card__thumb img { transform: scale(1.03); }
.post-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.post-card__body { padding: 1.25rem; }
.post-card__cat {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 0.2rem 0.625rem;
  border-radius: 100px;
  margin-bottom: 0.625rem;
  text-decoration: none;
}
.post-card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0.625rem;
  color: var(--black);
}
.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 0.875rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--gray-400);
  font-weight: 600;
}
.post-card__read {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--text-xs);
}
.post-card__read:hover { color: var(--green); }

/* ============================================================
   TWO-COLUMN CONTENT LAYOUT (blog single, about, etc.)
============================================================ */
.content-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .content-layout { grid-template-columns: 1fr; }
}
.content-layout--reverse {
  grid-template-columns: 1fr 280px;
}
@media (max-width: 900px) {
  .content-layout--reverse { grid-template-columns: 1fr; }
}

/* ============================================================
   SIDEBAR
============================================================ */
.sidebar { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 900px) { .sidebar--sticky { position: sticky; top: 80px; } }

.sidebar-section {}
.sidebar-heading {
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.sidebar-heading::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-image: linear-gradient(to right, rgba(47,122,39,0.4), rgba(0,0,0,0));
}

/* TOC sidebar (blog single) */
.toc-block { margin-bottom: 1.5rem; }
.toc-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
}
.toc-list {
  counter-reset: toc-counter;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.toc-list li { counter-increment: toc-counter; }
.toc-list a {
  display: flex;
  gap: 0.625rem;
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.4;
  transition: color 0.15s;
}
.toc-list a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
  min-width: 1.5rem;
  margin-top: 0.1rem;
}
.toc-list a:hover { color: var(--green-dark); }

/* Meta block (blog single) */
.meta-block {}
.meta-readtime {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 0.35rem 0.875rem;
  border-radius: 100px;
  margin-bottom: 0.875rem;
}
.meta-row { display: flex; flex-direction: column; gap: 0.375rem; }
.meta-item { font-size: var(--text-sm); color: var(--gray-600); }
.meta-label { font-weight: 700; color: var(--black); }

/* ============================================================
   BLOG SINGLE POST
============================================================ */
.post-wrap { padding-block: clamp(2rem, 4vw, 3.5rem); }
.post-breadcrumb { margin-bottom: 1.25rem; }
.post-cat-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1rem;
  text-decoration: none;
}
.post-title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.post-body {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--black);
}
.post-body p { margin-bottom: 1.5rem; }
.post-body p:last-child { margin-bottom: 0; }
.post-body h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 2.5rem 0 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.post-body h2::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 3px;
  bottom: -4px;
  left: 0;
  background-image: linear-gradient(to right, rgba(47,122,39,0.5), rgba(0,0,0,0));
}
.post-body h3 { font-size: var(--text-xl); font-weight: 700; margin: 2rem 0 0.75rem; }
.post-body h4 { font-size: var(--text-lg); font-weight: 700; margin: 1.5rem 0 0.5rem; }
.post-body a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--green); }
.post-body ul, .post-body ol { margin: 0 0 1.5rem 1.5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 0.5rem; line-height: 1.7; }
.post-body blockquote {
  border-left: 4px solid var(--green);
  background: var(--green-light);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--gray-600);
}
.post-body code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  font-size: 0.875em;
  background: var(--gray-100);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--black);
}
.post-body pre {
  background: var(--black);
  color: var(--gray-100);
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.post-body pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.post-body img {
  max-width: 100%;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.post-body figure {
  margin: 2rem 0;
}
.post-body figcaption {
  font-size: var(--text-sm);
  color: var(--gray-400);
  margin-top: 0.5rem;
  font-style: italic;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--text-sm);
}
.post-body th {
  background: var(--gray-50);
  font-weight: 700;
  padding: 0.625rem 1rem;
  border: 1px solid var(--gray-200);
  text-align: left;
}
.post-body td {
  padding: 0.625rem 1rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  vertical-align: top;
}
.post-body tr:nth-child(even) td { background: var(--gray-50); }

/* Post embed (floated video/media) */
.post-embed-float {
  float: right;
  width: 340px;
  margin: 0 0 1.5rem 2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (max-width: 780px) {
  .post-embed-float { float: none; width: 100%; margin: 0 0 1.5rem; }
}
.post-embed-float iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}
.embed-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--white);
  cursor: pointer;
}
.embed-play { font-size: 2.5rem; opacity: 0.6; }
.embed-caption { font-size: var(--text-xs); opacity: 0.5; text-align: center; padding: 0 1rem; }

/* Post nav */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-100);
}
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 45%;
  text-decoration: none;
}
.post-nav-item--next { text-align: right; margin-left: auto; }
.post-nav-label { font-size: var(--text-xs); font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.06em; }
.post-nav-title { font-size: var(--text-sm); font-weight: 700; color: var(--black); line-height: 1.4; }
.post-nav-item:hover .post-nav-title { color: var(--green-dark); }

/* Author bio */
.author-bio {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--green-dark);
  flex-shrink: 0;
  overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-bio-content h3 { font-size: var(--text-base); font-weight: 800; margin-bottom: 0.2rem; }
.author-role { font-size: var(--text-xs); color: var(--green-dark); font-weight: 600; margin-bottom: 0.5rem; }
.author-bio-text { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.65; }

/* Related posts */
.related-posts { margin-top: 2.5rem; }
.related-heading { font-size: var(--text-xl); font-weight: 800; margin-bottom: 1.25rem; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 780px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s;
}
.related-card:hover { border-color: var(--green); }
.related-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
}
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-title { font-size: var(--text-sm); font-weight: 700; line-height: 1.4; color: var(--black); margin-bottom: 0.25rem; }
.related-meta { font-size: var(--text-xs); color: var(--gray-400); }

/* Mobile TOC/meta (shown inline on single posts, hidden on desktop) */
.mobile-toc-meta {
  display: none;
  margin-bottom: 1.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.25rem;
}
@media (max-width: 900px) { .mobile-toc-meta { display: block; } }

/* ============================================================
   FORMS (speaking enquiry, comment form)
============================================================ */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
@media (min-width: 600px) {
  .form-row-2col { flex-direction: row; }
  .form-row-2col .form-group { flex: 1; }
}
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: var(--text-sm); font-weight: 700; color: var(--black); }
.form-label .required { color: var(--green-dark); margin-left: 0.15rem; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--black);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47,122,39,0.08);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-400); }
.form-textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}
.form-note { font-size: var(--text-xs); color: var(--gray-400); margin-top: 0.75rem; line-height: 1.5; }
.form-note a { color: var(--gray-600); text-decoration: underline; }

/* Cloudflare Turnstile wrapper */
.cf-turnstile { margin: 1rem 0; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding-block: 3rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 780px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand .site-logo { margin-bottom: 0.875rem; }
.footer-brand p { font-size: var(--text-sm); color: var(--gray-600); max-width: 36ch; line-height: 1.65; }
.footer-col h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 1rem;
}
.footer-col ul li { margin-bottom: 0.625rem; }
.footer-col ul li a { font-size: var(--text-sm); color: var(--gray-600); transition: color 0.15s; }
.footer-col ul li a:hover { color: var(--black); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--gray-400);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a { color: var(--gray-400); }
.footer-bottom a:hover { color: var(--black); }

/* ============================================================
   WPDISCUZ COMMENT OVERRIDES
   Matches our design system — green accent, card style
============================================================ */
#wpdcom .wpd-comment .wpd-comment-wrap {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-wrap {
  border-left: 3px solid var(--green);
  margin-left: 1.5rem;
}
#wpdcom .wpd-blog-post_author .wpd-comment-author,
#wpdcom .wpd-blog-post_author .wpd-comment-author a {
  color: var(--green);
}
#wpdcom .wpd-form .wpd-main-form-wrapper {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
#wpdcom .wc_comment {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
#wpdcom .wc_comment:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47,122,39,0.08);
}
#wpdcom .wpdiscuz-item input[type="text"],
#wpdcom .wpdiscuz-item input[type="email"] {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem 0.625rem 2.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
#wpdcom .wpdiscuz-item input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47,122,39,0.08);
}
#wpdcom .wc_comm_submit {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
#wpdcom .wc_comm_submit:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}
.wpd-thread-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 1.25rem;
}
.wpd-thread-info {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wpdtc { color: var(--green); }

/* ============================================================
   ARCHIVE / BLOG LISTING
============================================================ */
.archive-wrap { padding-block: clamp(2rem, 4vw, 3.5rem); }
.archive-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .archive-inner { grid-template-columns: 1fr; } }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } }

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  transition: all 0.15s;
}
.page-numbers:hover { border-color: var(--green); color: var(--green-dark); }
.page-numbers.current {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.page-numbers.dots { border-color: transparent; width: auto; padding-inline: 0.5rem; }

/* ============================================================
   CONTENT-VISIBILITY for offscreen sections
============================================================ */
.section:not(:first-child),
.archive-inner,
.related-posts,
.author-bio {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* ============================================================
   ACCESSIBILITY — focus styles
============================================================ */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   PRINT
============================================================ */
@media print {
  .site-header, .site-footer, .sidebar, .post-nav, .related-posts { display: none; }
  .content-layout { grid-template-columns: 1fr; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.hero-eyebrow{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);margin-bottom:1rem}.hero-heading{font-size:clamp(var(--text-3xl),5vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:1.25rem}.hero-lead{font-size:var(--text-lg);color:var(--gray-600);line-height:1.75;max-width:52ch;margin-bottom:2rem}.hero-actions{display:flex;gap:.875rem;flex-wrap:wrap}.hero-post-preview{display:flex;flex-direction:column;gap:.75rem}.hero-post-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400)}.intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}.intro-bold{font-size:var(--text-lg);font-weight:700;line-height:1.65}.intro-right p{font-size:var(--text-base);color:var(--gray-600);line-height:1.75;margin-bottom:1.5rem}.section__header{margin-bottom:2rem}.posts-grid--3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.whatido-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}.whatido-item{background:var(--white);border:1.5px solid var(--green-panel-border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.75rem}.whatido-icon{font-size:2rem;line-height:1}.whatido-item h3{font-size:var(--text-xl);font-weight:800;letter-spacing:-.02em}.whatido-item p{font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;flex:1}.brand-strip{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.25rem}.brand-logo{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.75rem 1.25rem;background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-width:100px;transition:border-color .15s,transform .15s}.brand-logo:hover{border-color:var(--green);transform:translateY(-2px)}.brand-logo-img{font-size:1.5rem;line-height:1;}.brand-logo-name{font-size:var(--text-xs);font-weight:600;color:var(--gray-600);text-align:center;white-space:nowrap}.about-snippet{display:grid;grid-template-columns:80px 1fr;gap:2rem;align-items:start}.about-snippet__avatar{width:80px;height:80px;border-radius:var(--radius);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--green-dark);border:1px solid var(--green-panel-border);flex-shrink:0}.about-snippet__body{font-size:var(--text-base);color:var(--gray-600);line-height:1.75;margin-bottom:1.5rem}.about-hero{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding-block:clamp(3rem,7vw,5rem)}.about-hero-inner{display:grid;grid-template-columns:200px 1fr;gap:3rem;align-items:start}.about-avatar{width:180px;height:180px;border-radius:var(--radius-lg);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:var(--green-dark);border:2px solid var(--green-panel-border);overflow:hidden}.about-pronouns{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);background:var(--green-light);padding:.25rem .75rem;border-radius:100px;margin-bottom:.75rem}.about-name{font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:800;letter-spacing:-.03em;margin-bottom:.375rem}.about-title{font-size:var(--text-lg);color:var(--green-dark);font-weight:600;margin-bottom:1.25rem}.about-summary{font-size:var(--text-base);color:var(--gray-600);line-height:1.75;max-width:68ch;margin-bottom:1.75rem}.about-actions{display:flex;gap:.875rem;flex-wrap:wrap;margin-bottom:2rem}.highlights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:2rem}.highlight-chip{display:flex;gap:1rem;align-items:flex-start;padding:1.125rem 1.25rem;background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.highlight-icon{font-size:1.5rem;flex-shrink:0}.highlight-text{font-size:var(--text-sm);font-weight:700;color:var(--black);line-height:1.4;margin-bottom:.2rem}.highlight-sub{font-size:var(--text-xs);color:var(--gray-400);line-height:1.4}.timeline{display:flex;flex-direction:column;gap:0;margin-top:2rem;position:relative;padding-left:2rem}.timeline-item{display:grid;grid-template-columns:180px auto 1fr;gap:1.5rem;align-items:start;padding-bottom:2.5rem}.timeline-period{font-size:var(--text-sm);font-weight:700;color:var(--black);line-height:1.3}.timeline-duration{font-size:var(--text-xs);color:var(--gray-400);font-weight:500}.timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--white);box-shadow:0 0 0 2px var(--green);margin-top:4px;flex-shrink:0}.timeline-role{font-size:var(--text-lg);font-weight:800;letter-spacing:-.02em;margin-bottom:.25rem}.timeline-org{font-size:var(--text-sm);color:var(--green-dark);font-weight:600;margin-bottom:.875rem}.timeline-points{list-style:none;display:flex;flex-direction:column;gap:.5rem}.timeline-points li{font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;padding-left:1.125rem;position:relative}.timeline-points li::before{content:"→";position:absolute;left:0;color:var(--green);font-size:.65rem;top:.3rem}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem}.skill-tags{display:flex;flex-wrap:wrap;gap:.5rem}.skill-tag{display:inline-block;font-size:var(--text-xs);font-weight:600;padding:.35rem .75rem;border-radius:100px;background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200)}.skill-tag--green{background:var(--green-light);color:var(--green-dark);border-color:var(--green-panel-border)}.beyond-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem}.passion-list{display:flex;flex-direction:column;gap:.75rem}.passion-item{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--text-sm);color:var(--gray-600);line-height:1.55}.passion-icon{font-size:1.125rem;flex-shrink:0}.about-cta{padding-block:clamp(3rem,6vw,5rem);background:var(--green-panel);border-top:1px solid var(--green-panel-border);border-bottom:1px solid var(--green-panel-border)}.about-cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}.cta-block{background:var(--white);border:1.5px solid var(--green-panel-border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.875rem}.cta-block h3{font-size:var(--text-xl);font-weight:800}.cta-block p{font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;flex:1}.event-card{background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.375rem}.event-name{font-size:var(--text-base);font-weight:800;color:var(--black);line-height:1.3}.event-date{font-size:var(--text-xs);font-weight:700;color:var(--green-dark);background:var(--green-light);padding:.2rem .625rem;border-radius:100px;display:inline-block;width:fit-content}.event-location{font-size:var(--text-xs);color:var(--gray-600);font-weight:500}.s

.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero-eyebrow{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);margin-bottom:1rem}
.hero-heading{font-size:clamp(var(--text-3xl),5vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:1.25rem}
.hero-lead{font-size:var(--text-lg);color:var(--gray-600);line-height:1.75;max-width:52ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:.875rem;flex-wrap:wrap}
.hero-post-preview{display:flex;flex-direction:column;gap:.75rem}
.intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.intro-bold{font-size:var(--text-lg);font-weight:700;line-height:1.65}
.section__header{margin-bottom:2rem}
.posts-grid--3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.whatido-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
.whatido-item{background:var(--white);border:1.5px solid var(--green-panel-border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.75rem}
.whatido-icon{font-size:2rem;line-height:1}
.whatido-item h3{font-size:var(--text-xl);font-weight:800}
.whatido-item p{font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;flex:1}
.brand-strip{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.25rem}
.brand-logo{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.75rem 1.25rem;background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-width:100px}
.brand-logo:hover{border-color:var(--green);transform:translateY(-2px)}
.brand-logo-img{width:120px;height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden}.brand-logo-img img{max-width:120px;max-height:48px;width:auto;height:auto;object-fit:contain}
.brand-logo-name{font-size:var(--text-xs);font-weight:600;color:var(--gray-600);text-align:center}
.about-snippet{display:grid;grid-template-columns:80px 1fr;gap:2rem;align-items:start}
.about-snippet__avatar{width:80px;height:80px;border-radius:var(--radius);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--green-dark);border:1px solid var(--green-panel-border)}
.about-snippet__body{font-size:var(--text-base);color:var(--gray-600);line-height:1.75;margin-bottom:1.5rem}
.about-hero{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding-block:clamp(3rem,7vw,5rem)}
.about-hero-inner{display:grid;grid-template-columns:200px 1fr;gap:3rem;align-items:start}
.about-avatar{width:180px;height:180px;border-radius:var(--radius-lg);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:var(--green-dark);border:2px solid var(--green-panel-border)}
.about-pronouns{display:inline-block;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;color:var(--green-dark);background:var(--green-light);padding:.25rem .75rem;border-radius:100px;margin-bottom:.75rem}
.about-name{font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:800;letter-spacing:-.03em;margin-bottom:.375rem}
.about-title{font-size:var(--text-lg);color:var(--green-dark);font-weight:600;margin-bottom:1.25rem}
.about-summary{font-size:var(--text-base);color:var(--gray-600);line-height:1.75;max-width:68ch;margin-bottom:1.75rem}
.about-actions{display:flex;gap:.875rem;flex-wrap:wrap;margin-bottom:2rem}
.highlights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:2rem}
.highlight-chip{display:flex;gap:1rem;align-items:flex-start;padding:1.125rem 1.25rem;background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.highlight-icon{font-size:1.5rem;flex-shrink:0}
.highlight-text{font-size:var(--text-sm);font-weight:700;color:var(--black);line-height:1.4;margin-bottom:.2rem}
.highlight-sub{font-size:var(--text-xs);color:var(--gray-400);line-height:1.4}
.timeline{display:flex;flex-direction:column;margin-top:2rem;position:relative;padding-left:2rem}
.timeline-item{display:grid;grid-template-columns:180px auto 1fr;gap:1.5rem;align-items:start;padding-bottom:2.5rem}
.timeline-period{font-size:var(--text-sm);font-weight:700;color:var(--black);line-height:1.3}
.timeline-duration{font-size:var(--text-xs);color:var(--gray-400);font-weight:500}
.timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--white);box-shadow:0 0 0 2px var(--green);margin-top:4px;flex-shrink:0}
.timeline-role{font-size:var(--text-lg);font-weight:800;margin-bottom:.25rem}
.timeline-org{font-size:var(--text-sm);color:var(--green-dark);font-weight:600;margin-bottom:.875rem}
.timeline-points{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.timeline-points li{font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;padding-left:1.125rem;position:relative}
.timeline-points li::before{content:"\2192";position:absolute;left:0;color:var(--green);font-size:.65rem;top:.3rem}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem}
.skill-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.skill-tag{display:inline-block;font-size:var(--text-xs);font-weight:600;padding:.35rem .75rem;border-radius:100px;background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200)}
.skill-tag--green{background:var(--green-light);color:var(--green-dark);border-color:var(--green-panel-border)}
.beyond-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem}
.passion-list{display:flex;flex-direction:column;gap:.75rem}
.passion-item{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--text-sm);color:var(--gray-600);line-height:1.55}
.passion-icon{font-size:1.125rem;flex-shrink:0}
.about-cta{padding-block:clamp(3rem,6vw,5rem);background:var(--green-panel);border-top:1px solid var(--green-panel-border);border-bottom:1px solid var(--green-panel-border)}
.about-cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
.cta-block{background:var(--white);border:1.5px solid var(--green-panel-border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.875rem}
.cta-block h3{font-size:var(--text-xl);font-weight:800}
.cta-block p{font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;flex:1}
.event-card{background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.375rem}
.event-name{font-size:var(--text-base);font-weight:800;color:var(--black);line-height:1.3}
.event-date{font-size:var(--text-xs);font-weight:700;color:var(--green-dark);background:var(--green-light);padding:.2rem .625rem;border-radius:100px;display:inline-block}
.event-location{font-size:var(--text-xs);color:var(--gray-600)}
.sidebar-event{display:flex;flex-direction:column;gap:.25rem;padding:.875rem 1rem;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);margin-bottom:.625rem}
.sidebar-post{display:flex;gap:.75rem;padding:.875rem;margin-bottom:.625rem}
.sidebar-post-thumb{width:60px;height:60px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--green-light)}
.sidebar-post-body{display:flex;flex-direction:column;gap:.25rem}
.sidebar-post-title{font-size:var(--text-sm);font-weight:700;color:var(--black);line-height:1.35;display:block}
.sidebar-cat-list{display:flex;flex-direction:column;gap:.25rem}
.sidebar-cat-link{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--gray-600);font-weight:500}
.sidebar-cat-link:hover{background:var(--green-light);color:var(--green-dark)}
.sidebar-cat-link--active{background:var(--green-light);color:var(--green-dark);font-weight:700}
.page-wrap{padding-block:clamp(2.5rem,5vw,4rem)}
.page-heading{font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:800;letter-spacing:-.03em;margin-bottom:2rem}
@media (min-width: 769px) { .primary-nav__items{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0} }
.primary-nav__cta{margin-left:.5rem}
@media(max-width:860px){.hero-inner{grid-template-columns:1fr}}
@media(max-width:700px){.intro-inner,.whatido-grid,.about-hero-inner,.about-cta-inner,.beyond-grid,.skills-grid{grid-template-columns:1fr}}
@media(max-width:900px){.posts-grid--3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.posts-grid--3col,.about-snippet{grid-template-columns:1fr}}
@media(max-width:700px){.timeline-item{grid-template-columns:1fr;padding-left:1.5rem}.timeline-dot{display:none}}

/* SPACING FIXES */
.section { padding-block: clamp(4rem, 8vw, 6rem); }
.container { max-width: 1200px; padding-inline: clamp(1.5rem, 5vw, 3rem); }
.hero-section { padding-block: clamp(4rem, 10vw, 7rem); }
.about-hero { padding-block: clamp(4rem, 8vw, 6rem); }
.highlights-section, .skills-section { padding-block: clamp(3rem, 6vw, 5rem); }
.experience-section, .beyond-section { padding-block: clamp(3rem, 6vw, 5rem); }
.about-cta { padding-block: clamp(3rem, 6vw, 5rem); }
.hero-inner { gap: 4rem; }
.intro-inner { gap: 4rem; }
.whatido-grid { gap: 2rem; margin-top: 2.5rem; }
.highlights-grid { margin-top: 2.5rem; gap: 1.25rem; }
.skills-grid { gap: 4rem; margin-top: 2.5rem; }
.beyond-grid { gap: 4rem; margin-top: 2.5rem; }
.about-cta-inner { gap: 2rem; margin-top: 2.5rem; }
.timeline { margin-top: 2.5rem; }
.timeline-item { padding-bottom: 3rem; }
.section-heading { margin-bottom: 1.5rem; }
.section-label { margin-bottom: 0.5rem; }
<?php
/**
 * page-speaking.php — Speaking & Events page template
 * WordPress loads this automatically for the page with slug "speaking".
 */
get_header();
nk_breadcrumb();
?>

<main id="main-content">
  <div class="page-wrap" style="background:var(--gray-50);padding-block:clamp(2rem,4vw,3.5rem) clamp(3rem,6vw,5rem);">
    <div class="container">
      <div class="page-inner speaking-layout">

        <!-- MAIN COLUMN -->
        <div class="main-col">

          <h1 class="page-heading" style="font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:800;letter-spacing:-0.03em;margin-bottom:1.5rem;position:relative;padding-bottom:0.5rem;">
            Speaking &amp;&nbsp;Events
          </h1>

          <p class="page-intro" style="font-size:var(--text-lg);color:var(--gray-600);line-height:1.75;margin-bottom:2rem;max-width:68ch;">
            I speak internationally on <strong>technical SEO</strong>, <strong>AI visibility</strong>, <strong>digital strategy</strong>, and <strong>full-funnel growth</strong>. I also run <strong>in-house workshops</strong> for teams who want to go deeper.
          </p>

          <!-- Speaker reel -->
          <div class="reel-wrap" aria-label="Speaker reel video" style="background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;margin-bottom:2.5rem;box-shadow:var(--shadow-sm);">
            <?php
            // REPLACE with real embed when reel URL is available:
            // echo '<iframe loading="lazy" width="760" height="427"
            //   src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
            //   frameborder="0" allowfullscreen style="width:100%;aspect-ratio:16/9;display:block;"></iframe>';
            ?>
            <div style="aspect-ratio:16/9;background:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--white);">
              <div style="font-size:3rem;opacity:0.6;" aria-hidden="true">&#9654;</div>
              <p style="font-size:var(--text-sm);font-weight:600;opacity:0.5;letter-spacing:0.06em;text-transform:uppercase;">Speaker reel — coming soon</p>
            </div>
          </div>

          <!-- Testimonials -->
          <section aria-labelledby="testimonials-heading" style="margin-bottom:2.5rem;">
            <h2 style="font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;margin-bottom:1.25rem;" id="testimonials-heading">What do people say?</h2>
            <?php
            // ADD testimonials here using the pattern below.
            // Duplicate the .testimonial block for each quote.
            // Replace 🙂 with <img src="..." loading="lazy" decoding="async" alt="[Name]">
            ?>
            <div style="background:var(--green-dim);border:1.5px dashed var(--green-panel-border);border-radius:var(--radius);padding:1.5rem;font-size:var(--text-sm);color:var(--gray-600);">
              <strong style="color:var(--green-dark);">📝 Add testimonials here.</strong> Ask event organisers for a quote and replace this block with the <code>.testimonial</code> pattern. See the mockup HTML for the full component.
            </div>
          </section>

          <!-- Book me CTA -->
          <div style="margin-bottom:2.5rem;">
            <a href="#enquiry" style="display:block;width:100%;padding:1.125rem 2rem;background:var(--green);color:var(--white);border-radius:var(--radius-sm);border:none;font-family:var(--font-sans);font-size:var(--text-base);font-weight:700;text-align:center;text-decoration:none;transition:background 0.15s,transform 0.15s;">
              📩 Enquire about speaking at your event
            </a>
          </div>

          <!-- Upcoming events (from speaking_event CPT) -->
          <section aria-labelledby="upcoming-heading" style="margin-bottom:2.5rem;">
            <h2 style="font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;margin-bottom:1.25rem;position:relative;padding-bottom:0.5rem;" id="upcoming-heading">
              <span aria-hidden="true">📅</span> Upcoming events I&rsquo;ll be speaking at
            </h2>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
              <?php
              $events = nk_get_upcoming_speaking_events( 6 );
              if ( $events ) :
                foreach ( $events as $event ) :
                  $name     = esc_html( get_post_meta( $event->ID, 'event_name', true ) ?: get_the_title( $event ) );
                  $date     = esc_html( get_post_meta( $event->ID, 'event_date', true ) );
                  $location = esc_html( get_post_meta( $event->ID, 'event_location', true ) );
                  $url      = esc_url( get_post_meta( $event->ID, 'event_url', true ) );
              ?>
                <article class="event-card">
                  <h3 class="event-name"><?php echo $name; ?></h3>
                  <?php if ( $date ) : ?><p class="event-date"><?php echo $date; ?></p><?php endif; ?>
                  <?php if ( $location ) : ?><p class="event-location"><?php echo $location; ?></p><?php endif; ?>
                  <?php if ( $url ) : ?><a class="event-register" href="<?php echo $url; ?>" target="_blank" rel="noopener noreferrer">Event details ↗</a><?php endif; ?>
                </article>
              <?php endforeach;
              else : ?>
                <p style="font-size:var(--text-sm);color:var(--gray-600);grid-column:1/-1;">No upcoming events scheduled — check back soon or <a href="#enquiry" style="color:var(--green-dark);text-decoration:underline;">get in touch</a>.</p>
              <?php endif; ?>
            </div>
          </section>

          <!-- Talk topics -->
          <section aria-labelledby="topics-heading" style="margin-bottom:2.5rem;">
            <h2 style="font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;margin-bottom:1.25rem;" id="topics-heading">
              <span aria-hidden="true">🎤</span> What I speak about
            </h2>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
              <?php
              $topics = [
                [ '🤖', 'AI Visibility &amp; LLM Strategy', 'How brands position themselves as AI models like ChatGPT and Gemini reshape discovery. Measuring and influencing brand visibility in AI-generated responses.' ],
                [ '⚙️', 'Technical SEO', 'Core Web Vitals, crawlability, site architecture, and the technical foundations that determine whether your content reaches the people searching for it.' ],
                [ '📊', 'Full-Funnel Growth &amp; Analytics', 'Connecting organic performance to revenue outcomes. Building measurement frameworks that reflect what actually drives business growth.' ],
                [ '🌏', 'International &amp; Enterprise SEO', 'Scaling digital strategy across markets and complex organisational structures — with case studies from Sportsbet, Alibaba, and Zendesk.' ],
              ];
              foreach ( $topics as $t ) : ?>
                <div style="background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm);">
                  <div style="font-size:1.5rem;margin-bottom:0.625rem;" aria-hidden="true"><?php echo $t[0]; ?></div>
                  <h3 style="font-size:var(--text-base);font-weight:800;margin-bottom:0.375rem;"><?php echo $t[1]; ?></h3>
                  <p style="font-size:var(--text-sm);color:var(--gray-600);line-height:1.65;"><?php echo $t[2]; ?></p>
                </div>
              <?php endforeach; ?>
            </div>
          </section>

          <!-- Workshops -->
          <section aria-labelledby="workshops-heading" style="background:var(--green-panel);border:1px solid var(--green-panel-border);border-radius:var(--radius);padding:1.5rem;margin-bottom:2.5rem;">
            <h2 id="workshops-heading" style="font-size:var(--text-xl);font-weight:800;margin-bottom:0.75rem;">
              <span aria-hidden="true">🏢</span> Workshops &amp; in-house training
            </h2>
            <p style="font-size:var(--text-sm);color:var(--gray-600);line-height:1.7;margin-bottom:1rem;">Hands-on sessions for in-house teams focused on what your team can act on immediately.</p>
            <ul style="display:flex;flex-direction:column;gap:0.5rem;">
              <?php
              $workshops = [
                'AI visibility and brand presence in LLM-generated responses',
                'Technical SEO auditing and prioritisation frameworks',
                'Full-funnel analytics and measurement strategy',
                'SEO and product team collaboration',
                'Building internal SEO capability and culture',
              ];
              foreach ( $workshops as $w ) : ?>
                <li style="font-size:var(--text-sm);color:var(--black);padding-left:1.25rem;position:relative;">
                  <span style="position:absolute;left:0;color:var(--green);font-size:0.7rem;top:0.2rem;">&#8599;</span>
                  <?php echo esc_html( $w ); ?>
                </li>
              <?php endforeach; ?>
            </ul>
          </section>

          <!-- Past events -->
          <section aria-labelledby="past-heading" style="margin-bottom:2.5rem;">
            <h2 style="font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;margin-bottom:1.25rem;" id="past-heading">
              <span aria-hidden="true">📅</span> Past events I&rsquo;ve spoken at
            </h2>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
              <?php
              // Fetch past speaking events — date before today, most recent first
              $past_events = get_posts( [
                'post_type'      => 'speaking_event',
                'posts_per_page' => 20,
                'post_status'    => 'publish',
                'meta_key'       => 'event_date',
                'meta_value'     => date( 'Y-m-d' ),
                'meta_compare'   => '<',
                'orderby'        => 'meta_value',
                'order'          => 'DESC',
              ] );
              if ( $past_events ) :
                foreach ( $past_events as $event ) :
                  $name     = esc_html( get_post_meta( $event->ID, 'event_name', true ) ?: get_the_title( $event ) );
                  $date     = esc_html( get_post_meta( $event->ID, 'event_date', true ) );
                  $location = esc_html( get_post_meta( $event->ID, 'event_location', true ) );
                  $url      = esc_url( get_post_meta( $event->ID, 'event_url', true ) );
              ?>
                <article class="event-card">
                  <h3 class="event-name"><?php echo $name; ?></h3>
                  <?php if ( $date ) : ?><p class="event-date"><?php echo $date; ?></p><?php endif; ?>
                  <?php if ( $location ) : ?><p class="event-location"><?php echo $location; ?></p><?php endif; ?>
                  <?php if ( $url ) : ?><a class="event-url" href="<?php echo $url; ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html( parse_url( get_post_meta( $event->ID, 'event_url', true ), PHP_URL_HOST ) ); ?></a><?php endif; ?>
                </article>
              <?php endforeach;
              else : ?>
                <p style="font-size:var(--text-sm);color:var(--gray-400);grid-column:1/-1;font-style:italic;">Past events will appear here — add them via the WordPress admin under Speaking Events.</p>
              <?php endif; ?>
            </div>
          </section>

          <!-- ENQUIRY FORM -->
          <section id="enquiry" aria-labelledby="enquiry-heading" style="margin-bottom:2rem;">
            <h2 style="font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;margin-bottom:0.75rem;" id="enquiry-heading">
              <span aria-hidden="true">📩</span> Speaking enquiry
            </h2>
            <p style="font-size:var(--text-sm);color:var(--gray-600);margin-bottom:1.5rem;line-height:1.7;">Interested in having me speak or run a workshop? Fill in the form below and I&rsquo;ll get back to you within a few business days.</p>

            <div style="background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow-sm);">
              <?php
              // FORM SUBMISSION HANDLING
              // In production: use Contact Form 7 or WPForms with Turnstile add-on.
              // The nk_verify_turnstile() function in functions.php handles server-side token verification.
              // Alternatively, process manually:

              if ( isset( $_POST['nk_enquiry_nonce'] ) && wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['nk_enquiry_nonce'] ) ), 'nk_speaking_enquiry' ) ) {
                $token = sanitize_text_field( wp_unslash( $_POST['cf-turnstile-response'] ?? '' ) );
                if ( nk_verify_turnstile( $token ) ) {
                  // Turnstile passed — process form
                  // Send email to admin
                  $name    = sanitize_text_field( wp_unslash( $_POST['enquiry_name'] ?? '' ) );
                  $org     = sanitize_text_field( wp_unslash( $_POST['enquiry_org'] ?? '' ) );
                  $email   = sanitize_email( wp_unslash( $_POST['enquiry_email'] ?? '' ) );
                  $type    = sanitize_text_field( wp_unslash( $_POST['enquiry_type'] ?? '' ) );
                  $event   = sanitize_text_field( wp_unslash( $_POST['enquiry_event'] ?? '' ) );
                  $edate   = sanitize_text_field( wp_unslash( $_POST['enquiry_date'] ?? '' ) );
                  $message = sanitize_textarea_field( wp_unslash( $_POST['enquiry_message'] ?? '' ) );

                  $body  = "Name: {$name}\nOrg: {$org}\nEmail: {$email}\nType: {$type}\n";
                  $body .= "Event: {$event}\nDate: {$edate}\n\nMessage:\n{$message}";

                  wp_mail( get_option( 'admin_email' ), "Speaking enquiry from {$name}", $body );
                  echo '<div style="background:var(--green-light);border:1px solid var(--green-panel-border);border-radius:var(--radius-sm);padding:1rem 1.25rem;font-size:var(--text-sm);color:var(--green-dark);font-weight:600;margin-bottom:1.5rem;">✓ Thanks — I&rsquo;ll be in touch within a few business days.</div>';
                } else {
                  echo '<div style="background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-sm);padding:1rem 1.25rem;font-size:var(--text-sm);color:#dc2626;font-weight:600;margin-bottom:1.5rem;">Security check failed. Please try again.</div>';
                }
              }
              ?>

              <form method="post" action="#enquiry" aria-label="Speaking enquiry form">
                <?php wp_nonce_field( 'nk_speaking_enquiry', 'nk_enquiry_nonce' ); ?>

                <div class="form-row form-row-2col">
                  <div class="form-group">
                    <label class="form-label" for="enquiry-name">Name <span class="required" aria-hidden="true">*</span></label>
                    <input class="form-input" type="text" id="enquiry-name" name="enquiry_name" required aria-required="true" autocomplete="name" placeholder="Jane Smith">
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="enquiry-org">Organisation</label>
                    <input class="form-input" type="text" id="enquiry-org" name="enquiry_org" autocomplete="organization" placeholder="Acme Co.">
                  </div>
                </div>

                <div class="form-row form-row-2col">
                  <div class="form-group">
                    <label class="form-label" for="enquiry-email">Email <span class="required" aria-hidden="true">*</span></label>
                    <input class="form-input" type="email" id="enquiry-email" name="enquiry_email" required aria-required="true" autocomplete="email" placeholder="jane@acme.com">
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="enquiry-type">Type <span class="required" aria-hidden="true">*</span></label>
                    <select class="form-select" id="enquiry-type" name="enquiry_type" required>
                      <option value="" disabled selected>Select one…</option>
                      <option value="conference-keynote">Conference keynote</option>
                      <option value="panel">Panel or roundtable</option>
                      <option value="workshop-inhouse">In-house workshop</option>
                      <option value="webinar">Webinar or online event</option>
                      <option value="podcast">Podcast or interview</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                </div>

                <div class="form-row form-row-2col">
                  <div class="form-group">
                    <label class="form-label" for="enquiry-event">Event name</label>
                    <input class="form-input" type="text" id="enquiry-event" name="enquiry_event" placeholder="Event or conference name">
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="enquiry-date">Event date</label>
                    <input class="form-input" type="date" id="enquiry-date" name="enquiry_date">
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label" for="enquiry-message">Tell me about the event <span class="required" aria-hidden="true">*</span></label>
                    <textarea class="form-textarea" id="enquiry-message" name="enquiry_message" required aria-required="true" placeholder="Audience size, topic areas, format, anything helpful…"></textarea>
                  </div>
                </div>

                <!-- Cloudflare Turnstile -->
                <div class="cf-turnstile" data-sitekey="<?php echo defined('TURNSTILE_SITE_KEY') ? esc_attr( TURNSTILE_SITE_KEY ) : 'YOUR_TURNSTILE_SITE_KEY'; ?>" data-theme="light"></div>

                <div style="margin-top:1.25rem;">
                  <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">Send enquiry</button>
                </div>

                <p class="form-note">Your information is used only to respond to your enquiry and is never shared. See the <a href="<?php echo esc_url( home_url( '/privacy/' ) ); ?>">privacy policy</a>.</p>
              </form>
            </div>
          </section>

        </div><!-- /.main-col -->

        <!-- SIDEBAR -->
        <aside class="sidebar" style="position:sticky;top:80px;" aria-label="Sidebar">

          <section style="margin-bottom:2rem;">
            <h2 class="sidebar-heading">I&rsquo;m speaking at&hellip;</h2>
            <?php
            $upcoming = nk_get_upcoming_speaking_events( 3 );
            if ( $upcoming ) :
              foreach ( $upcoming as $event ) :
                $name     = esc_html( get_post_meta( $event->ID, 'event_name', true ) ?: get_the_title( $event ) );
                $date     = esc_html( get_post_meta( $event->ID, 'event_date', true ) );
                $location = esc_html( get_post_meta( $event->ID, 'event_location', true ) );
                $url      = esc_url( get_post_meta( $event->ID, 'event_url', true ) );
            ?>
              <article class="sidebar-event">
                <p class="sidebar-event-name"><?php echo $name; ?></p>
                <?php if ( $date ) : ?><span class="sidebar-event-date"><?php echo $date; ?></span><?php endif; ?>
                <?php if ( $location ) : ?><span class="sidebar-event-loc"><?php echo $location; ?></span><?php endif; ?>
                <?php if ( $url ) : ?><a class="sidebar-event-url" href="<?php echo $url; ?>" target="_blank" rel="noopener"><?php echo esc_html( parse_url( get_post_meta( $event->ID, 'event_url', true ), PHP_URL_HOST ) ); ?></a><?php endif; ?>
              </article>
            <?php endforeach;
            else : ?>
              <p style="font-size:var(--text-sm);color:var(--gray-400);">No upcoming events yet.</p>
            <?php endif; ?>
          </section>

          <?php
          $recent = get_posts( [ 'numberposts' => 2, 'post_status' => 'publish' ] );
          if ( $recent ) : ?>
            <section>
              <h2 class="sidebar-heading">Recent posts&hellip;</h2>
              <?php foreach ( $recent as $post ) :
                setup_postdata( $post ); ?>
                <article class="sidebar-post card" style="margin-bottom:0.75rem;">
                  <div class="sidebar-post-body" style="padding:0.875rem 1rem;">
                    <a href="<?php the_permalink( $post ); ?>" class="sidebar-post-title"><?php echo esc_html( get_the_title( $post ) ); ?></a>
                    <p class="sidebar-post-date"><?php echo esc_html( get_the_date( 'j M Y', $post ) ); ?></p>
                  </div>
                </article>
              <?php endforeach; wp_reset_postdata(); ?>
            </section>
          <?php endif; ?>

        </aside>

      </div><!-- /.page-inner -->
    </div>
  </div>
</main>

<?php get_footer(); ?>
/* Speaking & SEO Collective page layouts */
.speaking-layout,
.seo-collective-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .speaking-layout,
  .seo-collective-layout {
    grid-template-columns: 1fr;
  }
  .speaking-layout .sidebar,
  .seo-collective-layout .sidebar {
    position: static !important;
  }
}

/* SEO Collective page responsive grids */
.sc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.sc-3col { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 700px) {
  .sc-2col { grid-template-columns: 1fr; }
  .sc-3col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sc-3col { grid-template-columns: repeat(2,1fr); }
}

.sc-hero { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: center; }
@media (max-width: 700px) { .sc-hero { grid-template-columns: 1fr; } }

/* City card row gap fix on mobile */
@media (max-width: 700px) {
  .sc-3col { row-gap: 1.5rem; }
}

/* Header CTA button — white text */
.primary-nav .btn-primary { color: var(--white); }
.primary-nav .btn-primary:hover { color: var(--white); }

/* Header CTA — force white text */
.primary-nav__cta .btn-primary,
.primary-nav__cta .btn-primary:hover { color: var(--white) !important; }

/* Fix CTA button — primary-nav a rule overrides btn color */
.primary-nav a.btn-primary,
.primary-nav a.btn-primary:hover { color: var(--white) !important; }



/* ============================================================
   MOBILE NAV — checkbox toggle (no JavaScript)
============================================================ */

/* Hide the checkbox but keep it interactive — sits over the label */
.nav-toggle-control {
  position: absolute;
  top: 10px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  cursor: pointer;
  opacity: 0;
  z-index: 200;
  -webkit-touch-callout: none;
  display: none;
}

/* Burger label — hidden on desktop */
.nav-toggle-label {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 10px 9px;
}

.burger-bar {
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 5px;
  background: var(--black);
  border-radius: 2px;
  transform-origin: 4px 0;
  transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1),
              background 0.3s cubic-bezier(0.77,0.2,0.05,1),
              opacity 0.35s ease;
}

.burger-bar--1 { transform-origin: 0% 0%; }
.burger-bar--3 { transform-origin: 0% 100%; }

/* X animation when checked */
.nav-toggle-control:checked ~ .nav-toggle-label .burger-bar--1 {
  transform: rotate(45deg) translate(1px, -3px);
}
.nav-toggle-control:checked ~ .nav-toggle-label .burger-bar--2 {
  opacity: 0;
  transform: scale(0.2);
}
.nav-toggle-control:checked ~ .nav-toggle-label .burger-bar--3 {
  transform: rotate(-45deg) translate(-1px, 1px);
}

@media (max-width: 768px) {
  /* Show burger controls */
  .nav-toggle-control { display: block; }
  .nav-toggle-label { display: flex; flex-direction: column; justify-content: center; }

  /* Hide nav items by default on mobile */
  #primary-nav .primary-nav__items { display: none; }

  /* Show nav when checkbox checked */
  #primary-nav .nav-toggle-control:checked ~ .nav-toggle-label ~ .primary-nav__items {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 0 var(--gutter) 1.25rem;
    z-index: 99;
    gap: 0;
    list-style: none;
    margin: 0;
  }

  #primary-nav .nav-toggle-control:checked ~ .nav-toggle-label ~ .primary-nav__items li a {
    display: block;
    padding: 0.875rem 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--black);
    border-bottom: 1px solid var(--gray-100);
    text-decoration: none;
  }

  #primary-nav .nav-toggle-control:checked ~ .nav-toggle-label ~ .primary-nav__items .primary-nav__cta {
    border-bottom: none;
    padding-top: 1rem;
  }

  #primary-nav .nav-toggle-control:checked ~ .nav-toggle-label ~ .primary-nav__items .primary-nav__cta a {
    display: block;
    text-align: center;
    border-bottom: none;
    color: var(--white) !important;
    border-radius: var(--radius-sm);
  }
}

/* Homepage hero — photo left, content right */
.hero-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: top center;
  box-shadow: var(--shadow);
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-img-col { order: -1; }
  .hero-photo { max-width: 100%; max-height: 400px; object-fit: cover; }
}


/* ============================================================
   HOMEPAGE LAYOUT
============================================================ */

/* Hero */
.hero-section .hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.hero-blog-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hero-blog-heading {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.hero-blog-heading::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 3px;
  bottom: -4px;
  left: 0;
  background-image: linear-gradient(to right, rgba(47,122,39,0.5), rgba(0,0,0,0));
}
.hero-post-card { display: block; padding: 1rem; text-decoration: none; }

/* Profile */
.profile-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: center;
}
.profile-photo {
  width: 280px;
  height: 280px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: top center;
  box-shadow: var(--shadow);
  border: 3px solid var(--green-panel-border);
  display: block;
}

/* Brand strip centred */
.brand-strip { justify-content: center; }

/* Three pillars 3-col */
.whatido-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* Mobile */
@media (max-width: 860px) {
  .hero-section .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .profile-inner { grid-template-columns: 1fr; gap: 2rem; }
  .profile-photo-col { order: -1; }
  .profile-photo { max-width: 100%; }
  .whatido-grid--3col { grid-template-columns: 1fr; }
}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:1rem}.vid-card{background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s}.vid-card:hover{border-color:var(--green)}.vid-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}.vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.vid-play-btn{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.65);display:flex;align-items:center;justify-content:center}.vid-info{padding:10px 12px 12px}.vid-channel{font-size:var(--text-xs);font-weight:600;color:var(--gray-600);margin:0}.event-talk-title{font-size:var(--text-sm);color:var(--gray-600);margin:0.25rem 0 0;line-height:1.5}.event-type-badge{display:inline-block;font-size:var(--text-xs);font-weight:700;padding:0.2rem 0.625rem;border-radius:100px;background:var(--green-light);color:var(--green-dark);border:1px solid var(--green-panel-border);margin:0.5rem 0}.event-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.5rem}.event-register,.event-deck{font-size:var(--text-xs);font-weight:700;color:var(--green-dark);text-decoration:underline}
/* ============================================================
   DARK MODE
============================================================ */
@media (prefers-color-scheme: dark) {

  /* Header — dark background */
  .site-header {
    background: rgba(18,18,18,0.95);
    border-bottom-color: rgba(255,255,255,0.08);
  }

  /* Burger bars — white on dark header */
  .burger-bar {
    background: var(--white);
  }

  /* Speaking section — darken the white image overlay so text is readable */
  .section.section--alt[aria-labelledby="speaking-heading"] {
    background-image: linear-gradient(rgba(0,0,0,0.72),rgba(0,0,0,0.72)),url(https://nikranger.com/wp-content/uploads/2026/04/smx-stage.jpeg) !important;
  }

  /* Speaking section text — dark over the now-dark overlay */
  .section.section--alt[aria-labelledby="speaking-heading"] .section-label,
  .section.section--alt[aria-labelledby="speaking-heading"] .section-heading,
  .section.section--alt[aria-labelledby="speaking-heading"] .about-snippet__body {
    color: var(--white);
  }

  .section.section--alt[aria-labelledby="speaking-heading"] .btn-outline {
    color: var(--white);
    border-color: rgba(255,255,255,0.5);
  }

}