/* ==========================================================================
   HQDM — base: tokens, reset, type, links, buttons, focus, utilities.
   Every value comes from theme.json presets (aliased to short --hq-* names).
   ========================================================================== */
:root {
	--hq-ink: var(--wp--preset--color--ink);
	--hq-ink-2: var(--wp--preset--color--ink-2);
	--hq-surface: var(--wp--preset--color--surface);
	--hq-surface-2: var(--wp--preset--color--surface-2);
	--hq-text: var(--wp--preset--color--text);
	--hq-muted: var(--wp--preset--color--muted);
	--hq-p1: var(--wp--preset--color--purple-1);
	--hq-p2: var(--wp--preset--color--purple-2);
	--hq-p3: var(--wp--preset--color--purple-3);
	--hq-accent: var(--wp--preset--color--accent-text);
	--hq-lavender: var(--wp--preset--color--lavender);
	--hq-gold: var(--wp--preset--color--gold);
	--hq-white: var(--wp--preset--color--white);
	--hq-line: var(--wp--custom--line);
	--hq-line-strong: rgba(221, 218, 231, .22);
	--hq-glass: linear-gradient(180deg, rgba(31, 20, 64, .72), rgba(18, 10, 36, .72));
	--hq-glow: var(--wp--custom--shadow--glow);
	--hq-r-sm: var(--wp--custom--radius--sm);
	--hq-r: var(--wp--custom--radius--card);
	--hq-r-lg: var(--wp--custom--radius--lg);
	--hq-gutter: var(--wp--custom--gutter);
	--hq-wide: var(--wp--style--global--wide-size, 1240px);
	--hq-read: 68ch;
	--hq-section: clamp(4rem, 8vw, 7rem);
	--hq-ease: cubic-bezier(.22, 1, .36, 1);
	--hq-ease-in: cubic-bezier(.7, 0, .84, 0);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
	margin: 0;
	background: var(--hq-ink);
	color: var(--hq-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
::selection { background: var(--hq-p1); color: #fff; }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; margin-block: 0 .5em; }
p, li { text-wrap: pretty; }
p { margin-block: 0 1em; }
strong, b { color: var(--hq-white); font-weight: 650; }
.hq-split-title { font-size: var(--wp--preset--font-size--heading-lg); max-width: 18ch; }
.hq-hero__title { font-size: var(--wp--preset--font-size--display); line-height: .95; letter-spacing: -.045em; font-weight: 650; }
.hq-section-lede, .hq-hero__lede { font-size: var(--wp--preset--font-size--lead); color: var(--hq-muted); line-height: 1.55; }
.hq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin: 0 0 1.25rem;
	padding: .42rem .95rem .42rem .8rem;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--hq-lavender);
	background: linear-gradient(180deg, rgba(113, 61, 223, .28), rgba(113, 61, 223, .12));
	box-shadow: inset 0 0 0 1px rgba(151, 71, 255, .45), 0 0 24px -6px rgba(151, 71, 255, .6);
}
.hq-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hq-gold);
	box-shadow: 0 0 10px var(--hq-gold);
	animation: hq-pulse 2.4s var(--hq-ease) infinite;
}
@keyframes hq-pulse { 50% { opacity: .35; transform: scale(.7); } }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a { color: var(--hq-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .25s var(--hq-ease); }
a:hover { color: var(--hq-white); }
:where(p, li) > a:not(.wp-block-button__link) { text-decoration-color: rgba(157, 123, 255, .5); }

/* --------------------------------------------------------------------------
   Buttons
   Primary "star" button: solid HQDM purple + a conic light ring that orbits the
   border (StarBorder idea). Ghost: line border, fills on hover.
   -------------------------------------------------------------------------- */
@property --hq-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	text-decoration: none;
	transition: background-color .3s var(--hq-ease), color .3s var(--hq-ease), box-shadow .3s var(--hq-ease), transform .3s var(--hq-ease);
	will-change: transform;
}
.is-style-hq-star .wp-block-button__link {
	isolation: isolate;
	background: var(--hq-p1);
	box-shadow: 0 10px 30px -10px rgba(113, 61, 223, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.is-style-hq-star .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--hq-angle), transparent 0 62%, rgba(255, 255, 255, .95) 72%, var(--hq-gold) 78%, transparent 88%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: hq-orbit 3.2s linear infinite;
	z-index: -1;
	pointer-events: none;
}
.is-style-hq-star .wp-block-button__link:hover { background: var(--hq-p2); box-shadow: 0 16px 44px -10px rgba(151, 71, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
@keyframes hq-orbit { to { --hq-angle: 360deg; } }
.is-style-hq-ghost .wp-block-button__link {
	background: rgba(221, 218, 231, .04);
	color: var(--hq-text);
	box-shadow: inset 0 0 0 1px var(--hq-line-strong);
}
.is-style-hq-ghost .wp-block-button__link:hover { background: var(--hq-white); color: var(--hq-ink); }

/* --------------------------------------------------------------------------
   Focus, skip link
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--hq-gold); outline-offset: 3px; border-radius: 6px; }
.wp-block-button__link:focus-visible { outline-offset: 4px; border-radius: 999px; }
.hq-skip {
	position: fixed;
	left: 16px;
	top: -60px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--hq-gold);
	color: var(--hq-ink);
	font-weight: 600;
	text-decoration: none;
	transition: top .2s;
}
.hq-skip:focus { top: 16px; color: var(--hq-ink); }

/* --------------------------------------------------------------------------
   Lists, tables, media
   -------------------------------------------------------------------------- */
ul.wp-block-list, ol.wp-block-list { padding-left: 1.2em; }
.wp-block-list li + li { margin-top: .45em; }
.wp-block-list li::marker { color: var(--hq-p3); }
.hq-table { overflow-x: auto; border-radius: var(--hq-r); box-shadow: inset 0 0 0 1px var(--hq-line); background: var(--hq-glass); }
.hq-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.hq-table th, .hq-table td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--hq-line); text-align: left; }
.hq-table thead th { color: var(--hq-white); font-weight: 600; background: rgba(113, 61, 223, .18); }
.hq-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-image img { border-radius: var(--hq-r-sm); }
.wp-block-video video { width: 100%; border-radius: var(--hq-r); background: #000; }

/* Glass card (block style) */
.is-style-hq-card { background: var(--hq-glass); border-radius: var(--hq-r); box-shadow: inset 0 0 0 1px var(--hq-line); padding: clamp(1.25rem, 3vw, 2rem); }

/* Motion helpers: hidden states are only ever set by motion.js, never here, so no-JS and reduced motion show everything. */
.hq-split-line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}