/*
 * V2 comment round — hand-written CSS, loaded AFTER dist/app.css.
 *
 * Why a second stylesheet instead of editing assets/css/app.css: that file is the
 * Tailwind SOURCE and the site serves assets/css/dist/app.css, which is a compiled
 * bundle. There is no node/npm on the deploy machine, so anything added to the
 * source silently never reaches production. Everything here is plain CSS that
 * needs no build step.
 *
 * @package KennethKwan
 */

/* ------------------------------------------------------------------ *
 * Keynote coverflow — red glow on EVERY card
 *
 * Swiper's coverflow effect writes a descending inline z-index onto each slide
 * (active = 1, neighbours = 0, outer = -1). The negative values dropped the
 * outer cards below their neighbours, so a hover on the right-hand card landed
 * on the card next to it and the glow never fired — while the left-hand card,
 * earlier in the DOM, still received it. Normalise the stack and always lift
 * whichever slide the pointer is on.
 * ------------------------------------------------------------------ */
.kk-roadmap .swiper-slide { z-index: 1 !important; }
.kk-roadmap .swiper-slide.swiper-slide-active { z-index: 2 !important; }
.kk-roadmap .swiper-slide:hover,
.kk-roadmap .swiper-slide:focus-within { z-index: 3 !important; }

/* The glow lives on ::after inside the card; keep it above the image + scrim. */
.kk-hovercard:hover { z-index: 3; }

/* ------------------------------------------------------------------ *
 * Fluent Forms — confirmation message
 *
 * The plugin appends the success message to #fluentform_N_errors, which sits
 * AFTER the whole form. On the tall contact form that put the confirmation
 * roughly a screen below where the person was looking. Pull the message block
 * to the top of the form wrapper and make it read as a confirmation panel.
 * app.js scrolls it into view.
 * ------------------------------------------------------------------ */
/* The flex container has to be .fluentform (the shortcode's own wrapper): the
   <form> and the #fluentform_N_errors block are ITS children, not .kk-ff's. */
.kk-ff .fluentform { display: flex; flex-direction: column; }
.kk-ff .fluentform > .ff-errors-in-stack { order: -1; }
.kk-ff .ff-errors-in-stack:empty { display: none; }

.kk-ff .ff-message-success {
  margin: 0 0 1.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid rgba(255, 42, 57, 0.35);
  border-left: 3px solid #e11d2a;
  border-radius: 14px;
  background: rgba(225, 29, 42, 0.08);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
}
.kk-ff .ff-message-success p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Newsletter (Fluent Form 2) — one consent line, not two
 *
 * The form carries its own Terms & Conditions block with an italic blue
 * "Privacy Policy." that links to "#" (dead). The page already prints a red,
 * working consent line underneath, so the form's copy was a duplicate.
 * Hidden here; it should also be deleted in the form builder.
 * ------------------------------------------------------------------ */
.kk-ff form.fluent_form_2 .ff-el-tc { display: none; }

/* ------------------------------------------------------------------ *
 * Meeting Professionals — Process section balance
 *
 * The two photos ran to the full column width while the step cards next to
 * them are text-height, so the right-hand photo towered over the blocks it sat
 * beside. Cap the photo height and even out the gaps between blocks.
 * ------------------------------------------------------------------ */
.kk-proc-media {
  max-height: 300px;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 1024px) { .kk-proc-media { max-height: 260px; } }
@media (min-width: 1280px) { .kk-proc-media { max-height: 300px; } }

/* ------------------------------------------------------------------ *
 * About — pull quote (V2 design)
 * ------------------------------------------------------------------ */
.kk-pullquote { text-align: center; }
.kk-pullquote .kk-pullquote-mark {
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  color: #e11d2a;
  font-weight: 700;
}
.kk-pullquote blockquote {
  margin: 0.75rem auto 0;
  max-width: 46rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.kk-pullquote .kk-pullquote-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 1.75rem auto 1.5rem;
  background: #e11d2a;
}
.kk-pullquote .kk-pullquote-sub {
  margin: 0 auto;
  max-width: 34rem;
  font-style: italic;
  font-size: 0.975rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

/* Short red rule under a section heading (design reference).
   .h-label paints its text with a clipped gradient and a transparent
   text-fill-colour; both are reset here so the rule cannot inherit them and
   disappear. */
.kk-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 1rem;
  background: #e11d2a;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.kk-rule.kk-rule-center::after { margin-inline: auto; }

/* Paragraph separators in "The Person Behind the Stage" (design reference). */
.kk-storyblock > * + * { margin-top: 1.5rem; }
.kk-storyblock > * + *::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 1.5rem;
  background: rgba(225, 29, 42, 0.85);
}

/* ------------------------------------------------------------------ *
 * Utilities the compiled Tailwind bundle does not contain
 * ------------------------------------------------------------------ */
.kk-italic { font-style: italic; }
.kk-gap-14 { gap: 3.5rem; }
@media (min-width: 1024px) { .kk-lg-gap-20 { gap: 5rem; } }

/* Video card: the V2 thumbnails are designed artwork, so only a light wash sits
   over them — the compiled bundle has no bg-black/10 or group-hover:bg-black/0. */
.kk-video-wash {
  background: rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s ease;
  pointer-events: none;
}
.group:hover > .kk-video-wash { background: rgba(0, 0, 0, 0); }

/* ------------------------------------------------------------------ *
 * Speaking dropdown — width
 *
 * The markup asks for min-w-[310px], but that arbitrary value was never
 * compiled into dist/app.css (no npm on the build machine), so the panel
 * collapsed to its content width and every label wrapped: "Motivational
 * Speaker" alone took two lines and the menu ran off the screen.
 *
 * Set the width here instead, keep the topic name on one line, and let the
 * description wrap to at most two — so no row exceeds three lines.
 * ------------------------------------------------------------------ */
.kk-navdd { min-width: 320px; }

.kk-navitem > span:first-child {
  white-space: nowrap;      /* topic name never wraps */
}

.kk-navitem > span + span {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* description: 2 lines max, then ellipsis */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Credentials — card design from the client's V2 mockup
 *
 * Two changes from the shared image:
 *   1. The heading is sentence case there, but .h-label forces uppercase for
 *      every section title on the site. Opt out here only, so no other
 *      heading is affected.
 *   2. Cards in the mockup share one height per row; ours were content-height,
 *      so a two-line title left its neighbour visibly short.
 * ------------------------------------------------------------------ */
.kk-h-sentence { text-transform: none; }

/* Equal-height cards. The mockup keeps the description directly under the
   title (not pushed to the card's bottom edge), so only the card stretches —
   the text block stays at the top. */
.kk-cred-col { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.kk-cred-col > .kk-cred-card { flex: 1 1 0; }

/* Card interior: icon on the left, text column on the right. */
.kk-cred {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
}

.kk-cred-icon {
  flex: 0 0 auto;
  display: block;
  line-height: 0;          /* no baseline gap above the glyph */
}
.kk-cred-icon svg {
  width: 2.75rem;
  height: 2.75rem;
}

.kk-cred-body { min-width: 0; }   /* let long titles wrap instead of overflowing */

/* Short red rule between the title and the context line. */
.kk-cred-body > p {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  position: relative;
}
.kk-cred-body > p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.75rem;
  height: 2px;
  background: #e11d2a;
}

/* ------------------------------------------------------------------ *
 * About — Global Leadership Forum photo
 *
 * aspect-[9/10] is not in the compiled Tailwind bundle, so it silently did
 * nothing. The source is 1145x1374 (5:6); a 4/5 box clipped 4% off the frame,
 * cutting the stage edge and the second screen. 9/10 shows all of it, matching
 * the crop the client marked up.
 * ------------------------------------------------------------------ */
.kk-ratio-9-10 { aspect-ratio: 9 / 10; }

/* ------------------------------------------------------------------ *
 * Meeting Professionals — hero headline on small screens
 *
 * The H1 is `max-w-xl text-right` (36rem). On a 390px phone that is wider
 * than the viewport, so the words ran off the edge and back over Kenneth —
 * the very overlap the wider banner was meant to remove. Pre-dates this
 * round; fixed here because the brief was "text must not sit on him".
 *
 * Below 640px: let it use the full column and align left, over the dark
 * side of the frame. The right-aligned desktop treatment is untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .kk-mp-hero-title {
    /* Measured: at the 40px mobile h-display size "PROFESSIONALS" is 290px
       wide and the container gives ~326px, so the type already fits. The only
       real problem was max-w-xl (36rem) being wider than the viewport, which
       pushed the right-aligned text off-screen and back over Kenneth.
       Drop the cap and align left over the dark side. No font change needed. */
    max-width: 100%;
    text-align: left;
  }
  .kk-mp-hero-row { justify-content: flex-start; }
}