/* ==========================================================================
   sections.css — layout, header, footer, and per-section styles
   Depends on: tokens.css, base.css (must be loaded first)
   ========================================================================== */


/* === skip link === */

.skip-link {
	position:   absolute;
	top:        -100%;
	left:       var(--space-2);
	z-index:    9999;
	padding:    var(--space-1) var(--space-2);
	background: var(--onog-red);
	color:      var(--white);
	font-weight: 600;
	border-radius: var(--radius);
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-2);
}


/* === layout — shared === */

.container {
	width:      100%;
	max-width:  1200px;
	margin:     0 auto;
	padding:    0 var(--space-4);
}

@media (max-width: 600px) {
	.container {
		padding: 0 var(--space-3);
	}
}

/* Section base (light service pages at L4; the home page overrides this in
   world.css with its own dark full-viewport rhythm). */
.section {
	min-height:     100svh;
	padding-top:    clamp(var(--space-6), 10vw, var(--space-7));
	padding-bottom: clamp(var(--space-6), 10vw, var(--space-7));
	display:        flex;
	align-items:    center;
}

.section .container {
	width: 100%;
}


/* === hero === */

.section--hero {
	background-color: var(--ink);
	color:            var(--white);
}

.section--hero h1 {
	color:        var(--white);
	max-width:    780px;
	margin-bottom: var(--space-3);
}

.hero__subline {
	color:      var(--slate-200);
	font-size:  1.125rem;
	max-width:  560px;
	margin-bottom: var(--space-5);
}

.hero__actions {
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-2);
}

@media (max-width: 480px) {
	.hero__actions {
		flex-direction: column;
	}

	.hero__actions .btn {
		width: 100%;
		justify-content: center;
	}
}


/* === services === */

.section--services {
	background-color: var(--white);
}

.section--services h2 {
	margin-bottom: var(--space-5);
	color:         var(--deep-navy);
}

.services-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-4);
}

@media (max-width: 900px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
}

.service-card {
	padding:       var(--space-4);
	background:    var(--slate-50);
	border-radius: var(--radius);
	border:        1px solid var(--slate-200);
}

.service-card h3 {
	color:         var(--deep-navy);
	margin-bottom: var(--space-2);
}

.service-card p {
	color:      var(--slate-700);
	font-size:  0.9375rem;
	line-height: var(--leading-normal);
}


/* === equipment === */

.section--equipment {
	background-color: var(--slate-50);
}

.section--equipment h2 {
	margin-bottom: var(--space-3);
	color:         var(--deep-navy);
}

.equipment__intro {
	color:         var(--slate-700);
	max-width:     640px;
	margin-bottom: var(--space-5);
}

.brand-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-3);
}

@media (max-width: 768px) {
	.brand-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.brand-slot {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          80px;
	background:      var(--slate-200);
	border-radius:   var(--radius);
	color:           var(--slate-400);
	font-family:     var(--font-body);
	font-weight:     600;
	font-size:       0.875rem;
	text-transform:  uppercase;
	letter-spacing:  1px;
}


/* === about === */

.section--about {
	background-color: var(--deep-navy);
	color:            var(--white);
}

.section--about h2 {
	color:         var(--white);
	margin-bottom: var(--space-4);
}

.section--about p {
	color:         var(--slate-200);
	max-width:     680px;
	margin-bottom: var(--space-3);
	line-height:   var(--leading-normal);
}

.about-stats {
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-5);
	margin-top: var(--space-5);
}

.stat {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
}

.stat__value {
	font-family:    var(--font-display);
	font-size:      3rem;
	line-height:    1;
	color:          var(--onog-red);
	letter-spacing: var(--tracking-display);
}

.stat__label {
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--slate-400);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* === contact === */

.section--contact {
	background-color: var(--white);
	align-items:      flex-start;
}

.section--contact h2 {
	color:         var(--deep-navy);
	margin-bottom: var(--space-5);
}

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap:     var(--space-6);
	align-items: start;
}

@media (max-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

/* Form notice */
.form-notice {
	font-size:     0.875rem;
	color:         var(--slate-700);
	background:    var(--slate-50);
	border:        1px solid var(--slate-200);
	border-radius: var(--radius);
	padding:       var(--space-2) var(--space-3);
	margin-bottom: var(--space-4);
}

/* Form rows */
.form-row {
	margin-bottom: var(--space-3);
}

.form-row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     var(--space-3);
}

@media (max-width: 600px) {
	.form-row--half {
		grid-template-columns: 1fr;
	}
}

.form-field {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

.form-field label {
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--slate-700);
}

.form-field label span {
	color: var(--onog-red);
}

.form-field input,
.form-field textarea,
.form-field select {
	width:         100%;
	min-height:    2.75rem; /* 44px touch target */
	padding:       0.625rem var(--space-2);
	border:        1.5px solid var(--slate-200);
	border-radius: var(--radius);
	background:    var(--white);
	color:         var(--ink);
	font-family:   var(--font-body);
	font-size:     var(--text-body);
	transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	outline:      none;
	border-color: var(--marine-blue);
	box-shadow:   0 0 0 3px rgba(27, 77, 140, 0.15);
}

.form-field textarea {
	resize:     vertical;
	min-height: 120px;
}

.form-field input[type="file"] {
	padding:    0.5rem var(--space-2);
	cursor:     pointer;
}

/* Contact details sidebar */
.contact-details {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
	padding-top:    var(--space-2);
}

.contact-detail {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
}

.contact-detail strong {
	font-size:      0.75rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color:          var(--slate-400);
}

.contact-detail a,
.contact-detail span {
	color:           var(--ink);
	font-size:       0.9375rem;
	text-decoration: none;
}

.contact-detail a:hover {
	color: var(--onog-red);
}


/* === footer === */

.site-footer {
	background:  var(--ink);
	color:       var(--slate-200);
	padding:     var(--space-6) 0 var(--space-4);
}

.site-footer__inner {
	display:     grid;
	grid-template-columns: 1fr auto auto;
	gap:         var(--space-5);
	align-items: start;
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--slate-700);
}

@media (max-width: 768px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

.wordmark--footer .wordmark__onog {
	color: var(--onog-red);
}

.wordmark--footer .wordmark__sub {
	color: var(--slate-200);
}

.site-footer__tagline {
	color:      var(--slate-400);
	font-size:  0.875rem;
	margin-top: var(--space-1);
}

.site-footer__contact {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
}

.site-footer__phone {
	color:           var(--white);
	font-size:       1.125rem;
	font-weight:     700;
	text-decoration: none;
}

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

.site-footer__contact span {
	color:     var(--slate-400);
	font-size: 0.875rem;
}

.site-footer__nav ul {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-1);
}

.site-footer__nav a {
	color:           var(--slate-200);
	text-decoration: none;
	font-size:       0.875rem;
}

.site-footer__nav a:hover {
	color: var(--onog-red);
}

.site-footer__copy {
	font-size: 0.8125rem;
	color:     var(--slate-400);
	text-align: center;
}


/* === contact form — submission result notices === */

.form-result {
	padding:       var(--space-2) var(--space-3);
	border-radius: var(--radius);
	font-family:   var(--font-body);
	font-size:     0.9375rem;
	font-weight:   600;
	margin-bottom: var(--space-3);
	line-height:   1.5;
}

.form-result.is-ok {
	background: rgba(91, 124, 168, 0.15);  /* steel-blue tint */
	border:     1px solid var(--steel-blue);
	color:      var(--steel-blue);
}

.form-result.is-err {
	background: rgba(230, 20, 30, 0.10);   /* onog-red tint */
	border:     1px solid var(--onog-red);
	color:      var(--onog-red);
}