/* =============================================================================
   SITE FOOTER
   Band 1: contact  - white title strip + accent-red block (intro + form)
   Band 2: main     - subtle-grey block (company info + three menu columns)
   ============================================================================= */

.site-footer {
	margin-top: auto;
}

/* -- Band 1: contact -------------------------------------------------------- */

/* The title sits on the page background; the red block starts right below it,
   so the type reads as breaking the edge of the red. */
.site-footer__contact-head {
	padding-top: var(--section-y-sm);
	background:  var(--color-bg-primary);
}

.site-footer__contact-title {
	margin: 0;
	font-size:      var(--text-display);
	font-weight:    var(--weight-black);
	line-height:    1;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color:          var(--color-accent);
}

.site-footer__contact-body {
	padding-top:    58px;
	padding-bottom: 58px;
	background:     var(--color-accent);
	color:          var(--color-bg-primary);
}

.site-footer__contact-grid {
	display:               grid;
	grid-template-columns: 1fr 1.55fr;
	gap:                   90px;
	align-items:           start;
}

.site-footer__contact-intro h3 {
	margin:         0 0 10px;
	font-size:      var(--text-h5);
	font-weight:    var(--weight-black);
	line-height:    var(--leading-tight);
	letter-spacing: .01em;
	text-transform: uppercase;
	color:          inherit;
}

.site-footer__contact-intro p {
	font-size:   var(--text-body-small);
	line-height: var(--leading-normal);
	color:       inherit;
}

/* -- Contact form ----------------------------------------------------------- */
/* Element selectors (not just classes) so a real form plugin dropped in here
   inherits the styling without needing its own markup hooks. */

/* The form body is a flex column with --field-gap between its children
   (global.css). These fields used to carry margins as well, which added
   up to double the intended spacing; the gap is the only source now. */
.site-footer__form-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--field-gap);
}

/* The field labels float inside their controls, which are white cards on
   the burgundy band, so they read against white like everywhere else. */
.site-footer__form .field-group__label {
	color: var(--color-text-placeholder);
}

/* Footer fields are .field (global.css) on a dark band, so they drop the
   border and sit flat on the panel. Height, padding and line box all come
   from the primitive -- overriding line-height here would pull the label
   off centre. */
.site-footer__form .field {
	border: none;
}

.site-footer__form .field::placeholder {
	color: var(--color-text-secondary);
}

/* Placeholder shell only: fields are disabled but must not look inert. */
.site-footer__form :disabled {
	opacity: 1;
	cursor:  default;
}

.site-footer__form :focus-visible {
	outline:        2px solid var(--color-bg-primary);
	outline-offset: 2px;
}

.site-footer__form-check {
	display:     flex;
	align-items: center;
	gap:         10px;
	min-height:  44px;
	margin:      var(--space-2xs) 0 var(--space-s);
}

.site-footer__form-check input {
	flex-shrink:  0;
	width:        20px;
	height:       20px;
	margin:       0;
	accent-color: var(--color-text-primary);
}

.site-footer__form-check label {
	margin:      0;
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
}

.site-footer__submit {
	display:       block;
	width:         100%;
	min-height:    44px;
	padding:       var(--space-s) 20px;
	font-family:   inherit;
	font-size:     var(--text-body-small);
	font-weight:   var(--weight-bold);
	line-height:   1;
	color:         var(--color-bg-primary);
	background:    var(--color-text-primary);
	border:        none;
	border-radius: var(--radius-s);
	cursor:        pointer;
	transition:    background var(--duration-fast) ease;
}

.site-footer__submit:hover {
	background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-bg-primary));
}

/* -- Band 2: info + menus --------------------------------------------------- */

.site-footer__main {
	padding-top:    52px;
	padding-bottom: 44px;
	background:     var(--color-bg-subtle);
	color:          var(--color-text-primary);
}

.site-footer__main-grid {
	display:               grid;
	grid-template-columns: 1fr auto;
	gap:                   60px;
	align-items:           start;
}

/* -- Info column ------------------------------------------------------------ */

.site-footer__logo {
	display:       block;
	width:         192px;
	margin-bottom: var(--space-m);
}

.site-footer__logo img {
	width:  100%;
	height: auto;
}

.site-footer__address {
	margin:      0 0 var(--space-m);
	font-size:   var(--text-body-small);
	font-style:  normal;
	font-weight: var(--weight-bold);
	line-height: var(--leading-slim);
	color:       var(--color-text-primary);
}

.site-footer__phone {
	display:         inline-block;
	margin-bottom:   var(--space-m);
	font-size:       var(--text-body-small);
	font-weight:     var(--weight-bold);
	color:           var(--color-text-primary);
	text-decoration: none;
}

.site-footer__phone:hover {
	color: var(--color-accent);
}

.site-footer__socials {
	display:       flex;
	gap:           10px;
	margin-bottom: var(--space-l);
}

.site-footer__socials a {
	display: block;
	color:   var(--color-text-primary);
}

.site-footer__socials a:hover {
	color: var(--color-accent);
}

.site-footer__certifications {
	width:         283px;
	height:        auto;
	margin-bottom: 20px;
}

.site-footer__copyright {
	font-size:   var(--text-body-small);
	font-weight: var(--weight-regular);
	line-height: var(--leading-slim);
	color:       var(--color-text-primary);
}

/* -- Menu columns ----------------------------------------------------------- */

.site-footer__menus {
	display:               grid;
	grid-template-columns: repeat(3, auto);
	gap:                   var(--space-2xl);
}

.site-footer__menu-heading {
	margin:      0 0 var(--space-xs);
	font-size:   var(--text-h6);
	font-weight: var(--weight-black);
	line-height: var(--leading-slim);
	color:       var(--color-text-primary);
}

.site-footer__menu-list {
	margin:     0;
	padding:    0;
	list-style: none;
}

.site-footer__menu-list li + li {
	margin-top: var(--space-3xs);
}

.site-footer__menu-list a {
	display:         block;
	font-size:       var(--text-body-small);
	font-weight:     var(--weight-regular);
	line-height:     var(--leading-normal);
	color:           var(--color-text-secondary);
	text-decoration: none;
	white-space:     nowrap;
}

.site-footer__menu-list a:hover {
	color: var(--color-accent);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media ( max-width: 1200px ) {

	.site-footer__main-grid {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}

	.site-footer__menus {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-xl);
	}

	.site-footer__menu-list a {
		white-space: normal;
	}

}

@media ( max-width: 1024px ) {

	.site-footer__contact-title {
		font-size: var(--text-display-md);
	}

	.site-footer__contact-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

}

@media ( max-width: 600px ) {

	.site-footer__contact-title {
		font-size: var(--text-display-sm);
	}

	.site-footer__contact-body {
		padding-top:    36px;
		padding-bottom: 36px;
	}

	.site-footer__form-row {
		grid-template-columns: 1fr;
	}

	.site-footer__form-row + .site-footer__form-row,
	.site-footer__form-row + .site-footer__field {
		margin-top: var(--space-m);
	}

	.site-footer__form-row .site-footer__field + .site-footer__field {
		margin-top: var(--space-m);
	}

	.site-footer__main {
		padding-top: var(--section-y-md);
		padding-bottom: 36px;
	}

	.site-footer__menus {
		grid-template-columns: 1fr 1fr;
		gap: 28px var(--space-l);
	}

}