/* Shared by the website and the configurator: brand tokens, base elements, the header.
   Keep this small; anything only one part uses goes in site.css or configurator.css.
   Tailo brand: off-white ground, black text, dark grey lines, square corners. */
/* Brand fonts, self-hosted (SIL Open Font License) so no visitor data goes to Google.
   Headings: Libre Baskerville. Body: Poppins. Subtitles, labels, buttons: Poppins in capitals. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --bg: #fcfcfa;          /* off-white; keep in sync with STYLE.background in configurator/js/engine/config.js */
  --text: #111111;
  --muted: #5e5c58;
  --line: #3a3a3a;        /* dark grey lines and borders */
  --line-soft: #dfdfdb;   /* quiet dividers */
  --grey-1: #f4f4f1;      /* open section, hover */
  --grey-2: #eaeae6;      /* open section's title row */
  --header-h: 46px;
  --accent: #111111;
  --accent-text: #fcfcfa;
  --focus: #111111;
  color-scheme: light;
}

* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font-body);
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; }

a { color: inherit; }

/* The top bar stays frozen when scrolling. Its height is --header-h,
   which content that sticks below it also uses. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--bg);
}
.topbar h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
/* Links styled like the website's (.site-nav): small spaced capitals. Closer together on
   phones, so they fit beside the logo on one row. */
.topbar nav { display: flex; gap: 24px; }
.topbar nav a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-underline-offset: 5px;
}
.topbar nav a:hover,
.topbar nav a[aria-current="page"] { text-decoration: underline; }
.topbar nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (max-width: 859px) { .topbar nav { gap: 14px; } }
@media (max-width: 380px) { .topbar { padding: 0 12px; } .topbar nav { gap: 12px; } }

/* Links with a shorter name on phones: <span class="label-long">…</span><span class="label-short">…</span>. */
.label-short { display: none; }
@media (max-width: 859px) {
  .label-long { display: none; }
  .label-short { display: inline; }
}

/* One-row TAILO STUDIO logo (logo-row.png, 10:1); the website uses the stacked one. Smaller
   on phones so it fits beside the links. */
.brand { display: flex; align-items: center; }
.brand a { display: block; }
.brand img { display: block; height: 15px; width: auto; }
@media (max-width: 859px) { .brand img { height: 11px; } }
@media (max-width: 380px) { .brand img { height: 10px; } }

.file-warning {
  margin: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
}

button {
  font: inherit;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
button:hover { background: var(--text); color: var(--bg); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Cookie banner (js/site/consent.js), on the website and the configurator alike. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 13px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}
.consent-inner { max-width: 1200px; margin: 0 auto; padding: 16px; display: grid; gap: 12px; }
.consent-text { margin: 0; max-width: 72ch; }
.consent-choices { display: grid; gap: 10px; }
.consent-choices[hidden] { display: none; }
.consent-choice { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent-choice strong { font-weight: 600; margin-right: 6px; }
.consent-choice input {
  flex: 0 0 14px; width: 14px; height: 14px; margin: 3px 0 0;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; cursor: pointer;
}
.consent-choice input:checked { background: var(--accent); border-color: var(--accent); }
.consent-choice input:checked::after { content: "✓"; color: var(--accent-text); font-size: 10px; line-height: 1; }
.consent-choice input:disabled { opacity: 0.5; cursor: default; }
.consent-choice input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The three buttons look the same: saying no is as easy as saying yes. */
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-actions button {
  flex: 1 1 auto;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 14px;
}
@media (min-width: 860px) {
  .consent-inner { grid-template-columns: 1fr auto; align-items: center; column-gap: 32px; padding: 18px 16px; }
  .consent-choices { grid-column: 1 / -1; grid-row: 2; }
  .consent-actions button { flex: none; }
}