/* Site-wide usability and compact-screen fixes. Loaded after generated styles. */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/caveat-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/caveat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* WCAG-sized navigation targets without changing the visual hierarchy. */
.top-controls {
  min-height: 60px !important;
}

.top-text-btn,
.top-controls .icon-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

.top-text-btn {
  font-size: clamp(.82rem, 1.25vw, .94rem) !important;
}

/* Neutral focus — no bright blue ring on click/tab */
button:focus,
a:focus,
[tabindex]:focus {
  outline: none !important;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(29, 29, 31, 0.28) !important;
  outline-offset: 2px !important;
}

.service-card[aria-disabled="true"] {
  cursor: not-allowed !important;
}

.azo-site-back {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 300;
  min-width: 44px;
  min-height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(17, 17, 17, .72);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.azo-site-back b {
  font-size: .82rem;
  font-weight: 600;
}

.azo-instr-play,
.azo-instr-play-wrap,
.info-contact,
.azo-guide-toc a,
.azo-guide-btn {
  min-height: 44px !important;
}

.azo-instr-play,
.azo-instr-play-wrap {
  width: 44px !important;
  height: 44px !important;
}

/* Desktop previously had no hint that the service catalog was below the fold. */
@media (min-width: 901px) {
  .az-scroll-hint {
    width: 44px;
    height: 44px;
    display: grid !important;
    place-items: center;
    bottom: 24px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .az-chevron {
    margin-top: -4px;
  }
}

/*
 * The one-screen mobile composition only fits tall portrait screens.
 * On compact or landscape phones it previously clipped the last 1–2 services
 * while also disabling all scrolling.
 */
@media (max-width: 900px) and (max-height: 759px),
       (max-width: 900px) and (orientation: landscape) {
  html:has(.landing-page:not(.is-inside)),
  html:has(.landing-page:not(.is-inside) #az-scroll-track),
  html:has(.landing-page:not(.is-inside)) body,
  html:has(.landing-page:not(.is-inside) #az-scroll-track) body,
  html.az-phone-static,
  html.az-phone-static body,
  html:has(.landing-page:not(.is-inside)) #app,
  html:has(.landing-page:not(.is-inside) #az-scroll-track) #app,
  html.az-phone-static #app {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  .landing-page:not(.is-inside),
  .landing-page:not(.is-inside):has(#az-scroll-track),
  .landing-page:not(.is-inside) .landing-home,
  .landing-page:not(.is-inside):has(#az-scroll-track) .landing-home,
  html.az-phone-static .landing-page.az-phone-one-page,
  html.az-phone-static .landing-page.az-phone-one-page .landing-home {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .landing-page:not(.is-inside) .az-scroll-track,
  html.az-phone-static .az-scroll-track {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .landing-page:not(.is-inside) .az-scroll-sticky,
  html.az-phone-static .az-scroll-sticky {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .landing-page:not(.is-inside) .az-apple-brand.brand-stage,
  html.az-phone-static .az-apple-brand.brand-stage {
    min-height: 250px !important;
    max-height: none !important;
    padding-top: 76px !important;
    padding-bottom: 28px !important;
    overflow: hidden !important;
  }

  .landing-page:not(.is-inside) .az-apple-services.services-stage,
  html.az-phone-static .az-apple-services.services-stage {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    padding-top: 24px !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  .landing-page:not(.is-inside) .service-grid,
  html.az-phone-static .service-grid {
    max-height: none !important;
    overflow: visible !important;
  }

  .landing-page:not(.is-inside) .site-footer,
  html.az-phone-static .landing-page.az-phone-one-page .site-footer {
    display: flex !important;
  }
}

@media (max-width: 560px) {
  .top-controls {
    padding-inline: 6px !important;
    gap: 0 !important;
  }

  .top-text-btn {
    padding-inline: 7px !important;
    font-size: .75rem !important;
  }

  .azo-site-back {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .az-chevron {
    animation: none !important;
  }
}

/* Ensure brand/service images remain visible after MIME/cache fixes */
.brand-image,
.azo-brand-mark img,
.service-image {
  opacity: 1 !important;
  visibility: visible !important;
}
.brand-lockup {
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * Desktop scroll-scrub keeps .services-stage at pointer-events:none until
 * az-interactive (scroll progress ~41%). Partners is the only live card — allow
 * clicks as soon as the tile is painted (opacity > 0), without waiting for scrub.
 */
@media (min-width: 901px) {
  .az-apple-services.services-stage .service-card:not(.is-coming-soon) {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  .az-apple-services.services-stage .service-card.is-coming-soon {
    pointer-events: none !important;
    cursor: default !important;
  }
}

/* === DEMO MOBILE POLISH 2026-09-19 === */
/* Demo-ready mobile composition: clearer hierarchy, touch targets, no clip */

@media (max-width: 900px) {
  .landing-page:not(.is-inside) .az-apple-brand.brand-stage,
  html.az-phone-static .az-apple-brand.brand-stage {
    min-height: min(42vh, 340px) !important;
    padding-top: max(72px, calc(env(safe-area-inset-top) + 56px)) !important;
    padding-bottom: 20px !important;
    padding-inline: 18px !important;
  }

  .landing-page:not(.is-inside) .brand-lockup,
  html.az-phone-static .brand-lockup {
    gap: 14px !important;
    max-width: min(92vw, 420px) !important;
  }

  .landing-page:not(.is-inside) .brand-image,
  .landing-page:not(.is-inside) .azo-brand-mark img,
  html.az-phone-static .brand-image,
  html.az-phone-static .azo-brand-mark img {
    width: min(42vw, 168px) !important;
    height: auto !important;
    max-height: 168px !important;
    object-fit: contain !important;
  }

  .landing-page:not(.is-inside) .az-apple-services.services-stage,
  html.az-phone-static .az-apple-services.services-stage {
    padding-inline: 16px !important;
    padding-top: 18px !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
  }

  .landing-page:not(.is-inside) .service-grid,
  html.az-phone-static .service-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  .landing-page:not(.is-inside) .service-card,
  html.az-phone-static .service-card {
    min-height: 132px !important;
    border-radius: 18px !important;
    padding: 14px 12px !important;
  }

  .landing-page:not(.is-inside) .service-card .service-image,
  html.az-phone-static .service-card .service-image {
    width: min(56px, 18vw) !important;
    height: min(56px, 18vw) !important;
    object-fit: contain !important;
  }

  .landing-page:not(.is-inside) .service-card .service-title,
  .landing-page:not(.is-inside) .service-card h3,
  html.az-phone-static .service-card .service-title,
  html.az-phone-static .service-card h3 {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }

  .landing-page:not(.is-inside) .site-footer,
  html.az-phone-static .site-footer {
    padding: 18px 16px max(22px, env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 560px) {
  .landing-page:not(.is-inside) .service-grid,
  html.az-phone-static .service-grid {
    gap: 10px !important;
  }

  .landing-page:not(.is-inside) .service-card,
  html.az-phone-static .service-card {
    min-height: 120px !important;
    padding: 12px 10px !important;
  }

  .top-controls {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
  }

  .top-text-btn,
  .top-controls .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Very narrow phones: keep 2-col but tighten type */
@media (max-width: 380px) {
  .landing-page:not(.is-inside) .service-card .service-title,
  .landing-page:not(.is-inside) .service-card h3,
  html.az-phone-static .service-card .service-title,
  html.az-phone-static .service-card h3 {
    font-size: 0.86rem !important;
  }
}