/* -----------------------------------------------------------
   Global Styles
----------------------------------------------------------- */
:root {
  --font-main: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --content-width: 80%;
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --color-bg: #f8f9fa;
  --color-header: #003366;
  --color-text: #222;
  --color-link: #004080;
  --color-link-hover: #0073e6;
  --box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

body {
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* -----------------------------------------------------------
   Wrapper
----------------------------------------------------------- */
#wrapper {
  width: var(--content-width);
  margin: auto;
  padding: var(--spacing-medium) 0;
}

/* -----------------------------------------------------------
   Navigation Bar: Logo + Title + Links in one row
----------------------------------------------------------- */
nav.navbar {
  position: sticky;
  top: 0;                     /* stick to top of viewport */
  z-index: 1000;              /* stay above other content */
  width: 100%;
  background-color: var(--color-header);
  color: white;
  box-shadow: var(--box-shadow);
}

nav.navbar .nav-wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* left group vs links */
  align-items: center;
  padding: 0 var(--spacing-medium);
}

/* Left side: Logo + Title */
.nav-left {
  display: flex;
  align-items: center;
  gap: 10px; /* spacing between logo and title */
}

.nav-left .logo-img {
  height: 50px;
}

.nav-left .nav-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

/* Right side: Links */
nav.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spacing-medium);
}

nav.navbar ul li a {
  color: white;
  font-weight: 600;
  padding: 15px 0;
  display: block;
  text-decoration: none;
}

nav.navbar ul li a:hover {
  color: #ffd700;
}


/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
header {
  text-align: center;
  margin: var(--spacing-medium) 0;
}

/* Header logo + abbreviation side by side */
.header-top {
  display: flex;           /* horizontal layout */
  align-items: center;     /* vertically center logo and text */
  justify-content: center; /* center the pair horizontally */
  gap: 15px;               /* spacing between logo and text */
}

.header-top img {
  height: 120px;           /* keep original logo size */
}

.header-top h1 {
  font-size: 2.5rem;       /* adjust if needed */
  margin: 0;               /* remove default margin */
}

header h1 {
  color: var(--color-header);
  font-size: 2.5rem;
  margin: 10px 0;
}

header h2 {
  font-size: 1.8rem;
  margin: 5px 0;
}

header h3 {
  font-size: 1.2rem;
  margin: 5px 0 15px 0;
  font-weight: normal;
}

header p {
  font-size: 1rem;
}

/* Logo */
header img.logo-img {
  height: 120px;
  margin-bottom: var(--spacing-medium);
}

/* -----------------------------------------------------------
   Content Sections
----------------------------------------------------------- */
.content-section {
  background-color: #fff;
  padding: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
}

.content-section h2 {
  color: var(--color-header);
  margin-bottom: var(--spacing-small);
}

/* Links */

#invited-speakers, #dates, #submission, #organization {
  scroll-margin-top: 70px; /* take account of navbar */
} 


/* Lists */
.content-section ul {
  padding-left: 20px;
}

.content-section ul li {
  margin-bottom: var(--spacing-small);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: var(--spacing-small);
}

table td, table th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

/* Organization tables (borderless, clean look) */
table.org-table {
  border-collapse: separate;  /* separate cells */
  border-spacing: 0 10px;     /* vertical spacing between rows */
}

table.org-table td {
  border: none;               /* no borders */
  padding: 0px 12px;          /* spacing inside cells */
  text-align: left;
}

/* Optional: subtle zebra striping for readability */
table.org-table tr:nth-child(even) td {
  background-color: #f5f5f5;
  border-radius: 4px;         /* rounded corners for row */
  padding: 0px 12px;
}

/* Sponsors */
.sponsor-img {
  text-align: center;
  margin: var(--spacing-medium) 0;
}

.sponsor-img img {
  width: 25%;
  margin-right: 15px;
}

/* Invited Speakers */

.speaker {
  display: flex;              /* horizontal layout */
  align-items: flex-start;    /* top-align text with image */
  gap: 20px;                  /* space between image and text */
  margin-bottom: 30px;        /* space between speakers */
}

.speaker-img {
  width: 150px;               /* fixed width */
  height: auto;               /* maintain aspect ratio */
  border-radius: 8px;         /* rounded corners for image */
  object-fit: cover;          /* ensure image covers box nicely */
}

.speaker-info h3 {
  margin: 0;
  color: var(--color-header);
  font-size: 1.3rem;
}

.speaker-info .talk-title {
  margin: 5px 0;
  font-style: italic;
}

.speaker-info .talk-abstract {
  margin-top: 5px;
  line-height: 1.5;
}

/* -----------------------------------------------------------
   Footer (full width, content centered)
----------------------------------------------------------- */
footer {
  width: 100%; /* full width like nav bar */
  background-color: #003366;
  color: white;
  text-align: center;
  padding: 10px 0; /* compact height */
  box-sizing: border-box;
}

footer .footer-content {
  max-width: var(--content-width); /* center content */
  margin: 0 auto;
  padding: 0 var(--spacing-medium);
}

footer a {
  color: white; /* readable links */
  text-decoration: underline;
}

footer a:hover {
  color: #ffd700; /* subtle hover effect */
}


/* Tracker iframe */
.tracker {
  display: none;
}