/* ===========================================================
   AWP Apple-Quality Polish Layer v1.1  (2026-04-14)
   Loaded LAST after all other AWP CSS. Brand-safe.
   Brand: Navy #1B3A4B  Teal #2E8B8B  Gold #D4A843
   =========================================================== */

/* --- 0. DESIGN TOKENS (canonical -- use these, don't invent new) --- */
:root {
  /* Palette (mirrors CLAUDE.md Section 10b) */
  --awp-navy: #1B3A4B;
  --awp-navy-deep: #0F2440;
  --awp-teal: #2E8B8B;
  --awp-teal-bright: #3AAFAF;
  --awp-gold: #D4A843;
  --awp-cream: #faf8f5;
  --awp-ink: #0F172A;
  --awp-muted: #64748B;

  /* Radius scale -- 4 tokens replace the ad hoc 12 values */
  --awp-radius-xs: 4px;   /* focus rings, small chips */
  --awp-radius-sm: 8px;   /* inputs, buttons, badges */
  --awp-radius-md: 12px;  /* cards, panels */
  --awp-radius-lg: 20px;  /* hero panels, modals */
  --awp-radius-pill: 999px;

  /* Elevation scale -- 4 tokens replace the ad hoc 62 shadows */
  --awp-shadow-sm: 0 1px 2px rgba(15, 36, 64, 0.06), 0 1px 1px rgba(15, 36, 64, 0.04);
  --awp-shadow-md: 0 4px 12px rgba(15, 36, 64, 0.08), 0 2px 4px rgba(15, 36, 64, 0.04);
  --awp-shadow-lg: 0 12px 32px rgba(15, 36, 64, 0.12), 0 4px 8px rgba(15, 36, 64, 0.06);
  --awp-shadow-xl: 0 24px 56px rgba(15, 36, 64, 0.16), 0 8px 16px rgba(15, 36, 64, 0.08);
  --awp-shadow-focus: 0 0 0 4px rgba(46, 139, 139, 0.15);

  /* Motion */
  --awp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --awp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --awp-dur-fast: 0.16s;
  --awp-dur-med: 0.24s;
}

/* --- 1. CONSISTENT FOCUS RINGS (WCAG 2.1 AA + brand) --- */
*:focus-visible {
  outline: 2px solid #2E8B8B;
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset 0.12s ease-out;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 3px;
  box-shadow: var(--awp-shadow-focus);
}

/* Remove webkit's default tap highlight; replace with branded micro-pulse */
button, a, [role="button"], input[type="submit"], input[type="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* --- 2. UNIVERSAL HOVER LIFT (Apple-style affordance) --- */
button:not(:disabled):not([aria-pressed="true"]),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
.awp-doc-btn:not(:disabled),
.awp-doc-btn-primary:not(:disabled) {
  transition:
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.16s ease-out,
    background-color 0.18s ease-out,
    border-color 0.18s ease-out;
}
button:not(:disabled):not([aria-pressed="true"]):hover,
.awp-doc-btn:not(:disabled):hover {
  transform: translateY(-1px);
}
button:not(:disabled):active,
.awp-doc-btn:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}

/* --- 3. UPLOAD ZONE -- Apple-quality polish --- */
.awp-doc-upload-zone {
  position: relative;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(46,139,139,0.02) 0%, rgba(46,139,139,0.06) 100%);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.awp-doc-upload-zone:hover {
  background:
    linear-gradient(180deg, rgba(46,139,139,0.06) 0%, rgba(46,139,139,0.10) 100%);
  border-color: #2E8B8B;
  box-shadow: 0 4px 16px rgba(46, 139, 139, 0.12);
  transform: translateY(-1px);
}
.awp-doc-upload-zone.awp-doc-dragover {
  border-color: #1B5F5F;
  border-style: solid;
  background:
    linear-gradient(180deg, rgba(46,139,139,0.12) 0%, rgba(46,139,139,0.18) 100%);
  box-shadow:
    0 0 0 4px rgba(46, 139, 139, 0.18),
    0 8px 24px rgba(46, 139, 139, 0.16);
  transform: translateY(-2px);
}
.awp-doc-upload-icon {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.awp-doc-upload-zone:hover .awp-doc-upload-icon {
  transform: translateY(-2px) scale(1.06);
}
.awp-doc-upload-zone.awp-doc-dragover .awp-doc-upload-icon {
  transform: scale(1.18);
}

/* --- 4. INPUT POLISH -- softer borders, branded focus --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #2E8B8B !important;
  box-shadow: 0 0 0 4px rgba(46, 139, 139, 0.12) !important;
}

/* --- 5. LOADING STATES -- branded spinner + shimmer --- */
.awp-loading,
[data-loading="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}
.awp-loading::after,
[data-loading="true"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  margin: -10px 0 0 -10px;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(46, 139, 139, 0.18);
  border-top-color: #2E8B8B;
  border-radius: 50%;
  animation: awpSpin 0.8s linear infinite;
}
@keyframes awpSpin { to { transform: rotate(360deg); } }

.awp-skeleton {
  background: linear-gradient(
    90deg,
    rgba(46,139,139,0.06) 0%,
    rgba(46,139,139,0.14) 50%,
    rgba(46,139,139,0.06) 100%
  );
  background-size: 200% 100%;
  animation: awpShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes awpShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 6. SCROLLBAR (subtle, branded) --- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(46, 139, 139, 0.25);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(46, 139, 139, 0.50);
    background-clip: padding-box;
  }
}

/* --- 7. DICTATION DISCOVERABILITY -- pulse on first appearance --- */
@keyframes awpMicReveal {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.awp-mic-button {
  animation: awpMicReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* --- 8. ACCESSIBILITY: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 9. SMOOTH SCROLL (Apple touch) --- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- 10. SELECTION COLOR (brand teal, soft) --- */
::selection {
  background: rgba(46, 139, 139, 0.22);
  color: #1B3A4B;
}

/* --- 11. COOKIE CONSENT BANNER -- mobile responsive override (added 2026-04-25) ---
   The banner is created via inline cssText in /js/cookie-consent.js with no class hooks.
   Selector matches the inline style signature (z-index:9999 + bottom:0) -- only the
   cookie banner uses this combination on AWP.
   Goal: stop the banner from covering hero CTAs on mobile (< 640px).
   Fix: shrink padding, font-size, and gap on small screens; cap height; apply
        !important to override the inline cssText that would otherwise win. */
@media (max-width: 640px) {
  div[style*="z-index: 9999"][style*="bottom"],
  div[style*="z-index:9999"][style*="bottom"] {
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    gap: 6px !important;
    max-height: 25vh !important;
    overflow-y: auto !important;
  }
  div[style*="z-index: 9999"][style*="bottom"] button,
  div[style*="z-index:9999"][style*="bottom"] button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
  }
  div[style*="z-index: 9999"][style*="bottom"] a,
  div[style*="z-index:9999"][style*="bottom"] a {
    font-size: 12px !important;
  }
}
@media (max-width: 380px) {
  /* Very small screens (older iPhone SE etc.): even tighter */
  div[style*="z-index: 9999"][style*="bottom"],
  div[style*="z-index:9999"][style*="bottom"] {
    padding: 6px 10px !important;
    font-size: 11px !important;
    max-height: 22vh !important;
  }
}


/* ============================================================
 * WCAG 2.1 AA additions (added 2026-05-02)
  * Focus indicators (2.4.7) + Skip link styling (2.4.1)
   * ============================================================ */

   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   textarea:focus-visible,
   select:focus-visible,
   [role="button"]:focus-visible,
   [role="link"]:focus-visible,
   [tabindex]:focus-visible {
     outline: 3px solid var(--awp-teal, #2E8B8B);
       outline-offset: 2px;
         border-radius: var(--awp-radius-xs, 4px);
         }

         .skip-link {
           position: absolute;
             left: -9999px;
               top: auto;
                 width: 1px;
                   height: 1px;
                     overflow: hidden;
                       z-index: 10000;
                       }

                       .skip-link:focus,
                       .skip-link:focus-visible {
                         position: fixed;
                           left: 1rem;
                             top: 1rem;
                               width: auto;
                                 height: auto;
                                   padding: 0.75rem 1.25rem;
                                     background: var(--awp-navy, #1B3A4B);
                                       color: #fff;
                                         text-decoration: none;
                                           font-weight: 600;
                                             border-radius: var(--awp-radius-sm, 8px);
                                               outline: 3px solid var(--awp-gold, #D4A843);
                                                 outline-offset: 2px;
                                                   box-shadow: var(--awp-shadow-md, 0 4px 12px rgba(15, 36, 64, 0.08));
                                                   }