/* ============================================================
   SWISS MAÇON — Additional styles (header / footer / icons)
   Loaded via functions.php (assets/css/custom.css)
   ============================================================ */

/* ---------- Header: padding of both bars (replaces theme.json's core/group default) ---------- */

.swiss-company-topbar {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	padding-right: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--40);
}

.wp-block-group .swiss-company-topbar__item,
.wp-block-group.swiss-company-topbar__inner {
	padding-top: 0 !important;
	padding-right: 2px;
	padding-bottom: 0 !important;
	padding-left: 5px;
}

.swiss-company-nav-row {
	margin-top: 0;
	padding-top: 0;
	padding-right: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--gainsboro);
}

/* ---------- Header: contact bar ---------- */

.swiss-company-topbar .swiss-company-topbar__inner {
	justify-content: space-between !important;
	gap: 0 !important;
	row-gap: 0.5rem !important;
	max-width: var(--wp--style--global--content-size, 1200px) !important;
	margin-inline: auto !important;
	width: 100%;
}

.swiss-company-topbar__right {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.swiss-company-topbar__item.swiss-company-topbar__item {
	gap: 0.5rem;
	align-items: center;
	font-size: 0.85rem;
	font-weight: 300;
}

.swiss-company-topbar__item .swiss-company-icon {
	color: var(--wp--preset--color--red);
}

.swiss-company-topbar__divider {
	display: inline-block !important;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.4);
	margin: 0 1.25rem !important;
	flex-shrink: 0;
}

.swiss-company-topbar__link {
	color: inherit;
	text-decoration: none;
}

.swiss-company-topbar__link:hover {
	color: var(--wp--preset--color--red);
}

/* ---------- Inline icons (SVG) ---------- */

.swiss-company-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.swiss-company-icon svg {
	display: block;
}

/* ---------- Header CTA button ("Demander un devis") ---------- */

.swiss-company-cta-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 500;
	text-transform: uppercase;
	padding-top: 0.675rem;
	padding-bottom: 0.50625rem;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
}

/* ---------- Keeps the logo, nav, and button from being squeezed ---------- */

.wp-block-site-logo {
	flex-shrink: 0;
}

.wp-block-site-logo img {
	width: 122px;
	height: auto;
}

.swiss-company-cta-button {
	flex-shrink: 0;
}

/* Overrides the global core/group default padding (theme.json), which
   this plain group would otherwise inherit on top of .swiss-company-nav-row's
   own padding. */
.site-header__row {
	padding-top: 0;
	padding-bottom: 0;
}

.wp-block-navigation {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
}

.wp-block-navigation .wp-block-navigation__container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-navigation-item__content {
	text-decoration: none;
	color: inherit;
}

/* Header main menu only */
.main-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ---------- Mobile main menu (hamburger button of the swiss-company/navigation block) ---------- */

.swiss-nav__toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	align-items: center;
	justify-content: center;
}

.swiss-nav__toggle-icon {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.swiss-nav__toggle-icon::before,
.swiss-nav__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.swiss-nav__toggle-icon::before {
	top: -7px;
}

.swiss-nav__toggle-icon::after {
	top: 7px;
}

@media (max-width: 600px) {
	.swiss-nav__toggle {
		display: inline-flex;
	}

	/* Positioned relative to .site-header (already position:sticky, so a
	   valid reference) rather than .swiss-nav itself, which is only as wide
	   as the hamburger button in the grid — otherwise the panel stays
	   narrow and its content overflows on top of the rest of the page. */
	.swiss-nav__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #ffffff;
		background: var(--wp--preset--color--white);
		border-bottom: 1px solid var(--wp--preset--color--gainsboro);
		padding: 1rem var(--wp--preset--spacing--40);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		z-index: 1000;
	}

	.swiss-nav.is-open .swiss-nav__panel {
		display: block;
	}

	.swiss-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* ---------- Footer ---------- */

.swiss-company-footer {
	padding-top: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--40);
}

.swiss-company-footer__body {
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.swiss-company-footer__list {
	gap: 0.65rem;
	padding-top: 0;
}

.swiss-company-footer .wp-block-separator {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--20);
	background-color: #2A2A2A;
	color: #2A2A2A;
}

.swiss-company-footer__heading {
	position: relative;
	padding-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.swiss-company-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--red);
}

.swiss-company-footer__item {
	gap: 0.75rem;
	align-items: center;
}

.swiss-company-footer__link,
.swiss-company-footer__contact-list p {
	font-size: 0.9rem;
}

/* Footer Navigation menus (real Navigation blocks linked to a menu):
   same look as the old hardcoded lists. */
.swiss-company-footer__list .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.65rem !important;
}

.swiss-company-footer__list .wp-block-navigation-item__content {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0 !important;
	font-size: 0.95rem;
	color: inherit !important;
	text-decoration: none !important;
}

.swiss-company-footer__list .wp-block-navigation-item__content::before {
	content: ">";
	color: var(--wp--preset--color--red);
}

.swiss-company-footer__list .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--red) !important;
}

.swiss-company-footer__link a,
.wp-block-group p a {
	color: inherit;
	text-decoration: none;
}

.swiss-company-footer__link a:hover,
.swiss-company-footer__item a:hover {
	color: var(--wp--preset--color--red);
}

.swiss-company-footer__address {
	max-width: 160px;
}

.swiss-company-footer__brand p {
	max-width: 220px;
}

/* Footer logo: a bit of space above, less below */
.swiss-company-footer__logo {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.swiss-company-footer__logo-img {
	width: 150px;
	height: auto;
	display: block;
}

/* Address / contact lists: tightened up to get closer to the height of the
   other columns (Navigation, Nos services) */
.swiss-company-footer__address-list,
.swiss-company-footer__contact-list {
	padding: 0 !important;
	gap: 0.4rem !important;
}

/* Footer body */
.swiss-company-footer__body {
	padding-top: 30px;
	font-size: 0.9em;
}
.swiss-company-footer__heading {
	padding-top: 30px;
}
.swiss-company-footer__item {
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}

/* Bottom bar (copyright / legal links): copyright on the left, links group
   on the right (space-between), text size matches the dark top bar's own
   text — as its own independent value, not shared with it. */
.swiss-company-footer__bottom {
	row-gap: 0.5rem !important;
	font-size: 0.9rem;
}

/* Fixed icon column so the text always starts at the same x position,
   regardless of any given icon's own size/shape. */
.swiss-company-footer__item {
	display: grid !important;
	grid-template-columns: 30px 1fr !important;
	column-gap: 0.75rem !important;
}

/* Footer icons: same color, same size, slightly thicker stroke */
.swiss-company-footer__item .swiss-company-icon {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	color: var(--wp--preset--color--red);
}

.swiss-company-footer__item .swiss-company-icon svg {
	width: 22px;
	height: 22px;
	stroke-width: 2.5;
}

/* ">" bullets for the Navigation / Nos services lists, in red */
.swiss-company-footer__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.swiss-company-footer__link a::before {
	content: ">";
	color: var(--wp--preset--color--red);
}

/* ---------- Navigation: active item ---------- */

.wp-block-navigation-item {
	position: relative;
}

.wp-block-navigation-item .wp-block-navigation-item__content {
	padding-bottom: 0.4rem;
	border-bottom: 2px solid transparent;
}

.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--red);
}

/* ---------- Sticky header on scroll ---------- */

/* Neutralizes the wrapper WordPress adds around the template part: without
   this, it's exactly the header's height and leaves no room for sticky to
   have anything to "stick" within. */
.site-header-wrapper {
	display: contents;
}

.site-header {
	position: sticky;
	top: 0;
	padding-top: 0 !important;
	z-index: 999;
}

/* ---------- CTA button: short label (mobile) hidden by default ---------- */

.site-header__cta-label-short {
	display: none;
}

/* ---------- Header row layout: logo / menu / CTA, at every screen size ---------- */
/* Grid (not flex) so the middle column is truly centered on the row's full
   width, regardless of how wide the logo and CTA happen to be. */

.site-header__row.site-header__row {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	grid-template-rows: auto !important;
	align-items: center !important;
	max-width: var(--wp--style--global--content-size, 1200px) !important;
	margin-inline: auto !important;
	width: 100% !important;
}

/* Explicit grid-row:1 on every item — belt and braces against any column
   collision (e.g. from cascade/order quirks between the base and mobile
   rules below) silently pushing one item onto an unwanted 2nd implicit row. */

.site-header__row .wp-block-site-logo {
	grid-column: 1 !important;
	grid-row: 1 !important;
	justify-self: start !important;
}

.site-header__row .wp-block-navigation {
	grid-column: 2 !important;
	grid-row: 1 !important;
	justify-self: center !important;
}

.site-header__row .site-header__cta {
	grid-column: 3 !important;
	grid-row: 1 !important;
	justify-self: end !important;
}

/* ---------- Responsive: mobile ---------- */

@media (max-width: 600px) {

	/* The contact bar isn't shown on mobile */
	.swiss-company-topbar {
		display: none;
	}

	/* Swap logo and menu: hamburger (left) / logo (center) / CTA (right) */
	.site-header__row .wp-block-navigation {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}

	.site-header__row .wp-block-site-logo {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: center !important;
	}

	.wp-block-site-logo img {
		width: 100px;
	}

	/* The button shows "Devis" instead of "Demander un devis" */
	.site-header__cta-label-full {
		display: none;
	}

	.site-header__cta-label-short {
		display: inline;
	}

	.swiss-company-cta-button .wp-block-button__link {
		padding: 0.6rem 1rem;
	}
}

/* ---------- Mobile footer: only logo, addresses, and contact, all centered ---------- */

@media (max-width: 600px) {
	.swiss-company-footer__body {
		flex-direction: column !important;
		align-items: center;
		text-align: center;
	}

	.swiss-company-footer__col-nav,
	.swiss-company-footer__col-services {
		display: none;
	}

	.swiss-company-footer__col-contact .swiss-company-footer__heading {
		display: none;
	}

	.swiss-company-footer__brand,
	.swiss-company-footer__col-contact {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Becoming full-width takes the brand column out of reach of the parent's
	   align-items:center (which only centers direct flex children) — its own
	   logo/paragraph need centering directly instead. */
	.swiss-company-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.swiss-company-footer__address-list,
	.swiss-company-footer__contact-list {
		align-items: center;
	}

	/* Centering the icon+text row as one unit shifts the text off-center
	   compared to plain text (description, copyright) with no icon next to
	   it. The icon and text are siblings (not nested), so the positioning
	   anchor has to be their shared parent, .swiss-company-footer__item —
	   made inline-block so it shrinks to the text's width alone (the
	   absolutely-positioned icon doesn't count towards that width), then
	   the existing align-items:center above centers it correctly. */
	.swiss-company-footer__item {
		position: relative;
		display: inline-block !important;
	}

	.swiss-company-footer__item .swiss-company-icon {
		position: absolute;
		left: -42px;
		top: 50%;
		transform: translateY(-50%);
	}

	.swiss-company-footer__bottom {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center;
		gap: 0.5rem !important;
	}
}

/* ---------- Before / After block ---------- */

.swiss-before-after {
	position: relative;
	overflow: hidden;
	line-height: 0;
	touch-action: pan-y;
}

.swiss-before-after__image {
	position: relative;
}

.swiss-before-after__image img {
	display: block;
	width: 100%;
	height: auto;
}

.swiss-before-after__image--before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.swiss-before-after__badge {
	position: absolute;
	bottom: 0.75rem;
	padding: 0.25rem 0.75rem;
	background: rgba(17, 17, 17, 0.75);
	color: var(--wp--preset--color--white);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.swiss-before-after__badge--before {
	left: 0.75rem;
}

.swiss-before-after__badge--after {
	right: 0.75rem;
}

.swiss-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--wp--preset--color--white);
	border: none;
	cursor: ew-resize;
	transform: translateX(-50%);
	padding: 0;
}

.swiss-before-after__handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.swiss-before-after__handle::after {
	content: "\2194";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--wp--preset--color--red);
	font-size: 1.1rem;
	font-weight: 700;
}

/* ---------- Full-width blocks in page content ---------- */
/* `width: 100%` only fills the parent (which stays ~1200px inside the
   constrained post-content wrapper) — this instead bleeds to the true
   viewport width regardless of how wide the parent happens to be. */
.wp-block-group.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.small-description {
	display: block;
	margin-top: 0.35rem;
	margin-bottom: 1.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--near-black);
}

/* ---------- Heading styles ---------- */
.eyebrow {
    font-family: var(--font-heading);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 600;
}

/* ---------- Separator block: "Aligné à gauche" style (see register_block_style in functions.php) ---------- */
/* !important needed to beat the block editor's own default centering rule
   for .wp-block-separator inside its iframe (same specificity, loaded after
   ours) — front-end already won without it, editor didn't. */
.wp-block-separator.is-style-left {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ---------- Tabs block (swiss-company-tabs) ---------- */
/* The active tab is tracked live via aria-selected (set by the block's own
   interactivity script), not a class — no JS needed here. */
.swiss-company-tabs .wp-block-tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.swiss-company-tabs .wp-block-tab-list button[role="tab"] {
	border: 1px solid var(--wp--preset--color--gainsboro);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	padding: 0.6rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.swiss-company-tabs .wp-block-tab-list button[role="tab"][aria-selected="true"] {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

/* ---------- "swiss-services" columns: hover background + heading link color ---------- */
/* Targets whichever element actually carries the class — sometimes it's
   only the individual wp:column, sometimes it's also on the parent
   wp:columns row. .wp-block-column.swiss-services (same element, both
   classes) matches either case; a descendant selector wouldn't, since a
   column that has the class directly on itself isn't a *descendant* of
   that class. Padding is applied unconditionally (not just on :hover) so
   the content doesn't shift size when the background appears/disappears. */

.wp-block-column.swiss-services {
	padding: 1.5rem;
	transition: background-color 0.2s ease;
}

.wp-block-column.swiss-services:hover {
	background-color: var(--wp--preset--color--gainsboro);
}

/* Only h3 titles that are themselves links — a plain, non-link h3 is left alone. */
.wp-block-column.swiss-services h3:has(a),
.wp-block-column.swiss-services h3 a {
	color: var(--wp--preset--color--black) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.wp-block-column.swiss-services:hover h3:has(a),
.wp-block-column.swiss-services:hover h3 a {
	color: var(--wp--preset--color--red) !important;
}

/* ---------- H4: uppercase, no space after — and no space before a paragraph that follows one ---------- */

h4 {
	text-transform: uppercase;
	margin-bottom: 0 !important;
}

h4 + p {
	margin-block-start: 0 !important;
}