/* WNM Leadership 50
 * Gold hero, light page, navy text (Option C, DECISIONS #137). Headings and body text inherit the
 * site's fonts; the wide slanted face is only for dates and short labels.
 * Everything is scoped under .l50 so the theme's styles don't leak in or out. */

@font-face {
	font-family: "L50 Michroma";
	src: url("../fonts/michroma.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.l50 {
	/* Option C: gold hero, light page (DECISIONS #137). Every colour lives here. */
	--l50-navy: #081423;
	--l50-navy-3: #18304d;
	--l50-gold: #f2c94c;
	--l50-gold-soft: #f6da86;
	--l50-gold-dark: #7a6a3a;
	--l50-on: #f4f1ea;
	--l50-muted: #3a4252;
	--l50-line: rgba(8, 20, 35, .16);
	--l50-card-bg: #fffdf7;
	--l50-card-line: rgba(8, 20, 35, .1);
	--l50-card-muted: #5b5e66;
	--l50-card-shadow: 0 24px 50px -28px rgba(8, 20, 35, .45);
	--l50-ghost-line: rgba(8, 20, 35, .25);
	--l50-stone: #e5dfda;
	--l50-stone-muted: #4a4f58;
	--l50-paper: #f3f1ee;
	--l50-paper-line: #d6d0c4;
	--l50-paper-muted: #5b5e66;
	--l50-row-next: rgba(242, 201, 76, .45);
	--l50-ring-on: rgba(8, 20, 35, .35);
	--l50-ring-off: rgba(8, 20, 35, 0);
	--l50-shadow: rgba(8, 20, 35, .35);
	--l50-hover-ink: rgba(8, 20, 35, .08);
	--l50-tick-strong: #3a4252;
	--l50-mark: "L50 Michroma", "Eurostile", "Arial Black", sans-serif;
	--l50-gutter: clamp(18px, 4vw, 40px);

	--l50-kicker: var(--l50-navy);
	background: var(--l50-gold);
	color: var(--l50-navy);
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.l50 *, .l50 *::before, .l50 *::after { box-sizing: inherit; }
.l50 :where(h1, h2, h3, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; }
.l50 :where(h1, h2, h3) { color: inherit; font-family: inherit; line-height: 1.15; text-wrap: balance; letter-spacing: 0; text-transform: none; }
.l50 :where(ul, ol) { list-style: none; }
.l50 img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.l50 a { color: inherit; }
.l50 [hidden] { display: none !important; }
.l50 :focus-visible { outline: 3px solid var(--l50-navy); outline-offset: 3px; }
.l50 .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* In WPBakery: the theme pads every row top and bottom; the element's row must be edge to edge, so this row drops that padding
 * (the only rule outside .l50, and it only matches a row that holds the element). The WNM header floats over the page, so the
 * page element clears it itself, the way the demo does. */
.vc_row.wpb_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .l50) { padding-block: 0 !important; }
.l50-page { padding-top: var(--header-h, 0px); }
/* the page keeps the theme's standard gap above the closing panel (the Home band row stays edge to edge) */
.vc_row.wpb_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .l50-page) { padding-bottom: var(--section-y, 96px) !important; }

.l50.l50-bleed { width: 100vw; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }

.l50-mark { font-family: var(--l50-mark); font-weight: 400; font-style: normal; display: inline-block; transform: skewX(-11deg); letter-spacing: .04em; }
.l50-kicker { font: 400 11px/1 var(--l50-mark); letter-spacing: .22em; text-transform: uppercase; color: var(--l50-kicker); }
.l50-label { font: 400 10px/1.2 var(--l50-mark); letter-spacing: .18em; text-transform: uppercase; color: var(--l50-muted); }
.l50-fine { font-size: 13px; color: var(--l50-muted); }

/* ---------- buttons ---------- */
.l50 .l50-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--l50-navy); color: var(--l50-gold);
	font-weight: 600; font-size: 15px; line-height: 1.2;
	padding: 14px 22px; border-radius: 8px; text-decoration: none; border: 0;
	transition: transform .15s ease, background-color .15s ease;
}
.l50 .l50-btn:hover { background: var(--l50-navy-3); color: var(--l50-gold); transform: translateY(-1px); }
.l50 .l50-btn svg { width: 18px; height: 18px; flex: none; }
.l50 .l50-btn.is-disabled:hover { background: transparent; color: var(--l50-muted); }
.l50 .l50-btn.is-disabled { background: transparent; color: var(--l50-muted); box-shadow: inset 0 0 0 1px var(--l50-ghost-line); cursor: default; transform: none; }
.l50 .l50-ghost {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	color: var(--l50-navy); font-weight: 500; font-size: 15px; line-height: 1.2;
	padding: 13px 18px; border-radius: 8px; text-decoration: none; background: transparent;
	box-shadow: inset 0 0 0 1px var(--l50-ghost-line);
}
.l50 .l50-ghost:hover { box-shadow: inset 0 0 0 1px var(--l50-navy); color: var(--l50-navy); }
.l50-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

/* live state: the button pulses */
.l50 .is-live .l50-btn, .l50 .is-soon .l50-btn { animation: l50-ring 1.8s infinite; }
@keyframes l50-ring { 0% { box-shadow: 0 0 0 0 var(--l50-ring-on); } 70%, 100% { box-shadow: 0 0 0 14px var(--l50-ring-off); } }

/* calendar menu */
.l50-cal { position: relative; }
.l50-cal summary { list-style: none; }
.l50-cal summary::-webkit-details-marker { display: none; }
.l50-cal summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.l50-cal-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--l50-paper); border-radius: 10px; padding: 6px; display: grid; box-shadow: 0 18px 40px -16px var(--l50-shadow); }
.l50 .l50-cal-menu a { color: var(--l50-navy); text-decoration: none; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.l50 .l50-cal-menu a:hover { background: var(--l50-hover-ink); }

/* pill */
.l50-pill { white-space: nowrap; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--l50-navy); color: var(--l50-gold); }
.is-live .l50-pill, .is-soon .l50-pill, .is-today .l50-pill { display: inline-flex; gap: 7px; align-items: center; }
.is-live .l50-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--l50-gold); animation: l50-blink 1.4s infinite; }
@keyframes l50-blink { 50% { opacity: .25; } }

/* avatar */
.l50-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--l50-gold); }
.l50-avatar--initials { display: grid; place-items: center; background: var(--l50-navy); color: var(--l50-gold); font-weight: 600; font-size: 18px; }

/* =========================================================
 * [l50_page]
 * ======================================================= */
.l50-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--l50-gutter); border-bottom: 1px solid var(--l50-line); font-size: 13px; font-weight: 500; color: var(--l50-muted); }
.l50-sub nav { display: flex; gap: 20px; }
.l50-sub .l50-sub-icon { height: 18px; width: auto; }
.l50-sub .l50-sub-logo { display: none; height: 30px; width: auto; }
.l50 .l50-sub a { text-decoration: none; }
.l50 .l50-sub a:hover { color: var(--l50-navy); text-decoration: underline; }

.l50-hero { position: relative; z-index: 2; padding: 56px var(--l50-gutter) 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 44px; align-items: center; max-width: 1240px; margin: 0 auto; }
.l50-hero-mark { position: relative; display: grid; gap: 22px; }
.l50-hero-mark img { width: min(520px, 100%); }
.l50 .l50-h1 { font-size: inherit; font-weight: inherit; line-height: 0; }
.l50 .l50-h1 img { display: block; }
.l50-hero-mark p { color: var(--l50-muted); font-size: 17px; max-width: 44ch; }

.l50-cards { position: relative; display: grid; }
.l50-card, .l50-next-item { --l50-muted: var(--l50-card-muted); --l50-line: var(--l50-card-line); --l50-kicker: var(--l50-gold-dark); }
.l50-card { position: relative; background: var(--l50-card-bg); color: var(--l50-navy); border-radius: 18px; padding: 26px; display: grid; gap: 18px; box-shadow: inset 0 0 0 1px var(--l50-card-line), var(--l50-card-shadow); }
.l50-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.l50-bigdate .l50-mark { text-transform: uppercase; font-size: clamp(40px, 6vw, 58px); line-height: 1; color: var(--l50-navy); }
.l50-bigdate em { color: var(--l50-navy); font-style: normal; }
.l50-when { display: grid; gap: 2px; font-size: 15px; color: var(--l50-muted); }
.l50-when b { color: var(--l50-navy); font-weight: 500; }
.l50-topic { font-size: 16px; color: var(--l50-navy); }
.l50-speaker { display: flex; gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid var(--l50-line); }
.l50-speaker > div { display: grid; gap: 3px; min-width: 0; }
.l50-speaker strong { font-size: 20px; font-weight: 600; line-height: 1.2; }
.l50 strong.is-tba { color: var(--l50-muted); font-style: italic; font-weight: 500; }
.l50-card .l50-btns > .l50-btn { flex: 1 1 200px; }
.l50-empty-title { font-size: 26px; font-weight: 600; line-height: 1.2; }

/* 50-minute ruler */
.l50-ruler-sec { max-width: 1240px; margin: 0 auto; padding: 44px var(--l50-gutter); border-top: 1px solid var(--l50-line); display: grid; gap: 22px; }
.l50-ruler-sec h2 { font-size: 24px; font-weight: 600; }
.l50-ruler { position: relative; height: 50px; }
.l50-ticks { position: absolute; inset: 0 0 auto 0; height: 26px; display: grid; grid-template-columns: repeat(var(--l50-total, 50), 1fr); align-items: end; }
.l50-ticks i { display: block; height: 10px; border-left: 1px solid var(--l50-line); }
.l50-ticks i:nth-child(5n+1) { height: 20px; border-color: var(--l50-tick-strong); }
.l50-segs { position: absolute; left: 0; right: 0; top: 34px; height: 8px; }
.l50-seg { position: absolute; top: 0; height: 8px; border-radius: 4px; background: var(--l50-navy); box-shadow: 0 0 0 2px var(--l50-gold); }
.l50-seg--0 { background: var(--l50-muted); }
.l50-seg--2 { background: var(--l50-navy-3); }
.l50-legend { display: flex; gap: 4px; font-size: 13px; color: var(--l50-muted); }
.l50-legend li { flex: var(--l50-share, 1) 1 0; min-width: 0; }
.l50-legend b { display: block; color: var(--l50-navy); font-size: 14px; font-weight: 600; }
.l50-legend span { display: block; }

/* pillars */
.l50-pillars { background: var(--l50-stone); box-shadow: 0 0 0 100vmax var(--l50-stone); clip-path: inset(0 -100vmax); max-width: 1240px; margin: 0 auto; padding: 8px var(--l50-gutter) 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.l50-ruler-sec + .l50-pillars { padding-top: 8px; }
.l50-hero + .l50-pillars { padding-top: 44px; }
.l50-pillar { display: grid; gap: 8px; align-content: start; }
.l50-pillar h2.l50-mark { color: var(--l50-navy); font-size: 20px; text-transform: uppercase; justify-self: start; }
.l50-pillar p { color: var(--l50-stone-muted); font-size: 15px; }

/* schedule */
.l50-sched { background: var(--l50-paper); color: var(--l50-navy); padding: 48px var(--l50-gutter); }
.l50-sched > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.l50-sched h2 { font-size: 26px; font-weight: 700; margin-bottom: 18px; color: var(--l50-navy); }
.l50-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--l50-paper-line); }
.l50-row:last-child { border-bottom: 1px solid var(--l50-paper-line); }
.l50-row.is-next { background: linear-gradient(90deg, var(--l50-row-next), transparent 70%); padding-left: 14px; margin-left: -14px; }
.l50-row-date { font-size: 22px; white-space: nowrap; color: var(--l50-navy); text-transform: uppercase; }
.l50-row-date small { display: block; font-size: 10px; letter-spacing: .18em; color: var(--l50-gold-dark); margin-bottom: 4px; }
.l50-row-who strong { display: block; font-size: 18px; font-weight: 600; }
.l50-row-who > span { font-size: 14px; color: var(--l50-paper-muted); }
.l50 .l50-row strong.is-tba { color: var(--l50-paper-muted); } /* AA: 5.75:1 on paper (the old grey was 2.95:1) */
.l50 .l50-row-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--l50-navy); color: var(--l50-on); font-weight: 600; font-size: 14px; padding: 11px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.l50 .l50-row-btn:hover { background: var(--l50-navy-3); color: var(--l50-on); }
.l50 .l50-row-btn svg { width: 16px; height: 16px; }
.l50 .l50-row-btn.is-disabled { background: transparent; color: var(--l50-paper-muted); box-shadow: inset 0 0 0 1px var(--l50-paper-line); }
.l50-sched-empty { color: var(--l50-paper-muted); }

/* verse */
.l50-verse { padding: 60px var(--l50-gutter); display: grid; gap: 14px; justify-items: center; text-align: center; }
.l50-verse blockquote { border: 0; background: none; color: inherit; }
.l50-verse blockquote p { font-size: clamp(22px, 3vw, 30px); line-height: 1.3; font-weight: 500; max-width: 30ch; text-wrap: balance; }
.l50-verse figcaption { font-size: 12px; letter-spacing: .2em; color: var(--l50-navy); text-transform: uppercase; }

@media (max-width: 900px) {
	.l50-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
}
/* phones: the Zoom button comes first */
@media (max-width: 640px) {
	.l50-sub nav { display: none; }
	.l50-hero { padding-top: 20px; padding-bottom: 40px; }
	/* the stacked logo is the page's H1: keep it for screen readers, the horizontal logo shows in the bar */
	.l50 .l50-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
	.l50-sub .l50-sub-icon { display: none; }
	.l50-sub .l50-sub-logo { display: block; }
	.l50-hero-mark p { font-size: 15px; }
	.l50-hero .l50-cards { order: -1; }
	.l50-hero-mark { order: 0; }
	.l50-card { padding: 20px; border-radius: 14px; }
	.l50-avatar { width: 52px; height: 52px; }
	.l50-legend { flex-direction: column; gap: 10px; }
	.l50-row { grid-template-columns: 1fr; gap: 8px; }
	.l50-row .l50-row-btn { justify-self: start; }
}

/* =========================================================
 * [l50_band] — homepage
 * ======================================================= */
.l50-band { position: relative; overflow: hidden; padding: 48px var(--l50-gutter); }
.l50-band-in { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.l50-band-copy { display: grid; gap: 16px; }
.l50-band-logo img { width: min(440px, 100%); display: block; }
.l50-band-copy p { color: var(--l50-muted); max-width: 46ch; }
.l50-next { display: grid; }
.l50-next-item { background: var(--l50-card-bg); color: var(--l50-navy); border-radius: 14px; padding: 20px; display: grid; gap: 14px; box-shadow: inset 0 0 0 1px var(--l50-card-line), var(--l50-card-shadow); }
.l50-next-row { display: flex; gap: 16px; align-items: center; }
.l50-datechip { flex: none; width: 76px; height: 76px; border-radius: 12px; background: var(--l50-navy); color: var(--l50-gold); display: grid; place-content: center; text-align: center; line-height: 1; }
.l50-datechip small { display: block; font: 400 10px/1 var(--l50-mark); letter-spacing: .16em; text-transform: uppercase; }
.l50-datechip .l50-mark { font-size: 28px; margin-top: 6px; }
.l50-next-who { display: grid; gap: 3px; min-width: 0; }
.l50-next-who strong { font-size: 18px; font-weight: 600; line-height: 1.25; }
.l50-next-who span { font-size: 14px; color: var(--l50-muted); }
@media (max-width: 820px) {
	.l50-band-in { grid-template-columns: 1fr; }
}

/* =========================================================
 * Ribbon
 * ======================================================= */
.l50-ribbon { position: relative; z-index: 999; font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--l50-line); }
.l50-ribbon-item { display: flex; align-items: center; justify-content: center; gap: 10px 12px; flex-wrap: wrap; padding: 9px var(--l50-gutter); text-align: center; font-weight: 500; }
.l50-ribbon-item img { height: 14px; width: auto; }
.l50 .l50-ribbon-item a { color: var(--l50-navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.l50 .l50-ribbon-item a:hover { text-decoration: underline; }
.l50-ribbon .l50-pill { padding: 4px 8px; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
	.l50 *, .l50 *::before { animation: none !important; transition: none !important; }
}