/* Extra styles used only by the one-page layout (onepage.html). */

/* Typography matched to measurements taken directly from the live Wix site:
   body copy is 21px/1.5 Lato regular, section headings are 36px Lato bold,
   subheadings are 21px Lato bold (same size as body, just bold). Our
   defaults (browser 16px body, clamped ~27-34px h2, unstyled h3) read
   noticeably smaller/different by comparison. */
p { font-size: 1.3125rem; line-height: 1.5; }
.lead { font-size: 1.3125rem; line-height: 1.5; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.3125rem; }
.member .tagline { font-size: .95rem; } /* bio taglines stay compact, not body-size */
.video-item figcaption p { font-size: .95rem; line-height: 1.5; }
.channels li { font-size: .9rem; }

/* Nav logo, bumped up again per request (was 56px). */
.nav__brand img { height: 72px; }
@media (max-width: 640px) { .nav__brand img { height: 56px; } }

/* Footer: lighter blue matching the Get Involved section icons (#2494DC),
   not the dark navy from the logo. Layout/sizes matched to the live site:
   3 columns (Contact link / centered social icons / stacked legal text),
   42px icons. Link text is white (same as the rest of the footer text),
   per request -- the live site itself used dark-ink links here, but this
   site intentionally keeps the footer all-white for consistency. */
.site-footer { background: #2494DC; }
.site-footer__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.site-footer__contact a { font-size: 1.125rem; color: #fff; }
.site-footer .social-icons { justify-content: center; margin-top: 0; }
.site-footer .social-icons img { width: 42px; height: 42px; }
.site-footer__legal { text-align: right; font-size: 1rem; }
.site-footer__legal a { font-size: 1rem; color: #fff; }
@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__legal { text-align: center; }
}

/* Bio LinkedIn links are the gray "in" icon, not text -- overrides the more
   general .member img (160px circular photo) rule via higher specificity. */
.member a.li { display: inline-block; }
.member a.li img {
  width: 26px; height: 26px; border-radius: 0; border: 0; margin: 0 auto; display: block;
  opacity: .75; transition: opacity .15s ease;
}
.member a.li:hover img { opacity: 1; }

/* Video thumbnails (small, click-to-play) replacing always-on embeds.
   Reuses .video-grid's 2-col layout from style.css; --thumbs just needs
   its own button/image/play-badge styling. */
.video-grid--thumbs { align-items: start; }
.video-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .video-grid--3 { grid-template-columns: 1fr; } }
.video-thumb {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; font-family: inherit; color: inherit;
}
.video-thumb__img {
  position: relative; display: block; padding-top: 56.25%; border-radius: var(--radius);
  overflow: hidden; background: #000;
}
.video-thumb__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .2s ease;
}
.video-thumb:hover .video-thumb__img img { transform: scale(1.03); }
.video-thumb__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55);
  color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  padding-left: 4px; /* optically center the triangle */
}
.video-thumb__title {
  display: block; margin-top: .6rem; font-weight: 700; font-size: 1rem; color: var(--ink);
}

/* Lightbox modal: a larger player opens on top of the page. */
.video-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.video-lightbox[hidden] { display: none; }
.video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10,14,18,.85); }
.video-lightbox__box {
  position: relative; width: min(900px, 92vw); z-index: 1;
}
.video-lightbox__frame {
  position: relative; padding-top: 56.25%; background: #000; border-radius: var(--radius); overflow: hidden;
}
.video-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lightbox__close {
  position: absolute; top: -2.75rem; right: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.video-lightbox__close:hover { background: rgba(255,255,255,.3); }

/* "Get Involved" as a page-within-a-page: one H2 header, then each topic
   (SEUs, Network, Speakers, Volunteer, Sponsorship) is its own bordered
   "microsection" card with an icon, rather than a flat list of H2s
   separated by <hr>. */
.microsections { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2rem; }
.microsection {
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.5);
  padding: 2rem;
}
.microsection .section-icon-heading { margin-bottom: 1rem; }
.microsection h3 { font-size: 1.5rem; margin: 0; }

/* Sponsorship benefits: standout bullet points, not hoverable/clickable-
   looking cards (they don't go anywhere, so they shouldn't look like buttons). */
.benefits-grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.benefits-grid li { position: relative; padding-left: 1.85rem; font-weight: 700; color: var(--ink); }
.benefits-grid li::before {
  content: '\2713'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700;
}
@media (max-width: 700px) { .benefits-grid { grid-template-columns: 1fr; } }

/* Body-copy hyperlinks are orange (matching the original site's inline
   links, e.g. the "resource page" link on the SEUs page). This overrides
   style.css's base `a` rule by cascade order (onepage.css loads after
   style.css, equal specificity) -- but only on pages that load this file,
   so the untouched multi-page site keeps its navy links. Nav links, buttons,
   and cards all set their own color explicitly (higher specificity) and are
   unaffected. */
a { color: var(--accent); }

/* Footer links stay white, but permanently underlined rather than only on
   hover -- same cascade-order scoping as above. */
.site-footer a { text-decoration: underline; }

/* Small icon shown beside a "Get Involved" section heading (Network's
   Slack icon, Sponsorship's handshake badge) -- both pulled from the
   original site, which had no other section-level images (SEUs, Speakers,
   Volunteer never had a dedicated image beyond the shared site logo). */
.section-icon-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.section-icon-heading h2 { margin: 0; }
.section-icon { width: 64px; height: 64px; flex-shrink: 0; }

/* The nav-scroll target (id) lives on the <h3>/<h2>, but the 64px icon next
   to it is taller than the heading text and vertically centered in the same
   flex row -- so it pokes up above the heading's own top edge. The site-wide
   [id] { scroll-margin-top: 90px; } in style.css clears the header for the
   text but not for the icon overhang, leaving the icon visibly clipped.
   Give these specific headings extra clearance to cover it. */
.section-icon-heading h2, .section-icon-heading h3 { scroll-margin-top: 115px; }

/* 9 "Explore" quick links, like the original site's grid */
.explore-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem;
}
.explore-grid .card {
  text-align: center; font-weight: 700; color: var(--brand);
  display: flex; align-items: center; justify-content: center; min-height: 84px;
}
@media (max-width: 800px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .explore-grid { grid-template-columns: 1fr; } }

/* Videos with captions/descriptions (the original has full write-ups) */
.video-item { margin: 0; }
.video-item figcaption { margin-top: .75rem; }
.video-item figcaption strong { display: block; margin-bottom: .3rem; }
.video-item figcaption p { color: var(--muted); font-size: .95rem; margin: 0; }

/* Slack channel chips */
.channels { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.channels li {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .85rem; font-size: .9rem; color: var(--brand); font-weight: 600;
}

/* Section divider inside the long "get involved" block */
.rule { border: 0; border-top: 1px solid var(--line); margin: 2.75rem 0; }

/* About section: text alongside a stacked photo column, like the original site */
.about-grid { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.about-photos { display: flex; flex-direction: column; gap: 1rem; }
.about-photos img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); display: block; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photos { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .about-photos img { flex: 0 0 70%; height: 220px; }
}

/* Bio grids: fixed items-per-row (not fluid auto-fill), centered, so the
   last row is never a single lonely photo off to one side. Team has 5
   members -> 3 per row (3+2). Advisers has 7 -> 4 per row (4+3). Both
   splits differ by only 1, which is as balanced as those counts allow
   without a full single row. Overrides style.css's base .team-grid
   (auto-fill) only when a --N modifier is present, so the untouched
   multi-page about.html keeps its original grid behavior. */
.team-grid--3, .team-grid--4 {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.team-grid--3 .member { flex: 0 0 auto; width: calc((100% - 2 * 1.75rem) / 3); }
.team-grid--4 .member { flex: 0 0 auto; width: calc((100% - 3 * 1.75rem) / 4); }

@media (max-width: 800px) {
  .team-grid--3 .member, .team-grid--4 .member { width: 100%; max-width: 320px; }
}

/* ---------- "Get Involved" nav dropdown ---------- */
.nav__dropdown { position: relative; }
.nav__dropdown-toggle { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }

/* .nav__dropdown-menu is the HOVERABLE hit area: it sits flush against the
   toggle (no margin) and uses padding-top for the visual gap instead, so the
   gap is still part of the box the mouse is "over" while crossing it. A
   margin-top gap here would create dead space that isn't part of any
   element's box, dropping :hover the instant the mouse crosses it — which
   is exactly the bug this replaced (menu closed before you could reach a link). */
.nav__dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; padding-top: .6rem;
  min-width: 200px; z-index: 60;
}
.nav__dropdown-menu-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.1); padding: .5rem;
}
.nav__dropdown-menu a {
  display: block; padding: .55rem .75rem; border-radius: 6px; font-weight: 500; white-space: nowrap;
}
.nav__dropdown-menu a:hover { background: var(--bg-alt); text-decoration: none; }
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu,
.nav__dropdown.open .nav__dropdown-menu { display: block; }

@media (max-width: 800px) {
  .nav__dropdown-menu { display: none; position: static; padding-top: 0; min-width: 0; }
  .nav__dropdown-menu-card { background: transparent; border: 0; box-shadow: none; padding: 0 0 0 .75rem; }
  .nav__dropdown:hover .nav__dropdown-menu { display: none; } /* hover doesn't apply on touch */
  .nav__dropdown.open .nav__dropdown-menu { display: block; }
}