/*
 * LinuxFest Northwest theme, layered on Bootstrap 5.3 + css/site.css.
 * Brand: #304858 (navy) / #3e7f9e (steel blue) / #77954a (green) / #e9b547 (gold).
 * Fonts: Ubuntu (body) + Press Start 2P (theme heading, pixel/retro), Google Fonts.
 * Theme-aware: text-on-white sections use the --site-* variables so the existing
 * light/dark system keeps working; brand-coloured bands (hero, CTA, footer) are
 * fixed colours like the old Lektor site.
 */

:root {
  --lfnw-blue: #304858;
  --lfnw-steel: #3e7f9e;
  --lfnw-green: #77954a;
  --lfnw-gold: #e9b547;
  --lfnw-gold-dark: #cb9218;
  /* Ubuntu leads the font stack used by Bootstrap via --bs-body-font-family. */
  --site-font-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* === Layout === */
.content { max-width: 1200px; margin: auto; padding: 0 1rem; }

/* === Tree breaks: section dividers === */
.tree-break {
  height: 60px;
  background-color: #fff;
  -webkit-mask: url('/static/lfnw/trees-negative.svg') repeat-x;
          mask: url('/static/lfnw/trees-negative.svg') repeat-x;
}

/* Bottom green tree break: real element at bottom of container
 * Uses trees.svg (not negative) so tree silhouettes are green. */
.tree-break-green {
  height: 60px;
  background: var(--lfnw-green);
  -webkit-mask: url('/static/lfnw/trees.svg') repeat-x;
          mask: url('/static/lfnw/trees.svg') repeat-x;
}

/* === Homepage: full-bleed alternating sections + tree-line breaks ===
 * Port of the current site's #content-area mechanic (lfnw-2027 assets/app.scss):
 * every homepage section is a full-width band. The first is the bay-blue hero
 * with the mountains strip; the rest alternate — white with evergreen headings,
 * then bay blue — and each new section is introduced by a 60px tree-mask fringe
 * (trees-negative.svg) tinted to the band below it. The last section ends on a
 * green tree line (trees.svg) bleeding into the footer. The masks sit in the
 * section's own top/bottom padding via ::before/::after at z-index -1. */
.layout-homepage > main > div.container-fluid.p-0 {
  display: flex;
  flex-direction: column;
}
.layout-homepage > main > div.container-fluid.p-0 > section {
  position: relative;
  z-index: 0;
  background: var(--site-color-bg);
  color: var(--site-color-text);
}
.layout-homepage > main > div.container-fluid.p-0 > section:nth-of-type(odd) {
  background: var(--lfnw-steel);
  color: #fff;
}
.layout-homepage > main > div.container-fluid.p-0 > section:first-of-type {
  background: url('../lfnw/mountains-index.svg') center bottom / cover no-repeat, var(--site-color-bg);
}
.layout-homepage > main > div.container-fluid.p-0 > section:first-of-type::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, transparent 70%, var(--lfnw-steel) 100%);
}
.layout-homepage > main > div.container-fluid.p-0 > section:not(:first-of-type) {
  padding: 60px 0 0;
}
.layout-homepage > main > div.container-fluid.p-0 > section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--lfnw-steel);
  -webkit-mask: url('../lfnw/trees-negative.svg') repeat-x;
          mask: url('../lfnw/trees-negative.svg') repeat-x;
}
.layout-homepage > main > div.container-fluid.p-0 > section:nth-of-type(odd)::before {
  background-color: var(--site-color-bg);
}
.layout-homepage > main > div.container-fluid.p-0 > section:nth-of-type(odd) h1,
.layout-homepage > main > div.container-fluid.p-0 > section:nth-of-type(odd) h3,
.layout-homepage > main > div.container-fluid.p-0 > section:nth-of-type(odd) h5 {
  color: var(--lfnw-green);
}
.layout-homepage > main > div.container-fluid.p-0 > section:last-child {
  flex: 1;
  padding-bottom: 60px;
}

/* === Hero (first section) === */
.layout-homepage #header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  font-size: 120%;
  text-align: center;
}
.layout-homepage #header .lfnw-markdown > :first-child { margin-top: 0; }
.layout-homepage #header img { max-width: min(100%, 640px); height: auto; }
.layout-homepage #header h3 { color: #fff; font-size: 1.5rem; font-weight: 500; }
.layout-homepage #header .content > * { margin: 0 auto; }

/* === Featured speakers (white section) === */
.speakers-heading { text-align: center; color: var(--lfnw-green); }
.sz-speaker-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem; max-width: 900px; margin: 1.5rem auto;
}
.sz-speaker {
  max-width: 280px; justify-self: center; text-align: center;
  background: var(--site-color-bg-alt); color: var(--site-color-text);
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.5em;
  padding: 1.25rem; box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.25);
}
.sz-speaker__photo { display: block; margin: 0 auto 0.75rem; border-radius: 50%; width: 140px; height: 140px; object-fit: cover; }
.sz-speaker__name { margin: 0 0 0.2rem; color: var(--site-color-text); font-size: 1.2rem; }
.sz-speaker__tagline { margin: 0 0 0.5rem; font-style: italic; color: var(--lfnw-steel); }
.sz-speaker__bio { margin: 0; text-align: left; font-size: 0.85rem; color: var(--site-color-text-muted); }
.sz-speaker__btn { display: inline-block; margin: 0.75rem auto 0; padding: 0.6rem 1.5rem; font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 0.375rem; background: var(--lfnw-gold-dark); color: #fff; border: none; cursor: pointer; transition: background 0.2s ease; }
.sz-speaker__btn:hover { background: #c49a00; color: #fff; text-decoration: none; }

/* === CTA (bay section) === */
#cta .content { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: flex-start; }
#cta .lfnw-cta { flex: 1 1 320px; max-width: 560px; margin-top: 2rem; text-align: center; }
#cta .cta-title { color: #fff; }
#cta .cta-lead { display: block; font-weight: 300; font-size: 75%; }
#cta .cta-description { color: #fff; }
#cta a:not(.cta-button) { color: #fff; }

.cta-button {
  display: inline-block; color: #000; background-color: var(--lfnw-gold);
  text-decoration: none; font-size: 120%; padding: 0.5em 1em; margin: 0.5em;
  border: 2px solid var(--lfnw-gold); border-radius: 0.5em;
}
.cta-button:hover { color: #000; border-color: #000; }

/* === Theme (white section) === */
#theme .markdown-title,
#theme h2 {
  font-family: 'Press Start 2P', cursive; letter-spacing: 0.05em;
  color: var(--lfnw-steel); font-size: 1.5rem; font-weight: 400;
  text-align: center; text-shadow: 2px 2px 0 #1a3d52;
}
#theme img { max-height: 400px; max-width: 100%; width: auto; display: block; margin: 0 auto; }
#theme .lfnw-markdown { text-align: center; }

/* === Sponsors (bay section, white cards — as on the current site) === */
.lfnw-rows { display: flex; flex-direction: column; gap: 1.5rem; }
.rows-title { text-align: center; color: #fff; }
#sponsors .lfnw-markdown { text-align: center; }
#sponsors .lfnw-markdown h2 { color: #fff; }

.lfnw-column {
  background: var(--site-color-bg); color: var(--site-color-text);
  border: 1px solid silver; border-top: 1px solid silver;
  border-radius: 0.25rem; padding: 1rem 1.25rem 1.25rem;
}
.column-title { text-align: center; color: var(--lfnw-gold-dark); margin: 1rem 0.5rem; }
.column-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.5rem; }

.sponsor-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 0.5rem; }
.sponsor-card.rank-1 { width: 360px; }
.sponsor-card.rank-2 { width: 331px; }
.sponsor-card.rank-3 { width: 302px; }
.sponsor-card.rank-4 { width: 274px; }
.sponsor-card.rank-5 { width: 245px; }
.sponsor-card.rank-6 { width: 216px; }
.sponsor-card.rank-7 { width: 187px; }

.sponsor-logo { max-width: 100%; height: auto; object-fit: contain; display: block; }
.sponsor-card.rank-1 .sponsor-logo { max-height: 180px; }
.sponsor-card.rank-2 .sponsor-logo { max-height: 165px; }
.sponsor-card.rank-3 .sponsor-logo { max-height: 151px; }
.sponsor-card.rank-4 .sponsor-logo { max-height: 137px; }
.sponsor-card.rank-5 .sponsor-logo { max-height: 122px; }
.sponsor-card.rank-6 .sponsor-logo { max-height: 108px; }
.sponsor-card.rank-7 .sponsor-logo { max-height: 94px; }

.sponsor-name-link { font-weight: 500; color: var(--lfnw-blue); }

/* Sponsor tooltip (hover popup) */
.sponsor-card { position: relative; cursor: pointer; }
.sponsor-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #e0e0e0;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  width: max-content;
  max-width: 260px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.sponsor-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a2e;
}
.sponsor-card:hover .sponsor-tooltip,
.sponsor-tooltip:hover {
  visibility: visible;
  opacity: 1;
}
.sponsor-tooltip-title {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
  text-align: center;
}
.sponsor-tooltip-body {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #c8c8d4;
}
.sponsor-tooltip-body p { margin: 0; }
.sponsor-tooltip-body p + p { margin-top: 0.35rem; }

/* === Header / nav (brand blue, white links) === */
.site-header .navbar { background: var(--lfnw-blue); }
.site-header .navbar .navbar-brand,
.site-header .navbar .nav-link { color: #fff; }
.site-header .navbar .nav-link:hover,
.site-header .navbar .navbar-brand:hover { color: var(--lfnw-gold); }
.site-header .navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.55); }
.site-header .navbar .navbar-toggler-icon { filter: invert(1); }
.site-header .navbar .navbar-brand img { display: block; height: 44px; width: auto; }
.site-header .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.site-header .theme-toggle:hover { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: #fff; }

/* === Footer (mirrors the old site: green-to-navy, social link list) === */
.site-footer.lfnw-footer { background: linear-gradient(to bottom, #77954a 0%, #304858 75%); color: #fff; }

/* Treebreak between main and footer */
.main-footer-treebreak {
  height: 60px;
  background: var(--lfnw-green);
  -webkit-mask: url('/static/lfnw/trees.svg') repeat-x;
          mask: url('/static/lfnw/trees.svg') repeat-x;
}

/* Green tree-break at bottom of content area — standard and landing pages only */
.layout-standard > main > div.container::after,
.layout-landing > main > div.container-fluid.p-0::after {
  content: "";
  display: block;
  height: 60px;
  background: #77954a;
  -webkit-mask: url('/static/lfnw/trees.svg') repeat-x;
          mask: url('/static/lfnw/trees.svg') repeat-x;
}
.lfnw-footer a { color: #fff; }
.lfnw-footer a:hover { color: var(--lfnw-gold); }
.lfnw-footer-description { font-size: 0.95rem; max-width: 60rem; margin-left: auto; margin-right: auto; text-align: center; }
.lfnw-social { list-style: none; }
.lfnw-social a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 1px; white-space: nowrap; }
.lfnw-social i { margin-right: 0.35rem; }

/* === Gallery page === */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.gallery-item { border-radius: 0.25rem; overflow: hidden; position: relative; }
.gallery-thumb { display: block; width: 100%; height: 220px; object-fit: cover; cursor: pointer; transition: opacity 0.2s; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: #fff; padding: 2rem 0.75rem 0.5rem;
  font-size: 0.85rem; line-height: 1.3;
  opacity: 0; transition: opacity 0.2s;
  display: flex; align-items: flex-end;
}
.gallery-thumb-link:hover .gallery-caption {
  opacity: 1;
}
.gallery-intro { text-align: center; font-size: 1.1rem; color: var(--site-color-text-muted); margin-bottom: 1rem; }
.gallery-footer { text-align: center; margin-top: 0.75rem; font-style: italic; }

/* Lightbox overlay */
#gallery-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center; align-items: center; flex-direction: column;
  cursor: pointer;
}
#gallery-lightbox.active { display: flex; }
#gallery-lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
#gallery-lightbox .caption { color: #fff; text-align: center; padding: 1rem; font-size: 1rem; }
#gallery-lightbox button.lightbox-close,
#gallery-lightbox button.lightbox-prev,
#gallery-lightbox button.lightbox-next {
  background: rgba(0, 0, 0, 0.5);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
#gallery-lightbox button.lightbox-close:hover,
#gallery-lightbox button.lightbox-prev:hover,
#gallery-lightbox button.lightbox-next:hover {
  background: rgba(0, 0, 0, 0.8);
}
#gallery-lightbox button.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px;
}
#gallery-lightbox button.lightbox-prev {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
}
#gallery-lightbox button.lightbox-next {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
}

/* === Policy cards === */
.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.policy-card {
  display: block;
  background: var(--site-color-bg); color: var(--site-color-text);
  border: 1px solid var(--site-color-border); border-left: 4px solid var(--lfnw-green);
  border-radius: 0.25rem; padding: 1.25rem; text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.policy-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); border-color: var(--lfnw-green); }
.policy-card h4 { margin: 0 0 0.5rem; color: var(--lfnw-blue); }
.policy-desc { margin: 0; color: var(--site-color-text-muted); font-size: 0.9rem; }

/* === Get Involved: role cards === */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 1rem 0; }
.role-card { border: 1px solid var(--site-color-border); border-radius: 0.25rem; padding: 1rem; }
.role-card h4 { margin: 0 0 0.5rem; color: var(--lfnw-blue); }
.role-desc { font-size: 0.9rem; color: var(--site-color-text-muted); }
.role-slots { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.role-slots li { margin: 0.35rem 0; font-size: 0.9rem; }
.slot-label { font-weight: 500; color: var(--lfnw-steel); }
.slot-open { color: #c2410c; }
.slot-optional { color: var(--site-color-text-muted); font-style: italic; }
.role-category { margin: 1.5rem 0 0.75rem; color: var(--lfnw-steel); }
.role-grid + .role-grid { margin-top: 0; }

/* === Map page === */
.map-canvas { position: relative; }
.campus-map { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 0.25rem; }
#venue-map { width: 100%; height: 400px; border-radius: 0.25rem; margin-top: 1rem; }

/* === Left sidebar navigation === */
.lfnw-sidebar-left {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.lfnw-side-nav-wrapper {
  background: var(--site-color-bg-alt);
  border: 1px solid var(--site-color-border);
  border-radius: 0.25rem;
  padding: 1rem;
}
.lfnw-side-nav-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lfnw-steel);
  margin: 0 0 0.5rem;
}
.lfnw-side-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lfnw-side-nav-item {
  border-top: 1px solid var(--site-color-border);
}
.lfnw-side-nav-item:first-child {
  border-top: none;
}
.lfnw-side-nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--site-color-text);
  text-decoration: none;
  border-radius: 0.25rem;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}
.lfnw-side-nav-link:hover {
  background: var(--site-color-bg);
  color: var(--lfnw-blue);
}
.lfnw-side-nav-item.active .lfnw-side-nav-link {
  background: var(--lfnw-blue);
  color: #fff;
  font-weight: 500;
}
.lfnw-side-nav-item.has-children .lfnw-side-nav-link::after {
  content: " ▾";
  font-size: 0.75em;
  opacity: 0.6;
}

/* === Volunteer cards (grid + profile) === */
.volunteer-grid .volunteer-card .card {
  border: 1px solid var(--site-color-border);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.volunteer-grid .volunteer-card .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--lfnw-steel);
}
.volunteer-avatar,
.volunteer-profile-avatar {
  border-radius: 50%;
  object-fit: cover;
}
.volunteer-avatar { width: 140px; height: 140px; }
.volunteer-profile-avatar { width: 280px; height: 280px; }

/* Silhouette placeholder — works in light and dark mode */
.volunteer-avatar-placeholder,
.volunteer-profile-avatar-placeholder {
  position: relative;
  display: inline-block;
}
.volunteer-avatar-placeholder { width: 140px; height: 140px; }
.volunteer-profile-avatar-placeholder { width: 280px; height: 280px; }
.volunteer-avatar-placeholder svg,
.volunteer-profile-avatar-placeholder svg {
  width: 100%; height: 100%; display: block;
}
.volunteer-avatar-placeholder .initials,
.volunteer-profile-avatar-placeholder .initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.75rem;
  color: var(--lfnw-steel);
  pointer-events: none;
}
.volunteer-profile-avatar-placeholder .initials { font-size: 2.5rem; }

/* Role badges on cards */
.volunteer-roles { min-height: 2rem; }

/* Volunteer detail — profile layout */
.volunteer-profile .volunteer-badges .badge { font-size: 0.8rem; }
.volunteer-bio h2,
.volunteer-assignments h2,
.volunteer-skills h2 {
  font-size: 1.25rem;
  color: var(--lfnw-blue);
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--lfnw-green);
  padding-bottom: 0.25rem;
  display: inline-block;
}
.skill-card { border-left: 3px solid var(--lfnw-steel); }

/* === Position status table === */
.volunteer-status-table h2 {
  font-size: 1.25rem;
  color: var(--lfnw-blue);
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--lfnw-green);
  padding-bottom: 0.25rem;
  display: inline-block;
}
.volunteer-status-table .table th { color: var(--lfnw-blue); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* === Volunteer profiles list === */
.profile-thumb { width: 64px; height: 64px; object-fit: cover; }
.profile-thumb-placeholder {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--lfnw-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
}
.profile-card-link .card { border: 1px solid var(--bs-border-color); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.profile-card-link:hover .card { border-color: var(--lfnw-steel); box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.08); }