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

/* Define brand colour variables */
:root {
  --gray: #f5f6f9;
  --dark-gray: #27313c;
  --blue: #0a6ba1;
  --red: #e2461d;
}

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

/* Navigation */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.nav-logo a {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-gray);
  text-decoration: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
}

.nav-links li a {
  color: var(--dark-gray);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: var(--red);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--dark-gray);
  transition: background-color 0.3s;
}

/* Hero Section modifications */
/* Set default heading weights */
h1,
h2,
h3 {
  font-weight: 700;
  margin-bottom: 0.5em;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Buttons */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.btn.primary {
  background-color: var(--blue);
  color: #ffffff;
}

.btn.primary:hover {
  background-color: #085d8c;
  color: #ffffff;
}

.btn.outline {
  border: 2px solid var(--blue);
  color: var(--blue);
}

.btn.outline:hover {
  background-color: var(--blue);
  color: #ffffff;
}

.btn.secondary {
  background-color: var(--blue);
  color: #ffffff;
}

.btn.secondary:hover {
  background-color: #085d8c;
}

/* Additional styles for updated sections */

/* Note for future/alternate pricing
   Rendered just below the current price. Highlight in red and italics to
   emphasize upcoming price changes. Adjust margins so it sits closer to
   the price above and provides breathing room below. */
.price-note {
  font-size: 14px;
  color: var(--red);
  font-style: italic;
  margin-top: -5px;
  margin-bottom: 15px;
}

/* Sales ended message styling
   Use a larger font and bold weight to make the call to action clear and
   visually distinct. Center the text and add extra spacing beneath. */
.sales-ended {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 30px;
  color: var(--dark-gray);
}

/* Charity list formatting */
.charity-list {
  list-style: disc;
  margin: 10px 0 0 20px;
  padding: 0;
}

/* Hero Section */
.hero {
  position: relative;
  height: 80vh;
  background-image: url('hero_bg.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.hero .subtitle {
  font-size: 20px;
  margin-bottom: 10px;
  color: #d9e4f5;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  color: #ffffff;
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
  color: #d9e4f5;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* About Section */
.about {
  padding: 60px 0;
  background-color: #ffffff;
}

.about h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 20px;
}

.event-description {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 18px;
  text-align: center;
  color: var(--dark-gray);
}

.about .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

/* Tickets Section */
.tickets {
  padding: 60px 0;
  background-color: var(--gray);
}

.tickets h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.tickets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.ticket-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1 1 300px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ticket-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--dark-gray);
}

.ticket-card .price {
  font-size: 24px;
  font-weight: bold;
  color: var(--blue);
  margin-bottom: 12px;
}

.ticket-card .features {
  list-style: disc;
  margin-bottom: 20px;
  margin-left: 20px;
}

.ticket-card .features li {
  font-size: 16px;
  color: var(--dark-gray);
  margin-bottom: 8px;
}

.ticket-card .btn {
  /* Center the button horizontally within the card */
  align-self: center;
}

/* Agenda Section */
.agenda {
  padding: 60px 0;
  background-color: #ffffff;
}

.agenda h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
}

.agenda-table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid #e0e6ed;

  /* Use automatic layout so columns can adjust based on content rather than fixed widths */
  table-layout: auto;
}

.agenda-table th,
.agenda-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  /* Allow line wrapping within cells by default */
  word-break: break-word;
}

/* Keep the time column on a single line and give it a reasonable width */
.agenda-table th:nth-child(1),
.agenda-table td:nth-child(1) {
  /* Reserve enough space for the time range without forcing line breaks */
  white-space: nowrap;
  width: 22%;
  min-width: 100px;
}


.agenda-table th {
  background-color: var(--gray);
  color: var(--dark-gray);
  font-size: 16px;
}

.agenda-table tr:nth-child(even) td {
  background-color: #f5f6fb;
}

/* Speakers Section modifications */
.speakers {
  padding: 60px 0;
  background-color: var(--gray);
}

/* Countdown styles */
.countdown-wrapper {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: var(--dark-gray);
}

#countdown {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--red);
}

/* Future price note */
.future-price {
  font-size: 0.85rem;
  color: var(--red);
  margin-top: -8px;
  margin-bottom: 10px;
}

/* Funds raised section */
.funds-raised {
  background-color: var(--gray);
  padding: 40px 0;
  text-align: center;
}
.funds-raised h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--dark-gray);
}
.funds-raised .funds-amount {
  font-size: 40px;
  font-weight: bold;
  color: var(--blue);
  margin-bottom: 5px;
}
.funds-raised .funds-date {
  font-size: 16px;
  color: var(--dark-gray);
}

/* Responsive agenda table */
@media (max-width: 768px) {
  .agenda-table {
    display: block;
    overflow-x: auto;
  }
  .agenda-table th,
  .agenda-table td {
    white-space: nowrap;
  }
  /* On very small screens, widen the time column further to prevent line breaks */
  .agenda-table th:nth-child(1),
  .agenda-table td:nth-child(1) {
    width: 25%;
    min-width: 90px;
  }
}

/* ---------------------------------------------------------------------- */
/* New responsive agenda list styles */

.agenda-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.agenda-list li {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.agenda-list li .time {
  display: block;
  color: var(--blue);
  font-size: 16px;
  margin-bottom: 6px;
}

.agenda-list li .event {
  font-size: 16px;
  color: var(--dark-gray);
}

.agenda-list li .speakers {
  font-size: 14px;
  color: var(--dark-gray);
  margin-top: 4px;
}

/* Highlight important sessions with bold text */
.agenda-list li.highlight .time,
.agenda-list li.highlight .event,
.agenda-list li.highlight .speakers {
  font-weight: bold;
}

/* Italic style for coffee breaks */
.agenda-list li.break .event {
  font-style: italic;
  color: var(--dark-gray);
}

@media (min-width: 768px) {
  .agenda-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.speakers h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.speakers .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.speaker-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1 1 300px;
  max-width: 350px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  transition: transform 0.3s;
}

/* Ensure the biography and link within each speaker card align so that the profile link sits at the bottom */
.speaker-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Push the last paragraph (which contains the profile link) to the bottom of the card */
.speaker-info p:last-child {
  margin-top: auto;
}

.speaker-card:hover {
  transform: translateY(-5px);
}

.speaker-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speaker-card.more .speaker-avatar {
  background-color: #e0e7ef;
  color: var(--dark-gray);
}

/* Ensure speaker images fill avatar */
.speaker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.speaker-info h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--dark-gray);
}

.speaker-info p {
  font-size: 16px;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.speaker-info a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.speaker-info a:hover {
  text-decoration: underline;
}

/* Location Section modifications */
.location {
  padding: 60px 0;
  background-color: var(--gray);
  text-align: center;
}

.location h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--dark-gray);
}

.location p {
  max-width: 800px;
  margin: 0 auto 10px;
  font-size: 16px;
  color: var(--dark-gray);
  line-height: 1.5;
}

.location a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.location a:hover {
  text-decoration: underline;
}

/* Partners Section */
.partners {
  padding: 60px 0;
  background-color: #ffffff;
}

.partners h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.partner-category {
  margin-bottom: 40px;
}

.partner-category h3 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  color: var(--dark-gray);
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.partner-logo-placeholder {
  width: 150px;
  height: 80px;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667ea0;
  font-size: 14px;
  border-radius: 4px;
  border: 1px dashed #ccd9e5;
}

/* Thank-you note below partners */
.partners-thanks {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  color: var(--dark-gray);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* Actual partner logo styles */
.partner-logo {
  width: 150px;
  height: 80px;
  object-fit: contain;
}

/* Charity Section */
.charity {
  padding: 60px 20px;
  background-color: var(--gray);
  text-align: center;
}

.charity h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--dark-gray);
}

.charity p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--dark-gray);
}

/* CTA Section */
.cta {
  padding: 60px 20px;
  background-color: var(--dark-gray);
  color: #ffffff;
  text-align: center;
}

.cta h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.cta p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #d9e4f5;
}

.cta .btn {
  background-color: var(--red);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.cta .btn:hover {
  background-color: #c33816;
}

/* Details Section */
.details {
  padding: 60px 0;
  background-color: var(--gray);
}

.details h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.details .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.detail-item {
  flex: 1 1 250px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.detail-item .icon {
  font-size: 32px;
  line-height: 1;
  color: var(--blue);
  flex-shrink: 0;
}

.detail-item h3 {
  font-size: 20px;
  margin-bottom: 5px;
  color: var(--dark-gray);
}

.detail-item p {
  font-size: 16px;
  color: var(--dark-gray);
}

/* Included Section */
.included {
  padding: 60px 0;
  background-color: #ffffff;
}

.included h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
}

.included ul {
  list-style: none;
  max-width: 700px;
  margin: 0 auto;
}

.included li {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--dark-gray);
}

.included .icon {
  font-size: 24px;
  margin-right: 12px;
  color: var(--blue);
}

/* Speakers Section */
.speakers {
  padding: 60px 0;
  background-color: var(--gray);
}

.speakers h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.speakers .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.speaker-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1 1 300px;
  max-width: 350px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
  transition: transform 0.3s;
}

.speaker-card:hover {
  transform: translateY(-5px);
}

.speaker-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--dark-gray);
}

.speaker-card p {
  font-size: 16px;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.speaker-card a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.speaker-card a:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------
 * Agenda Section Styles
 *
 * The agenda is presented as a grid of individual cards instead of a
 * traditional table. Each card shows the time, session title and speakers.
 * This layout improves responsiveness: cards wrap automatically based on
 * available space and stack on smaller screens. Break sessions are
 * italicised and do not display a speakers line. Highlighted sessions
 * include a red accent bar.
 */

.agenda {
  padding: 60px 20px;
  background-color: #ffffff;
}

.agenda h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
  color: var(--dark-gray);
}

.agenda-grid {
  /* Use flexbox instead of CSS grid to stack cards vertically. This prevents
     any unexpected horizontal overflow on narrow viewports and ensures
     consistent spacing between cards. */
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.agenda-card {
  background-color: var(--gray);
  border-radius: 8px;
  /* Add a transparent left border to ensure all cards take up the same
     horizontal space. The highlight class overrides the colour. */
  border-left: 4px solid transparent;
  padding: 20px 20px 20px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.agenda-card .agenda-time {
  color: var(--blue);
  font-weight: 700;
  font-size: 18px;
}

.agenda-card .agenda-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--dark-gray);
  line-height: 1.3;
}

.agenda-card .agenda-speakers {
  font-size: 14px;
  color: var(--dark-gray);
}

.agenda-card .agenda-speakers a {
    /* Use brand blue for speaker profile links to clearly indicate they are clickable */
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
  }

  .agenda-card .agenda-speakers a:hover {
    text-decoration: underline;
  }

/* Ensure long session titles and names wrap correctly within the card and
   do not cause horizontal scrolling on small screens. */
.agenda-card .agenda-title,
.agenda-card .agenda-speakers {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* On narrow screens remove the max-width from agenda-grid so it fills the
   available space and prevents horizontal scrolling. */
@media (max-width: 768px) {
  .agenda-grid {
    /* No special rules needed here since the agenda grid already fills the
       width of its container. Media query left intentionally empty. */
  }
}

/* Break sessions: italic title and normal colour/time */
.agenda-card.break .agenda-title {
  font-style: italic;
  font-weight: normal;
}
.agenda-card.break .agenda-time {
  color: var(--dark-gray);
  font-weight: normal;
}
.agenda-card.break .agenda-speakers {
  display: none;
}

/* Highlight sessions: red accent bar */
.agenda-card.highlight {
  border-left-color: var(--red);
}

/* Location Section */
.location {
  padding: 60px 0;
  background-color: var(--gray);
  text-align: center;
}

.location h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--dark-gray);
}

.location p {
  max-width: 800px;
  margin: 0 auto 10px;
  font-size: 16px;
  color: var(--dark-gray);
  line-height: 1.5;
}

.location a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.location a:hover {
  text-decoration: underline;
}

/* Call To Action Section */
.cta {
  padding: 60px 20px;
  background-color: var(--dark-gray);
  color: #ffffff;
  text-align: center;
}

.cta h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #ffffff;
}

.cta p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #d9e4f5;
}

.cta .btn {
  background-color: var(--red);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
}

.cta .btn:hover {
  background-color: #c33816;
}

/* Footer */
footer {
  padding: 40px 20px;
  background-color: var(--gray);
  text-align: center;
}

footer p {
  font-size: 14px;
  color: #667ea0;
  margin-bottom: 8px;
}

footer a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

footer a:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 36px;
  }
  .hero p {
    font-size: 18px;
  }
  .detail-item {
    flex: 1 1 100%;
  }
  .speaker-card {
    flex: 1 1 100%;
  }

  /* Show menu toggle and hide nav links by default on small screens */
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  .nav-links.active {
    display: flex;
  }
}