/* The pieces both Atomik sites share, the shop and the front page: the menu
   on a phone, the strip at the top of a page, Workbench's preview note, the
   request form, the policy pages, the footer's links and Skip to content.
   Colors, fonts and sizes all come from tokens.css; there are no settings
   here. */

/* Skip to content (SKIP_LINK in src/html.js): the first stop for the
   keyboard, above the page until it is reached, then at the top left, over
   the menu bar, in the colors of the menu's lit link. */
.skip-link {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1100;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-accent-strong);
    font-weight: 700;
    transform: translateY(-300%);
}
.skip-link,
.skip-link:hover {
    color: var(--on-accent);
}
.skip-link:focus {
    transform: none;
}

/* On phones J7's menu folds into a dropdown that opens from a button these
   sites do not have, which hid the shop's cart. Each menu here is a few
   items, so on a phone it takes a row of its own under the logo and the
   round buttons. */
@media (max-width: 768px) {
    :root { --nav-offset: 8rem; }
    .nav-container { flex-wrap: wrap; row-gap: var(--spacing-xs); }
    .nav-menu {
        position: static;
        order: 5;
        width: 100%;
        max-height: none;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2xs) var(--spacing-sm);
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .nav-menu li { margin: 0; }
    .nav-menu .nav-link { white-space: nowrap; }
    /* Room for the shop's four and its cart in one row on a phone 360 wide:
       the bar's sides as the page's, and smaller gaps and pills. */
    .nav-container { padding: 0 var(--spacing-sm); }
    .nav-menu { column-gap: var(--spacing-xs); }
    .nav-menu .nav-here { padding: 0.35rem 0.75rem; }
}

/* The strip at the top of a page: empty unless Workbench has a banner on
   (src/content.js) or, in the shop, a site sale runs. With a banner, the
   strip takes the banner's colours and holds its line, and a sale's line
   under it. A Preview from Workbench says so above it. */
.site-strip:empty { display: none; }
.site-strip.with-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 0 var(--spacing-s);
    padding: 10px 16px;
    border-radius: 22px;
    font-weight: 700;
    text-align: center;
}
/* A banner's picture (Workbench, Sites, Banners), over its words: as wide as
   the strip allows, never taller than a short row of the page. */
.banner-picture {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 120px;
    margin-bottom: 4px;
    border-radius: 14px;
}
@media (max-width: 600px) {
    .banner-picture { max-height: 96px; }
}
.site-preview {
    margin: 0 0 var(--spacing-s);
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--note-bg);
    color: var(--note-text);
    font-weight: 600;
    text-align: center;
}

/* --- The request form, the policy pages and the footer --------------------- */

.request-form { max-width: 640px; margin: 0 auto; }
/* Turnstile's box is fetched once the form is in use
   (public/js/request-check.js): its room is kept, so Send never jumps. */
.request-form .cf-turnstile { min-height: 72px; }
.request-form textarea {
    width: 100%;
    font: inherit;
}
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.policy { max-width: 760px; margin: 0 auto; }
.policy h1 { font-family: var(--font-display); }

.footer-links a { color: var(--color-text-gray); }