/* =========================================================
   MHPSS ProCare Firm
   Base commune a toutes les pages

   Variables, fond du site, espace reserve au bandeau.
   Les autres fichiers de ce dossier et du dossier pages/
   s appuient sur les variables definies ici.
   ========================================================= */

/* ---------------------------------------------------------
   1. Variables
   --------------------------------------------------------- */

/* Hauteur reservee au bandeau flottant.
   SEULE VALEUR A AJUSTER si le header mord sur le contenu
   (augmenter) ou s il laisse une bande vide (diminuer). */
:root {
    --hz-bandeau: 5.1rem;
    /* Encoche et barre d etat des telephones (0 ailleurs), exposees par
       viewport-fit=cover (horizons-extension.php). */
    --hz-safe-top: env(safe-area-inset-top, 0px);
    /* Couleurs des titres (site/headings.css) : le bleu des titres des
       pages Services et A propos, et le gris charbon du slogan du logo
       (« A Balanced Professional Life »). */
    --hz-titre-bleu: #17405e;
    --hz-sous-titre-gris: #434343;
}

/* Tablette et telephone : bandeau flottant (site/header.css). */
@media (max-width: 1099px) {
    :root {
        --hz-bandeau: 5.5rem;
    }
}

/* Ligne des titres : distance entre le haut de la zone de
   contenu et le premier titre de chaque page. */
:root {
    --hz-titre: 88px;
}

@media (max-width: 640px) {
    :root {
        --hz-titre: 78px;
    }
}

/* Le theme trace un cadre sombre de 2px autour de tout element qui
   prend le focus, meme au clic de souris ou au toucher (par exemple les
   prestations des cartes Services). Il ne reste qu a la navigation au
   clavier (:focus-visible) ; les champs de formulaire le gardent aussi. */
.wp-site-blocks :focus:not(:focus-visible) {
    outline: none;
}

/* Masque le titre automatique des pages. */
h1.wp-block-post-title {
    display: none;
}

/* Neutralise l espace vertical le plus large du theme. */
:root {
    --wp--preset--spacing--60: 0 !important;
}

/* ---------------------------------------------------------
   2. Fond du site

   Le degrade est peint sur le corps du document. Il couvre
   donc toute la hauteur de chaque page, y compris la bande
   reservee au bandeau : le verre a quelque chose a flouter
   partout, et les pages du theme cessent d etre blanches.

   Valeurs reprises de .hz-hero (horizons-extension.css), avec
   les opacites doublees : sur l accueil ce degrade se superpose
   a celui de la section, ce qui le rend plus dense. Ailleurs il
   n y a qu une couche, d ou le doublement.
     8 % applique deux fois  -> 0.15
     10 % applique deux fois -> 0.19

   Le !important est INDISPENSABLE : horizons-extension.css pose
   "background: var(--hz-background)" sur le corps. Ce raccourci
   remet background-image a none et effacerait le degrade.

   Les conteneurs du theme sont rendus transparents, sans quoi
   ils masqueraient ce degrade. Les blocs ne doivent PAS peindre
   leur propre degrade : il ferait ecran a celui-ci.
   --------------------------------------------------------- */

body {
    background-color: #fafafa !important;
    background-image: linear-gradient(135deg, rgba(7, 71, 107, 0.15) 0%, #fafafa 48%, rgba(168, 207, 56, 0.19) 100%) !important;
    background-attachment: fixed !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}

.wp-site-blocks,
.wp-site-blocks>main,
.wp-site-blocks>main>*,
.wp-site-blocks>main .wp-block-group,
.wp-site-blocks>main .wp-block-post-content,
.wp-site-blocks>main .entry-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* Les sections maison peignent leur propre fond, trop
   profondement imbriquees pour la regle ci-dessus. */
.wp-site-blocks .entry-content>section,
.wp-site-blocks .hz-hero,
.wp-site-blocks .hz-mission,
.wp-site-blocks .hz-text-section,
.wp-site-blocks .hz-contact__hero {
    background-color: transparent !important;
}

/* Telephone a l horizontale : le contenu evite l encoche. */
.wp-site-blocks {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ---------------------------------------------------------
   3. Espace du bandeau

   Le bandeau est fixe : il flotte au-dessus de la page. La zone
   principale reserve sa hauteur, le contenu demarre donc sous
   lui. Elle est transparente : le degrade du corps la traverse
   et remonte derriere le verre.

   Le !important est necessaire : le theme pose un style en
   ligne sur le premier bloc de chaque page.

   AJUSTER --hz-bandeau (section 1) pour toute la hauteur. L air
   sous le bandeau se regle page par page (--hz-titre).
   --------------------------------------------------------- */

.wp-site-blocks>main {
    padding-top: var(--hz-bandeau) !important;
}

/* Blocs HZ qui ouvrent une page (HZ Services en cartes, HZ About –
   Mission & Vision) : titre sur la meme ligne que les anciennes pages
   Services et A propos. Sans effet quand le bloc n est pas le premier. */
.wp-site-blocks .entry-content>.hz-under-header:first-child {
    padding-top: calc(var(--hz-titre) - 22px) !important;
}

/* ---------------------------------------------------------
   4. Ombres portees des pastilles d icone
   --------------------------------------------------------- */

[class*='hz-'][class*='icon'] {
    box-shadow: 0 6px 14px rgba(7, 71, 107, 0.14) !important;
}