:root {
  --bg: #ffffff;
  --surface: #f7f4fb;
  --surface-2: #efe8f8;
  --text: #111111;
  --muted: #4b4b4b;
  --border: #d4c7ea;
  --accent: #6f3cc3;
  --accent-dark: #51239a;
  --focus: #7a2ce0;
  --success: #1d6b3a;
  --radius: 14px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --max: 1100px;
  --shadow: 0 8px 24px rgba(49, 22, 91, 0.08);
}


/* Portfolio detail pages */

body.portfolio-detail {
  padding-left: 0;
  padding-right: 0;
}

body.portfolio-detail main {
  margin-left: auto;
  margin-right: auto;
}

/* Hero / intro block for portfolio pages */

body.remote-onboarding .hero, 
body.portfolio-detail .hero,
body.ccnm-facilitator .hero,
body.ccnm-coaching-conflict .hero,
body.wp-process-explainer .hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8) 0;
  border-bottom: none; /* override any border from styles.css if you don’t want it */
}


/* Layout wrapper */

.wrap {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
}

/* Nav */

.nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  letter-spacing: .02em;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

/* Main page spacing */

main {
  padding: var(--space-8) 0 var(--space-12);
}

/* Hero / intro block (used on remote onboarding) */

.hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8) 0;
  border-bottom: none;
}

/* Remote onboarding page: add a single separator line under the hero */
.hero + section {
  border-top: 1px solid var(--border);
  padding-top: var(--space-8); /* keep spacing consistent */
}


.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: .4rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .95rem;
}

/* Headings */

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  margin: 0 0 var(--space-4);
}

/* Global paragraph width */

p {
  max-width: 70ch;
}

/* Facilitator page: allow body paragraphs to use the full container width */
body.ccnm-facilitator p {
  max-width: none;
}

/* Role-play page: allow body paragraphs to use full container width */
body.ccnm-coaching-conflict p {
  max-width: none;
}

/* Whisky explainer page: allow body paragraphs to use the full container width */
body.wp-process-explainer p {
  max-width: none;
}



/* Smaller, full-width note text for checklist page */
.note-full {
  font-size: 0.8rem;      /* ~80% of base 1rem body font */
  max-width: none;        /* override the 70ch limit */
  display: block;         /* ensure it behaves as a full-width block */
}

.module-section > p {
  max-width: none;
} 

.lead {
  font-size: 1.1rem;
  color: var(--muted);
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-secondary {
  background: #fff;
  color: var(--accent-dark);
}

/* Panels / cards */

.panel,
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel {
  padding: var(--space-6);
}

.meta {
  display: grid;
  gap: var(--space-3);
}

.meta div {
  padding: .85rem 1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Portfolio detail heading adjustments */

body.portfolio-detail h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

body.portfolio-detail h2 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Sections and grids */

section {
  padding: var(--space-8) 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-2 + .actions {
  margin-top: var(--space-4);
}

/* Topic plan cards under the facilitator guide */
.topic-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}

.topic-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: 1.05rem;
}

.topic-card h3 {
 margin-bottom: 0.5rem; /* space below the heading */
}

.topic-card p,
.topic-card ul {
  margin-bottom: 0.5rem; /* space below the explanation/list */
}

/* Extra space when a list is immediately followed by a label */
.topic-card ul + label,
.topic-card ol + label {
  margin-top: 1rem; /* adjust value to taste */
}

.topic-card ul,
.topic-card ol {
  margin: 0;
  padding-left: 1.2rem;
}

/* Add 6pt space above every list item except the first one */
.topic-card ol li + li {
  margin-top: 6pt;
}

/* Extra space when a list is immediately followed by a heading */
.topic-card ul + h3,
.topic-card ol + h3 {
  margin-top: 1rem; /* or whatever extra space you prefer */
}

.topic-card label {
  display: block;
  margin-bottom: 0.25rem; /* 4px between label and textarea */
}

.topic-card textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem; /* space before the next element */
}

.topic-card {
  padding-bottom: 0.5rem;
}

/* Consistent spacing when a topic-card grid is followed by a button */
.topic-card + .actions,
.topic-card + .btn,
.topic-card + button {
  margin-top: var(--space-4); /* adjust to match the textarea→button gap */
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.card {
  padding: var(--space-6);
}

ul.checks {
  padding-left: 1.2rem;
}

/* Tables */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  padding: .9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: var(--surface);
}

/* Details/summary blocks */

details {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  background: #fff;
}

details + details {
  margin-top: var(--space-3);
}

summary {
  cursor: pointer;
  min-height: 44px;
  padding: 1rem;
  font-weight: 700;
}

details div {
  padding: 0 1rem 1rem;
}

/* Remote onboarding module shell */

.module-shell {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: clip;
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}

.module-topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.progress {
  width: min(260px, 100%);
  height: 12px;
  background: #e6dbf6;
  border-radius: 999px;
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Example progress widths for the mockups */
.progress-2of9 {
  width: calc(2 / 9 * 100%);
}

.progress-7of9 {
  width: calc(7 / 9 * 100%);
}

.progress-8of9 {
  width: calc(8 / 9 * 100%);
}

/* Generic module container for portfolio detail pages */

.module {
  max-width: 70ch;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.module-header {
  margin-bottom: 2rem;
}

/* Section blocks within a module */

.module-section {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  /* For remote onboarding and checklist pages, this neutral border provides separation */
  border-top: 1px solid var(--border);
}

/* Facilitator page: dedicated accent divider element */

.divider-accent {
  border-top: 1px solid var(--accent);
  margin: 2rem 0 1.5rem;
}

/* Module body used by remote onboarding mockup */

.module-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  padding: var(--space-6);
}

.scenario {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-6);
}

.scenario-graphic img {
  max-width: 180px;  /* or 60px, 100px, etc. */
  height: auto;
  display: block;
}

.choices {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.choice {
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.choice:hover {
  border-color: var(--accent);
  background: #faf8fe;
}

.feedback {
  margin-top: var(--space-4);
  padding: 1rem;
  border-left: 5px solid var(--success);
  background: #f5fbf7;
  border-radius: 10px;
}

/* Feedback icon container */
.feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: var(--space-3);
}

.feedback.feedback-correct {
  border-left-color: var(--success);
  background: #e6f7ec;
}

.feedback.feedback-incorrect {
  border-left-color: #b3261e;
  background: #fdecea;
}

.feedback-icon img {
  display: block;
  width: 38px;
  height: 38px;
}


/* Space between actions and note when feedback appears */
.card form + .actions {
  margin-bottom: var(--space-3);
}

/* Extra space before design notes after interactive cards */
.card form + .note-full {
  margin-top: var(--space-3);  
}

.card .feedback + .note-full {
  margin-top: var(--space-4);
}


/* Excerpt text (if you use it) */

.excerpt-text p {
  max-width: none;
}

/* Footer */

.site-footer p {
  max-width: none;
}

/* Responsive tweaks */

@media (max-width: 860px) {
  .hero,
  .grid-2,
  .grid-3,
  .module-body {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .maturation-module .scenario {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* Facilitator page: remove extra top border on the first section after the hero */
body.ccnm-facilitator #overview + section {
  border-top: none;
}

/* Facilitator page: add space below Topic H3 headings before the next grid */
body.ccnm-facilitator h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* Facilitator page: Topic H2 headings to match case-study style */
body.ccnm-facilitator h2 {
  font-size: 2rem;         /* similar to your case-study subheadings */
  line-height: 1.4;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  font-weight: 700;          /* or 600 if you prefer slightly lighter */
} 

/* Role-play page: use a wider module so text fills the wrap column */
body.ccnm-coaching-conflict main {
  border-top: none;
}

body.ccnm-coaching-conflict .module {
  max-width: none;              /* let it use the full width of .wrap */
}

/* Role-play page: remove extra top border on the first section after the hero */
body.ccnm-coaching-conflict .hero + .module {
  border-top: none;
}

body.ccnm-coaching-conflict .hero + .module .module-section:first-of-type {
  border-top: none;
}

/* Role-play page: remove extra top border on the first module-section after the hero */
body.ccnm-coaching-conflict .hero + .module-section {
  border-top: none;
}

/* Role-play page: correct spacing when a grid of topic cards is followed by a button */
.grid-2 + .btn,
.grid-2 + button {
  margin-top: var(--space-2); 
}

/* Role-play page: add space below the Step 2 grid before the button */
body.ccnm-coaching-conflict .grid-2 {
  margin-bottom: var(--space-2);
}

/* Role-play page: tighten vertical padding on sections */
body.ccnm-coaching-conflict section {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* Whisky explainer page: remove extra top border on the first section after the hero */
body.wp-process-explainer #overview + section {
  border-top: none;
  
/* Whisky explainer page. Mockup base: small screens – text then image, scoped to maturation module */
/* Small screens: text then image */
.maturation-module .scenario {
  display: block;
}

.maturation-module .scenario-graphic {
  margin-top: 1rem;
  text-align: left;
}

.maturation-module .scenario-graphic img {
  max-width: 180px;   /* small barrel */
  height: auto;
  display: block;
}

/* Larger screens: image left, text right */
@media (min-width: 768px) {
  .maturation-module .scenario {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* Text first (left) */
  .maturation-module .scenario-text {
    order: 0;
    flex: 1 1 0;
  }
  
  /* Graphic second (right) */
  .maturation-module .scenario-graphic {
    order: 1;
    flex: 0 0 auto;
  }
}