/* styles.css */

/* ============================= */
/* Global Styles */
/* ============================= */

.small-pad {
  padding: 25px;
}

.medium-pad {
  padding: 50px;
}

.large-pad {
  padding: 100px;
}

.text-white {
  color: white;
}

/* Ensure full height for layout */
html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Quantico", sans-serif;
  color: #333;
  background-color: white;
  width: 100%; /* Use 100% of the parent's width instead of 100vw */
  overflow-x: hidden;
}

main {
  flex: 1;
}

.container {
  padding: 0;
}

/* ============================= */
/* Navbar Styles */
/* ============================= */
/* Ensure navbar has a solid background and maintains alignment */
/* Navbar Styles */
.navbar-custom {
  background-color: #103163;
  padding: 10px 20px;
  position: relative; /* Create positioning context for toggler */
}

/* Navbar Brand */
.navbar-custom .navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-custom .logo {
  height: 60px;
  width: auto;
}

/* Center Navbar Links */
.navbar-custom .navbar-nav {
  font-size: 1.2rem;
}

.navbar-custom .nav-link {
  color: white;
  padding: 10px 15px;
}

.navbar-custom .nav-link:hover {
  color: #cccccc;
}

/* Mobile Menu Button */
.navbar-toggler {
  border: none;
  background: transparent;
  padding: 10px;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /* Remove from flex flow */
  top: 15px; /* Adjust as needed */
  right: 8vw; /* Adjust as needed */
  z-index: 1050; /* Ensures it sits above the nav content */
  -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
}

/* Remove default focus/active styles (black box) */
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Hamburger icon style */
.navbar-toggler-icon {
  filter: invert(1); /* Makes it white */
  width: 35px;
  height: 35px;
}

/* Close icon: hidden by default */
.navbar-toggler .close-icon {
  display: none;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  position: absolute; /* Position inside the button */
  top: 10px;
  right: 2vw;
}

/* When the menu is open: hide hamburger, show close icon */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  display: none;
}

.navbar-toggler[aria-expanded="true"] .close-icon {
  display: block;
}

/* ============================= */
/* Wrapper for layout */
/* ============================= */
.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card h3 {
  text-align: center;
}

.card p {
  text-align: left;
}

/* Make Cards Clearly Clickable */
.clickable-panel {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s ease-in-out;
  position: relative;
}

/* Hover & Tap Effect */
.clickable-panel:hover,
.clickable-panel:active {
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
  background-color: #0c284d10;
}

/* On Tap (Mobile Devices) */
@media (max-width: 768px) {
  .clickable-panel:active {
    transform: scale(0.98);
  }
}

/* "Tap Me!" Text */
.tap-me {
  display: none; /* Hidden by default */
  font-size: 0.9rem;
  font-weight: bold;
  color: #103163;
  text-align: center;
  margin-top: 10px;
}

/* Show "Tap Me!" Only on Mobile */
@media (max-width: 768px) {
  .tap-me {
    display: block;
  }
}

/* ============================= */
/* Hero Section */
/* ============================= */
.hero-section {
  background: url("../img/building.png") no-repeat center center;
  background-size: cover;
  min-height: 50vh; /* Allows the section to shrink if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-section .overlay {
  background: rgba(0, 0, 0, 0.6);
  padding: 5vw;
  max-width: 90%; /* Allows flexibility */
  width: auto; /* Prevents overflow issues */
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 60vh; /* Increase height to accommodate content */
  }

  .hero-section .overlay {
    width: 85%; /* Responsive width */
    padding: 8vw;
  }
}

.hero-btn {
  background-color: #103163; /* Dark blue */
  border: none;
  padding: 12px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  transition: background-color 0.3s ease-in-out;
}

.hero-btn:hover {
  background-color: #0c284d; /* Slightly darker on hover */
}

/* ============================= */
/* The American Legion Veteran�s Creed Section */
/* ============================= */
.lead {
  text-align: left;
}

.creed-section {
  background-color: #1a1a1a; /* Dark, authoritative military tone */
  padding: 60px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  border-top: 4px solid #103163; /* Honor stripe */
}

.creed-section h2 {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

.creed-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 900px;
  margin: auto;
}

.creed-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-left: 6px solid #103163; /* Military stripe */
  padding: 15px;
  width: 100%;
  max-width: 700px;
  text-align: left;
  font-size: 1.1rem;
  color: white;
  transition: background 0.3s ease-in-out;
}

.creed-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.creed-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  margin-right: 15px;
}

/* ============================= */
/* Full-Width Sections */
/* ============================= */
.full-width-section {
  width: 100%; /* Changed from 100vw to 100% */
  padding: 60px 0;
}

/* Alternating Background Colors */
.bg-white {
  background-color: white;
}

.bg-transparent-dark {
  background-color: rgba(16, 49, 99, 0.85);
  color: white;
}

.bg-light {
  background-color: #f8f9fa;
}

.bg-secondary {
  background-color: #103163;
}

.bg-secondary .list-group-item {
  color: white;
  background-color: transparent;
  border: none;
}

/* ============================= */
/* Accordion Styles */
/* ============================= */
.accordion-item {
  border: none;
}

.accordion-button {
  background-color: #103163;
  color: white;
  font-weight: bold;
}

.accordion-button:not(.collapsed) {
  background-color: #0c284d;
  color: white;
}

/* Change the accordion arrow to white */
.accordion-button::after {
  filter: invert(1); /* Converts the default black arrow to white */
}

/* Ensure the arrow remains white when expanded */
.accordion-button:not(.collapsed)::after {
  filter: invert(1);
}

.accordion-body {
  background-color: white;
  padding: 20px;
}

/* ============================= */
/* List Groups */
/* ============================= */
.list-group-item {
  border: none;
}

/* ============================= */
/* Officers Section */
/* ============================= */
.officers-section {
  background-color: rgba(16, 49, 99, 0.85);
  padding: 60px 0;
  color: white;
}

.officers-section h2 {
  text-align: center;
  font-weight: bold;
  color: white;
  margin-bottom: 30px;
}

.officers-section h3 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Officer Dropdowns */
/* Increase width of dropdown menu */
.dropdown-menu {
  min-width: 250px; /* Adjust width as needed */
  white-space: normal; /* Ensures text wraps properly */
  padding: 10px;
}

/* Ensure the text doesn't cut off */
.dropdown-item {
  white-space: normal;
  word-wrap: break-word;
}

.officer-info img {
  width: 100%; /* Make images responsive */
  max-width: 600px; /* Set a max width so they don't get too large */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensures uniform scaling without distortion */
  border-radius: 10px; /* Optional: Rounds the corners for a clean look */
}

/* ============================= */
/* Button Styles */
/* ============================= */
.btn-primary {
  background-color: #103163;
  border-color: #103163;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 15px;
}

.btn-primary:hover {
  background-color: #0c284d;
  border-color: #0c284d;
}

/* ============================= */
/* Contact Section */
/* ============================= */
.contact-section {
  text-align: center;
  padding: 40px 0;
  background-color: #103163;
  color: white;
}

.contact-section a {
  color: white;
  text-decoration: none;
}

.contact-section a:hover {
  text-decoration: underline;
}

/* ============================= */
/* Footer Styles */
/* ============================= */
.footer {
  background-color: #103163;
  color: white;
  padding: 15px 0;
  text-align: center;
  margin-top: auto;
}

.footer a {
  color: white;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* GALLERY */

.carousel-item img {
  width: 100%;
  max-height: 450px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.carousel-item img:hover {
  transform: scale(1.05);
}

/* Ensure arrows are black and outside the images */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  border-radius: 50%;
  padding: 15px;
  filter: invert(1);
}

/* Center dots below the carousel */
.carousel-indicators {
  bottom: -20px;
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  border-radius: 5px;
  bottom: 20px;
  width: auto; /* Adjust width dynamically */
  max-width: 80%; /* Prevents overly wide captions */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.general-photos .img-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.general-photos img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.general-photos img:hover {
  transform: scale(1.05);
}

/* Ensure smooth horizontal scrolling */
.photo-row {
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping */
  overflow-x: auto; /* Enables horizontal scrolling */
  gap: 20px; /* Space between images */
  padding-bottom: 10px;
  align-items: center; /* Centers images vertically */
  scroll-snap-type: x mandatory; /* Smooth snapping for touch scrolling */
  justify-content: center; /* Center images on large screens */
}

/* Individual image containers */
.img-container {
  flex: 0 0 auto; /* Prevents resizing */
  width: auto; /* Allows dynamic width */
  height: 180px; /* Uniform height */
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start; /* Snaps each image into view */
}

/* Ensure images maintain aspect ratio and are uniform */
.img-container img {
  height: 100%; /* Make all images the same height */
  width: auto; /* Maintain original aspect ratio */
  max-width: 250px; /* Set uniform max width */
  object-fit: cover; /* Ensures images fill their space without stretching */
  transition: transform 0.3s ease-in-out;
}

/* On hover, slightly enlarge the image */
.img-container img:hover {
  transform: scale(1.05);
}

/* Hide scrollbar but allow scrolling */
.photo-row::-webkit-scrollbar {
  display: none;
}

.photo-row {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Fix for mid-sized screens (768px - 1200px) */
@media (max-width: 990px) {
  .photo-row {
    justify-content: flex-start; /* Allows proper horizontal scrolling */
    overflow-x: auto;
  }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .full-width-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .navbar-custom {
    padding-left: 10px;
    padding-right: 10px;
  }

  .photo-row {
    padding-left: 5px;
    padding-right: 5px;
  }

  .img-container {
    margin-left: 5px;
    margin-right: 5px;
  }
}

/* Contact Section Styling */
.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  /* Ensures full-page centering */
  background-color: white;
  padding: 20px;
}

.contact-form {
  background: white;
  padding: 50px;
  border-radius: 10px;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 700px;
  /* Bigger form */
}

.contact-form h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 2.5rem;
  /* Bigger title */
  color: #103163;
}

.contact-form label {
  font-weight: bold;
  font-size: 1.2rem;
}

.contact-form input,
.contact-form textarea {
  font-size: 1.2rem;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

/* Black Placeholder Text */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: black;
  opacity: 1;
  /* Ensures placeholder is visible */
}

.contact-form button {
  background-color: #103163;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 12px;
  margin-top: 10px;
  border-radius: 5px;
  width: 100%;
}

.contact-form button:hover {
  background-color: #0c284d;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-form {
    max-width: 90%;
    padding: 40px;
  }

  .contact-form h2 {
    font-size: 2rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
    padding: 12px;
  }

  .contact-form button {
    font-size: 1rem;
  }
}

.events-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Fills the main container */
  text-align: center;
}

#localendar-iframe {
  width: 100%;
  height: 100%;
  border: none;
}