/*
Theme Name: goliat
Version: 0.1.0
*/

:root {
  --fs-tekst:    clamp(1rem, .95rem + .3vw, 1.125rem);
  --fs-h3:       clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-h2:       clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-h1:       clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --fs-etykieta: .8125rem;

  --odstep-s:  clamp(1rem, 2vw, 1.5rem);
  --odstep-m:  clamp(2rem, 4vw, 3rem);
  --odstep-l:  clamp(3rem, 6vw, 4.5rem);
  --odstep-xl: clamp(4.5rem, 9vw, 7rem);

  --noc:         #13191b;
  --noc-2:       #1b2326;
  --noc-3:       #0e1314;
  --kreda:       #ece9e1;
  --popiol:      #a3abaa;
  --lipa:        #e6c75c;
  --lipa-jasna:  #f0d67f;
  --szalwia:     #e9ece6;
  --atrament:    #1c2427;
  --atrament-2:  #4a5553;
  --linia:       rgba(236, 233, 225, .16);
  --linia-jasna: rgba(28, 36, 39, .18);

  --font-naglowki: "Bahnschrift", "DIN Alternate", "DIN Next", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --szerokosc: 76rem;
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior:auto; }
}

body {
  margin:0;
  background:var(--noc);
  color:var(--kreda);
  font-family:var(--font-tekst);
  font-size:var(--fs-tekst);
  line-height:1.6;
}

p { margin:0; }

img { display:block; max-width:100%; height:auto; object-fit:cover; }

a { color:inherit; }

p { text-wrap:pretty; }

.wrap { width:min(100% - 2 * var(--odstep-s), var(--szerokosc)); margin-inline:auto; }

.site-header {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"logo tel" "nav nav";
  align-items:center;
  gap:var(--odstep-s);
  padding:.75rem var(--odstep-s);
  background:var(--noc);
  border-bottom:1px solid var(--linia);
}

.site-header > * { min-width:0; }

.logo { grid-area:logo; display:block; justify-self:start; }

.logo img {
  width:3.25rem;
  height:3.25rem;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:.375rem;
  background:#fff;
}

.site-header nav {
  grid-area:nav;
  display:flex;
  gap:var(--odstep-s);
  overflow-x:auto;
  white-space:nowrap;
  font-family:var(--font-naglowki);
  font-size:var(--fs-tekst);
}

.site-header nav a { color:var(--popiol); text-decoration:none; padding-block:.25rem; }

.site-header nav a:hover { color:var(--kreda); text-decoration:underline; text-decoration-color:var(--lipa); text-underline-offset:.35em; }

.naglowek-tel {
  grid-area:tel;
  padding:.45em .9em;
  border:2px solid var(--lipa);
  color:var(--lipa);
  font-family:var(--font-naglowki);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.naglowek-tel:hover { background:var(--lipa); color:var(--atrament); }

@media (min-width:900px) {
.site-header {
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo nav tel";
    gap:var(--odstep-m);
    padding-inline:var(--odstep-m);
    position:sticky;
    top:0;
    z-index:10;
  }
.site-header nav { justify-content:flex-end; overflow:visible; }
}

.site-footer {
  padding-block:var(--odstep-l);
  background:var(--noc-3);
  color:var(--popiol);
  border-top:1px solid var(--linia);
}

.stopka { display:grid; gap:var(--odstep-m); }

.stopka > * { min-width:0; }

.stopka-marka { display:grid; gap:var(--odstep-s); justify-items:start; align-content:start; }

.stopka-marka > * { min-width:0; }

.stopka-marka img {
  width:4.5rem;
  height:4.5rem;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:.375rem;
  background:#fff;
}

.stopka-prawa { font-size:var(--fs-etykieta); letter-spacing:.04em; }

.stopka-dane { display:grid; gap:var(--odstep-s); }

.stopka-dane a { color:var(--kreda); text-decoration-color:var(--lipa); text-underline-offset:.25em; }

@media (min-width:600px) {
.stopka-dane { grid-template-columns:1fr 1fr; }
}

@media (min-width:900px) {
.stopka { grid-template-columns:5fr 7fr; align-items:start; }
}