/* Generated for golfwithnico.com — styles for the enhancement island.
 *
 * Only written into a site whose YAML sets `enhance.vue: true` (gen_sites.py deletes it otherwise), and
 * linked from base.html, so it is one cached request rather than a block inlined into every page. A
 * stylesheet is render-blocking, so the reveal's hidden state is in place before the first paint and there
 * is no flash of content that then disappears.
 *
 * Class names follow Vue's transition vocabulary (enter-from / enter-active / enter-to), so this file and
 * the components in enhance.js describe motion the same way.
 */

/* ---------------------------------------------------------------- reveal on scroll
   Armed only while `enhance` is on <html>, which the inline script in the head adds and the same script
   removes on any failure. Nothing here can hide content from a reader without JavaScript. */
html.enhance [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-rise, 1.75rem));
}
html.enhance [data-reveal].reveal-enter-active {
  transition: opacity var(--reveal-duration, .7s) var(--reveal-ease, cubic-bezier(.4, 0, .2, 1)),
              transform var(--reveal-duration, .7s) var(--reveal-ease, cubic-bezier(.4, 0, .2, 1));
  will-change: opacity, transform;
}
html.enhance [data-reveal].reveal-enter-to { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- masthead
   Sticky is plain CSS and needs no script; only the shadow is scroll-driven. */
/* the hairline is CSS so it exists whether or not the script runs; .is-scrolled only adds the soft shadow */
.masthead { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--rule); }
.masthead.is-scrolled { box-shadow: 0 8px 24px -18px rgb(0 0 0 / .45); }
html.enhance .masthead { transition: box-shadow .3s ease; }

/* The masthead now sits above the page, so two things that live under it must be lifted or offset: the skip
   link, which is the first thing a keyboard visitor reaches, and anything a fragment link points at. */
.skip:focus, .skip:focus-visible { z-index: 30; }
:target, .service-row[id] { scroll-margin-top: 5.5rem; }
@media (max-width: 640px) {
  /* the nav wraps onto a second row at this width, so the bar is nearly twice as tall */
  :target, .service-row[id] { scroll-margin-top: 9rem; }
}

/* while the island is closing an answer the marker must already read "closed", even though the element is
   still open for the length of the animation */
.faq details[open].is-closing summary::after { transform: none; }

/* ---------------------------------------------------------------- FAQ
   The native <details> stays in the DOM exactly as rendered — find-in-page still reaches a closed answer,
   and the page works with the script gone. The script only animates the height as it opens. */
.faq details.is-animating { overflow: hidden; }

/* ---------------------------------------------------------------- photo viewer
   A button wraps each photograph so the keyboard and the accessibility tree get a real control; the <img>
   keeps its alt text, which becomes the button's name. */
.photo-open {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; color: inherit; font: inherit;
}
.photo-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.viewer {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto;
  background: color-mix(in srgb, var(--ink) 94%, #000); color: var(--paper);
}
.viewer-enter-active, .viewer-leave-active { transition: opacity .25s ease; }
.viewer-enter-from, .viewer-leave-to { opacity: 0; }
.viewer-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem); font-size: .95rem;
}
.viewer-bar button {
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: .5rem .75rem; border-radius: var(--radius);
}
.viewer-bar button:hover { background: rgb(255 255 255 / .12); }
.viewer-stage {
  position: relative; display: grid; place-items: center; min-height: 0;
  padding-inline: clamp(3rem, 7vw, 4.5rem);
}
.viewer-stage img { max-width: 100%; max-height: calc(100dvh - 10rem); object-fit: contain; }
@media (max-width: 40em) {
  /* no gutters on a phone: the photograph takes the width and the arrows float over it */
  .viewer-stage { padding-inline: 0; }
  .viewer-stage img { max-height: calc(100dvh - 7.5rem); }
  .viewer-step { background: rgb(0 0 0 / .35); border-radius: 50%; padding: .6rem .9rem; }
}
.viewer-foot { padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.5rem; text-align: center; min-height: 3.5rem; }
.viewer-foot p { margin: 0 auto; max-width: 60ch; opacity: .8; }
.viewer-step {
  position: absolute; top: 50%; translate: 0 -50%; background: none; border: 0; cursor: pointer;
  color: var(--paper); font-size: 2rem; line-height: 1; padding: 1rem; opacity: .7;
}
.viewer-step:hover { opacity: 1; }
.viewer-step[aria-disabled="true"] { opacity: .2; cursor: default; }
.viewer-prev { inset-inline-start: 0; }
.viewer-next { inset-inline-end: 0; }
.viewer-fade-enter-active, .viewer-fade-leave-active { transition: opacity .2s ease; }
.viewer-fade-enter-from, .viewer-fade-leave-to { opacity: 0; }
.viewer :focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
html.viewer-open { overflow: hidden; }

/* ---------------------------------------------------------------- the two ways out of motion
   A printout must carry the whole document: a reader who has not scrolled a section into view would
   otherwise get blank paper where the practice areas should be. */
@media print {
  html.enhance [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .masthead { position: static; box-shadow: none; }
  .viewer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.enhance [data-reveal] { opacity: 1; transform: none; }
  html.enhance [data-reveal].reveal-enter-active,
  html.enhance .masthead,
  .viewer-enter-active, .viewer-leave-active,
  .viewer-fade-enter-active, .viewer-fade-leave-active { transition: none; }
}