/*********************************************************************
*
*  	Rouergue Creation Top Notice Bar 

*	1.  Le bloc défilant
*  	2.  On harmonise le nbr de mots par ligne du message
*  	3.  Position fixe de la barre de notifications
*	4.  header thème de bloc
*  	5.  Bouton appel à l'action
*	6. 	Bouton de fermeture
*	7.  Régles mobile
* 
**********************************************************************

/*
La propriété animation se décompose comme suit :
  animation-name: defilement-rtl;       référence à la règle @keyframes mise en oeuvre 
  animation-duration: 20s;              20s par défaut à ajuster suivant la longueur du message 
  animation-iteration-count: infinite;   boucle continue 
  animation-timing-function: linear;     
*/

/*----- le bloc défilant ----- */
/*
La variable CSS: --scroll-speed est passée dans la propriété
style du wrapper de la barre d'annonce par la fonction
rctnb_display_announcement_bar_front_page() du fichier:
rouergue-creation-top-notice-bar.php
Cette variable est affectée par une option de la page des paramètres
*/
.rctnb-text-scroll {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl var(--scroll-speed) infinite linear;
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

@media (prefers-reduced-motion: reduce) {
  .rctnb-text-scroll {
    animation: none;
  }
}

/* 
   On harmonise le nbr de mots par ligne du message 
   avec la régle CSS text-wrap:balance
*/
.rouergue-creation-top-notice-bar{
	text-wrap:balance;
}

/*----- Position fixe de la barre de notifications ----- */
/*
Selon les options sélectionnées dans la page des paramètres,
des classes sont ajoutées en PHP à la barre de notifications
via le hook wp_body_open: 
position fixe ==> is-sticky
masquée sur mobile ==> is-hide-on-mobile 
*/
.rouergue-creation-top-notice-bar.is-sticky {
	position: fixed!important;
    top: 0;
    left: 0;
}

body.admin-bar .rouergue-creation-top-notice-bar.is-sticky,
#wpadminbar + .rouergue-creation-top-notice-bar.is-sticky{
	top:32px;
}

@media(max-width: 782px) {
	
	body.admin-bar .rouergue-creation-top-notice-bar.is-sticky:not(.is-hide-on-mobile),
	#wpadminbar + .rouergue-creation-top-notice-bar.is-sticky:not(.is-hide-on-mobile){
		top:46px;
	}
	
	/* afin que le script JS ne détecte aucune hauteur
	   de la barre de notification, lorsqu'on lui applique
	   la régle: display:none */
	.rouergue-creation-top-notice-bar.is-hide-on-mobile{
		padding:0!important;
	}
	
}

/* header thème de bloc
pour que le menu de navigation sur mobile 
recouvre la barre de notification*/
header.is-position-sticky{
	z-index: 99998;
}

/*----- Bouton appel à l'action ----- */
.rctnb-calltoaction{
	display:inline-block;
}

/*----- Bouton de fermeture ----- */


	
.rctnb-close-notice-bar {
	position: absolute;
	top: 50%;
	right: 0.8em;
	transform: translateY(-50%);
	color: inherit;
	opacity: 0.8;
	background: transparent!important;
	cursor: pointer;
    border: none!important;
	font-size:30px;
}

.rctnb-close-notice-bar svg{
	fill:currentColor;
}

.rctnb-close-notice-bar:hover {
	opacity: 1;
}

/*----- Régles mobile ----- */
@media (max-width: 480px) {

	/* padding-top 2rem espace pour le bouton de fermeture */
	.rouergue-creation-top-notice-bar:has(.rctnb-close-notice-bar) {
		padding: 2rem 1rem 1rem 1rem!important;      
	}

	.rctnb-close-notice-bar {
		top: 1.5rem;
		right: 1rem;
		font-size: 18px;
	}
	
	/* Si l'utilisateur est connecté avec barre 
	   d'administration présente on positionne 
	   le bouton de fermeture à gauche pour qu'il
	   ne soit pas masqué par l'avatar du compte */
	body.admin-bar .rctnb-close-notice-bar {
		right:unset;
		left: 1rem;
	}
	
}