/*
Theme Name: RentOps
Theme URI: https://rentops.ma
Description: The theme of rentops.ma, a child of Hello Elementor. Page bodies are built with Elementor; the header, the footer, the templates, the custom widgets and the field groups live here.
Author: RentOps
Template: hello-elementor
Version: 0.2.0
Requires at least: 7.0
Requires PHP: 8.3
Text Domain: rentops
*/

/*
Colours, sizes and the font are variables of Elementor's kit, printed on every page under their
label: var(--nuit), var(--espace-16), var(--police). Here, only what the kit cannot hold.
*/
:root {
	--ro-couche-entete: 100;
	--ro-couche-barre: 200;
	--ro-couche-chat: 300;
	--ro-couche-cookies: 400;
	--ro-couche-dialogue: 500;
	--ro-couche-evitement: 600;
	--ro-ombre-feuille: 0 1px 2px rgb(0 14 33 / 0.08), 0 12px 32px rgb(0 14 33 / 0.12);
	--ro-ombre-entete: 0 1px 0 var(--trait), 0 4px 16px rgb(0 14 33 / 0.06);
	--ro-duree-geste: 150ms;
	--ro-duree-panneau: 250ms;
	--ro-marge: var(--espace-16);
	--ro-entre-bandes: var(--espace-48);
	--ro-hauteur-entete: 3.5rem;
}

@media (min-width: 768px) {
	:root {
		--ro-marge: var(--espace-24);
		--ro-entre-bandes: 4.5rem;
		--ro-hauteur-entete: 4.5rem;
	}
}

@media (min-width: 1025px) {
	:root {
		--ro-entre-bandes: var(--espace-96);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ro-duree-geste: 0ms;
		--ro-duree-panneau: 0ms;
	}
}

/*
Archivo, variable: weight 100 to 900, width 62 to 125 %. One file per range; a French page needs
the first only. Tabular figures are in the font (feature tnum).
*/
@font-face {
	font-family: Archivo;
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Archivo;
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* What shows until Archivo arrives: Arial, brought to the width and the heights of Archivo. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 98.22%;
	ascent-override: 89.39%;
	descent-override: 21.38%;
	line-gap-override: 0%;
}

/* Base type */
html {
	scroll-padding-block-start: var(--ro-hauteur-entete);
}

body {
	background-color: var(--papier);
	color: var(--nuit);
	font-family: var(--police), "Archivo Fallback", system-ui, sans-serif;
	font-size: var(--texte);
	font-stretch: 100%;
	font-weight: 400;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--espace-16);
	color: inherit;
	font-family: inherit;
	font-weight: 700;
	text-wrap: balance;
}

h1 {
	font-size: var(--titre-1);
	font-stretch: 108%;
	font-weight: 800;
	line-height: 1.05;
}

h2 {
	font-size: var(--titre-2);
	font-stretch: 106%;
	line-height: 1.15;
}

h3 {
	font-size: var(--titre-3);
	font-stretch: 100%;
	line-height: 1.25;
}

h4,
h5,
h6 {
	font-size: var(--texte);
	line-height: 1.4;
}

p {
	margin-block: 0 var(--espace-16);
}

/* A line holds 68 characters at most. Without weight: any class undoes it. */
:where(p, li, dd, dt, blockquote, figcaption) {
	max-inline-size: 68ch;
}

small,
figcaption {
	color: var(--ardoise);
	font-size: var(--petit);
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
}

a {
	color: var(--roi);
}

a:hover,
a:active {
	color: var(--roi-fonce);
}

.ro-chapeau {
	font-size: var(--chapeau);
	line-height: 1.5;
}

.ro-petit {
	font-size: var(--petit);
	font-weight: 500;
	line-height: 1.5;
}

/* Amounts, dates, references: figures of one width. */
.ro-chiffres,
time,
table {
	font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
	body {
		font-size: var(--texte-large);
	}
}

@media (min-width: 1025px) {
	h1 {
		font-stretch: 125%;
	}

	h2 {
		font-stretch: 115%;
	}
}

/* Focus. The selector is doubled to win over the reset of the parent, which draws its own. */
:root :focus-visible:focus-visible {
	outline: 2px solid var(--roi);
	outline-offset: 2px;
	box-shadow: none;
}

:root .ro-band--nuit :focus-visible:focus-visible {
	outline-color: var(--azur-clair);
}

/* The skip link, once it has the focus. */
.skip-link.screen-reader-text:focus {
	inset-block-start: var(--espace-8);
	inset-inline-start: var(--espace-8);
	z-index: var(--ro-couche-evitement);
	background-color: var(--papier);
	color: var(--roi);
	font-weight: 600;
}

/* Band: one idea of a page, edge to edge. Container: its content, on the grid. */
.ro-band {
	background-color: var(--papier);
	color: var(--nuit);
	padding-block: var(--ro-entre-bandes);
}

.ro-band--brume {
	background-color: var(--brume);
}

.ro-band--nuit {
	background-color: var(--nuit);
	color: var(--papier);
}

.ro-container {
	inline-size: min(100% - 2 * var(--ro-marge), 75rem);
	margin-inline: auto;
}

/* Button */
.ro-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3rem;
	padding-block: var(--espace-8);
	padding-inline: var(--espace-24);
	border: 2px solid transparent;
	border-radius: var(--coin-bouton);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--ro-duree-geste),
		border-color var(--ro-duree-geste),
		color var(--ro-duree-geste);
}

.ro-button--block {
	inline-size: 100%;
}

.ro-button--primary,
.ro-button--primary:focus {
	background-color: var(--roi);
	border-color: var(--roi);
	color: var(--papier);
}

.ro-button--primary:hover,
.ro-button--primary:active {
	background-color: var(--roi-fonce);
	border-color: var(--roi-fonce);
	color: var(--papier);
}

.ro-button--secondary,
.ro-button--secondary:focus {
	background-color: transparent;
	border-color: var(--roi);
	color: var(--roi);
}

.ro-button--secondary:hover,
.ro-button--secondary:active {
	background-color: transparent;
	border-color: var(--roi-fonce);
	color: var(--roi-fonce);
}

.ro-band--nuit .ro-button--secondary,
.ro-band--nuit .ro-button--secondary:focus {
	border-color: var(--azur-clair);
	color: var(--azur-clair);
}

.ro-link,
.ro-link:focus {
	color: var(--roi);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ro-link:hover,
.ro-link:active {
	color: var(--roi-fonce);
}

.ro-band--nuit .ro-link,
.ro-band--nuit .ro-link:focus {
	color: var(--azur-clair);
}

@media (min-width: 1025px) {
	.ro-button {
		min-block-size: 2.75rem;
	}
}

/* A link that is a button: « Gérer mes cookies ». The reset of the parent draws every button. */
button.ro-link,
button.ro-link:hover,
button.ro-link:focus {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	text-align: start;
	white-space: normal;
	cursor: pointer;
}

button.ro-link,
button.ro-link:focus {
	color: var(--roi);
}

button.ro-link:hover,
button.ro-link:active {
	color: var(--roi-fonce);
}

/* Header: stays at the top; the line shows once the page has moved. */
.ro-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--ro-couche-entete);
	block-size: var(--ro-hauteur-entete);
	background-color: var(--papier);
	transition: box-shadow var(--ro-duree-geste);
}

.ro-header.is-scrolled,
.ro-menu-open .ro-header {
	box-shadow: var(--ro-ombre-entete);
}

.admin-bar .ro-header {
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

.ro-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-16);
	block-size: 100%;
}

.ro-header__logo {
	flex: none;
	font-weight: 800;
}

.ro-header__logo a {
	display: block;
}

/* The logo is sized by its height: the file is 720 px wide, for dense screens. */
.ro-header__logo img {
	display: block;
	block-size: 44px;
	inline-size: auto;
	max-inline-size: none;
}

.ro-header__button,
.ro-header__button:hover,
.ro-header__button:focus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-inline-end: calc(-1 * var(--espace-12));
	padding: 0;
	border: 0;
	border-radius: var(--coin-bouton);
	background: none;
	color: var(--nuit);
}

.ro-header__icon-close,
.ro-header__button[aria-expanded="true"] .ro-header__icon-open {
	display: none;
}

.ro-header__button[aria-expanded="true"] .ro-header__icon-close {
	display: inline;
}

.ro-header__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ro-header__links a,
.ro-header__login {
	display: flex;
	align-items: center;
	min-block-size: 3rem;
	color: var(--nuit);
	font-weight: 600;
	text-decoration: none;
}

.ro-header__links a:hover,
.ro-header__login:hover {
	color: var(--roi);
}

.ro-header__links [aria-current="page"],
.ro-header__links .current-menu-item > a {
	color: var(--roi);
}

/* Under 1025 px: the links are a panel over the page, closed until the button opens it. */
@media (max-width: 1024px) {
	.ro-header__panel {
		position: fixed;
		inset-block: var(--ro-hauteur-entete) 0;
		inset-inline: 0;
		display: flex;
		flex-direction: column;
		gap: var(--espace-24);
		padding-block: var(--espace-16) calc(var(--espace-24) + env(safe-area-inset-bottom, 0px));
		padding-inline: var(--ro-marge);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--papier);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--ro-duree-panneau),
			visibility var(--ro-duree-panneau);
	}

	.admin-bar .ro-header__panel {
		inset-block-start: calc(var(--ro-hauteur-entete) + var(--wp-admin--admin-bar--height, 0px));
	}

	.ro-header__panel.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--ro-duree-panneau);
	}

	.ro-header__links li {
		max-inline-size: none;
		border-block-end: 1px solid var(--trait);
	}

	.ro-header__actions {
		display: flex;
		flex-direction: column;
		gap: var(--espace-12);
	}

	.ro-header__signup {
		inline-size: 100%;
	}

	/* The page behind the panel does not scroll. */
	.ro-menu-open,
	.ro-menu-open body {
		overflow: hidden;
	}
}

@media (min-width: 768px) {
	.ro-header__logo img {
		block-size: 56px;
	}
}

@media (min-width: 1025px) {
	.ro-header__button,
	.ro-header__button:hover,
	.ro-header__button:focus {
		display: none;
	}

	.ro-header__panel {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		gap: var(--espace-24);
		margin-inline-start: var(--espace-32);
	}

	.ro-header__links {
		display: flex;
		gap: var(--espace-32);
	}

	.ro-header__links a,
	.ro-header__login {
		min-block-size: 2.75rem;
	}

	.ro-header__actions {
		display: flex;
		align-items: center;
		gap: var(--espace-24);
	}
}

/* Footer */
.ro-footer {
	font-size: var(--petit);
	line-height: 1.5;
}

.ro-footer__columns {
	display: grid;
	gap: var(--espace-32);
}

.ro-footer__brand a {
	display: inline-block;
	font-weight: 800;
}

.ro-footer__brand img {
	display: block;
	block-size: 40px;
	inline-size: auto;
}

.ro-footer__title {
	margin-block-end: var(--espace-4);
	font-size: var(--petit);
	font-stretch: 100%;
	font-weight: 700;
	line-height: 1.5;
}

.ro-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ro-footer__links a,
.ro-footer__links button.ro-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
}

.ro-footer__links a,
.ro-footer__links a:focus {
	color: var(--nuit);
	text-decoration: none;
}

.ro-footer__links a:hover,
.ro-footer__links a:active {
	color: var(--roi);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ro-footer__address {
	padding-block: var(--espace-8);
	color: var(--ardoise);
	font-style: normal;
}

.ro-footer__legal {
	max-inline-size: none;
	margin-block: var(--espace-32) 0;
	padding-block-start: var(--espace-24);
	border-block-start: 1px solid var(--trait);
	color: var(--ardoise);
	font-weight: 500;
}

@media (min-width: 768px) {
	.ro-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.ro-footer__columns {
		grid-template-columns: 2fr repeat(3, 1fr);
	}
}

/* Not found */
.ro-404 {
	min-block-size: 50vh;
}

.ro-404 .ro-button {
	margin-block-start: var(--espace-16);
}