/* ============================================================================
   LCD CHROME — header bar, nav, mobile drawer, footer bar, page shell.
   Shared by all page types.
   ========================================================================= */

/* ------------------------------------------------------------ page shell */

/* .main_div is the content wrapper on every page type, and the shared header
   and footer live inside it. Rather than move them out of eight templates, the
   bars break out of the wrapper's padding with matching negative margins —
   the padding values below and in .lcd-bar-* must stay in sync. */
.main_div {
    padding: 24px 28px;
}

.lcd-bar-top {
    margin: -24px -28px 24px;
}

.lcd-bar-bottom {
    margin: 56px -28px -24px;
}

@media (max-width: 768px) {
    .main_div {
        padding: 18px 14px;
    }

    .lcd-bar-top {
        margin: -18px -14px 18px;
    }

    .lcd-bar-bottom {
        margin: 40px -14px -18px;
    }
}

/* ----------------------------------------------------------------- header */

.lcd-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.lcd-wordmark {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    color: var(--lcd-fg);
    text-decoration: none;
}

.lcd-wordmark:hover {
    color: var(--lcd-fg);
    text-decoration: none;
}

.lcd-wordmark__text {
    font-family: var(--lcd-font-data);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .14em;
    text-shadow: var(--lcd-glow);
}

.lcd-wordmark__cursor {
    font-size: 14px;
}

.lcd-header__counter {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .18em;
    color: var(--lcd-fg-faint);
    white-space: nowrap;
}

/* -------------------------------------------------------------------- nav */

.lcd-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* Anchor text is unchanged for SEO; the mockup's all-caps look comes from
   text-transform, not from rewriting the link text. */
.lcd-nav__item {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 7px 10px 5px;
    color: var(--lcd-fg-dim);
    border-bottom: 2px solid transparent;
    text-decoration: none;
}

.lcd-nav__item:hover,
.lcd-nav__item:focus {
    color: var(--lcd-fg);
    text-decoration: none;
}

.lcd-nav__item.is-current {
    color: var(--lcd-link);
    border-bottom-color: var(--lcd-link);
}

.lcd-header__keys {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lcd-key--menu {
    display: none;
}

/* ------------------------------------------------------- mobile / drawer */

@media (max-width: 1100px) {
    .lcd-header__counter {
        display: none;
    }
}

@media (max-width: 980px) {
    .lcd-header {
        flex-wrap: wrap;
    }

    .lcd-header__keys {
        margin-left: auto;
    }

    .lcd-key--menu {
        display: inline-flex;
    }

    /* The mockup shows the MENU key but not its panel. The drawer is a
       full-width inked panel of keys, consistent with the key vocabulary. */
    .lcd-nav {
        display: none;
        order: 10;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 10px 0 2px;
        border: 1.5px solid var(--lcd-line);
        background: var(--lcd-bg);
        box-shadow: var(--lcd-key-shadow);
    }

    .lcd-nav.is-open {
        display: flex;
    }

    .lcd-nav__item {
        padding: 11px 14px;
        border-bottom: 1px solid var(--lcd-hair);
    }

    .lcd-nav__item:last-child {
        border-bottom: 0;
    }

    .lcd-nav__item.is-current {
        border-bottom-color: var(--lcd-hair);
        background: var(--lcd-row);
    }
}

/* ----------------------------------------------------------------- footer */

.lcd-footer {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-label);
    letter-spacing: .06em;
    color: var(--lcd-fg-faint);
}

.lcd-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.lcd-footer__row--sub {
    margin-top: 8px;
    color: var(--lcd-fg-faint);
}

.lcd-footer a {
    color: var(--lcd-fg-dim);
}

.lcd-footer a:hover {
    color: var(--lcd-link);
}

.lcd-footer__meta {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .lcd-footer__meta {
        margin-left: 0;
    }
}

/* The footer holds the cookie notice and modals; those are positioned. */
.lcd-footer .modal {
    letter-spacing: normal;
}