/* J&F Alliance Group — shared site styles. Page layout lives inline in each page (converted from the design canvas);
   this file holds what every page shares: navigation states, image placeholders, accessibility helpers. */

/* ---------- Base ---------- */
html { scroll-padding-top: 96px; }
img { max-width: 100%; }
html.menu-open { overflow: hidden; } /* the page doesn't scroll behind the open phone menu */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; background: #101820; color: #ffffff; font: 600 14px/1.2 Inter, system-ui, sans-serif; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 16px; outline: 2px solid #6FB3DE; outline-offset: 2px; color: #ffffff; }

/* ---------- Navigation: desktop notch vs. phone bar ---------- */
.nav-desktop { display: flex; }
.nav-mobile { display: none; }
/* The notch nav needs about 900px for the logo to clear "Solutions" (also in site.js: min-width: 901px). */
.nav-desktop img { max-width: none; } /* keep the logo's proportions; the base rule would squash it in the narrow rail */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
}

/* Solutions dropdown */
.nav-drop__panel { display: none; }
.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel,
.nav-drop.is-open .nav-drop__panel { display: block; }
.nav-drop.is-closed .nav-drop__panel { display: none; }

/* Phone menu */
.nav-mobile .when-open { display: none; }
.nav-mobile.is-open .when-open { display: revert; }
.nav-mobile.is-open .when-closed { display: none; }
.nav-mobile .when-closed, .nav-mobile.is-open span.when-open { display: inline-flex; }
.nav-mobile.is-open nav.when-open { display: flex; } /* #mobile-menu stays a block, so the menu spans the full width */

/* Current page */
header a[aria-current="page"], header a[aria-current="true"] { color: #186090 !important; }
.nav-desktop nav a[aria-current="page"], .nav-desktop nav a[aria-current="true"] { box-shadow: inset 0 -2px 0 #186090; }

/* Form status shown when sign-up isn't connected (readable on the dark footer and the blue band) */
.form-note { flex-basis: 100%; margin: 8px 0 0; font: 400 13px/1.5 Inter, system-ui, sans-serif; color: #D3E7F5; }
form[data-newsletter] { flex-wrap: wrap; }

/* ---------- Image placeholders (until real photography is supplied) ---------- */
.img-slot { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0B1E30; background-image: repeating-linear-gradient(45deg, rgba(111,179,222,.05) 0 2px, transparent 2px 18px); color: #6FB3DE; }
.img-slot__label { max-width: 360px; padding: 24px; text-align: center; font: 500 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.img-slot > img, img.img-fill { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Long-form text (privacy policy, accessibility statement) ---------- */
.prose { max-width: 720px; color: #46545F; font-size: 16px; line-height: 1.7; }
.prose h2 { margin: 56px 0 14px; font: 600 clamp(24px, 2.6vw, 30px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -0.015em; color: #101820; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; font: 600 19px/1.3 "Space Grotesk", sans-serif; color: #101820; }
.prose p, .prose ul, .prose address { margin: 0 0 16px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: #1F77B0; }
.prose strong { color: #101820; font-weight: 600; }
.prose a { color: #1F77B0; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: #124D74; }
.prose a:focus-visible { outline: 2px solid #186090; outline-offset: 2px; border-radius: 2px; }

/* ---------- Print: never print content mid-animation or the nav overlay ---------- */
@media print {
  [data-anim], [data-anim-children] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nav-desktop, .nav-mobile, .skip-link { display: none !important; }
}

/* ---------- Card photo backgrounds (home Solutions grid) ---------- */
/* Faint photo across the top of the card, faded out before the body text and link.
   45% + fade by 70% keeps body text >= 4.6:1 and links >= 4.9:1 on every card image (checked 2026-11-04). */
.card-photo { position: relative; overflow: hidden; isolation: isolate; }
.card-photo > .card-photo-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: right top; opacity: .45; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}