/* ==========================================================================
   custom.css — site-wide overrides migrated out of the WP Customizer
   ("Additional CSS", post_id 333) into the theme so they are version-controlled.

   Loaded globally after app.min.css (the Customizer CSS was also global).
   STEP 1: faithful 1:1 copy of the Customizer rules — visual result unchanged.
   (Section reordering and the empty-clients hide are slated to move into the
    template in step 2; until then they stay here to preserve the exact layout.)
   ========================================================================== */

/* --- Homepage section spacing --- */
main.homepage > section.cta        { margin-bottom: 0 !important;   padding-top: 30px !important; padding-bottom: 60px !important; }
main.homepage > section.tiles      { margin-bottom: 0 !important;   padding-top: 40px !important; padding-bottom: 40px !important; }
main.homepage > section.quotation  { margin-bottom: 0 !important;   padding-top: 40px !important; padding-bottom: 40px !important; }
main.homepage > section.animations { margin-bottom: 0 !important;   padding-top: 0 !important;    padding-bottom: 0 !important; }
main.homepage > section.features   { margin-bottom: 0 !important;   padding-top: 40px !important; padding-bottom: 40px !important; }
main.homepage > section.form       { margin-bottom: 0 !important;   padding-top: 0 !important;    padding-bottom: 0 !important; padding-right: 0 !important; }
main.homepage > section.clients    { margin-bottom: 0 !important;   padding-top: 0 !important;    padding-bottom: 0 !important; }

/* (Empty-clients section is now omitted in template-homepage.php, so no hide rule needed.) */

/* --- Contact form section (black card on the right) --- */
section.form .form-text { display: none !important; }

section.form { background: transparent !important; }

section.form .container {
	display: grid !important;
	grid-template-columns: 1fr 2fr !important;
	gap: 1.5rem !important;
	background: transparent !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
}

section.form .form-form {
	grid-column: 2 / 3 !important;
	background-color: #000 !important;
	border-radius: 1.25rem !important;
	padding: 3.125rem !important;
	color: #fff !important;
}

section.form .form-form h3,
section.form .form-form h4,
section.form .form-form a {
	color: #fff !important;
	text-align: right !important;
}

/* (Section order is now hard-coded in template-homepage.php — no flex `order` hacks.) */

/* --- Footer (site-wide) --- */
.footer .site-logo {
	margin-top: -90px !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	position: relative !important;
	z-index: 2 !important;
}

.footer {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.footer .footer-top,
.footer .footer-bottom,
.footer .column-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Desktop (>=992px): fixed vertical main menu pinned to the right.
   Mobile is intentionally left untouched (hamburger as-is).
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.header #header-main-menu-container {
		position: fixed !important;
		top: 50% !important;
		right: clamp(10px, 2vw, 28px) !important;
		left: auto !important;
		transform: translateY(-50%) !important;
		z-index: 1100 !important;
		width: auto !important;
		background: rgba(255, 255, 255, .92);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border: 0 !important;
		border-radius: 18px;
		box-shadow: 0 8px 32px rgba(15, 27, 20, .12) !important;
		padding: .8rem 1rem !important;
	}

	.header #header-main-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: .25rem !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.header #header-main-menu > li { width: 100% !important; margin: 0 !important; }

	.header #header-main-menu > li > a {
		display: block !important;
		padding: .55rem .85rem !important;
		border-radius: 10px !important;
		white-space: nowrap !important;
		text-align: right !important;
		font-weight: 600;
		transition: background .2s, color .2s;
	}

	/* Hover/active uses the DESTINATION page's theme colour (--mc set per item
	   in PHP via nav_menu_link_attributes), so each item lights up in its own colour. */
	.header #header-main-menu > li > a:hover,
	.header #header-main-menu > li.current-menu-item > a,
	.header #header-main-menu > li.current-menu-ancestor > a {
		background: var(--mc, #D7FFE9) !important;
		color: #0f2a1b !important;
	}
}