/* ==========================================================================
   The DX Atlas Project - site.css
   The one public stylesheet. Loaded AFTER /Assets/Fonts/fonts.css and the local
   Bootstrap. Every colour on the site is a variable declared in :root below;
   nothing else in this file or in markup carries a palette hex. Sections are
   marked with ==== rules; add new CSS inside the right section.
   Design reference: Style-Guide.md in the development folder.
   ========================================================================== */


/* ==== 1. Palette and tokens ============================================== */
:root {
    /* paper and ink */
    --paper: #f6f2e8;
    --paper-2: #fffcf5;
    --paper-3: #ebe4d4;
    --ink: #1c2126;
    --ink-soft: #434c56;
    --ink-muted: #6f7984;
    --rule: #d6cdb9;
    --rule-strong: #b3a78d;

    /* atlas colours */
    --sea: #275d8c;
    --sea-deep: #1a4367;
    --sea-tint: #e1ebf3;
    --land: #b08b44;
    --land-tint: #f0e7cf;
    /* The seven continents on the world and continent maps (AtlasMaps.ContinentPalette):
       quiet tints a shade apart from the land tint, one hue each. */
    --tint-na: #d8e1e9;
    --tint-sa: #e6d9c2;
    --tint-eu: #dce3cd;
    --tint-af: #ecd8bf;
    --tint-as: #e8d7d1;
    --tint-oc: #d4e3dd;
    --tint-an: #eaedf0;
    --meridian: #973a2b;
    --meridian-tint: #f3dfd9;
    --graticule: #c6d0d9;

    /* roles */
    --link: var(--sea);
    --link-hover: var(--sea-deep);
    --focus-ring: var(--sea);
    --selection: var(--land-tint);

    /* type */
    --font-display: "Spectral", Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
    --text-base: 1.0625rem;
    --leading: 1.6;

    /* layout */
    --max-width: 74rem;
    --gutter: 1rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --radius: 3px;

    /* Bootstrap 5.3 hooks, so its components take the palette */
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--text-base);
    --bs-body-line-height: var(--leading);
    --bs-link-color: var(--link);
    --bs-link-hover-color: var(--link-hover);
    --bs-border-color: var(--rule);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-font-monospace: var(--font-mono);
    --bs-heading-color: var(--ink);
}


/* ==== 2. Base ============================================================ */
html {
    background: var(--paper);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--selection);
}

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.005em;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.875rem;
    margin-top: var(--space-5);
}

h3 {
    font-size: 1.375rem;
    margin-top: var(--space-4);
}

h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: var(--space-4) 0 var(--space-2);
}

p {
    margin: 0 0 var(--space-3);
}

.lede {
    font-family: var(--font-display);
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sea);
    margin: 0 0 var(--space-2);
}

.muted {
    color: var(--ink-muted);
}

small, .small {
    font-size: 0.875rem;
}

code, kbd, samp, .mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    color: var(--ink);
    background: var(--paper-3);
    padding: 0.05em 0.35em;
    border-radius: var(--radius);
}

blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    border-left: 3px solid var(--land);
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--ink-soft);
}

blockquote footer {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink-muted);
    margin-top: var(--space-2);
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--space-5) 0;
    opacity: 1;
}

ul, ol {
    padding-left: 1.4rem;
    margin: 0 0 var(--space-3);
}

li {
    margin-bottom: var(--space-1);
}

img {
    max-width: 100%;
    height: auto;
}

/* geography and radio tokens that recur in prose */
.callsign, .grid-square, .adif-id {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* ==== 3. Layout wrappers ================================================= */
.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}


/* ==== 4. Masthead ======================================================== */
.site-header {
    background: var(--paper);
    border-top: 4px solid var(--sea);
    border-bottom: 1px solid var(--rule);
}

.site-header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--gutter) var(--space-3);
}

.site-brand {
    display: inline-block;
    text-decoration: none;
    border: 0;
}

.site-logo {
    display: block;
    height: 64px;
    width: auto;
}

.site-tagline {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--ink-muted);
}

.site-utility {
    display: flex;
    gap: var(--space-3);
    font-size: 0.875rem;
    align-items: center;
}

.site-utility a {
    text-decoration: none;
    color: var(--ink-soft);
}

.site-utility a:hover {
    color: var(--link-hover);
}

.site-hello {
    color: var(--ink-muted);
}

.site-hello strong {
    color: var(--ink-soft);
    font-weight: 600;
}

.utc-clock {
    font-family: var(--font-mono);
    color: var(--ink-muted);
}


/* ==== 5. Primary navigation ============================================== */
.site-nav {
    border-bottom: 1px solid var(--rule);
    background: var(--paper-2);
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: var(--max-width);
    margin: 0 auto;
}

.site-nav li {
    margin: 0;
}

.site-nav a {
    display: block;
    padding: 0.7rem 1rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    border-bottom: 3px solid transparent;
}

.site-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--rule-strong);
}

.site-nav a.is-current {
    color: var(--sea-deep);
    border-bottom-color: var(--sea);
}


/* ==== 6. Page frame ====================================================== */
.site-main {
    padding: var(--space-5) 0 var(--space-6);
}

.page-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.page-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* The entity flag sits in the title block, over the sidebar column (David, 2026-10-30). */
.page-hero .flag-figure {
    flex: 0 0 25%;
    max-width: 16rem;
    margin-left: auto;
}

.page-hero h1 {
    margin-bottom: var(--space-2);
}

.page-hero .lede {
    max-width: 46rem;
    margin-bottom: 0;
}

.page-main {
    min-width: 0;
}

.page-main > h2:first-child {
    margin-top: 0;
}

.breadcrumb-trail {
    font-size: 0.875rem;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}

.breadcrumb-trail a {
    color: var(--ink-muted);
}

.breadcrumb-trail .sep {
    padding: 0 0.4em;
    color: var(--rule-strong);
}


/* ==== 7. Sidebar and the atlas hierarchy ================================= */
.sidebar {
    font-size: 0.9375rem;
}

.sidebar-block {
    margin-bottom: var(--space-5);
}

.sidebar-block h4 {
    margin-top: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--rule);
}

.atlas-nav, .atlas-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atlas-nav ul {
    padding-left: 0.9rem;
    border-left: 1px solid var(--graticule);
    margin-left: 0.2rem;
}

.atlas-nav li {
    margin: 0;
}

.atlas-nav a {
    display: block;
    padding: 0.3rem 0.4rem;
    text-decoration: none;
    color: var(--ink-soft);
    border-radius: var(--radius);
}

.atlas-nav a:hover {
    background: var(--sea-tint);
    color: var(--sea-deep);
}

.atlas-nav a.is-current {
    background: var(--sea-tint);
    color: var(--sea-deep);
    font-weight: 600;
}

.atlas-nav .level {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-left: 0.4em;
}

/* The entity's flag, top of the sidebar (Entity.aspx). A hairline border so
   flags with a white field (Japan, Cyprus) keep their edge on the paper. The
   caption names whose flag it is when the entity flies another's. */
.flag-figure {
    margin: 0;
}

.flag-figure .entity-flag {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
}

.flag-figure figcaption {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}


/* ==== 8. Figures, maps and citations ==================================== */
.map-figure {
    margin: 0 0 var(--space-5);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.map-figure .map-canvas {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(90deg, var(--graticule) 1px, transparent 1px) 0 0 / 10% 100%,
        linear-gradient(var(--graticule) 1px, transparent 1px) 0 0 / 100% 12.5%,
        var(--sea-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* Live maps (atlas-map.js). Leaflet adds .leaflet-container to the canvas; these
   rules replace the placeholder's graticule background and centring. The sea is
   the background; world maps (--sphere) sit on paper with the globe drawn in sea. */
.map-figure .map-canvas.leaflet-container {
    display: block;
    background: var(--sea-tint);
    font-family: var(--font-body);
}

.map-figure .map-canvas--sphere.leaflet-container {
    background: var(--paper-2);
}

.map-figure .map-canvas--square {
    aspect-ratio: 1 / 1;
}

.map-tooltip {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink);
    border-color: var(--rule-strong);
    border-radius: var(--radius);
    box-shadow: none;
}

/* Permanent labels (grid squares): the data face, no box. */
.leaflet-tooltip.map-label {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--meridian);
}

.leaflet-tooltip.map-label::before {
    display: none;
}

.map-figure figcaption {
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
}

.map-figure figcaption .figure-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.citation {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.citation a {
    color: var(--ink-muted);
}

.figure-tools {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--paper-3);
    font-size: 0.8125rem;
}

.figure-tools a {
    text-decoration: none;
}


/* ==== 9. Data sheet tables =============================================== */
.data-sheet {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-4);
    font-size: 0.9375rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
}

.data-sheet caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ink);
    padding: 0 0 var(--space-2);
}

.data-sheet th, .data-sheet td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    text-align: left;
}

.data-sheet thead th {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule-strong);
}

.data-sheet tbody th {
    font-weight: 600;
    color: var(--ink-soft);
    width: 38%;
}

.data-sheet tbody tr:last-child th, .data-sheet tbody tr:last-child td {
    border-bottom: 0;
}

.data-sheet td.num {
    text-align: right;
    font-family: var(--font-mono);
}

.data-sheet .source {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}


/* ==== 10. Callouts ======================================================= */
.callout {
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    border-left: 4px solid var(--sea);
    background: var(--sea-tint);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout h4 {
    margin-top: 0;
    color: var(--sea-deep);
}

.callout--land {
    border-left-color: var(--land);
    background: var(--land-tint);
}

.callout--land h4 {
    color: var(--land);
}

.callout--meridian {
    border-left-color: var(--meridian);
    background: var(--meridian-tint);
}

.callout--meridian h4 {
    color: var(--meridian);
}


/* ==== 11. Buttons and pager ============================================== */
.btn-atlas {
    --bs-btn-bg: var(--sea);
    --bs-btn-border-color: var(--sea);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--sea-deep);
    --bs-btn-hover-border-color: var(--sea-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sea-deep);
    --bs-btn-active-border-color: var(--sea-deep);
    --bs-btn-border-radius: var(--radius);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn-atlas-outline {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-color: var(--ink-soft);
    --bs-btn-hover-bg: var(--paper-3);
    --bs-btn-hover-border-color: var(--ink-soft);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-border-radius: var(--radius);
    font-weight: 600;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-4) 0;
    font-size: 0.9375rem;
}

.pager a, .pager span {
    display: inline-block;
    min-width: 2.2rem;
    padding: 0.3rem 0.6rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink-soft);
    background: var(--paper-2);
}

.pager a:hover {
    border-color: var(--rule-strong);
    color: var(--ink);
}

.pager .is-current {
    background: var(--sea);
    border-color: var(--sea);
    color: #fff;
    font-weight: 600;
}

.pager .is-disabled {
    color: var(--ink-muted);
    background: transparent;
    opacity: 0.6;
}

.pager .pager-summary {
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    margin-left: auto;
}


/* ==== 11a. Atlas notes (sidebars, App_Controls/AtlasNotes.ascx) =========== */

.atlas-note-title {
    margin-bottom: var(--space-1);
}

.note-status {
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--meridian);
    background: var(--meridian-tint);
    border-radius: var(--radius);
}


/* ==== 12. Advertising placeholders ======================================= */
/* Three slots per page: top leaderboard (first child of page-main), sidebar
   rectangle, bottom leaderboard. Borders are deliberate; see Code-Standards.
   Placeholders only until the N5KWD ad infrastructure is imported. Never a
   fixed height - the real control renders a label and a disclosure line. */
.ad-slot {
    margin: 0 auto var(--space-4);
    border: 1px solid var(--rule-strong);
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ad-slot--leaderboard {
    max-width: 728px;
    min-height: 90px;
}

.ad-slot--rectangle {
    max-width: 300px;
    min-height: 250px;
    margin-left: 0;
}

.ad-slot img {
    display: block;
}


/* ==== 13. Footer ========================================================= */
.site-footer {
    background: var(--paper-3);
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.9375rem;
    padding: var(--space-5) 0 var(--space-4);
}

.site-footer h4 {
    margin-top: 0;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer li {
    margin-bottom: var(--space-1);
}

.site-footer a {
    color: var(--ink-soft);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.site-colophon {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule-strong);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.site-colophon p {
    margin: 0 0 var(--space-1);
}


/* ==== 13b. Sign-in ======================================================= */
.login-card {
    max-width: 26rem;
    margin: var(--space-4) auto var(--space-5);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--sea);
    border-radius: var(--radius);
}

.login-card h1 {
    font-size: 1.875rem;
    margin-bottom: var(--space-4);
}

.login-card .form-control {
    background: #fff;
    border-color: var(--rule-strong);
}

.login-card .form-control:focus {
    border-color: var(--sea);
    box-shadow: 0 0 0 0.2rem var(--sea-tint);
}

/* honeypot: present for bots, invisible and unreachable for people */
.form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field-error {
    display: block;
    color: var(--meridian);
    font-size: 0.8125rem;
    margin-top: var(--space-1);
}


/* ==== 14. Style showcase (Default2.aspx) ================================ */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.swatch {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-2);
    font-size: 0.8125rem;
}

.swatch-chip {
    height: 3.5rem;
}

.swatch-name {
    display: block;
    padding: 0.4rem 0.6rem 0;
    font-weight: 600;
    color: var(--ink);
}

.swatch-value {
    display: block;
    padding: 0 0.6rem 0.5rem;
    font-family: var(--font-mono);
    color: var(--ink-muted);
}

.swatch-chip.c-paper { background: var(--paper); }
.swatch-chip.c-paper-2 { background: var(--paper-2); }
.swatch-chip.c-paper-3 { background: var(--paper-3); }
.swatch-chip.c-ink { background: var(--ink); }
.swatch-chip.c-ink-soft { background: var(--ink-soft); }
.swatch-chip.c-ink-muted { background: var(--ink-muted); }
.swatch-chip.c-rule { background: var(--rule); }
.swatch-chip.c-sea { background: var(--sea); }
.swatch-chip.c-sea-deep { background: var(--sea-deep); }
.swatch-chip.c-sea-tint { background: var(--sea-tint); }
.swatch-chip.c-land { background: var(--land); }
.swatch-chip.c-land-tint { background: var(--land-tint); }
.swatch-chip.c-meridian { background: var(--meridian); }
.swatch-chip.c-meridian-tint { background: var(--meridian-tint); }
.swatch-chip.c-graticule { background: var(--graticule); }

.type-specimen {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-2);
    margin-bottom: var(--space-3);
}

.type-specimen .spec-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}

.type-specimen h1, .type-specimen h2, .type-specimen h3, .type-specimen h4, .type-specimen p {
    margin: 0;
}


/* ==== 15. Small screens ================================================== */
@media (max-width: 48rem) {
    h1 {
        font-size: 1.875rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .lede {
        font-size: 1.125rem;
    }

    .site-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .site-logo {
        height: 48px;
    }

    .site-nav a {
        padding: 0.55rem 0.7rem;
        font-size: 0.875rem;
    }

    .site-main {
        padding-top: var(--space-4);
    }

    .ad-slot--rectangle {
        margin-left: auto;
    }
}