/* Radosław Zeler – WSPÓLNY NAGŁÓWEK (napis, linia, menu) dla wszystkich stron.
   Ładowany po stylesheet.css (strona główna) i stylesheet2.css (podstrony), dzięki czemu
   wersja mobilna wygląda wszędzie tak samo. Zmiany wymiarów robi się TYLKO tutaj.

   WYMIARY MOBILNE - wzorcowy ekran ma 65 mm szerokości, wszystko liczone procentowo od szerokości ekranu:
     linia pod napisem ........ 62 mm  = 62/65 szerokości ekranu
     napis RADOSŁAW ZELER ..... 59 mm  = 59/65 szerokości ekranu (od początku pierwszej do końca ostatniej litery)
     GALERIA + O MNIE ......... 40 mm  = 40/65 szerokości ekranu (od początku pierwszej do końca ostatniej litery)
     KONTAKT .................. pod nimi, wyśrodkowany
   Dokładne dopasowanie napisu do 59/65 robi site.js (funkcja fitTitle), bo zależy ono od użytego fontu. */

/* ===== FONT =====
   Noto Serif (pliki: fonts/NotoSerif-Regular.ttf, opcjonalnie .woff2). Zmiana fontu: tylko --font-art poniżej. */
@font-face {
  font-family: "Noto Serif";
  src: url("fonts/NotoSerif-Regular.woff2") format("woff2"),
       url("fonts/NotoSerif-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-art: "Noto Serif", Georgia, "Times New Roman", serif;
  --label: #8a8a8a;                    /* szary napisów (jak opis w "O mnie") */

  /* wymiary mobilne - wzorzec: ekran 65 mm */
  --m-line:  calc(100vw * 62 / 65);    /* linia pod napisem */
  --m-title: calc(100vw * 59 / 65);    /* napis RADOSŁAW ZELER (pomocniczo; dopasowuje go site.js) */
  --m-menu:  calc(100vw * 40 / 65);    /* GALERIA ... O MNIE */
  --menu-fs: 15px;                     /* wielkość napisów menu i etykiet (GALERIA, O MNIE, KONTAKT, kafelki galerii) */
}

.mt { display: none; }
.logo-t { display: none; }   /* napis tekstowy i etykiety menu - widoczne tylko na telefonie */

@media (max-width: 700px) {

  /* nic nie może poszerzać strony w bok */
  body { overflow-x: clip; }                       /* clip nie tworzy przewijanego kontenera (hidden powodował błędy w Firefoksie) */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* jednakowa wielkość napisów w Chrome i Firefoksie */

  /* ---- napis "Radosław Zeler" (tekst zamiast PNG) + linia pod nim ---- */
  .logo { display: none; }
  .line { display: none; }          /* linia.png - na telefonie rysujemy cienką linię CSS */
  body > a, .menu a, .tile > a { text-decoration: none; color: inherit; }

  .logo-t {
    display: block;
    box-sizing: border-box;
    width: var(--m-line);           /* blok = szerokość linii; napis jest w nim wyśrodkowany */
    max-width: none;
    font-family: var(--font-art);
    text-transform: uppercase;
    font-size: 9.4vw;               /* wartość zastępcza; site.js dopasowuje ją tak, by napis miał dokładnie 59/65 szerokości ekranu */
    letter-spacing: .07em;
    padding-left: .07em;            /* równoważy odstęp za ostatnią literą - napis wyśrodkowany optycznie */
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
    color: var(--label);
  }
  .logo-t::after {                  /* cienka linia pod napisem: 62/65 szerokości ekranu, wyśrodkowana */
    content: "";
    display: block;
    height: 1px;
    margin: 10px 0 0 -.07em;        /* cofa padding-left napisu, żeby linia była dokładnie na środku */
    background: var(--label);
  }

  /* ---- menu: GALERIA i O MNIE w jednej linii (40/65 szer. ekranu), KONTAKT pod nimi na środku ---- */
  .menu {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between; /* pierwsza litera G przy lewej krawędzi, ostatnia litera E przy prawej */
    align-items: center;
    width: var(--m-menu);
    gap: 0;
    margin-top: 8px;
  }
  .menu a { position: relative; display: block; padding: 11px 0; }
  .menu a::after { content: ""; position: absolute; inset: 0 -10px; }   /* większy obszar dotyku */
  .menu a:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
  .menu a > img, .tile > a > img[data-hv] { display: none; }

  .mt {
    display: block;
    font-family: var(--font-art);
    font-size: var(--menu-fs);
    letter-spacing: .12em;
    margin-right: -.12em;           /* odstęp za ostatnią literą nie liczy się do szerokości */
    text-transform: uppercase;
    line-height: 1;
    color: var(--label);
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 0 4px #000, 0 0 8px #000;   /* czytelność na jasnym tle */
  }
  a:focus-visible > .mt { color: #fff; }

  /* ---- tło tlo2: skalowane do WYSOKOŚCI ekranu, zakotwiczone - przewija się tylko zawartość ---- */
  body { background-image: none; }
  body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0;
    height: 100vh; height: 100lvh;
    z-index: -1;
    background: url(tlo2.jpg) no-repeat center top;
    background-size: auto 100%;
    pointer-events: none;
  }
}

/* biały kolor napisów przy najechaniu - tylko tam, gdzie jest myszka (na dotyku zostawał po kliknięciu) */
@media (max-width: 700px) and (hover: hover) {
  a:hover > .mt { color: #fff; }
}