/* ============================================================
   chrome.css — THE header and footer of every page
   (includes/partials/header_bar.php + footer_bar.php).

   Loaded on every page by theme_head_tags() — website, inventory,
   login and admin — so there is exactly one place that styles the
   header and footer. Every rule is scoped to .chrome, so neither the
   website template styles nor assets/css/style.css can change them,
   and they can't change the page around them.

   Colours and fonts: only var(--…) from Admin → Theme Settings
   (Header & navigation, Footer — which follow the Brand palette).
   ============================================================ */

.chrome { display: contents; }

.chrome .site-header,
.chrome .site-footer {
    box-sizing: border-box;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.chrome *,
.chrome *::before,
.chrome *::after { box-sizing: border-box; }
.chrome a { text-decoration: none; }
.chrome ul { list-style: none; margin: 0; padding: 0; }
.chrome p { margin: 0; }

/* ---------------- Header ---------------- */
.chrome .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    color: var(--company-name-color);
    transition: box-shadow 0.2s ease;
}
.chrome .site-header.is-scrolled { box-shadow: 0 6px 20px -14px var(--shadow-color); }

.chrome .site-header__inner {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    min-height: 70px;
    padding: 12px 32px;
}

.chrome .brand {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
}
.chrome .brand .logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: none;
    border-radius: var(--radius-sm);
}
.chrome .company-name {
    white-space: nowrap;
    font-family: var(--company-name-font);
    font-weight: var(--company-name-weight);
    font-size: var(--company-name-size);
    letter-spacing: 0.2px;
    line-height: 1.25;
    color: var(--company-name-color);
}

.chrome .main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.chrome .main-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.chrome .main-nav a {
    display: inline-block;
    padding: 8px 11px;
    border-radius: var(--radius-pill);
    color: var(--nav-text);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-font-size);
    line-height: 1.3;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.chrome .main-nav a:hover,
.chrome .main-nav a:focus-visible {
    color: var(--nav-hover-text);
    background: var(--nav-hover-bg);
}
.chrome .main-nav a[aria-current="page"] {
    color: var(--nav-active-text, var(--nav-hover-text));
    background: var(--nav-active-bg, var(--nav-hover-bg));
}
.chrome .main-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inventory: the call-to-action button */
.chrome .main-nav a.nav-cta {
    margin-left: 6px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.chrome .main-nav a.nav-cta:hover,
.chrome .main-nav a.nav-cta[aria-current="page"] {
    background: var(--btn-primary-bg-2);
    color: var(--btn-primary-text);
}

/* Signed-in bar: a slim line above the header (scrolls away; the
   header below it stays sticky) */
.chrome .chrome-account {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    font-family: var(--font-body);
    font-size: var(--nav-account-size);
    line-height: 1.4;
    color: var(--nav-account-text);
}
.chrome .chrome-account__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px 4px;
    padding: 4px 32px;
}
.chrome .chrome-account__inner strong { color: var(--company-name-color); font-weight: 600; }
.chrome .chrome-account a {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    color: var(--nav-text);
    font-weight: var(--nav-font-weight);
}
.chrome .chrome-account a:hover { color: var(--nav-hover-text); background: var(--nav-hover-bg); }
.chrome .chrome-account a[aria-current="page"] { color: var(--nav-active-text, var(--nav-hover-text)); background: var(--nav-active-bg, var(--nav-hover-bg)); }
.chrome .nav-account__name { padding-right: 6px; }

/* Phone menu button (hidden on wide screens) */
.chrome .chrome-menu-btn {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid var(--header-toggle-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--nav-text);
    font: inherit;
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    cursor: pointer;
}
.chrome .chrome-menu-btn__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.chrome .chrome-menu-btn__bars span { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--header-toggle-bar); transition: transform 0.2s ease, opacity 0.2s ease; }
.chrome .is-open .chrome-menu-btn__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.chrome .is-open .chrome-menu-btn__bars span:nth-child(2) { opacity: 0; }
.chrome .is-open .chrome-menu-btn__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------- Admin header ----------------
   Same shell and colours as the site header, admin content only
   (partials/admin_header_bar.php). */
.chrome .admin-badge {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--nav-active-bg, var(--nav-hover-bg));
    color: var(--nav-active-text, var(--nav-hover-text));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.chrome .admin-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    margin-left: auto;
    font-size: var(--nav-font-size);
}
.chrome .admin-nav a {
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    color: var(--nav-text);
    font-weight: var(--nav-font-weight);
    white-space: nowrap;
}
.chrome .admin-nav a:hover { color: var(--nav-hover-text); background: var(--nav-hover-bg); }
.chrome .admin-nav__user {
    margin-left: 6px;
    padding: 0 6px 0 12px;
    border-left: 1px solid var(--header-border);
    font-size: var(--nav-account-size);
    color: var(--nav-account-text);
    white-space: nowrap;
}
.chrome .admin-nav__user strong { color: var(--company-name-color); font-weight: 600; }
.chrome .site-header--admin .site-header__inner { flex-wrap: nowrap; }
.chrome .site-header--admin .admin-nav { padding-left: 8px; }
.chrome .site-footer--admin { padding: 14px 24px; }
.chrome .site-footer--admin .footer-inner { max-width: none; }

/* Admin sidebar button (admin pages only) */
.chrome .sidebar-toggle-btn { border-color: var(--header-toggle-border); }
.chrome .sidebar-toggle-btn span { background: var(--header-toggle-bar); }

@media (max-width: 1240px) {
    .chrome .site-header__inner { flex-wrap: wrap; padding: 10px 20px; min-height: 62px; }
    .chrome .brand .logo { height: 32px; }
    .chrome .chrome-menu-btn { display: inline-flex; }
    .chrome .main-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 8px 0 6px;
        border-top: 1px solid var(--header-border);
    }
    .chrome .is-open .main-nav { display: flex; }
    .chrome .main-nav__list { flex-direction: column; align-items: stretch; }
    .chrome .main-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); }
    .chrome .main-nav a.nav-cta { margin: 6px 0 0; text-align: center; }
    .chrome .chrome-account__inner { padding: 4px 20px; }
}
@media (max-width: 1240px) {
    .chrome .site-header--admin .site-header__inner { flex-wrap: nowrap; }
}
@media (max-width: 760px) {
    .chrome .site-header--admin .company-name,
    .chrome .admin-nav__role { display: none; }
    .chrome .admin-nav a { padding: 6px 8px; }
}
@media (max-width: 560px) {
    .chrome .admin-nav a[target="_blank"] { display: none; }
    .chrome .admin-nav__user { display: none; }
    .chrome .site-header--admin .site-header__inner { gap: 8px; }
    .chrome .site-header--admin .brand .logo { height: 26px; }
    .chrome .admin-nav a { padding: 6px; font-size: 0.85rem; }
    /* The logo carries the brand on phones; the name returns when there is no room issue */
    .chrome .site-header__inner { padding: 10px 16px; gap: 10px; }
    .chrome .company-name { display: none; }
    .chrome .chrome-account__inner { padding: 4px 16px; }
    .chrome .nav-account__hint { display: none; }
    .chrome .chrome-menu-btn__label { display: none; }
}

/* ---------------- Footer ---------------- */
.chrome .site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text);
    padding: 32px 24px;
}
.chrome .footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    font-size: var(--footer-font-size);
    line-height: 1.6;
}
.chrome .footer-inner a { color: var(--footer-link); }
.chrome .footer-inner a:hover { color: var(--footer-heading); }
.chrome .footer-company { color: var(--footer-heading); font-weight: 700; }
.chrome .footer-contact { display: flex; flex-wrap: wrap; gap: 0 8px; }
.chrome .footer-contact .footer-phone + .footer-email::before {
    content: "|";
    margin-right: 8px;
    opacity: 0.6;
}
.chrome .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 12px 0;
    padding: 12px 0;
    border-top: 1px solid var(--footer-border);
    border-bottom: 1px solid var(--footer-border);
}
.chrome .footer-nav a { color: var(--footer-heading); }
.chrome .footer-nav a:hover { color: var(--footer-link); }
.chrome .footer-copy { font-size: inherit; }
.chrome .footer-version { font-size: 0.78rem; opacity: 0.7; }
.chrome .footer-inner-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px 32px;
}
.chrome .footer-extra-right { text-align: right; font-size: 0.82rem; line-height: 1.6; }
.chrome .footer-extra-right strong { color: var(--footer-heading); }
@media (max-width: 640px) {
    .chrome .site-footer { padding: 24px 16px; }
    .chrome .footer-inner-split { align-items: flex-start; }
    .chrome .footer-extra-right { text-align: left; }
}