/*
Theme Name: Awakening WooCommerce
Theme URI: https://awakening.com.au
Description: Child of Twenty Twenty-Five for the commerce host (student.awakening.com.au). Dresses WooCommerce + Sensei in The Awakening Group design — same header, footer, fonts and tokens as the Astro front end and the /lms theme. Shop archive and single product use classic WooCommerce template overrides (woocommerce/) matching src/pages/shop.astro and src/pages/templates/course.astro; cart, checkout and account inherit the design via style.css. Header/footer parts are generated from the Astro components (build-parts.mjs).
Template: twentytwentyfive
Author: The Awakening Group
Version: 1.0.0
Requires at least: 6.7
Text Domain: awakening-woocommerce
*/

/* ---------------------------------------------------------------------------
   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 parent theme's global styles force body font-size/weight/line-height/letter-spacing onto the
     body (font-size: large, line-height: 1.4, letter-spacing: -0.1px, font-weight: 300), overriding the
     design — which sizes type per element off the browser/preflight defaults. Reset them so the WP
     site matches the Astro front end. style.css loads after global-styles, so this wins. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

/* 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;
}

/* Cart and checkout are working pages, not marketing — the background petal mark distracts and can
   bleed through the summary. Hide it there. */
.woocommerce-cart .tag-bg,
.woocommerce-checkout .tag-bg {
  display: none;
}

/* --- 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;
}
/* Product-grid PAGES (e.g. /courses/, /books/ — a [products] shortcode in the page body) get the
   shop-archive display heading: at the display size (not the h3 listing size), full width and flush
   left, matching #shop-heading in templates/archive-product.html. :has() scopes it so ordinary
   pages/posts keep the smaller, layout-constrained title. */
.page:has(.woocommerce ul.products) .wp-block-post-title {
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  max-width: var(--container-site);
  margin-inline: 0;
  text-align: left;
}

/* --- 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);
}

/* ---------------------------------------------------------------------------
   WooCommerce — the commerce host only.

   The shop archive routes through the Classic Template block, so the product
   loop is WooCommerce's ul.products rendered by woocommerce/content-product.php.
   The CARD TEXT reuses the exact utility classes from src/pages/shop.astro (they
   are already in site.css), so the only bespoke CSS needed is the grid container
   and the image box — WooCommerce's own general stylesheet controls those and
   would otherwise float the items into rows.
   --------------------------------------------------------------------------- */

/* The grid, matching shop.astro: 1 → 2 → 3 columns. */
.woocommerce ul.products {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 3rem;
}
@media (min-width: 640px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Undo WooCommerce's default float/width on the loop items; make each a column. */
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}
/* WooCommerce's ul.products clearfix pseudo-elements add stray boxes to the grid — remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
  content: none;
}

/* A [products] grid embedded in a PAGE (e.g. /books/, /courses/) sits inside the 720px constrained
   content measure, which cramps the grid. Let the WooCommerce wrapper use the full site width so the
   grid matches the shop archive. (The archive itself is already full-width via .tag-wrap.awk-shop.) */
.entry-content .woocommerce,
.wp-block-post-content .woocommerce {
  max-width: var(--container-site);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Product card — matches src/pages/shop.astro. Defined here (unlayered) rather than via utility
   classes because WordPress sets link colour unlayered, which would beat @layer utilities and leave
   the title / "View details" links the wrong colour. Thumbnail shows at its natural ratio: no forced
   aspect-ratio, no placeholder background. */
.awk-product__media {
  display: block;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}
.awk-product__media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.awk-product__title {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
}
.awk-product__title a {
  color: var(--color-ink);
  text-decoration: none;
}
.awk-product__title a:hover {
  color: var(--color-orange);
}
.awk-product__desc {
  margin: 0.5rem 0 0;
  color: var(--color-muted);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.awk-product__cat {
  margin: 0.75rem 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
/* Card footer: price + "View details" pinned as one group to the card bottom (margin-top:auto), so
   across the grid the prices AND the buttons each line up on one baseline regardless of how tall the
   title/description runs. One auto margin on the wrapper — putting it on both price and button would
   split the free space between them and leave the price stranded mid-card. */
.awk-product__foot {
  margin-top: auto;
  padding-top: 1rem;
}
.awk-product__price {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-ink);
}
.awk-product__price del {
  color: var(--color-muted);
  font-weight: 300;
  margin-right: 0.4rem;
}
.awk-product__price ins {
  text-decoration: none;
}
.awk-product__more {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-orange);
  text-decoration: none;
}
.awk-product__more:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   WooCommerce PAGES — cart, checkout, my-account, single product.

   These surfaces are WooCommerce's own markup (classic + block), plus, on the
   block cart/checkout, extra unlayered WC stylesheets that beat our @layer-wrapped
   Tailwind utilities. So the rules below are deliberately theme-level (unlayered)
   and specific enough to win — dressing WooCommerce in the design tokens.
   First pass: verify in a real browser (the DDEV in-app preview blocks assets).
   --------------------------------------------------------------------------- */

/* Header logo — the utility class (h-[clamp…]) loses to WC block img resets on
   cart/checkout, rendering the lockup at its natural height. Pin it here. */
header a[aria-label*="home"] img {
  height: clamp(38px, 8.5vw, 54px);
  width: auto;
}
/* Footer logo — WooCommerce's `.woocommerce-page img { height:auto }` (unlayered) overrides the
   logo's .h-12 utility, so pin the footer lockup height too. */
footer img[src*="logo-lockup"] {
  height: 3rem;
  width: auto;
}

/* Buttons — classic (.button) and block (.wc-block-components-button) → the pill CTA. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 26px;
  box-shadow: 0 8px 20px rgba(31, 26, 22, 0.18);
  transition: background 0.15s ease;
  cursor: pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--color-orange-deep);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--color-orange-deep);
}

/* Form fields — rounded, cream ground, rule border. */
.woocommerce form .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea,
.wc-block-components-text-input input {
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-cream);
}
.woocommerce form .input-text:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  border-color: var(--color-orange);
}

/* Notices — info/success/error. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  border-radius: 12px;
  border: 1px solid var(--color-rule);
  background: var(--color-stone);
  color: var(--color-ink);
  font-size: 14px;
  padding: 14px 18px;
}
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  border-left: 3px solid var(--color-orange);
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-left: 3px solid #b42318;
}

/* Tables — cart, order review, account orders. */
.woocommerce table.shop_table {
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  background: var(--color-stone);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  padding: 14px 16px;
}

/* My-account — two columns (navigation left, content right). WooCommerce floats the nav and content
   and our preflight breaks those floats, so lay it out with grid instead and clean the nav <ul>
   (WooCommerce adds float, bullets and borders to the list items). */
/* WooCommerce's .woocommerce::before/::after clearfix become empty GRID ITEMS in the grid below and
   throw the columns off — remove them so only the nav, content (and notices) are grid children.
   .awk-account-shell is our wrapper that repeats the account sidebar on the Sensei My Courses page. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.awk-account-shell::before,
.awk-account-shell::after {
  content: none;
}
/* Only the two-column grid when the nav sidebar is present. The woocommerce-account body class is also
   set on the LOGGED-OUT login and lost-password pages, which have no navigation — without this guard
   their single form is crammed into the 230px first column. :has() keeps them single-column. */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
  .awk-account-shell:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  /* notices span the full width above both columns (usually empty) */
  .woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
  .awk-account-shell > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
}
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-MyAccount-navigation li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-stone);
  color: var(--color-ink);
}

/* Header cart icon (injected in functions.php next to the account button) + live count badge.
   Borderless icon-only — no pill, minimal footprint. */
.awk-cart {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--color-ink);
  border-radius: 999px;
}
.awk-cart:hover {
  color: var(--color-orange);
}
.awk-cart svg {
  width: 22px;
  height: 22px;
  display: block;
}
.awk-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-cream);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.awk-cart-count.hidden {
  display: none;
}

/* ---------------------------------------------------------------------------
   Order received / thank-you (WooCommerce Blocks order-confirmation). Sparse content on the wide
   checkout container, so centre it on a reading measure and dress each block to the design.
   --------------------------------------------------------------------------- */
.woocommerce-order-received .tag-wrap > * {
  max-width: 720px;
  margin-inline: auto;
}
/* "Thank you. Your order has been received." → a display heading, not 18px body text. */
.woocommerce-order-received .wc-block-order-confirmation-status {
  text-align: center;
  margin-top: 1rem;
  font-size: 0; /* collapse the wrapper's has-font-size; the <p> sets its own */
}
.woocommerce-order-received .wc-block-order-confirmation-status p {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
}
.woocommerce-order-received .wc-block-order-confirmation-status-description {
  text-align: center;
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
}
/* "Log in here" and any confirmation button → the brand pill. */
.woocommerce-order-received
  .wc-block-order-confirmation-status-description
  .button,
.woocommerce-order-received
  .wc-block-order-confirmation-status-description
  a.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-cream);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 26px;
  box-shadow: 0 8px 20px rgba(31, 26, 22, 0.18);
  text-decoration: none;
}
.woocommerce-order-received
  .wc-block-order-confirmation-status-description
  .button:hover,
.woocommerce-order-received
  .wc-block-order-confirmation-status-description
  a.wp-element-button:hover {
  background: var(--color-orange-deep);
}
/* Section spacing + headings inside the confirmation blocks. */
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-totals,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-downloads,
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
.woocommerce-order-received
  .wp-block-woocommerce-order-confirmation-additional-fields,
.woocommerce-order-received
  .wp-block-woocommerce-order-confirmation-additional-information {
  margin-top: 2.5rem;
}
.woocommerce-order-received h2,
.woocommerce-order-received h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-ink);
  margin: 0 0 0.75rem;
}
/* Order summary (number / date / email / total) → a clean bordered card. */
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary {
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-cream);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  list-style: none;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.woocommerce-order-received
  .wc-block-order-confirmation-summary-list-item__key {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
.woocommerce-order-received
  .wc-block-order-confirmation-summary-list-item__value {
  font-size: 15px;
  color: var(--color-ink);
}
/* Totals / order-details table → rounded, matching the cart/account tables. */
.woocommerce-order-received table {
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 15px;
}
.woocommerce-order-received table th,
.woocommerce-order-received table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-rule);
}
.woocommerce-order-received table tr:last-child th,
.woocommerce-order-received table tr:last-child td {
  border-bottom: 0;
}
/* Billing / shipping addresses → two even columns, stacking on mobile. */
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.woocommerce-order-received
  .wc-block-order-confirmation-address-wrapper
  > .wp-block-column {
  flex: 1 1 260px;
  margin: 0;
}
.woocommerce-order-received address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
}

/* Single product — price, add-to-cart, long-description prose. */
.awk-single {
  margin-bottom: 3rem;
}
.awk-single .awk-purchase .price {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--color-orange);
  margin: 0 0 1rem;
}
.awk-single .awk-purchase .price del {
  color: var(--color-ink);
  font-size: 80%;
}
.awk-single .awk-purchase .quantity input {
  width: 68px;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
}
.awk-single .awk-purchase form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.awk-single .awk-prose > * + * {
  margin-top: 1rem;
}
.awk-single .awk-prose h2,
.awk-single .awk-prose h3 {
  font-family: var(--font-display);
  margin-top: 1.6rem;
}

/* Accordion — native <details>/<summary>, replacing the Elementor toggle in product descriptions
   (e.g. crisis-counselling). No JS, no plugin; the caret rotates on open. */
.awk-accordion {
  margin: 1.5rem 0;
  border-top: 1px solid var(--color-rule);
}
.awk-accordion details {
  border-bottom: 1px solid var(--color-rule);
}
.awk-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.25rem;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-ink);
}
.awk-accordion summary::-webkit-details-marker {
  display: none;
}
.awk-accordion summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-orange);
  border-bottom: 2px solid var(--color-orange);
  transform: rotate(-45deg); /* ▶ closed */
  transition: transform 0.2s ease;
}
.awk-accordion details[open] summary::before {
  transform: rotate(45deg); /* ▼ open */
}
.awk-accordion summary:hover {
  color: var(--color-orange);
}
.awk-accordion details > ul {
  margin: 0 0 1.1rem;
  padding-left: 1.9rem;
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.7;
}
.awk-accordion details > ul li {
  margin: 0.15rem 0;
}

/* Add-to-cart notice on the single product — space it from the header only when present. */
.awk-single-notices:not(:empty) {
  padding-top: 1.5rem;
}

.wp-site-blocks :focus:not(:focus-visible) {
  outline: none;
}

/* WooCommerce gives the notices wrapper tabindex="-1" and focuses it to announce a notice; it is a
   container, not a control, so the focus ring reads as a stray box. Suppress it (the notice text is
   what the user is meant to see). */
.woocommerce-notices-wrapper:focus,
.woocommerce-notices-wrapper:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------------------
   Single product — rating, variations form, long-description prose.
   --------------------------------------------------------------------------- */

/* Our own rating (replaces WooCommerce's .star-rating, which needs the WC icon font and overlapped). */
.awk-single .awk-rating {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 15px;
  color: var(--color-muted);
}
.awk-single .awk-rating svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--color-orange);
}
.awk-single .awk-rating strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* WooCommerce's font star-rating in the reviews list + summary: filled stars orange, empty track a
   faint orange so the shape still reads. Same accent as the hero .awk-rating star above. */
.awk-reviews .star-rating::before {
  color: color-mix(in srgb, var(--color-orange) 26%, transparent);
}
.awk-reviews .star-rating span::before {
  color: var(--color-orange);
}

/* Variable-product form: dropdowns stacked, the "Clear" link and per-variation price/availability
   sit in the flow instead of floating and breaking the column. */
.awk-single .variations_form {
  margin: 0;
}
.awk-single table.variations,
.awk-single table.variations tbody,
.awk-single table.variations tr,
.awk-single table.variations th,
.awk-single table.variations td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}
.awk-single table.variations {
  margin-bottom: 0.5rem;
}
.awk-single table.variations th.label {
  margin-top: 0.85rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
.awk-single table.variations td.value {
  margin-top: 0.35rem;
}
.awk-single table.variations select {
  width: 100%;
  max-width: 340px;
  vertical-align: middle;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: var(--color-cream);
  color: var(--color-ink);
}
/* The "Clear" link sits right after the select — give it breathing room and align it. */
.awk-single .reset_variations {
  display: inline-block;
  margin-left: 0.9rem;
  vertical-align: middle;
  font-size: 12.5px;
  color: var(--color-muted);
  text-decoration: underline;
}
.awk-single .single_variation {
  margin-top: 1rem;
}
.awk-single .woocommerce-variation-price .price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
}
.awk-single .woocommerce-variation-availability {
  margin-top: 0.35rem;
  font-size: 13px;
  color: var(--color-muted);
}
.awk-single .woocommerce-variation-description {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--color-muted);
}
.awk-single .woocommerce-variation-add-to-cart {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Long description (the_content) — a readable reading surface on the 760px measure. */
/* Reading measure for the lower single-product sections (About / Additional info / Reviews). Done
   in style.css, not a Tailwind max-w-[…] utility: those arbitrary utilities are only used in the
   theme PHP, which the compiled site.css doesn't scan, so they get purged and never apply. Wider
   than the old 760px, which read cramped against the dense course copy. */
.awk-single .awk-measure {
  max-width: 880px;
}

/* Meta row — full width beneath the hero grid. Flex (not grid) so 3 or 4 items distribute evenly and
   wrap on narrow screens; each item grows to share the row. */
.awk-single .awk-meta {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}
.awk-single .awk-meta > div {
  flex: 1 1 auto;
  min-width: 150px;
}
.awk-single .awk-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-muted-strong);
}
.awk-single .awk-meta dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--color-ink);
}

/* Tabs — Description / Additional details / Reviews. CSS radio tabs: no JS, and the panels are
   display:none rather than removed so the content stays in the DOM for crawlers (review rich-results
   come from the aggregateRating/review JSON-LD in functions.php). Radios sit first inside .awk-tabs
   so `:checked ~ #panel` and `:checked ~ .awk-tabs__nav [for]` can style the active panel and tab. */
.awk-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.awk-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin-bottom: 2rem;
}
.awk-tabs__tab {
  cursor: pointer;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-muted-strong);
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}
.awk-tabs__tab:hover {
  color: var(--color-ink);
}
.awk-tabs__panel {
  display: none;
}
#awk-tab-desc:checked ~ #awk-panel-desc,
#awk-tab-reviews:checked ~ #awk-panel-reviews {
  display: block;
}
#awk-tab-desc:checked ~ .awk-tabs__nav [for="awk-tab-desc"],
#awk-tab-reviews:checked ~ .awk-tabs__nav [for="awk-tab-reviews"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-orange);
}
/* Keyboard: the radios are a group, so arrow keys switch tabs natively; show a ring on the focused
   tab's label. */
#awk-tab-desc:focus-visible ~ .awk-tabs__nav [for="awk-tab-desc"],
#awk-tab-reviews:focus-visible ~ .awk-tabs__nav [for="awk-tab-reviews"] {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

.awk-single .awk-prose {
  color: var(--color-ink-soft);
}
.awk-single .awk-prose ul,
.awk-single .awk-prose ol,
.awk-single .awk-prose blockquote,
.awk-single .awk-prose hr,
.awk-single .awk-prose section,
.awk-single .awk-prose table {
  margin-top: 1.15rem;
}
/* Paragraphs space with margin-bottom, not margin-top (overrides the `> * + *` top-margin rule); hr
   gets bottom breathing room too. */
.awk-single .awk-prose p {
  margin-top: 0;
  margin-bottom: 1.15rem;
}
.awk-single .awk-prose hr {
  margin-bottom: 1.15rem;
}
.awk-single .awk-prose h2,
.awk-single .awk-prose h3,
.awk-single .awk-prose h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.25;
}
.awk-single .awk-prose h2 {
  margin-top: 3rem;
  font-size: 36px;
  font-weight: 500;
}
.awk-single .awk-prose h2 span {
  font-size: 36px !important;
}
.awk-single .awk-prose h3 {
  margin-top: 2.6rem;
  font-size: 28px;
  font-weight: 500;
}
.awk-single .awk-prose h3 span {
  font-size: 28px !important;
}
.awk-single .awk-prose h4 {
  margin-top: 1.9rem;
  font-size: 22px;
  font-weight: 600;
}
.awk-single .awk-prose h4 span {
  font-size: 22px !important;
}
.awk-single .awk-prose > :first-child,
.awk-single .awk-prose section:first-child,
.awk-single .awk-prose section > :first-child {
  margin-top: 0;
}
.awk-single .awk-prose strong {
  font-weight: 600;
  color: var(--color-ink);
}
.awk-single .awk-prose a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.awk-single .awk-prose ul,
.awk-single .awk-prose ol {
  padding-left: 1.3rem;
}
.awk-single .awk-prose li {
  margin-top: 0.4rem;
}
.awk-single .awk-prose ul li {
  list-style: disc;
}
.awk-single .awk-prose ol li {
  list-style: decimal;
}
.awk-single .awk-prose hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
}
.awk-single .awk-prose img {
  border-radius: 6px;
  height: auto;
  max-width: 100%;
}

/* WordPress alignment classes in the migrated course copy. The reading column is narrow and the
   migrated images are large infographics (e.g. 509px wide), so honouring alignleft/alignright as
   real floats wraps text into a sliver and, when a float isn't cleared, the next paragraph rides up
   over the image. Render every aligned image as a cleared, responsive block instead — positioned by
   margin, never floated — so nothing overlaps at any width. */
.awk-single .awk-prose .alignleft,
.awk-single .awk-prose .alignright,
.awk-single .awk-prose .aligncenter,
.awk-single .awk-prose .alignnone {
  display: block;
  float: none;
  clear: both;
  height: auto;
  max-width: 100%;
  margin-top: 1.15rem;
  margin-bottom: 1.15rem;
}
.awk-single .awk-prose .aligncenter {
  margin-inline: auto;
}
.awk-single .awk-prose .alignright {
  margin-inline: auto 0;
}
.awk-single .awk-prose .alignleft {
  margin-inline: 0 auto;
}
.awk-single .awk-prose blockquote {
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-orange);
  font-style: italic;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   Archive pagination.
   --------------------------------------------------------------------------- */
/* WooCommerce's own pagination CSS (.woocommerce nav.woocommerce-pagination ul li) is more specific
   than a plain .woocommerce-pagination rule and adds a bordered bar with floated, border-right'd,
   fixed-height items — so match its selectors and override with !important where WC uses them. */
.woocommerce nav.woocommerce-pagination {
  margin-top: 3rem;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: auto !important;
  padding: 9px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-cream);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-cream);
}

/* ---------------------------------------------------------------------------
   Checkout: the big .tag-section top margin is desktop-only — tablet/mobile don't need it.
   --------------------------------------------------------------------------- */
.woocommerce-checkout main.tag-section {
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .woocommerce-checkout main.tag-section {
    margin-top: var(--spacing-section);
  }
}

/* ---------------------------------------------------------------------------
   Sensei LMS — login form, message reply (WP comment form), buttons, course list.
   --------------------------------------------------------------------------- */

/* Sensei login form (shown on My Courses / Messages when logged out, and the login page). */
form.sensei.login,
#loginform.sensei {
  max-width: 440px;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
form.sensei.login .form-row {
  margin: 0;
  width: 100%;
}
form.sensei.login label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
form.sensei.login label.inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-muted);
}
form.sensei.login .input-text {
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: var(--color-cream);
  color: var(--color-ink);
}
form.sensei.login .input-text:focus {
  outline: none;
  border-color: var(--color-orange);
}

/* Sensei + element buttons and the comment "Post" button → the pill CTA. */
.sensei input.button.wp-element-button,
.sensei button.wp-element-button,
.sensei .wp-block-button__link,
.wp-block-sensei-button a.wp-block-button__link,
#respond input#submit,
#respond .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 26px;
  box-shadow: 0 8px 20px rgba(31, 26, 22, 0.18);
  text-decoration: none;
  cursor: pointer;
}
.sensei input.button.wp-element-button:hover,
.sensei .wp-block-button__link:hover,
.wp-block-sensei-button a.wp-block-button__link:hover,
#respond input#submit:hover {
  background: var(--color-orange-deep);
  color: var(--color-cream);
}

/* Message reply — WordPress comment form (Sensei messages use comment_form()). */
#respond {
  margin-top: 2rem;
}
#respond .comment-reply-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}
#respond textarea {
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-ink);
}
#respond textarea:focus {
  outline: none;
  border-color: var(--color-orange);
}
#respond .form-submit {
  margin-top: 1rem;
}

/* My Courses — Sensei learner course list (classic [sensei_user_courses] + block variants). */
ul.course-container {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  ul.course-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
ul.course-container li.course {
  margin: 0 !important;
  padding: 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-cream);
  width: auto !important;
  float: none !important;
}
ul.course-container li.course::before,
ul.course-container li.course::after {
  content: none;
}
ul.course-container li.course .course-title,
ul.course-container li.course h2,
ul.course-container li.course h3 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
ul.course-container li.course .course-title a,
ul.course-container li.course h2 a {
  color: var(--color-ink);
  text-decoration: none;
}
ul.course-container li.course .course-title a:hover {
  color: var(--color-orange);
}
/* Sensei progress bar */
.sensei-progress-bar__bar {
  background: var(--color-orange) !important;
}

/* ---------------------------------------------------------------------------
   Single product — Additional information + Reviews (list & submit form).
   --------------------------------------------------------------------------- */

/* Additional information — the attributes / weight / dimensions table. */
.awk-attributes table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.awk-attributes th,
.awk-attributes td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.awk-attributes th {
  width: 35%;
  font-weight: 600;
  color: var(--color-ink);
}
.awk-attributes td {
  color: var(--color-muted);
}
.awk-attributes td p {
  margin: 0;
}

/* Reviews list */
.awk-reviews #reviews h2,
.awk-reviews .woocommerce-Reviews-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}
.awk-reviews .woocommerce-Reviews-title {
  display: none;
}
.awk-reviews ol.commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.awk-reviews ol.commentlist li.review,
.awk-reviews ol.commentlist li.comment {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-cream);
}
.awk-reviews .comment_container {
  display: flex;
  gap: 1rem;
}
.awk-reviews .avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
}
.awk-reviews .woocommerce-review__author {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-ink);
  font-style: normal;
}
.awk-reviews .woocommerce-review__published-date {
  font-size: 13px;
  color: var(--color-muted-strong);
}
.awk-reviews .description {
  margin-top: 0.5rem;
  color: var(--color-ink-soft);
}
.awk-reviews .comment-text p,
.awk-reviews .description p {
  margin: 0.25rem 0 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Review submit form (the submit button is styled via #respond input#submit above). */
.awk-reviews #review_form_wrapper {
  margin-top: 2rem;
}
.awk-reviews #review_form .comment-reply-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-ink);
}
.awk-reviews #review_form label {
  display: block;
  margin: 0.85rem 0 0.35rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
.awk-reviews #review_form textarea,
.awk-reviews #review_form input[type="text"],
.awk-reviews #review_form input[type="email"] {
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-ink);
}
.awk-reviews #review_form textarea:focus,
.awk-reviews #review_form input:focus {
  outline: none;
  border-color: var(--color-orange);
}
/* Star-rating selector label */
.awk-reviews .comment-form-rating label {
  display: inline-block;
  margin-right: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Login / lost-password forms — Theme My Login (.tml) on /login/, /lostpassword/,
   and the standard WP #loginform on /login-2/.
   --------------------------------------------------------------------------- */
.tml,
form#loginform {
  max-width: 440px;
  margin: 1.5rem 0 0;
}
.tml-field-wrap {
  margin-top: 1rem;
}
.tml-label,
form#loginform > label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
.tml-field,
form#loginform input[type="text"],
form#loginform input[type="password"] {
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: var(--color-cream);
  color: var(--color-ink);
}
.tml-field:focus,
form#loginform input:focus {
  outline: none;
  border-color: var(--color-orange);
}
.tml-button,
form#loginform #wp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 26px;
  box-shadow: 0 8px 20px rgba(31, 26, 22, 0.18);
  cursor: pointer;
}
.tml-button:hover,
form#loginform #wp-submit:hover {
  background: var(--color-orange-deep);
}
/* Remember-me is an inline checkbox label, not an uppercase field label. */
.tml-rememberme-wrap label,
form#loginform label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-muted);
}
.tml-message {
  font-size: 14px;
  color: var(--color-muted);
}
.tml-alerts {
  margin-bottom: 1rem;
  font-size: 14px;
}
.tml-alerts .tml-errors,
.tml-alerts .tml-error {
  color: #b42318;
}
.tml-links {
  margin-top: 1.25rem;
  font-size: 13.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.tml-links a,
form#loginform ~ * a {
  color: var(--color-orange);
}

/* "You are already logged in" note (/login-2/ when signed in). */
.awk-loggedin-note {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.awk-loggedin-note p {
  margin: 0;
  font-size: 16px;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
   Password-protected content — WordPress's default post-password-form.
   --------------------------------------------------------------------------- */
.post-password-form {
  max-width: 440px;
  margin: 1.5rem 0 0;
}
/* Wrong-password notice (shown above the form after a failed attempt). */
.post-password-form-invalid-password {
  max-width: 440px;
  margin: 1.5rem 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid #b42318;
  background: color-mix(in srgb, #b42318 8%, var(--color-cream));
  color: #b42318;
  font-size: 14px;
}
.post-password-form > p:first-of-type {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.5;
}
.post-password-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}
.post-password-form input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: var(--color-cream);
  color: var(--color-ink);
}
.post-password-form input[type="password"]:focus {
  outline: none;
  border-color: var(--color-orange);
}
.post-password-form input[type="submit"],
.post-password-form .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 26px;
  box-shadow: 0 8px 20px rgba(31, 26, 22, 0.18);
  cursor: pointer;
}
.post-password-form input[type="submit"]:hover,
.post-password-form .wp-element-button:hover {
  background: var(--color-orange-deep);
}

/* ---------------------------------------------------------------------------
   Button blocks inside page content (e.g. the legacy /welcome/ page) → the brand pill.
   !important overrides the per-block colour classes (has-cream-background-color, etc.).
   --------------------------------------------------------------------------- */
.entry-content .wp-block-button__link,
.wp-block-post-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--color-orange) !important;
  color: var(--color-cream) !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 13px 26px;
  box-shadow: 0 8px 20px rgba(31, 26, 22, 0.18);
  text-decoration: none;
}
.entry-content .wp-block-button__link:hover,
.wp-block-post-content .wp-block-button__link:hover {
  background: var(--color-orange-deep) !important;
}

/* ---------------------------------------------------------------------------
   Legacy /welcome/ page — hand-rolled content: <p><a href="#">Welcome!</a></p>, <h2> section
   headings, and account/course links as bare <a> in <p> (wpautop injected stray <br>).
   Scoped via the .awk-welcome body class (functions.php, keyed on the slug).
   --------------------------------------------------------------------------- */
.awk-welcome .wp-block-post-title {
  display: none;
} /* the content's "Welcome!" is the hero */
.awk-welcome .entry-content {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.awk-welcome .entry-content br {
  display: none;
} /* remove wpautop's stray <br> in the links */
.awk-welcome .entry-content > p:first-child a[href="#"] {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  color: var(--color-orange);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.awk-welcome .entry-content h2 {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.awk-welcome .entry-content p a:not([href="#"]) {
  display: block;
  max-width: 420px;
  margin: 0.6rem auto;
  padding: 13px 24px;
  border: 1px solid var(--color-orange);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-orange) 8%, var(--color-cream));
  color: var(--color-orange);
  font-weight: 600;
  text-decoration: none;
}
.awk-welcome .entry-content p a:not([href="#"]):hover {
  background: var(--color-orange);
  color: var(--color-cream);
}