/* ==========================================================================
   Sofverse — WordPress additions on top of the compiled design system (app.css)
   ========================================================================== */

/* ---------- Reveal animations (replaces framer-motion initial/whileInView) ---------- */
.js [data-reveal] {
	opacity: 0;
	transition: opacity .6s cubic-bezier(.25, .1, .25, 1), transform .6s cubic-bezier(.25, .1, .25, 1);
}
.js [data-reveal="up"] { transform: translateY(30px); }
.js [data-reveal="up-sm"] { transform: translateY(20px); }
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="scale"] { transform: scale(.95); }
.js [data-reveal="scale-sm"] { transform: scale(.8); }
.js [data-reveal].is-revealed { opacity: 1; }
.js [data-reveal]:not([data-reveal="fade"]).is-revealed { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.sof-scroll-dot, .animate-pulse-slow { animation: none !important; }
}

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sof-skip-link {
	position: fixed; top: -100px; left: 1rem; z-index: 100;
	background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
	padding: .75rem 1.25rem; border-radius: 9999px; font-weight: 500;
	transition: top .2s;
}
.sof-skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.sof-header { animation: sof-header-in .6s cubic-bezier(.25, .1, .25, 1) both; }
@keyframes sof-header-in { from { transform: translateY(-100px); } to { transform: none; } }
body.admin-bar .sof-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sof-header { top: 46px; } }

.sof-dropdown-panel {
	left: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.sof-dropdown.is-open .sof-dropdown-panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.sof-dropdown.is-open .sof-chevron,
[data-accordion].is-open .sof-chevron { transform: rotate(180deg); }
.sof-dropdown-list { min-width: 240px; }

[data-menu-toggle] .sof-icon-close { display: none; }
[data-menu-toggle][aria-expanded="true"] .sof-icon-open { display: none; }
[data-menu-toggle][aria-expanded="true"] .sof-icon-close { display: block; }

.sof-mobile-menu { animation: sof-menu-in .3s ease both; }
@keyframes sof-menu-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
body.sof-menu-open { overflow: hidden; }

.sof-accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .3s ease, opacity .3s ease;
}
.sof-accordion-panel > * { min-height: 0; }
[data-accordion].is-open .sof-accordion-panel { grid-template-rows: 1fr; opacity: 1; }

/* ---------- Hero scroll indicator ---------- */
.sof-scroll-dot { animation: sof-bounce 1.5s ease-in-out infinite; }
@keyframes sof-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

/* ---------- Pills (portfolio + blog filters, tags) ---------- */
.sof-pill {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	border-radius: 9999px;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 500;
	background-color: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.sof-pill:hover { background-color: hsl(var(--secondary) / .8); }
.sof-pill.is-active {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
	transform: scale(1.05);
}

/* ---------- Portfolio filtering ---------- */
.sof-project {
	transition: opacity .4s ease, transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.sof-project.is-hiding { opacity: 0; transform: scale(.9); }
.sof-project.is-entering { animation: sof-pop .4s ease both; }
@keyframes sof-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- Forms ---------- */
.sof-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sof-notice { border-radius: .75rem; padding: 1rem 1.25rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.sof-notice--success { border-color: hsl(var(--primary) / .5); }
.sof-notice--error { border-color: hsl(var(--destructive) / .6); color: hsl(var(--destructive)); }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); }

/* ---------- Toasts ---------- */
.sof-toast-region {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column-reverse;
	gap: .5rem;
	width: 100%;
	max-width: 420px;
	padding: 1rem;
	pointer-events: none;
}
@media (min-width: 640px) { .sof-toast-region { top: auto; bottom: 0; flex-direction: column; } }
.sof-toast {
	pointer-events: auto;
	border: 1px solid hsl(var(--border));
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	border-radius: calc(var(--radius) - 2px);
	padding: 1.5rem 2rem 1.5rem 1.5rem;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);
	animation: sof-toast-in .3s ease both;
}
.sof-toast.is-leaving { animation: sof-toast-out .2s ease both; }
.sof-toast--error { border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.sof-toast__title { font-size: .875rem; font-weight: 600; }
.sof-toast__text { font-size: .875rem; opacity: .9; margin-top: .25rem; }
@keyframes sof-toast-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes sof-toast-out { to { opacity: 0; transform: translateX(100%); } }

/* ---------- Blog listing ---------- */
.sof-search-form { position: relative; width: 100%; }
@media (min-width: 1024px) { .sof-search-wrap { width: 300px; flex-shrink: 0; } }
.sof-search-form input[type="search"] {
	width: 100%;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 9999px;
	padding: .75rem 1.25rem .75rem 2.75rem;
	font-size: .875rem;
	color: hsl(var(--foreground));
	transition: border-color .3s;
	-webkit-appearance: none;
}
.sof-search-form input[type="search"]:focus { outline: none; border-color: hsl(var(--primary)); }
.sof-search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }

.sof-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sof-card-placeholder {
	background:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
		var(--hero-gradient),
		hsl(var(--muted));
	background-size: 36px 36px, 36px 36px, auto, auto;
}
.sof-featured-media { position: relative; min-height: 260px; }
.sof-featured-media > img, .sof-featured-media > div { position: absolute; inset: 0; }
@media (min-width: 1024px) { .sof-featured-media { min-height: 420px; } }

.sof-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 4rem; }
.sof-pagination .page-numbers {
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border: 1px solid hsl(var(--border));
	background: hsl(var(--card));
	color: hsl(var(--muted-foreground));
	font-size: .875rem;
	font-weight: 500;
	transition: all .3s;
}
.sof-pagination a.page-numbers:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .5); }
.sof-pagination .page-numbers.current { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.sof-pagination .page-numbers.dots { background: transparent; border-color: transparent; }

/* ---------- Single post ---------- */
.sof-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 48rem; margin: 0 auto; }
@media (min-width: 1024px) {
	.sof-article-grid { grid-template-columns: 3.5rem minmax(0, 48rem); max-width: calc(48rem + 7rem); gap: 3.5rem; }
}
.sof-share { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 1024px) {
	.sof-share { flex-direction: column; position: sticky; top: 8rem; align-self: start; }
}
.sof-share a, .sof-share button {
	width: 2.5rem; height: 2.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9999px;
	border: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
	font-family: Space Grotesk, sans-serif; font-weight: 700; font-size: .875rem;
	transition: all .3s;
}
.sof-share a:hover, .sof-share button:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }

/* ---------- Prose (post, page and legal content) ---------- */
.sof-prose { color: hsl(var(--foreground) / .82); font-size: 1.125rem; line-height: 1.8; }
.sof-prose > * + * { margin-top: 1.5rem; }
.sof-prose h1, .sof-prose h2, .sof-prose h3, .sof-prose h4, .sof-prose h5, .sof-prose h6 { color: hsl(var(--foreground)); line-height: 1.2; }
.sof-prose h2 { font-size: 1.875rem; margin-top: 3rem; margin-bottom: -.25rem; }
.sof-prose h3 { font-size: 1.5rem; margin-top: 2.5rem; }
.sof-prose h4 { font-size: 1.25rem; margin-top: 2rem; }
.sof-prose > :first-child { margin-top: 0; }
.sof-prose a:not(.wp-block-button__link) { color: hsl(var(--primary)); text-decoration: underline; text-decoration-color: hsl(var(--primary) / .4); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.sof-prose a:not(.wp-block-button__link):hover { text-decoration-color: hsl(var(--primary)); }
.sof-prose strong { color: hsl(var(--foreground)); font-weight: 600; }
.sof-prose ul, .sof-prose ol { padding-left: 1.5rem; }
.sof-prose ul { list-style: disc; }
.sof-prose ol { list-style: decimal; }
.sof-prose li + li { margin-top: .5rem; }
.sof-prose li::marker { color: hsl(var(--primary)); }
.sof-prose blockquote, .sof-prose .wp-block-quote {
	position: relative;
	padding: 1.5rem 1.75rem;
	border-radius: .75rem;
	background: linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box, var(--brand-gradient) border-box;
	font-family: Space Grotesk, sans-serif;
	font-size: 1.25rem;
	line-height: 1.6;
	color: hsl(var(--foreground));
	border-left: 3px solid transparent;
}
.sof-prose blockquote cite { display: block; margin-top: .75rem; font-size: .875rem; color: hsl(var(--muted-foreground)); font-style: normal; }
.sof-prose code { font-size: .875em; background: hsl(var(--muted)); color: hsl(var(--foreground)); padding: .15em .4em; border-radius: .375rem; }
.sof-prose pre, .sof-prose .wp-block-code {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: .75rem;
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	font-size: .9rem;
	line-height: 1.7;
}
.sof-prose pre code { background: none; padding: 0; }
.sof-prose img { border-radius: .75rem; height: auto; }
.sof-prose figure { margin-left: 0; margin-right: 0; }
.sof-prose figcaption, .sof-prose .wp-element-caption { margin-top: .75rem; font-size: .875rem; color: hsl(var(--muted-foreground)); text-align: center; }
.sof-prose hr, .sof-prose .wp-block-separator { border: 0; height: 1px; background: hsl(var(--border)); margin: 3rem 0; }
.sof-prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.sof-prose th, .sof-prose td { border: 1px solid hsl(var(--border)); padding: .75rem 1rem; text-align: left; }
.sof-prose th { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.sof-prose .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .75rem;
	border-radius: 9999px; padding: 1rem 2rem; font-weight: 500;
	background: var(--brand-gradient); color: #fff; text-decoration: none;
	transition: all .3s;
}
.sof-prose .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid hsl(var(--foreground) / .2); color: hsl(var(--foreground)); }
.sof-prose .alignleft { float: left; margin: .5rem 1.5rem 1rem 0; }
.sof-prose .alignright { float: right; margin: .5rem 0 1rem 1.5rem; }
.sof-prose .aligncenter { margin-left: auto; margin-right: auto; }
.sof-prose iframe, .sof-prose video { max-width: 100%; border-radius: .75rem; }
.sof-prose--legal { font-size: 1rem; line-height: 1.625; }
.sof-prose--legal p, .sof-prose--legal li { color: hsl(var(--muted-foreground)); }
.sof-prose--legal h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.sof-prose--legal ul { list-style-position: inside; padding-left: 0; }
.sof-page-links { display: flex; gap: .5rem; align-items: center; margin-top: 2rem; }

/* ---------- Comments ---------- */
.sof-comment-list, .sof-comment-list .children { list-style: none; padding: 0; }
.sof-comment-list .children { padding-left: 1.5rem; border-left: 1px solid hsl(var(--border)); margin-top: 1.5rem; }
.sof-comment-list > li + li, .sof-comment-list .children > li + li { margin-top: 1.5rem; }
.sof-comment-list .comment-body { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: 1.5rem; }
.sof-comment-list .comment-author { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.sof-comment-list .comment-author img { border-radius: 9999px; }
.sof-comment-list .says { display: none; }
.sof-comment-list .comment-metadata { font-size: .8rem; color: hsl(var(--muted-foreground)); margin: .25rem 0 1rem 3.75rem; }
.sof-comment-list .comment-content { color: hsl(var(--foreground) / .82); }
.sof-comment-list .comment-content p + p { margin-top: 1rem; }
.sof-comment-list .reply { margin-top: 1rem; font-size: .875rem; }
.sof-comment-list .reply a, .sof-comments .comment-navigation a { color: hsl(var(--primary)); }
.sof-comment-respond { margin-top: 3rem; }
.sof-comments .comment-form { display: grid; gap: 1.5rem; }
.sof-comments .comment-notes, .sof-comments .logged-in-as { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.sof-comments .comment-notes a, .sof-comments .logged-in-as a { color: hsl(var(--primary)); }
.sof-comments .comment-form label { display: block; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); margin-bottom: .5rem; }
.sof-comments .comment-form input[type="text"],
.sof-comments .comment-form input[type="email"],
.sof-comments .comment-form input[type="url"],
.sof-comments .comment-form textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid hsl(var(--border));
	padding: .75rem 0;
	font-size: 1.05rem;
	color: hsl(var(--foreground));
	transition: border-color .3s;
	resize: vertical;
}
.sof-comments .comment-form input:focus, .sof-comments .comment-form textarea:focus { outline: none; border-color: hsl(var(--primary)); }
.sof-comments .comment-form-cookies-consent { display: flex; gap: .5rem; align-items: flex-start; }
.sof-comments .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; margin: 0; }
.sof-comments #cancel-comment-reply-link { margin-left: 1rem; font-size: .875rem; color: hsl(var(--primary)); }

/* ---------- Misc WordPress core classes ---------- */
.alignwide { max-width: 72rem; }
.alignfull { width: 100%; max-width: none; }
.wp-caption { max-width: 100%; }
.sticky .sof-post-card, .sof-post-card.sticky { border-color: hsl(var(--primary) / .5); }
.bypostauthor > .comment-body { border-color: hsl(var(--primary) / .4); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }

/* ---------- Utilities used by WordPress templates but absent from the compiled build ---------- */
.mt-1 { margin-top: .25rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.pt-12 { padding-top: 3rem; }
.gap-10 { gap: 2.5rem; }
.text-right { text-align: right; }
.self-start { align-self: flex-start; }
.hover\:gap-2:hover { gap: .5rem; }
@media (min-width: 768px) {
	.md\:items-end { align-items: flex-end; }
	.md\:self-auto { align-self: auto; }
	.md\:mb-16 { margin-bottom: 4rem; }
}
@media (min-width: 1024px) {
	.lg\:flex-row { flex-direction: row; }
	.lg\:items-center { align-items: center; }
}