/* ===========================================================
   UNAMIQ - base
   Element defaults only: the reset, the body, links, focus
   visibility, the skip link, the page-transition overlay and
   the reduced-motion rule.

   Nothing here targets a component or a page. If you are adding
   a rule and it needs a class name, it does not belong in this
   file - see components.css.

   LOAD ORDER (set in includes/head.php, do not shuffle):
   fonts -> tokens -> base -> layout -> components -> pages/*
=========================================================== */

/* ===========================================================
   TYPE SCALE

   Lives here rather than in tokens.css because font sizes do
   not vary between light and dark — and because the home page
   never loads tokens.css, so sizes defined there would be
   undefined on it.

   Eight steps. The site had 39 distinct font sizes, with
   .82 / .83 / .85rem and .88 / .9 / .92 / .95 / .98rem sitting
   beside each other. That is drift, not intent.

   Pick from these when adding something. If none fits, what you
   are building probably wants a different weight or more space,
   not a new size.

   The fluid clamp() sizes are deliberately NOT collapsed into
   this. Each is tuned to one element's range and encodes a real
   decision about how it should behave between phone and desktop.
=========================================================== */

:root{
    --fs-2xs:   .66rem;   /* tile tags, footer legal, placeholder labels */
    --fs-xs:    .70rem;   /* mono labels — the most used size on the site */
    --fs-sm:    .78rem;   /* buttons, skip link */
    --fs-base:  .85rem;   /* secondary copy, teasers */
    --fs-md:    .95rem;   /* body copy */
    --fs-lg:   1.15rem;   /* pulled statements, card titles, sub-headings */
    --fs-xl:   1.35rem;   /* larger sub-headings, footer logo */

    /* Form fields only. 16px is the threshold below which iOS
       Safari ZOOMS THE PAGE when you tap a field — a genuinely
       unpleasant surprise on a phone. Do not lower this. */
    --fs-input:  1rem;
}

/* NOTE: this file defines no COLOUR properties.
   All colour values live in tokens.css, which loads before this
   file. A colour :root block here would override the theme and
   break every interior page. The home page's own dark defaults
   live in pages/home.css, which only the home page loads. */

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

html, body{
    width:100%;
}

body{
    background:var(--bg-color);
    color:var(--text, white);
    font-family:"Space Grotesk", sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
}

#uq-transition{
    position:fixed;
    inset:0;
    z-index:99999;
    background:var(--bg-color);
    opacity:1;
    pointer-events:none;
    transition:opacity .32s cubic-bezier(.4,0,.2,1);
}

#uq-transition.uq-in{
    opacity:0;
}

#uq-transition.uq-out{
    opacity:1;
}

@media (prefers-reduced-motion: reduce){
    #uq-transition{ transition:none;
    }
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
    outline:3px solid var(--focus-ring, #ffffff);
    outline-offset:2px;
    border-radius:2px;
    box-shadow:0 0 0 5px var(--focus-ring-offset, rgba(0,0,0,.75));
}

@supports not selector(:focus-visible){
    :where(a, button, input, textarea, select, [tabindex]):focus{
        outline:3px solid var(--focus-ring, #ffffff);
        outline-offset:2px;
    }
}

.skip-link{
    position:absolute;
    top:0;
    left:0;
    z-index:1000;

    transform:translateY(-120%);

    padding:12px 20px;
    background:var(--bg-color);
    color:var(--text, #fff);
    border:1px solid var(--border-ui, rgba(255,255,255,.45));

    font-family:"Space Grotesk", sans-serif;
    font-weight:700;
    font-size:var(--fs-sm);
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;

    transition:transform .18s ease;
}

.skip-link:focus{
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

html, body{
    min-height:100%;
}