/* Center the main title on the homepage */
.homepage-content h1 {
  text-align: center;   /* Center the H1 */
  margin-bottom: 0.25em; /* Reduce space below H1 slightly */
  margin-top: 1em;      /* Add some space above H1 */
}

/* Styling for the homepage tagline */
.tagline {
  font-size: 1.2rem;    /* Slightly larger than before, adjust if needed */
  font-weight: 400;
  color: #444;         /* Slightly darker gray for better readability */
  text-align: center;
  margin-top: 0;        /* Remove top margin, rely on h1 bottom margin */
  margin-bottom: 2em;   /* Increase space before the horizontal rule/slideshow */
  max-width: 750px;     /* Adjust max-width if needed for better wrapping */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;     /* Slightly more line spacing for wrapped text */
}

/* Optional: Style the horizontal rule for subtlety */
.homepage-content hr {
   border: 0;            /* Remove default border */
   height: 1px;          /* Make it thin */
   background-color: #ddd; /* Light gray color */
   margin-top: 1em;      /* Adjust space above HR */
   margin-bottom: 2.5em; /* Adjust space below HR (before slideshow) */
}

/* Increase list item spacing on pages using the 'homepage-content' class */
.homepage-content ul li {
    margin-bottom: 0.75em; /* Adjust value (e.g., 0.5em, 1em, 10px) if needed */
}
.homepage-content ol li { /* Add rule for ordered lists too, just in case */
    margin-bottom: 0.75em;
}

/* Add space ABOVE the University headings (h3) on pages using .homepage-content */
.homepage-content h3 {
  margin-top: 2em;  /* Adjust value as needed (e.g., 1.5em, 2.5em, 30px) */
  /* Optional: Add a little space below the heading too, if desired */
  /* margin-bottom: 0.5em; */
}

/* Increase line spacing for paragraphs within .homepage-content */
.homepage-content p {
  line-height: 1.7; /* Adjust this value - 1.5 is often default, try 1.6, 1.7, 1.8 */
  /* Optional: Add some space below the paragraph, before the first heading */
  margin-bottom: 1.5em; /* Adjust as needed */
}

/* --- SwiperJS Homepage Slideshow Adjustments --- */

/* Make the main container relatively positioned if not already,
   so absolute positioning of children works as expected. */
.swiper-container.hero-slideshow {
  position: relative;
  /* Add some bottom margin to create space for the dots below */
  margin-bottom: 40px; /* Adjust value as needed */
}

/* 1. Move Arrows Closer */
.swiper-container.hero-slideshow .swiper-button-prev {
  /* Adjust the 'left' value to bring it inwards */
  left: 10px; /* Example: 10px from the left edge. Adjust as needed. */
  /* You might need !important if theme styles are too specific */
  /* left: 10px !important; */
}

.swiper-container.hero-slideshow .swiper-button-next {
  /* Adjust the 'right' value to bring it inwards */
  right: 10px; /* Example: 10px from the right edge. Adjust as needed. */
  /* You might need !important */
  /* right: 10px !important; */
}

/* Ensure arrows are vertically centered if needed (Swiper usually does this) */
.swiper-container.hero-slideshow .swiper-button-prev,
.swiper-container.hero-slideshow .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}


/* 2. Move Dots Below Slideshow */
.swiper-container.hero-slideshow .swiper-pagination {
  /* Change positioning strategy */
  position: absolute; /* Keep absolute positioning relative to the container */
  bottom: -25px;     /* Position it BELOW the container. Adjust value as needed. */
  left: 0;           /* Align to the left edge of the container */
  width: 100%;       /* Make it full width */
  text-align: center;/* Center the dots within the full width */

  /* Remove any top/transform properties that might interfere */
  top: auto;
  transform: none;
}

/* Optional: Style the dots if needed */
.swiper-container.hero-slideshow .swiper-pagination .swiper-pagination-bullet {
  background-color: #cccccc; /* Example: grey inactive dots */
  opacity: 1;
}

.swiper-container.hero-slideshow .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #007bff; /* Example: blue active dot */
}

/* --- Make YouTube Video Smaller --- */

/* Target the wrapper div created by the Hugo youtube shortcode.
   Common classes might be 'embed', 'video-16x9', 'youtube-embed'.
   Inspect your page to confirm the correct class name.
   Let's assume it might have a class like 'embed' or similar. */

.embed, /* Try this first - common class */
.youtube-embed-wrapper, /* Or another class you find */
.video-16x9 /* Another possibility */
 {
  /* Set a maximum width for the video container */
  max-width: 600px; /* Adjust this value as needed (e.g., 500px, 700px) */

  /* Center the container if it's narrower than the available space */
  margin-left: auto;
  margin-right: auto;

  /* Add some space below the video if desired */
  margin-bottom: 1.5em;
}

/* Ensure the iframe inside fills the wrapper */
.embed iframe,
.youtube-embed-wrapper iframe,
.video-16x9 iframe {
    /* These styles are usually already applied by Hugo/theme for responsiveness,
       but including them ensures the iframe scales correctly within the
       now potentially smaller wrapper */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





/* static/css/custom.css - Implementing Option 3: Calm & Authoritative */

/* --- Base Colors --- */
:root {
  --primary-color: #4A90E2; /* Academic Blue */
  --secondary-color: #1C3F94; /* Darker Blue for hover/accents */
  --light-accent-color: #A8D0F5; /* Lighter Blue for subtle highlights */
  --header-bg-color: #EBF5FF; /* Alice Blue for header background */
  --text-color: #333333; /* Dark Grey for text */
  --body-bg-color: #FFFFFF; /* White background */
}

/* --- General Elements --- */
body {
  color: var(--text-color);
  background-color: var(--body-bg-color);
}

/* --- Links --- */
a {
  color: var(--primary-color);
  text-decoration: none; /* Optional: remove underline */
}

a:hover,
a:focus {
  color: var(--secondary-color);
  text-decoration: underline; /* Optional: add underline on hover */
}

/* --- Buttons (adjust selectors as needed, e.g., .btn, .button) --- */
.btn-primary { /* Assuming a common Bootstrap-like class */
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff; /* White text on buttons */
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
}

/* --- Header/Navbar (adjust selectors as needed, e.g., .navbar, header) --- */
.navbar { /* Or the theme's specific header class */
  background-color: var(--header-bg-color);
  /* You might need to adjust link colors within the navbar specifically */
}

.navbar a { /* Example: Targeting links within the navbar */
   color: var(--primary-color); /* Or maybe var(--text-color) depending on preference */
}

.navbar a:hover,
.navbar a:focus {
   color: var(--secondary-color);
}

/* --- Optional: Subtle borders or highlights --- */
hr {
  border-top: 1px solid var(--light-accent-color);
}

/* You might add borders to cards or other elements */
.card { /* Example selector */
  border: 1px solid #eee; /* Keep subtle or use var(--light-accent-color) */
}

/* --- Energy Unit Converter Styles --- */
.converter-subtitle { /* Style the subtitle */
    text-align: center;
    margin-top: -0.5em; /* Adjust spacing relative to H3 */
    margin-bottom: 1.5em;
    color: #555; /* Slightly muted text color */
    font-size: 0.9em;
}

.energy-converter-form {
    max-width: 400px; /* Adjust width as desired */
    margin: 1em auto; /* Center the form horizontally, add vertical space */
    padding: 20px 25px; /* Padding inside the box */
    border: 1px solid #ddd; /* Softer border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f8f9fa; /* Very light grey background */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}

.converter-row {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align input and label */
    margin-bottom: 12px; /* Space between rows */
}

.converter-row input[type="text"] {
    flex-grow: 1; /* Allow input to take available space */
    padding: 10px 12px; /* More padding inside input */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem; /* Ensure readable font size */
    margin-right: 15px; /* Space between input and label */
    text-align: right; /* Right-align numbers */
    min-width: 0; /* Prevent flexbox overflow issues */
}

.converter-row label {
    flex-shrink: 0; /* Prevent label from shrinking */
    width: 90px; /* Fixed width for labels for alignment */
    font-weight: 500; /* Slightly bolder */
    font-size: 0.95rem;
    color: #333;
    text-align: left; /* Align label text to the left */
}

/* Optional: Style the H3 heading if needed */
/* h3 { text-align: center; } */ /* Uncomment if you want the main H3 centered */

.converter-title {
    text-align: center;
    margin-bottom: 0.5em; /* Adjust spacing if needed */
}


/* Two-column layout for the Explore page */
.explore-columns {
  display: flex;
  flex-wrap: wrap; /* Allows columns to stack on smaller screens if needed */
  margin-top: 1.5em; /* Add some space below the main title/header */
}

.explore-column {
  /* flex: 1; */     /* Remove or comment out this line */
  flex: 0 1 auto; /* Prevent growing, allow shrinking, base width on content */
  min-width: 250px; /* Minimum width before wrapping, adjust as needed */
  padding: 0;       /* Ensure no internal padding adds space */
  margin-right: 2em;/* Add space AFTER this column (adjust value as needed) */
}

/* Remove margin from the last column to prevent extra space on the right */
.explore-column:last-child {
  margin-right: 0;
}

/* Optional: Style the lists within the columns */
.explore-column ul {
  list-style: none; /* Removes default bullet points */
  padding-left: 0; /* Removes default padding */
}

.explore-column li {
  margin-bottom: 0.5em; /* Adds spacing between list items */
}

.explore-column h2 {
    margin-bottom: 0.75em; /* Space below column titles */
    /* Add any other specific styling for column titles if desired */
}

/* --- Bulletin Board --- */

/* Corrected rule based on inspector: Target the h6 with class 'card-subtitle' */
.card-body .card-subtitle {
  font-size: 1.0rem !important; /* Make it much larger, like the h4 title */
  font-weight: 900 !important;   /* Make it bolder */
  color: var(--bs-body-color) !important; /* Override the grey 'text-muted' color */
}