/**
 * Main stylesheet.
 *
 * Provides a small responsive layer for the base IWS Framework theme. Global
 * colours, spacing, typography, and widths are controlled in theme.json.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

:where(.wp-block-heading, p) {
	overflow-wrap: break-word;
}

.iws-skip-link {
	background: var(--wp--preset--color--ink);
	border-radius: 0 0 8px 0;
	color: var(--wp--preset--color--base);
	font-weight: 800;
	left: 0;
	padding: 0.75rem 1rem;
	position: fixed;
	top: 0;
	transform: translateY(-120%);
	transition: transform 160ms ease;
	z-index: 10000;
}

.iws-skip-link:focus {
	color: var(--wp--preset--color--base);
	transform: translateY(0);
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

.iws-site-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.iws-header-inner,
.iws-footer-inner {
	min-height: 76px;
}

.iws-site-main {
	min-height: 60vh;
}

.iws-page-header {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.iws-content-area {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.iws-site-footer {
	border-top: 1px solid var(--wp--preset--color--line);
}

.iws-muted-text {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, white);
}

.wp-block-button__link {
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:focus-visible,
a:focus-visible {
	outline: 3px solid var(--wp--preset--color--signal-gold);
	outline-offset: 3px;
}

.wp-block-post-featured-image img {
	border-radius: 8px;
	object-fit: cover;
}

/**
 * Phase 2 pattern styles.
 */

.iws-section {
	padding-block: clamp(3rem, 7vw, 6.5rem);
}

.iws-section-heading {
	margin-bottom: var(--wp--preset--spacing--50);
}

.iws-eyebrow {
	color: var(--wp--preset--color--digital-teal);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.iws-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
	height: 100%;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.iws-card > :first-child,
.iws-faq-item > :first-child,
.iws-stat > :first-child {
	margin-top: 0;
}

.iws-card > :last-child,
.iws-faq-item > :last-child,
.iws-stat > :last-child {
	margin-bottom: 0;
}

.iws-card-grid,
.iws-process-grid,
.iws-stats-grid,
.iws-split {
	gap: var(--wp--preset--spacing--40);
}

.iws-image-frame img,
.iws-post-card .wp-block-post-featured-image img,
.iws-gallery-grid img {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	object-fit: cover;
	width: 100%;
}

.iws-hero-image img {
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.iws-icon-pill {
	align-items: center;
	background: color-mix(in srgb, var(--wp--preset--color--digital-teal) 12%, white);
	border-radius: 999px;
	color: var(--wp--preset--color--digital-teal);
	display: inline-flex;
	font-weight: 800;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.iws-check-list {
	padding-left: 1.2rem;
}

.iws-check-list li::marker {
	color: var(--wp--preset--color--digital-teal);
}

.iws-faq-grid {
	gap: var(--wp--preset--spacing--30);
}

.iws-faq-item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.1rem 1.25rem;
}

.iws-faq-item summary {
	cursor: pointer;
	font-weight: 800;
}

.iws-faq-item summary:focus-visible,
.iws-contact-form :is(input, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--signal-gold);
	outline-offset: 3px;
}

.iws-quote {
	font-family: var(--wp--preset--font-family--display-serif);
	line-height: 1.45;
}

.iws-contact-form {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.iws-contact-form label {
	display: grid;
	font-weight: 700;
	gap: 0.4rem;
}

.iws-contact-form input,
.iws-contact-form textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font: inherit;
	padding: 0.85rem 0.95rem;
	width: 100%;
}

.iws-contact-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.iws-contact-form button {
	background: var(--wp--preset--color--studio-blue);
	border: 0;
	border-radius: 8px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	padding: 0.85rem 1.1rem;
}

.iws-logo-strip-section {
	padding-block: var(--wp--preset--spacing--50);
}

.iws-logo-strip {
	background: var(--wp--preset--color--cloud);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.iws-logo-row {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.iws-logo-image img {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	margin-inline: auto;
	max-height: 70px;
	object-fit: contain;
	width: min(100%, 180px);
}

.iws-stat {
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	padding-left: var(--wp--preset--spacing--30);
}

.iws-stat h3 {
	color: var(--wp--preset--color--signal-gold);
}

.iws-gallery-grid {
	gap: var(--wp--preset--spacing--30);
}

.iws-gallery-grid .wp-block-image {
	margin: 0;
}

/**
 * Phase 3 premium component styles.
 */

body.iws-sticky-header-enabled .iws-site-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	position: sticky;
	top: 0;
	transition: box-shadow 180ms ease, border-color 180ms ease;
	z-index: 900;
}

body.admin-bar.iws-sticky-header-enabled .iws-site-header {
	top: 32px;
}

body.iws-has-scrolled .iws-site-header {
	border-color: transparent;
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
	body.iws-sticky-header-enabled .iws-site-header {
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

.iws-whatsapp-button,
.iws-back-to-top {
	align-items: center;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
	position: fixed;
	right: clamp(1rem, 3vw, 1.5rem);
	z-index: 950;
}

.iws-whatsapp-button {
	background: #128c7e;
	bottom: 5.25rem;
	color: #fff;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	text-decoration: none;
}

.iws-whatsapp-button:hover {
	background: #075e54;
	color: #fff;
}

.iws-whatsapp-icon {
	display: inline-flex;
}

.iws-back-to-top {
	background: var(--wp--preset--color--ink);
	bottom: 1.25rem;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	height: 3rem;
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity 160ms ease, transform 160ms ease;
	width: 3rem;
}

.iws-back-to-top.iws-is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.iws-back-to-top:focus-visible,
.iws-whatsapp-button:focus-visible,
.iws-slider-button:focus-visible,
.iws-lightbox-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--signal-gold);
	outline-offset: 3px;
}

.iws-faq-accordion .iws-faq-item summary {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.iws-faq-accordion .iws-faq-item summary::after {
	content: "+";
	font-weight: 800;
	margin-left: 1rem;
}

.iws-faq-accordion .iws-faq-item[open] summary::after {
	content: "-";
}

.iws-js .iws-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms ease, transform 520ms ease;
}

.iws-js .iws-reveal.iws-is-visible {
	opacity: 1;
	transform: translateY(0);
}

.iws-slider-controls {
	display: none;
}

.iws-js .iws-slider-ready .iws-slider-controls {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

.iws-js .iws-slider-ready .iws-testimonials-track {
	display: block;
}

.iws-js .iws-slider-ready .iws-testimonials-track > .wp-block-column {
	display: none;
}

.iws-js .iws-slider-ready .iws-testimonials-track > .wp-block-column.iws-active-slide {
	display: block;
}

.iws-slider-button {
	background: var(--wp--preset--color--studio-blue);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	padding: 0.7rem 1rem;
}

.iws-slider-status {
	margin: 0;
}

.iws-google-reviews {
	background: var(--wp--preset--color--cloud);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	margin-top: var(--wp--preset--spacing--60);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.iws-google-reviews-header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.iws-review-rating {
	color: var(--wp--preset--color--studio-blue);
	font-weight: 900;
}

.iws-review-card {
	box-shadow: none;
}

.iws-lightbox-gallery img {
	cursor: zoom-in;
}

.iws-lightbox {
	align-items: center;
	background: rgba(15, 23, 42, 0.88);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	position: fixed;
	z-index: 9999;
}

.iws-lightbox img {
	border-radius: 10px;
	max-height: 86vh;
	object-fit: contain;
	width: auto;
}

.iws-lightbox-close {
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font: inherit;
	font-weight: 900;
	height: 2.75rem;
	position: absolute;
	right: clamp(1rem, 3vw, 2rem);
	top: clamp(1rem, 3vw, 2rem);
	width: 2.75rem;
}

/**
 * Phase 5 component library styles.
 */

.iws-component-grid {
	gap: var(--wp--preset--spacing--30);
}

.iws-mini-card,
.iws-team-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: clamp(1rem, 2.5vw, 1.5rem);
}

.iws-service-card,
.iws-team-premium-card,
.iws-pricing-card {
	position: relative;
}

.iws-dark-proof-card {
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	border-radius: 10px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.iws-feature-row + .iws-feature-row {
	margin-top: var(--wp--preset--spacing--60);
}

.iws-masonry-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iws-masonry-feature {
	grid-column: span 2;
	grid-row: span 2;
}

.iws-cta-minimal-section,
.iws-cta-banner {
	padding-block: var(--wp--preset--spacing--40);
}

.iws-cta-minimal {
	background: var(--wp--preset--color--cloud);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
}

.iws-featured-quote {
	font-family: var(--wp--preset--font-family--display-serif);
	line-height: 1.25;
}

.iws-gallery-masonry {
	columns: 3 16rem;
	column-gap: var(--wp--preset--spacing--30);
}

.iws-gallery-masonry .wp-block-image {
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.iws-before-after-label {
	background: var(--wp--preset--color--ink);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	display: inline-block;
	font-weight: 800;
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0.35rem 0.8rem;
}

.iws-team-card .iws-image-frame img,
.iws-team-premium-card .iws-image-frame img {
	aspect-ratio: 1 / 1;
}

.iws-pricing-grid {
	align-items: stretch;
}

.iws-pricing-featured {
	border-color: var(--wp--preset--color--studio-blue);
	box-shadow: 0 22px 70px rgba(18, 60, 105, 0.14);
}

.iws-price {
	color: var(--wp--preset--color--studio-blue);
	font-weight: 900;
}

.iws-comparison-table {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow-x: auto;
}

.iws-comparison-table table {
	margin: 0;
}

.iws-comparison-table th {
	background: var(--wp--preset--color--cloud);
	text-align: left;
}

.iws-comparison-table th,
.iws-comparison-table td {
	border-color: var(--wp--preset--color--line);
	padding: 1rem;
}

.iws-header-transparent {
	background: transparent;
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--line) 60%, transparent);
}

.iws-header-centered-inner {
	padding-block: var(--wp--preset--spacing--30);
}

.iws-header-centered-logo .wp-block-navigation {
	margin-top: var(--wp--preset--spacing--20);
}

.iws-footer-minimal,
.iws-footer-agency,
.iws-footer-large {
	border-top: 1px solid var(--wp--preset--color--line);
}

.iws-footer-large a {
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.has-display-font-size {
		font-size: 2.35rem !important;
		line-height: 1.08;
	}

	.has-heading-font-size {
		font-size: 1.9rem !important;
	}

	.has-large-font-size {
		font-size: 1.125rem !important;
	}

	.iws-page-header .alignwide,
	.iws-section .alignwide {
		max-width: calc(100vw - 2rem) !important;
		min-width: 0;
		width: 100% !important;
	}

	.iws-page-header .wp-block-group,
	.iws-section .wp-block-group,
	.wp-block-column {
		min-width: 0;
	}

	.iws-page-header :where(.wp-block-heading, p),
	.iws-section :where(.wp-block-heading, p) {
		max-width: calc(100vw - 2rem) !important;
	}

	.iws-header-inner,
	.iws-footer-inner {
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
		min-height: auto;
		padding-block: var(--wp--preset--spacing--30);
	}

	.iws-page-header,
	.iws-content-area {
		padding-block: var(--wp--preset--spacing--60);
	}

	.iws-section {
		padding-block: var(--wp--preset--spacing--60);
	}

	.iws-card {
		padding: var(--wp--preset--spacing--40);
	}

	.iws-logo-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.admin-bar.iws-sticky-header-enabled .iws-site-header {
		top: 46px;
	}

	.iws-whatsapp-text {
		display: none;
	}

	.iws-whatsapp-button {
		height: 3.25rem;
		padding: 0;
		width: 3.25rem;
	}

	.iws-masonry-grid {
		grid-template-columns: 1fr;
	}

	.iws-masonry-feature {
		grid-column: auto;
		grid-row: auto;
	}

	.iws-gallery-masonry {
		columns: 1;
	}
}

@media (max-width: 480px) {
	.has-display-font-size {
		font-size: 1.9rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.iws-js .iws-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}