/* ==============================================================
   HushCon theme - matches the classic hushcon.com look.
   All colors and fonts are set here.
   ============================================================== */
:root {
  --page-bg: #000;
  --panel: #aaa;               /* outer gray panels (also behind the banner) */
  --panel-border: #8fa3d9;     /* light blue outline on panels/banner */
  --box: #ddd;                 /* light inner content boxes */
  --box-border: #f5f5f5;
  --text: #000;
  --heading-on-panel: #fff;    /* "Our Sponsors:" style headings */
  --tab: #555;
  --tab-active: #a83232;
  --tab-text: #fff;
  --tab-border: #222;
  --link: #3651b3;
  --footer-link: #6f86d8;
  --font: Arial, Helvetica, sans-serif;
  --max-width: 1082px;
  --radius: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg) url("../img/binary-bg.svg") repeat;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.15;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 16px 16px;
}

a { color: var(--link); }

/* ---------- Banner + tabs ---------- */
.site-header { position: relative; margin-bottom: 11px; }

.banner {
  position: relative;
  height: 142px;
  background: var(--panel) left top no-repeat;  /* banner image sits at natural size */
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.logo-link { position: absolute; left: 20px; top: 10px; }
.logo { display: block; width: 122px; height: 122px; }

.event-info {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  text-align: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.15;
  color: #000;
}

.site-nav {
  position: absolute;
  left: 205px;
  bottom: -22px;
  display: flex;
  gap: 54px;
  z-index: 2;
}

.tab {
  display: inline-block;
  min-width: 122px;
  padding: 7px 14px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: var(--tab-text);
  background: var(--tab);
  border: 1px solid var(--tab-border);
  border-radius: var(--radius) var(--radius) 2px 2px;
  text-decoration: none;
}
.tab:hover, .tab:focus { background: #6a6a6a; color: var(--tab-text); }
.tab.active, .tab.active:hover { background: var(--tab-active); }

/* ---------- Panels and boxes ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.content { padding: 40px 20px 20px; }

.box {
  background: var(--box);
  border: 1px solid var(--box-border);
  border-radius: var(--radius);
  padding: 10px 11px;
}
.box + .box { margin-top: 10px; }

.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
.box h2 { font-size: 18px; margin: 4px 0 18px; }
.box h3 { font-size: 16px; margin: 18px 0 6px; }
.box p { margin: 0 0 16px; }

/* Heading sitting directly on the gray panel ("Our Sponsors:") */
.panel-heading h2 {
  color: var(--heading-on-panel);
  font-size: 20px;
  margin: -20px 0 10px -9px;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 10px;
  padding: 24px 16px 10px;
  text-align: center;
  font-size: 12px;
}
.site-footer p { margin: 0 0 16px; }
.site-footer a { color: var(--footer-link); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.copyright { font-weight: bold; }

/* ---------- Sponsors ---------- */
.sponsor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
}
.sponsor.logo-right { flex-direction: row-reverse; }

.sponsor-logo { flex: 0 0 202px; line-height: 0; }
.sponsor-logo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--panel-border);
  border-radius: 3px;
}
.sponsor-text { flex: 1; }
.sponsor-text p { margin: 0 0 8px; }
.sponsor.logo-right .sponsor-text { padding-top: 8px; }
.sponsor.logo-left .sponsor-text { padding-top: 8px; }

/* ---------- Schedule ---------- */
/* White headings sitting on the gray panel ("Friday:") */
.panel-title {
  color: var(--heading-on-panel);
  font-size: 20px;
  margin: 12px 0 10px -9px;
}

.schedule-intro {
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
}
.schedule-intro p { margin: 0 0 10px; }

.slots { list-style: none; margin: 0; padding: 0; }

.slot {
  display: grid;
  grid-template-columns: 60px 1fr 140px;
  gap: 0 10px;
  align-items: start;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.slot-title { font-weight: bold; }
.slot-speaker { font-size: 14px; font-weight: bold; padding-top: 2px; }

.slot details summary { cursor: pointer; }
.abstract { font-weight: normal; font-size: 14px; margin-top: 4px; }
.abstract p { margin: 0 0 6px; }

.box-fit { display: inline-block; }
.box-fit p { margin: 0; }

/* ---------- Narrow screens ---------- */
@media (max-width: 820px) {
  .site-nav { left: 0; right: 0; justify-content: center; gap: 8px; }
  .tab { min-width: 0; flex: 0 1 122px; padding: 7px 8px; font-size: 16px; }
}

@media (max-width: 600px) {
  .page { padding: 10px 8px; }
  .banner { height: 120px; }
  .logo-link { left: 10px; top: 10px; }
  .logo { width: 80px; height: 80px; }
  .event-info { font-size: 16px; bottom: 28px; }
  .content { padding: 36px 10px 10px; }
  .panel-heading h2 { margin: -16px 0 10px 0; }
  .panel-title { margin-left: 0; }

  .sponsor, .sponsor.logo-right { flex-direction: column; align-items: stretch; padding: 12px; }
  .sponsor-logo { flex-basis: auto; max-width: 240px; }

  .slot { grid-template-columns: 52px 1fr; }
  .slot-speaker { grid-column: 2; }
  .slot-speaker:empty { display: none; }
}