/* RMFC SITE // shared layout rules across every page (see assets/site.js) */

/* WebP versions sit in <picture>: the wrapper must not change how the image fills its frame */
picture { display: contents; }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 16px;
  background: var(--accent); color: var(--ink-inverse); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---- Phone number in the nav bar ---- */
.nav-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-width: 36px; min-height: 36px; color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
}
.nav-phone svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.nav-phone:hover { color: var(--accent); }
.nav-phone span { display: none; }
@media (min-width: 1600px) { .nav-phone span { display: inline; } }
.nav-contact-mobile, .nav-phone-mobile { display: none; }

.footer-phone { color: var(--accent); text-decoration: none; }

/* ---- Mobile menu ---- */
@media (max-width: 960px) {
  .nav-links { background: #0A0A0A; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
  .nav-links .nav-contact-mobile, .nav-links .nav-phone-mobile { display: block; }
  .nav-mobile-toggle { min-width: 44px; min-height: 44px; }
  .nav-phone { min-width: 44px; min-height: 44px; margin-left: auto; }
  .nav-lang { margin-left: 0; }
  .nav-inner { gap: 6px; padding-left: var(--s-4); padding-right: var(--s-4); }
  html.nav-open, html.nav-open body { overflow: hidden; }

  /* Tap targets: 44 px */
  .nav-lang a { display: flex; align-items: center; justify-content: center; min-width: 34px; min-height: 44px; padding: 0 3px; box-sizing: border-box; }
  .cal-nav, .nav-btn { min-width: 44px; min-height: 44px; }
  .check input[type="checkbox"] { width: 24px; height: 24px; }
  .check { min-height: 44px; }
  .footer-col li { margin-bottom: 0; }
  .footer-col a { display: inline-block; padding: 13px 0; }
  .footer-addr a { display: inline-block; padding: 12px 0; }
  .au > a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 379px) { .nav-bar-phone { display: none; } }

/* ---- Phones: buttons on the first screen ---- */
@media (max-width: 600px) {
  .hero, .pk-hero, .sv-hero, .ops-hero, .co-hero, .ct-hero { padding-top: var(--s-7); }
  .hero h1, .pk-hero h1, .sv-hero h1, .ops-hero h1, .co-hero h1, .ct-hero h1 { font-size: clamp(34px, 10.5vw, 44px); line-height: 1; margin-bottom: var(--s-4); }
  .hero-inner { display: flex; flex-direction: column; }
  .hero-actions { order: 3; margin-bottom: var(--s-5); }
  .hero-sub { order: 4; margin-bottom: var(--s-6); }
  .hero-proof { order: 5; }
  .hero-meta { order: 6; }
  .pk-hero-inner > div:first-child, .sv-hero-inner > div:first-child, .ops-hero-inner > div:first-child { display: flex; flex-direction: column; }
  .pk-hero-actions, .sv-hero-actions, .ops-hero-actions { order: 3; margin-bottom: var(--s-5); }
  .pk-hero-sub, .sv-hero-sub, .ops-hero-sub { order: 4; margin-bottom: var(--s-5); }
  .ops-hero-stats { order: 5; }
}

/* ---- Peacekeeper: shorter grids on phones ---- */
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-pending { min-height: 0; padding: var(--s-4); gap: var(--s-3); }
  .serving-grid { grid-template-columns: repeat(2, 1fr); }
  .client { min-height: 0; padding: var(--s-4); }
  .client:nth-child(2n) { border-right: none; }
  .client .client-name { font-size: 14px; overflow-wrap: anywhere; }
  .client .client-foot { overflow-wrap: anywhere; min-width: 0; }
  .client .client-foot span:first-child { min-width: 0; }
}

/* ---- Peacekeeper photos: natural shape on phones, subject centred where a frame stays ---- */
.pk-hero-photo img { object-position: 56% 55%; }
.g-item img { object-position: 50% 30%; }
@media (max-width: 700px) {
  .pk-hero-photo { aspect-ratio: auto; }
  .pk-hero-photo img { height: auto; animation: none; }
  .pk-hero-cap, .g-item figcaption, .co-moment figcaption { position: static; background: var(--bg-elev-1); }
  .gallery-real { grid-auto-rows: auto; }
  .g-item img, .co-moment img { height: auto; }
  .co-moment { aspect-ratio: auto; }
}

/* ---- Partner groups ---- */
.serving-group { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: var(--s-6) 0 var(--s-3); }
.serving-group:first-of-type { margin-top: 0; }

/* ---- Proof line under the home hero ---- */
.hero-proof { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; color: var(--ink); max-width: 72ch; margin-bottom: var(--s-6); }
.hero-proof b { color: var(--accent); font-weight: 700; }

/* ---- Armoured Vehicles: long table on phones ---- */
.avx-show-all { display: none; }
@media (max-width: 700px) {
  .avx-table-ballistic.collapsed tbody tr:not(.lvl-top) { display: none; }
  .avx-show-all { display: inline-flex; margin-top: var(--s-4); }
}

/* ---- OnPost: cue that the portal tabs scroll sideways ---- */
.pt-tabs:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }

/* ---- Contact map ---- */
.ct-map { display: block; width: 100%; height: 220px; border: 1px solid var(--border-strong); background: var(--bg-elev-1); }

/* ---- One floating element at a time ---- */
html.consent-open .rmfc-chat { display: none; }
@media (max-width: 560px) {
  .float-cta.show ~ .rmfc-chat:not(.open) { display: none; }
  .float-cta { right: 16px; }
}
html.consent-open .float-cta { display: none; }

/* ---- Surveillance: four long-range cards fill the row ---- */
#long-range .reasons { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { #long-range .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #long-range .reasons { grid-template-columns: 1fr; } }

/* ---- Room for the full phone number in the bar ---- */
@media (min-width: 1600px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .nav-cta { padding: 10px 12px; }
}

/* ---- Links inside long-form copy ---- */
.offering p a { color: var(--accent); text-decoration: none; }
.offering p a:hover { text-decoration: underline; }
a.ct-quick-item { color: var(--ink); text-decoration: none; }