/*
Theme Name: OPTEL
Theme URI: https://optel.se
Author: OPTEL
Description: Custom block theme for the OPTEL marketing website - a specialist for smaller, hands-on fiber jobs in Bollebygd, Boras, Harryda and the greater Gothenburg area.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: optel
*/

/* Accessibility: hide visually, keep available to assistive tech */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text {
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	background: #ffffff;
	border-radius: 0 0 4px 0;
	clip: auto !important;
	clip-path: none;
	color: #1c1f22;
	display: block;
	font-weight: 600;
	height: auto;
	left: 0;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 0;
	width: auto;
}

/* Image placeholder areas - to be replaced with real OPTEL photography */
.optel-image-placeholder {
	align-items: center;
	background-color: #eeece8;
	border: 1px dashed #9a958c;
	display: flex;
	justify-content: center;
	min-height: clamp(220px, 28vw, 360px);
	width: 100%;
}

.optel-image-placeholder p {
	color: #6b665e;
	font-size: 0.875rem;
	margin: 0;
}

/* Section rhythm: consistent, fluid vertical spacing across homepage sections */
.optel-section {
	padding-top: clamp(3rem, 2.1rem + 3vw, 5.5rem);
	padding-bottom: clamp(3rem, 2.1rem + 3vw, 5.5rem);
}

/* Non-homepage pages (Tjänster/Om oss/Kontakt): breathing room around content */
body:not(.home) #main-content {
	padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.wp-block-post-title {
	margin-bottom: 1rem;
}

/* Heading/body/column rhythm */
.wp-block-heading {
	margin-bottom: 0.6em;
}

.wp-block-columns {
	column-gap: clamp(2rem, 1.4rem + 2vw, 3.5rem);
	row-gap: 2.5rem;
}

.wp-block-buttons {
	margin-top: 1.75rem;
	row-gap: 1rem;
}

/* Contact / quote request form */
.optel-contact-form-wrap {
	margin: 2rem 0 clamp(3rem, 2rem + 3vw, 5rem);
}

.optel-contact-form {
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--accent);
	padding: clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
}

.optel-form-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.optel-form-field {
	margin-bottom: 1.25rem;
}

.optel-form-field label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.optel-form-field input,
.optel-form-field select,
.optel-form-field textarea {
	background: #ffffff;
	border: 1px solid #77736c;
	border-radius: 2px;
	box-sizing: border-box;
	color: var(--wp--preset--color--foreground);
	font: inherit;
	line-height: 1.45;
	padding: 0.7rem 0.75rem;
	width: 100%;
}

.optel-form-field textarea {
	resize: vertical;
}

.optel-form-field input:focus,
.optel-form-field select:focus,
.optel-form-field textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 3px solid rgba(200, 86, 45, 0.22);
	outline-offset: 1px;
}

.optel-form-help,
.optel-form-required {
	color: #5f5a53;
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}

.optel-field-error {
	color: #9b2c20;
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0.35rem 0 0;
}

.optel-form-check {
	align-items: flex-start;
	display: flex;
	gap: 0.65rem;
	margin: 0.25rem 0 1.25rem;
}

.optel-form-check input {
	height: 1.2rem;
	margin-top: 0.25rem;
	width: 1.2rem;
}

.optel-contact-form button {
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	margin-top: 1rem;
}

.optel-contact-form button:hover {
	filter: brightness(0.9);
}

.optel-contact-form button:focus-visible {
	outline: 3px solid var(--wp--preset--color--foreground);
	outline-offset: 3px;
}

.optel-form-notice {
	border-left: 4px solid;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
}

.optel-form-notice p,
.optel-form-notice ul {
	margin-bottom: 0;
}

.optel-form-notice--success {
	background: #edf6ed;
	border-color: #287a38;
}

.optel-form-notice--error {
	background: #fff0ed;
	border-color: #9b2c20;
}

.optel-honeypot {
	left: -10000px;
	position: absolute;
	top: auto;
}

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