/* Preview "focus" (?look=focus): live colours with the finer lines of ?look=fine, plus
   one type scale, at least 14 px text, shorter lines, one orange action per screen, fewer boxes,
   a permanent quote button in the header and a heading-font switch (?font=a|b|c).
   Only active with html.look-focus, set per browser by the head script in functions.php. */

.header-quote { display: none; }

/* ---------- Heading fonts: A Barlow Condensed 600 (default), B IBM Plex Sans Condensed 600, C Archivo Narrow 700 ---------- */
html.look-focus { --font-head: "Barlow Condensed", "Barlow", system-ui, sans-serif; --head-w: 600; --head-ls: .004em; }
html.look-focus.font-b { --font-head: "IBM Plex Sans Condensed", "Barlow Condensed", system-ui, sans-serif; --head-w: 600; --head-ls: -.01em; }
html.look-focus.font-c { --font-head: "Archivo Narrow", "Barlow Condensed", system-ui, sans-serif; --head-w: 700; --head-ls: -.008em; }
html.look-focus h1, html.look-focus h2, html.look-focus h3 { font-weight: var(--head-w); letter-spacing: var(--head-ls); }
html.look-focus .brand__mark { font-family: "Barlow Condensed", "Barlow", sans-serif; } /* the logo keeps its letter */

/* ---------- One type scale ---------- */
html.look-focus body { font-size: 17px; line-height: 1.65; }
html.look-focus h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); line-height: 1.1; }
html.look-focus .hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
html.look-focus h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }
html.look-focus h3 { font-size: 1.25rem; line-height: 1.25; }
html.look-focus .lead, html.look-focus .page-hero__intro { font-size: 1.125rem; line-height: 1.55; }
html.look-focus .eyebrow { font-size: .9375rem; font-weight: 600; color: var(--steel); }
html.look-focus .hero .eyebrow { color: #C9D4E8; }
/* Readable line length: 60 to 75 characters */
html.look-focus .entry p, html.look-focus .entry li, html.look-focus .section__lead, html.look-focus .page-hero__intro, html.look-focus .lead { max-width: 68ch; }
html.look-focus .entry--wide p, html.look-focus .entry--wide li { max-width: 72ch; }
/* Nothing smaller than 14 px (was 11 to 13.8 px) */
html.look-focus .topbar,
html.look-focus .mega__title,
html.look-focus .mega__col a span,
html.look-focus .mega__eyebrow,
html.look-focus .crumbs ol,
html.look-focus .chips span,
html.look-focus .vlk-form__note,
html.look-focus .cfg-chip,
html.look-focus .cfg-tab__n,
html.look-focus .cfg-card span,
html.look-focus .cfg-t th,
html.look-focus .cfg-add,
html.look-focus .cfg-special__f span,
html.look-focus .cfg-t td::before,
html.look-focus .cfg-t--hub td:first-child::before,
html.look-focus .cfg-t--pcd td:first-child::before,
html.look-focus .cfg-list__colour,
html.look-focus .clist__reset,
html.look-focus .clist__f span,
html.look-focus .clist__sub,
html.look-focus .clist__cells dt,
html.look-focus .footer__badge,
html.look-focus .footer__legal,
html.look-focus .proof__facts span,
html.look-focus .proof__cases span,
html.look-focus .prod__media figcaption,
html.look-focus .cfg-list__lines .cfg-chip,
html.look-focus .ftable__l,
html.look-focus .ftable .cfg-t td::before,
html.look-focus .cfg-step__hint,
html.look-focus .cfg-choice__mark,
html.look-focus .cfg-card__sel,
html.look-focus .hero__road small,
html.look-focus .ccase__meta,
html.look-focus .langs__item,
html.look-focus .dimfig__item figcaption,
html.look-focus .clist__chip,
html.look-focus .specs--sectors thead th,
html.look-focus .cfg-t td:nth-child(n+3):not(.cfg-t__add):not(:empty)::before,
html.look-focus .cfg-rf__l,
html.look-focus .cfg-rf__f span,
html.look-focus .cfg-tab__mm,
html.look-focus .cfg--tiles .cfg-t td::before,
html.look-focus .cfg-list__assure { font-size: .875rem; }
html.look-focus { --ok: #17724A; } /* green text contrast 5.6:1, was 4.3:1 */

/* ---------- One orange action per screen ---------- */
html.look-focus .btn { border-width: 1.5px; }
/* other primary buttons in the same block become quiet outline buttons (set by script) */
html.look-focus .btn--primary.is-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
html.look-focus .btn--primary.is-quiet:hover { background: var(--ink); color: #fff; }
/* ghost buttons become text links: less boxes, same target */
html.look-focus main .btn--ghost { border-color: transparent; background: transparent; padding-left: .2rem; padding-right: .2rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html.look-focus main .btn--ghost:hover { background: transparent; color: var(--blue-2); }
html.look-focus .hero .btn--ghost { color: #fff; }
/* header: configurator becomes a plain link, "Request a quote" is the one permanent action (dark, so the page action keeps the orange) */
html.look-focus .header-cfg { background: transparent; color: var(--ink); border-color: transparent; }
html.look-focus .header-cfg:hover { color: var(--blue); background: transparent; }
html.look-focus .header-quote { display: inline-flex; white-space: nowrap; background: var(--ink); color: #fff; border-color: var(--ink); }
html.look-focus .header-quote:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
/* once the request list has items, that button takes over as the one header action */
html.look-focus .site-header__tools:has(.header-inquiry__n.has-items) .header-quote { display: none; }
html.look-focus .header-inquiry:has(.header-inquiry__n.has-items) { background: var(--ink); border-color: var(--ink); color: #fff; }
html.look-focus .primary-nav__cta { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) { html.look-focus .header-cfg { display: none; } }

/* ---------- Quieter homepage ---------- */
html.look-focus .hero__actions .btn--ghost { display: none; } /* one action in the hero; the three ways in stay as the card */
html.look-focus .hero h1 { max-width: 18ch; }
html.look-focus .hero__start { box-shadow: none; }
html.look-focus .hero__facts strong, html.look-focus .proof__facts strong { color: inherit; }
html.look-focus .prop__letter { display: none; }

/* ---------- Fewer boxes: whitespace separates, lines only where they carry data ---------- */
html.look-focus .tile { border-left-width: 2px; }
html.look-focus .prop, html.look-focus .card, html.look-focus .tile, html.look-focus .ccase, html.look-focus .scard, html.look-focus .contact-card { border-color: transparent; box-shadow: none; }
html.look-focus .prop:hover, html.look-focus .card:hover, html.look-focus .tile:hover, html.look-focus .ccase:hover, html.look-focus .scard:hover { box-shadow: 0 0 0 1px var(--line); }
html.look-focus .section { padding-block: clamp(3rem, 6vw, 5rem); }

/* Preview bar sits below the header so it never covers the menu */
.look-bar { top: auto; bottom: 1rem; }
.look-bar__switch { border-radius: 999px; padding: .35rem .8rem; background: var(--tint, #EEF2F9); font-weight: 600; text-decoration: none; color: var(--ink) !important; }
/* Preview bar: heading font switch */
.look-bar__fonts { display: inline-flex; gap: .25rem; }
.look-bar__fonts a { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; text-decoration: none; color: var(--ink); background: var(--tint, #EEF2F9); font-weight: 700; }
.look-bar__fonts a[aria-current] { background: var(--ink); color: #fff; }