/*
Theme Name: EastKeda Green
Theme URI: https://www.eastkeda.com/
Author: East Keda Technology
Description: A clean, modern WordPress block theme for East Keda — a technology and software company. Built on a verdant green color system with generous white space, flat design, and institutional confidence. Optimized for corporate credibility, product showcases, and business inquiries.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eastkeda-green
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, wide-blocks, translation-ready
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ---------- Reset & base refinements ---------- */

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

/* Ensure sticky positioning is never broken by overflow ancestors */
:root,
body,
.wp-site-blocks {
	overflow: visible;
}

/* ---------- Sticky header ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Backdrop pseudo for scrolled-state chrome — keeps header "clean"
   so it never becomes a containing block for the mobile nav overlay */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: background 0.4s ease, box-shadow 0.4s ease;
}

body.is-scrolled .wp-site-blocks > header.wp-block-template-part::before {
	background: var(--wp--preset--color--background);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

/* Shrink on scroll */
.site-header {
	transition: padding 0.25s ease;
}

body.is-scrolled .site-header {
	padding-block: var(--wp--preset--spacing--20);
}

/* ---------- Typography polish ---------- */

body {
	font-feature-settings: "liga" 1, "calt" 1;
	letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	letter-spacing: -0.03em;
}

p {
	text-wrap: pretty;
}

/* Paragraph spacing inside content */
.entry-content p + p,
.wp-block-group p + p {
	margin-block-start: 1.15em;
}

/* ---------- Link styles ---------- */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Navigation links — clean, no underline until hover */
.wp-block-navigation a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* Site title link — no underline */
.wp-block-site-title a {
	text-decoration: none;
}

/* ---------- Button styles ---------- */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
	cursor: pointer;
	line-height: 1.4;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--button-text);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

/* ---------- Image treatments ---------- */

.wp-block-image img {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.wp-block-image:hover img {
	transform: scale(1.01);
	box-shadow: 0 8px 30px rgba(5, 46, 22, 0.08);
}

/* Cover block images — no hover scale */
.wp-block-cover .wp-block-image:hover img {
	transform: none;
	box-shadow: none;
}

/* Post featured images */
.wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.wp-block-post-featured-image:hover img {
	transform: scale(1.02);
}

.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 8px;
}

/* Gallery items */
.wp-block-gallery .wp-block-image {
	overflow: hidden;
	border-radius: 8px;
}

/* ---------- Card-like groups ---------- */

.wp-block-group.has-surface-background-color,
.wp-block-group.has-surface-alt-background-color {
	border-radius: 12px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.wp-block-group.has-surface-background-color:hover,
.wp-block-group.has-surface-alt-background-color:hover {
	box-shadow: 0 8px 30px rgba(5, 46, 22, 0.06);
	transform: translateY(-2px);
}

/* ---------- Separator refinement ---------- */

.wp-block-separator {
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	max-width: 120px;
	margin-inline: auto;
}

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* ---------- Quote & pullquote ---------- */

.wp-block-quote {
	font-style: italic;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	display: block;
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-pullquote {
	text-align: center;
}

/* ---------- Code block ---------- */

.wp-block-code code {
	display: block;
	overflow-x: auto;
	line-height: 1.65;
}

/* Inline code */
:where(p, li, td) code {
	background: var(--wp--preset--color--surface);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.875em;
	font-family: var(--wp--preset--font-family--mono);
}

/* ---------- Table ---------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-block-table th {
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	text-align: start;
}

.wp-block-table tr:hover td {
	background: var(--wp--preset--color--surface);
}

/* ---------- Search block ---------- */

.wp-block-search__input {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
	outline: none;
}

.wp-block-search__button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--button-text);
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-hover);
}

/* ---------- Cover block overlay refinement ---------- */

.wp-block-cover {
	overflow: hidden;
}

/* ---------- Columns responsiveness ---------- */

@media (max-width: 781px) {
	.wp-block-columns {
		flex-wrap: wrap;
	}
	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Post template card grid ---------- */

.wp-block-post-template {
	list-style: none;
	padding: 0;
}

/* ---------- Tag / category pills ---------- */

.wp-block-post-terms a {
	text-decoration: none;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary-dark);
	padding: 0.15em 0.6em;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-post-terms a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--button-text);
}

/* ---------- Mobile hamburger overlay ---------- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Selection ---------- */

::selection {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text);
}

/* ---------- Focus visible ---------- */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- Smooth scroll anchor offset ---------- */

:target {
	scroll-margin-top: 100px;
}

/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 0.15;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: '';
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}

/* ---------- Scroll catalog CSS ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* Section reveal on enter view */
	.reveal-on-scroll {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}
	.reveal-on-scroll.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Hero scroll-fade (CSS scroll-driven animation; older browsers no-op) */
	@supports (animation-timeline: view()) {
		.hero-content {
			animation: hero-fade linear;
			animation-timeline: view();
			animation-range: cover 0% cover 60%;
		}
		@keyframes hero-fade {
			from { opacity: 1; transform: translateY(0); }
			to   { opacity: 0; transform: translateY(-40px); }
		}
	}

	/* Scroll progress bar (CSS scroll-driven animation; older browsers no-op) */
	@supports (animation-timeline: scroll()) {
		.scroll-progress {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: var(--wp--preset--color--primary);
			transform-origin: left center;
			transform: scaleX(0);
			z-index: 1000;
			animation: scroll-progress-grow linear;
			animation-timeline: scroll(root);
			pointer-events: none;
		}
		@keyframes scroll-progress-grow {
			from { transform: scaleX(0); }
			to   { transform: scaleX(1); }
		}
	}

	/* Sticky narrative pin (NYT-style scrolling visuals beside pinned text) */
	.narrative-pin > .wp-block-column:first-child {
		position: sticky;
		top: var(--wp--custom--scroll-padding-top, 96px);
		align-self: flex-start;
	}

	/* Hide-on-scroll-down header variant */
	.wp-site-blocks > header.wp-block-template-part {
		transition: transform 0.3s ease;
	}
	body.header-hidden .wp-site-blocks > header.wp-block-template-part {
		transform: translateY(-100%);
	}

	/* Active-anchor underline (landing-page nav) */
	.wp-block-navigation a {
		position: relative;
	}
	.wp-block-navigation a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -4px;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s ease;
	}
	.wp-block-navigation a.is-active::after {
		transform: scaleX(1);
	}
}

/* ---------- Editor optimizations ---------- */

/* Larger content editor area for comfortable Word paste */
.editor-styles-wrapper .wp-block-post-content {
	min-height: 600px;
}

.editor-styles-wrapper {
	max-width: 960px;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--primary);
}

/* Comfortable editing area for classic editor fallback */
.wp-editor-area {
	min-height: 600px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 16px;
	line-height: 1.7;
}

/* ---------- Dark background section helpers ---------- */

.has-dark-bg-background-color {
	color: var(--wp--preset--color--dark-bg-text);
}

.has-dark-bg-background-color a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary);
}

.has-dark-bg-background-color a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--border);
}

/* ---------- Navigation current-menu-item ---------- */

.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

/* ---------- Pagination ---------- */

.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	min-height: 2.5em;
	padding: 0.25em 0.5em;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--button-text);
}

.wp-block-query-pagination-numbers .page-numbers:not(.current):hover {
	background: var(--wp--preset--color--surface-alt);
}

/* ---------- Footer refinement ---------- */

footer.wp-block-template-part a {
	text-decoration: none;
	transition: color 0.2s ease;
}

footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Media-text block ---------- */

.wp-block-media-text {
	overflow: hidden;
	border-radius: 12px;
}

/* ---------- Details / accordion ---------- */

.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	transition: border-color 0.2s ease;
}

.wp-block-details[open] {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-weight: 400;
	font-size: 1.25em;
	color: var(--wp--preset--color--muted);
	transition: transform 0.3s ease;
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

/* ---------- Utility: visually hidden ---------- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* ---------- Print ---------- */

@media print {
	.wp-site-blocks > header.wp-block-template-part,
	footer.wp-block-template-part {
		position: static;
	}

	.wp-block-button__link {
		border: 1px solid;
		background: none !important;
		color: inherit !important;
	}

	.reveal-on-scroll {
		opacity: 1 !important;
		transform: none !important;
	}
}