/* Marketing site — minimal custom CSS.
 *
 * Tailwind covers ~99% of layout/typography. This file is only for things
 * Tailwind doesn't do cleanly:
 *   - The native <details>/<summary> arrow removal (mobile Safari quirk)
 *   - Smooth scroll for in-page anchor links
 */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* offset so anchors don't hide under the sticky header */
}

/* Hide the default disclosure triangle on <details> — we use our own SVG. */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Slightly tighten the focus ring on interactive elements (default is huge). */
:focus-visible {
  outline: 2px solid #5483B3;
  outline-offset: 2px;
}

/* Hero image feather — dissolves the image edges into the dark hero band so it
 * reads as one continuous scene rather than a pasted-on rectangle. The bottom
 * fades most (where the title sits); the sides get a gentle feather too. */
.hero-img-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* Same idea, flipped: feather the TOP edge so the image rises out of the band
 * when the text sits above it. */
.hero-img-fade-top {
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent 100%);
  mask-image: linear-gradient(to top, #000 80%, transparent 100%);
}

/* Feather BOTH top and bottom edges — used when the image sits between the
 * title above and the sub-heading below, so it melts into the band on both ends. */
.hero-img-fade-both {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}