/* components.css - Emir (M1)
   Group file: check with everyone before changing.

   Shared bits built on the tokens: toggle, buttons, section
   headings, cards, chips, price rows, form styles. Rules that
   only one page needs don't belong here, they go in
   css/pages/<page>.css (master plan §5.3). */

/* Theme toggle (F4). The label tells you which room you're
   switching TO, so on the light table it says "Darkroom".
   js/theme.js keeps aria-pressed in sync. */
.theme-toggle {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--accent-text);
    background: none;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    padding: var(--space-1) 14px;
    cursor: pointer;
    white-space: nowrap;  /* was wrapping onto two lines at 360px */
    transition: color var(--transition), border-color var(--transition);
}
.theme-toggle:hover, .theme-toggle:active { color: var(--accent-hover); border-color: var(--accent-hover); }

/* The button carries both labels as spans (same circle glyphs as
   Emir's portfolio toggle); only the OTHER room's label shows.
   The light-table label is hidden by default, so even without JS
   the button reads correctly on the default light table. */
.label-lighttable { display: none; }
[data-theme="dark"] .label-lighttable { display: inline; }
[data-theme="dark"] .label-darkroom { display: none; }

/* Sections open with an eyebrow (small mono label) plus a Georgia
   heading. .section-head can also hold a "see all" link on the
   same line as the heading. */
.eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}
.section-head h2 { margin: 0; font-size: 1.8rem; }
.section-head .head-link {
    font-size: .95rem;
    white-space: nowrap;
    transition: color var(--transition), transform var(--transition);
}
.section-head .head-link:hover, .section-head .head-link:active { transform: translateX(3px); }

/* Two buttons only. Primary is the filled one (colours checked in
   tokens.css, both themes pass AA). Ghost is the quiet outline one.
   Same pill shape as the toggle so all the clickables feel related. */
.btn {
    display: inline-block;
    font-weight: 700;
    font-size: .95rem;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.btn:hover, .btn:active { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.btn-primary:hover, .btn-primary:active { background: var(--btn-bg-hover); color: var(--btn-text); }

.btn-ghost { background: none; color: var(--accent-text); border-color: var(--accent); }
.btn-ghost:hover, .btn-ghost:active { color: var(--accent-hover); border-color: var(--accent-hover); }

/* Cards: hairline-tan background, soft shadow, centred content.
   They only lift on hover if the whole card is a link. */
.card {
    background-color: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: var(--space-4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}
a.card:hover, a.card:active { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.card h3 { margin-top: 0; }

/* little mono pills for metadata: ISO, format, stock status */
.chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}
.chip-accent { color: var(--accent-text); border-color: var(--accent); }

/* Price rows: item on the left, dotted line, mono price on the
   right, like a printed lab price list. Home uses these for the
   add-ons, Catalogue/About can reuse them. */
.price-list { list-style: none; margin: 0; padding: 0; }
.price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--hairline);
}
.price-row:last-child { border-bottom: 0; }
.price-row .price-name { color: var(--text); }
.price-row .price-leader { flex: 1; border-bottom: 2px dotted var(--hairline); transform: translateY(-4px); }
.price-row .price-value { font-family: var(--font-mono); color: var(--accent-text); white-space: nowrap; }

/* Form styles for F1 (registration), F3 (review form) and any
   search/filter controls. Errors go next to the field, never in
   an alert() (master plan §4.1). */
label { display: block; font-weight: 700; margin-bottom: var(--space-1); }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 10px 12px;
    transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.field-error {
    margin: var(--space-1) 0 0;
    font-size: .85rem;
    color: var(--accent-text);
}
/* errors appear gently once: textContent edits never restart an
   animation, only the empty -> non-empty flip does */
.field-error:not(:empty) { animation: fadeInUp .25s ease both; }
/* invalid fields also get a border, so the error isn't
   colour-only (colourblind users still see it) */
[aria-invalid="true"] { border-color: var(--accent) !important; }

/* Catalogue card + grid (F2). The grid is our CSS Grid component #1:
   1 column on phones → 2 at 640px → 3 at 1024px (plan §6.1).
   Base rule here is mobile-first; the wider column counts live in
   css/pages/catalogue.css media queries. */

.catalogue-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   box-sizing: border-box;
   width: 100%;
}

/* Shared entrance keyframes: fadeInUp lives here so every page
   sheet (home, catalogue, membership, m4) can ride it. */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Reduced motion: kill the shared transitions for users who ask for it. */
@media (prefers-reduced-motion: reduce) {
    .card, .btn, .theme-toggle { transition: none; }
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}