/*
 * CL27 sessions page styles. Everything is scoped under .cl27-sessions except
 * the minimal html/body reset below, which only affects this iframe document.
 *
 * Brand values were captured from https://conveningleaders.org on 2026-10-19:
 *   globals.css   = /wp-content/mu-plugins/pcma-globals/css/globals.css (PCMA global :root variables)
 *   fonts.css     = /wp-content/mu-plugins/pcma-globals/fonts/font-family.css (self-hosted Gabarito and Aptos)
 *   kit           = /wp-content/uploads/sites/45/elementor/css/post-19080.css (Elementor kit global colors)
 *   home          = /wp-content/uploads/sites/45/elementor/css/post-19091.css (home page Elementor styles)
 *   stack         = /wp-content/uploads/sites/45/lambda/stack-327.css (Lambda theme stack)
 */

html,
body {
  margin: 0;
  padding: 0;
  background: transparent;
}

body {
  /* flow-root keeps child margins inside body so its height can be measured for the iframe. */
  display: flow-root;
}

.cl27-sessions {
  /* Fonts */
  /* globals.css --pcma-headline-font: 'Gabarito'. Also used throughout home (font-family:"Gabarito"). Loaded from Google Fonts. */
  --cl27-font-heading: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* globals.css --pcma-body-font: 'Aptos'. Aptos is only self-hosted on the WordPress origin and is not on a
     public font service, so it is used when installed locally and otherwise falls back to a close system stack. */
  --cl27-font-body: "Aptos", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Colors */
  --cl27-dark-mauve: #590044;    /* globals.css --dark-mauve */
  --cl27-mid-mauve: #6F004F;     /* globals.css --mid-mauve */
  --cl27-light-mauve: #85165A;   /* globals.css --light-mauve; kit --e-global-color-422c2c1 */
  --cl27-purple: #4D3971;        /* kit --e-global-color-a0cf205; home headings and primary button fill */
  --cl27-navy: #164C76;          /* kit --e-global-color-5daefb6; home solid button fill */
  --cl27-headline: #283143;      /* globals.css --main-blue ("retained for headlines") */
  --cl27-text: #4C4C4C;          /* stack body text color */
  --cl27-link: #1D5F6F;          /* stack a{color:#1d5f6f}; kit --e-global-color-32a55c3 */
  --cl27-accent-blue: #589BD5;   /* home eyebrow headings; decorative only (2.97:1 on white, below AA for text) */
  --cl27-divider: #83A7FF;       /* home --divider-color; decorative only */
  --cl27-light-neutral: #F1E7E3; /* globals.css --light-neutral */
  --cl27-mid-neutral: #D2C3B9;   /* globals.css --mid-neutral */
  --cl27-light-teal: #60E5CF;    /* globals.css --light-teal */
  --cl27-border: #E7E7E7;        /* home card and container borders */
  --cl27-white: #FFFFFF;         /* globals.css --white */

  /* Shapes */
  --cl27-radius-pill: 50px;      /* home .elementor-button border-radius:50px */
  --cl27-radius-card: 8px;
  --cl27-line: 1.6;

  box-sizing: border-box;
  color: var(--cl27-text);
  font-family: var(--cl27-font-body);
  font-size: 1rem;
  line-height: var(--cl27-line);
  background: transparent;
  /* Centered column with a 10px inset from the iframe border (Steven, 2026-10-19). */
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.cl27-sessions *,
.cl27-sessions *::before,
.cl27-sessions *::after {
  box-sizing: inherit;
}

.cl27-sessions [hidden] {
  display: none !important;
}

.cl27-sessions .cl27-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Focus: visible on every interactive element. */
.cl27-sessions :focus-visible {
  outline: 3px solid var(--cl27-navy);
  outline-offset: 2px;
}

/* Intro */
.cl27-sessions .cl27-intro {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
}

/* Loading and empty states */
.cl27-sessions .cl27-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 1.25rem;
  border-radius: var(--cl27-radius-card);
  background: var(--cl27-light-neutral);
  color: var(--cl27-dark-mauve);
  font-size: 1.0625rem;
}

.cl27-sessions .cl27-spinner {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--cl27-mid-neutral);
  border-top-color: var(--cl27-purple);
  border-radius: 50%;
  animation: cl27-spin 0.9s linear infinite;
}

@keyframes cl27-spin {
  to { transform: rotate(360deg); }
}

/* Topic accordion: a purple bar per topic (A to Z, upper case); click to open its sessions. */
.cl27-sessions .cl27-topic {
  margin: 0 0 0.75rem;
  border-radius: var(--cl27-radius-card);
  background: var(--cl27-light-neutral);
  overflow: hidden;
  scroll-margin-top: 1rem;
}

.cl27-sessions .cl27-topic__heading {
  margin: 0;
}

.cl27-sessions .cl27-topic__toggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  background: var(--cl27-purple);
  color: var(--cl27-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cl27-sessions .cl27-topic__toggle:hover,
.cl27-sessions .cl27-topic.is-open .cl27-topic__toggle {
  background: var(--cl27-dark-mauve);
}

.cl27-sessions .cl27-topic__title {
  flex: 1 1 auto;
  font-family: var(--cl27-font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cl27-sessions .cl27-topic__count {
  flex: 0 0 auto;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.cl27-sessions .cl27-topic__chevron {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-25%, -25%);
  transition: transform 0.2s ease;
}

.cl27-sessions .cl27-topic.is-open .cl27-topic__chevron {
  transform: rotate(-135deg) translate(-25%, -25%);
}

.cl27-sessions .cl27-topic__sessions {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

/* Session card: white, rounded, lifted off the neutral panel. */
.cl27-sessions .cl27-session {
  padding: 1.25rem;
  border: 1px solid var(--cl27-border);
  border-top: 4px solid var(--cl27-light-mauve);
  border-radius: var(--cl27-radius-card);
  background: var(--cl27-white);
  box-shadow: 0 2px 8px rgba(40, 49, 67, 0.08), 0 1px 2px rgba(40, 49, 67, 0.06);
}

.cl27-sessions .cl27-session__title {
  margin: 0 0 1rem;
  color: var(--cl27-headline);
  font-family: var(--cl27-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Abstract */
.cl27-sessions .cl27-abstract__body p {
  margin: 0 0 0.75rem;
}

.cl27-sessions .cl27-abstract__body p:last-child {
  margin-bottom: 0;
}

.cl27-sessions .cl27-abstract__body.is-clamped {
  max-height: calc(var(--cl27-line) * 3em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.cl27-sessions .cl27-abstract__toggle {
  appearance: none;
  margin: 0.5rem 0 0;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--cl27-link);
  font-family: var(--cl27-font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cl27-sessions .cl27-abstract__toggle:hover {
  color: var(--cl27-purple);
}

/* Footer */
.cl27-sessions .cl27-updated {
  margin: 1.5rem 0 0;
  color: var(--cl27-text);
  font-size: 0.875rem;
}

.cl27-sessions .cl27-noscript {
  margin: 1rem 0;
}

/* Wider screens */
@media (min-width: 48em) {
  .cl27-sessions .cl27-topic__title {
    font-size: 1.5rem;
  }

  .cl27-sessions .cl27-topic__sessions {
    padding: 1.25rem;
  }

  .cl27-sessions .cl27-session {
    padding: 1.5rem 1.75rem;
  }

  .cl27-sessions .cl27-session__title {
    font-size: 1.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl27-sessions *,
  .cl27-sessions *::before,
  .cl27-sessions *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .cl27-sessions .cl27-spinner {
    border-top-color: var(--cl27-mid-neutral);
  }
}