/**
 * Hughie Devore — Custom Styles
 * Extends theme.json with animations, glass effects, and mobile responsive
 */

/* ==========================================================
   COMPONENT STYLES
   ========================================================== */

/* Glass card effect */
.is-style-glass-card {
	background: rgba(30, 41, 59, 0.6) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(99, 102, 241, 0.15) !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.is-style-glass-card:hover {
	border-color: rgba(99, 102, 241, 0.4) !important;
	box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

/* Terminal style */
.is-style-terminal {
	position: relative;
	background: #0f172a !important;
	border: 1px solid #334155 !important;
	border-radius: 0.75rem !important;
}

.is-style-terminal::before {
	content: "● ● ●";
	display: block;
	padding: 0.5rem 1rem;
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	color: #64748b;
	border-bottom: 1px solid #334155;
}

/* Glow button */
.is-style-glow .wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.is-style-glow .wp-block-button__link:hover {
	box-shadow: 0 0 25px rgba(99, 102, 241, 0.5), 0 0 50px rgba(99, 102, 241, 0.2);
}

/* Tech grid */
.is-style-tech-grid .wp-block-column {
	transition: transform 0.2s ease, border-color 0.3s ease;
}

.is-style-tech-grid .wp-block-column:hover {
	transform: translateY(-2px);
}

/* ==========================================================
   GLOBAL BASE
   ========================================================== */

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* Selection color */
::selection {
	background: rgba(99, 102, 241, 0.3);
	color: #f1f5f9;
}

/* Code block enhancements */
.wp-block-code {
	position: relative;
	overflow-x: auto;
}

.wp-block-code code {
	display: block;
	line-height: 1.7;
	tab-size: 2;
}

/* Fade-in animation for blocks */
.hughie-animate {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.hughie-animate.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Navigation sticky + glass */
.wp-block-template-part[data-area="header"] > .wp-block-group {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(15, 23, 42, 0.9) !important;
}

/* Gradient text utility */
.gradient-text {
	background: linear-gradient(135deg, #6366f1, #22d3ee);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #0f172a;
}

::-webkit-scrollbar-thumb {
	background: #334155;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #475569;
}

/* ==========================================================
   MOBILE RESPONSIVE
   ========================================================== */

/* All small screens (≤ 782px) ------------------------------ */
@media (max-width: 782px) {

	/* Column gaps */
	.wp-block-columns {
		gap: 1.5rem !important;
	}

	/* Allow pagination to wrap */
	.wp-block-query-pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
	}
}

/* Phones (≤ 600px) ----------------------------------------- */
@media (max-width: 600px) {

	/* 1. Tighten header horizontal padding */
	.wp-block-template-part[data-area="header"] > .wp-block-group {
		padding-left:  var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}

	/* 2. Hide "// sr. software engineer" subtitle to prevent header overflow */
	.header-tagline {
		display: none !important;
	}

	/* 3. Hero cover inner group: reduce horizontal padding */
	.wp-block-cover__inner-container > .wp-block-group {
		padding-left:  var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}

	/* 4. Hero tagline chips: allow wrapping on small screens */
	.wp-block-cover .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		gap: 0.5rem 1.25rem !important;
	}

	/* 5. Post card grids → single column on mobile */
	.wp-block-query .wp-block-post-template {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--40) !important;
	}

	/* 6. Footer columns: stack vertically */
	.wp-block-template-part[data-area="footer"] .wp-block-columns {
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--40) !important;
	}

	/* 7. Footer copyright row: center on mobile */
	.wp-block-template-part[data-area="footer"] > .wp-block-group > .wp-block-group:last-child {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 0.25rem;
		text-align: center;
	}

	/* 8. Navigation overlay: comfortable tap targets */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--40) !important;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		padding-top:    0.85rem !important;
		padding-bottom: 0.85rem !important;
		font-size: 1.05rem !important;
		display: block;
	}

	/* 9. Reduce main section padding on mobile */
	main.wp-block-group {
		padding-top:    var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	/* 10. Buttons: full-width stacking on very small screens */
	.wp-block-buttons.is-content-justification-center {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.wp-block-buttons.is-content-justification-center .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons.is-content-justification-center .wp-block-button__link {
		text-align: center;
		justify-content: center;
	}
}

/* Very small phones (≤ 480px) ------------------------------ */
@media (max-width: 480px) {

	/* Interstellar 404: scale down black hole */
	.int-404-scene {
		height: 200px !important;
		border-radius: 0.5rem !important;
	}

	.int-gargantua {
		width: 110px !important;
		height: 110px !important;
	}

	/* TARS log: tighten */
	.int-tars-log {
		padding: 1rem !important;
		font-size: 0.72rem !important;
	}
}