/* ==========================================================================
   pages/theme.css — Louis Safety. Loads last.
   1. BRAND TOKENS: the only colours that differ between the group's sites.
   2. Site-only components (product catalogue, Technoton landing, legal,
      careers). Shared components live in pages/site.css (identical per app).
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #ff4d00;        /* Louis Safety orange (logo) */
  --accent-ink: #d93f00;    /* orange text on white, AA for body copy (4.6:1) */
  --accent-dark: #c23800;   /* hover / pressed */
  --accent-soft: #fff3ec;   /* tinted panels, tag pills */
  --accent-lite: #ffa680;   /* accents on the dark band */
  --coal: #0c1f2e;          /* dark band ("Why Louis") */
}

/* ---------- 2. Site-only components -------------------------------------- */
/* ---------- Product catalogue ------------------------------------------------ */
.category-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); padding: 0; list-style: none; }
.category-card { position: relative; display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow var(--dur) var(--ease); }
.category-card:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.category-card__media { flex: none; display: grid; place-items: center; width: 112px; height: 112px; padding: 10px; border-radius: var(--radius); background: #fff; }
.category-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.category-card__text { display: grid; gap: 4px; }
.category-card__text small { color: var(--accent-ink); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }
.category-card__title { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.category-card__title::after { content: ""; position: absolute; inset: 0; }
.category-card:hover .category-card__title { color: var(--accent-ink); }
.category-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 47.99rem) { .category-cards { grid-template-columns: 1fr; } }

.product-sheet { row-gap: var(--s-7); align-items: start; padding-block: var(--s-7) var(--row-end); }
.product-sheet__media { grid-column: 1 / span 6; display: grid; place-items: center; padding: var(--s-7); border-radius: var(--radius); background: var(--field); }
.product-sheet__media img { max-height: 460px; width: auto; object-fit: contain; }
.product-sheet__text { grid-column: 8 / -1; display: grid; gap: var(--s-5); align-content: start; }
.product-sheet__kicker a:hover { color: var(--accent-ink); }
.product-sheet__title { font-size: var(--t-xl); }
.product-sheet__lead { font-size: var(--t-m); color: var(--grey-text); }
.product-sheet__prose { max-width: none; font-size: var(--t-body); }
@media (max-width: 63.99rem) { .product-sheet__media, .product-sheet__text { grid-column: 1 / -1; } }

/* ---------- Legal, careers ------------------------------------------------- */

.legal__updated { padding-block: var(--s-5); font-size: var(--t-s); color: var(--grey-text); }
.legal__updated span { grid-column: 3 / -1; }
@media (max-width: 63.99rem) { .legal__updated span { grid-column: 1 / -1; } }
.prose-list > * + * { margin-block-start: 1em; }
.prose-list ul { padding-inline-start: 1.2em; }
.prose-list li + li { margin-block-start: 0.4em; }
.prose-list li::marker { color: var(--accent); }
.prose-list a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.prose-list a:hover { color: var(--accent-ink); }
.prose-list strong { font-weight: 500; }


.careers-list li { display: flex; align-items: baseline; gap: var(--s-4); padding-block: 14px; border-top: 1px solid var(--rule); }
.careers-list li:last-child { border-bottom: 1px solid var(--rule); }
.careers-list__n { flex: none; width: 2em; font-size: var(--t-s); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.careers-list__name { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.careers-perks { columns: 2 16rem; }
.careers-apply__actions { margin-block-start: var(--s-5); }
.careers-apply__form { margin-block-start: var(--s-8); padding-block-start: var(--s-6); border-top: 1px solid var(--rule); }


/* ---------- Technoton brand landing (/technoton/) ---------------------------- */
.technoton-hero { padding-block-end: var(--s-9); background: var(--coal); color: #fff; }
.technoton-hero .crumbs ol, .technoton-hero .crumbs a { color: rgb(255 255 255 / 0.62); }
.technoton-hero .crumbs [aria-current="page"], .technoton-hero .crumbs a:hover { color: #fff; }
.technoton-hero__grid { row-gap: var(--s-6); padding-block-start: var(--s-8); }
.technoton-hero__kicker { grid-column: 1 / span 2; padding-top: 0.55em; color: rgb(255 255 255 / 0.72); }
.technoton-logo { grid-column: 3 / -1; display: grid; place-items: center; min-height: clamp(15rem, 30vw, 24rem); padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); background: #fff; }
.technoton-logo img { width: min(28rem, 70vw); max-height: 13rem; object-fit: contain; }
.technoton-hero__title { grid-column: 3 / span 9; margin-block-start: var(--s-5); font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; color: #fff; }
.technoton-hero__intro { grid-column: 3 / span 7; font-size: var(--t-l); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); color: rgb(255 255 255 / 0.72); text-wrap: pretty; }
.technoton-products { border-top: 0; }
.technoton-cards { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; padding: 0; list-style: none; }
.technoton-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--field); transition: background-color var(--dur) var(--ease); }
.technoton-card:hover { background: var(--accent-soft); }
.technoton-card__media { aspect-ratio: 16 / 6.3; overflow: hidden; background: var(--coal); }
.technoton-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.technoton-card:hover .technoton-card__media img { transform: scale(1.025); }
.technoton-card__text { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding: var(--s-5); }
.technoton-card__kicker { margin-block-end: var(--s-2); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text); }
.technoton-card__title { font-size: var(--t-l); line-height: 1.2; font-weight: 500; letter-spacing: var(--track-head); }
.technoton-card__title a::after { content: ""; position: absolute; inset: 0; }
.technoton-card:hover .technoton-card__title a { color: var(--accent-ink); }
.technoton-card__arrow { color: var(--accent); }
.technoton-card__arrow .arrow { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.technoton-card:hover .technoton-card__arrow .arrow { transform: translateX(4px); }
.technoton-support { margin-block-start: 0; }
@media (max-width: 63.99rem) {
  .technoton-hero__kicker { grid-column: 1 / -1; padding: 0; }
  .technoton-logo, .technoton-hero__title, .technoton-hero__intro, .technoton-cards { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .technoton-hero { padding-block-end: var(--s-8); }
  .technoton-hero__grid { padding-block-start: var(--s-6); }
  .technoton-cards { grid-template-columns: 1fr; }
}