/* ==========================================================================
   deals.hmpsandbox.com, single stylesheet
   1. Tokens   2. Base & typography   3. Masthead   4. Shared components
   5. Flyer cards   6. Item cards   7. Footer   8. Narrow screens   9. Motion

   Design intent: a supermarket price board. Bright paper, near-black ink,
   one market-red accent, and every NUMBER (prices, counts, dates) set in a
   monospace tally voice so deals line up like shelf tags. Images are
   hotlinked store cutouts on white cards; the design treats them as product
   photos on a tiled wall, not as decoration.

   Theming: the four knobs below (--paper, --card, --ink, --accent) can be
   overridden from the deal_settings table (theme_paper, theme_card,
   theme_ink, theme_accent); the layout template injects them as a :root
   style block. Everything else is derived with color-mix.

   HOUSE RULES (for future agents): never use em dashes, in copy or in
   comments. No frameworks, no build step, no CDN assets.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root {
    /* The four DB-themeable knobs (deal_settings can override these). */
    --paper:  #f4f2ec;   /* bright warm paper */
    --card:   #ffffff;   /* the white shelf tag */
    --ink:    #23211d;   /* near-black text */
    --accent: #b3261e;   /* market red: price tags, rules, links */

    /* Derived tones. */
    --paper-2:     color-mix(in srgb, var(--ink) 4%, var(--paper));
    --ink-2:       color-mix(in srgb, var(--ink) 80%, var(--paper));
    --ink-3:       color-mix(in srgb, var(--ink) 62%, var(--paper));
    --rule:        color-mix(in srgb, var(--ink) 16%, var(--paper));
    --rule-strong: color-mix(in srgb, var(--ink) 40%, var(--paper));
    --accent-wash: color-mix(in srgb, var(--accent) 8%, var(--card));

    /* Two voices: printed matter is grotesk, anything tallied is monospace. */
    --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
                 Arial, sans-serif;
    --font-tally: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono',
                  'Segoe UI Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --maxw: 1280px;
    --radius: 6px;
}

/* --- 2. Base & typography ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.08;
    margin: 0 0 var(--space-3);
    font-weight: 700;
    letter-spacing: -0.02em;
}

p { margin: 0 0 var(--space-4); }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* Every tallied value: prices, counts, dates, category jump chips. */
.eyebrow, .item-price, .flyer-dates, .head-dates, .jump-count,
.board-total dt, .board-total dd, .freshness {
    font-family: var(--font-tally);
    letter-spacing: 0.02em;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 10;
    transition: top 120ms ease;
}
.skip-link:focus { top: 0; }

/* --- 3. Masthead ----------------------------------------------------------- */

.masthead {
    border-bottom: 3px solid var(--ink);
    background: var(--card);
}

.masthead-bar {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.wordmark { text-decoration: none; }

.wordmark-name {
    display: block;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.wordmark-sub {
    display: block;
    color: var(--ink-3);
    font-size: 0.8rem;
}

.masthead-search {
    display: flex;
    gap: 0;
    flex: 0 1 24rem;
    min-width: 14rem;
}

.masthead-search input[type="search"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--ink);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--paper);
    color: var(--ink);
}
.masthead-search input[type="search"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.masthead-search button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.masthead-search button:hover { background: var(--accent); border-color: var(--accent); }

/* --- 4. Shared components -------------------------------------------------- */

.site-main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
}

.page-intro { margin-bottom: var(--space-5); }

.eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.page-intro h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

.head-sub { color: var(--ink-3); font-weight: 500; }

.lede { color: var(--ink-2); max-width: 46rem; }

.freshness { font-size: 0.85rem; color: var(--ink-3); }

.hint-note { font-size: 0.82rem; color: var(--ink-3); margin-top: calc(-1 * var(--space-2)); }

.crumb { color: var(--accent); text-decoration: none; }
.crumb:hover { text-decoration: underline; }

.text-link { color: var(--accent); }

.category-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.category-jump a {
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--card);
}
.category-jump a:hover { border-color: var(--accent); color: var(--accent); }

.jump-count { color: var(--ink-3); font-size: 0.75rem; }

.category-block { margin-bottom: var(--space-7); }

.category-head {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 3px solid var(--ink);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}
.category-head a { text-decoration: none; }
.category-head a:hover { color: var(--accent); }

.head-dates { font-size: 0.8rem; color: var(--ink-3); font-weight: 400; }

/* --- 5. Flyer cards --------------------------------------------------------- */

.flyer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-4);
}

.flyer-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 120ms ease, transform 120ms ease;
}
.flyer-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.flyer-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-2);
}

.flyer-meta { padding: var(--space-3); display: grid; gap: 2px; }

.flyer-merchant { font-weight: 700; }

.flyer-name { color: var(--ink-2); font-size: 0.9rem; }

.flyer-dates { color: var(--ink-3); font-size: 0.75rem; }

/* --- 6. Item cards ---------------------------------------------------------- */

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: var(--space-3);
}

.item-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 120ms ease, transform 120ms ease;
}

/* The whole card is one link into Flipp's viewer, opened at this item. */
.item-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.item-card:has(.item-link:hover) { border-color: var(--accent); transform: translateY(-2px); }

.item-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.item-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: var(--space-2);
    background: #fff;   /* cutouts are shot on white; keep it white in any theme */
}
/* Hotlinked images that 404 get .is-broken from main.js; the card falls
   back to text (and a flyer card to its meta block). */
img.is-broken { display: none; }

.item-body {
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--rule);
    display: grid;
    gap: 2px;
    margin-top: auto;
}

.item-price {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

.item-name { margin: 0; font-size: 0.9rem; line-height: 1.3; }

.item-brand, .item-merchant { margin: 0; color: var(--ink-3); font-size: 0.78rem; }

/* Says where the click goes. Subtle until you hover, so a wall of cards
   stays readable, but always present for touch and for screen readers. */
.item-cta {
    margin-top: var(--space-1);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-3);
}
.item-cta::after { content: " \2192"; }
.item-link:hover .item-cta, .item-link:focus-visible .item-cta { color: var(--accent); }

/* --- 7. Footer --------------------------------------------------------------- */

.site-footer {
    border-top: 3px solid var(--ink);
    background: var(--card);
    padding: var(--space-5);
}

.board-total {
    max-width: var(--maxw);
    margin: 0 auto var(--space-3);
    display: flex;
    gap: var(--space-6);
}

.board-total div { display: flex; gap: var(--space-2); align-items: baseline; }

.board-total dt {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.board-total dd { margin: 0; font-weight: 700; }

.footer-note {
    max-width: var(--maxw);
    margin: 0 auto;
    color: var(--ink-3);
    font-size: 0.8rem;
}

/* --- 8. Narrow screens ------------------------------------------------------- */

@media (max-width: 640px) {
    .site-main { padding: var(--space-5) var(--space-4) var(--space-6); }

    .masthead-bar { padding: var(--space-3) var(--space-4); }

    .masthead-search { flex-basis: 100%; }

    .flyer-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

    .item-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

    .category-head { flex-direction: column; gap: 0; }
}

/* --- 9. Motion ---------------------------------------------------------------- */

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