/**
 * Non-homepage pages: page header band, Services grid, How It Works
 * steps, FAQ accordion, Portfolio grid, Contact form, Blog (post cards,
 * single post, pagination). Loaded on every page except the front page
 * (which uses home.css instead) — see inc/enqueue.php.
 */

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--space-1);
	padding-block: var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.breadcrumbs a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.breadcrumbs span[aria-hidden] {
	margin-inline: var(--space-2);
	opacity: 0.5;
}

.breadcrumbs [aria-current="page"] {
	color: var(--color-text);
	font-weight: 600;
}

/* ---------- Page header ---------- */

.page-header {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-12) var(--space-10);
	text-align: center;
	background: var(--color-bg-subtle);
	border-bottom: 1px solid var(--color-border);
}

.page-header p {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: 0;
}

/* Content sits above the animated overlay canvas below (and above the
   header's own background-image, which paints beneath both regardless
   since it belongs to the header box itself, not a stacked child). */
.page-header > .container {
	position: relative;
	z-index: 2;
}

/* Page title colour/stroke/background box (Customizer → Page Title
   Styling, added 2026-09-07, extended to the subtitle the same day) —
   one shared style for every page header's H1 *and* subtitle, not set
   per page. Colour and the background box are optional overrides
   (var() falls back to each element's existing look when unset — the
   subtitle keeps its own muted colour by default rather than inheriting
   the H1's default, so nothing changes until an admin actually sets a
   colour, at which point both adopt it together); the stroke only ever
   applies under .page-header--title-stroke, which inc/template-tags.php
   only adds when that toggle is actually on, so switching it off
   doesn't discard the saved colour/width. */
.page-header h1 {
	color: var(--page-title-color, var(--color-neutral-900));
}

.page-header p {
	color: var(--page-title-color, var(--color-text-muted));
}

.page-header--title-stroke h1,
.page-header--title-stroke p {
	-webkit-text-stroke-width: var(--page-title-stroke-width, 1.5px);
	-webkit-text-stroke-color: var(--page-title-stroke-color, #000);
	paint-order: stroke fill;
}

/* Only printed into the DOM at all once a background colour is chosen
   (appiappi_page_title_bg_is_enabled()) — an inline-block "badge" sized
   to the text rather than a full-width bar, so it reads as a deliberate
   accent rather than a stray box. Opacity is layered onto the chosen
   colour via color-mix() rather than baked into the colour itself, so
   the two Customizer controls stay independent. */
.page-header__title-box {
	display: inline-block;
	background: color-mix(in srgb, var(--page-title-bg-color, #000) var(--page-title-bg-opacity, 70%), transparent);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-8);
	box-shadow: var(--shadow-lg);
}

.page-header__title-box h1,
.page-header__title-box p {
	margin-bottom: 0;
}

.page-header__title-box p {
	margin-top: var(--space-2);
}

/* Animated geometric network overlay (assets/js/page-header-network.js):
   only printed into the DOM at all when a page's "Animated Geometric
   Overlay" Customizer toggle is on (appiappi_page_header_network_canvas()
   in inc/template-tags.php), so pages without it pay zero JS/CSS cost. */
.page-header__network {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* Full-width page-header background, one per page topic. Revised
   2026-09-07: no default image anymore — each var() now falls back to
   `none` instead of the theme's old isometric SVGs (assets/images/page-bg-{key}.svg,
   still in the repo, just no longer referenced here), so a page shows no
   background image at all until an admin actually uploads one via
   Customizer → Page Header Backgrounds; --color-bg-subtle (or an
   admin-set colour override) still shows through underneath either way.
   background-size: 100% auto (not `cover`) means an uploaded image's
   width always exactly matches the header's width, height scales to
   match the image's own aspect ratio (auto) rather than being cropped
   to fill the header's height — centered either way, so if the image is
   proportionally shorter than the header it leaves the background
   colour visible above/below rather than stretching or cropping the
   image itself. Custom properties set at :root (by an upload) inherit
   down to these class rules regardless of selector specificity, so a
   :root-level override here correctly beats the `none` fallback without
   needing to touch this file. template-single (the single design detail
   page) is configured completely separately from the /templates/ archive. */
.page-header--services { background-image: var(--page-header-bg-services, none); background-color: var(--page-header-bg-color-services, var(--color-bg-subtle)); }
.page-header--how-it-works { background-image: var(--page-header-bg-how-it-works, none); background-color: var(--page-header-bg-color-how-it-works, var(--color-bg-subtle)); }
.page-header--portfolio { background-image: var(--page-header-bg-portfolio, none); background-color: var(--page-header-bg-color-portfolio, var(--color-bg-subtle)); }
.page-header--pricing { background-image: var(--page-header-bg-pricing, none); background-color: var(--page-header-bg-color-pricing, var(--color-bg-subtle)); }
.page-header--about { background-image: var(--page-header-bg-about, none); background-color: var(--page-header-bg-color-about, var(--color-bg-subtle)); }
.page-header--contact { background-image: var(--page-header-bg-contact, none); background-color: var(--page-header-bg-color-contact, var(--color-bg-subtle)); }
.page-header--templates { background-image: var(--page-header-bg-templates, none); background-color: var(--page-header-bg-color-templates, var(--color-bg-subtle)); }
.page-header--template-single { background-image: var(--page-header-bg-template-single, none); background-color: var(--page-header-bg-color-template-single, var(--color-bg-subtle)); }

.page-header[class*="page-header--"] {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

/* ---------- Services ---------- */

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.service-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	max-width: 860px;
	margin-inline: auto;
}

.service-block {
	padding-block: var(--space-10);
	border-bottom: 1px solid var(--color-border);
	scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.service-block:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.service-block:first-child {
	padding-top: 0;
}

.service-block__header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.service-block__header h2 {
	margin-bottom: 0;
}

.service-block__hook {
	font-size: var(--fs-lg);
	color: var(--color-neutral-800);
	max-width: 68ch;
}

.service-block__breakdown {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2) var(--space-6);
	margin-bottom: var(--space-6);
}

.service-block__breakdown li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
	padding-block: var(--space-2);
}

.service-block__breakdown svg {
	flex-shrink: 0;
	color: var(--color-primary);
	margin-top: 2px;
}

.service-block__closing {
	margin: 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-md);
	font-style: italic;
	color: var(--color-neutral-800);
}

@media (min-width: 768px) {
	.service-block__breakdown {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- How It Works ---------- */

.step__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: var(--color-navy-900);
	color: var(--color-white);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
}

.step-detail-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	max-width: 860px;
	margin-inline: auto;
}

.step-detail {
	padding-block: var(--space-10);
	border-bottom: 1px solid var(--color-border);
}

.step-detail:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.step-detail:first-child {
	padding-top: 0;
}

.step-detail__header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.step-detail__header h2 {
	margin-bottom: 0;
}

.step-detail__group {
	margin-bottom: var(--space-5);
}

.step-detail__group:last-child {
	margin-bottom: 0;
}

.step-detail__group p:last-child {
	margin-bottom: 0;
}

.step-detail__label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}

.step-detail__group--benefit {
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-md);
}

.step-detail__group--benefit .step-detail__label {
	color: var(--color-success);
}

@media (min-width: 1024px) {
	.steps-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- FAQ accordion ---------- */

.faq-list {
	max-width: 760px;
	margin-inline: auto;
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	padding-block: var(--space-5);
	background: none;
	border: none;
	text-align: left;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
}

.faq-item__question .icon {
	flex-shrink: 0;
	transition: transform var(--transition-base);
	color: var(--color-text-muted);
	transform: rotate(45deg);
}

.faq-item.is-open .faq-item__question .icon {
	transform: rotate(0deg);
}

.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-base);
}

.faq-item.is-open .faq-item__answer {
	max-height: 2000px;
}

.faq-item__answer-inner {
	padding-bottom: var(--space-5);
	color: var(--color-text-muted);
}

/* ---------- Portfolio ---------- */

.portfolio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.portfolio-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.portfolio-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-neutral-100);
}

.portfolio-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio-card__concept-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
}

.portfolio-card__body {
	padding: var(--space-5);
}

.portfolio-card__meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--space-2);
}

.portfolio-card h3 {
	margin-bottom: var(--space-2);
}

.portfolio-card p {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Pricing explainer ---------- */

.pricing-explainer {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	max-width: 900px;
	margin-inline: auto;
}

.pricing-explainer__col h3 {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-2);
}

.pricing-explainer__col p {
	margin-bottom: 0;
}

.pricing-explainer__note {
	max-width: 900px;
	margin: var(--space-8) auto 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	text-align: center;
}

@media (min-width: 768px) {
	.pricing-explainer {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Contact ---------- */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

/* No info card configured (Customizer → Contact Page Info Box all
   empty) — the form is the only thing on the page, so give it a
   comfortable reading width instead of stretching edge to edge. */
.contact-layout--form-only {
	max-width: 720px;
	margin-inline: auto;
}

.contact-info-card {
	padding: 0;
	overflow: hidden;
	background: var(--color-navy-900);
	color: var(--color-text-on-dark-muted);
	display: flex;
	flex-direction: column;
}

/* The "top half": a Google Maps embed, when configured. */
.contact-info-card__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--color-neutral-100);
}

.contact-info-card__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The "bottom half": address / phone / support email. */
.contact-info-card__details {
	padding: var(--space-8);
}

.contact-info-card h3 {
	color: var(--color-white);
}

.contact-info-card ul li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.contact-info-card ul li:last-child {
	margin-bottom: 0;
}

.contact-form-card {
	padding: var(--space-8);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--space-4);
}

.form-notice {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-6);
}

.form-notice--success {
	background: color-mix(in srgb, var(--color-success) 12%, white);
	color: var(--color-success);
}

.form-notice--error {
	background: color-mix(in srgb, var(--color-danger) 12%, white);
	color: var(--color-danger);
}

@media (min-width: 1024px) {
	.contact-layout {
		grid-template-columns: 1fr 1.5fr;
	}

	.contact-layout--form-only {
		grid-template-columns: 1fr;
	}

	.form-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.form-grid .form-field--full {
		grid-column: 1 / -1;
	}
}

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

.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.post-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-neutral-100);
	margin-bottom: var(--space-4);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--space-2);
}

.post-card h2 {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-2);
}

.post-card h2 a {
	color: inherit;
}

.post-card h2 a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

@media (min-width: 768px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.single-post {
	margin-inline: auto;
}

@media (max-width: 1023.98px) {
	.single-post {
		max-width: 760px;
	}
}

/* At ≥1024px the media + content column sits beside a sticky
   `.template-summary` box (rating/price/actions/note) instead of
   leaving empty space to its right — see single-appiappi_template.php.
   Below that, `.single-post` is plain block flow, so DOM order (media,
   summary, content) puts the summary box directly under the featured
   image and above the description, as requested. */
@media (min-width: 1024px) {
	.single-post {
		max-width: none;
		display: grid;
		grid-template-columns: 1fr 320px;
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: var(--space-8);
	}

	.single-post__media {
		grid-column: 1;
		grid-row: 1;
	}

	.single-post__content {
		grid-column: 1;
		grid-row: 2;
	}

	.template-summary {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}
}

/* Website Design detail page's own desktop side padding, separate
   from the sitewide --container-pad. */
@media (min-width: 768px) {
	.single-template-detail {
		padding-inline: 30px;
	}
}

/* About page's own desktop side padding — the sitewide 10px gutter read
   as too tight for this much long-form editorial copy. */
@media (min-width: 768px) {
	.about-page-content {
		padding-inline: 50px;
	}
}

/* ---------- Single design page: summary box ---------- */

.template-summary {
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
	.template-summary {
		margin-bottom: 0;
	}
}

/* Price + rating on one row (fixed 2026-09-13): the rating sits right
   after the price with a fixed, reasonable gap between them — anchored
   to the price's own left edge (normal flow), not pinned to the card's
   right edge — and wraps onto its own line, below the price, whenever
   the row is too narrow to fit both (e.g. a long price + rating with a
   review count). */
.template-summary__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-4);
	row-gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.template-summary__rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.template-summary__desc {
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.template-summary__price {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	margin-bottom: 0;
}

.template-summary__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.template-summary__actions .btn {
	width: 100%;
}

.template-summary__note {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.single-post__meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

.single-post__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-8);
}

.single-post__content {
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
}

.single-post__content h2,
.single-post__content h3 {
	margin-top: var(--space-8);
}

.single-post__content img {
	border-radius: var(--radius-md);
}

.single-post__content a {
	text-decoration: underline;
}

/* Base.css strips ul/ol list-style + padding sitewide (most lists in the
   design system are custom-built components), but long-form prose pages
   (About, Privacy Policy, Terms of Service, blog posts) rely on plain
   editor-content bullet/numbered lists, so restore real markers here. */
.single-post__content ul,
.single-post__content ol {
	margin: 0 0 var(--space-4);
	padding-left: 1.25em;
}

.single-post__content ul {
	list-style: disc;
}

.single-post__content ol {
	list-style: decimal;
}

.single-post__content li {
	margin-bottom: var(--space-2);
	color: var(--color-text-muted);
}

.single-post__content li > ul,
.single-post__content li > ol {
	margin-top: var(--space-2);
}

.single-post__content strong {
	color: var(--color-neutral-900);
}

/* ---------- Legal pages (Privacy Policy / Terms of Service) ---------- */

.legal-updated {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-8);
}

.legal-contact-block {
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	line-height: var(--lh-normal);
}

.appiappi-pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-12);
}

.appiappi-pagination a,
.appiappi-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.appiappi-pagination a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}

.appiappi-pagination .current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}