/*
Theme Name:  Divi RES Child
Theme URI:   https://idefi.pl/
Description: Motyw potomny Divi dla szablonu restauracji idefi.pl. Wlasny CSS szablonu trzymamy tutaj, nigdy w motywie nadrzednym.
Author:      Jerzy Czajkowski, idefi.pl
Author URI:  https://idefi.pl/
Template:    Divi
Version:     1.0.0
Text Domain: divi-res-child
*/

/* ==========================================================
   Fonty wlasne wgrane w Divi (katalog uploads/et-fonts).
   Divi deklaruje je bez zakresu grubosci, wiec tu dopisujemy
   zakres, zeby zmienny Source Sans 3 dawal prawdziwe 400, 600
   i 700, a Lora prawdziwe 700. Sciezki zaczynaja sie od /,
   wiec dzialaja po przeniesieniu na domene klienta.
   Zmiana fontu u klienta: wgraj nowy w Divi i popraw te dwa bloki.
   ========================================================== */
@font-face {
  font-family: "Source Sans 3";
  src: url("/wp-content/uploads/et-fonts/SourceSans3-VF.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/wp-content/uploads/et-fonts/Lora-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   Zmienne szablonu.
   Kolory tekstu i tel dziedzicza z kolorow globalnych Divi
   i presetow modulow. Tu sa tylko wartosci pomocnicze dla
   elementow budowanych klasami (menu, pasek mobilny).
   Przy przekolorowaniu dla klienta zmieniasz je razem
   z kolorami globalnymi Divi.
   ========================================================== */
:root {
  --res-accent: #8a4b2a;        /* akcent glowny, ten sam co w kolorach globalnych */
  --res-accent-2: #3f5b3a;      /* akcent drugi */
  --res-dark: #2a211c;          /* ciemne tlo */
  --res-light: #fbf7f1;         /* jasne tlo */
  --res-muted: currentColor;    /* opisy dan */
  --res-leader: currentColor;   /* kropki miedzy nazwa i cena */
  --res-tap: 44px;              /* minimalny cel dotykowy */
}

/* ==========================================================
   Dostepnosc: widoczny fokus i minimalny rozmiar tekstu.
   ========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid var(--res-accent);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  body,
  .et_pb_text,
  .et_pb_blurb_description,
  .et_pb_contact_form input,
  .et_pb_contact_form select,
  .et_pb_contact_form textarea {
    font-size: max(16px, 1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   MENU RESTAURACJI
   Jedna pozycja:
   <div class="res-item">
     <span class="res-name">Nazwa dania</span>
     <span class="res-price">24 zł</span>
     <p class="res-desc">opis, gramatura
       <span class="res-tag">wege</span>
       <span class="res-allergens">1, 3, 10</span></p>
   </div>
   Edycja menu to zmiana slow i liczb, bez ruszania stylow.
   ========================================================== */
.res-group {
  margin: 0 0 2.5em;
}

.res-group-title {
  scroll-margin-top: 120px; /* kotwice z paska grup nie chowaja sie pod naglowkiem */
}

.res-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 0.5em;
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.res-item:last-child {
  border-bottom: 0;
}

.res-name {
  order: 1;
  font-weight: 600;
  min-width: 0;
}

/* kropkowana linia miedzy nazwa i cena */
.res-item::after {
  content: "";
  order: 2;
  align-self: end;
  margin-bottom: 0.35em;
  border-bottom: 2px dotted var(--res-leader);
  opacity: 0.35;
  min-width: 1.5em;
}

.res-price {
  order: 3;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.res-desc {
  order: 4;
  grid-column: 1 / -1;
  margin: 0.25em 0 0;
  padding: 0;
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--res-muted);
  opacity: 0.85;
}

/* oznaczenia dietetyczne: wege, wegan, bez glutenu, ostre */
.res-tag {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.45em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.8em;
  line-height: 1.6;
  white-space: nowrap;
}

/* numery alergenow wg rozporzadzenia UE 1169/2011 */
.res-allergens {
  margin-left: 0.4em;
  font-size: 0.85em;
  white-space: nowrap;
}

.res-allergens::before {
  content: "alergeny: ";
}

/* dlugie nazwy na waskich ekranach: cena zostaje po prawej */
@media (max-width: 479px) {
  .res-item {
    grid-template-columns: 1fr auto;
  }
  .res-item::after {
    display: none;
  }
}

/* pasek odnosnikow do grup menu */
.res-menu-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-menu-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-menu-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--res-tap);
  padding: 0 1em;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
}

/* legenda alergenow */
.res-legend {
  font-size: 0.9em;
  line-height: 1.6;
}

.res-legend ol {
  columns: 2 14em;
  column-gap: 2em;
  margin: 0.5em 0 1em 1.25em;
  padding: 0;
}

/* ==========================================================
   PASEK GODZIN I TELEFONU pod sekcja otwierajaca
   ========================================================== */
.res-infobar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.5em;
  text-align: center;
}

.res-infobar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--res-tap);
}

/* ==========================================================
   PRZYKLEJONY PASEK NA TELEFONIE: Zadzwon i Dojazd
   Budowany w Theme Builderze, sekcja z klasa res-mobile-bar.
   ========================================================== */
.res-mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .res-mobile-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
  .res-mobile-bar .et_pb_button,
  .res-mobile-bar a {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================
   PASEK DEMO nad naglowkiem (usuwany u klienta)
   ========================================================== */
.res-demo-bar {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.res-demo-bar a {
  text-decoration: underline;
}

/* ==========================================================
   OPINIE PRZYKLADOWE na demo
   ========================================================== */
.res-sample-note {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.8;
}

/* ==========================================================
   Miejsce na zdjecie, gdy nie ma jeszcze prawdziwego
   ========================================================== */
.res-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 1.5em;
  border: 2px dashed currentColor;
  text-align: center;
  font-size: 0.95em;
  opacity: 0.7;
}