/* Additions to site.css (the compiled design system) that only make sense inside WordPress. */

:root {
  --font-spectral: "Spectral", "Spectral Fallback";
  --font-spectral-strong: "Spectral", "Spectral Fallback";
  --font-manrope: "Manrope", "Manrope Fallback";
  --font-ibm-plex-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
}

/* The sticky header sits below the WordPress toolbar for signed-in editors. */
.admin-bar .loa-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .loa-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .loa-header { top: 0; } }

[hidden] { display: none !important; }

/* Images that fill their frame (cards, featured images). */
.loa-fill { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Article body: map WordPress block markup onto the article typography ── */
.prose-loa .wp-block-image { margin-block: 2.4em; }
.prose-loa .wp-block-image img { height: auto; max-width: 100%; display: block; margin-inline: auto; }
.prose-loa .wp-block-table { margin-block: 2em; overflow-x: auto; border: 1px solid rgba(244, 240, 255, 0.1); border-radius: 1.25rem; }
.prose-loa .wp-block-separator { margin-block: 3em; }
.prose-loa .wp-block-embed { margin-block: 2.4em; }
.prose-loa .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 1.25rem; }
.prose-loa .alignwide { margin-inline: 0; }
@media (min-width: 1100px) { .prose-loa .alignwide { margin-inline: -4.5rem; } }

/* Callout boxes: a Group block with one of the "Callout" styles. */
.prose-loa [class*="is-style-callout-"] { margin-block: 2em; border-radius: 1.5rem; border: 1px solid rgba(191, 120, 255, 0.25); background: rgba(191, 120, 255, 0.07); padding: 1.25rem 1.5rem; font-family: var(--font-sans); font-size: 0.9em; line-height: 1.7; }
.prose-loa [class*="is-style-callout-"] > * + * { margin-top: 0.75rem; }
.prose-loa [class*="is-style-callout-"]::before { content: "Good to know"; display: block; margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-orchid); }
.prose-loa .is-style-callout-warning { border-color: rgba(255, 77, 147, 0.3); background: rgba(255, 77, 147, 0.06); }
.prose-loa .is-style-callout-tip::before { content: "Try this"; }
.prose-loa .is-style-callout-warning::before { content: "Keep in mind"; color: var(--color-blush); }
.prose-loa .is-style-callout-affirmation { border-color: rgba(255, 177, 61, 0.3); background: rgba(255, 177, 61, 0.06); font-family: var(--font-serif); font-style: italic; font-size: 1.3em; line-height: 1.45; color: var(--color-fog); }
.prose-loa .is-style-callout-affirmation::before { content: "✦ Affirmation"; color: var(--color-gold); font-style: normal; }

/* WordPress search form / comments are not used; hide stray core widgets if a plugin injects them. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Heading of a side column (e.g. "Editor's picks" beside the lead story): a real heading, not a small label. */
.loa-side-heading { margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(244, 240, 255, 0.1); font-family: var(--font-serif); font-size: clamp(26px, 2.2vw, 32px); font-weight: 400; line-height: 1.2; color: var(--color-fog); }

/* ───────────────────────── Motion ─────────────────────────
   Calm and brief: fades and small rises only, on transform/opacity so nothing shifts layout.
   Article text, titles and featured images never animate. The compiled site.css already switches
   every animation and transition off for people who ask for reduced motion. */

:root { --loa-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Page headers: the label, title, intro and actions arrive in a short sequence. */
@keyframes loa-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.loa-rise > * { animation: loa-rise 0.7s var(--loa-ease) both; }
.loa-rise > :nth-child(2) { animation-delay: 0.06s; }
.loa-rise > :nth-child(3) { animation-delay: 0.12s; }
.loa-rise > :nth-child(4) { animation-delay: 0.18s; }
.loa-rise > :nth-child(n + 5) { animation-delay: 0.24s; }

/* Cards and banners fade up as they scroll into view. Only active once the script in <head> has
   confirmed it can run (html.loa-motion); without it everything is simply visible. */
html.loa-motion .loa-reveal { opacity: 0; transform: translateY(14px); }
html.loa-motion .loa-reveal.is-in,
html.loa-motion-done .loa-reveal { opacity: 1; transform: none; transition: opacity 0.6s var(--loa-ease), transform 0.6s var(--loa-ease); transition-delay: var(--loa-delay, 0ms); }

/* Menus open with a short settle instead of popping in. */
@keyframes loa-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-topics-menu].block > ul { animation: loa-pop 0.18s var(--loa-ease) both; transform-origin: top center; }
[data-mobile-nav]:not([hidden]) { animation: loa-pop 0.22s var(--loa-ease) both; }
details[open] > nav { animation: loa-pop 0.22s var(--loa-ease) both; }

/* Buttons respond to the pointer and to being pressed. */
.btn-primary, .btn-ghost { transition: filter 0.2s, transform 0.2s var(--loa-ease), border-color 0.2s, background 0.2s, color 0.2s; }
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-ghost:active { transform: translateY(0) scale(0.98); }

/* Topic tiles lift slightly on hover. */
a.group.rounded-card, a.group.rounded-3xl { transition: border-color 0.25s, background-color 0.25s, transform 0.25s var(--loa-ease); }
a.group.rounded-card:hover, a.group.rounded-3xl:hover { transform: translateY(-2px); }

/* Reading progress: a hairline under the header on articles. */
.loa-progress { position: absolute; inset: auto 0 -1px 0; height: 2px; pointer-events: none; }
.loa-progress > span { display: block; height: 100%; transform: scaleX(0); transform-origin: left center; background-image: linear-gradient(103deg, #bf78ff, #ff0074); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .loa-rise > *, [data-topics-menu].block > ul, [data-mobile-nav]:not([hidden]), details[open] > nav { animation: none; }
  .btn-primary:hover, .btn-ghost:hover, .btn-primary:active, .btn-ghost:active, a.group.rounded-card:hover, a.group.rounded-3xl:hover { transform: none; }
  .loa-progress { display: none; }
}