/*
  Sintesi Technology - site.css
  Linked after the kit's stylesheets (assets/system.css, ui/cards.css, motion/motion.css,
  backgrounds/backgrounds.css, layout/layout.css, icons/icon.css) on every page.
  1. the palette and type, as start.mjs brand printed them (the logo's blue on a white ground)
  2. the few rules the kit leaves to the page
*/

/* ------------------------------------------------------------ 1. palette and type */
:root {
  --p-bg: #ffffff; --p-surface: #f2f5f8; --p-ink: #0c1b2a; --p-muted: #66707b;
  --p-accent: #0b63b0; --p-accent-ink: #ffffff; --p-action: #0b63b0; --p-action-ink: #ffffff;
  --p-inv-bg: #0c1b2a; --p-inv-surface: #1a2837; --p-inv-ink: #ffffff; --p-inv-muted: #99a0a8;
  --p-inv-accent: #ffffff; --p-inv-accent-ink: #0c1b2a; --p-inv-action: #ffffff; --p-inv-action-ink: #0c1b2a;
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-text: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.042em;
  --ly-scale: 0.98;
}

/* ------------------------------------------------------------ 2. page rules */

/* the client's logo in the bar */
.nav__logo > img { display: block; height: 48px; width: auto; }
@media (max-width: 639px) { .nav__logo > img { height: 34px; } }
/* a narrow phone: the bar keeps the logo and the menu button; the main action is in the page and in the menu */
@media (max-width: 639px) {
  header.nav .nav__bar > .nav__actions { display: none; }
}
@media (max-width: 479px) {
  .brands .ic-tile { --tile: 40px; }
  .brands .ic-cell { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 399px) {
  #infrastrutture .brands.brands { grid-template-columns: minmax(0, 1fr); }
  #infrastrutture .brands .ic-cell { display: flex; align-items: center; padding: 12px 16px; }
}
.brands .ic-cell__name, .brands .ic-cell__meta { display: block; }

/* the nav's menu card and the feature cards: one panel height per group */
.menu-card .panel { --p-h: 160px; }
#software .panel { --p-h: 300px; }
@media (max-width: 639px) {
  #software .panel { --p-h: 180px; }
  #software .stage { --fade-h: 40px; }
}

/* a card title that is the card's link */
.card h3 > a { color: inherit; text-decoration: none; }

/* the hero's window takes the whole piece (880 wide at 1440), so it stands centred in the lit frame */
.hero--centred .hero__window .ui-win { width: 100%; max-width: none; }

/* the brands of the infrastructure section: one outline, six cells, each mark on its own tile */
.brands { align-self: start; }
.brands .ic-cell { padding: 40px 24px; gap: 20px; }
.brands .ic-tile { --tile: 64px; }

/* the security diagram's frame: as tall as the screen's content box, so the split is level */
.frame--diagram { min-height: min(600px, var(--ly-fit)); }
@media (max-width: 1023px) { .frame--diagram { min-height: 420px; } }
@media (max-width: 639px) { .frame--diagram { min-height: 300px; } }

/* the name across the wrap in the close: 18 letters, set to end on the right line at every width */
.close--word .close__word { font-size: clamp(30px, 9.8vw, 142px); line-height: 1.15; white-space: nowrap; overflow: visible; }

/* the hero's line under the headline in the ink (7:1), not the grey */
.hero--centred .hero__lead { color: var(--ink); }

/* the scroll scene's two lines at a section heading's size, live and at rest (the kit sets them far larger) */
main > [data-big-scene="letter-physics"] .lp__a,
main > [data-big-scene="letter-physics"]:not(.is-live) .lp__a { font-size: clamp(28px, 3.4vw, 48px); max-width: none; }
main > [data-big-scene="letter-physics"] .lp__b,
main > [data-big-scene="letter-physics"]:not(.is-live) .lp__b { font-size: clamp(20px, 2.2vw, 32px); max-width: 30ch; }

/* the company's details in the footer and on the contact page */
.footer__facts { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-body); line-height: 1.6; }
.footer__facts a { color: inherit; }

/* ------------------------------------------------------------ inner pages
   a product or company page: a short head under the bar, then sections that are as tall as what they
   hold (long descriptions and the legal texts do not fit a screen grid) */
main.page > section { height: auto; min-height: 0; }
main.page > section.page-head { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-8); }
.page-head .frame--diagram { min-height: 420px; }
.cards { margin-top: var(--s-7); }
.cards > .card { padding: var(--s-6); }
.cards > .card > h3 { font-size: var(--t-card); font-weight: 500; }
.cards > .card > p { margin-top: var(--s-2); }
.cards > .card > .bullets { margin-top: var(--s-4); }
.cards > a.card { color: inherit; text-decoration: none; display: block; }
.flow .t-lead { margin-top: var(--s-4); max-width: 60ch; }
.page-close { text-align: left; }
.page-close .btn-row { margin-top: var(--s-6); }
.page-head__old { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-8); }
.page-head h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: var(--display-tracking-xl); max-width: 18ch; text-wrap: balance; }
.page-head .t-lead { margin-top: var(--s-5); max-width: 60ch; }
.page-head .btn-row { margin-top: var(--s-6); }
main.page > section.flow { height: auto; min-height: 0; padding-top: var(--s-8); padding-bottom: var(--s-8); }
main.page > section.flow:last-of-type { padding-bottom: var(--s-9); }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-lead); font-weight: 500; margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose a { color: var(--action); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.bullets { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.stack-6 > .bullets { margin-top: var(--s-6); }
.bullets > li { padding-left: 20px; position: relative; }
.bullets > li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ------------------------------------------------------------ contact form (contatti.html, section #richiesta)
   one column, a visible label above every field, the server's messages under the fields and under the button.
   The form is posted by the inline script of contatti.html to send-contact.php. */
#richiesta { scroll-margin-top: var(--nav); }
.contact-form { display: grid; gap: var(--s-5); max-width: 560px; margin-top: var(--s-7); }
.contact-form__field { display: grid; gap: var(--s-2); }
.contact-form label { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  display: block; width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: #ffffff;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); appearance: none;
}
.contact-form textarea { height: auto; min-height: 144px; padding: 12px 14px; resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.contact-form [aria-invalid="true"] { border-color: #a11919; }
.contact-form__check { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.contact-form__check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--action); }
.contact-form__check label { font-weight: 400; }
.contact-form__check a { color: var(--action); }
.contact-form__check .contact-form__error { grid-column: 1 / -1; }
.contact-form__error { margin: 0; font-size: 14px; line-height: 1.4; color: #a11919; }
.contact-form__error:empty { display: none; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { justify-self: start; }
.contact-form__status { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.contact-form__status:empty { display: none; }
.contact-form__status.is-error { color: #a11919; }