/* ==========================================================================
   TEMA — stratul care corecteaza sablonul

   Site-ul e construit peste un sablon Bootstrap 4 din 2018. Peste el s-au
   adaugat, in timp, sectiuni cu alt limbaj vizual. Rezultatul erau trei
   sisteme pe aceeasi pagina: portocaliul sablonului, albastrul implicit
   Bootstrap, si negrul sectiunilor noi.

   DIRECTIA: monocrom. Nu e o alegere de gust - e limbajul in care sunt deja
   scrise paginile de reclama platita (lp.css: butoane negre, fonturi de
   sistem) si calculatorul. Alea sunt paginile pe care se plateste clickul, si
   sunt cele mai coerente din site. Restul se aliniaza la ele.

   A doua jumatate a argumentului e aritmetica. Portocaliul sablonului,
   #ffa45c, cu text alb, da un contrast de 1,96:1 - pragul minim e 4,5:1.
   Butonul pe care se plateste clickul era cel mai prost lizibil element din
   pagina. Nu exista niciun portocaliu care sa treaca pragul SI sa se mai
   citeasca a portocaliu, deci alegerea reala nu era „negru sau portocaliu", ci
   „negru sau un maro pe care nimeni nu-l vede ca accent".

   CE RAMANE COLORAT: starile. Verdele de stoc si rosul de validare nu sunt
   decor, sunt semnale. Sistemul de ATENTIE (negru, o singura treaba pe ecran)
   si sistemul de STARE (verde/rosu) sunt separate si raman separate.

   Fisierul se incarca DUPA css/site.min.css si il suprascrie. Bundle-ul NU se
   editeaza: se construieste din css/pure.css cu build-assets.sh.

   ATENTIE, o singura regula de aur: NICIUN `!important` pe `.form-control`.
   css/form-validation.css nu are niciun `!important`, deci un `!important` de
   aici ar stinge chenarul rosu al campurilor gresite din formularul de
   comanda - exact validarea reparata cu greu. De-aia bordura de camp e scrisa
   cu `:not(.is-invalid)`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PODEAUA DE LIZIBILITATE

   Sablonul punea `body{color:gray}` - adica #808080, care pe alb da 3,95:1.
   Sub pragul de 4,5:1. Tot textul de corp al site-ului era, tehnic, prea
   deschis ca sa fie citit confortabil - si se vede mai ales pe telefon, afara.
   #4a4a4a da 8,86:1.
   -------------------------------------------------------------------------- */
body {
    color: #4a4a4a;
    /* Cifrele capata latime egala, deci 100 / 68 / 1.700 / 0,68 se aliniaza in
       coloana in calculator si in tabelul de specificatii. Costa zero octeti.
       Site-ul asta vinde trei numere; merita sa stea drepte. */
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { color: #1a1a1a; }

/* Griurile prea deschise din sablon si din stilurile proprii:
   #8a8a8a = 3,45:1 si #9a9a9a = 2,81:1, amandoua sub prag. #6b6b6b = 5,33:1. */
.text-muted,
small.text-muted { color: #6b6b6b !important; }

/* --------------------------------------------------------------------------
   2. FONTURILE

   Sablonul cere „Open Sans" de la Google Fonts. Doua motive sa il taiem:
   - inca un domeniu de contactat inainte sa apara textul, pe fiecare vizita
   - fonturile de sistem redau corect ș si ț cu VIRGULA dedesubt (forma
     romaneasca corecta), nu cu sedila
   Doua selectoare cer familia in tot bundle-ul; le suprascriem pe amandoua.
   -------------------------------------------------------------------------- */
body,
.hero-wrap .slider-text .bread {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   3. BUTOANE

   Erau albastrul implicit Bootstrap #007bff, in forma de pastila
   (border-radius: 30px). Culoarea nu fusese aleasa niciodata - era valoarea
   din cutie. Negru: aceeasi cu produsul si cu restul interfetei.
   Colt de 6px: destul cat sa nu para o cutie, prea putin cat sa para pastila.
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #1a1a1a;
    border: 1px solid #1a1a1a;
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* Inelul de focalizare: acromatic. Cel din sablon era albastru, ramas de la
   culoarea implicita, si nu se potrivea cu nimic din pagina. */
.btn:focus,
.btn.focus,
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .22);
    outline: 0;
}

.btn-outline-primary {
    color: #1a1a1a;
    border: 1px solid #d5d5d5;
    background: #fff;
}
.btn-outline-primary:hover {
    background: #f4f4f4;
    border-color: #1a1a1a;
    color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   4. LEGATURI
   Portocaliul aparea in text, in subsol si in paginile legale, la 1,96:1.
   -------------------------------------------------------------------------- */
a { color: #1a1a1a; }
a:hover, a:focus { color: #1a1a1a; text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. CAMPURI DE FORMULAR

   Doua probleme, amandoua masurabile:

   a) Bordura era #dcdcdc - 1,37:1 fata de fundalul alb. Regula WCAG 1.4.11
      cere 3:1 pentru conturul unui control, tocmai ca sa se vada unde se
      scrie. #767676 da 4,54:1.

   b) Sub 16px, iOS MARESTE automat pagina cand atingi un camp, si nu o mai
      micsoreaza la loc. Omul ramane cu formularul de comanda decupat pe
      margini si trebuie sa deplaseze pagina ca sa vada butonul.

   `:not(.is-invalid)` e obligatoriu: fara el, bordura de aici ar acoperi
   chenarul rosu pus de validare pe campurile gresite.
   -------------------------------------------------------------------------- */
.form-control:not(.is-invalid),
.custom-select:not(.is-invalid) {
    border: 1px solid #767676;
    border-radius: 6px;
    color: #1a1a1a;
}
.form-control,
.custom-select,
textarea.form-control {
    font-size: 16px;
}
.form-control:focus:not(.is-invalid),
.custom-select:focus:not(.is-invalid) {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .12);
    color: #1a1a1a;
}
.form-control::placeholder { color: #6b6b6b; opacity: 1; }

/* Casutele de bifat si butoanele radio: negre cand sunt alese, nu albastre. */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .18);
}

/* --------------------------------------------------------------------------
   6. BANDA DE ANTET A PAGINILOR INTERIOARE

   `hero-wrap hero-bread` e tiparul din 2018: fotografie de fundal, titlu alb
   cu majuscule peste ea. Doua probleme:
   - contrastul depinde de ce se intampla sa fie in poza in dreptul textului,
     deci nu se poate calcula si nu se poate garanta
   - fotografia bg_6.jpg se descarca pe unsprezece pagini

   Banda plata rezolva amandoua: #1a1a1a pe #f2f2f2 da 15,55:1, prin
   constructie, nu din intamplare. Si dispar 313 KB de pe fiecare pagina.
   -------------------------------------------------------------------------- */
.hero-wrap.hero-bread {
    background-image: none !important;   /* fotografia e pusa inline in HTML */
    background-color: #f2f2f2;
    border-bottom: 1px solid #e4e4e4;
    padding: 74px 0 66px;
    height: auto;
}
.hero-wrap.hero-bread .slider-text { color: #1a1a1a; }
.hero-wrap.hero-bread .bread {
    color: #1a1a1a !important;   /* in HTML e scris inline `style="color:#ffff"` */
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.6px;
    text-transform: none;        /* majusculele fac diacriticele greu de citit */
    line-height: 1.12;
}

@media (max-width: 900px) {
    .hero-wrap.hero-bread { padding: 46px 0 42px; }
    .hero-wrap.hero-bread .bread { font-size: 27px; }
}

/* --------------------------------------------------------------------------
   7. TITLURI DE SECTIUNE
   Sablonul le dadea grosime 300 si spatiu mare intre litere - moale pentru un
   produs care se vinde pe greutate si duritate.
   -------------------------------------------------------------------------- */
.heading-section h2,
.heading-section-bold h2 {
    font-weight: 800;
    letter-spacing: -.7px;
    color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   8. UMBRE
   Sablonul pune umbre difuze pe carduri. In 2018 asta insemna „modern"; azi
   arata a 2018. Linii subtiri in loc.
   -------------------------------------------------------------------------- */
.product,
.block-6,
.card { box-shadow: none; }

/* --------------------------------------------------------------------------
   9. RESTUL PORTOCALIULUI

   #ffa45c mai apare in cateva locuri din sablon: suprapunerea caruselului,
   liniile de sub titluri, marcajele de lista.
   -------------------------------------------------------------------------- */
.hero-wrap .overlay { background: #1a1a1a; opacity: .45; }
.ftco-section-parallax .overlay { background: #1a1a1a; }

/* --------------------------------------------------------------------------
   10. CE NU SE ATINGE

   Starile raman colorate, fiindca sunt semnale, nu decor:
     .pdr-stoc.este          verde pe verde deschis  (4,69:1)
     .invalid-feedback       rosu de validare        (singurul semnal pe un
                             formular care are `novalidate`)
     .calc-buton             alb pe panoul negru     (17,40:1, cel mai
                             puternic buton din site)
   Nu le da nicio regula de aici. Daca adaugi ceva mai jos, verifica intai ca
   nu le atinge.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   11. ECRANUL ALB DE LA INCARCARE

   Sablonul acoperea fiecare pagina cu un strat alb pe tot ecranul
   (#ftco-loader.fullscreen: width 100%, height 100%, background #fff) si
   ascundea continutul (.ftco-animate: opacity 0, visibility hidden — 9
   elemente pe prima pagina, 4 pe pagina de produs).

   Amandoua se ridicau DOAR din JavaScript, adica dupa ce se descarca si
   ruleaza 249 KB de bundle. Pe telefon, pe date mobile, asta inseamna secunde
   de ecran gol — iar pe pagina de produs, secunde in care pretul si butonul
   „Adaugă în coș" nu exista pe ecran.

   Un ecran de incarcare nu face pagina mai rapida; o face sa PARA mai lenta,
   fiindca amana primul lucru pe care il vede omul. Si e si semnal de clasare:
   Google masoara cat dureaza pana se picteaza continutul principal.

   `!important` e necesar si e sigur: dupa specificatie, o declaratie
   `!important` bate si animatiile CSS. Deci cand JavaScript-ul adauga
   `.fadeInUp` la derulare, elementul ramane vizibil in loc sa clipeasca de la
   opacitate 0. Animatia se pierde; continutul se vede imediat.
   -------------------------------------------------------------------------- */
#ftco-loader { display: none !important; }

.ftco-animate {
    opacity: 1 !important;
    visibility: visible !important;
}