/* Code Frontiers holding page */

:root {
    /* Colours */
    --bg: #0b0c0f;
    --text: #ece9e2;        /* Warm off-white, softer than pure white on near-black */
    --muted: #8b9099;
    --accent: #4fe08a;      /* Signal green, kept for small signals (status light, globe dots, satellite) */
    --accent-glow: 79, 224, 138;
    --text-glow: 236, 233, 226;
    --hairline: rgba(236, 233, 226, 0.14);

    /* Fonts */
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        sans-serif;
    --font-brand: 'Archivo', var(--font-ui);
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Page spacing, adjusted per breakpoint below. The top and bottom values grow automatically to clear
       the notch and home indicator, which viewport-fit=cover lets content run under. */
    --pad-top: 1.5rem;
    --pad-bottom: 1.5rem;
    --header-pad: 0.5rem;
    --footer-pad-x: 2rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-brand);
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    min-height: 100dvh; /* Visible screen height, tracking mobile browser toolbars */
    display: flex;
    flex-direction: column;
}

/* Visible to screen readers and search engines only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Stacking: starfield at the back, then the globe and footer, with the header and contact button on top
   so globe labels never cover them */
#stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#canvas-container,
footer {
    position: relative;
    z-index: 1;
}

header,
.cta {
    position: relative;
    z-index: 2;
}

/* Header */

header {
    padding: var(--header-pad);
    padding-top: max(var(--pad-top), env(safe-area-inset-top));
    text-align: center;
}

h1 {
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 0.7rem;
}

/* Wordmark: wide lowercase with a green vertical line (a code "pipe") between the two words */
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-stretch: 110%;
    letter-spacing: 0.01em;
    margin-right: -0.01em; /* Cancels the trailing letter spacing so the wordmark centres truly */
    white-space: nowrap;
}

.wordmark-line {
    width: max(2px, 0.055em);
    height: 1.05em;
    background-color: var(--accent);
}

/* Same width as the wordmark so the two read as one unit */
.tagline {
    font-stretch: 110%;
    font-weight: 300;
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

/* Mono "readout" label with a small green status light */
.since {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.since::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-glow), 0.8);
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.5rem 1.1rem;
    /* Outlined rather than filled, so it matches the fine lines of the globe and labels and never outshines the logo */
    border: 1px solid rgba(var(--text-glow), 0.35);
    border-radius: 5px;
    background-color: rgba(11, 12, 15, 0.6);
    color: var(--text);
    /* The brand voice (Archivo, normal case), as it's an invitation rather than a readout */
    font-stretch: 110%;
    font-size: 0.88rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Touch screens keep the recommended 44px minimum tap height */
@media (pointer: coarse) {
    .contact-btn {
        min-height: 44px;
    }
}

.contact-btn:hover,
.contact-btn:focus-visible {
    border-color: rgba(var(--text-glow), 0.8);
    background-color: rgba(var(--text-glow), 0.08);
}

.contact-btn:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

/* Contact button sits in the top-right corner on wider screens */
.cta {
    position: absolute;
    top: max(1.6rem, env(safe-area-inset-top));
    right: max(2rem, env(safe-area-inset-right));
}

/* Globe */

#canvas-container {
    flex: 1;
    min-height: 300px;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Service labels, positioned over their dots by the script */
.tooltip {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 80px;
    padding: 5px 9px;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    background-color: rgba(11, 12, 15, 0.85);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Footer */

/* Established date bottom-left and copyright bottom-right on wider screens, centred on phones */
footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1.4rem;
    margin-top: auto;
    padding: 0.3rem var(--footer-pad-x);
    padding-bottom: max(var(--pad-bottom), env(safe-area-inset-bottom));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-align: center;
}

footer .since {
    font-size: inherit;
    letter-spacing: inherit;
}

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

/* Phones and small tablets */
@media (max-width: 768px) {
    :root {
        --pad-top: 1.2rem;
        --pad-bottom: 1.2rem;
        --header-pad: 0.4rem;
        --footer-pad-x: 0.3rem;
    }

    h1 {
        font-size: 2.1rem;
        margin-bottom: 0.5rem;
    }

    .tagline {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }

    /* The contact button joins the page flow beneath the globe, kept together with the footer at the bottom */
    .cta {
        position: relative;
        top: auto;
        right: auto;
        margin-top: auto;
        padding: 0.8rem 0 0.9rem;
        text-align: center;
    }

    footer {
        justify-content: center;
        margin-top: 0;
    }

    #canvas-container {
        min-height: 250px;
    }
}

/* Phones in portrait: a globe area sized from the screen height rather than flexing to fill, so it stays steady */
@media (max-width: 768px) and (orientation: portrait) {
    #canvas-container {
        flex: 0 0 auto;
        height: 464px;
        /* Fill the space left by the header, contact button and footer on taller phones. svh is the height with the browser
           toolbars showing, so the globe doesn't resize as they slide in and out. */
        height: max(464px, calc(100svh - 220px));
    }
}

/* Short screens (eg. iPhone SE, small laptop windows). Comes after the phone rules so its tighter header
   padding wins on short phones. */
@media (max-height: 700px) {
    :root {
        --pad-top: 1.2rem;
        --header-pad: 0.3rem;
    }

    h1 {
        font-size: 1.9rem;
    }

    .tagline {
        font-size: 0.9rem;
    }

    #canvas-container {
        min-height: 200px;
    }
}

/* Short phones in portrait: trim the globe area so the footer stays on screen */
@media (max-width: 768px) and (orientation: portrait) and (max-height: 700px) {
    #canvas-container {
        height: 424px;
        height: max(424px, calc(100svh - 214px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-btn {
        transition: none;
    }
}