/* Next.js shell additions. The per page wrapper keeps the body's flex layout. */
div[data-page] { display: contents; }

/* Footer social links, managed in Site settings. */
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid oklch(100% 0 0 / .28); color: oklch(100% 0 0 / .9); transition: background-color 180ms var(--ease, ease), border-color 180ms var(--ease, ease); }
.footer-social a:hover { background: oklch(100% 0 0 / .12); border-color: oklch(100% 0 0 / .5); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

/* Privacy choices: the first-visit banner, the preferences dialog and the footer link (Site settings →
   Privacy choices). The <head> bootstrap sets data-consent-mode and data-consent-pending on <html>. */
html[data-consent-mode="opt-out"] [data-consent-for]:not([data-consent-for~="opt-out"]),
html[data-consent-mode="opt-in"] [data-consent-for]:not([data-consent-for~="opt-in"]),
html[data-consent-mode="gpc"] [data-consent-for]:not([data-consent-for~="gpc"]) { display: none; }

.consent-banner { display: none; position: fixed; z-index: 90; left: 24px; bottom: 24px; width: min(560px, calc(100% - 48px)); padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 24px 60px oklch(23% .033 283 / .16); }
html[data-consent-pending] .consent-banner { display: block; }
.consent-banner p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.consent-banner p a, .consent-dialog-actions a { color: var(--iris); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.consent-actions .button { min-width: 96px; }
.consent-link { display: inline-flex; align-items: center; min-height: 43px; padding: 0 6px; background: none; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.consent-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 26px 28px 28px; border: 0; border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px oklch(23% .033 283 / .28); }
.consent-dialog::backdrop { background: oklch(23% .033 283 / .5); }
.consent-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.consent-dialog h2 { margin: 6px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -.5px; font-weight: 600; }
.consent-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -4px -10px 0 0; border-radius: 50%; background: none; }
.consent-close:hover { background: var(--iris-light); }
.consent-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.consent-dialog p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.consent-gpc { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--mint); color: var(--ink) !important; font-weight: 600; }
.consent-gpc .privacy-options-icon { flex: none; }
.consent-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.consent-option label { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; cursor: pointer; }
.consent-option p { margin-top: 4px; font-size: 13px; }
.consent-option input { appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: 28px; background: oklch(80% .02 285); cursor: pointer; transition: background-color 180ms var(--ease); }
.consent-option input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px oklch(23% .033 283 / .3); transition: transform 180ms var(--ease); }
.consent-option input:checked { background: var(--iris); }
.consent-option input:checked::after { transform: translateX(20px); }
.consent-option input:disabled { opacity: .55; cursor: not-allowed; }
.consent-option input:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }
.consent-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; font-size: 13px; }

.privacy-options-icon { width: 30px; height: 14px; }
.privacy-choices-link .privacy-options-icon { display: inline-block; margin-left: 8px; vertical-align: -2px; }

@media (max-width: 639px) {
  .consent-banner { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 18px; border-radius: 20px; }
  .consent-banner p { font-size: 13px; }
  .consent-actions { margin-top: 14px; gap: 8px; }
  .consent-actions .button { flex: 1 1 0; min-width: 0; }
  .consent-dialog { padding: 22px 20px 24px; }
  .consent-dialog h2 { font-size: 21px; }
  .privacy-choices-link span { padding: 6px 0; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-option input, .consent-option input::after { transition: none; }
}

/* Footer email signup (Site settings → Footer → Email signup). It needs JavaScript (footer-signup.js). */
html:not(.js) .footer-signup { display: none; }
.footer-brand { flex-wrap: wrap; }
.footer-signup { flex-basis: 100%; width: 100%; max-width: 400px; margin-top: 32px; }
.footer-signup label { display: block; margin-bottom: 10px; color: var(--paper, oklch(98% .011 308)); font-size: 14px; font-weight: 600; }
.footer-signup-field { display: flex; gap: 8px; }
.footer-signup input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 18px; border: 1px solid oklch(100% 0 0 / .28); border-radius: 10px; background: oklch(100% 0 0 / .06); color: var(--paper, oklch(98% .011 308)); font: inherit; font-size: 14px; }
.footer-signup input::placeholder { color: oklch(100% 0 0 / .5); }
.footer-signup input:focus { border-color: oklch(83% .073 290); outline: 2px solid oklch(83% .073 290 / .4); outline-offset: 2px; }
.footer-signup input[aria-invalid=true] { border-color: oklch(75% .13 24); }
.footer-signup .button { flex: none; margin: 0; background: var(--paper, oklch(98% .011 308)); color: var(--ink); }
.footer-signup .button:hover { background: oklch(94% .035 290); }
.footer-signup .button:disabled { opacity: .6; }
.footer-signup-status { margin: 8px 0 0 !important; max-width: none !important; color: oklch(88% .07 157) !important; font-size: 13px !important; line-height: 1.5; }
.footer-signup-status:empty { display: none; }
.footer-signup-status.is-error { color: oklch(82% .1 24) !important; }
.footer-signup-note { margin: 10px 0 0 !important; max-width: none !important; color: var(--dark-secondary, oklch(83% .028 289)); font-size: 12px !important; line-height: 1.6; }
.footer-signup-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-signup-note a:hover { color: oklch(83% .073 290); }
/* At 539px and below the brand column stacks (compositions.css); wrapping would start a second column. */
@media (max-width: 539px) { .footer-brand { flex-wrap: nowrap; } .footer-signup { max-width: none; margin-top: 4px; } }

/* Contact: with JavaScript the "unavailable" panel shows only if contact-form.js finds no destination, so it
   never flashes before the request form appears. Without JavaScript it stays visible. */
html.js #contact-unavailable:not(.is-active) { display: none; }