/* Niagara Economic Summit 2025 — GNCC
   URL: https://gncc.ca/members/2025-summit.css
*/

/* ----- CSS Variables (palette from header graphic) ----- */
:root{
  --navy:#0b3a5e;          /* deep GNCC navy */
  --blue:#0097d1;          /* bright cyan/blue */
  --teal:#00b3a4;          /* teal accent */
  --red:#e14b3b;           /* warm red accent */
  --orange:#f39c12;        /* orange accent */
  --ink:#0f172a;           /* near-black for text */
  --muted:#667085;
  --bg:#f7fafc;
  --card:#ffffff;

  --radius:16px;
  --shadow:0 10px 25px rgba(2,25,44,.08);

  /* Speaker headshot sizes (single source of truth) */
  --headshot:300px;        /* desktop headshot size */
  --headshot-sm:140px;     /* mobile headshot size */
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%; height:auto; display:block}
.container{width:min(1100px, 92%); margin-inline:auto}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem 1rem; background:#fff}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:.7rem 0}
.brand{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none}
.top-nav .nav-toggle{
  display:none; font-size:1.3rem; background:transparent; border:0; padding:.5rem .75rem; border-radius:.5rem;
}
.top-nav .nav-list{
  list-style:none; display:flex; gap:1rem; margin:0; padding:0;
}
.top-nav a{color:var(--navy); text-decoration:none; font-weight:600}
.top-nav a:hover{color:var(--blue)}

/* Mobile nav */
@media (max-width: 840px){
  .top-nav .nav-toggle{display:inline-block}
  .top-nav .nav-list{display:none; position:absolute; inset:56px 0 auto 0; background:#fff; box-shadow:var(--shadow); padding:1rem 1.25rem; flex-direction:column}
  .top-nav .nav-list.open{display:flex}
}

/* Hero */
.hero{position:relative; isolation:isolate}
.hero img{width:100%; height:clamp(240px, 38vw, 480px); object-fit:cover; filter:contrast(1.05) saturate(1.05)}
.hero-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(11,58,94,.55), rgba(11,58,94,.75));
}
.hero-content{color:#fff; text-align:left}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; opacity:.9; margin:0 0 .25rem}
.hero h1{font-size:clamp(1.8rem, 3.5vw, 3rem); margin:.25rem 0}
.tagline{font-size:clamp(1rem, 2vw, 1.25rem); opacity:.95; margin:0 0 .75rem}
.event-meta{display:flex; gap:1rem; padding:0; margin:0 0 1rem; list-style:none; font-weight:600}
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:999px; font-weight:700; text-decoration:none; border:2px solid transparent;
}
.btn-primary{background:linear-gradient(90deg, var(--blue), var(--teal)); color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{border-color:#fff}

/* Accordions */
.accordion{margin:1.5rem 0}
details{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  list-style:none; padding:1rem 1.25rem; cursor:pointer; font-weight:800; color:var(--navy);
}
summary::-webkit-details-marker{display:none}
.accordion-body{padding:1rem 1.25rem 1.25rem 1.25rem}
.copy-link{
  font:inherit; border:0; background:#eef6fb; color:var(--navy); border-radius:10px; padding:.25rem .5rem; cursor:pointer;
}
.copy-link:hover{background:#e3f0f8}

/* About */
.highlights{margin:.5rem 0 0 1.2rem}

/* Agenda */
.agenda h3{margin:1rem 0 .5rem}
.agenda-list{padding-left:1.2rem}
.agenda-list li{margin:.2rem 0}
.agenda .meta{color:var(--muted)}
.breakouts{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.breakout{background:#f9fbfd; border:1px solid #e6eff6; border-radius:12px; padding:1rem}
.agenda-note{color:var(--muted); margin-top:1rem; font-style:italic}

/* Speakers */
.speaker-group{margin:1rem 0}
.speaker-list{
  display:grid;
  /* Ensure each card is wide enough for a large headshot, gap, padding, plus some text */
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--headshot) + 1rem + 2rem + 6ch), 1fr));
  gap:1rem; list-style:none; padding:0; margin:0;
}
.speaker-card{
  background:#fff; border:1px solid #e6eff6; border-radius:12px; padding:1rem;
  display:grid; grid-template-columns: var(--headshot) 1fr; gap:1rem; align-items:start;
}
.speaker-card > div{ min-width:0; } /* allow text column to shrink/wrap */

.speaker-card img{
  width:var(--headshot); height:var(--headshot);
  object-fit:cover; border-radius:10px; background:#eef2f5;
}
.speaker-card h4{margin:.1rem 0 .2rem}
.speaker-card .title{color:var(--muted); margin:.1rem 0 .4rem}

/* Safe wrapping for long content */
.speaker-card h4,
.speaker-card .title,
.speaker-card .bio{
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width:760px){
  .speaker-list{ grid-template-columns: 1fr; } /* single column on small screens */
  .speaker-card{ grid-template-columns: var(--headshot-sm) 1fr; }
  .speaker-card img{ width:var(--headshot-sm); height:var(--headshot-sm); }
}

/* Attendees */
.attendee-list{columns:1; column-gap:2rem; list-style:none; padding:0}
.attendee-list li{break-inside:avoid; padding:.25rem 0; border-bottom:1px dashed #eef2f5}
@media (min-width: 700px){ .attendee-list.two-col{columns:2} }

/* Media */
.media-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.download-card{
  display:grid; gap:.25rem; background:#fff; border:1px solid #e6eff6; border-radius:12px; padding:1rem; text-decoration:none; color:inherit;
}
.download-card:hover{border-color:#cfe7f5; box-shadow:var(--shadow)}
.file-tag{justify-self:start; background:linear-gradient(90deg, var(--blue), var(--teal)); color:#fff; font-weight:800; padding:.25rem .5rem; border-radius:6px}
.download{margin-top:.25rem; font-weight:700; color:var(--blue)}

/* Sponsors */
.sponsors .sponsor-tier{margin:1.25rem 0}
.tier-title{margin:.25rem 0 .6rem; font-size:1.2rem}
.tier-title--title{color:#fff; background:linear-gradient(90deg, var(--blue), var(--teal)); display:inline-block; padding:.35rem .6rem; border-radius:8px}
.tier-title--platinum{color:var(--navy)}
.tier-title--gold{color:#b58100}
.tier-title--silver{color:#7a7e86}
.tier-title--bronze{color:#8a4d2b}
/* Base grid + card */
.logo-row { 
  display: grid; 
  place-items: center; 
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 1rem;
}

.logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ===== TIERS ===== */

/* Title sponsor: single column, max 800px wide */
.logo-row--xl {
  grid-template-columns: 1fr;
}
.logo-row--xl .logo img {
  max-width: 800px;
}

/* Large sponsors: columns, max 300px wide */
.logo-row--lg {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 640px) {
  .logo-row--lg {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.logo-row--lg .logo img {
  max-width: 300px;
}

/* All other sponsors: columns, max 200px wide */
.logo-row--md { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.logo-row--sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.logo-row--xs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.logo-row--md .logo img,
.logo-row--sm .logo img,
.logo-row--xs .logo img {
  max-width: 200px;
}

/* ===== MOBILE STACKING ===== */
@media (max-width: 500px) {
  .logo-row--xl,
  .logo-row--lg,
  .logo-row--md,
  .logo-row--sm,
  .logo-row--xs {
    grid-template-columns: 1fr;
  }
}

/* Cards (general) */
.card{background:#fff; border:1px solid #e6eff6; border-radius:12px; padding:1rem; box-shadow:var(--shadow)}

/* Footer */
.site-footer{margin-top:2rem; background:var(--navy); color:#cfe7f5}
.site-footer .container{display:flex; align-items:center; gap:1rem; padding:1rem}
.site-footer .brand img{filter:brightness(1.2)}

/* --- Attendee search UI --- */
.attendee-controls{display:grid; gap:.75rem; margin-bottom:.75rem}
.attendee-search{
  display:grid; gap:.5rem; grid-template-columns:1fr auto; align-items:center;
  background:#fff; border:1px solid #e6eff6; border-radius:12px; padding:.75rem; box-shadow:var(--shadow);
}
.attendee-search input[type="search"]{
  width:100%; padding:.6rem .75rem; border:1px solid #d9e6f2; border-radius:10px; font-size:1rem;
}
.search-options{display:flex; gap:1rem; grid-column:1 / -1; font-size:.95rem; color:var(--muted)}
.search-actions{display:flex; gap:.5rem}
.search-status{font-size:.9rem; color:var(--muted)}
.no-matches{margin-top:.75rem; color:var(--muted); font-style:italic}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Highlight */
.attendee-list mark{
  background:linear-gradient(90deg, var(--orange), var(--red));
  color:#fff; padding:.05rem .25rem; border-radius:.25rem;
}

/* Hide non-matches in filter mode */
.attendee-list li[hidden]{display:none}

/* Speaker bios: collapse/expand */
.bio{
  position:relative;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  transition:all .3s ease;
  margin-bottom:.5rem;
}
.bio.expanded{-webkit-line-clamp:unset; overflow:visible}
.readmore-btn{
  display:inline-block; font-weight:600; color:var(--blue);
  background:none; border:0; padding:0; cursor:pointer;
}
.readmore-btn:hover{text-decoration:underline}