/*
Theme Name: Inspiro Child
Theme URI: https://www.wpzoom.com/themes/inspiro
Template: inspiro
Description: This is a simple Child Theme.
Author: WPZOOM
Author URI: https://www.wpzoom.com
Version: 1.0.1
*/

/* Write your custom CSS code below or add it in the Customizer > Additional CSS */

/* Scoate efectul de fade la hover pe itemii din meniu.
   Suprascrie inspiro/style.css:1501 (.navbar-nav > li > a:hover { opacity: 0.8 }).
   Aceeasi specificitate, dar child-ul se incarca dupa parinte (prioritate 15 vs 10). */
.navbar-nav > li > a:hover,.navbar-brand-wpz a:hover {
  opacity: 1;
}

.navbar a.ihb-button.header-cta{border-radius:50px;font-size:15px;margin-left:10px;}

.footer-row-separator{background-color:#363b55 !important;}
/* ---------------------------------------------------------------------------
   Gradient fin in partea de sus a paginii (de sus in jos, se stinge)
   ---------------------------------------------------------------------------
   Doua abordari incercate si abandonate, ca sa nu le reintroducem:

   1) background-image pe .site-header - NU merge: headerul are inaltime 0 pana
      cand headroom.js il face position:fixed, apoi doar 96px, iar background-ul
      se decupeaza la marginea cutiei. Iesea o banda ingusta care aparea abia
      dupa initializarea JS-ului. In plus .site-header:before / :after sunt
      ocupate de clearfix-ul temei (inspiro/style.css:1814).

   2) strat fix pe body::before DEASUPRA continutului - se vedea, dar fiind
      peste tot ce e in pagina "cetosa" partea de sus a fotografiei din hero.

   Solutia actuala: gradientul e fundalul paginii, deci sta IN SPATELE intregului
   continut. Imaginile si textul raman neatinse; se vede doar acolo unde pagina
   si-ar arata oricum fundalul.

   Specificitatea `html body` (0,0,2) e obligatorie: <style id="inspiro-custom-css">
   se incarca dupa noi (nodul 33 din 38) si foloseste shorthand-ul
   `background: rgb(242,249,254)`, care ar reseta background-image la none.
   Un simplu `body` (0,0,1) ar pierde si gradientul ar disparea.
--------------------------------------------------------------------------- */
html body {
  background-image: linear-gradient(
    to bottom,
    rgba(198, 222, 245, 0.95) 0%,
    rgba(198, 222, 245, 0.78) 30%,
    rgba(198, 222, 245, 0.48) 55%,
    rgba(198, 222, 245, 0.20) 78%,
    rgba(198, 222, 245, 0)    100%
  );
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 150px;
}

@media screen and (max-width: 782px) {
  html body { background-size: 100% 200px; }
}

/* Pe paginile interioare (nu si pe homepage) <style id="inspiro-custom-css">
   da .navbar fundal plin `background: rgb(242,249,254)` - exact culoarea paginii,
   deci invizibil ca atare, dar acopera complet gradientul in dreptul headerului.
   Il facem transparent ca sa se vada gradientul de dedesubt, la fel ca pe homepage.

   Specificitate 0,0,2 ca sa batem regula `.navbar` (0,0,1) care se incarca dupa
   noi. Regula temei pentru meniul mobil deschis, `.site-header.has-menu-overlay
   .navbar` (0,0,3), ramane mai puternica si continua sa functioneze. */
.site-header .navbar {
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Header builder: proportii de coloane separate pentru mobil
   ---------------------------------------------------------------------------
   Tema trateaza `inspiro_header_builder_main_layout` ca "unified setting"
   (class-inspiro-header-builder.php:1406), deci aceleasi proportii merg pe
   desktop, tablet si mobil. Valoarea aleasa ca sa incapa meniul pe desktop
   (3fr 7fr) lasa pe mobil doar 99px logo-ului, iar hamburgerului, care are
   nevoie de ~45px, ii da 231px.

   Din fericire tema randeaza trei arbori DOM separati (.ihb-desktop /
   .ihb-tablet / .ihb-mobile), afisati prin media queries, deci putem corecta
   doar mobilul fara sa atingem desktopul.

   `1fr auto` = hamburgerul ia exact cat ii trebuie, logo-ul ia tot restul.
   E mai bun decat doua coloane egale, care ar limita logo-ul la 50%.

   !important e obligatoriu: proportiile sunt scrise ca style inline pe .ihb-row
   (class-inspiro-header-builder.php:1794), iar inline bate orice selector.
--------------------------------------------------------------------------- */
.ihb-mobile .ihb-row.col-2 {
  grid-template-columns: 1fr auto !important;
}

/* Al doilea plafon peste logo-ul mobil: media-queries.css:522 pune
   `.navbar-brand-wpz { max-width: 60% }` sub 768px. Regula are sens in tema de
   baza, unde logo-ul si hamburgerul impart aceeasi coloana si logo-ul lung ar
   impinge hamburgerul afara. La noi hamburgerul are coloana lui (`auto` in
   grila de mai sus), deci plafonul doar micsoreaza logo-ul degeaba: 115px
   randat dintr-un original de 202px, intr-o coloana de 290px.

   Specificitate 0,2,0 vs 0,1,0 a regulii temei, deci castigam indiferent ca
   media-queries.css se incarca dupa noi.

   `100%` (nu o latime fixa) pastreaza plasa de siguranta: pe ecrane foarte
   inguste logo-ul se micsoreaza ca sa incapa, in loc sa iasa din header. */
.ihb-mobile .navbar-brand-wpz {
  max-width: 100%;
}