/**
 * Aaron Ward — main stylesheet.
 * Pixel-perfect replica of the legacy Neve/Otter-based design.
 *
 * Colors and typography are driven by theme.json custom properties
 * (var(--wp--preset--color--*) / var(--wp--preset--font-family--heebo))
 * so this file stays light and most tweaks happen in theme.json.
 */

@layer reset, base, layout, blocks, components, utilities;

/* ============================================================
 * RESET
 * ============================================================ */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
	body { margin: 0; }
	img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
	button { font: inherit; cursor: pointer; }
	button:focus-visible,
	a:focus-visible,
	input:focus-visible,
	textarea:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}
	.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 {
		position: absolute;
		top: -100px;
		left: 0;
		background: var(--wp--preset--color--primary);
		color: #fff;
		padding: 0.75rem 1rem;
		z-index: 9999;
		text-decoration: none;
	}
	.skip-link:focus { top: 0; }
}

/* ============================================================
 * BASE
 * ============================================================ */
@layer base {
	body {
		font-family: var(--wp--preset--font-family--heebo);
		font-size: 16px;
		line-height: 1.6;
		color: var(--wp--preset--color--text);
		background: var(--wp--preset--color--background);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--wp--preset--font-family--heebo);
		font-weight: 600;
		text-transform: uppercase;
		line-height: 1.3;
		letter-spacing: 0;
		margin: 0 0 0.75em;
	}
	h1 { font-size: clamp(34px, 5vw, 52px); }
	h2 { font-size: clamp(26px, 3vw, 34px); color: var(--wp--preset--color--primary); }
	h3 { font-size: clamp(20px, 2vw, 24px); }
	h4 { font-size: clamp(17px, 1.5vw, 19px); }
	h5 { font-size: 16px; }
	h6 { font-size: 14px; }

	p { margin: 0 0 1em; }

	a {
		color: var(--wp--preset--color--accent);
		text-decoration: none;
		transition: color 0.2s ease;
	}
	a:hover { color: var(--wp--preset--color--secondary); text-decoration: underline; }

	hr {
		border: 0;
		height: 1px;
		background: currentColor;
		opacity: 0.2;
		margin: 2rem 0;
	}
}

/* ============================================================
 * LAYOUT
 * ============================================================ */
@layer layout {
	.site-content {
		display: block;
		min-height: 60vh;
	}

	.wrap {
		max-width: 1020px;
		margin: 0 auto;
		padding: 3rem 1rem;
	}
	.wrap--single,
	.wrap--search { max-width: 760px; }

	.alignfull, .alignwide { clear: both; }
	.has-global-padding { padding-left: 1rem; padding-right: 1rem; }

	/* -------- Site header -------- */
	.site-header {
		background: var(--wp--preset--color--primary);
		color: #fff;
		position: relative;
		z-index: 50;
	}
	.site-header-inner {
		max-width: 1200px;
		margin: 0 auto;
		padding: 1rem 1.25rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
	.site-branding { display: flex; align-items: center; }
	.site-branding a, .site-branding .site-title {
		color: #fff;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		letter-spacing: 0.05em;
	}
	.custom-logo, .site-logo img {
		max-width: 40px;
		height: auto;
	}
	@media (min-width: 576px) {
		.custom-logo, .site-logo img { max-width: 55px; }
	}
	@media (min-width: 992px) {
		.custom-logo, .site-logo img { max-width: 75px; }
	}

	/* -------- Primary nav -------- */
	.primary-nav {
		display: flex;
	}
	.primary-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 1.75rem;
	}
	.primary-menu a {
		color: #fff;
		text-decoration: none;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: 0.04em;
		padding: 0.5rem 0;
		display: inline-block;
		transition: color 0.2s ease;
	}
	.primary-menu a:hover,
	.primary-menu .current-menu-item > a,
	.primary-menu .current-menu-ancestor > a {
		color: var(--wp--preset--color--accent);
		text-decoration: none;
	}
	.primary-menu .sub-menu {
		display: none;
		position: absolute;
		background: var(--wp--preset--color--primary);
		padding: 0.5rem 0;
		min-width: 200px;
		list-style: none;
		margin: 0;
	}
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu { display: block; }
	.primary-menu .sub-menu a { padding: 0.5rem 1rem; display: block; }

	.sub-menu-toggle {
		background: none;
		border: 0;
		color: inherit;
		padding: 0 0.25rem;
		font-size: 1rem;
	}

	/* -------- Mobile toggle -------- */
	.menu-toggle {
		display: none;
		background: transparent;
		border: 0;
		color: #fff;
		padding: 0.5rem;
	}
	.menu-toggle .aw-icon-close { display: none; }
	.menu-toggle[aria-expanded="true"] .aw-icon-menu { display: none; }
	.menu-toggle[aria-expanded="true"] .aw-icon-close { display: inline-block; }

	@media (max-width: 959px) {
		.menu-toggle { display: inline-flex; align-items: center; }
		.site-nav-wrap {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: var(--wp--preset--color--primary);
			padding: 1rem 1.25rem;
			box-shadow: 0 4px 12px rgba(0,0,0,0.2);
		}
		.site-nav-wrap.is-open { display: block; }
		.primary-menu {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
		}
		.primary-menu .sub-menu {
			position: static;
			background: rgba(255,255,255,0.05);
			padding: 0.5rem 1rem;
			margin-top: 0.5rem;
		}
	}

	/* -------- Site footer -------- */
	.site-footer {
		background: var(--wp--preset--color--secondary);
		color: #fff;
		margin-top: 4rem;
	}
	.site-footer a { color: #fff; }
	.site-footer a:hover { color: #fff; text-decoration: underline; }

	.site-footer-inner {
		max-width: 1200px;
		margin: 0 auto;
		padding: 3rem 1.25rem 2rem;
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	@media (min-width: 768px) {
		.site-footer-inner {
			grid-template-columns: 1fr 1fr 1fr;
			text-align: left;
		}
		.site-footer-social { text-align: right; }
	}

	.site-footer-bottom {
		border-top: 1px solid rgba(255,255,255,0.2);
		padding: 1rem 1.25rem;
		text-align: center;
		font-size: 14px;
	}
	.site-copyright { margin: 0; }

	.footer-menu,
	.social-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}
	@media (min-width: 768px) {
		.site-footer-social .social-menu { justify-content: flex-end; }
	}
	.footer-menu a,
	.social-menu a {
		color: #fff;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}
}

/* ============================================================
 * BLOCKS (Gutenberg core overrides)
 * ============================================================ */
@layer blocks {
	/* Buttons — the original's orange w/ blue hover, 3px radius.
	 * theme.json provides the core styles; this handles edge cases. */
	.wp-block-button__link,
	.wp-element-button {
		transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}

	/* Separator used in work-heading pattern */
	.wp-block-separator.is-style-secondary-bar {
		border: 0;
		background-color: var(--wp--preset--color--secondary) !important;
		height: 4px !important;
		max-width: 60px;
		margin: 1rem auto 2.5rem;
		opacity: 1;
	}

	/* Grayscale hover for images and featured images */
	.is-style-grayscale-hover img,
	.is-style-grayscale-hover .wp-block-post-featured-image__link img {
		filter: grayscale(100%);
		transition: filter 0.4s ease, transform 0.4s ease;
	}
	.is-style-grayscale-hover:hover img,
	.is-style-grayscale-hover a:hover img {
		filter: grayscale(0);
	}

	/* Post query / portfolio grid layout */
	.wp-block-query .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat(1, minmax(0,1fr));
		gap: 1.5rem;
		list-style: none;
		padding: 0;
		margin: 0 0 2rem;
	}
	@media (min-width: 576px) {
		.wp-block-query .wp-block-post-template.is-flex-container.columns-3,
		.wp-block-query .wp-block-post-template.columns-3 {
			grid-template-columns: repeat(2, minmax(0,1fr));
		}
	}
	@media (min-width: 960px) {
		.wp-block-query .wp-block-post-template.is-flex-container.columns-3,
		.wp-block-query .wp-block-post-template.columns-3 {
			grid-template-columns: repeat(3, minmax(0,1fr));
		}
	}

	.wp-block-post-template > li {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.wp-block-post-featured-image {
		aspect-ratio: 3/2;
		overflow: hidden;
	}
	.wp-block-post-featured-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.wp-block-post-title {
		text-align: center;
		margin: 1rem 0 0;
		font-weight: 600;
		text-transform: uppercase;
	}
	.wp-block-post-title a {
		color: var(--wp--preset--color--text);
		text-decoration: none;
	}
	.wp-block-post-title a:hover {
		color: var(--wp--preset--color--accent);
	}

	/* Cover block: force parallax on desktop, flat on touch */
	.wp-block-cover.has-parallax {
		background-attachment: fixed;
	}
	@media (hover: none), (max-width: 768px) {
		.wp-block-cover.has-parallax {
			background-attachment: scroll;
		}
	}

	/* Social links in footer */
	.wp-block-social-links.is-style-logos-only { gap: 0.75rem; }
	.wp-block-social-link a { color: #fff; }
}

/* ============================================================
 * COMPONENTS
 * ============================================================ */
@layer components {

	/* -------- Hero slider (vanilla JS) -------- */
	.aw-slider {
		position: relative;
		overflow: hidden;
	}
	.aw-slider .aw-slide {
		transition: opacity 0.6s ease-in-out;
	}
	.aw-slider.aw-slider--js .aw-slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		pointer-events: none;
	}
	.aw-slider.aw-slider--js .aw-slide.is-active {
		position: relative;
		opacity: 1;
		pointer-events: auto;
	}
	.aw-slider.aw-slider--js {
		min-height: 570px;
	}
	.aw-slider-controls {
		position: absolute;
		inset: auto 0 1.25rem 0;
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		z-index: 5;
	}
	.aw-slider-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: rgba(255,255,255,0.5);
		border: 0;
		padding: 0;
		cursor: pointer;
		transition: background 0.2s ease, transform 0.2s ease;
	}
	.aw-slider-dot:hover { background: rgba(255,255,255,0.8); }
	.aw-slider-dot.is-active {
		background: var(--wp--preset--color--accent);
		transform: scale(1.2);
	}
	.aw-slider-prev,
	.aw-slider-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0,0,0,0.4);
		color: #fff;
		border: 0;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 5;
		font-size: 1.5rem;
	}
	.aw-slider-prev:hover,
	.aw-slider-next:hover { background: var(--wp--preset--color--accent); }
	.aw-slider-prev { left: 1rem; }
	.aw-slider-next { right: 1rem; }

	@media (prefers-reduced-motion: reduce) {
		.aw-slider .aw-slide { transition: none; }
	}

	/* -------- Portfolio archive -------- */
	.wrap--portfolio-archive { max-width: 1200px; }
	.archive-header { text-align: center; margin-bottom: 2.5rem; }
	.archive-title {
		color: var(--wp--preset--color--primary);
		font-size: clamp(26px, 3vw, 34px);
		margin-bottom: 1rem;
	}
	.archive-divider {
		border: 0;
		height: 4px;
		width: 60px;
		background: var(--wp--preset--color--secondary);
		margin: 0 auto;
		opacity: 1;
	}

	.portfolio-grid {
		display: grid;
		grid-template-columns: repeat(1, minmax(0,1fr));
		gap: 1.5rem;
	}
	@media (min-width: 576px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
	@media (min-width: 960px) { .portfolio-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

	.portfolio-card {
		position: relative;
		background: #fff;
		overflow: hidden;
	}
	.portfolio-card-link {
		display: block;
		color: inherit;
		text-decoration: none;
	}
	.portfolio-card-media {
		margin: 0;
		aspect-ratio: 3/2;
		overflow: hidden;
	}
	.portfolio-card-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(100%);
		transition: filter 0.4s ease, transform 0.4s ease;
	}
	.portfolio-card:hover .portfolio-card-media img {
		filter: grayscale(0);
		transform: scale(1.02);
	}
	.portfolio-card-title {
		text-align: center;
		margin: 1rem 0 0;
		font-size: clamp(17px, 1.5vw, 19px);
		color: var(--wp--preset--color--text);
		text-transform: uppercase;
		font-weight: 600;
	}
	.portfolio-card:hover .portfolio-card-title {
		color: var(--wp--preset--color--accent);
	}

	/* -------- Portfolio single -------- */
	.entry-portfolio .entry-content { margin: 0; }
	.portfolio-footer {
		max-width: 1200px;
		margin: 3rem auto 0;
		padding: 2rem 1rem;
		border-top: 1px solid rgba(0,0,0,0.1);
	}
	.portfolio-nav {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
	}
	.portfolio-nav-link {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		color: var(--wp--preset--color--text);
		text-decoration: none;
	}
	.portfolio-nav-link:hover .portfolio-nav-title { color: var(--wp--preset--color--accent); }
	.portfolio-nav-label {
		font-size: 12px;
		text-transform: uppercase;
		color: var(--wp--preset--color--muted);
		letter-spacing: 0.05em;
	}
	.portfolio-nav-title {
		font-weight: 600;
		text-transform: uppercase;
		font-size: 16px;
		transition: color 0.2s ease;
	}
	.portfolio-nav-next { text-align: right; }

	/* -------- Blog card -------- */
	.post-grid {
		display: grid;
		grid-template-columns: repeat(1, minmax(0,1fr));
		gap: 2rem;
	}
	@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
	@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

	.post-card-media { display: block; overflow: hidden; aspect-ratio: 3/2; }
	.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
	.post-card-title { margin: 1rem 0 0.5rem; font-size: clamp(17px, 1.5vw, 20px); }
	.post-card-title a { color: var(--wp--preset--color--text); }
	.post-card-title a:hover { color: var(--wp--preset--color--accent); }
	.post-card-excerpt { font-size: 15px; color: var(--wp--preset--color--muted); }

	/* -------- Icons -------- */
	.aw-icon { flex-shrink: 0; vertical-align: middle; }
	.aw-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

	/* -------- Skills section (replaces Otter Font Awesome icons) -------- */
	.aw-skill {
		text-align: center;
		padding: 1.5rem 1rem;
	}
	.aw-skill-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;
	}
	.aw-skill-icon svg {
		width: 64px;
		height: 64px;
		color: var(--wp--preset--color--secondary);
	}
	.aw-skill h3 {
		font-size: clamp(17px, 1.5vw, 20px);
		color: var(--wp--preset--color--primary);
		margin: 0 0 0.75rem;
	}
	.aw-skill p {
		font-size: 15px;
		color: var(--wp--preset--color--text);
		margin: 0;
		max-width: 28ch;
		margin-inline: auto;
	}

	/* -------- Hero quote inside parallax cover -------- */
	.aw-hero-quote {
		font-size: clamp(22px, 2.5vw, 32px);
		font-weight: 600;
		line-height: 1.4;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		max-width: 20ch;
		margin: 0 auto;
	}

	/* -------- Home-specific hero slider (single-frame core/cover) -------- */
	.aw-hero-slide {
		min-height: 80vh;
	}
	.aw-hero-slide .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
	}
	.aw-hero-slide h1,
	.aw-hero-slide h2 {
		color: #fff;
		font-size: clamp(36px, 6vw, 72px);
		line-height: 1.05;
		margin: 0;
		text-align: center;
		max-width: 18ch;
	}
	.aw-hero-slide p {
		color: #fff;
		font-size: clamp(16px, 1.5vw, 20px);
		margin: 0;
		text-align: center;
	}

	/* -------- Search form -------- */
	.search-form {
		display: flex;
		gap: 0.5rem;
		max-width: 480px;
		margin: 1rem 0;
	}
	.search-field {
		flex: 1;
		padding: 0.6rem 0.9rem;
		border: 1px solid rgba(0,0,0,0.15);
		border-radius: 3px;
		font-family: inherit;
		font-size: 16px;
	}
	.search-field:focus {
		border-color: var(--wp--preset--color--accent);
		outline: none;
	}

	/* -------- Pagination -------- */
	.wp-block-query-pagination,
	.navigation.pagination {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		margin: 2rem 0;
	}
	.page-numbers {
		padding: 0.5rem 0.9rem;
		border: 1px solid rgba(0,0,0,0.15);
		border-radius: 3px;
		text-decoration: none;
		color: var(--wp--preset--color--text);
	}
	.page-numbers.current,
	.page-numbers:hover {
		background: var(--wp--preset--color--accent);
		color: #fff;
		border-color: var(--wp--preset--color--accent);
	}
}

/* ============================================================
 * UTILITIES
 * ============================================================ */
@layer utilities {
	.has-primary-color   { color: var(--wp--preset--color--primary) !important; }
	.has-accent-color    { color: var(--wp--preset--color--accent) !important; }
	.has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
	.has-text-align-center { text-align: center; }
	.has-text-align-right  { text-align: right; }
	.has-text-align-left   { text-align: left; }
}