/* ==================================================
   LANDING PAGE STYLES
   ================================================== */

/* Content wrapper - provides consistent padding for main content areas */
.content-wrapper {
  padding: 20px; /* Standard padding for content spacing */
}

/* Landing page specific layout - removes default left/right padding
   to allow full-width content sections */
body.landing-page .region-content {
  padding-left: 0;  /* Remove default left padding for full-width layouts */
  padding-right: 0; /* Remove default right padding for full-width layouts */
}

/* ==================================================
   EVENTS LIST COMPONENT
   ================================================== */

/* Individual event item container - uses flexbox for date box and content alignment */
.events-styled-list .event-item {
  display: flex;           /* Flexbox layout for horizontal arrangement */
  margin-bottom: 15px;     /* Vertical spacing between event items */
  align-items: flex-start; /* Align items to top (important for multi-line content) */
}

/* ==================================================
   EVENT DATE BOX STYLING
   ================================================== */

/* Date display box - styled calendar-like appearance */
.event-date-box {
  background: #f8f9fa;     /* Light gray background for visual separation */
  border: 1px solid #dee2e6; /* Subtle border matching Bootstrap's border-color */
  text-align: center;      /* Center-align date text */
  padding: 8px 12px;       /* Compact padding for date box */
  margin-right: 15px;      /* Space between date box and event content */
  min-width: 50px;         /* Prevent shrinking below readable width */
  border-radius: 4px;      /* Rounded corners for modern appearance */
  flex-shrink: 0;          /* Prevent date box from shrinking in flex layout */
}

/* Month display within date box */
.event-date-box .month {
  font-size: 11px;         /* Small font for month abbreviation */
  font-weight: bold;       /* Bold for better readability */
  color: #666;             /* Medium gray for secondary text */
  text-transform: uppercase; /* Convert to uppercase (e.g., "JAN", "FEB") */
}

/* Day number display within date box */
.event-date-box .day {
  font-size: 20px;         /* Large, prominent font for day number */
  font-weight: bold;       /* Bold for emphasis and readability */
  color: #333;             /* Dark gray for primary text */
  line-height: 1;          /* Tight line height to reduce spacing */
}

/* ==================================================
   EVENT TITLE STYLING
   ================================================== */

/* Event title links - branded color styling with important declarations
   to override default link styles */
.events-styled-list .event-title a {
  color: #C8102E !important;
  text-decoration: none !important;
  font-size: 18px !important;
}

/* ==================================================
   EVENTS BLOCK FOOTER LINK STYLING
   ================================================== */

/* Footer link in the events block - styled similar to 'More News' link */
.view-events .view-footer a {
  text-decoration: none; /* Removes default underline */
  color: var(--bs-primary); /* Bootstrap primary for link styling */
}

/* Restore underline on hover/focus for accessibility */
.view-events .view-footer a:hover,
.view-events .view-footer a:focus {
  text-decoration: underline; /* Adds underline on interaction */
}

/* ==================================================
   LATEST NEWS BLOCK STYLING
   ================================================== */

/* View content wrapper - applies responsive right padding to separate from sidebar on larger screens */
@media (min-width: 768px) {
  .view-latest-news-block .view-content {
    padding-right: 50px; /* Adds spacing between content and adjacent column */
  }
}

/* Individual news item - vertical spacing between each article */
.view-latest-news-block .view-content .news.views-row {
  margin-bottom: 15px; /* Consistent spacing between stacked news items */
}

/* News title field - enhanced readability through font size and weight */
.view-latest-news-block .view-content .news.views-row .views-field-title {
  font-size: 18px;       /* Slightly larger text for emphasis */
  font-weight: 600;      /* Medium-bold for better hierarchy */
  line-height: 1.3;      /* Improves spacing for multi-line titles */
}

/* Footer link - disables underline by default, applies color for brand consistency */
.view-latest-news-block .view-footer a {
  text-decoration: none; /* Removes default underline */
  color: var(--bs-primary); /* Uses Bootstrap primary color for consistency */
}

/* Footer link hover/focus - restores underline for accessibility and clarity */
.view-latest-news-block .view-footer a:hover,
.view-latest-news-block .view-footer a:focus {
  text-decoration: underline; /* Adds underline on interaction */
}