/* AJ Digital Marketing — shared interactive styles (hover/focus states) */

a.nav-link:hover { color: #1f2937; }

a.btn-nav-cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(59,63,159,0.8);
}

a.btn-hero-primary:hover,
button.btn-hero-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -16px rgba(59,63,159,0.85);
}

a.btn-hero-secondary:hover {
  color: #1f2937;
  border-color: #2BA8E0;
  background: #f8fafc;
}

a.btn-outline-accent:hover {
  background: #2BA8E0;
  color: #fff;
}

a.foundation-card:hover {
  border-color: #2BA8E0;
  transform: translateY(-3px);
}

a.contact-link:hover { color: #1E9ED4; }

.form-input:focus {
  border-color: #2BA8E0;
  background: #fff;
}

button.faq-toggle:hover { background: #f8fafc; }

a.btn-cta-white:hover {
  color: #3B3F9F;
  transform: translateY(-2px);
}

a.social-icon:hover {
  color: #fff;
  border-color: #2BA8E0;
  background: rgba(43,168,224,0.12);
}

a.footer-link:hover { color: #fff; }

a.subnav-link:hover {
  color: #1E9ED4;
  border-bottom-color: #2BA8E0;
}

/* ===== Mobile responsiveness ===== */

/* -- Mobile hamburger menu -- */
@media (max-width: 860px) {
  header nav { display: none !important; }
  header .btn-nav-cta { display: none !important; }
  #mobile-menu-toggle { display: block !important; }
}
@media (min-width: 861px) {
  #mobile-menu-panel { display: none !important; }
}

/* -- Stack fixed multi-column grids -- */
@media (max-width: 768px) {
  .grid-2col { grid-template-columns: 1fr !important; }
  .grid-4col { grid-template-columns: 1fr !important; }
  .cal-form-box { height: 480px !important; }
}
@media (max-width: 640px) {
  .grid-numrow { grid-template-columns: 1fr !important; }
  .grid-numrow > *:first-child { margin-bottom: 4px; }
}

/* -- Fixed-height cover images that over-crop once the column narrows -- */
@media (max-width: 768px) {
  .img-about-photo { height: 360px !important; }
}

/* -- Hero heading and section padding sanity on small phones -- */
@media (max-width: 640px) {
  h1 { font-size: 32px !important; line-height: 1.15 !important; }
  section[style*="padding: 96px 32px"],
  section[style*="padding: 80px 32px"],
  section[style*="padding: 76px 32px 44px"],
  section[style*="padding: 72px 32px 40px"],
  article[style*="padding: 56px 32px 88px"] {
    padding: 56px 20px !important;
  }
}

/* ===== Mobile refinements (batch 2) ===== */

/* 1. Hero phone mockup: scale width and height together proportionally,
      so the mockup shrinks with side margin on mobile without ever
      cropping the app screenshot inside it. */
@media (max-width: 768px) {
  #top div[style*="width: 320px"] {
    width: 80% !important;
    max-width: 320px !important;
  }
  .img-hero-phone {
    height: auto !important;
    aspect-ratio: 296 / 560 !important;
  }
}

/* 3. Booking section: swap inline calendar for a popup-trigger CTA card on mobile */
@media (max-width: 768px) {
  #book .grid-2col {
    grid-template-columns: 1fr !important;
  }
  .mobile-book-cta {
    display: block !important;
    order: 1;
  }
  #book div.cal-form-box {
    display: none !important;
  }
  #book form.cal-form-box {
    order: 2;
    height: auto !important;
    overflow: visible !important;
  }
}

/* 4. Closing CTA heading too large on mobile */
@media (max-width: 640px) {
  h2[style*="font-size: 44px"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
}

/* 5. Services subnav: fade hint that it scrolls horizontally */
.subnav-fade-wrapper {
  position: relative;
}
.subnav-fade-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, rgba(248,250,252,0), rgba(248,250,252,1));
  pointer-events: none;
}

/* ===== Floating widgets: scroll-to-top (bottom-left), GTranslate + reserved
   Canary space (bottom-right, GTranslate above, Canary below) ===== */

#scroll-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(16,24,40,0.45);
}

/* GTranslate's float widget renders inside this wrapper (wrapper_selector).
   bottom: 120px clears Canary's widget (bottom: 16px, ~80px tall, so its
   top edge sits at ~96px) with a clean ~24px gap above it. Measured live:
   the previous bottom: 90px value overlapped Canary by ~6px. */
.gtranslate_wrapper {
  position: fixed;
  right: 20px;
  bottom: 120px;
  z-index: 90;
  transform: scale(0.7);
  transform-origin: bottom right;
}

.gtranslate_wrapper .gt_float_switcher {
  border-radius: 14px !important;
}

.gtranslate_wrapper .gt_float_switcher img {
  border-radius: 8px !important;
}

@media (max-width: 640px) {
  .gtranslate_wrapper {
    right: 12px;
    bottom: 110px;
    transform: scale(0.6);
    transform-origin: bottom right;
  }
  #scroll-top-btn {
    left: 12px;
  }
}