/*
Theme Name: Awakening
Theme URI: https://awakening.com.au
Description: Child of Twenty Twenty-Five that dresses the WordPress /lms site in The Awakening Group design — the same header, footer, fonts and tokens as the Astro front end. The header/footer parts are generated from the Astro components (build-parts.mjs); the look is the site's own compiled stylesheet, enqueued from the docroot (functions.php). Any current block theme works as the parent; switch `Template:` if your WordPress uses a different default.
Template: twentytwentyfive
Author: The Awakening Group
Version: 1.0.0
Requires at least: 6.7
Text Domain: awakening-lms
*/

/* ---------------------------------------------------------------------------
   WordPress content → the Awakening design.

   functions.php enqueues the site's compiled Tailwind CSS site-wide, which defines every design
   token as a CSS variable on :root — so this file references var(--color-ink) etc. That CSS also
   ships Tailwind's preflight (zeroes heading sizes and block margins); the rules below rebuild a
   readable article that matches src/pages/templates/article.astro (the house style for a post).
   --------------------------------------------------------------------------- */

body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
}

/* The rolling background mark (.tag-bg, injected at wp_body_open) is fixed at z-0; lift all page
   content above it, the way the Astro layout wraps <main> in relative z-1. */
.wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* --- Title --------------------------------------------------------------- */
.wp-block-post-title,
.entry-title {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: var(--text-h3); /* archive / listing titles */
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin: 0 0 0.5em;
}
.wp-block-post-title a,
.entry-title a {
  color: inherit;
  text-decoration: none;
}
.wp-block-post-title a:hover,
.entry-title a:hover {
  color: var(--color-orange);
}
/* The single-post hero title, at the article template's size. */
.single .wp-block-post-title {
  font-size: var(--text-h2-lg);
  line-height: 1.12;
  letter-spacing: -1px;
  margin-top: 0.4em;
}

/* --- Category eyebrow (post-terms is a link; inherit the eyebrow tone, not the parent
       theme's link colour, so it matches templates/article's plain eyebrow) --------------- */
.wp-block-post-terms.tag-eyebrow a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 11px;
}
.wp-block-post-terms.tag-eyebrow a:hover {
  color: var(--color-orange);
}

/* --- Post meta (date/author line) ---------------------------------------- */
.awk-post-meta {
  margin-top: 1rem;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-muted-strong);
}
.awk-post-meta a {
  color: inherit;
  text-decoration: none;
}
.awk-post-meta a:hover {
  color: var(--color-orange);
}

/* --- Featured image ------------------------------------------------------ */
.awk-featured {
  margin-top: 2.25rem;
}
.awk-featured img,
.wp-block-post-featured-image img,
.wp-block-post-content img,
.entry-content img {
  border-radius: 8px;
  height: auto;
}

/* --- Body copy — the article measure ------------------------------------- */
.wp-block-post-content,
.entry-content {
  margin-top: 2.25rem;
  margin-bottom: 3rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.wp-block-post-content > * + *,
.entry-content > * + * {
  margin-top: 1.25em;
}

/* Subheadings are the display face at regular weight — not bold, not orange. */
.wp-block-post-content :is(h2, h3, h4),
.entry-content :is(h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
  margin-top: 1.6em;
}
.wp-block-post-content h2,
.entry-content h2 {
  font-size: var(--text-h3);
  line-height: 1.2;
}
.wp-block-post-content h3,
.entry-content h3 {
  font-size: 22px;
  line-height: 1.25;
}

.wp-block-post-content a,
.entry-content a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wp-block-post-content a:hover,
.entry-content a:hover {
  text-decoration: none;
}

.wp-block-post-content strong,
.entry-content strong {
  color: var(--color-ink);
  font-weight: 600;
}

.wp-block-post-content :is(ul, ol),
.entry-content :is(ul, ol) {
  padding-left: 1.5rem;
}
.wp-block-post-content ul,
.entry-content ul {
  list-style: disc;
}
.wp-block-post-content ol,
.entry-content ol {
  list-style: decimal;
}
.wp-block-post-content li + li,
.entry-content li + li {
  margin-top: 0.5em;
}

.wp-block-post-content blockquote,
.entry-content blockquote {
  border-left: 2px solid var(--color-orange);
  padding-left: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.35;
  color: var(--color-ink);
}

/* --- Author box ("Written by") — mirrors templates/article.astro, and gives the article its
       bottom breathing room before the footer ---------------------------------------------- */
.awk-author {
  margin-top: 3rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 1.75rem;
}
/* Gap before the footer. Padding, not margin — WordPress flow layout zeroes child margin-block-end. */
main.tag-section {
  padding-bottom: 4.5rem;
}
.awk-author .tag-eyebrow {
  margin-bottom: 1rem;
}
.wp-block-post-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.wp-block-post-author__avatar img {
  width: 72px;
  height: 72px;
  border-radius: 999px;
}
.wp-block-post-author__byline {
  display: none;
}
.wp-block-post-author__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--color-ink);
}
.wp-block-post-author__name a {
  color: inherit;
  text-decoration: none;
}
.wp-block-post-author__bio {
  margin-top: 0.25rem;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-muted);
}

/* --- Homepage article grid (Query Loop) — the /articles/ card look ---------------------- */
.awk-cards {
  margin-top: 2.25rem;
  gap: 2.75rem 1.75rem;
}
.awk-cards li {
  margin: 0;
}
.awk-card-media img {
  border-radius: 6px;
}
.awk-card-date {
  margin-top: 0.75rem;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
.awk-card-title {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  color: var(--color-ink);
}
.awk-card-title a {
  color: inherit;
  text-decoration: none;
}
.awk-card-title a:hover {
  color: var(--color-orange);
}

/* ===========================================================================
   WordPress cascade overrides.

   The compiled Tailwind CSS is wrapped in @layer (theme/base/components/utilities). WordPress's
   global-styles and the parent theme's style.css are UNLAYERED, and unlayered CSS beats any layer
   regardless of source order — so the design's utilities silently lose to WP for anything WP also
   styles (element font-sizes, link colours, block gaps). This file is unlayered and enqueued last,
   so re-asserting the handful of conflicting rules here makes the design win.
   =========================================================================== */

/* Heading sizes (WP styles h1/h2 at the element level) */
.text-display {
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
}
.text-h2-lg {
  font-size: var(--text-h2-lg);
  line-height: var(--text-h2-lg--line-height);
}
.text-h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
}
.text-h2-sm {
  font-size: var(--text-h2-sm);
  line-height: var(--text-h2-sm--line-height);
}
.text-h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}

/* Colours WP would otherwise repaint (headings/text on dark bands) */
.text-cream {
  color: var(--color-cream);
}
.text-peach {
  color: var(--color-peach);
}

/* Section rhythm (WP's block gap otherwise flattens it) */
.tag-section {
  margin-top: var(--spacing-section);
}
.tag-section-flush,
.awk-hero {
  margin-top: 0;
}

/* Links inherit their surrounding colour (as on Astro), instead of WP's global link colour;
   per-context hovers and the primary button keep their own colours. */
.wp-block-template-part a {
  color: inherit;
}
/* The primary button keeps cream text on orange everywhere (header AND page body). 0,1,1 beats both
   WP's global link colour and the .wp-block-template-part a inherit rule above. */
a.tag-btn-primary {
  color: var(--color-cream);
}
[data-nav-dropdowns] a:hover {
  color: var(--color-orange);
}
.bg-charcoal a:hover {
  color: var(--color-gold);
}

/* WordPress search block (search results / 404 / widgets) → the primary-button look + a pill input. */
.wp-block-search__button.wp-element-button {
  background: var(--color-orange);
  color: var(--color-cream);
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
}
.wp-block-search__button.wp-element-button:hover {
  background: var(--color-orange-deep);
}
.wp-block-search__input {
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--color-cream);
  color: var(--color-ink);
}

/* --- Share this post ([awk_share]) --------------------------------------- */
.awk-share {
  margin-top: 3rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 1.5rem;
}
.awk-share .tag-eyebrow {
  margin-bottom: 0.9rem;
}
.awk-share__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.awk-share__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.awk-share__link:hover {
  color: var(--color-orange);
  border-color: var(--color-orange);
}

/* --- Previous / next post navigation ([awk_postnav]) --------------------- */
.awk-postnav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 1.75rem;
}
.awk-postnav__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 22rem;
  color: var(--color-ink);
  text-decoration: none;
}
.awk-postnav__prev {
  align-items: flex-start;
  text-align: left;
}
.awk-postnav__next {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
.awk-postnav__title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  color: var(--color-ink);
}
.awk-postnav__link:hover .awk-postnav__title {
  color: var(--color-orange);
}