/* apagency.ca — source-owned overrides layered after the compiled Tailwind bundle.
   Keep this small and intentional; it is the ONE place for hand tweaks. */

/* Gentle whole-page entrance (replaces the per-element framer-motion reveals
   that were neutralized at build time). Pure CSS, runs without JS. */
@keyframes apexPageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: apexPageIn .45s ease both; }

/* Ultrawide type scaling — Tailwind sizes are rem-based, so bumping the root
   font-size scales text proportionally on very wide screens only. */
@media (min-width:1728px){ html{ font-size:17.5px; } }
@media (min-width:2100px){ html{ font-size:19px; } }
@media (min-width:2560px){ html{ font-size:21px; } }
@media (min-width:3200px){ html{ font-size:23px; } }

/* Mobile menu panel (vanilla replacement for the old React-conditional menu). */
[data-mobile-panel]{
  display:none; position:fixed; inset:0; z-index:60;
  flex-direction:column; gap:6px; align-items:stretch;
  padding:84px 22px 32px; background:rgba(255,255,255,.98);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
[data-mobile-panel] a{
  display:block; padding:16px 8px; font-family:'Inter',sans-serif; font-weight:600;
  font-size:18px; letter-spacing:.06em; text-transform:uppercase; color:#0a0a0a;
  text-decoration:none; border-bottom:1px solid rgba(0,0,0,.08);
}
[data-mobile-panel] a:last-child{ border-bottom:0; }
[data-mobile-panel] a.cta{
  margin-top:16px; text-align:center; color:#fff; background:#B9935B; border-radius:4px; border:0;
}
[data-mobile-close]{
  position:absolute; top:22px; right:22px; background:none; border:0;
  font-size:30px; line-height:1; color:#0a0a0a; cursor:pointer;
}
@media (min-width:1024px){ [data-mobile-panel],[data-mobile-close]{ display:none !important; } }

/* Foldable / tablet header fix (AK's Z Fold, 2026-07-21): the desktop header
   centers its nav links across the full bar while the gold Contact button is
   absolutely positioned at the right edge. On ~800-1000px screens (a Z Fold
   unfolded, small tablets) the centered "Services" link collides with the
   Contact button. Below 1024px, show the clean hamburger header instead of the
   desktop nav — it has a fixed logo + Contact + menu button and cannot overlap.
   The mobile menu panel is enabled to the same 1024px boundary just above. */
@media (max-width:1023.98px){
  header.hidden.md\:flex{ display:none !important; }
  header.md\:hidden{ display:flex !important; }
}