/* vanguardsystems.hu – an engineering datasheet: white paper, ink, thin rules, one structural blue. The one loud element is the
   footer: the mandatory company data set as a drawing's title block; the tech sheet under the opening speaks the same language.
   Colour comes from the five photos (cables, planning board, phone, data centre, fibre) and the blue contact band.
   Everything is served from this site: Source Serif 4 Semibold and IBM Plex Sans (SIL OFL, fonts/OFL.txt, fonts/OFL-IBM-Plex.txt)
   and the photos (Unsplash). Type scale: 14 / 17 / 21 / 34 / 54 px, weights 400 and 600 only. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --paper: #ffffff;
  --ink: #121619;
  --muted: #59626d;
  --rule: #dcdfe4;
  --blue: #1d4f91;
  --band: #1d4f91;
  --serif: "Source Serif 4", Georgia, "Noto Serif", "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111417;
    --ink: #e8ebee;
    --muted: #a3acb6;
    --rule: #2b3138;
    --blue: #8fb6ec;
    --band: #1a3f6f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 8px 12px; z-index: 10; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; hyphens: manual; }
h2 { font-size: clamp(27px, 3.4vw, 34px); line-height: 1.15; }
h3 { font-size: 21px; line-height: 1.3; }
p { margin: 0 0 14px; max-width: 68ch; }
p, li, dd { text-wrap: pretty; }
.nw { white-space: nowrap; }
h2 + p { margin-top: 16px; }

/* Header */
.top { border-bottom: 1px solid var(--rule); background: var(--paper); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 28px; min-height: 68px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; flex: none; }
nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; }
nav .short { display: none; }
/* A phone keeps contact and the language switch; the narrowest ones get a 16px gutter, the name without "Kft." and EN/HU
   (screen readers still hear the full language name) */
@media (max-width: 600px) {
  .top .wrap { flex-wrap: nowrap; gap: 16px; }
  nav ul { flex-wrap: nowrap; gap: 0 18px; }
  nav li:not(.keep) { display: none; }
}
@media (max-width: 430px) {
  .wrap { padding: 0 16px; }
  .brand .kft { display: none; }
  nav .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  nav .short { display: inline; }
}
@media (max-width: 340px) { .top .wrap { flex-wrap: wrap; padding-block: 10px; } }

/* Opening: text beside the patch panel, which runs to the page edge */
.opening { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 520px; border-bottom: 1px solid var(--rule); container-type: inline-size; }
.opening .text { padding: 84px 48px 72px max(24px, calc((100cqw - 1160px) / 2 + 24px)); align-self: center; }
.opening .text p { font-size: 21px; line-height: 1.5; color: var(--muted); margin-top: 22px; max-width: 46ch; }
.opening figure { margin: 0; }
.opening figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.lead-link { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 21px; }
@media (max-width: 860px) {
  .opening { grid-template-columns: 1fr; min-height: 0; }
  .opening .text { padding: 40px 24px 36px; }
  .opening figure { order: -1; aspect-ratio: 5 / 2; }
}
@media (max-width: 430px) { .opening .text { padding-left: 16px; padding-right: 16px; } }

/* Cells of a datasheet: a heavy frame, thin ink lines between cells (the 1px gap shows the ink behind), a label over each value.
   Used by the tech sheet under the opening and by the title block in the footer. */
.sheet, .titleblock { display: grid; gap: 1px; margin: 0; background: var(--ink); border: 2px solid var(--ink); }
.sheet > div, .titleblock > div { background-color: var(--paper); padding: 10px 14px 12px; min-width: 0; }
.sheet dt, .titleblock dt { font-size: 14px; color: var(--muted); }
.sheet dd, .titleblock dd { margin: 2px 0 0; color: var(--ink); font-size: 17px; }

/* The tech sheet: what the systems are made of */
.sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
.sheet dd { font-weight: 600; }
@media (max-width: 860px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; } }

section { padding: 72px 0; }
section > .wrap > h2 + p { color: var(--muted); }
@media (max-width: 720px) { section { padding: 52px 0; } }

/* Services: title on the left, what it means on the right, ruled rows */
.rows { margin-top: 36px; border-top: 1px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: baseline; gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rows p { margin: 0; max-width: 62ch; }
@media (max-width: 720px) { .rows > div { grid-template-columns: 1fr; } }

/* Text beside a photo or beside the hand-over list */
.pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.pair figure { margin: 0; }
.pair figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; gap: 28px; } .pair figure img { aspect-ratio: 4 / 3; } }
ul.plain { margin: 18px 0 0; padding-left: 20px; }
ul.plain li { margin: 6px 0; }

/* What the customer gets at hand-over */
.handover { margin: 0; border-top: 2px solid var(--ink); }
.handover > div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.handover dt { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.3; }
.handover dd { margin: 4px 0 0; color: var(--muted); }

/* A real sequence, so numbered */
.sequence { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.sequence li { counter-increment: step; padding: 20px 24px 0 0; }
.sequence li::before { content: counter(step); display: block; font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--blue); margin-bottom: 12px; }
.sequence p { margin: 8px 0 0; color: var(--muted); }
@media (max-width: 860px) { .sequence { grid-template-columns: 1fr 1fr; row-gap: 24px; } }
@media (max-width: 520px) { .sequence { grid-template-columns: 1fr; } }

/* Three photos edge to edge after the services: planning, the phone, the servers */
.strip { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 4px; }
.strip figure { margin: 0; }
.strip img { width: 100%; height: clamp(220px, 26vw, 380px); object-fit: cover; }
.strip figcaption { padding: 8px 16px 0; font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .strip figure:first-child { grid-column: 1 / -1; }
  .strip img { height: 200px; }
}

/* Contact: the one band in the company blue */
.contact { background: var(--band); color: #fff; }
section.contact > .wrap > h2 + p { color: #fff; }
.contact a { color: #fff; }
.contact :focus-visible { outline-color: #fff; }
.address { display: inline-block; margin-top: 10px; font-weight: 600; font-size: clamp(21px, 5.2vw, 34px); overflow-wrap: normal; }

/* Sub-pages */
.page-lead { padding: 60px 0 8px; }
.page-lead h1 { font-size: clamp(27px, 3.4vw, 34px); line-height: 1.15; }
.page-lead p { color: var(--muted); font-size: 21px; line-height: 1.5; margin-top: 14px; }
main.wrap > section { padding: 28px 0; }
main.wrap > section h2 { font-size: 21px; line-height: 1.3; margin-bottom: 12px; }
main.wrap > section h2 + p { margin-top: 0; }
dl.facts { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--rule); }
dl.facts dt, dl.facts dd { padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; }
dl.facts dt { color: var(--muted); }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; } dl.facts dt { border-bottom: 0; padding-bottom: 0; } }
ul.list { padding-left: 20px; }
ul.list li { margin: 8px 0; max-width: 72ch; }
.note { border-left: 3px solid var(--blue); padding: 4px 0 4px 16px; }
.button { display: inline-block; background: var(--blue); color: #fff; padding: 11px 20px; text-decoration: none; font-weight: 600; }
@media (prefers-color-scheme: dark) { .button { color: #111417; } }

/* Footer: links, then the title block, then the photo credits */
footer { border-top: 1px solid var(--rule); padding: 36px 0 52px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--blue); }
footer .links { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; margin: 0 0 16px; padding: 0; }
footer .links a { display: inline-block; padding: 4px 0; }
footer .credits { margin: 14px 0 0; max-width: none; }

/* The title block: the mandatory company data (Ekertv. 4. §) in the cells of a drawing's title block */
.titleblock { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  grid-template-areas: "name seat seat reg" "name mail mail tax" "name court host host"; }
.titleblock a { color: var(--blue); }
.titleblock .tb-name { grid-area: name; display: flex; flex-direction: column; padding-top: 62px;
  background-image: url("/img/vs.svg"); background-repeat: no-repeat; background-position: 14px 14px; background-size: 36px 36px; }
.titleblock .tb-name .name { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.3; }
.titleblock .tb-name .sub { font-size: 14px; color: var(--muted); }
.titleblock .tb-name .sub:last-child { margin-top: auto; padding-top: 12px; }
.tb-seat { grid-area: seat; } .tb-reg { grid-area: reg; } .tb-tax { grid-area: tax; }
.tb-mail { grid-area: mail; } .tb-court { grid-area: court; } .tb-host { grid-area: host; }
.tb-reg dd, .tb-tax dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "name name" "seat reg" "mail tax" "court host"; }
}
@media (max-width: 520px) {
  .titleblock { grid-template-areas: "name name" "seat seat" "reg tax" "mail mail" "court court" "host host"; }
  .titleblock .tb-name .sub:last-child { margin-top: 0; padding-top: 0; }
}