/* PerfectCMS additions for the eSign design. esign.css stays untouched. */

body { margin: 0; }

/* Uploaded media fills its frame. While a slot is empty, the CMS removes the
   <img>/<video> and the designer's caption shows instead. */
.media > img, .media > video, .hero-media > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media > img ~ .cap, .media > video ~ .cap, .hero-media > video ~ .cap { display: none; }
.hero-media > video { opacity: .55; }

/* Projects: the design gives tiles 1 and 2 a larger size. With a repeat the
   CMS outputs the same markup for every tile, so size by position instead. */
.pgrid > .tile { grid-column: span 4; }
.pgrid > .tile:nth-child(1) { grid-column: span 7; }
.pgrid > .tile:nth-child(2) { grid-column: span 5; }
.pgrid > .tile:nth-child(1) .media { aspect-ratio: 4 / 3; }
.pgrid > .tile:nth-child(2) .media { aspect-ratio: 4 / 5; }
.pgrid > .tile:nth-child(n+3) .media { aspect-ratio: 1 / 1; }
@media (max-width: 960px) { .pgrid > .tile:nth-child(n) { grid-column: span 6; } }
@media (max-width: 640px) { .pgrid > .tile:nth-child(n) { grid-column: span 12; } }

/* The hidden attribute must win over layout classes such as .stack (display: flex),
   so the mobile menu and the form's success message stay hidden until needed. */
[hidden] { display: none !important; }

/* Form feedback. PerfectCMS adds .pcms-form-error under a field and
   .pcms-form-alert above the form. */
[data-form-error], .pcms-form-error, .pcms-form-alert { color: #FFD7DA; font-size: 14px; margin: 4px 0 0; }
.sec:not(.inkbg):not(.dark) :is([data-form-error], .pcms-form-error, .pcms-form-alert) { color: var(--red-dk); }

/* Choice chips in forms are real radio buttons styled as the design's chips. */
label.chip { display: inline-flex; align-items: center; position: relative; }
label.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
label.chip:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Signs overview: the CMS repeats one item; alternate the photo side like the design. */
[data-alternate] > article:nth-child(even) > .media { order: 2; }

/* A guide or city without a page yet is shown as plain text. */
span.tile { cursor: default; }

/* Menus: the CMS repeats one <li> per item. In the header the list and its
   items take no box, so the links stay direct flex items of the nav. */
.menu { display: contents; list-style: none; margin: 0; padding: 0; }
.menu > li { display: contents; }
.nav a[aria-current="page"] { background: rgba(23,25,28,.06); }
.ftr-bot ul { list-style: none; margin: 0; padding: 0; }