/* 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 and the footer's links. Colours, fonts and
   sizes all come from tokens.css; there are no settings here. */

/* 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; }
    .nav-menu .nav-cta { padding: 0.35rem 0.9rem; }
}

/* 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;
}
.site-preview {
    margin: 0 0 var(--spacing-s);
    padding: 8px 16px;
    border-radius: 12px;
    background: #fde68a;
    color: #1f2937;
    font-weight: 600;
    text-align: center;
}

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

.request-form { max-width: 640px; margin: 0 auto; }
.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); }