/* Garet Book and Heavy: Type Forward licence LIC-YLJ7AAWP (web, tech-mates.nl). Use the licensed WOFF2 files unchanged. */
@font-face { font-family: "Garet"; src: url("/assets/fonts/Garet-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garet"; src: url("/assets/fonts/Garet-Heavy.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/JosefinSans-Variable.ttf") format("truetype"); font-weight: 100 700; font-display: swap; }
html, body { margin: 0; }
body {
  background: #dbcba2; color: #2e2e2e; min-height: 100vh;
  font-family: "Garet", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  font-size: 17px; line-height: 1.7;
  display: grid; grid-template-columns: 1fr minmax(300px, 32%); grid-template-rows: auto 1fr;
}
a { color: inherit; text-decoration: none; }
.logo { overflow: hidden; aspect-ratio: 890 / 185; }
.logo img { display: block; width: 112.7%; height: auto; margin: -26.4% 0 0 -6.742%; }

main { grid-row: 2; grid-column: 1; position: relative; padding: 72px clamp(24px, 7vw, 112px); display: flex; flex-direction: column; justify-content: center; }
h1 { margin: 0 0 56px; width: min(100%, 520px); }
main p { margin: 0 0 1.2em; max-width: 34em; }
.lead { font-size: 1.25em; line-height: 1.5; }
aside {
  grid-row: 2; grid-column: 2; background: #2e2e2e; color: #dbcba2;
  padding: 72px 48px; display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
/* Josefin Sans (SIL OFL 1.1, see assets/fonts/JosefinSans-OFL.txt) is the logo typeface; it is used for headings only. */
aside h2 { font-family: "Josefin Sans", "Garet", sans-serif; margin: 0 0 8px; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }
aside div { font-size: 16px; }
aside b { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; font-weight: 400; }
aside a:hover { text-decoration: underline; }

/* Language switch, top right of the main column. */
.lang { position: absolute; top: 28px; right: clamp(24px, 7vw, 112px); display: flex; gap: 4px; align-items: center; font-size: 14px; letter-spacing: 0.15em; }
.lang a { padding: 2px 4px; border-bottom: 2px solid transparent; opacity: 0.7; }
.lang a[aria-current] { border-bottom-color: currentColor; opacity: 1; }
.lang a:hover { opacity: 1; }
.lang span { opacity: 0.5; }

/* Suggests the other language when the visitor's browser prefers it. */
.banner {
  grid-column: 1 / -1; background: #2e2e2e; color: #dbcba2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px clamp(24px, 7vw, 112px); font-size: 15px;
}
.banner[hidden] { display: none; }
.banner a { background: #dbcba2; color: #2e2e2e; padding: 2px 12px; border-radius: 3px; }
.banner button { margin-left: auto; background: none; border: 0; color: inherit; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.lang a:focus-visible, .banner a:focus-visible, .banner button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Portal link: a tab hanging from the top of the contact column; on a phone, from the top left of the page. */
.portal {
  grid-column: 2; grid-row: 2; align-self: start; justify-self: end; margin-right: 48px; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px 12px 18px; border-radius: 0 0 6px 6px;
  background: #dbcba2; color: #2e2e2e; font-size: 13px; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
}
.portal::after {
  content: ""; width: 16px; height: 16px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.portal:hover { padding-top: 22px; }
.portal:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
@media (prefers-reduced-motion: no-preference) { .portal { transition: padding-top 150ms ease-out; } }

/* Until the portal is live the tab is disabled (aria-disabled, no href) and explains why on hover, tap and focus.
   To go live: give the link href="https://app.tech-mates.nl/", drop role, aria-disabled, tabindex, aria-describedby
   and the .tip, and remove assets/portal.js. */
.portal[aria-disabled] { cursor: not-allowed; }
.portal[aria-disabled]:hover { padding-top: 14px; }
.portal[aria-disabled]:is(:hover, :focus)::after { opacity: 0.35; }
.portal .tip {
  position: absolute; top: calc(100% + 8px); right: 0; visibility: hidden; opacity: 0;
  background: inherit; color: inherit;
  padding: 9px 14px 8px; border-radius: 4px; white-space: nowrap; cursor: default;
  font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; text-transform: none;
}
.portal .tip::before { content: ""; position: absolute; top: -4px; right: 22px; width: 9px; height: 9px; background: inherit; transform: rotate(45deg); }
/* Bridges the gap to the tab, so the pointer can move onto the message without it disappearing. */
.portal .tip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
.portal:is(:hover, :focus) .tip { visibility: visible; opacity: 1; }
.portal[data-dismissed] .tip { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .portal .tip { transition: opacity 120ms ease-out, visibility 120ms; } }

@media (max-width: 820px) {
  body { grid-template-columns: 1fr; grid-template-rows: none; }
  main { grid-row: 2; }
  aside { grid-row: 3; grid-column: 1; }
  .portal { grid-column: 1; justify-self: start; margin: 0 0 0 clamp(24px, 7vw, 112px); min-height: 44px; box-sizing: border-box; background: #2e2e2e; color: #dbcba2; }
  .portal .tip { right: auto; left: 0; box-shadow: 0 0 0 2px #dbcba2; } /* Separates the message from the logo beneath it. */
  .portal .tip::before { right: auto; left: 22px; }
}