/*
 * Theme overrides that cannot live in src/sass.
 *
 * The compiled stylesheets (assets/css/main.css, assets/css/tailwind.css) are
 * not tracked in this repository, and a rebuild does not reproduce them
 * byte for byte: the build pins its dependencies with caret ranges, so a fresh
 * install resolves newer Tailwind, Sass and autoprefixer releases than the ones
 * that produced the deployed files. Editing src/ would therefore mean shipping a
 * stylesheet nobody can diff against the one in production, and uploading it by
 * hand outside the deploy.
 *
 * Rules that fix a specific defect go here instead: the file is tracked, it
 * reaches the server with a normal push, and every rule carries the reason it
 * exists. When the compiled CSS is brought under version control, these rules
 * belong back in src/sass and this file should disappear.
 */


/*
 * Footer menus versus their grid column.
 *
 * The two footer menus ask for 320px + 24px gap + 180px, which is 524px, while
 * the column that holds them is 443px wide. The surplus leaves the container
 * and, on viewports up to 1072px, reaches past the page edge and turns into a
 * horizontal scrollbar. Releasing the minimum widths over that range lets both
 * menus settle at their natural width (159px and 99px). Wider viewports keep
 * the spacing they were designed with.
 */
@media (min-width: 991px) and (max-width: 1080px) {
	.footer__inner .footer__menu-secondary,
	.footer__inner .footer__menu-general {
		min-width: 0;
	}
}


/*
 * Touch target size below the desktop breakpoint.
 *
 * The theme renders most links at their line height, which leaves targets
 * between 20px and 37px tall — too small to hit reliably on a phone. These
 * rules raise every standalone control to at least 40px.
 *
 * Links that sit inside a sentence are deliberately left alone: the reCAPTCHA
 * and privacy notices under the contact form read as running text, and the
 * cookie banner belongs to the Complianz plugin. Padding either would break the
 * paragraph it lives in, and the target-size guidance exempts inline links for
 * exactly that reason.
 */
@media (max-width: 991px) {

	/* Menu button, 24x23 before. */
	.header__hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}

	/* Site logo link, 37px tall before. */
	.header__logo {
		min-height: 40px;
	}

	/* Call to action and the contact form submit, 35px tall before. */
	.pg-button {
		min-height: 44px;
	}

	/*
	 * Slide-out menu behind the burger, 16px and 21px tall before. This is the
	 * main navigation on a phone, so it matters most.
	 */
	.ml-menu__list .nav-link,
	.ml-menu__list .dropdown-item {
		display: inline-block;
		padding-block: 12px;
	}

	/*
	 * Footer menus and the legal links beside them, 20px tall before.
	 * inline-block is needed because vertical padding does not affect the
	 * height of an inline box.
	 */
	.footer__menu .nav-link,
	.footer__inner a:not(.header__logo):not(.pg-button) {
		display: inline-block;
		padding-block: 10px;
	}

	/* Phone and address links across the page, 20px to 21px tall before. */
	a[href^="tel:"],
	a.transition-all[target="_blank"] {
		display: inline-block;
		padding-block: 10px;
	}

	/* Treatment and advice card headings, 26px tall before. */
	.traitements h3 > a,
	.conseils h3 > a,
	.conseils-item h3 > a {
		display: inline-block;
		padding-block: 7px;
	}

	/* "En savoir plus" under the advice cards, 30px tall before. */
	.conseils-item a.text-primary {
		min-height: 40px;
		align-items: center;
	}

	/* Breadcrumb trail on inner pages, 21px tall before. */
	.site-breadcrumb a {
		display: inline-block;
		padding-block: 10px;
	}

	/* Category filter on the advice archive, 32px tall before. */
	.cats-list .button--cat {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
}


/*
 * One navigation at a time in the header.
 *
 * The full menu appears from 992px: the compiled stylesheet hides its items
 * with "max-width: 991px". The burger is hidden by the Tailwind xl:hidden
 * class, which only takes effect from 1200px. Between those two numbers both
 * navigations were on screen at once, and the burger opened the mobile menu
 * on top of the full one.
 *
 * Hide the burger, and the panel it opens, from the exact width where the full
 * menu takes over. 991px keeps the burger, 992px gets the full menu, so no
 * width is left without navigation.
 *
 * The theme has no 992px breakpoint to express this in markup — its scale goes
 * 991px then 1200px — so the rule lives here.
 */
@media (min-width: 992px) {
	.header__hamburger,
	.ml-menu {
		display: none;
	}
}


/*
 * Running text on single pages: treatments, advice and team members.
 *
 * The compiled stylesheet justifies every paragraph inside the article body,
 * which opens uneven word gaps on a phone, and lets lines run the full 930px
 * of the container — about 116 characters at 16px, far past comfortable
 * reading. Both are fixed at the source in src/sass/layout/_single.sass; these
 * two rules make the fix effective before the CSS is rebuilt and can be
 * deleted the moment it is.
 *
 * Columns, images and galleries keep the full width, so only the direct text
 * children are constrained.
 */
.dp-single__content p {
	text-align: left;
}

.dp-single__content > p,
.dp-single__content > ul,
.dp-single__content > ol,
.dp-single__content > h2,
.dp-single__content > h3,
.dp-single__content > h4 {
	max-width: 550px;
}


/*
 * Label text that is read by assistive technology but not shown.
 *
 * The contact form is designed with placeholders only. A placeholder
 * disappears as soon as the field is filled and is not a reliable accessible
 * name, so each field carries a real label marked with this class.
 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}