/*
    assets/css/typography-shop.css

    Drops public_html's default UPPERCASE and moves headings, buttons and
    labels onto ozroofracks.shop's sentence-case typography. Added 2026-08-20.

    This is the single biggest reason the site still read as "not .shop" after
    the header, slider, counters and cards were all matched to it. .shop is
    sentence case with tight negative tracking throughout; main.css uppercases
    every heading, every button and every label by default.

    NO MARKUP CHANGED. Every rule here overrides a rule that already exists;
    nothing new is introduced.

    Values from ozroofracks.shop/app/globals.css:
      .section-heading h2   clamp(30px, 3.5vw, 46px), line-height 1.14,
                            letter-spacing -.04em
      .button               14px / 800, sentence case
      .finder label span    11px / 800 uppercase .07em  <- kept uppercase

    UPPERCASE IS NOT REMOVED EVERYWHERE, because .shop uses it deliberately in
    four places and they are already correct here:
      - the eyebrow kicker above a heading
      - the product-card SKU kicker      (grids-shop.css)
      - the stats-band labels            (grids-shop.css)
      - small form labels inside the finder card
    Those stay; what goes is uppercase as the DEFAULT.

    #customerPanel AND #cartPanel ARE UNAFFECTED, by request. That falls out
    of specificity rather than luck, and it was checked before relying on it:
    main.css scopes their three uppercase rules as `#customerPanel label`,
    `#customerPanel .customer-button` and `#cartPanel .cart-panel-item-sku`.
    An ID-scoped rule outranks the bare `label` / `.button` selectors this file
    overrides, so the panels keep their own casing untouched. Do not "tidy"
    these overrides into ID-scoped ones -- that is exactly what would start
    reaching into the panels.
*/

/* ------------------------------------------------------------- headings */

/*
main.css: uppercase, letter-spacing -1px at every size. A flat -1px is far too
tight on a 12px h5 and nowhere near tight enough on a 46px h2, which is why
the old headings looked cramped small and loose large. .shop uses a
proportional -.04em instead, so the tracking scales with the type.
*/
h1, h2, h3, h4, h5, h6 {
    text-transform: none;
    letter-spacing: -.04em;
    line-height: 1.14;
}

/* --------------------------------------------------------------- buttons */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- labels */

label {
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------------ navigation */

/* The nav dropdown and the mobile slide-out panel, both uppercase in main.css */
.dropotron,
#navPanel {
    text-transform: none;
    letter-spacing: 0;
}

/* ----------------------------------------------------------------- tables */

/*
Table headers. .shop's equivalent is 11px/800 uppercase with .07em tracking --
a deliberate small-caps accent rather than the full-size uppercase these were.
Keeping the uppercase but taking it down to the accent size is closer to .shop
than removing it would be.
*/
table th,
table.checkout thead th {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
}

/* ------------------------------------------------------------------- tabs */

.tabset > label {
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------- misc leftovers */

/* migrate.css uppercases these two alert headings and the subscribe button */
h2.maxred,
h2.maxgreen,
.subscribe_now input.button {
    text-transform: none;
    letter-spacing: -.04em;
}

/* products.css: the stock line on a grid card */
.stockongrill {
    text-transform: none;
    letter-spacing: 0;
}

/*
main.css uppercases input[type="number"], which does nothing for a digit and
leaves 35 quantity boxes on the homepage carrying a transform for no reason.
*/
input[type="number"] {
    text-transform: none;
}

/*
The image hover chip. grids-shop.css restyles the one inside #sets; this is
the same component in #gallery and anywhere else it appears, so the casing is
handled here rather than duplicating the scoped rule per section.
*/
.image-overlay-container .overlay .text {
    text-transform: none;
    letter-spacing: 0;
}

/* ---------------------------------------------------- the eyebrow kicker */

/*
.shop's .eyebrow -- the small wide-tracked line above a section heading. New
class, used by template/eyebrow.php; nothing existing gains it implicitly.
*/
.eyebrow {
    display: block;
    margin: 0 0 16px;
    color: var(--blue);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* on a dark ground .shop lightens it rather than using --blue */
.hero .eyebrow,
#banner .eyebrow,
.counters .eyebrow {
    color: #9fd6ff;
}