/* ==========================================================================
   ui.css — shared polish layer for panchanandshaw.com
   Loaded after style.css on every template (root, services, blog, city pages).
   Purpose: one consistent visual language, accessible tap targets, no
   mobile overflow, and predictable type scale across three different navs.
   ========================================================================== */

:root {
  --ps-navy: #0f172a;
  --ps-navy-700: #1e3a5f;
  --ps-gold: #d4a017;
  --ps-gold-soft: #f0d78c;
  --ps-cream: #faf7f0;
  --ps-ink: #1a202c;
  --ps-muted: #4b5563;
  --ps-radius: 14px;
  --ps-radius-sm: 10px;
  --ps-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
  --ps-shadow-lg: 0 2px 4px rgba(15, 23, 42, .08), 0 18px 48px rgba(15, 23, 42, .14);
  --ps-tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

html { overflow-x: clip; }

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Type ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1 { letter-spacing: -0.015em; line-height: 1.12; }
h2 { letter-spacing: -0.01em; line-height: 1.2; }

@media (max-width: 640px) {
  h1 { font-size: clamp(1.7rem, 7.2vw, 2.25rem) !important; line-height: 1.16 !important; }
  h2 { font-size: clamp(1.35rem, 5.6vw, 1.75rem) !important; }
  h3 { font-size: clamp(1.1rem, 4.4vw, 1.3rem) !important; }
  body { font-size: 16px; }
}

/* Comfortable measure on wide screens */
.prose p, article p { max-width: 72ch; }

/* ---------- Images ---------- */
img, svg, video { max-width: 100%; height: auto; }
img { color: transparent; }

/* ---------- Links & focus ---------- */
a { text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ps-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--ps-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Tap targets ---------- */
nav a,
nav button,
[role="navigation"] a,
footer a,
.site-footer a {
  min-height: var(--ps-tap);
  display: inline-flex;
  align-items: center;
}

/* icon-only links still need a square hit area */
nav a[aria-label],
nav button[aria-label],
.social a,
a.icon-link {
  min-width: var(--ps-tap);
  justify-content: center;
}

/* mobile menu button: square, obvious, >=44px */
#hamburger, button[aria-controls="mobile-nav"], button[aria-controls="mobile-menu"] {
  min-width: var(--ps-tap);
  min-height: var(--ps-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* horizontal nav keeps its own height but never below 40px on touch */
@media (pointer: coarse) {
  nav a, nav button { min-height: var(--ps-tap); }
}

/* ---------- Nav density at tablet/laptop widths ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  #main-nav a { font-size: 13px !important; padding-left: 8px !important; padding-right: 8px !important; }
  #main-nav a[class*="bg-secondary"] { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---------- Link grids (city/state lists) ---------- */
.grid a { min-height: var(--ps-tap); display: inline-flex; align-items: center; }

/* ---------- Buttons ---------- */
.btn,
a[class*="bg-secondary"],
a[class*="bg-[#d4a017]"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
  line-height: 1.25;
  min-height: var(--ps-tap);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  a[class*="bg-secondary"],
  a[class*="bg-[#d4a017]"],
  button[type="submit"] {
    font-size: 16px !important;
    padding: 14px 18px !important;
    width: 100%;
  }
}

/* ---------- Sticky mobile CTA ---------- */
#sticky-cta {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  min-height: 60px;
  gap: 8px;
}
#sticky-cta a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 4px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .01em;
}
#sticky-cta a i { font-size: 16px; }
#sticky-cta a[href^="/contact"] {
  background: var(--ps-gold);
  color: var(--ps-navy);
  font-weight: 700;
}

/* never let the bar cover page content */
@media (max-width: 1023px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ---------- Forms ---------- */
input, select, textarea {
  font-size: 16px !important; /* stops iOS zoom-on-focus */
  min-height: var(--ps-tap);
  border-radius: var(--ps-radius-sm);
}
textarea { min-height: 120px; }
label { font-weight: 600; }

input::placeholder,
textarea::placeholder { color: #6b7280; opacity: 1; }

/* ---------- Cards ---------- */
.ps-card {
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ps-card:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow-lg); }

/* ---------- Decorative overflow guard ---------- */
[class*="absolute"][class*="border-white"],
.hero-gradient > div { pointer-events: none; }

/* ---------- Selection ---------- */
::selection { background: var(--ps-gold-soft); color: var(--ps-navy); }

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

/* ---------- Tables (fees / comparison) ---------- */
@media (max-width: 640px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th, table td { white-space: normal; }
}

/* ---------- Print ---------- */
@media print {
  nav, #sticky-cta, footer, .no-print { display: none !important; }
  body { padding: 0; }
}