@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');

:root {
  --navy: #225274;
  --slate: #4F709C;
  --brand-primary: #54c595;
  --brand-light: #cef4d2;
  --brand-teal: #4bafbc;
  --white: #FFFFFF;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  background-color: var(--white);
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Montserrat', sans-serif;
}

/* Custom styles and animations */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
  width: max-content;
}

/* Custom Perspective styling for hero cards */
.perspective-1000 {
  perspective: 1000px;
}

/* Accessibility overrides */
body.a11y-large-text p, 
body.a11y-large-text a, 
body.a11y-large-text span, 
body.a11y-large-text li, 
body.a11y-large-text button,
body.a11y-large-text input,
body.a11y-large-text select,
body.a11y-large-text textarea {
  font-size: 1.15em !important;
  line-height: 1.6 !important;
}

body.a11y-highlight-links a,
body.a11y-highlight-links button {
  outline: 3px solid #54c595 !important;
  outline-offset: 2px !important;
}

body.a11y-readable-font * {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Contact Form 7 Styles matching our theme */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea {
  width: 100% !important;
  background-color: rgba(206, 244, 210, 0.3) !important; /* bg-[#cef4d2]/30 */
  border: none !important;
  border-radius: 1rem !important; /* rounded-2xl */
  padding: 1rem 1.5rem !important; /* py-4 px-6 */
  color: #225274 !important; /* text-[#225274] */
  transition: all 0.2s ease-in-out !important;
}

.wpcf7-form-control.wpcf7-text::placeholder,
.wpcf7-form-control.wpcf7-textarea::placeholder {
  color: rgba(34, 82, 116, 0.3) !important; /* placeholder:text-[#225274]/30 */
}

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #54c595 !important; /* focus:ring-2 focus:ring-[#54c595] */
}

.wpcf7-form-control.wpcf7-submit {
  background-color: #225274 !important;
  color: #FFFFFF !important;
  padding: 1rem 3rem !important; /* px-12 py-4 */
  border-radius: 9999px !important; /* rounded-full */
  font-weight: 700 !important; /* font-bold */
  text-transform: uppercase !important; /* uppercase */
  letter-spacing: 0.1em !important; /* tracking-widest */
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 10px 15px -3px rgba(34, 82, 116, 0.2), 0 4px 6px -4px rgba(34, 82, 116, 0.2) !important; /* shadow-lg shadow-[#225274]/20 */
  cursor: pointer;
  border: none !important;
}

.wpcf7-form-control.wpcf7-submit:hover {
  background-color: #1a3d58 !important; /* hover:bg-[#1a3d58] */
}

/* Mobile header - adjust spacing since top-banner is compact on mobile */
@media (max-width: 639px) {
  /* Compact banner (~36px) + nav bar (h-20 = 80px) = ~116px total header */
  main {
    padding-top: 8rem !important; /* 128px */
  }
  
  #hero {
    padding-top: 8.5rem !important; /* 136px */
  }
}

@media (max-width: 1023px) {
  /* Give the mobile menu a smooth slide-down animation */
  #mobile-menu {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* When mobile menu is open, add a semi-transparent backdrop */
  #mobile-menu:not(.hidden)::after {
    content: '';
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(34, 82, 116, 0.3);
    pointer-events: none;
    z-index: -1;
  }
}