/* ===== Base & Resets ===== */
body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #ffffff; /* #e0f2f1  if Light greenish background similar to the old ihoa.org */ }
a { text-decoration: none; color: inherit; }
/*
a:hover {
    color: red; 
}
a:visited {
    color: purple; 
}
*/

/* ===== Header ===== */
header { background-color: white; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000; /* Keeps it above other content */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a distinct look */ }
header .logo { position: absolute; left: 8%; /* Adjusted for better spacing */ top: 50%; transform: translateY(-50%); }
header .logo img { height: 50px; }

/* ===== Navigation ===== */
nav ul { list-style-type: none; display: flex; justify-content: right; gap: 20px; margin-right: 10%; padding: 0; position: relative; /* For dropdown positioning */ }
nav ul li { position: relative; padding: 10px; }
nav ul li a { font-family: 'Arial', sans-serif; font-size: 1.1rem; font-weight: normal; color: #333; text-decoration: none; /* underline, overline, line-through */ text-transform: none; /* capitalize, uppercase, lowercase */ }
nav ul li a:hover { color: #00695c; /* Add hover effect with a distinct color */ }

/* Dropdown */
nav ul li .dropdown-content { display: none; position: absolute; top: 100%; /* Position below parent menu item */ left: 0; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 10px 0; z-index: 1000; /* Ensure it appears above other content */ white-space: nowrap; }
nav ul li .dropdown-content li { padding: 5px 20px; }
nav ul li .dropdown-content li a { display: block; color: #333; text-decoration: none; font-family: 'Arial', serif; }
nav ul li .dropdown-content li a:hover { background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */ color: #00695c; }
nav ul li:hover .dropdown-content { display: block; }

/* ===== Hamburger ===== */
.hamburger { display: none; /* Hide hamburger menu on larger screens */ cursor: pointer; }
.hamburger span { display: block; height: 3px; width: 25px; background-color: #333; margin-bottom: 5px; transition: all 0.3s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== Slideshow ===== */
.slideshow { position: relative; }
.slideshow-container { width: 100%; height: 600px; position: relative; overflow: hidden; margin-top: 60px; /* Ensures slideshow is fully visible below the fixed header */ }
.mySlides { display: none; position: absolute; width: 100%; height: 100%; }
.fade { animation: fadeEffect 1.5s ease-in-out; }
@keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }
.slideshow .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-family: 'Playfair Display', serif; letter-spacing: 1px; font-weight: 800; padding: 0; }
.slideshow .overlay-text h2 { font-size: 4.0rem; margin-bottom: -10px; font-weight: normal; }
.slideshow .overlay-text h3 { font-size: 3.0rem !important; margin-bottom: 10px; font-weight: normal; }
.slideshow .overlay-text p { font-size: 2.2rem; margin-bottom: 15px; font-style: italic; font-weight: normal; }

/* ===== Sections ===== */
/* Welcome */
.welcome { text-align: center; padding: 40px; background-color: #ffffff; }
.welcome .text-content { width: 80%; margin: 0 auto; text-align: center; padding: 40px; font-family: 'Georgia', serif; }
.welcome .text-content h1 { font-size: 3rem; font-family: 'Playfair Display', serif; margin-bottom: 20px; color: #00695c; font-weight: bold; }
.welcome .text-content p { font-size: 1.2rem; font-family: 'Roboto Condensed', sans-serif; color: #333; line-height: 1.6; /* Line height for better readability */ }

/* Map/Parallax */
.slidingWindow-window { background-position: center; background-attachment: fixed; background-size: cover; height: 350px; width: 80%; margin: 0 auto; position: relative; }
.google-map { background-position: center; background-attachment: fixed; background-size: cover; width: 80%; height: 350px; margin: 0 auto; position: relative; }

/* Second text */
.secondText { padding: 40px; background-color: #ffffff; max-width: 1200px; margin: 0 auto; text-align: center; width: 80%; }
.secondText h2 { font-size: 2.5rem; font-family: 'Playfair Display', serif; color: #00695c; }
.secondText p { font-size: 1.2rem; font-family: 'Roboto Condensed', serif; color: #333; }

/* 2x2 image/text */
.image-text-combination { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; /* gap between frames */ max-width: 1200px; margin: 0 auto; padding: 10px; margin-bottom: 0px; }
.image-text-combination .box { background-color: #f2ece1; /* Beige frame */ padding: 25px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; /* Ensure content stays at the top */ height: 450px; /* border-radius: 10px; /* Uncomment for rounded corners */ }
.image-text-combination .box img { width: 100%; height: 70%; object-fit: cover; margin-bottom: 0px; }
.image-text-combination .box .text-content { padding-top: 0px; text-align: center; height: 30%; font-family: 'Roboto Condensed', sans-serif; }
.image-text-combination .box .text-content h3 { background-color: Transparent; font-size: 1.5em; font-family: 'Playfair Display', serif; margin-top: -15px !important; /* Reduce this value to decrease space */ }
.image-text-combination .box .text-content p { background-color: Transparent; font-size: 1.2em; color: #333; line-height: 1.3; /* Adjust line spacing */ margin-top: -10px !important; /* Reduce this value to decrease space */ }
/* 
.overlay-container:hover .overlay { opacity: 1; }  Show the overlay when hovered 
*/

/* ===== Lists & Documents ===== */
.document-list { margin-top: 30px; font-family: 'Roboto Condensed', sans-serif; padding-left: 20px; padding-right: 20px; max-width: 800px; margin-left: auto; margin-right: auto; }
.document-list-heading { font-family: 'Playfair Display', serif; font-size: 24px; color: #333; margin-bottom: 15px; text-align: center; }
.document-article-list { list-style-type: none; padding-left: 0; }
.document-article-list li { margin-bottom: 15px; }
.document-article-link { font-family: 'Roboto Condensed', sans-serif; font-size: 16px; color: #006400; /* Green color to match the theme */ text-decoration: none; display: block; padding: 10px; border-radius: 5px; transition: background-color 0.3s, color 0.3s; }
.document-article-link:hover { text-decoration: underline; color: #004d00; /* Darker green on hover */ background-color: #f0f8f0; /* Light green background on hover */ }
.document-article-list li:hover { background-color: #f4f4f4; /* Light gray background on hover */ padding: 5px; }

/* Board files/minutes */
.column-list-container, .board-files-list { width: 90%; margin: 0 auto; /* Center the container horizontally */ padding-left: 20px; /* Adds space from the left */ padding-right: 20px; /* Optional: Adds space on the right */ }
.four-column-list { display: grid; grid-template-columns: repeat(4, 1fr); /* Create 4 equal-width columns */ gap: 10px; /* Add space between grid items */ list-style-type: none; /* Removes default list bullets */ padding-left: 20px; /* Adds padding to the left of the list */ /*margin-left: 0; /* Reset any potential negative margin */ }
.three-column-list { display: grid; grid-template-columns: repeat(3, 1fr); /* Create 3 equal-width columns */ gap: 10px; /* Add space between grid items */ list-style-type: none; /* Removes default list bullets */ padding-left: 20px; /* Adds padding to the left of the list */ /*margin-left: 0; /* Reset any potential negative margin */ }
.two-column-list, .three-column-list li { padding: 0px; /* Add padding inside each list item */ margin: 0; /* Remove margin from individual items */ box-sizing: border-box; margin-bottom: 10px; /* Adds spacing between each item */ }

/* ===== Tables ===== */
.directors-table { width: 100%; margin: 20px auto; border-collapse: collapse; text-align: left; font-family: 'Roboto Condensed', sans-serif; background-color: #f9f9f9; border: 1px solid #ddd; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); }
.directors-table thead { background-color: #00695c; /* Dark green header */ color: #fff; }
.directors-table thead th { padding: 12px 15px; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; }
.directors-table tbody tr:nth-child(even) { background-color: #f2f2f2; /* Alternate row color for readability */ }
.directors-table tbody tr:hover { background-color: #e0f7fa; }
.directors-table tbody td { padding: 10px 15px; font-size: 0.95rem; border: 1px solid #ddd; vertical-align: top; }
.directors-table tbody td a { color: #00695c; text-decoration: none; font-weight: 500; }
.directors-table tbody td a:hover { text-decoration: underline; }

/* ===== Typography helpers ===== */
body .roboto-list-item { font-family: 'Roboto Condensed', sans-serif !important; font-weight: 400; font-size: 1rem; }
.roboto-list-item a { color: #00695c; /* Color for the links */ text-decoration: none; /* Remove underlining */ font-weight: 400; /* Regular weight for links */ }
.roboto-list-item a:hover { color: #004d40; /* Darker color on hover */ text-decoration: underline; /* Underline on hover */ }

/* ===== Footer ===== */
.footer { background-color: #333333; /* Dark grey background */ color: white; padding: 40px 20px; font-family: 'Roboto Condensed', sans-serif; }
.footer-container { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 20px; }
.footer-info { flex: 1; min-width: 250px; }
.footer-info h3, .footer-form h3 { margin-bottom: 10px; font-size: 1.5rem; color: white; }
.footer-info p { margin: 5px 0; font-size: 1rem; }
.footer-info a { color: white; /* White links */ text-decoration: none; }
.footer-info a:hover { text-decoration: underline; }
.footer-form { flex: 1; min-width: 250px; }

/* ===== News & Updates (Beige box – sitewide) ===== */
.page-beige-box { font-family: 'Playfair Display', serif; color: #333; background-color: #f2ece1; padding: 20px; /*   border-radius: 10px;  */ width: 100%; box-sizing: border-box; /* Include padding in width calculation */ margin-top: 100px; }
.page-beige-box-heading { font-family: 'Playfair Display', serif; font-weight: bold; font-size: 3.0rem; color: #00695c !important; /* Dark green color for headings */ margin-bottom: 10px; text-align: center; }
.page-beige-box-description { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 1.2em; color: #555; /* Lighter text color for description */ line-height: 1.6; text-align: center; }
.topic-heading { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.5em; color: #004d00; /* Dark green color for headings */ margin-bottom: 10px; text-align: center; }
.topic-description { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 1.1em; color: #555; /* Lighter text color for description */ line-height: 1.6; text-align: center; }
.news-article { margin-bottom: 40px; }
.resource-item { margin-bottom: 40px; }

/* ===== Login Page ===== */
#login { padding: 50px 20px; background-color: #f4f4f4; font-family: 'Roboto Condensed', sans-serif; }
/* Intentionally overrides sitewide .page-beige-box for login layout */
.page-beige-box { background-color: #f1e5d1; padding: 20px; margin-bottom: 30px; text-align: center; }
.page-beige-box h1 { font-family: 'Playfair Display', serif; font-weight: 600; color: #2c3e50; }
.page-beige-box p { font-size: 1.1em; color: #34495e; }
.login-form { display: flex; justify-content: center; align-items: center; margin-top: 30px; }
.login-form form { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; }
.form-group { margin-bottom: 20px; }
.form-group label { font-size: 1em; font-weight: 500; color: #2c3e50; display: block; margin-bottom: 5px; }
.form-group input { width: calc(100% - 2px); /* Make input fields equal width to the button minus padding */ padding: 12px; font-size: 1em; border: 1px solid #ccc; border-radius: 5px; background-color: #fafafa; box-sizing: border-box; /* Ensures padding doesn't overflow the width */ }
.form-group input:focus { outline: none; border-color: #4CAF50; background-color: #ffffff; }

/* Buttons */
button { padding: 12px 20px; font-size: 1.1em; color: white; background-color: #4CAF50; border: none; border-radius: 5px; cursor: pointer; width: 100%; /* Button takes full width */ font-weight: bold; }
button:hover { background-color: #45a049; }
button:focus { outline: none; }

/* Errors */
.error-message { color: red; font-weight: bold; margin-bottom: 20px; }

/* ===== Modal (File Preview) ===== */
#file-preview-modal { display: none; position: fixed; /* Fix the modal to the viewport */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); /* Transparent background */ z-index: 1000; display: flex; /* Note: overrides display:none above so modal uses flex when shown via JS */ justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ overflow: hidden; /* Prevent scrolling in the background */ }
#file-preview-content { position: relative; width: 100%; /* You can adjust the percentage to fit your needs */ height: 80%; /* You can adjust the percentage to fit your needs */ background-color: white; border-radius: 8px; overflow: hidden; /* Prevent overflowing content */ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
#file-preview-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #333; color: white; font-size: 18px; }
#file-preview-header button { background-color: #4CAF50; /* Green color for the close button */ border: none; color: white; padding: 5px 10px; cursor: pointer; }
#file-preview-iframe, #file-preview-embed { width: 100%; height: 100%; /* Make iframe and embed take up full modal height */ border: none; }

/* ===== Calendar Bits ===== */
.calendar-day { display: inline-block; width: 30px; /* Adjust width for your layout */ }

/* ===== Breakpoints (single 768px block to consolidate) ===== */
@media (max-width: 768px) {
  /* Hamburger reveal */
  .hamburger { display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1001; }
  nav ul { display: none; position: fixed; top: 70px; left: 0; right: 0; width: 100%; height: auto; background-color: #f9f9f9; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 20px; margin: 0; flex-direction: column; z-index: 1000; }
  nav ul.active { display: flex !important; }
  nav ul li { margin: 10px 0; width: 100%; text-align: center; }
  nav ul li .dropdown-content { position: static; display: none; width: 100%; box-shadow: none; padding: 10px 0; }
  nav ul li:hover .dropdown-content { display: block; background-color: #f1f1f1; }

  /* Table sizing */
  .directors-table { font-size: 0.85rem; }
  .directors-table thead th, .directors-table tbody td { padding: 8px 10px; }

  /* Header tweaks */
  header .logo { position: relative; left: 0; top: 0; transform: none; /* Remove translate */ text-align: center; margin: 0 auto; }
  header .logo img { height: 40px; /* Adjust logo size for mobile */ }

  /* Mobile nav layout (wins after hamburger block due to order) */
  nav ul { position: absolute; top: 60px; /* Adjust for header height */ left: 0; width: 100%; background-color: #f9f9f9; padding: 20px; display: none; /* Initially hide the menu */ flex-direction: column; text-align: center; }
  nav ul li { margin: 10px 0; }
  nav ul.active { display: block; /* Show the menu when active */ z-index: 250; }

  /* Slideshow/map sizing */
  .slideshow-container { height: 400px; /* Adjust slideshow height for smaller screens */ }
  .slidingWindow-window, .google-map { width: 100%; /* Ensure map and window images take full width */ height: 250px; /* Adjust height */ }

  /* Grid to single column */
  .image-text-combination { grid-template-columns: 1fr; /* Stack images and text vertically */ }
  .image-text-combination .image-text-item .overlay-container { height: auto; /* Allow flexible height for smaller devices */ }
  .image-combination { width: 100%; height: auto; /* Ensure image scales correctly */ object-fit: cover; }

  /* Footer sizing */
  .footer { padding: 20px 10px; /* Slightly reduced padding */ }
  .footer-bottom { font-size: 0.8rem; }

  /* Typographic scales */
  .overlay-text h2 { font-size: 2rem; /* Smaller title for mobile */ }
  .overlay-text p { font-size: 1.2rem; /* Adjust description text size */ }
  .text-content h1 { font-size: 2.5rem; /* Smaller title on smaller screens */ }
  .text-content p { font-size: 1.1rem; /* Adjust paragraph size */ }
  .secondText h2 { font-size: 2rem; /* Adjust second text heading size */ }

  /* Footer form full-width fields */
  .footer-form textarea,
  .footer-form input[type="text"],
  .footer-form input[type="email"],
  .footer-form input[type="tel"] { width: 100% !important; /* Force full width */ max-width: 100% !important; box-sizing: border-box; margin: 0 0 10px 0; display: block; float: none !important; /* Remove the float on phone field */ }

  .footer-info p, .footer-form input[type="email"], .footer-form button { font-size: 1rem; /* Adjust text size for form inputs */ }

  .welcome .text-content h1 { font-size: 1.8rem; /* smaller title size */ text-align: center; /* keep centered */ line-height: 1.3; }

  /* Overlay text tiny variant */
  .slideshow .overlay-text h2 { font-size: 1.6rem !important; /* main title */}
  .slideshow .overlay-text p { font-size: 1.2rem; /* subtitle */ }
  .slideshow .overlay-text p span { font-size: 1.0rem; /* Normal IL */}
}

/* ===== Narrower breakpoint (767px) ===== */
@media (max-width: 767px) {
  /* Day names: show abbr only */
  .calendar-day.full-name { display: none; }
  .calendar-day.abbr-name { display: inline-block; }
}