/* GR Medical — barra di ricerca della homepage.
 *
 * Qui c'e' pochissimo, e deve restare cosi': la grafica e' quella del design
 * ("GR Medical Homepage Ricerca.dc.html", variante 1a "Solo la barra") e vive
 * negli stili in linea dentro desktop.html e mobile.html. Questo foglio fa
 * solo quattro cose: scegliere quale dei due blocchi mostrare, rendere
 * invisibili al layout i contenitori aggiunti al posto di sc-if e sc-for,
 * segnare la riga scelta con le frecce, e difendere il blocco dalle regole
 * del tema.
 *
 * Gli hover del design NON stanno qui: si generano da `data-grr-hover` in
 * grr_stili_hover(), cosi' restano allineati al canvas da soli.
 */

.grr {
	position: relative;
	z-index: 3;
	/* Niente sfondo: nella variante "solo barra" la fascia deve lasciar vedere
	   l'immagine della hero, su cui il titolo bianco poggia. */
	background: transparent;
	font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

/* I contenitori che sostituiscono <sc-if> e <sc-for> non devono esistere per
   il layout: senza questo diventerebbero elementi delle flex del design e la
   disposizione cambierebbe. */
.grr .grr-quando,
.grr .grr-elenco { display: contents; }
.grr .grr-quando[hidden] { display: none !important; }
.grr template { display: none; }

/* La riga scelta con le frecce. Il colore e' quello che il design usa per
   l'hover delle righe: muoversi con la tastiera deve somigliare al mouse. */
.grr .grr-scelta { background: #F7FAFC !important; }

.grr :focus-visible { outline: 2px solid #0087BD; outline-offset: 2px; }

/* Il tema Hub dichiara `a:hover{color:var(--color-link-hover)}` con
   specificita' (0,1,1) e batte gli stili in linea sul colore: senza questa
   riga i link dentro i risultati cambiano colore da soli. */
.grr a:hover, .grr a:focus { color: inherit; }

.grr button { font-family: inherit; }

/* Il design ha due blocchi separati, uno per il desktop e uno per il telefono:
   si mostra quello giusto invece di adattarne uno solo. Cambiano le misure,
   ma anche la risalita sulla hero: -118px sul desktop, +16px sul telefono,
   dove la barra sta sotto l'immagine e non sopra. */
.grr-stretto { display: none; }

@media (max-width: 900px) {
	.grr-largo { display: none; }
	.grr-stretto { display: block; }

	/* Da telefono la barra non risale sulla hero: le sta sotto, su fondo
	   bianco, col titolo in blu. Il design le lascia 16px sopra, 14 ai lati e
	   niente sotto — misure giuste in un mockup, dove intorno non c'e' nulla.
	   Sul sito quel blocco resta incastrato fra una hero alta 100vh e la
	   sezione dei servizi, e non respira. Qui gli si fa spazio: il markup
	   resta quello del design. */
	.grr-stretto > div {
		margin-top: 52px !important;
		margin-bottom: 44px !important;
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/* --------------------------------------------------- innesto sulla hero vera
 *
 * Il design disegna la barra su una hero sua (`home-top.png`), dove sotto ai
 * testi c'e' molto respiro. La hero del sito no: e' alta 100vh coi contenuti
 * centrati, e sotto al pulsante "Scopri i nostri servizi" e al numero di
 * telefono resta poco. Con la risalita del design (-118px) il titolo bianco
 * finiva addosso a quei due.
 *
 * Le misure qui sotto sono le uniche quattro cose che cambiano rispetto al
 * canvas, e stanno tutte qui invece che dentro desktop.html, che resta il
 * design intatto. Sono pensate per stare insieme: cambiandone una sola il
 * conto non torna piu'.
 *
 *   la barra e' alta 71px, il blocco del titolo 57px
 *   risalita -92px  ->  la barra sta a cavallo del bordo, 35px sopra e 36 sotto
 *                       e il titolo resta 92px dentro la hero
 *   hero +60px e colonna con 60px di respiro sotto  ->  i testi salgono di 60px
 *                       rispetto al bordo (la riga e' centrata: meta' per una,
 *                       meta' per l'altra), da 106 a 166px sopra il bordo
 *   larghezza 1170px ->  la stessa del contenitore del tema, cioe' del resto
 *                       della pagina; il design dichiarava 1136
 */
@media (min-width: 901px) {
	.grr-largo > div {
		margin-top: -92px !important;
		/* Il contenitore del tema fa gia' da margine: sommare anche questo
		   stringerebbe la barra rispetto al resto della pagina. */
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Titolo e barra: il design li tiene alla stessa larghezza, e cosi' devono
	   restare. Si agganciano per la misura dichiarata, non per posizione. */
	.grr-largo [style*="max-width: 1136px"] { max-width: 1170px !important; }

	/* La hero: piu' alta, e coi testi che salgono. La classe gliela mette
	   `regola-hero-ricerca.php`; se manca, qui non succede nulla e la barra
	   resta comunque leggibile. */
	.grr-hero.vc_row-o-full-height { min-height: calc(100vh + 60px); }
	.grr-hero > .ld-container > .row > .wpb_column > .vc_column-inner { padding-bottom: 60px; }
}