/*
Theme Name: La Maison du Bonheur
Description: Thème enfant de Twenty Twenty-Five pour le site des gîtes de la Maison du Bonheur (Plassac, Charente-Maritime). Bilingue FR / EN via Polylang.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: maison-bonheur
*/

/* ---------- Accessibilité ---------- */

/* Texte réservé aux lecteurs d'écran et aux moteurs de recherche (titre principal de l'accueil) */
.mb-sr {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Le focus au clavier doit toujours être visible */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.mb-header a:focus-visible,
.mb-footer a:focus-visible {
	outline-color: #fff;
}

/* Respecte le réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Fond : photo fixe, comme l'ancien site ---------- */
body {
	background: #ececec url("assets/img/fond.jpg") center top / cover no-repeat fixed;
}

.wp-site-blocks {
	padding: 0;
}

/* ---------- En-tête ---------- */
.mb-header {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 0.75rem 1.25rem;
	position: relative;
	z-index: 20; /* le sous-menu doit passer devant le bandeau à logo des pages gîte */
}

.mb-header a {
	color: inherit;
	text-decoration: none;
}

/* Logo du pied de page, centré dans la barre sur mobile (menu « hamburger » sous 600 px) ; un appui ramène à l'accueil */
.mb-header .mb-header-logo {
	display: none;
	margin: 0;
}

.mb-header .mb-header-logo img {
	display: block;
	height: 40px;
	width: auto;
}

@media (max-width: 599px) {
	.mb-header .alignwide {
		flex-wrap: nowrap;
		justify-content: space-between;
		min-height: 40px;
		position: relative;
	}

	/* barre : [FR EN] · logo au centre · [menu] */
	.mb-header .alignwide > .wp-block-group {
		display: contents;
	}

	.mb-header .mb-lang {
		margin-right: auto;
		order: -1;
		width: auto;
	}

	.mb-header .alignwide .wp-block-navigation {
		order: 1;
	}

	.mb-header .mb-header-logo {
		display: block;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

.mb-header .wp-block-group {
	align-items: center;
}

.mb-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--bree);
	font-size: 1.5rem;
	font-weight: 400;
	margin: 0;
}

.mb-header .wp-block-navigation {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mb-header .wp-block-navigation__container,
.mb-header .wp-block-page-list {
	flex-wrap: nowrap;
	gap: 0.5rem 1.5rem;
}

.mb-header .wp-block-navigation-item {
	white-space: nowrap;
}

.mb-header .wp-block-navigation a:hover,
.mb-header .wp-block-navigation a:focus {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.mb-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* Sélecteur de langue */
.mb-lang ul {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-lang a {
	border: 1px solid transparent;
	display: block;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	padding: 0.15rem 0.5rem;
	text-transform: uppercase;
}

.mb-lang .current-lang a,
.mb-lang a:hover {
	border-color: currentColor;
}

/* ---------- Corps de page ---------- */
/* Pied de page toujours en bas de fenêtre, même sur une page courte */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > .wp-block-template-part:last-child {
	margin-top: auto;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Espacement par le padding du <main> : insensible aux marges de bloc WordPress */
.wp-site-blocks > .mb-main {
	margin: 0;
	padding: 2rem 0.75rem;
}

.wp-site-blocks > .mb-main.mb-front {
	padding-top: 0;
}

.mb-hero {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	min-height: var(--mb-hero-h, min(70vh, 520px));
	padding: 1.5rem 1rem;
}

.mb-hero .mb-hero-logo {
	margin: 0;
}

.mb-hero .mb-hero-logo img {
	height: auto;
	max-height: calc(var(--mb-hero-h, 520px) - 3rem);
	max-width: min(255px, 70vw);
	object-fit: contain;
	width: auto;
}

.mb-panel {
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	margin: 0 auto;
	max-width: 1180px;
	padding: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Galeries : vignettes régulières en 4:3 (comme l'ancien site) ---------- */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ---------- Boutons ---------- */
.wp-block-button.mb-btn-tarif .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	border: 3px solid var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--base);
	font-size: 1.4rem;
	padding: 0.45em 1.3em;
}

.wp-block-button.mb-btn-tarif .wp-block-button__link:hover,
.wp-block-button.mb-btn-tarif .wp-block-button__link:focus {
	background: var(--wp--preset--color--accent-dark);
}

/* ---------- Pied de page ---------- */
.mb-footer {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	padding: 2rem 1.25rem;
}

.mb-footer a {
	color: inherit;
}

.mb-footer p {
	margin: 0.25rem 0;
}

.mb-footer .mb-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

/* ---------- Activités & sorties (cartes) ---------- */
.mb-activity {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.mb-activity > figure {
	margin: 0;
}

.mb-activity > figure img {
	aspect-ratio: 3 / 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.mb-activity > :not(figure) {
	margin-left: 1rem;
	margin-right: 1rem;
}

/* Durée du trajet : pastille ronde à cheval sur le bas de la photo */
.mb-activity .mb-duree {
	align-items: center;
	background: var(--wp--preset--color--base);
	border-radius: 50%;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
	color: var(--wp--preset--color--primary);
	display: flex;
	font-size: 0.8rem;
	font-weight: 700;
	height: 57px;
	justify-content: center;
	line-height: 1.1;
	margin: -28px auto 0;
	position: relative;
	text-align: center;
	width: 57px;
}

.mb-activity h3 {
	margin-top: 0.15rem;
}

.mb-activity p:last-child {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 1rem;
}

/* ---------- Icônes Font Awesome Pro (fines), colorées par le texte ---------- */
.mb-icon {
	background: currentColor;
	display: inline-block;
	height: 1.15em;
	margin-right: 0.55em;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: -0.2em;
	width: 1.15em;
}

.mb-icon--location-dot {
	-webkit-mask-image: url("assets/icons/fa/location-dot.svg");
	mask-image: url("assets/icons/fa/location-dot.svg");
}

.mb-icon--circle-phone {
	-webkit-mask-image: url("assets/icons/fa/circle-phone.svg");
	mask-image: url("assets/icons/fa/circle-phone.svg");
}

.mb-icon--envelope {
	-webkit-mask-image: url("assets/icons/fa/envelope.svg");
	mask-image: url("assets/icons/fa/envelope.svg");
}

.mb-icon--facebook {
	-webkit-mask-image: url("assets/icons/fa/facebook.svg");
	mask-image: url("assets/icons/fa/facebook.svg");
}

.mb-icon--instagram {
	-webkit-mask-image: url("assets/icons/fa/instagram.svg");
	mask-image: url("assets/icons/fa/instagram.svg");
}

.mb-icon--airbnb {
	-webkit-mask-image: url("assets/icons/fa/airbnb.svg");
	mask-image: url("assets/icons/fa/airbnb.svg");
}

.mb-icon--booking-b {
	-webkit-mask-image: url("assets/icons/fa/booking-b.svg");
	mask-image: url("assets/icons/fa/booking-b.svg");
}

.mb-footer .mb-social a {
	display: inline-block;
	line-height: 1;
	text-decoration: none;
}

.mb-footer .mb-social .mb-icon {
	height: 1.9rem;
	margin: 0;
	width: 1.9rem;
}

.mb-footer .mb-social a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Parties communes : pastille ronde + icône, comme l'ancien site ---------- */
.mb-partie {
	background: rgba(236, 236, 236, 0.8);
	border-radius: 5px;
	margin: 0.6rem 0;
	min-height: 77px;
	padding: 0.6rem 1rem 0.6rem 5.4rem;
	position: relative;
}

.mb-partie::before {
	background: var(--wp--preset--color--base) center / 54% no-repeat;
	border-radius: 50%;
	content: "";
	height: 57px;
	left: 1rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 57px;
}

.mb-partie h3 {
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 0 0 0.15rem;
}

.mb-partie p {
	font-size: 0.9rem;
	margin: 0;
}

.mb-partie--piscine::before {
	background-image: url("assets/icons/site/piscine.svg");
}

.mb-partie--reception::before {
	background-image: url("assets/icons/site/reception.svg");
}

.mb-partie--jeux::before {
	background-image: url("assets/icons/site/jeux.svg");
}

.mb-partie--billard::before {
	background-image: url("assets/icons/site/billard.svg");
}

.mb-partie--enfants::before {
	background-image: url("assets/icons/site/enfants.svg");
}

.mb-partie--jeux-exterieurs::before {
	background-image: url("assets/icons/site/jeux-exterieurs.svg");
}

.mb-partie--laverie::before {
	background-image: url("assets/icons/site/laverie.svg");
}

.mb-footer .mb-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0.25rem 1.5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
}

.mb-footer .mb-footer-name {
	font-family: var(--wp--preset--font-family--bree);
	font-size: 1.25rem;
}

/* Accueil : panneaux blancs separes par un espace */
.mb-front .mb-panel + .mb-panel{margin-top:2.5rem}

/* Accueil : bande photo de drone du hameau entre l'intro et les gites */
/* Pleine largeur d'ecran (comme l'ancien site) : l'image remplit la bande et est recadree sur les cotes (object-fit: cover) */
.mb-front .mb-photo-hameau{margin:0 -0.75rem;max-width:none;height:100vh;height:100svh;min-height:0!important;width:calc(100% + 1.5rem)}
.mb-front .mb-photo-hameau .wp-block-cover__image-background{height:100%;object-fit:cover;object-position:center;width:100%}
.mb-front .mb-photo-hameau + .mb-panel{margin-top:0}
/* Intro (Besoin d'une pause nature ?) : bord a bord, collee a la photo de drone */
.mb-front .mb-panel:has(+ .mb-photo-hameau){margin:0 -0.75rem;max-width:none;width:calc(100% + 1.5rem)}
.mb-front .mb-panel:has(+ .mb-photo-hameau){text-align:center}
.mb-front .mb-panel:has(+ .mb-photo-hameau) p{font-size:1.2rem}
/* Mobile : le titre de l'intro reste plus gros que le texte */
@media (max-width:781px){.mb-front .mb-panel:has(+ .mb-photo-hameau) h2{font-size:1.75rem}.mb-front .mb-panel:has(+ .mb-photo-hameau) p{font-size:1rem}}
/* Accueil : tous les titres centres */
.mb-front :is(h2,h3,h4){text-align:center}
.mb-front .mb-partie h3{text-align:left}
/* Accueil : titres de section en capitales (sauf l'intro « Besoin d'une pause nature ? ») */
.mb-front .mb-panel:not(:has(+ .mb-photo-hameau)) h2{text-transform:uppercase}
/* Accueil : meme marge au-dessus de chaque titre de section (hors 1er du panneau) */
.mb-front .mb-panel h2:not(:first-child){margin-top:4rem}
/* Pied de page : logo et carte de France (comme sur l'ancien site) */
.mb-footer .mb-footer-logo{margin:0 0 1rem}
.mb-footer .mb-footer-logo img{display:block;height:auto;max-width:100%;width:127px}
.mb-footer .mb-footer-address{align-items:center;display:flex;gap:1.25rem}
.mb-footer .mb-footer-map{flex:none;height:auto;width:106px}
/* Accueil : sections en bandes bord a bord (chacune un panneau), contenu centre dans la colonne de 1180 px */
.mb-front .mb-panel + .mb-panel.mb-section,
.mb-front .mb-photo-hameau + .mb-panel.mb-section{box-shadow:none;margin:0 -0.75rem;max-width:none;padding-bottom:clamp(2rem,5vw,3.5rem);padding-left:calc(max(0px,(100% + 1.5rem - 1180px) / 2) + clamp(1.25rem,4vw,3rem));padding-right:calc(max(0px,(100% + 1.5rem - 1180px) / 2) + clamp(1.25rem,4vw,3rem));padding-top:clamp(2rem,5vw,3.5rem);width:calc(100% + 1.5rem)}
.mb-front .mb-section--grey.mb-panel{background:var(--wp--preset--color--surface,#f6f6f6)}
.mb-front .mb-section--grey .mbg-gcal__ph{background:#fff}
/* Pas de marge sous la derniere section : elle touche le pied de page */
.wp-site-blocks > .mb-main.mb-front{padding-bottom:0}
/* Paragraphe pleine largeur de contenu (meme largeur que la carte de la Maison du Bonheur) */
.mb-front .mb-section .mb-wide{max-width:none;text-align:center}
@media (min-width:782px){.mb-front .mb-section .mb-wide{font-size:1.15rem}}
/* Parties communes (bureau) : le plan, PNG transparent, prend toute la hauteur de la bande et deborde un peu en haut et en bas ; sa largeur est plafonnee a sa colonne (+ un leger recouvrement derriere les tuiles, opaques) */
@media (min-width:782px){
.mb-front .mb-section--plan{overflow:visible;position:relative;z-index:1}
.mb-front .mb-section--plan .wp-block-columns{align-items:stretch}
.mb-front .mb-section--plan .wp-block-column:first-child{flex-basis:50%!important;position:relative}
.mb-front .mb-section--plan .wp-block-column:last-child{flex-basis:50%!important;position:relative;z-index:1}
.mb-front .mb-section--plan .mb-partie{background-color:#f0f0f0}
.mb-front .mb-section--plan .wp-block-column:first-child figure{bottom:-4.5rem;left:calc(-1 * clamp(0px, (100vw - 1180px) / 2, 3.5rem));margin:0;position:absolute;right:-7rem;top:-7.9rem}
.mb-front .mb-section--plan .wp-block-column:first-child img{display:block;height:100%;max-width:none;object-fit:contain;object-position:left center;width:100%}
}
/* Pied de page reorganise : logo a gauche / coordonnees a droite ; en bas, liens legaux a gauche et reseaux sociaux a droite */
.mb-footer .mb-footer-top{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between}
.mb-footer .mb-footer-top .mb-footer-logo{margin:0}
.mb-footer .mb-footer-contact{align-items:center;display:flex;gap:1.5rem}
.mb-footer .mb-footer-mapwrap{flex:none;margin:0}
.mb-footer .mb-footer-info{line-height:1.9;margin:0}
.mb-footer .mb-footer-bottom{align-items:center;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;margin-top:1.5rem;padding-top:1rem}
.mb-footer .mb-footer-bottom .mb-legal{border-top:0;margin:0;padding:0;width:auto}
.mb-footer .mb-footer-bottom .mb-social{flex-wrap:nowrap;margin:0}
@media (max-width:600px){.mb-footer .mb-footer-contact{align-items:flex-start;flex-wrap:wrap}.mb-footer .mb-footer-bottom{flex-direction:column;align-items:flex-start}}.mb-footer .mb-footer-info a:first-child{display:inline-block;padding-left:26px;text-indent:-26px}
/* Logo centre : le haut du pied de page devient une colonne centree */
.mb-footer .mb-footer-top{flex-direction:column;justify-content:center;gap:1.25rem}
.mb-footer .mb-footer-top .mb-footer-logo{text-align:center}
.mb-footer .mb-footer-top .mb-footer-logo img{margin:0 auto}
.mb-footer .mb-footer-contact{justify-content:center}
/* Bouton flottant « Nous contacter » : une bulle ronde en bas a droite, sur tous les ecrans */
.mb-fab{--mb-fab:var(--wp--preset--color--accent,#FF6F61);--mb-fab-dark:var(--wp--preset--color--accent-dark,#b8382c);align-items:center;background:var(--mb-fab);border:2px solid #fff;border-radius:50%;bottom:1.25rem;box-shadow:0 3px 12px rgba(0,0,0,.35);color:#fff;display:flex;height:3.6rem;justify-content:center;padding:0;position:fixed;right:1.25rem;text-decoration:none;transition:background-color .2s ease,transform .2s ease;width:3.6rem;z-index:90}
.mb-fab:hover,.mb-fab:focus-visible{background:var(--mb-fab-dark);color:#fff;transform:scale(1.08)}
.mb-fab__icon{flex:none}
.mb-fab__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
@media (max-width:781px){.mb-fab{bottom:1rem;right:.75rem}}
@media (prefers-reduced-motion:reduce){.mb-fab{transition:none}.mb-fab:hover,.mb-fab:focus-visible{transform:none}}
@media print{.mb-fab{display:none}}/* Fiches des gites : titre principal centre */


/* ---------- Fiches des gites : organisation de l'ancien site (bandeau + logo rond, titre, pictos, carrousel / equipements, calendrier) ---------- */
.mb-gite-banner{background:#ececec url("assets/img/fond.jpg") center 30% / cover no-repeat;height:200px;margin:0;position:relative;z-index:2}
.mb-gite-banner .mb-gite-logo{left:50%;margin:0;position:absolute;top:30px;transform:translateX(-50%);width:200px}
.mb-gite-banner .mb-gite-logo img{display:block;height:auto;width:100%}
.wp-site-blocks > .mb-main.mb-gitepage{background:#fff;padding:3.5rem .75rem 2.5rem}
.mb-gite > .wp-block-post-title{font-size:clamp(1.5rem,3vw,1.9rem);margin-top:0;text-align:center;text-transform:uppercase}
.mb-gite .mbg-specs{max-width:22rem}
.mb-gite .mbg-spec__icon{background-color:transparent}
.mb-gite-cols{gap:2rem;margin-top:1.5rem}
@media (max-width:781px){.mb-gite-banner .mb-gite-logo{width:130px}.wp-site-blocks > .mb-main.mb-gitepage{padding-top:2rem}}

/* Carrousel de photos : defilement horizontal avec accroche, fleches ajoutees par script */
.mb-slider-wrap{position:relative}
.mb-slider.wp-block-gallery{display:flex!important;flex-wrap:nowrap!important;gap:0!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mb-slider.wp-block-gallery::-webkit-scrollbar{display:none}
.mb-slider.wp-block-gallery > figure.wp-block-image{flex:0 0 100%!important;margin:0!important;scroll-snap-align:start;width:100%!important}
.mb-slider img[alt*="plan" i]{background:#fff;object-fit:contain!important}
.mb-slider-btn{align-items:center;background:rgba(255,255,255,.92);border:0;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.35);color:var(--wp--preset--color--primary);cursor:pointer;display:flex;font-size:1.4rem;height:2.4rem;justify-content:center;line-height:1;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2.4rem;z-index:3}
.mb-slider-btn--prev{left:.6rem}
.mb-slider-btn--next{right:.6rem}
.mb-slider-btn:hover,.mb-slider-btn:focus-visible{background:#fff;color:var(--wp--preset--color--accent-dark)}

/* Equipements : encadre gris, pastilles-icones */
.mb-equip{align-self:stretch;background:#ececec;padding:.6rem 1rem}
.mb-equip-item{margin:.4rem 0;min-height:57px;padding:.5rem .5rem .5rem 4.8rem;position:relative}
.mb-equip-item::before{background:#fff center / 54% no-repeat;border-radius:50%;content:"";height:57px;left:0;position:absolute;top:.5rem;width:57px}
.mb-equip-title{font-size:1rem!important;line-height:1.4;margin:0 0 .2rem!important;text-align:left;text-transform:uppercase}
.mb-equip-item ul{font-size:.9rem;list-style:none;margin:0;padding:0}
.mb-equip-item li{margin:0}
.mb-equip--chambres::before{background-image:url("assets/icons/site/equip-chambres.svg")}
.mb-equip--sdb::before{background-image:url("assets/icons/site/equip-sdb.svg")}
.mb-equip--salon::before{background-image:url("assets/icons/site/equip-salon.svg")}
.mb-equip--cuisine::before{background-image:url("assets/icons/site/equip-cuisine.svg")}
.mb-equip--exterieur::before{background-image:url("assets/icons/site/equip-exterieur.svg")}
/* Fiches : calendrier pleine largeur de contenu, titre centre en capitales */
.mb-gite > .mbg-calendar{max-width:1180px!important;margin-top:3rem}
.mb-gite .mbg-calendar > h2{text-align:center;text-transform:uppercase}
/* La bulle flottante ne doit pas masquer les icones des reseaux sociaux du pied de page */
@media (min-width:782px){.mb-footer .mb-footer-bottom{padding-right:5rem}}
@media (max-width:781px){.mb-footer .mb-footer-bottom{padding-bottom:4.5rem}}
/* Mobile : reseaux sociaux centres */
@media (max-width:781px){.mb-footer .mb-footer-bottom .mb-social{justify-content:center;width:100%}}

/* Petite figue après les lieux accessibles uniquement depuis le gîte Figue (salle de réception, de jeux, de billard) ; info-bulle « Gîte Figue » */
.mb-fig {
	background: url("assets/img/fruit-figue.svg") center / contain no-repeat;
	cursor: help;
	display: inline-block;
	height: 1.05em;
	margin-left: 0.4em;
	vertical-align: -0.12em;
	width: 1.05em;
}
/* Sous-listes des fiches (une ligne par chambre sous le nom du gîte) : léger décalage */
.mb-equip li > .wp-block-list {
	margin-top: 0.1rem;
	padding-left: 1.1rem;
}

.mb-equip li > strong {
	display: inline-block;
	margin-top: 0.3rem;
}