/* =========================
   Base & Theme
   ========================= */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --link: #0ea5e9;
  --link-hover: #0284c7;
  --ring: rgba(2,132,199,.25);
  --container: 1100px;

  /* Banner height: tall enough so logo never clips */
  --hero-h: clamp(220px, 24vh, 360px);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 1.2rem; }
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }

h1,h2,h3{ line-height:1.2; margin:0 0 .5rem 0; }
h2{
  font-weight: 800;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  margin-top: 2rem;
}

/* Normalize lists */
ul,ol{ margin: 0 0 1rem 1.25rem; padding: 0; }

/* =========================
   HERO (Banner)
   ========================= */
.hero{
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  border-bottom: 1px solid #e5e7eb;
}

.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.30) 60%,
    rgba(0,0,0,.12) 100%
  );
  pointer-events: none;
}

/* Pin logo bottom-left, inside safe area */
.hero-inner{
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

/* Keep logo fully inside banner */
.conference-logo{
  height: auto;
  width: auto;
  max-width: 480px;   /* was 360px — larger logo */
  max-height: calc(var(--hero-h) - 40px); /* fill more of banner */
}

/* Dates are already shown elsewhere; hide in banner if present */
.site-meta{ display: none; }

/* Slightly taller + smaller logo on small screens */
@media (max-width: 760px){
  :root{ --hero-h: clamp(240px, 28vh, 420px); }
  .conference-logo{
    max-width: 360px;  /* was 300px */
    max-height: calc(var(--hero-h) - 36px);
  }
}

/* =========================
   Sidebar Layout
   ========================= */
.layout{
  display: flex;
  gap: 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.25rem 1.2rem 2.5rem; /* breathing room below hero */
}

/* Sidebar */
.sidebar{
  flex: 0 0 230px;
  align-self: flex-start;
  position: sticky;
  top: .75rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1rem;
}

.sidebar-header{
  margin-bottom: .5rem;
}

.sidebar .brand{
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  margin-bottom: .15rem;
}

.sidebar .dates{
  color: var(--muted);
  font-size: .9rem;
}

/* Vertical nav in sidebar */
.sidebar-nav{
  list-style: none;
  margin: .75rem 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.sidebar-nav li{ list-style: none; }

.sidebar-nav a{
  display: block;
  padding: .5rem .6rem;
  border-radius: .5rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.sidebar-nav a:hover,
.sidebar-nav a.active{
  background: #e2e8f0;
  color: var(--text);
  text-decoration: none;
}

/* Main content column */
.content{
  flex: 1 1 auto;
  min-width: 0;
}

.content p{ color: var(--muted); }

/* Mobile: stack, sidebar becomes a simple top strip */
@media (max-width: 900px){
  .layout{
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.2rem 2rem;
  }
  .sidebar{
    position: static;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: .75rem;
  }
  .sidebar-header{
    margin: 0;
  }
  .sidebar-nav{
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 0 auto;
  }
  .sidebar-nav a{
    padding: .4rem .55rem;
  }
}

/* =========================
   Sponsors Grid
   ========================= */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 760px) {
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sponsor-grid { grid-template-columns: 1fr; }
}

.sponsor-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.sponsor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 132, 199, .08);
}

.sponsor-card img {
  max-height: 100px;
  max-width: 90%;
  object-fit: contain;
  display: block;
}

/* =========================
   Footer
   ========================= */
.footer{
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}
.footer-inner{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  padding: 1rem 0; color: var(--muted);
}
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--text); text-decoration: underline; }

/* =========================
   Focus Styles
   ========================= */
a, button, summary{ outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: .5rem;
}