/* Atomik Menace: the layout the shop and the front page share.

   The reset, type, buttons, the menu bar, the wallpaper behind every page,
   the glass panels, the request form's fields, the footer, the focus ring and
   the light theme's glass. Every color, font, blur and picture comes from
   public/css/tokens.css, which is loaded after this file: change a value
   there, never here. The other stylesheets add each site's own parts:
   atomik.css (the rail and the product cards), site.css (what the shop and
   the front page share), shop.css, hub.css, settings.css and ben.css. */

/* A jump to an anchor stops short of the fixed menu bar, and so does a form
   field the browser scrolls to on submit. */
[id] {
    scroll-margin-top: var(--nav-offset);
}

/* Inside a light-theme glass card, text turns dark: the color settings are
   set again on the card, and everything in it follows. */
[data-theme="light"] .panel,
[data-theme="light"] .footer .container,
[data-theme="light"] .form-group {
    --color-text-white: var(--glass-ink);
    --color-text-gray: var(--glass-ink-gray);
    --color-text-muted: var(--glass-ink-muted);
    --color-accent: var(--glass-accent);
    --color-accent-strong: var(--glass-accent-strong);
    --color-border: var(--glass-line);
    --star-on: var(--glass-star);
    color: var(--color-text-white);
}

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

/* Buttons and fields take the page's font, not the browser's own. */
button,
input,
select,
textarea {
    font: inherit;
}

html {
    scroll-behavior: smooth;
    /* 17px text. Every size and space is in rem, so this scales them all. */
    font-size: 106.25%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    line-height: 1.6;
    font-weight: 600;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Type */
h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-gray);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Only under a mouse: a phone keeps a tapped link "hovered", colored until
   the next tap somewhere else. */
@media (hover: hover) {
    a:not(.btn):hover {
        color: var(--color-gradient-mid);
    }
}

/* A link inside a sentence or a list is underlined, so it is told apart by
   more than its color. The menu's links and buttons are not. */
p a:not(.btn),
li a:not(.btn):not(.nav-link) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    color: var(--on-accent);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

/* Outlined in the same red as the filled button beside it, in both themes
   (its gradient's start, which a light-theme card does not darken). */
.btn-secondary {
    background: transparent;
    border: 2px solid var(--color-gradient-start);
    color: var(--color-text-white);
}

/* On hover an outline button fills with the deep control red, which its
   white text reads on in both themes. */
.btn-secondary:hover {
    background: var(--color-control-fill);
    color: var(--on-accent);
}

/* Big headings use the display face (--font-display), at its own weight:
   it has one, and asking for more makes the browser fake a bolder one. */
h1,
h2 {
    font-family: var(--font-display);
    font-weight: 400;
}

/* The menu bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* No surface: the wallpaper shows through, and the bar fades darker
       toward the top of the window, so the page scrolling under it never
       runs into the links. It keeps light text in both themes, as it sits on
       the wallpaper, never on a card. */
    background: var(--nav-fade);
    padding: var(--spacing-sm) 0 calc(var(--spacing-sm) + 0.5rem);
    z-index: 1000;
    border-bottom: none;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* The light/dark button */
.theme-toggle {
    background: var(--toggle-gradient) !important;
    border: 2px solid var(--on-accent) !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: var(--spacing-sm);
    transition: all 0.3s ease;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    box-shadow: var(--toggle-shadow);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.5);
}

/* Line icons, which take the button's color. The page has both; one shows
   in each theme. */
.theme-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: var(--on-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .sun-icon,
[data-theme="light"] .theme-toggle .moon-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: block;
}

.nav-logo img {
    height: 40px;
    width: auto;
}

/* The menu first, the light/dark button last. */
.nav-menu     { order: 1; }
.theme-toggle { order: 2; }

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
}

.nav-link {
    color: var(--color-text-white);
    font-weight: 600;
}

/* Only under a mouse: a phone keeps a tapped link "hovered", which would
   leave it colored as if it were lit. */
@media (hover: hover) {
    .nav-link:hover {
        color: var(--color-accent);
    }
}

/* The page you are on, lit: filled red with its own text color, so it reads
   in both themes (siteMenu in src/html.js). */
.nav-here {
    background: var(--color-accent-strong);
    color: var(--on-accent);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-sm);
}

@media (hover: hover) {
    .nav-here:hover {
        background: var(--color-control-fill);
        color: var(--on-accent);
    }
}


/* The wallpaper behind every page, pinned while the page scrolls past. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--wallpaper);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
    pointer-events: none;
}

/* A scrim over the wallpaper, so text stays readable over its bright parts. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--wallpaper-scrim);
    z-index: -1;
    pointer-events: none;
}

/* Phones get the upright cut of the picture, and it scrolls with the page:
   a pinned background is unreliable on iPhones. */
@media (max-width: 768px) {
    body::before {
        background-image: var(--wallpaper-small);
        background-attachment: scroll;
    }
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* The request form's fields */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--input-bg);
    backdrop-filter: var(--input-blur);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-white);
    font-family: inherit;
    font-size: 1rem;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background: var(--input-bg-light);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
    border: 2px solid var(--card-border-light);
    color: var(--input-text-light);
    font-weight: 600;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-accent);
}

/* The footer */
.footer {
    padding: var(--spacing-md) 0;
    background: transparent;
    border-top: 1px solid var(--panel-border);
    text-align: center;
}

/* Phones */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }

    .nav-menu {
        position: fixed;
        top: 84px;
        left: 0;
        right: 0;
        background: var(--color-bg-darker);
        flex-direction: column;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 4px 6px var(--shadow-color);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-menu li {
        margin: var(--spacing-xs) 0;
    }

    /* 16px text in a field stops an iPhone zooming in on it. */
    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }
}

/* Panels: the glass surface the pages' content sits on. */
.panel {
    padding: var(--spacing-m);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    backdrop-filter: var(--glass-blur);
}

.panel--roomy { padding: var(--spacing-md); }

.text-muted { color: var(--color-text-gray); }

/* The focus ring, for keyboard users: on everything that can be reached
   with Tab, the Filter button (a summary) included. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Less movement, when the device asks for it */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The footer's lines sit on a glass card of their own. */
.footer .container {
    background: var(--panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: var(--spacing-m) var(--spacing-md);
}

/* The light theme: the wallpaper stays dark, and the panels become frosted
   white glass with the artwork showing through. */
[data-theme="light"] .panel {
    background: var(--card-bg-light);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
    border-color: var(--glass-border-light);
    box-shadow: var(--shadow-card);
}

/* A little denser behind the footer's lines. */
[data-theme="light"] .footer .container {
    background: var(--glass-bg-dense-light);
    backdrop-filter: var(--glass-filter-dense);
    -webkit-backdrop-filter: var(--glass-filter-dense);
}

/* Where a browser cannot blur behind a card, a more solid card instead, so
   text never sits on the bare wallpaper. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-theme="light"] .panel,
    [data-theme="light"] .footer {
        background: var(--glass-solid-light);
    }
}

/* Read by a screen reader, unseen on screen: a label whose job the words
   around it already make plain. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}