/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:wght@400;700&display=swap');

/* Define CSS Variables */
:root {
  --primary-red: #a02c2c;
  --primary-blue: #1e3a5f;
  --text-dark: #333333;
  --text-light: #ffffff;
  --bg-light: #ffffff;
  --bg-accent: #f0f0f0;
  --border-color: #dddddd;
  --header-font: 'Merriweather', serif;
  --body-font: 'Lato', sans-serif;
  --container-max-width: 880px;
  --spacing-unit: 1rem;
}

/* Basic Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  line-height: 1.6;
  color: var(--text-dark);
  /* --- UPDATED: Background Color --- */
  background-color: #7e0f0a;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary-red);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: #6d0000;
  text-decoration: underline;
}

h1,
h2 {
  font-family: var(--header-font);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: var(--spacing-unit);
}

/* --- Keep H3 styling for section titles --- */
h3 {
  font-family: var(--header-font);
  font-size: 1.75rem; /* Default H3 size, adjust if needed */
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

/* --- Keep H4 styling for event day headers --- */
h4 {
  font-family: var(--header-font);
  font-size: 1.5rem; /* Default H4 size, adjust if needed */
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

/* --- Keep H5 styling for event titles --- */
h5 {
  font-family: var(--header-font);
  font-size: 1.25rem; /* Default H5 size, adjust if needed */
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

p {
  margin-bottom: var(--spacing-unit);
  /* --- UPDATED: Paragraph Font Size --- */
  font-size: 1rem;
}

ul,
ol {
  margin-left: calc(var(--spacing-unit) * 1.5);
  margin-bottom: var(--spacing-unit);
}

/* Layout */
.container {
  max-width: var(--container-max-width);
  margin: calc(var(--spacing-unit) * 1.5) auto;
  background-color: var(--bg-light);
  padding: calc(var(--spacing-unit) * 1.5);
  /* --- UPDATED: Drop Shadow (increased spread) --- */
  box-shadow: 0 0 10px 2px black; /* Increased spread to 2px */
  border-radius: 5px;
}

.site-header .header-banner {
  width: 100%;
  /* --- UPDATED: Header Margin Bottom --- */
  margin-bottom: 0;
}

/* Navigation */
.main-nav {
  background-color: var(--primary-blue);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--spacing-unit);
  display: flex;
  justify-content: flex-start;
  gap: calc(var(--spacing-unit) * 1.5);
}

.main-nav ul li a {
  color: var(--text-light);
  font-weight: 700;
  text-decoration: none;
  padding: calc(var(--spacing-unit) * 0.5) 0;
  display: block;
  transition: background-color 0.2s ease;
}

.main-nav ul li a:hover,
.main-nav ul li a:focus {
  text-decoration: underline;
  color: #cccccc;
}

/* Main Content Sections */
.main-content {
  padding: var(--spacing-unit) 0;
}

.section-divider {
  border: 0;
  height: 1px;
  background-color: var(--border-color);
  /* --- UPDATED: Reduced HR margins --- */
  margin: var(--spacing-unit) 0;
}

.section-title {
  color: var(--primary-blue);
  margin-bottom: var(--spacing-unit);
  padding-bottom: calc(var(--spacing-unit) * 0.25);
  border-bottom: 2px solid var(--primary-red);
  display: inline-block;
  font-size: 20px;
}

/* Specific Section Styling (if needed for CME) */
.cme-info h3 {
    /* Example: Slightly smaller H3 for CME section if desired */
    /* font-size: 1.5rem; */
    margin-top: var(--spacing-unit); /* Add space above CME headings */
}
.cme-info h3:first-of-type {
    margin-top: 0; /* Remove top margin for the very first heading in CME */
}


/* Guest Speaker Layout */
.guest-speaker .speaker-info {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 1.5);
  align-items: flex-start;
}

.guest-speaker .speaker-photo {
  flex: 0 0 180px;
  border-radius: 4px;
}

.speaker-photo {
  float: left;
  margin: 0 10px 10px 0;
}

.guest-speaker .speaker-info p {
  flex: 1 1 300px;
  margin-bottom: 0;
}

/* Meeting Events Section Styling */
.meeting-events {
  margin-top: calc(var(--spacing-unit) * 0.5);
}

.meeting-events > .section-title {
  display: block;
  border-bottom: 2px solid var(--primary-red);
  padding-bottom: calc(var(--spacing-unit) * 0.25);
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* Event Day Header Styling */
.event-day-header {
  background-color: var(--bg-accent);
  padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
  margin-top: calc(var(--spacing-unit) * 1.5);
  margin-bottom: var(--spacing-unit);
  font-size: 1.2rem; /* Keep specific size for day headers */
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

/* Event Article Styling */
.event {
  margin-bottom: calc(var(--spacing-unit) * 1.25);
  padding-left: calc(var(--spacing-unit) * 0.5);
  border-left: 3px solid transparent;
}

/* Event Title (h5) Styling */
.event h5 {
  color: var(--primary-blue);
  font-size: 1.15rem; /* Keep specific size for event titles */
  margin-bottom: calc(var(--spacing-unit) * 0.15);
}

/* Event Paragraph Styling (General) */
.event p {
  margin-bottom: calc(var(--spacing-unit) * 0.4);
  line-height: 1.55;
  /* font-size: 90%; Inherited from global p style */
}

/* Specific Event Paragraphs (Location, Notes) */
.event p.event-location {
  font-weight: normal;
  margin-bottom: calc(var(--spacing-unit) * 0.4);
}

.event p.event-location strong {
  font-weight: 700;
  color: var(--text-dark);
}

.event p.event-note {
  font-style: italic;
  color: #555;
  font-size: 0.9em; /* Relative to parent p's 90% */
  margin-bottom: calc(var(--spacing-unit) * 0.4);
}

.event p:last-child {
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

/* Details/Summary (Read more toggle) */
details {
  margin-top: 0;
}

details summary {
  cursor: pointer;
  color: var(--primary-red);
  font-size: 0.9rem;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

/* --- Visibility Utility --- */
.hidden {
  display: none !important; /* Use !important to help override potential conflicts */
}


/* Footer */
.site-footer {
  text-align: center;
  padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: var(--container-max-width);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer p {
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer a:hover,
.site-footer a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    html {
      font-size: 93.75%;
    }
  
    .container {
      margin: var(--spacing-unit) auto;
      padding: var(--spacing-unit);
      max-width: 95%;
    }
  
    .guest-speaker .speaker-info {
      flex-direction: column;
      align-items: center;
    }
  
    .guest-speaker .speaker-photo {
      /* --- CORRECTED: Removed margin-bottom --- */
      /* Rely on the 'gap' property of the flex container for spacing */
      /* margin-bottom: var(--spacing-unit); */
    }
  
    .event {
      padding-left: 0;
      border-left: none;
    }
  }
  


/* --- REVISED Spacing Adjustments for Form in modern-style.css --- */

#registration-form-container {
  /* No extra padding needed if container already has it */
}

#registration-form-container fieldset {
  margin-bottom: var(--spacing-unit); /* Reduced space between fieldsets */
  padding: var(--spacing-unit); /* Reduced padding inside fieldsets */
  border: 1px solid var(--border-color); /* Keep border for visual grouping */
}

#registration-form-container legend {
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* Slightly reduced space below legends */
    font-size: 1.1em; /* Keep legend size */
}

#registration-form-container label {
  margin-bottom: calc(var(--spacing-unit) * 0.15); /* Significantly reduced space below labels */
  display: block;
  font-weight: bold; /* Keep labels bold */
}

/* Reduce space below input fields */
#registration-form-container input[type="text"],
#registration-form-container input[type="email"],
#registration-form-container input[type="tel"],
#registration-form-container input[type="number"],
#registration-form-container select,
#registration-form-container textarea {
  margin-bottom: calc(var(--spacing-unit) * 0.75); /* Reduced space below input fields */
  padding: calc(var(--spacing-unit) * 0.5); /* Slightly reduced padding inside inputs */
  width: 100%;
  max-width: 400px; /* Reduced max-width slightly */
  border: 1px solid var(--border-color); /* Ensure border */
  border-radius: 3px; /* Slightly smaller radius */
}

/* Spacing for radio button groups */
#registration-form-container .radio-group {
  margin-bottom: calc(var(--spacing-unit) * 0.5); /* Reduced space below radio groups */
  padding-left: 0; /* Remove indent for radios */
}

#registration-form-container .radio-group label {
  display: inline-block;
  margin-right: var(--spacing-unit); /* Reduced space between radio options */
  margin-bottom: calc(var(--spacing-unit) * 0.25); /* Small space below radios if they wrap */
  font-weight: normal;
}
/* Ensure radio inputs themselves don't have extra margin */
#registration-form-container input[type="radio"] {
    margin-bottom: 0;
}


/* Spacing within event items */
#registration-form-container .event-item {
  margin-bottom: var(--spacing-unit); /* Reduced space between event items */
  padding-bottom: var(--spacing-unit); /* Reduced padding below event items */
  border-bottom: 1px solid var(--border-color);
}
 #registration-form-container .event-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

/* Event titles (H5) */
#registration-form-container .event-item h5 {
    margin-bottom: calc(var(--spacing-unit) * 0.35); /* Reduced space below event title */
    font-size: 1.1rem; /* Slightly smaller event title */
}

/* Casino chips input needs its label */
#registration-form-container .event-item label[for="casinoChips"] {
    margin-bottom: calc(var(--spacing-unit) * 0.15); /* Consistent label spacing */
}
#registration-form-container .event-item input#casinoChips {
    display: inline-block; /* Allow cost span next to it */
    width: auto; /* Don't force full width */
    max-width: 100px; /* Limit width */
    margin-right: var(--spacing-unit); /* Space before cost span */
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* Space below */
}


#registration-form-container .cost {
  display: inline; /* Allow cost span next to radio/input */
  margin-top: 0;
  margin-left: calc(var(--spacing-unit) * 0.5); /* Space after radio label */
  font-size: 0.85em; /* Smaller cost text */
  font-style: italic;
  color: #555;
}
/* Special case for casino chips cost span */
#registration-form-container input#casinoChips + .cost {
    display: inline; /* Keep inline */
}


/* Spacing for total/payment info */
 #registration-form-container #total-amount-display,
 #registration-form-container #payment-info {
     margin-top: var(--spacing-unit); /* Reduced space above total/payment */
     padding: calc(var(--spacing-unit) * 0.75); /* Adjust padding */
 }

 #registration-form-container button[type="submit"] {
     margin-top: var(--spacing-unit); /* Reduced space above submit button */
     padding: calc(var(--spacing-unit)*0.6) calc(var(--spacing-unit)*1.2); /* Adjust button padding */
 }

 /* Apply styles when the screen width is 768px or less */
@media (max-width: 768px) {
  /* Target <a> tags that are inside <li> tags, which are inside a <ul> with the class 'nav-links' */
  ul.nav-links li a {
    font-size: 1em;
  }
}