/*
 * Global styles for the CEO Retreat website.
 *
 * The palette emphasises blue with purple accents. Sections are clean and
 * spacious to ensure readability and a polished, professional look.
 */

:root {
  /* Simplified natural palette inspired by an open pasture.  More white and
   * neutral tones dominate with muted greens and browns as accents. */
  /* Leadership Edge Summit palette inspired by the new blue and purple logo */
  --primary-colour: #1f3c88;      /* deep blue for headings and accents */
  --secondary-colour: #6b2fa4;    /* rich purple as a secondary accent */
  --accent-blue: #1f3c88;         /* accent blue matching the primary */
  --accent-purple: #6b2fa4;       /* accent purple matching the secondary */
  --background-colour: #f8f8f9;   /* very light grey background */
  --text-colour: #333333;         /* dark grey for readability */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: var(--background-colour);
  color: var(--text-colour);
  line-height: 1.5;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
  border-bottom: 4px solid var(--secondary-colour);
}

/*
 * The left side of the header contains the logo and the event dates. It
 * occupies one third of the header width. Dates stack beneath the logo on
 * larger screens and centre-align on small screens.
 */
/*
 * The left side of the header holds the logo and the event information.
 * To create a more balanced header, the logo is kept deliberately small
 * and the event title and date sit beside it in a single column.  The
 * container uses row direction so the text appears to the right of the
 * logo. Adjust the flex-basis to control how much space this group
 * occupies relative to the navigation.
 */
.header-left {
  flex: 0 0 35%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Reduce the logo footprint drastically so that it doesn't overpower
 * the header. A fixed width ensures consistent sizing across pages. */
.header-left .logo {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

/* Wrapper for the event title and date beside the logo */
.title-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Event title styling when placed beside the logo */
.title-date .event-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-colour);
}

/* Event date styling below the event title */
.title-date .event-date {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--secondary-colour);
}

/* Remove unused event-info rules from earlier designs */
header .event-info,
header .event-info h1,
header .event-info .event-date,
header .event-info .editable-note {
  display: none;
}

/* Navigation */
nav.site-nav {
  /* Allow the nav to occupy the remaining width without forcing extra margins */
  display: flex;
  gap: 24px;
  align-items: center;
}

nav.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--secondary-colour);
  padding-bottom: 4px;
}

nav.site-nav a:hover {
  color: var(--primary-colour);
}

nav.site-nav a.active {
  color: var(--primary-colour);
  border-bottom: 2px solid var(--primary-colour);
}

/* Main content container for forms */
main {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

/* The home page uses a custom class to override the default flex layout of
 * the main container.  This ensures the hero and info panels stack
 * vertically rather than side by side. */
.home-main {
  display: block;
}

form {
  width: 100%;
  max-width: 900px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Form section headings */
.form-section {
  margin-bottom: 32px;
}

.form-section h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 5px solid var(--primary-colour);
  color: var(--primary-colour);
}

/* Field grouping */
.field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.field-group label {
  font-weight: 600;
  margin-bottom: 6px;
}

.field-group label span {
  color: var(--primary-colour);
}

.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="url"],
.field-group input[type="tel"],
.field-group input[type="datetime-local"],
.field-group input[type="number"],
.field-group input[type="file"],
.field-group textarea,
.field-group select {
  padding: 10px 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.field-group input[type="datetime-local"] {
  max-width: 300px;
}

.field-group input[type="datetime-local"] + input[type="text"] {
  margin-top: 8px;
}

.field-group textarea {
  resize: vertical;
}

/* Checkbox group styling */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 5px;
  margin-top: 4px;
}

.checkbox-group input[type="text"] {
  margin-top: 5px;
  max-width: 300px;
}

/* Arrival group to allow date/time and airport code to stack on small screens */
.arrival-group input[type="datetime-local"],
.arrival-group input[type="text"] {
  max-width: 300px;
}

/* Form actions */
.form-actions {
  text-align: center;
  margin-top: 20px;
}

button[type="submit"] {
  background-color: var(--primary-colour);
  color: #ffffff;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: var(--secondary-colour);
}

/* Home page sections */
.hero {
  position: relative;
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  /* Set a fixed height for the hero so the image can fully cover the area */
  height: 500px;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * The hero overlay uses a subtle dark gradient to improve legibility of text
 * over the image. Reduce the opacity values for a lighter, more open feel.
 */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 8px;
  /* Very light gradient to allow the background image to show through.  This
   * keeps the hero clean and airy while still ensuring text legibility. */
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hero-overlay h2 {
  font-size: 2.4rem;
  margin-bottom: 14px;
}

.hero-overlay p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
}

/*
 * Responsive adjustments for the hero on smaller screens.  When the
 * viewport width drops below 600px (typical mobile sizes), reduce
 * the heading and paragraph font sizes so that the title and copy
 * don't overflow or get cut off.  The desktop sizing above remains
 * unchanged for larger screens.
 */
@media (max-width: 600px) {
  .hero-overlay h2 {
    font-size: 1.6rem;
  }
  .hero-overlay p {
    font-size: 1rem;
  }
  /* Allow the info panels to shrink naturally on mobile so there isn't
   * unnecessary white space beneath the event details panel. */
  .info-panels .about,
  .info-panels .details {
    min-height: auto;
  }
  /* Reduce itinerary font size and padding on smaller screens so the
   * schedule fits comfortably without cutting off content. */
  .itinerary-table {
    font-size: 0.9rem;
  }
  .itinerary-table th,
  .itinerary-table td {
    padding: 6px 8px;
  }
  /* Reduce form heading and input sizes for better mobile readability */
  .form-section h2 {
    font-size: 1.3rem;
  }
  .field-group input[type="text"],
  .field-group input[type="email"],
  .field-group input[type="url"],
  .field-group input[type="tel"],
  .field-group input[type="datetime-local"],
  .field-group input[type="number"],
  .field-group input[type="file"],
  .field-group textarea,
  .field-group select {
    font-size: 0.9rem;
  }

  /* On small screens the About and Event Details panels will naturally stack
   * using the existing CSS grid defined on .info-panels. No special ordering
   * or flex behaviour is required. */

  /* Maintain readable form section headings but reduce size slightly to
   * accommodate narrow screens. */
  .form-section h2 {
    font-size: 1.1rem;
    line-height: 1.3;
    word-wrap: break-word;
  }

  /* Resize itinerary tables for mobile without changing their structure so
   * the time remains on the same line as the activity. Shrink the font
   * slightly and adjust padding. */
  .itinerary-table {
    font-size: 0.8rem;
    table-layout: auto;
  }
  .itinerary-table th,
  .itinerary-table td {
    padding: 6px 8px;
  }
  .itinerary-table th {
    width: 30%;
    font-size: 0.8rem;
  }

  /* Allow the itinerary table to scroll horizontally on very narrow screens
   * instead of cutting off content. Set display: block so overflow-x works. */
  .itinerary-table {
    display: block;
    overflow-x: auto;
  }
  /* Ensure cells wrap long content gracefully when they must wrap */
  .itinerary-table td {
    white-space: normal;
    word-wrap: break-word;
  }

  /* Increase itinerary day headings on mobile to match registration page
   * section headings for better hierarchy. */
  .itinerary-day h2 {
    font-size: 1.4rem;
  }
}

.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 32px;
  /* Balanced gradient using the new blue and purple accents */
  background-image: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: opacity 0.3s ease;
}

.cta-button:hover {
  opacity: 0.9;
}

/*
 * Content panels for the home page.
 * Increase max width and padding slightly for a more spacious and readable
 * layout. A slightly stronger shadow provides separation from the
 * parchment background.
 */
.about,
.details {
  max-width: 920px;
  margin: 60px auto;
  background-color: #ffffff;
  padding: 40px 50px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-size: 1.1rem;
  line-height: 1.65;
}

.about p {
  margin-bottom: 1.2rem;
}

/*
 * Section titles in the about and details panels. Larger typography and
 * increased margin improve hierarchy and visual breathing room.
 */
.about h2,
.details h2 {
  color: var(--primary-colour);
  border-left: 5px solid var(--primary-colour);
  padding-left: 12px;
  margin-bottom: 18px;
  font-size: 1.9rem;
}

.details-list {
  list-style: none;
  padding-left: 0;
}

.details-list li {
  margin-bottom: 6px;
}

/* List styling for the About section benefits list */
.about-list {
  margin: 0 0 1.2rem 20px;
  padding-left: 0;
  list-style: disc;
}

.about-list li {
  margin-bottom: 0.4rem;
}

.cta-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--secondary-colour);
  font-weight: 600;
  text-decoration: none;
}

.cta-link:hover {
  text-decoration: underline;
}

/*
 * Info panels container groups the About and Details sections on the
 * home page so that they sit side by side on wider screens and share
 * equal heights. On small screens the panels will wrap naturally.
 */
/*
 * Use CSS grid for the info panels so that the About and Details boxes sit
 * side by side on larger screens and automatically adjust to equal height.
 * The minmax function ensures each column has a reasonable minimum width
 * and grows proportionally to fill the available space.  On smaller
 * screens the panels will stack naturally.
 */
.info-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 40px;
  /* Stretch items to fill the row and column available so panels are equal height */
  align-items: stretch;
  justify-items: stretch;
  /* Ensure each row in the grid takes up equal height, so panels share
   * the same vertical space even if their content differs in length */
  grid-auto-rows: 1fr;
}

/* Ensure that each direct child of the info-panels stretches to match the
 * height of the tallest panel, keeping the About and Details boxes the
 * same height even when their content lengths differ. */
.info-panels > * {
  align-self: stretch;
}

/* Each panel uses flex layout internally so that content stacks
 * vertically and fills the available height provided by the grid. */
/* Both panels share a minimum height to present a balanced look. The
 * min-height value should be adjusted if the content length changes.
 */
.info-panels .about,
.info-panels .details {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Reduce the minimum height of each info panel to minimise excess
   * white space beneath shorter panels. This still ensures the panels
   * remain balanced across the row without forcing an overly tall
   * container. */
  min-height: 500px;
}

.info-panels .about {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Match the reduced minimum height for the about panel as well */
  min-height: 500px;
}

/* Itinerary page styles */
.itinerary-day {
  margin-bottom: 40px;
}

.itinerary-day h2 {
  font-size: 1.6rem;
  color: var(--primary-colour);
  border-left: 5px solid var(--primary-colour);
  padding-left: 10px;
  margin-bottom: 10px;
}

.itinerary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 1rem;
}

.itinerary-table th,
.itinerary-table td {
  padding: 8px 10px;
  border: 1px solid #dddddd;
  vertical-align: top;
}

.itinerary-table th {
  background-color: var(--primary-colour);
  color: #ffffff;
  text-align: left;
  width: 22%;
  font-size: 1rem;
}

.itinerary-table tr:nth-child(odd) td {
  background-color: #fdfdfd;
}

/* Highlight itinerary content when in edit mode */
.editable-itinerary {
  outline: 2px dashed var(--secondary-colour);
  padding: 5px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  header {
    flex-direction: column;
    text-align: center;
  }
  /* Stack the logo above the title/date on small screens */
  .header-left {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .header-left .logo {
    width: 50px;
    margin-bottom: 0;
  }
  .arrival-group input[type="datetime-local"],
  .arrival-group input[type="text"] {
    max-width: 100%;
  }
}