/* ==========================================================================
   CGT OBS — custom main footer (3 columns)
   Colours / max-width driven by inline CSS variables from the template.
   ========================================================================== */

.cgtobs-main-footer {
	margin-top: 50px;
	background: var(--cgtobs-footer-bg, #ffffff);
	color: var(--cgtobs-footer-text, #111111);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cgtobs-main-footer *,
.cgtobs-main-footer *::before,
.cgtobs-main-footer *::after {
	box-sizing: border-box;
}

/* Column tracks come from the template as a custom property (one `<n>fr` per
   configured block), so the mobile override below can still win. */
.cgtobs-main-footer__inner {
	/* The Customizer value is the width of the *content*, like Astra's own
	   setting — so the 24px gutters are added on top. Without the `+ 48px` the
	   footer capped its whole box at that number and rendered 48px narrower
	   than the header, which is the mismatch you could see between them. */
	max-width: calc(var(--cgtobs-footer-max-width, 1400px) + 48px);
	margin: 0 auto;
	padding: 28px 24px;
	display: grid;
	grid-template-columns: var(--cgtobs-footer-cols, 1.1fr 1fr 1.2fr);
	gap: 36px;
	align-items: stretch;
}

/* Vertical separators between columns (desktop). `align-items: stretch` above
   makes every column as tall as the tallest one, so the rules line up. */
.cgtobs-main-footer__column + .cgtobs-main-footer__column {
	border-left: 1px solid rgba(0, 0, 0, 0.12);
	padding-left: 36px;
}

/* Stacked rows inside a column: the last one absorbs the leftover height so a
   short column still draws its full-height separator. */
.cgtobs-main-footer__column > *:last-child {
	margin-bottom: 0;
}

.cgtobs-main-footer__logo {
	display: block;
	width: 100px;
	height: auto;
	margin-bottom: 12px;
	border-radius: 6px;
}

/* Scoped to the footer (0-2-0) so it outranks Elementor's global
   `.elementor-kit-… h2` (0-1-1). That kit rule only loads on Elementor-built
   pages, which is why this column heading rendered at 42px there and 16.8px on
   the PHP templates — the same footer, two different sizes.

   `font-size` / `line-height` are the fallback for when Astra is unavailable:
   cgtobs_footer_title_typography_css() overrides them inline with the H2 values
   from Personnaliser → Typographie, at the same specificity but later in the
   cascade, so the heading matches every other H2 on the site. */
.cgtobs-main-footer .cgtobs-main-footer__title {
	margin: 0 0 8px;
	/* Full H2 from the Customizer scale. The 0-2-0 selector is what keeps this
	   winning over Elementor's `.elementor-kit-… h2` (0-1-1), so the footer is
	   the same size on Elementor-built and PHP-rendered pages. */
	font-size: var(--cgtobs-h2);
	line-height: 1.3;
	color: var(--cgtobs-footer-text, #111111);
	/* No font-family / font-weight: this is a real <h2>, so both inherit from the
	   Customizer's heading settings and stay in step with every other heading. */
}

.cgtobs-main-footer__desc {
	margin: 0 0 16px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: #4f4f4f;
}

/* Free HTML rows inherit the footer's type scale. */
.cgtobs-main-footer__html {
	font-size: 0.92rem;
	line-height: 1.6;
}

.cgtobs-main-footer__html > *:first-child {
	margin-top: 0;
}

.cgtobs-main-footer__html > *:last-child {
	margin-bottom: 0;
}

.cgtobs-main-footer__html a {
	color: var(--cgtobs-footer-accent, #d71920);
}

/* --- Social icons: round accent buttons --- */
.cgtobs-main-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cgtobs-main-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cgtobs-social-color, var(--cgtobs-footer-accent, #d71920));
	color: #ffffff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* The glyph stays white in every state: `main.css` sets a global
   `a:hover { color: … }` that outranks the base rule above, so the colour has
   to be restated here. */
.cgtobs-main-footer__social:hover,
.cgtobs-main-footer__social:focus,
.cgtobs-main-footer__social:active {
	color: #ffffff;
}

/* Darken with an inset overlay rather than `filter: brightness()`, which would
   dim the icon along with the circle. */
.cgtobs-main-footer__social:hover {
	box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.cgtobs-main-footer__social svg {
	width: 18px;
	height: 18px;
	display: block;
}

.cgtobs-main-footer__social i {
	font-size: 17px;
	line-height: 1;
}

/* --- Contact rows: accent icons --- */
.cgtobs-main-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.cgtobs-main-footer__contact-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.cgtobs-main-footer__contact-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
	color: var(--cgtobs-footer-accent, #d71920);
}

.cgtobs-main-footer__contact-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.cgtobs-main-footer__contact-icon i {
	font-size: 16px;
	line-height: 1.4;
	width: 18px;
	text-align: center;
}

.cgtobs-main-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.cgtobs-main-footer__contact a:hover {
	color: var(--cgtobs-footer-accent, #d71920);
	text-decoration: underline;
}

/* --- Newsletter form --- */
.cgtobs-main-footer__newsletter-form {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	max-width: 420px;
}

.cgtobs-main-footer__newsletter-form input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	font: inherit;
	font-size: 0.92rem;
	color: var(--cgtobs-footer-text, #111111);
	background: #ffffff;
}

.cgtobs-main-footer__newsletter-form button {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--cgtobs-footer-accent, #d71920);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.cgtobs-main-footer__newsletter-form button:hover {
	background: #b51218;
}

/* --- Stacked rows -------------------------------------------------------
   A column can now hold several rows in any order, so every row type needs a
   bottom margin unless it is the last one. `:not(:last-child)` also outranks
   the `margin: 0` resets above, whatever the source order. */
.cgtobs-main-footer__socials:not(:last-child),
.cgtobs-main-footer__contact:not(:last-child),
.cgtobs-main-footer__shortcode:not(:last-child),
.cgtobs-main-footer__html:not(:last-child),
.cgtobs-main-footer__newsletter-shortcode:not(:last-child),
.cgtobs-main-footer__newsletter-form:not(:last-child) {
	margin-bottom: 18px;
}

/* --- Mobile: stack columns, separators become top borders --- */
@media (max-width: 768px) {
	.cgtobs-main-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 18px;
	}

	.cgtobs-main-footer__column + .cgtobs-main-footer__column {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		padding-top: 24px;
	}

	.cgtobs-main-footer__newsletter-form {
		flex-direction: column;
		max-width: none;
	}

	.cgtobs-main-footer__newsletter-form input,
	.cgtobs-main-footer__newsletter-form button {
		width: 100%;
	}
}