/*
Theme Name: ShenWeb Services
Theme URI: https://shenweb.services
Author: ShenWeb Services
Description: A dark, developer-inspired WordPress block theme for ShenWeb Services — a digital agency specializing in web design, social media management, and vibe code. Built on an obsidian canvas with electric mint and warm gold accents, cinematic typography via Clash Display and Epilogue, and a code-terminal aesthetic.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shenweb-services
Tags: full-site-editing, block-themes, dark, portfolio, one-column, custom-colors, custom-fonts, featured-images
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ==========================================================================
   Foundation
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

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

:root,
body,
.wp-site-blocks {
	overflow: visible;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Sticky Header
   ========================================================================== */

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

/* Backdrop pseudo — visually paints the scrolled-state chrome without
   creating a containing block that breaks the mobile nav overlay. */
.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, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

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

/* ==========================================================================
   Typography polish
   ========================================================================== */

/* Headings: tighten tracking on display sizes for that cinematic punch */
h1, .wp-block-post-title {
	letter-spacing: -0.03em;
}

h2 {
	letter-spacing: -0.025em;
}

h3, h4 {
	letter-spacing: -0.015em;
}

/* Fine-tune body paragraph rhythm */
p {
	max-width: 70ch;
}

/* Ensure full-width sections don't constrain paragraph width */
.alignfull p,
.alignwide p {
	max-width: none;
}

/* Small / caption text */
small,
figcaption,
.wp-element-caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.04em;
}

/* Strong emphasis in body text gets a slight weight bump */
strong, b {
	font-weight: 600;
}

/* ==========================================================================
   Link styles
   ========================================================================== */

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

a:hover {
	text-decoration-color: var(--wp--preset--color--accent-secondary);
}

/* Remove underlines from nav links */
.wp-block-navigation a {
	text-decoration: none;
}

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

/* ==========================================================================
   Button styles
   ========================================================================== */

/* Primary filled buttons — the terminal-style CTA from the design ref */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
}

.wp-block-button__link:hover {
	box-shadow: 0 0 24px rgba(212, 168, 67, 0.15);
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline variant — wired to accent border on dark surface */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
}

/* ==========================================================================
   Image treatments
   ========================================================================== */

/* All images: sharp edges, slight desaturation for the moody palette */
.wp-block-image img,
.wp-block-cover__image-background {
	filter: saturate(0.85) contrast(1.05);
	transition: filter 0.5s ease;
}

.wp-block-image:hover img {
	filter: saturate(1) contrast(1.1);
}

/* Gallery items get a subtle border for panel separation */
.wp-block-gallery .wp-block-image {
	border: 1px solid var(--wp--preset--color--border);
}

/* Cover block images — ensure cinematic dark overlay reads */
.wp-block-cover {
	overflow: hidden;
}

/* ==========================================================================
   Card / surface treatments
   ========================================================================== */

/* Groups styled as surface cards */
.wp-block-group.has-surface-background-color {
	border: 1px solid var(--wp--preset--color--border);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group.has-surface-background-color:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 30px rgba(212, 168, 67, 0.06);
}

/* Columns used as card grids */
.wp-block-column {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   Code & preformatted blocks — terminal aesthetic
   ========================================================================== */

.wp-block-code code {
	display: block;
	white-space: pre-wrap;
	word-break: break-all;
	line-height: 1.8;
}

pre.wp-block-preformatted {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40);
	line-height: 1.8;
	overflow-x: auto;
}

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

/* ==========================================================================
   Quote / pullquote polish
   ========================================================================== */

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-pullquote {
	border-top: 3px solid var(--wp--preset--color--accent);
	border-bottom: 3px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--50) 0;
}

.wp-block-pullquote blockquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.3;
}

/* ==========================================================================
   Separator polish
   ========================================================================== */

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

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

.wp-block-separator.is-style-dots::before {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Navigation site title — logo prefix accent
   ========================================================================== */

.wp-block-site-title a {
	text-decoration: none;
	transition: color 0.25s ease;
}

/* ==========================================================================
   Form elements (search, etc.)
   ========================================================================== */

.wp-block-search__input {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	transition: border-color 0.3s ease;
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.15);
}

.wp-block-search__button {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

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

/* ==========================================================================
   Selection & focus
   ========================================================================== */

::selection {
	background: rgba(212, 168, 67, 0.25);
	color: var(--wp--preset--color--text);
}

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

/* ==========================================================================
   Logo in header
   ========================================================================== */

.site-header .wp-block-site-logo img {
	max-height: 48px;
	width: auto;
}

body.is-scrolled .site-header .wp-block-site-logo img {
	max-height: 40px;
}

/* ==========================================================================
   Mobile hamburger overlay
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--background) !important;
}

.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-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	letter-spacing: -0.02em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Close button */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--text) !important;
}

/* Open button (hamburger) */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--text) !important;
}

/* ==========================================================================
   Scrollbar styling (Webkit + Firefox)
   ========================================================================== */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--wp--preset--color--background);
}

::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--muted);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border) var(--wp--preset--color--background);
}

/* ==========================================================================
   Glow effect utility — for accent-highlighted elements
   ========================================================================== */

.has-accent-color {
	text-shadow: 0 0 30px rgba(212, 168, 67, 0.3);
}

/* ==========================================================================
   Table styles
   ========================================================================== */

.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--30) var(--wp--preset--spacing--40);
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.wp-block-table tr:nth-child(even) td {
	background: rgba(20, 26, 34, 0.5);
}

/* ==========================================================================
   Details / accordion block
   ========================================================================== */

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

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

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

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

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--accent);
	transition: transform 0.3s ease;
}

/* ==========================================================================
   Crimson accent gradient for hero sections
   ========================================================================== */

.hero-crimson-gradient {
	background: radial-gradient(ellipse at 50% 80%, rgba(139, 26, 26, 0.25) 0%, transparent 60%);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

/* ==========================================================================
   List polish
   ========================================================================== */

ul:not(.wp-block-navigation__container):not(.wp-block-page-list) {
	list-style: none;
	padding-left: 1.5em;
}

ul:not(.wp-block-navigation__container):not(.wp-block-page-list) > li {
	position: relative;
}

ul:not(.wp-block-navigation__container):not(.wp-block-page-list) > li::before {
	content: "";
	position: absolute;
	left: -1.5em;
	top: 0.65em;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--accent);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(212, 168, 67, 0.3);
}

ol {
	padding-left: 1.5em;
}

ol li::marker {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Post meta / taxonomy tags
   ========================================================================== */

.wp-block-post-terms a {
	text-decoration: none;
	transition: color 0.25s ease;
}

.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent-secondary);
}

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

.wp-block-media-text {
	border: 1px solid var(--wp--preset--color--border);
}

.wp-block-media-text .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   Header invert on scroll (variant 2 — palette-specific, stays in style.css)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.site-header {
		transition: padding 0.3s ease;
	}
}

/* ==========================================================================
   Loop layout utilities
   ========================================================================== */

/* 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--accent);
	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--accent);
	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;
	}
}

/* ==========================================================================
   Grid overlay decorative pattern (from design reference)
   ========================================================================== */

.hero-grid-overlay {
	background-image:
		linear-gradient(rgba(245, 240, 232, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245, 240, 232, 0.02) 1px, transparent 1px);
	background-size: 60px 60px;
	background-position: center center;
	pointer-events: none;
}

/* ==========================================================================
   Terminal-style CTA button (from design reference)
   ========================================================================== */

.cta-terminal {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: linear-gradient(90deg, rgba(212, 168, 67, 0.08) 0%, rgba(212, 168, 67, 0) 100%);
	border: 1px solid rgba(212, 168, 67, 0.2);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 1.25rem 2.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
}

.cta-terminal:hover {
	background: linear-gradient(90deg, rgba(212, 168, 67, 0.15) 0%, rgba(212, 168, 67, 0.02) 100%);
	border-color: rgba(212, 168, 67, 0.4);
	box-shadow: 0 0 20px rgba(212, 168, 67, 0.1);
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Status bar (from design reference)
   ========================================================================== */

.status-bar {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
}

.status-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(212, 168, 67, 0.4);
	animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Dot separator utility (from design reference subhead) */
.dot-separator {
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(212, 168, 67, 0.4);
}

/* ==========================================================================
   Outline button variant (header CTA from design reference)
   ========================================================================== */

.btn-outline-header {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	transition: all 0.3s ease;
}

.btn-outline-header:hover {
	border-color: var(--wp--preset--color--accent-secondary);
	color: var(--wp--preset--color--accent-secondary);
}

/* ==========================================================================
   Cover block vignette effect
   ========================================================================== */

.wp-block-cover.has-vignette::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, transparent 20%, var(--wp--preset--color--background) 90%);
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover .wp-block-cover__inner-container {
	z-index: 2;
}

/* ==========================================================================
   Monospace label utility
   ========================================================================== */

.mono-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 781px) {
	h1 {
		letter-spacing: -0.02em;
	}

	.wp-block-media-text {
		border: none;
	}

	.wp-block-media-text .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0;
	}

	.wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 480px) {
	.cta-terminal {
		padding: 1rem 1.5rem;
		font-size: var(--wp--preset--font-size--small);
	}
}