/* DenbiSoft: small extras on top of theme.json. */

/* Pixel art stays crisp at any size. */
.is-pixel-art img,
img.is-pixel-art {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--panel);
}

.site-brand .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	letter-spacing: 0.02em;
}

/* The DenbiSoft mark (pixel D, first pixel lit teal) in front of the studio name.
   18 x 20 px is exactly 2 px per grid square, so it stays perfectly crisp. */
.site-brand .wp-block-site-title a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 20px;
	margin-right: 0.6em;
	vertical-align: -3px;
	background: url("../images/denbisoft-mark.svg") no-repeat center / contain;
}

.site-header .wp-block-navigation a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--contrast);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: transparent;
}

.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ---------- Sections and cards ---------- */

.eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.card {
	height: 100%;
	border: 1px solid var(--wp--preset--color--raised);
	border-radius: 14px;
	background: var(--wp--preset--color--panel);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
	border-color: var(--wp--preset--color--border);
}

.card .card-icon {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	color: var(--wp--preset--color--accent);
	font-size: 1.25rem;
	line-height: 1;
}

.shot {
	border: 1px solid var(--wp--preset--color--raised);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Soft teal glow behind hero art. */
.glow {
	position: relative;
}

.glow::before {
	content: "";
	position: absolute;
	inset: 10% 5%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent), transparent);
	filter: blur(40px);
	z-index: -1;
}

.badge-line {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.badge-line strong {
	color: var(--wp--preset--color--sun);
}

/* App icons get the rounded "squircle" look of the stores. */
.app-icon img {
	border-radius: 22%;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}

/* Phone screenshots: rounded like a device screen. */
.phone-shots .shot {
	border-radius: 22px;
	margin: 0;
}

/* FAQ (details blocks). */
.faq .wp-block-details {
	border: 1px solid var(--wp--preset--color--raised);
	border-radius: 12px;
	background: var(--wp--preset--color--panel);
	padding: 1rem 1.25rem;
}

.faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

.faq .wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

/* Requirements table. */
.specs table {
	border-collapse: collapse;
	width: 100%;
}

.specs td,
.specs th {
	border: 1px solid var(--wp--preset--color--raised);
	padding: 0.65rem 0.9rem;
	text-align: left;
}

.specs th {
	background: var(--wp--preset--color--panel);
}

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

.site-footer {
	border-top: 1px solid var(--wp--preset--color--panel);
	background: var(--wp--preset--color--base-deep);
}

.site-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--contrast);
}

.site-footer .footer-heading {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Blog ---------- */

.post-card {
	border-bottom: 1px solid var(--wp--preset--color--panel);
	padding-bottom: var(--wp--preset--spacing--40);
}

.post-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

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

.wp-block-post-date,
.wp-block-post-terms {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}