/*
 * Main stylesheet for the ISWCS 2026 conference website.
 *
 * This file defines a simple, responsive layout inspired by the IEEE/CIC ICCC
 * conference website. Colours have been chosen to complement the logos of
 * Southern University of Science and Technology and Queensland University of
 * Technology. Sections alternate between light backgrounds to separate
 * content visually. A hero section with a panoramic photograph of the Gold
 * Coast skyline introduces the event and sets the tone for the rest of the
 * site. Navigation remains fixed to the top of the viewport on scroll to
 * provide easy access to other pages.
 */

/* CSS variables for easy theme customisation */
:root {
  /* Primary colour matches the deep blues used by QUT and provides good
     contrast against white text. */
  --primary-colour: #004e89;
  /* Secondary colour is a lighter shade used for hover states and accents. */
  --secondary-colour: #007db3;
  /* Soft grey background for alternating sections. */
  --light-bg: #f7f9fc;
  /* Dark text for comfortable reading on light backgrounds. */
  --text-colour: #333333;
  /* Maximum width for content to ensure readability on large screens. */
  --max-width: 1200px;
  /* Height of the navigation bar. */
  --nav-height: 60px;
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-colour);
  line-height: 1.6;
  background-color: #ffffff;
}

/* Top bar containing IEEE and ComSoc logos plus conference title */
.top-bar {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}
.top-bar .logo-container {
  display: flex;
  align-items: center;
}
.top-bar .logo-container img {
  height: 45px;
  width: auto;
  margin-right: 15px;
}

/* Styling for the ComSoc wordmark displayed beside the IEEE logo */
.comsoc-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  margin-left: 5px;
}
.comsoc-logo .comsoc-ieee {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-colour);
}
.comsoc-logo .comsoc-text {
  font-size: 0.65rem;
  color: var(--secondary-colour);
  margin-top: -2px;
}
.top-bar .conference-title {
  text-align: right;
}
.top-bar .conference-title h1 {
  font-size: 1.4rem;
  color: var(--primary-colour);
  font-weight: 600;
}
.top-bar .conference-title p {
  font-size: 0.9rem;
  color: #666666;
}

/* Sponsors section styling */
.sponsors-section {
  text-align: center;
  background-color: #ffffff !important; /* Force the background to white */
  padding: 40px 20px;
}
.sponsors-section h3 {
  color: var(--primary-colour);
  margin-bottom: 25px;
}
.sponsors-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
  margin-top: 15px;
}
.sponsors-logos img {
  max-height: 60px;
  width: auto;
  transition: transform 0.3s ease;
}
.sponsors-logos img:hover {
  transform: scale(1.05);
}



/* Navigation bar */
nav {
  background-color: var(--primary-colour);
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Container inside the navigation bar */
nav .container {
  display: grid;
  grid-template-columns: repeat(6, auto); /* 6 equal-width columns */
  align-items: center; /* Center the items vertically */
  justify-content: flex-start; /* Items aligned from the left */
  height: 100%;
  margin: 0 auto;
  max-width: var(--max-width); /* Max width, same as .inner */
  padding: 0 20px; /* Padding to prevent content touching the edges */
}

/* Individual navigation items (li) */
nav li {
  display: flex;
  justify-content: center; /* Centers the text horizontally */
  align-items: center; /* Centers the text vertically */
  padding: 0 15px;
  border-right: 1px solid white; /* Adds the vertical white line */
  height: 100%; /* Ensures the li takes the full height of the nav */
}

/* Add left border to the first item */
nav li:first-child {
  border-left: 1px solid white; /* Adds a vertical line before the first item */
}

/* Remove the right border from the last item */
nav li:last-child {
  border-right: 1px solid white;;
}

/* Styling for the links inside each li */
nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500; /* Bold text */
  font-size: 1.1rem; /* Font size */
  text-transform: uppercase;
  letter-spacing: 1px; /* Adds slight letter spacing for better readability */
}

/* Hover effect for the links */
nav a:hover,
nav a:focus {
  color: var(--secondary-colour); /* Change color on hover */
}




/* Hero section */
header.hero {
  position: relative;
  height: 450px;
  background-image: url('images/gold_coast.jpg');
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}
header.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.45);
}
header.hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  padding: 0 20px;
}
header.hero h2 {
  font-size: 2.4rem;
  margin-bottom: 15px;
  font-weight: 700;
}
header.hero p {
  font-size: 1.1rem;
  margin-bottom: 20px;
}
header.hero .cta-button {
  display: inline-block;
  background-color: var(--secondary-colour);
  color: #ffffff;
  padding: 12px 25px;
  border-radius: 4px;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
header.hero .cta-button:hover {
  background-color: #009fd4;
}

/* Sections */
.section {
  padding: 60px 20px;
}
.section:nth-of-type(odd) {
  background-color: var(--light-bg);
}
.section:nth-of-type(even) {
  background-color: #ffffff;
}
.section .container {
  max-width: var(--max-width);
  margin: 0 auto;
}
.section h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--primary-colour);
  font-weight: 600;
}
.section p {
  margin-bottom: 15px;
}

/* Two-column layout for announcements and dates on the home page */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.flex-col {
  flex: 1;
  min-width: 280px;
}

/* Important dates list styling */
.dates-list p {
  margin-bottom: 10px;
}
.dates-list span.datedescr {
  font-weight: 600;
}
.dates-list span.datedate {
  display: block;
  color: var(--primary-colour);
  margin-top: 3px;
}

/* Table styles for program and registration pages */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}
table th,
table td {
  border: 1px solid #dddddd;
  padding: 12px;
  text-align: left;
  font-size: 0.9rem;
}
table th {
  background-color: var(--primary-colour);
  color: #ffffff;
}
table tr:nth-child(even) {
  background-color: #f2f6f9;
}

/* Footer */
footer {
  background-color: var(--primary-colour);
  color: #ffffff;
  text-align: center;
  padding: 20px;
  font-size: 0.85rem;
}
footer a {
  color: var(--secondary-colour);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Responsive design */
@media (max-width: 768px) {
  header.hero h2 {
    font-size: 1.8rem;
  }
  nav ul {
    flex-direction: column;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background-color: var(--primary-colour);
    display: none;
  }
  nav ul.active {
    display: flex;
  }
  nav .menu-toggle {
    display: block;
    cursor: pointer;
  }
  nav li {
    margin: 10px 0;
  }
}
@media (min-width: 769px) {
  nav .menu-toggle {
    display: none;
  }
}

/* === ISWCS 2026 Banner (clean white style, Arial left-aligned) === */
.iswcs-banner{background:#fff;color:var(--text-colour);padding:22px 0;border-bottom:1px solid #e6eef5;}
.iswcs-banner .inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns: 220px 1fr 340px;gap:24px;align-items:center;padding:0 20px;}
.iswcs-banner .left img{height:140px;width:auto;display:block;}
.iswcs-banner .mid{text-align:left;}
.iswcs-banner .mid .title{font-family: Arial, Helvetica, sans-serif;font-size:2.6rem;font-weight: 800;line-height:1.1;color:#2356a0;margin-bottom:8px;}
.iswcs-banner .mid .subtitle{font-family: Arial, Helvetica, sans-serif;font-size: 1.35rem;font-weight:700;color:#ef7d00;}
.iswcs-banner .right{text-align:right;font-size: 1.35rem;line-height:1.6;color:#2356a0;font-weight: 700; font-family: Arial, Helvetica, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (max-width: 900px){
  .iswcs-banner .inner{grid-template-columns:130px 1fr;grid-template-areas:"left mid" "left right";}
  .iswcs-banner .left{grid-area:left}.iswcs-banner .mid{grid-area:mid}.iswcs-banner .right{grid-area:right;text-align:left;margin-top:8px}
  .iswcs-banner .left img{height:90px}.iswcs-banner .mid .title{font-size:2.1rem}
}


/* Tighter layout for committee page */
body.committee-page .section{padding:22px 0}
body.committee-page h3{margin:6px 0 8px}
ul.committee-list{list-style:none;padding-left:0}
ul.committee-list li{margin:4px 0}
ul.committee-list li em{font-style:normal;opacity:.9}


/* Left-align nav items */
nav ul{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-start;align-items:center}


/* Registration benefits styles */
.registration-benefits {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: var(--max-width);  /* 限制最大宽度，确保与页面其他部分一致 */
  margin: 0 auto; /* 居中对齐 */
}

/* Title of Registration Benefits */
.registration-benefits h2 {
  text-align: center;
  color: #2356a0;
  font-size: 2rem;
  margin-bottom: 30px;
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

table th, table td {
  border: 1px solid #dddddd;
  padding: 12px;
  text-align: left;
  font-size: 0.95rem;
}

table th {
  background-color: var(--primary-colour);
  color: #ffffff;
}

table tr:nth-child(even) {
  background-color: #f2f6f9;
}

ul {
  list-style-type: none;
  padding-left: 20px;
}

ul li {
  font-size: 0.95rem;
  margin-bottom: 5px;
}



/* 手机响应式设计 */
@media (max-width: 768px) {
  nav .container {
      display: flex;
      flex-direction: row;
      overflow-x: auto;  /* 使导航栏可以左右滚动 */
      white-space: nowrap;  /* 防止项目换行 */
      -webkit-overflow-scrolling: touch; /* 适应iOS设备的滑动效果 */
  }

  nav li {
      display: inline-block;
      margin-right: 20px; /* 导航项之间的间距 */
  }

  /* 可选：为导航项增加指示箭头或滚动提示 */
  nav .container::-webkit-scrollbar {
      height: 6px;
  }

  nav .container::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 10px;
  }

  nav .container::-webkit-scrollbar-thumb:hover {
      background-color: #555;
  }
}