/* contact.css */

#contact-section {
    background-color: #f9f9f9;
    padding: 2rem 1rem;
    text-align: left;
  }
  
  .contact-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .contact-wrapper h2 {
    margin-bottom: 1rem;
    font-size: 2.50rem;
    color: #1A3C8D; /* example color */
    font-family: 'Libre Baskerville', serif;
    text-align: center;
  }
  
  .contact-wrapper p {
    font-size: 1.23rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .contact-wrapper address {
    font-size: 1.05rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }
  
  .contact-form label {
    font-weight: 600;
    font-size: 1.15rem;
  }
  
  .contact-form input,
  .contact-form textarea {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .contact-form button {
    padding: 0.75rem 1.5rem;
    background-color: #0D1F47;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 4px;
  }
  
  .contact-form button:hover {
    background-color: #000000;
  }

  .verify-access-token {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }

  .contact-checkpoint {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
  }

  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* ─────────────────────────────────────────────
   Form Legal Notice (Contact Page)
  ───────────────────────────────────────────── */

  .contact-form .form-legal {
    width: 100%;                /* spans form width */
    text-align: center;
    margin: 0.35rem 0 0.25rem;
    font-size: 1.00rem;         /* smaller than the home page version */
    line-height: 1.35;
    color: #555;
    align-self: center;         /* centers in flex form layout */
  }

  .contact-form .form-legal__line1,
  .contact-form .form-legal__line2 {
    display: block;
    white-space: nowrap;
  }

  .contact-form .form-legal a {
    color: var(--color-blue, #1a30cb);
    text-decoration: underline;
  }

  .contact-form .form-legal a:hover {
    color: var(--color-blue-dark, #0D1F47);
  }

  /* public/css/contact.css */

/* Google Maps Section Styling */
#location-map {
  padding: 2rem 0;
  text-align: center;
  background-color: #f4f4f4; /* optional background color */
}

#location-map h2 {
  margin-bottom: 1rem;
  font-size: 2.50rem;
  color: #0D1F47;
  font-family: 'Libre Baskerville', serif;
}

.map-container {
  max-width: 1000px;
  margin: 0 auto;
}

.map-container iframe {
  width: 100%;
  height: 450px;
  border: 0;
}

/* Responsive Adjustments for 300px - 328px */
@media (min-width: 300px) and (max-width: 328px) {
  #location-map p {
      font-size: 1.08rem;
  }
}

/* Responsive Adjustments for 329px - 357px */
@media (min-width: 329px) and (max-width: 357px) {
  #location-map p {
      font-size: 1.08rem;
  }
}

/* Responsive Adjustments for 358px - 386px */
@media (min-width: 358px) and (max-width: 386px) {
  #location-map p {
      font-size: 1.13rem;
  }
}

/* Responsive Adjustments for 387px - 415px */
@media (min-width: 387px) and (max-width: 415px) {
  #location-map p {
      font-size: 1.13rem;
  }
}

/* Responsive Adjustments for 416px - 450px */
@media (min-width: 416px) and (max-width: 450px) {
  #location-map p {
      font-size: 1..13rem;
  }
}

.custom-notification {
  position: fixed;
  top: 337px;
  right: 727px;
  background: #002b47;  /* Navy background */
  color: #fff;         /* White text */
  padding: 15px 25px;
  border-radius: 5px;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: scale(1.75);
}

.custom-notification.fade-out {
  opacity: 0;
}

@media (min-width: 1101px) and (max-width: 1926px) {
  .custom-notification {
    position: fixed;
    top: 337px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.55);
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .custom-notification {
    position: fixed;
    top: 437px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.35);
  }
}

@media (min-width: 850px) and (max-width: 900px) {
  .custom-notification {
    position: fixed;
    top: 400px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.15);
  }
}

@media (min-width: 800px) and (max-width: 851px) {
  .custom-notification {
    position: fixed;
    top: 400px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.15);
  }
}

@media (min-width: 750px) and (max-width: 800px) {
  .custom-notification {
    position: fixed;
    top: 345px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.10);
  }
}

@media (min-width: 710px) and (max-width: 750px) {
  .custom-notification {
    position: fixed;
    top: 325px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.10);
  }
}

@media (min-width: 707px) and (max-width: 710px) {
  .custom-notification {
    position: fixed;
    top: 325px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.10);
  }
}

@media (min-width: 694px) and (max-width: 707px) {
  .custom-notification {
    position: fixed;
    top: 315px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.10);
  }
}

@media (min-width: 650px) and (max-width: 694px) {
  .custom-notification {
    position: fixed;
    top: 290px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.00);
  }
}

@media (min-width: 600px) and (max-width: 650px) {
  .custom-notification {
    position: fixed;
    top: 290px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.00);
  }
}

@media (min-width: 549px) and (max-width: 600px) {
  .custom-notification {
    position: fixed;
    top: 287px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.00);
  }
}

@media (min-width: 500px) and (max-width: 549px) {
  .custom-notification {
    position: fixed;
    top: 275px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.00);
  }
}

@media (min-width: 450px) and (max-width: 500px) {
  .custom-notification {
    position: fixed;
    top: 280px;
    right: calc(50% - 230px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
  }
}

@media (min-width: 408px) and (max-width: 450px) {
  .custom-notification {
    position: fixed;
    top: 255px;
    right: calc(50% - 199px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    /* New additions */
    text-align: center;
    font-size: 14px;
  }
}

@media (min-width: 380px) and (max-width: 407px) {
  .custom-notification {
    position: fixed;
    top: 255px;
    right: calc(50% - 199px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    /* New additions */
    text-align: center;
    font-size: 14px;
  }
}

@media (min-width: 350px) and (max-width: 380px) {
  .custom-notification {
    position: fixed;
    top: 240px;
    right: calc(50% - 189px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    /* New additions */
    text-align: center;
    font-size: 14px;
  }
}

@media (min-width: 300px) and (max-width: 350px) {
  .custom-notification {
    position: fixed;
    top: 255px;
    right: calc(50% - 161px); /* Adjusted to match your right: 530px at your target resolution */
    background: #002b47;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    /* New additions */
    text-align: center;
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────────
    Field Tooltips / Live Validation (Contact Page)
    Pairs with: /public/js/contact.js
    NOTE: NO wrappers required (keeps your structure identical)
───────────────────────────────────────────── */

/* ✅ Red outline — match your popup tint */
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  outline: 2px solid rgba(220, 38, 38, 0.637);  /* was 0.70 */
  outline-offset: 2px;
}

/* ✅ Tooltip bubble — match popup opacity */
.contact-form .field-hint {
  display: none;
  margin-top: -0.50rem;
  margin-bottom: 0.25rem;

  max-width: 56ch;
  white-space: pre-line;

  background: rgba(0, 0, 0, 0.88);             /* set to whatever you use in popup */
  color: #fff;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  font-size: 0.90rem;
  line-height: 1.25;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

/* Show when JS toggles .is-error */
.contact-form .field-hint.is-error {
  display: inline-block;
}

@media (max-width: 474px) {
  .contact-form .field-hint {
    max-width: 92vw;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ✅ 300–840px: make the 5 visible fields use ~90% width */
@media (max-width: 840px) {
  #contact-section .contact-form > input:not([type="hidden"]),
  #contact-section .contact-form > textarea {
    width: 99%;
    box-sizing: border-box;
  }
}

/* ✅ Under 530px — keep “acknowledge our Privacy Policy.” together on line 2 */
@media (max-width: 530px) {
  .contact-form .form-legal {
    display: inline-block;
    text-align: center;
    line-height: 1.4;
    max-width: 36ch;           /* widened just enough to avoid a third line */
    margin: -0.3rem auto -0.25rem;
    white-space: normal;
  }

  .contact-form .form-legal__line1,
  .contact-form .form-legal__line2 {
    display: inline;
    white-space: normal !important;
  }

  /* Force one clean break before “acknowledge” */
  .contact-form .form-legal__line1::after {
    content: "\A";   /* line break */
    white-space: pre;
  }

  /* ✅ Keep “acknowledge our Privacy Policy.” together */
  .contact-form .form-legal__line2 {
    white-space: nowrap;
  }
}