/*
 * File: static/css/vintage-post-office-theme.css
 * The site's own CSS (everything that is not a Tailwind utility), loaded on every page by base-site-layout.html.
 * Tailwind's @theme, @custom-variant and base layer stay in the layout's <style type="text/tailwindcss">, which the
 * Tailwind browser build compiles; nothing here needs it. Rules here are unlayered, as they were inside that block.
 */

/* Vintage post office: aged paper, post-box red, khaki uniform, ink blue, brass */
:root {
  --site-font-display: "Zilla Slab", ui-serif, Georgia, serif;
  --site-font-body: "Hind", ui-sans-serif, system-ui, sans-serif;
  --site-font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --site-canvas: #F4ECDC;
  --site-surface: #FBF6EC;
  --site-surface-raised: #ECE1CB;
  --site-ink: #1F2A44;
  --site-ink-muted: #585C68;
  --site-line: #D9CBB0;
  --site-accent: #B3261E;
  --site-accent-ink: #FBF6EC;
  --site-postbox: #F2D7D2;
  --site-postbox-strong: #9A1F18;
  --site-stampgreen: #DCE6D2;
  --site-stampgreen-strong: #2E5A33;
  --site-sealwax: #EFD9CC;
  --site-sealwax-strong: #7E3317;
  --site-brass: #F0E2BE;
  --site-brass-strong: #6B4F12;
  --site-inland: #D8E4EE;
  --site-inland-strong: #1D4A80;
  --site-khaki: #E6DBC4;
  --site-khaki-strong: #5B4826;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .14 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Night sorting room */
.dark {
  --site-canvas: #121827;
  --site-surface: #1A2234;
  --site-surface-raised: #222B40;
  --site-ink: #F1E8D6;
  --site-ink-muted: #ABA28F;
  --site-line: #313B53;
  --site-accent: #E8665B;
  --site-accent-ink: #121827;
  --site-postbox: #3A1F24;
  --site-postbox-strong: #F2A49B;
  --site-stampgreen: #1F3328;
  --site-stampgreen-strong: #A9D3AE;
  --site-sealwax: #3B261E;
  --site-sealwax-strong: #EDB89C;
  --site-brass: #3A3019;
  --site-brass-strong: #E8CC85;
  --site-inland: #1B2C42;
  --site-inland-strong: #A8C6E6;
  --site-khaki: #2F2A20;
  --site-khaki-strong: #D9C7A0;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body { background-image: var(--paper-grain); }

/* Region colour coding, driven by data-region on any element */
[data-region="north"] { --region-bg: var(--site-inland); --region-fg: var(--site-inland-strong); }
[data-region="south"] { --region-bg: var(--site-stampgreen); --region-fg: var(--site-stampgreen-strong); }
[data-region="east"] { --region-bg: var(--site-sealwax); --region-fg: var(--site-sealwax-strong); }
[data-region="west"] { --region-bg: var(--site-brass); --region-fg: var(--site-brass-strong); }
[data-region="central"] { --region-bg: var(--site-postbox); --region-fg: var(--site-postbox-strong); }
[data-region="north-east"] { --region-bg: var(--site-khaki); --region-fg: var(--site-khaki-strong); }
.region-tint { background-color: var(--region-bg); color: var(--region-fg); }
.region-dot { background-color: var(--region-fg); }
.region-edge { border-left-color: var(--region-fg); }

/* Postage stamp: perforated edge punched out with a mask. Put drop shadows on the wrapper (.postage-stamp-shadow). */
.postage-stamp {
  --stamp-hole: 4.5px;
  --stamp-step: 13px;
  padding: 9px;
  background-color: var(--site-surface);
  -webkit-mask:
    radial-gradient(var(--stamp-hole) at var(--stamp-hole) var(--stamp-hole), #0000 97%, #000) calc(var(--stamp-hole) * -1) calc(var(--stamp-hole) * -1) / var(--stamp-step) var(--stamp-step) round,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(var(--stamp-hole) at var(--stamp-hole) var(--stamp-hole), #0000 97%, #000) calc(var(--stamp-hole) * -1) calc(var(--stamp-hole) * -1) / var(--stamp-step) var(--stamp-step) round,
    linear-gradient(#000 0 0) content-box;
}
.dark .postage-stamp { background-color: #3A4560; }
.postage-stamp-shadow { filter: drop-shadow(0 1px 1.5px rgb(31 42 68 / .22)); transition: transform .18s ease; }
.dark .postage-stamp-shadow { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55)); }
a:hover > .postage-stamp-shadow { transform: rotate(-1.2deg) translateY(-2px); }

/* Round cancellation postmark (partials/postmark-cancellation.html) */
.postmark-cancellation { color: var(--site-ink); opacity: .72; transform: rotate(-9deg); }
.dark .postmark-cancellation { color: var(--site-brass-strong); opacity: .8; }

/* Airmail border: red and blue diagonal stripes */
.airmail-stripe {
  background: repeating-linear-gradient(-45deg,
    var(--site-accent) 0 10px, transparent 10px 15px,
    var(--site-inland-strong) 15px 25px, transparent 25px 30px);
}

/* Inland letter card: pale blue paper with a fold line */
.inland-letter {
  background-color: var(--site-inland);
  background-image: var(--paper-grain);
  position: relative;
}

/* Ruled form lines, like a postal form */
.ruled-input {
  background: transparent;
  border-width: 0 0 1.5px;
  border-style: dashed;
  border-color: var(--site-ink-muted);
  border-radius: 0;
}
.ruled-input:focus { border-bottom-style: solid; border-color: var(--site-accent); }

/* Rubber stamp badge: double inked border, slight tilt */
.rubber-stamp {
  border: 1.5px solid currentColor;
  box-shadow: 0 0 0 2px var(--site-surface), 0 0 0 3px currentColor;
  border-radius: 3px;
  font-family: var(--site-font-display);
  letter-spacing: .02em;
}
.rubber-stamp-tilted { transform: rotate(-3deg); }

/* Primary buttons get a stitched inner rule like a post office counter sign */
a.bg-accent, button.bg-accent, .converter-submit-button { box-shadow: inset 0 0 0 3px var(--site-accent), inset 0 0 0 4px color-mix(in srgb, var(--site-accent-ink) 45%, transparent); }

/* Long-form article text (partials/home-check-digipin-guide.html) */
.article-prose { line-height: 1.7; }
.article-prose > * + * { margin-top: 1rem; }
.article-prose h2 { margin-top: 2.5rem; font-family: var(--site-font-display); font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
.article-prose h3 { margin-top: 1.75rem; font-family: var(--site-font-display); font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.article-prose p, .article-prose li { color: var(--site-ink-muted); }
.article-prose strong { color: var(--site-ink); font-weight: 600; }
.article-prose ul { list-style: disc; padding-left: 1.5rem; }
.article-prose li + li { margin-top: .375rem; }
.article-prose li::marker { color: var(--site-accent); }
.article-prose figure { margin-top: 1.5rem; }
.article-prose figure img { width: 100%; height: auto; border-radius: .5rem; border: 1px solid var(--site-line); }
.article-prose figcaption { margin-top: .5rem; font-size: .875rem; color: var(--site-ink-muted); }
.article-prose-formula { overflow-x: auto; padding: 1rem; border-radius: .5rem; border: 1px solid var(--site-line); background-color: var(--site-surface); font-size: 1.125rem; }
.article-prose math { color: var(--site-ink); }
.article-prose-table-wrapper { overflow-x: auto; border-radius: .5rem; border: 1px solid var(--site-line); background-color: var(--site-surface); }
.article-prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.article-prose th { text-align: left; font-weight: 600; padding: .625rem 1rem; background-color: var(--site-surface-raised); }
.article-prose td { padding: .5rem 1rem; border-top: 1px solid var(--site-line); color: var(--site-ink-muted); }
.article-prose td:nth-child(2) { font-family: var(--site-font-mono); font-weight: 700; color: var(--site-ink); }

output[data-state="error"] { color: var(--site-postbox-strong); font-weight: 600; }
[data-locating="true"] { opacity: .6; cursor: progress; }
dialog[open].site-drawer { animation: site-drawer-slide-in .22s ease-out; }
@keyframes site-drawer-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  dialog[open].site-drawer { animation: none; }
  html { scroll-behavior: auto; }
  .postage-stamp-shadow { transition: none; }
  a:hover > .postage-stamp-shadow { transform: none; }
}

/* Home page map (partials/home-digipin-map-explorer.html). maplibregl-map sets position: relative, which would undo the
   canvas's absolute inset-0 and collapse it. */
#home-digipin-map-canvas.maplibregl-map { position: absolute; font-family: var(--site-font-body); background: var(--site-inland); }
#home-digipin-map-canvas .maplibregl-ctrl-group { background: var(--site-surface); border: 1px solid var(--site-line); }
#home-digipin-map-canvas .maplibregl-ctrl-group button + button { border-top-color: var(--site-line); }
.dark #home-digipin-map-canvas .maplibregl-ctrl-icon { filter: invert(1); }
#home-digipin-map-canvas .maplibregl-ctrl-attrib { font-size: 10px; }