/* LOCATION SECTION */
.location-section {
  display: flex;
  gap: 96px;
  max-width: 100%;
  padding:  60px 0;
  color: #0b0c2b; /* dark blue-black */
  font-family: "Hanken Grotesk", sans-serif;
  background-color: #fff;
  align-items: flex-start;
  min-height: 540px;
}

.location-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* padding: 20px; */
  box-sizing: border-box;
  position: relative;
  /* Initial state: Hidden for animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;  /* Faster */
}

.location-container.animate {
  /* Triggered state: Fade in and slide up */
  opacity: 1;
  transform: translateY(0);
}

.location-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.location-row-1 {
  margin-bottom: 20px;
  width: 100vw;
  position: relative;
}

.horizontal-line {
  width: 100vw;
  height: 2px;
  position: relative;
  margin-left: 6em; /* keep spacing to left */
  /* Initial state: Hidden */
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;  /* Faster */
}

.location-container.animate .horizontal-line {
  /* Triggered state: Fade in */
  opacity: 1;
}

.location-row-2 {
  padding: 0 6em;
  gap: 40px;
  flex-wrap: nowrap;
  display: flex;
  width: 100%;
  box-sizing: border-box;
      align-items: flex-start;
}

.location-column {
  flex: 1;
  min-height: 300px;
  background: rgba(255, 255, 255, 0.1); /* subtle background */
  padding: 0 20px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
}

/* Override for left column text color and alignment */
.location-left {
  background: transparent;
  color: #00077B;
  text-align: left;
  padding:0;
  box-shadow: none;
}

.location-left h3,
.location-left p {
  color: #00077B;
  text-align: left;
}

.location-left p.description {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 30px;
}

.location-column h3 {
  margin-bottom: 10px;
  text-align: left;
  font-weight: 100;
  font-size: 2rem;
  color:#051B38; 
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;  /* Faster */
}

.location-container.animate .location-column h3 {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.location-subtitle {
  color:#51F36F; 
  font-weight:700; 
  font-size:0.9rem; 
  letter-spacing:1.2px; 
  margin-bottom:12px;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;  /* Faster */
}

.location-container.animate .location-subtitle {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.location-left p.description {
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;  /* Faster */
}

.location-container.animate .location-left p.description {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

/* Tabs styles */
.tab-buttons {
  background: #dadada;
  border-radius: 50px;
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  user-select: none;
  width: max-content; /* shrink to content width */
      margin-bottom: 2em;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;  /* Faster */
}

.location-container.animate .tab-buttons {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.tab-btn {
  border-radius: 50px;
  background: transparent;
  border: none;
  color: #0a1a61; /* dark blue text */
  font-weight: 600;
  font-size: 13px;
  padding: 3px 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-width: 130px;
  text-align: center;
  line-height: 23px;
}

.tab-btn.active {
  background: #51f36f; /* bright green background */
  color: #0a1a61; /* dark blue text */
  box-shadow: 0 2px 6px rgb(81 243 111 / 0.3);
}

.tab-btn:hover:not(.active) {
  background: transparent!important;
}

/* Remove focus outline except for keyboard users */
.tab-btn:focus {
  outline: 2px solid #51f36f;
  outline-offset: 2px;
}
/* Tables styles */
.tab-content {
  width: 100%; 
  overflow-x: auto;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s;  /* Faster */
}

.location-container.animate .tab-content {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.tab-content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.85rem;
  color: #00077B;
}

.tab-content thead tr {
  border-bottom: 2px solid #51F36F;
  color: #51F36F;
  font-weight: 700;
}

.tab-content thead th {
  padding-bottom: 10px;
  text-align: left;
}

.tab-content tbody tr {
  border-bottom: 1px solid #a3e7a4;
}

.tab-content tbody tr:last-child {
  border-bottom: none;
}

.tab-content tbody td {
  padding: 8px 0;
  text-align: left;
}

/* Source Note */
.location-left p.source-note {
  margin-top: 28px;
  color: #82C97F;
  font-size: 0.7rem;
  text-align: left;
  font-weight: 400;
}

/* Right Column */
.location-right {
  flex: 0 0 658px;
  /* max-width: 658px; */
  text-align: left;
  background: transparent;
  box-shadow: none;
}

.location-right-img {
  width: auto;
  height: 599px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease 0.7s, transform 0.4s ease 0.7s;  /* Faster */
}

.location-container.animate .location-right-img {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.location-right p {
  font-size: 0.75rem;
  color: #00077B;
  margin-top: 8px;
  font-weight: 400;
  text-align: left;
}

/* Responsive */
@media (max-width: 900px) {
  .location-container {
    width: 100%;
    padding: 10px;

  }

  .location-row-2 {
    flex-direction: column;
    gap: 24px;
    padding: 0 1em;
  }
  .location-left,
  .location-right {
    max-width: 100%;
    flex: 1 1 auto;
    padding-right: 0;
    padding-left: 0;

  }
  .location-right img {
    width: 100%;
    height: auto;
    max-height: auto;
  }
  .horizontal-line {
    width: 100vw;
    margin-left: 80px;
  }
  .location-row-1 {
    width: 100vw;
  }
  /* Disable animations on mobile */
  .location-container,
  .horizontal-line,
  .location-subtitle,
  .location-column h3,
  .location-left p.description,
  .tab-buttons,
  .tab-content,
  .location-right-img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Ensure the container is positioned relative for absolute children */
.location-right {
  position: relative; /* new */
  flex: 0 0 658px;
  text-align: left;
  background: transparent;
  box-shadow: none;
}

/* Style for the floating Google Maps button */
.google-maps-btn {
  position: absolute;
  top: 12px;               /* top edge aligned with screenshot */
  right: 2rem;             /* right edge aligned with screenshot */
  padding: 6px 2rem;
  background-color: #00077B; /* Dark blue background matching map colors */
  color: #ffffff;            /* White text */
  font-weight: 100;
  font-size: 12px;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 20;              /* above the map image */
  transition: background-color 0.3s ease;
  user-select: none;
  letter-spacing: 1px;
  white-space: nowrap;
border: 1px solid #fff;
line-height: 30px; /* 300% */
text-transform: uppercase;
}

/* Hover effect */
.google-maps-btn:hover,
.google-maps-btn:focus {
  background-color: #51f36f; /* Bright green highlight */
  color: #002366;
  outline: none;
}

/* Accessibility focus ring */
.google-maps-btn:focus-visible {
  outline: 2px solid #51f36f;
  outline-offset: 2px;
}

/* Animations consistent with your existing fade-in */
.location-container.animate .google-maps-btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease 0.7s, transform 0.4s ease 0.7s;
  position: absolute;
}

/* Initial state for animation */
.google-maps-btn {
  opacity: 0;
  transform: translateY(10px);
}

/* Responsive: Hide button on small screens to avoid clutter */
@media (max-width: 900px) {
  .google-maps-btn {
    display: none;
  }
}