/**
 * Base Styles
 * Reset, self-hosted typefaces, and global element styles
 */

/* ============================================
   TYPEFACES

   Self-hosted rather than requested from Google on every page load. Both
   families are under the SIL Open Font License 1.1; see LICENSES.md in
   public/assets/fonts/. Only the latin subset is shipped, which covers the
   five languages in src/lang/.
   ============================================ */

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/instrument-sans-400_700.woff2') format('woff2-variations'),
         url('/assets/fonts/instrument-sans-400_700.woff2') format('woff2');
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/instrument-sans-400-italic.woff2') format('woff2');
}

/* ============================================
   CSS RESET & NORMALIZE
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--color-teal);
}

/**
 * The page ground is dark, so the default ink is the cream ramp. Anything on a
 * cream card opts into the ink ramp with .on-card (see 4-components-cards.css),
 * rather than every page restating it.
 */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    /* Every screen has columns of counts; line them up. */
    font-variant-numeric: tabular-nums;
    color: var(--text-on-dark);
    background-color: var(--color-teal);
    background-image: var(--page-background-image);
    background-repeat: repeat;
    min-height: 100vh;
    position: relative;
    /*
     * Contain the children's margins.
     *
     * html carries a background of its own (line 65), so body's background is
     * NOT propagated to the canvas — it paints inside body's box and nowhere
     * else. That box begins wherever body's top margin edge is, and body has
     * no padding or border, so a first child with a top margin collapses
     * through it and drags the whole background down with it.
     *
     * The two wishlist screens are the only pages with no <nav> as their first
     * child, so they are the only ones where the first child is
     * `.container.mt-5` — and its 48px margin left a 48px band of raw
     * --color-teal across the top of the page, with the real background
     * starting below it. Same at the bottom, from the last child's margin.
     * These are the pages every participant sees.
     *
     * flow-root keeps those margins inside, so the background starts at 0.
     */
    display: flow-root;
}

/* ============================================
   TYPOGRAPHY

   Display sizes are Instrument Serif at 400. Never bold the serif.
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-display);
    color: inherit;
}

h1 {
    font-size: var(--display-md);
    line-height: var(--line-height-display);
}

h2 {
    font-size: var(--display-sm);
}

h3 {
    font-size: var(--font-size-lg);
}

h4 {
    font-size: var(--font-size-md);
}

h5, h6 {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
}

p {
    margin: 0;
}

/*
 * Links take the surface contract: gold on the teal ground, red on cream. A
 * link styled as a button keeps the button's own colour.
 */
a {
    text-decoration: none;
}

a:not(.btn) {
    color: var(--surface-link);
}

a:not(.btn):hover {
    color: var(--surface-link-hover);
}

strong {
    font-weight: var(--font-weight-bold);
}

small {
    font-size: var(--font-size-sm);
}

/* Bootstrap paints inline code #d63384, which is 4.0:1 on the cream card. */
code,
kbd,
samp {
    color: var(--color-gold-ink);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/*
 * Line icons: 20x20, stroked, taking the surrounding text colour. See
 * src/views/components/icon.php.
 */
.icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.18em;
}

/* An eyebrow is the one place ALL-CAPS is allowed. */
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.71875rem;  /* 11.5px */
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

/* ============================================
   LISTS
   ============================================ */

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================
   IMAGES
   ============================================ */

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

/* ============================================
   BUTTONS
   ============================================ */

button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============================================
   FORMS
   ============================================ */

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Remove autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Skip to main content link. Red is a non-text accent, so the skip link is
   the deep red, on which white reaches 6.7:1. */
a.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: var(--z-fixed);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-red-deep);
    /* An anchor, so it would otherwise take the surface link colour; white on
       the deep red is 6.7:1 and gold would be 4.3:1. */
    color: var(--text-on-dark);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

a.skip-to-main:focus {
    left: var(--space-4);
    top: var(--space-4);
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus rings are always visible and never removed. */
*:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
    background-color: var(--color-gold);
    color: var(--color-ink);
}

::-moz-selection {
    background-color: var(--color-gold);
    color: var(--color-ink);
}

/* ============================================
   SCROLLBAR (Webkit)
   ============================================ */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(13, 59, 46, 0.20);
}

::-webkit-scrollbar-thumb {
    background: rgba(247, 243, 232, 0.28);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(247, 243, 232, 0.44);
}