/*
Theme Name: A4K Parent
Theme URI: https://github.com/a4k-ai/a4k-parent-theme
Author: A4K
Description: Shared block-native parent theme for Ai4Kids, ThinkGen, and NextSchool. Structure and styling only — all content is built as Gutenberg blocks and edited in wp-admin. Child themes override design tokens in theme.json.
Version: 0.7.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: a4k-parent
*/

/* ================================================================
   Site shell — flex column, sticky footer, header offset
================================================================ */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	width: 100%;
	flex-grow: 1;
}

/* ================================================================
   Apple-style sticky menu bar.
   The header template-part wrapper is the bar: transparent at the
   top of the page, frosted translucent once scrolled (.is-scrolled
   toggled by assets/js/a4k-header.js). Content centered.
================================================================ */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 9999;
	padding: 8px var(--wp--custom--gutter, 22px);
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

header.wp-block-template-part.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--background) 78%, transparent);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	header.wp-block-template-part.is-scrolled {
		background: color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
	}
}

/* One "menu ink" colour for the whole bar, so the logo and the nav agree.
   Children override by re-declaring .a4k-header-inner { color: ... }. */
.a4k-header-inner {
	color: var(--wp--preset--color--text);
}

/* Home button is always the icon logo */
.a4k-header-inner .wp-block-site-logo a {
	color: inherit;
	display: block;
	line-height: 0;
}

.a4k-header-inner .wp-block-site-logo img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}

/* Tint the logo to the menu ink. The image becomes a mask and the colour
   is painted behind it, so this works for any logo file (PNG or SVG) and
   any palette. a4k-header.js adds the class + mask URL once the img loads;
   without JS the original logo simply shows through unchanged. */
.a4k-header-inner .wp-block-site-logo img.a4k-logo-tinted {
	background-color: currentColor;
	-webkit-mask-image: var(--a4k-logo-mask);
	mask-image: var(--a4k-logo-mask);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Children must stay transparent or they occlude the backdrop filter. */
.a4k-header-inner .wp-block-navigation,
.a4k-header-inner .wp-block-navigation .wp-block-navigation__container {
	background: transparent;
}

/* Footer text: re-assert the chosen preset color.
   Our palette slug "text" emits `.has-text-color { !important }`, which is
   also WP's marker class on every block with a custom text color, so it
   hijacks preset text colors declared before it in the palette.
   TODO: rename the "text" slug across themes to remove the collision. */
footer.wp-block-template-part p {
	color: inherit;
}

footer.wp-block-template-part .has-background-color,
footer.wp-block-template-part .has-background-color p {
	color: var(--wp--preset--color--background) !important;
}

/* ================================================================
   Full-width background bleed for constrained groups (no JS)
================================================================ */
.wp-block-post-content > .wp-block-group.has-background,
.wp-site-blocks > main > .wp-block-group.has-background {
	position: relative;
}

.wp-block-post-content > .wp-block-group.has-background::before,
.wp-site-blocks > main > .wp-block-group.has-background::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background-color: inherit;
	background-image: inherit;
	pointer-events: none;
}

/* ================================================================
   Glass card block style (register_block_style: a4k-glass)
================================================================ */
.is-style-a4k-glass {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--lg, 16px);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.is-style-a4k-glass {
		background-color: color-mix(in srgb, var(--wp--preset--color--surface) 65%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		backdrop-filter: blur(14px) saturate(1.4);
	}
}

/* ================================================================
   Hover-lift block style (register_block_style: a4k-lift, for images/groups)
================================================================ */
.is-style-a4k-lift {
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--border-radius--lg, 16px);
}

.is-style-a4k-lift:hover {
	transform: translateY(-8px) scale(1.02);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 20px 40px color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
}

/* ================================================================
   Client logo marquee (.a4k-marquee wrapper + .a4k-marquee-track)
================================================================ */
.a4k-marquee {
	overflow: hidden;
	width: 100%;
	position: relative;
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.a4k-marquee-track {
	display: flex;
	align-items: center;
	gap: 3rem;
	width: max-content;
	animation: a4k-marquee-scroll 30s linear infinite;
}

.a4k-marquee-track:hover {
	animation-play-state: paused;
}

@keyframes a4k-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.a4k-marquee img {
	height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%) opacity(0.45);
	transition: filter 0.4s ease;
}

.a4k-marquee img:hover {
	filter: grayscale(0%) opacity(1);
}

/* ================================================================
   Motion is CSS-first and must respect user preference.
================================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.a4k-marquee-track {
		animation: none;
		flex-wrap: wrap;
	}
}

/* ================================================================
   Apple type scale — parent v0.7.0 (Dale, 2026-08-24)
   Applies to ALL A4K sites (NextSchool, ThinkGen, Ai4Kids).
   Sizes/weights/line-heights/letter-spacings lifted 1:1 from
   apple.com CSS (typography-* tokens), read live 2026-08-24.
   Breakpoints are Apple's: desktop > 1068px, tablet <= 1068px,
   mobile <= 734px. Heading LEVELS unchanged — SEO/GEO safe.

   H1 = headline-super   80 / 64 / 48
   H2 = headline         48 / 40 / 32
   H3 = eyebrow-super    32 / 28 / 24
   H4 = eyebrow-elevated 28 / 24 / 21
   H5 = eyebrow          24 / 21 / 19
   H6 = eyebrow-reduced  21 / 19 / 17
   body = 17 · lead(intro) = 21 · small = 14 · caption = 12
   All headings weight 600 (Apple semibold), not 700.
   Children may re-map COMPONENT headings onto this scale but must
   not change the element scale itself.
   ================================================================ */

h1, h2, h3, h4, h5, h6,
.wp-block-heading { font-weight: 600; word-break: keep-all; }

h1, h1.wp-block-heading { font-size: 80px; line-height: 1.05;    letter-spacing: -0.015em; }
h2, h2.wp-block-heading { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
h3, h3.wp-block-heading { font-size: 32px; line-height: 1.125;   letter-spacing: 0.004em; }
h4, h4.wp-block-heading { font-size: 28px; line-height: 1.14286; letter-spacing: 0.007em; }
h5, h5.wp-block-heading { font-size: 24px; line-height: 1.16667; letter-spacing: 0.009em; }
h6, h6.wp-block-heading { font-size: 21px; line-height: 1.19048; letter-spacing: 0.011em; }

body { font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; }
.a4k-lead, .ns-lead, .ns-intro { font-size: 21px; line-height: 1.381; letter-spacing: 0.011em; }
.a4k-caption { font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }

/* Tablet <= 1068px */
@media (max-width: 1068px) {
	h1, h1.wp-block-heading { font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em; }
	h2, h2.wp-block-heading { font-size: 40px; line-height: 1.1; letter-spacing: 0em; }
	h3, h3.wp-block-heading { font-size: 28px; line-height: 1.14286; letter-spacing: 0.007em; }
	h4, h4.wp-block-heading { font-size: 24px; line-height: 1.16667; letter-spacing: 0.009em; }
	h5, h5.wp-block-heading { font-size: 21px; line-height: 1.19048; letter-spacing: 0.011em; }
	h6, h6.wp-block-heading { font-size: 19px; line-height: 1.21053; letter-spacing: 0.012em; }
}

/* Mobile <= 734px */
@media (max-width: 734px) {
	h1, h1.wp-block-heading { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
	h2, h2.wp-block-heading { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
	h3, h3.wp-block-heading { font-size: 24px; line-height: 1.16667; letter-spacing: 0.009em; }
	h4, h4.wp-block-heading { font-size: 21px; line-height: 1.19048; letter-spacing: 0.011em; }
	h5, h5.wp-block-heading { font-size: 19px; line-height: 1.21053; letter-spacing: 0.012em; }
	h6, h6.wp-block-heading { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; }
	body { letter-spacing: -0.016em; }
	.a4k-lead, .ns-lead, .ns-intro { font-size: 19px; line-height: 1.4211; letter-spacing: 0.012em; }
}