/* =========================================================================
   SAMO 2028 — main.css
   BEM prefix: samo__
   Layout mirrors SAMO 2025: full-width banner + left sidebar menu + content.
   Mobile-first, fluid, structurally immune to zoom-out overflow.
   ========================================================================= */

:root {
	--samo-midnight: #0B1F3A;
	--samo-cobalt:   #2D6CDF;
	--samo-coral:    #FF5A4D;
	--samo-bg:       #F7F8FA;
	--samo-surface:  #FFFFFF;
	--samo-ink:      #1A1D24;
	--samo-muted:    #5B6472;
	--samo-line:     #E2E6EC;

	--samo-maxw: 1200px;
	--samo-sidebar-w: 240px;
	--samo-gutter: clamp(1rem, 3vw, 2.25rem);
	--samo-radius: 12px;
	--samo-shadow: 0 10px 30px -12px rgba(11, 31, 58, 0.18);

	--samo-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--samo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--samo-step-0: 1rem;
	--samo-step-1: clamp(1.15rem, 0.9rem + 1vw, 1.4rem);
	--samo-step-2: clamp(1.4rem, 1rem + 1.6vw, 1.9rem);
	--samo-step-3: clamp(1.7rem, 1.1rem + 2.2vw, 2.3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
	background: var(--samo-bg);
	color: var(--samo-ink);
	font-family: var(--samo-font-body);
	font-size: var(--samo-step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--samo-cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--samo-font-display);
	line-height: 1.15;
	color: var(--samo-midnight);
	margin: 0 0 0.5em;
	font-weight: 600;
}
p { margin: 0 0 1em; max-width: 72ch; }
:focus-visible { outline: 3px solid var(--samo-cobalt); outline-offset: 2px; }

/* =========================================================================
   Shell — centred frame that caps width (kills the zoom-out overflow bug)
   ========================================================================= */
.samo__shell {
	width: 100%;
	max-width: var(--samo-maxw);
	margin-inline: auto;
	background: var(--samo-surface);
	box-shadow: var(--samo-shadow);
}

/* ---- Skip link ---- */
.samo__skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--samo-midnight); color: #fff; padding: 0.75rem 1rem; z-index: 1000;
}
.samo__skip:focus { left: 1rem; top: 1rem; }

/* =========================================================================
   Banner (full width of the shell)
   ========================================================================= */
.samo__banner { background: var(--samo-surface); border-bottom: 1px solid var(--samo-line); }
.samo__banner-link { display: block; text-decoration: none; }
.samo__banner-link:hover { text-decoration: none; }
.samo__banner-img { width: 100%; height: auto; display: block; }

/* Text fallback banner — gradient with polygon motif feel */
.samo__banner-fallback {
	display: flex; flex-direction: column; gap: 0.25rem;
	padding: clamp(1.25rem, 4vw, 2rem) var(--samo-gutter);
	background: linear-gradient(115deg, var(--samo-midnight), #123 55%, #0d2748);
	color: #fff;
}
.samo__banner-mark { font-family: var(--samo-font-display); font-weight: 700; font-size: clamp(1.8rem, 1rem + 3vw, 2.8rem); }
.samo__banner-mark em { font-style: normal; color: var(--samo-coral); }
.samo__banner-sub { font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); text-transform: uppercase; font-size: 0.85rem; }

/* =========================================================================
   Mobile menu toggle
   ========================================================================= */
.samo__nav-toggle {
	display: flex; align-items: center; gap: 0.6rem; width: 100%;
	border: 0; border-bottom: 1px solid var(--samo-line);
	background: var(--samo-midnight); color: #fff;
	padding: 0.9rem var(--samo-gutter); font: inherit; font-weight: 600; cursor: pointer;
}
.samo__nav-toggle-bars { width: 18px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.samo__nav-toggle-bars::before, .samo__nav-toggle-bars::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.samo__nav-toggle-bars::before { top: -6px; }
.samo__nav-toggle-bars::after { top: 6px; }

/* =========================================================================
   Layout: sidebar + content
   ========================================================================= */
.samo__layout { display: block; }

/* ---- Sidebar nav ---- */
.samo__sidebar-nav {
	background: var(--samo-surface);
	border-bottom: 1px solid var(--samo-line);
	padding: 0.5rem var(--samo-gutter) 1.5rem;
	display: none; /* collapsed on mobile until toggled */
}
.samo__sidebar-nav.is-open { display: block; }

.samo__menu-title {
	font-family: var(--samo-font-body);
	font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--samo-muted);
	margin: 1.1rem 0 0.4rem;
	padding-bottom: 0.35rem; border-bottom: 2px solid var(--samo-coral);
}
.samo__menu { list-style: none; margin: 0; padding: 0; }
.samo__menu li { border-bottom: 1px solid var(--samo-line); }
.samo__menu a {
	display: block; padding: 0.62rem 0.4rem; color: var(--samo-ink); font-weight: 500;
	border-left: 3px solid transparent; padding-left: 0.6rem; transition: background 0.15s, border-color 0.15s;
}
.samo__menu a:hover { text-decoration: none; background: var(--samo-bg); border-left-color: var(--samo-cobalt); color: var(--samo-cobalt); }
.samo__menu .current-menu-item > a,
.samo__menu .current_page_item > a {
	background: var(--samo-midnight); color: #fff; border-left-color: var(--samo-coral); border-radius: 4px;
}
.samo__menu .current-menu-item > a:hover { color: #fff; }

.samo__help { margin-top: 1.25rem; }
.samo__help-link {
	display: inline-block; padding: 0.5rem 0.6rem; font-weight: 600; color: var(--samo-cobalt);
}

/* ---- Content ---- */
.samo__content {
	padding: clamp(1.5rem, 4vw, 2.5rem) var(--samo-gutter) clamp(2rem, 5vw, 3rem);
	min-width: 0; /* allow content to shrink, prevents overflow */
}

/* =========================================================================
   Page head (inside content)
   ========================================================================= */
.samo__page-head {
	border-bottom: 2px solid var(--samo-line);
	padding-bottom: 0.75rem; margin-bottom: 1.75rem;
}
.samo__page-head h1 { font-size: var(--samo-step-3); margin: 0; }
.samo__page-eyebrow { display: block; font-weight: 700; color: var(--samo-coral); margin-bottom: 0.35rem; }
.samo__page-meta { color: var(--samo-cobalt); font-weight: 600; font-size: var(--samo-step-1); margin: 0.35rem 0 0; }

/* =========================================================================
   Prose
   ========================================================================= */
.samo__prose h2 { font-size: var(--samo-step-2); margin-top: 1.6em; }
.samo__prose h3 { font-size: var(--samo-step-1); margin-top: 1.4em; }
.samo__prose img { border-radius: 10px; margin: 1.25rem 0; }
.samo__prose ul, .samo__prose ol { padding-left: 1.25rem; }
.samo__lead { font-size: var(--samo-step-1); color: var(--samo-muted); }

/* ---- Buttons ---- */
.samo__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	background: var(--samo-coral); color: #fff; border: 0; border-radius: 10px;
	padding: 0.75rem 1.3rem; font: inherit; font-weight: 600; cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}
.samo__btn:hover { background: #e64c40; text-decoration: none; transform: translateY(-1px); }
.samo__btn--dark { background: var(--samo-midnight); }
.samo__btn--dark:hover { background: #0a1a31; }

/* =========================================================================
   Home blocks
   ========================================================================= */
.samo__block { margin-bottom: 2rem; }
.samo__block-heading { font-size: var(--samo-step-2); margin-bottom: 0.75rem; }
.samo__eyebrow { font-weight: 700; color: var(--samo-cobalt); margin-bottom: 0.3rem; }

.samo__highlight {
	background: var(--samo-bg);
	border: 1px solid var(--samo-line);
	border-top: 4px solid var(--samo-coral);
	border-radius: var(--samo-radius);
	padding: clamp(1.25rem, 4vw, 2rem);
	margin-bottom: 2rem;
}
.samo__highlight h3 { font-size: var(--samo-step-2); }
.samo__highlight-sub { color: var(--samo-cobalt); font-weight: 600; font-size: var(--samo-step-1); margin: 0 0 0.75rem; }

/* =========================================================================
   Cards / grids
   ========================================================================= */
.samo__grid {
	display: grid; gap: clamp(1rem, 3vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.samo__card {
	background: var(--samo-surface); border: 1px solid var(--samo-line);
	border-radius: var(--samo-radius); overflow: hidden; display: flex; flex-direction: column;
}
.samo__card .samo__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.samo__img--placeholder {
	display: block; aspect-ratio: 3 / 2;
	background: radial-gradient(circle at 30% 30%, var(--samo-cobalt) 0 8px, transparent 9px),
		linear-gradient(135deg, #eef1f6, #e2e8f2);
}
.samo__card-body { padding: 1rem 1.15rem 1.25rem; }
.samo__card-title { font-size: var(--samo-step-1); margin-bottom: 0.25rem; }
.samo__card-meta { color: var(--samo-muted); font-size: 0.92rem; margin: 0; }
.samo__speaker .samo__img, .samo__speaker .samo__img--placeholder { aspect-ratio: 1 / 1; }

/* =========================================================================
   Dates
   ========================================================================= */
.samo__dates-group { margin-bottom: 2rem; }
.samo__dates-group h3 { font-size: var(--samo-step-2); margin-bottom: 0.75rem; }
.samo__dates-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.samo__date-row {
	display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline;
	background: var(--samo-surface); border: 1px solid var(--samo-line);
	border-left: 4px solid var(--samo-cobalt); border-radius: 8px; padding: 0.7rem 1rem;
}
.samo__date-when { font-weight: 700; color: var(--samo-midnight); min-width: 11ch; }
.samo__date-what { color: var(--samo-ink); }
.samo__date-row--passed { opacity: 0.55; border-left-color: var(--samo-muted); }
.samo__date-row--passed .samo__date-when,
.samo__date-row--passed .samo__date-what { text-decoration: line-through; }

/* =========================================================================
   Schedule
   ========================================================================= */
.samo__day { margin-bottom: 2.5rem; }
.samo__day h3 { font-size: var(--samo-step-2); margin-bottom: 1rem; }
.samo__session {
	display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: 0.35rem 1.1rem;
	padding: 0.9rem 1rem; background: var(--samo-surface); border: 1px solid var(--samo-line);
	border-radius: 10px; margin-bottom: 0.6rem;
}
.samo__session-time { font-weight: 700; color: var(--samo-cobalt); font-variant-numeric: tabular-nums; }
.samo__session-title { font-family: var(--samo-font-display); font-weight: 600; color: var(--samo-midnight); }
.samo__session-meta { grid-column: 2; color: var(--samo-muted); font-size: 0.92rem; }
.samo__session--break { background: #eef1f6; }
.samo__session--keynote { border-left: 4px solid var(--samo-coral); }

/* =========================================================================
   Sponsors
   ========================================================================= */
.samo__tier { margin-bottom: 2rem; }
.samo__tier h3 { font-size: var(--samo-step-1); color: var(--samo-muted); text-align: center; margin-bottom: 1rem; }
.samo__sponsors { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: center; }
.samo__sponsor {
	background: var(--samo-surface); border: 1px solid var(--samo-line); border-radius: 10px;
	padding: 1rem 1.5rem; display: grid; place-items: center; min-width: 130px; min-height: 84px;
}
.samo__sponsor img { max-height: 56px; width: auto; object-fit: contain; }

/* =========================================================================
   Content layout with optional quick-links sidebar (Rich Content page)
   ========================================================================= */
.samo__content-layout { display: grid; gap: 2rem; }
.samo__sidebar-box {
	background: var(--samo-bg); border: 1px solid var(--samo-line); border-radius: var(--samo-radius); padding: 1.1rem;
}
.samo__sidebar-box h4 { font-size: 1rem; }
.samo__sidebar-box ul { list-style: none; margin: 0; padding: 0; }
.samo__sidebar-box li { border-bottom: 1px solid var(--samo-line); }
.samo__sidebar-box li:last-child { border-bottom: 0; }
.samo__sidebar-box a { display: block; padding: 0.55rem 0; }

/* =========================================================================
   Footer
   ========================================================================= */
.samo__footer { background: var(--samo-midnight); color: rgba(255,255,255,0.85); padding: clamp(2rem, 5vw, 3rem) var(--samo-gutter); }
.samo__footer a { color: #fff; }
.samo__footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.samo__footer h4 { color: #fff; font-size: 1.05rem; }
.samo__footer ul { list-style: none; margin: 0; padding: 0; }
.samo__footer li { margin-bottom: 0.4rem; }
.samo__footer-bottom {
	margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.15);
	font-size: 0.88rem; color: rgba(255,255,255,0.6); display: flex; flex-wrap: wrap;
	gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* =========================================================================
   Desktop: two-column layout with fixed sidebar (like 2025)
   ========================================================================= */
@media (min-width: 860px) {
	.samo__nav-toggle { display: none; }
	.samo__sidebar-nav {
		display: block; border-bottom: 0; border-right: 1px solid var(--samo-line);
		padding-top: 1.25rem;
	}
	.samo__layout {
		display: grid;
		grid-template-columns: var(--samo-sidebar-w) minmax(0, 1fr);
		align-items: start;
	}
	.samo__footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 720px) {
	.samo__content-layout--sidebar { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* =========================================================================
   Motion preferences
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}