/*
 * Site-wide base rules. Every page links this from its <head>, so they apply
 * before any script runs. Page-specific styling stays in each page.
 */

/* The header is fixed (70px, SiteNav2) and phones get a sticky bottom bar, so
   anchor jumps and keyboard focus stop short of both instead of under them.
   --kp-sample-h is the height of site.js's sample-data notice while it shows. */
html {
  scroll-padding-top: 96px;
  scroll-padding-bottom: calc(96px + var(--kp-sample-h, 0px));
  -webkit-tap-highlight-color: rgba(29, 55, 48, 0.14);
}

/* No double-tap zoom delay on anything tappable. */
a, button, [role="button"], input, select, textarea, label, summary, image-slot {
  touch-action: manipulation;
}

/* Default keyboard focus ring. Zero specificity, so any page rule wins. */
:where(:focus-visible) {
  outline: 2px solid #96592A;
  outline-offset: 2px;
}

/* <main id="main" tabindex="-1"> is the skip link's target; it takes focus
   programmatically and needs no ring of its own (a ring round the whole page
   says nothing). */
main[tabindex="-1"]:focus { outline: none; }

.kp-skip {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 10000;
  padding: 13px 20px;
  border-radius: 999px;
  background: #1D3730;
  color: #FCFAF6;
  font: 700 13px/1 Figtree, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: top 0.15s ease;
}
.kp-skip:focus { top: 12px; }

/* Visually hidden, still read by screen readers. */
.kp-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hover states that survive inline colours. Text links underline; filled
   and outlined pill buttons get a copper halo. Both make the hovered thing
   more prominent, never fainter. */
.kp-link:hover { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kp-btn { transition: box-shadow 0.15s ease; }
.kp-btn:hover { box-shadow: 0 0 0 3px rgba(150, 89, 42, 0.32); }

/* Photo tiles that open the lightbox (site.js makes them buttons). The ring
   sits inside the tile, whose rounded wrapper clips anything outside it. A
   tile still showing a placeholder panel opens nothing, so it loses the zoom
   cursor the page gives every tile inline. */
image-slot[data-lightbox]:focus-visible { outline: 3px solid #96592A; outline-offset: -3px; }
image-slot[data-lightbox][data-kosipark-placeholder],
image-slot[data-lightbox]:not([src]) { cursor: default !important; }

/* A bigger tap area for small inline-styled links (uppercase text links,
   a phone number in a sentence) without moving anything: the hit area
   grows around the link, the layout doesn't. */
.kp-hit { position: relative; }
.kp-hit::after { content: ""; position: absolute; inset: -8px -6px; }

/* Under 300px (a phone at 200% zoom): long words break and grid items may
   shrink below their longest word, so text never pushes the page sideways. */
@media (max-width: 299px) {
  main :where(h1, h2, h3, p, li, dt, dd, a, address) { overflow-wrap: anywhere; }
  main :where([style*="display:grid"], [style*="display: grid"]) > * { min-width: 0; }
}

@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;
  }
}