/*
 * dawn-chrome.css — replicated Shopify Dawn (Threshold Dawn 1.1, Dawn 13.0.1)
 * storefront chrome: colors, type, header, nav, footer, buttons, fields.
 *
 * This file + the header/footer markup in index.html are the SWAPPABLE unit
 * (spec #833/#985 Design section) — at Phase 4 when the real storefront
 * component ships, replace this file and the <header>/<footer> block only.
 * account.css (page-specific behavior styling) does not change.
 *
 * Values below are copied from the LIVE storefront (store.thresholdx.net,
 * 2026-07-15): color scheme "color-background-1" (page default) + "color-
 * inverse" (footer), the real Roboto @font-face, and getComputedStyle() on
 * the real .button/.field__input/.footer elements — not estimated.
 */

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Storefront default scheme (Dawn "color-background-1") */
    --dawn-bg: rgb(255, 255, 255);
    --dawn-fg: rgba(0, 17, 35, 0.75);
    --dawn-fg-solid: rgb(0, 17, 35);
    --dawn-link: rgb(18, 18, 18);
    --dawn-button-bg: rgb(0, 41, 135);      /* Sea */
    --dawn-button-fg: rgb(255, 255, 255);
    --dawn-button-secondary-bg: rgb(255, 255, 255);
    --dawn-button-secondary-fg: rgb(18, 18, 18);

    /* Footer scheme (Dawn "color-inverse") */
    --dawn-footer-bg: rgb(0, 17, 35);       /* Threshold Blue */
    --dawn-footer-fg: rgba(255, 255, 255, 0.75);
    --dawn-footer-fg-solid: rgb(255, 255, 255);

    --dawn-page-width: 1200px;              /* 120rem @ 10px root */
    --dawn-button-radius: 10px;
    --dawn-input-radius: 6px;
}

/* Dawn's root font-size convention: 1rem = 10px (62.5% of 16px browser default) */
html { font-size: 62.5%; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
    background: var(--dawn-bg);
    color: var(--dawn-fg);
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--dawn-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

.page-width {
    max-width: var(--dawn-page-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dawn-button-bg);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--dawn-button-bg); outline-offset: 2px; }

/* ─── Header (replicated: logo + inline nav + account/cart icons) ────── */

.header-wrapper {
    background: var(--dawn-bg);
}

.header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 50px;
    max-width: var(--dawn-page-width);
    margin: 0 auto;
}

.header__heading {
    margin: 0;
    flex-shrink: 0;
}
.header__heading-link { display: block; line-height: 0; }
.header__heading-logo { height: 45px; width: auto; display: block; }

.header__inline-menu {
    flex: 1;
    display: flex;
    justify-content: center;
}
.list-menu--inline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.header__menu-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--dawn-fg-solid);
    text-decoration: none;
    font-size: 1.4rem;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.header__menu-item:hover { text-decoration: underline; }

/* Native <details>/<summary> dropdown — no JS needed */
.header__inline-menu details { position: relative; }
.header__inline-menu summary { list-style: none; }
.header__inline-menu summary::-webkit-details-marker { display: none; }
.header__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 4px 0 0;
    padding: 8px 0;
    background: var(--dawn-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    min-width: 160px;
    z-index: 20;
}
.header__submenu .header__menu-item {
    display: block;
    padding: 8px 20px;
    white-space: nowrap;
}

.header__icons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--dawn-fg-solid);
    text-decoration: none;
}
.header__icon svg { width: 20px; height: 20px; fill: currentColor; }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ─── Buttons (real Dawn metrics, measured live) ──────────────────────── */

.button, button.button, a.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 45px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--dawn-button-radius);
    background: var(--dawn-button-bg);
    color: var(--dawn-button-fg);
    font: inherit;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.button:hover, button.button:hover, a.button:hover { opacity: 0.85; text-decoration: none; }
.button:disabled { opacity: 0.5; cursor: default; }

/* .button.button--secondary (2 classes) beats button.button/a.button (tag+class)
   on specificity — a bare .button--secondary would lose to those. */
.button.button--secondary {
    background: var(--dawn-button-secondary-bg);
    color: var(--dawn-button-secondary-fg);
    box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.3);
}

/* ─── Fields (Dawn's floating-label pattern, real metrics) ───────────── */

.field { position: relative; width: 100%; }
.field__input {
    width: 100%;
    height: 45px;
    padding: 15px;
    border: 1px solid rgba(0, 17, 35, 0.3);
    border-radius: var(--dawn-input-radius);
    background: #fff;
    color: var(--dawn-fg-solid);
    font: inherit;
    font-size: 1.6rem;
}
.field__input:focus { outline: 2px solid var(--dawn-button-bg); outline-offset: 1px; }
.field__label {
    position: absolute;
    left: 16px;
    top: 15px;
    color: rgba(0, 17, 35, 0.6);
    font-size: 1.6rem;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease;
    background: #fff;
    padding: 0 4px;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
    top: -8px;
    font-size: 1.1rem;
}

/* ─── Footer (replicated: link columns + social + copyright) ─────────── */

.footer {
    background: var(--dawn-footer-bg);
    color: var(--dawn-footer-fg);
    margin-top: auto;
    padding-top: 32px;
}
.footer a { color: var(--dawn-footer-fg-solid); }
.footer__content-top {
    padding-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}
.footer-block__details-content {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-block__details-content a { text-decoration: none; font-size: 1.4rem; }
.footer-block__details-content a:hover { text-decoration: underline; }

.list-social {
    list-style: none;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
}
.list-social__link { display: inline-flex; color: var(--dawn-footer-fg-solid); }
.list-social__link svg { width: 20px; height: 20px; fill: currentColor; }

.footer__content-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px 0 24px;
}
.footer__copyright {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
}
.footer__copyright a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}