/* ============================================================
   Feel layer — instant press feedback, hover only where there is
   a mouse, translucent chrome, size-aware type, gentle motion
   preferences. Loaded after the other stylesheets.
   ============================================================ */

/* ---------- Response: feedback the moment a finger or button presses ---------- */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.chip:active, .lb-btn:active, .icon-btn:active, .lang-btn:active { transform: scale(.94); transition: transform 80ms ease-out; }
a.c-card:active, .p-card:active, .news-card:active, .job:active, .net-row:active, .cat-tile:active, .masonry figure:active, .m-card:active, .store-card:active {
  transform: scale(.985); transition: transform 80ms ease-out;
}
.faq summary:active { opacity: .7; }

/* Hover effects only on devices with a real pointer — on touch they "stick" after a tap */
@media (hover: none) {
  .btn:hover, .fab:hover, a.c-card:hover, .net-row:hover, .p-card:hover, .job:hover, .news-card:hover { transform: none; }
  .p-card:hover .media img, .cat-tile:hover img, .masonry figure:hover img, .cat-tile.reveal.in:hover img { transform: none; }
  .p-card:hover, .news-card:hover { box-shadow: none; }
  .step:hover::before { transform: none; }
}

/* ---------- Materials: frosted header on phones too ----------
   The blur sits on a pseudo-element, so it no longer traps the fixed menu drawer
   (a backdrop-filter on the header itself creates a containing block for it). */
@media (max-width: 960px) {
  .site-header { background: transparent; }
  .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 253, 245, .82);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); }
  .mobile-bar { background: rgba(255, 253, 245, .82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-top-color: rgba(19, 36, 26, .08); }
}

/* ---------- Typography: tracking and leading follow size ---------- */
h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
h1 { letter-spacing: -.022em; line-height: 1.04; }
h2 { letter-spacing: -.016em; line-height: 1.08; }
h3 { letter-spacing: -.006em; line-height: 1.2; }
.c-hero h1 { letter-spacing: -.028em; }
p, li, .lead { text-wrap: pretty; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 { letter-spacing: normal; line-height: 1.3; }

/* ---------- FAQ answers open smoothly (browsers that support it; others open instantly) ---------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .32s cubic-bezier(.32, .72, 0, 1), content-visibility .32s allow-discrete; }
  details[open]::details-content { height: auto; }
}

/* ---------- Photo viewer: grows out of the tapped photo, follows the finger ---------- */
.lightbox, .lightbox.open { background: transparent; }   /* dimmed frame-by-frame with the photo's motion (pages-more.js) */
.lightbox img { touch-action: none; user-select: none; -webkit-user-drag: none; will-change: transform; cursor: grab; }
.lightbox img:active { cursor: grabbing; }
.lightbox p, .lightbox .lb-btn { transition: opacity .25s ease; }
.lightbox.dragging p, .lightbox.dragging .lb-btn { opacity: 0; }

/* Phone menu can be swiped closed; let the browser keep vertical scrolling */
@media (max-width: 960px) { .nav-links { touch-action: pan-y; } }

/* ---------- Respect system settings ---------- */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header::before, .mobile-bar, .sub, .people-nav { background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .lightbox.open { background: rgb(6, 22, 16) !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #2f3d34; --line: #9b9378; }
  .btn--ghost, .chip, .c-card, .job, .value, .card { border-color: currentColor; }
  .site-header::before, .mobile-bar { background: var(--bg) !important; backdrop-filter: none !important; }
}

/* The map library gives its layers z-index 400+; keep them inside the map so the sticky header and menus stay on top */
.leaflet-container { isolation: isolate; z-index: 0; }