/*
Theme Name: Applelounge 2026
Theme URI: https://www.applelounge.com
Author: PTA Agency
Description: Block theme for applelounge.com. Pink colour blocking, hard black rules and oversized condensed headlines. No page builder, no jQuery, no slider.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: applelounge-2026-09
Author URI: https://www.primeteam.agency
*/

/* ---------- Tokens ---------- */
:root {
	--al-ink: var(--wp--preset--color--ink);
	--al-rule: 2px solid var(--wp--preset--color--ink);
	--al-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	--al-shadow-lift: 10px 10px 0 var(--wp--preset--color--ink);
	--al-focus: var(--wp--preset--color--ink);
	--al-gutter: max(var(--wp--preset--spacing--20), env(safe-area-inset-left), env(safe-area-inset-right));
	/* z-index scale */
	--al-z-base: 10;
	--al-z-header: 20;
	--al-z-overlay: 30;
	--al-z-modal: 50;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--wp--preset--spacing--40); -webkit-text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; -webkit-tap-highlight-color: rgba(236, 72, 153, 0.3); }
body .wp-site-blocks { overflow-x: clip; }
body .wp-site-blocks > *,
body .wp-block-post-content > .alignfull { margin-block: 0; }
a, button, input, select, textarea, summary, label { touch-action: manipulation; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: anywhere; scroll-margin-top: var(--wp--preset--spacing--40); }
p, li, dd { text-wrap: pretty; overflow-wrap: anywhere; }
a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 4px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--al-focus); outline-offset: 3px; }
button:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; }
.wp-block-image { margin-block: 0; }

/* ---------- Buttons (instant state changes, no transitions) ---------- */
.wp-element-button,
.wp-block-button__link,
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wpcf7-submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--wp--preset--color--ink); }
.wp-element-button:active,
.wp-block-button__link:active,
.wpcf7-submit:active { transform: translate(4px, 4px); box-shadow: none; }

/* ---------- Header ---------- */
.al-header {
	position: relative;
	z-index: var(--al-z-header);
	padding-inline: var(--al-gutter);
	padding-top: env(safe-area-inset-top);
	background: var(--wp--preset--color--background);
	border-bottom: var(--al-rule);
}
.al-header-inner { min-height: 72px; gap: var(--wp--preset--spacing--20); }
/* Applelounge logo: fixed height reserves space before the file loads; width follows the image. */
.al-header .wp-block-image.al-site-logo { flex: 0 1 auto; min-width: 0; margin: 0; }
.al-header .al-site-logo a { display: inline-flex; align-items: center; min-height: 44px; }
.al-header .wp-block-image.al-site-logo img { display: block; width: auto; max-width: min(200px, 55vw); height: 32px; object-fit: contain; object-position: left center; }
@media (min-width: 768px) {
	.al-header .wp-block-image.al-site-logo img { max-width: 240px; height: 40px; }
}
.al-header .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--wp--preset--spacing--10); text-decoration: none; }
.al-header .wp-block-navigation-item__content:hover,
.al-header .wp-block-navigation-item__content[aria-current] { text-decoration: underline; text-decoration-thickness: 4px; text-decoration-color: var(--wp--preset--color--primary); }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.wp-block-navigation__responsive-container-open { border: var(--al-rule); background: var(--wp--preset--color--card); }
.wp-block-navigation__responsive-container.is-menu-open {
	padding: max(var(--wp--preset--spacing--30), env(safe-area-inset-top)) var(--al-gutter) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--ink) !important;
	overscroll-behavior: contain;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1;
}

/* ---------- Sections ---------- */
.al-hero,
.al-section { padding-inline: var(--al-gutter); }
.al-section { padding-block: var(--wp--preset--spacing--60); border-bottom: var(--al-rule); }
.al-section.is-muted { background: var(--wp--preset--color--muted); }
.al-section.is-dark { background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); --al-focus: var(--wp--preset--color--background); }
.al-section.is-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--background); --al-focus: var(--wp--preset--color--primary); }
.al-section.is-dark a:not(.wp-element-button),
.al-section.is-ink a:not(.wp-element-button) { color: inherit; }
.al-section-title { margin: 0 0 var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--xx-large); }
.wp-block-post-content { counter-reset: al-section; }
.al-section-title.is-numbered { counter-increment: al-section; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.4em; }
.al-section-title.is-numbered::before {
	content: counter(al-section, decimal-leading-zero);
	content: counter(al-section, decimal-leading-zero) / "";
	padding: 0.15em 0.3em 0.05em;
	border: 2px solid currentColor;
	font-size: 0.45em;
	line-height: 1;
}

/* Grid containers: reset flow-layout margins on children. */
.wp-block-group.al-hero-inner > *,
.wp-block-group.al-services > *,
.wp-block-group.al-products > *,
.wp-block-group.al-steps > *,
.wp-block-group.al-logos > *,
.wp-block-group.al-split > *,
.wp-block-group.al-footer-cols > * { margin-block: 0; min-width: 0; }

/* ---------- Hero ---------- */
.al-hero {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	border-bottom: var(--al-rule);
	--al-focus: var(--wp--preset--color--ink);
}
.wp-block-group.al-hero-inner { display: grid; gap: var(--wp--preset--spacing--50); align-items: end; }
.al-hero h1 { margin: 0; max-width: 14ch; font-size: var(--wp--preset--font-size--display); color: inherit; }
.al-hero.is-policy h1 { font-size: var(--wp--preset--font-size--xx-large); }
.al-eyebrow {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.3em 0.75em;
	border: var(--al-rule);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}
.al-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }
.al-hero-list {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	list-style: none;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	box-shadow: 8px 8px 0 var(--wp--preset--color--card);
}
.al-hero-list li { padding-block: var(--wp--preset--spacing--20); border-top: 1px solid rgba(253, 242, 248, 0.35); font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.3; }
.al-hero-list li:first-child { padding-top: 0; border-top: 0; }
.al-hero-list li:last-child { padding-bottom: 0; }
.al-hero-list li::before { content: "→ "; content: "→ " / ""; color: var(--wp--preset--color--primary); }
.al-hero-logo img { display: block; width: 100px; aspect-ratio: 1; object-fit: contain; border: var(--al-rule); background: var(--wp--preset--color--card); }
.al-hero-logo { margin-bottom: var(--wp--preset--spacing--30); }

/* ---------- Cards ---------- */
.al-card {
	position: relative;
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--foreground);
	border: var(--al-rule);
	box-shadow: var(--al-shadow);
	--al-focus: var(--wp--preset--color--ink);
}
.al-card:hover,
.al-card:focus-within { transform: translate(-3px, -3px); box-shadow: var(--al-shadow-lift); }
.al-section.is-dark .al-card { box-shadow: 6px 6px 0 var(--wp--preset--color--primary); }
.al-section.is-dark .al-card:hover,
.al-section.is-dark .al-card:focus-within { box-shadow: 10px 10px 0 var(--wp--preset--color--primary); }
.al-section.is-dark .al-card a:not(.wp-element-button) { color: var(--wp--preset--color--foreground); }

/* Services */
.wp-block-group.al-services,
.wp-block-group.al-products,
.wp-block-group.al-steps { display: grid; gap: var(--wp--preset--spacing--40); }
.al-service { display: flex; flex-direction: column; }
.al-service .wp-block-image { border-bottom: var(--al-rule); }
.al-service .wp-block-image a { display: block; }
.al-service .wp-block-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; padding: var(--wp--preset--spacing--20); }
.al-service h3 { margin: 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--x-large); }
.al-service h3 a { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; min-height: 44px; text-decoration: none; }
.al-service h3 a::after { content: "→"; content: "→" / ""; color: var(--wp--preset--color--ink); }
.al-service h3 a:hover { text-decoration: underline; }

/* Products showcase */
.al-product { display: flex; flex-direction: column; }
.al-product .wp-block-image { padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--background); border-bottom: var(--al-rule); }
.al-product .wp-block-image a { display: block; }
.al-product .wp-block-image img { display: block; width: min(100%, 180px); aspect-ratio: 1; object-fit: contain; margin-inline: auto; }
.al-product h3 { margin: 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0; font-size: var(--wp--preset--font-size--xx-large); }
.al-product h3 a { text-decoration: none; }
.al-product h3 a:hover { text-decoration: underline; }
.al-product ul { margin: 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); list-style: none; }
.al-product li { padding-block: 0.6em; border-top: 1px solid var(--wp--preset--color--border); }
.al-product li:first-child { border-top: 0; }
.al-product li::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; background: var(--wp--preset--color--primary); border: 1px solid var(--wp--preset--color--ink); }

/* Approach steps */
.wp-block-group.al-steps { counter-reset: al-step; }
.al-step { counter-increment: al-step; padding-top: var(--wp--preset--spacing--30); border-top: 6px solid var(--wp--preset--color--ink); }
.al-step::before {
	content: counter(al-step, decimal-leading-zero);
	content: counter(al-step, decimal-leading-zero) / "";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--wp--preset--color--primary);
	-webkit-text-stroke: 2px var(--wp--preset--color--ink);
	paint-order: stroke fill;
}
.al-step h3 { margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-large); }
.al-step ul { margin: 0; padding-left: 1.1em; }
.al-step li + li { margin-top: 0.5em; }

/* Logo grids */
.wp-block-group.al-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--wp--preset--color--ink); }
.al-logos .wp-block-image { display: flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--30); background: var(--wp--preset--color--card); }
.al-logos .wp-block-image a { display: block; width: 100%; }
.al-logos img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: contain; }
.wp-block-group.al-logos.is-portfolio { background: var(--wp--preset--color--primary); }
.al-logos.is-portfolio .wp-block-image { background: var(--wp--preset--color--ink); --al-focus: var(--wp--preset--color--primary); }

/* ---------- Prose & editorial ---------- */
.al-prose { max-width: 68ch; }
.al-prose > * { margin-block: 0; }
.al-prose > * + * { margin-top: 1.1em; }
.al-prose h2 { margin-top: 1.6em; font-size: var(--wp--preset--font-size--x-large); }
.al-prose ul { padding-left: 1.2em; }
.al-lead { font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.4; }
.wp-block-group.al-split { display: grid; gap: var(--wp--preset--spacing--50); }
.al-stat { padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--ink); border: var(--al-rule); box-shadow: var(--al-shadow); }
.al-stat > * { margin-block: 0; }
.al-stat-figure { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); line-height: 0.9; }
.al-stat-label { margin-top: var(--wp--preset--spacing--20) !important; font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.3; }
.al-kicker { margin: 0 0 var(--wp--preset--spacing--30); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Downloads */
.wp-block-group.al-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); }
.wp-block-group.al-downloads > * { margin: 0; }
.al-downloads a { display: inline-flex; align-items: center; min-height: 44px; }
.al-downloads img { display: block; width: auto; height: 64px; }
.al-app-logo img { display: block; width: clamp(140px, 40vw, 220px); aspect-ratio: 1; object-fit: contain; background: var(--wp--preset--color--card); border: var(--al-rule); box-shadow: var(--al-shadow); }

/* ---------- Contact Form 7 ---------- */
.al-form { padding: var(--wp--preset--spacing--40); }
.al-form .wpcf7 p { margin: 0 0 var(--wp--preset--spacing--30); }
.al-form .wpcf7 label { display: block; font-weight: 700; }
.al-form .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.al-form .wpcf7 textarea,
.al-form .wpcf7 select {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 0.35em;
	padding: 0.65em 0.8em;
	font: inherit;
	font-size: max(1rem, var(--wp--preset--font-size--medium));
	color: var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--card);
	border: var(--al-rule);
	border-radius: 0;
}
.al-form .wpcf7 textarea { min-height: 10em; resize: vertical; }
.al-form .wpcf7 :is(input, textarea, select):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; box-shadow: 4px 4px 0 var(--wp--preset--color--primary); }
.al-form .wpcf7-submit { padding: 0.75em 1.5em; font: inherit; font-weight: 700; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--accent); border: var(--al-rule); border-radius: 0; }
.al-form .wpcf7 form.submitting .wpcf7-submit { cursor: progress; opacity: 0.7; }
.al-form .wpcf7-not-valid { border-color: var(--wp--preset--color--destructive) !important; border-width: 3px !important; }
.al-form .wpcf7-not-valid-tip { display: block; margin-top: 0.35em; color: var(--wp--preset--color--destructive); font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.al-form .wpcf7-not-valid-tip::before { content: "⚠ "; content: "⚠ " / ""; }
.al-form .wpcf7 form .wpcf7-response-output { margin: var(--wp--preset--spacing--30) 0 0; padding: var(--wp--preset--spacing--20); border: var(--al-rule); font-weight: 600; }
.al-form .wpcf7 form.invalid .wpcf7-response-output,
.al-form .wpcf7 form.failed .wpcf7-response-output,
.al-form .wpcf7 form.spam .wpcf7-response-output { border-color: var(--wp--preset--color--destructive); }
.al-form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--wp--preset--color--accent); }

/* ---------- Blog feed & query loops ---------- */
.al-feed input,
.al-feed select { min-height: 48px; font: inherit; border: var(--al-rule); border-radius: 0; background: var(--wp--preset--color--card); color: var(--wp--preset--color--foreground); }
.wp-block-post-template.al-post-grid { display: grid; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; }
.wp-block-post-template.al-post-grid > li { margin: 0; min-width: 0; }
.al-post-card { height: 100%; padding-bottom: var(--wp--preset--spacing--30); }
.al-post-card > * { margin-block: 0; }
.al-post-card > :not(.wp-block-post-featured-image) { padding-inline: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--20); }
.al-post-card .wp-block-post-featured-image { border-bottom: var(--al-rule); }
.al-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); }
.al-post-card .wp-block-post-title a { text-decoration: none; }
.al-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--10); }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 0.6em; border: var(--al-rule); text-decoration: none; font-weight: 700; }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--background); }
.wp-block-search__input { min-height: 48px; border: var(--al-rule) !important; border-radius: 0; font: inherit; }
.wp-block-search__button { min-height: 48px; margin-left: 0 !important; }
.al-entry-meta { font-size: var(--wp--preset--font-size--small); }

/* ---------- Footer ---------- */
.al-footer {
	padding: var(--wp--preset--spacing--60) var(--al-gutter) max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	--al-focus: var(--wp--preset--color--primary);
}
.al-footer a { color: inherit; }
.al-footer a:hover { color: var(--wp--preset--color--primary); }
.al-footer-cta { margin: 0 0 var(--wp--preset--spacing--50); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); line-height: 0.9; }
.al-footer .al-footer-cta a { display: inline-flex; align-items: baseline; gap: 0.15em; color: var(--wp--preset--color--primary); text-decoration: none; border-bottom: 0.06em solid currentColor; }
.al-footer .al-footer-cta a::after { content: "→"; content: "→" / ""; }
.al-footer .al-footer-cta a:hover { color: var(--wp--preset--color--background); }
.wp-block-group.al-footer-cols { display: grid; gap: var(--wp--preset--spacing--40); padding-block: var(--wp--preset--spacing--40); border-top: 2px solid var(--wp--preset--color--background); }
.al-footer h2 { margin: 0 0 var(--wp--preset--spacing--10); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.al-footer ul { margin: 0; padding: 0; list-style: none; }
.al-footer li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.al-footer li a:hover { text-decoration: underline; }
.wp-block-group.al-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wp--preset--spacing--20); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid rgba(253, 242, 248, 0.35); font-size: var(--wp--preset--font-size--small); }
.wp-block-group.al-footer-legal > * { margin: 0; }
.al-footer .wp-block-site-title a { text-decoration: none; }

/* ---------- Breakpoints (mobile first) ---------- */
@media (min-width: 600px) {
	.wp-block-group.al-services,
	.wp-block-group.al-steps,
	.wp-block-post-template.al-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-group.al-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-block-group.al-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.al-hero.is-home .wp-block-group.al-hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.wp-block-group.al-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
	.wp-block-group.al-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.wp-block-group.al-services,
	.wp-block-post-template.al-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-block-group.al-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wp-block-group.al-logos.is-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.wp-block-group.al-logos.is-clients { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Motion: one scroll reveal on the product showcase ---------- */
@keyframes al-rise {
	from { opacity: 0.001; transform: translateY(32px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.al-product .wp-block-image img { animation: al-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	}
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}