/*============================================================
  DESIGN TOKENS
  Source: Figma "Jillian Michaels – Design <> Dev"
          Style Guide & Components (node 6001-4897)
  Extracted: 2026-06-17

  Single source of truth for the new brand palette and
  type scale. Reference these via var(--token) rather than
  hard-coding values.

  NOTE: Fonts are served by the Adobe Typekit kit loaded in
  templates/html.html.twig (use.typekit.net/xqk8lnt.css):
    - aktiv-grotesk            (weights 200–800)
    - aktiv-grotesk-extended   (weights 200–700)  ["Aktiv Grotesk Ex"]
    - aktiv-grotesk-thin       (weight 200)
  Canela Web (design's heading face) is NOT in that kit —
  Adobe Fonts does not carry it (it's a Commercial Type face).
  It is self-hosted instead: see assets/css/canela.css
  (@font-face, license 2606-VITJPB). --font-heading uses it,
  with Georgia/serif as fallback.
============================================================*/

:root {
  /* ---------- Brand colors ---------- */
  --color-white:         #ffffff;
  --color-grey:          #e6e5e1;
  --color-dark-grey:     #828282;
  --color-midnight:      #044e68;
  --color-slate:         #a4bee1;
  --color-dark-slate:    #283e44;
  --color-black:         #111111;
  --color-periwinkle:    #404aa1;
  --color-electric-lime: #f4ff77;
  --color-green:         #024438;
  --color-blood-orange:  #ff5e00;
  --color-plum:          #4e2848;

  /* ---------- Surface / UI greys (not part of the 12 brand colors) ---------- */
  --color-surface-grey:  #f5f5f5;  /* light surface for pills/chips — verified in Figma + Webflow */

  /* ---------- Font families ---------- */
  --font-heading:       "Canela Web", Canela, Georgia, "Times New Roman", serif;
  --font-body:          "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body-extended: "aktiv-grotesk-extended", "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Font weights ---------- */
  --fw-thin:     100;  /* Canela headings (H1–H4) */
  --fw-light:    300;  /* Aktiv Grotesk — H6 */
  --fw-regular:  400;  /* Aktiv Grotesk — Paragraph Large */
  --fw-medium:   500;  /* Aktiv Grotesk — Paragraph Regular / Small */
  --fw-semibold: 600;  /* Aktiv Grotesk Extended — H5 / Text Link */

  /* ---------- Type scale — desktop (font-size / line-height) ---------- */
  --fs-h1: 66px;        --lh-h1: 66px;      /* 100% */
  --fs-h2: 50px;        --lh-h2: 60px;      /* 120% */
  --fs-h3: 40px;        --lh-h3: 48px;      /* 120% */
  --fs-h4: 24px;        --lh-h4: 36px;      /* 150% */
  --fs-h5: 20px;        --lh-h5: 28px;      /* 140%, uppercase */
  --fs-h6: 24px;        --lh-h6: 33.6px;    /* 140% */
  --fs-text-link: 12px; --lh-text-link: 18px; /* 150%, uppercase */
  --fs-p-lg: 18px;      --lh-p-lg: 27px;    /* 150% */
  --fs-p:    16px;      --lh-p:    24px;    /* 150% */
  --fs-p-sm: 13px;      --lh-p-sm: 19.5px;  /* 150% */
}

/* ---------- Type scale — mobile (≤750px, matches theme "phablet" bound) ----------
   Only the headings differ from desktop; H6, Text Link and the
   paragraph styles are identical across breakpoints per the design. */
@media (max-width: 750px) {
  :root {
    --fs-h1: 46px; --lh-h1: 58.42px; /* 127% */
    --fs-h2: 34px; --lh-h2: 40.12px; /* 118% */
    --fs-h3: 24px; --lh-h3: 28.8px;  /* 120% */
    --fs-h4: 24px; --lh-h4: 36px;    /* 150% */
    --fs-h5: 16px; --lh-h5: 22.4px;  /* 140% */
  }
}

/*============================================================
  TYPOGRAPHY UTILITIES  (opt-in, .jm- prefixed)
  Compose the tokens above into the named styles from the
  style guide. Apply to any element, e.g. <h1 class="jm-h1">.
============================================================*/
.jm-h1,
.jm-h2,
.jm-h3,
.jm-h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-thin);
  color: var(--color-black);
}
.jm-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.jm-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.jm-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.jm-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

.jm-h5 {
  margin: 0;
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  color: var(--color-black);
}

.jm-h6 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  color: var(--color-black);
}

.jm-text-link {
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-text-link);
  line-height: var(--lh-text-link);
  text-transform: uppercase;
}

.jm-p-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-p-lg);
  line-height: var(--lh-p-lg);
}

.jm-p {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}

.jm-p-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-p-sm);
  line-height: var(--lh-p-sm);
}

/*============================================================
  PROSE / RICH TEXT  (.jm-prose)
  Wrap raw WYSIWYG output (blog posts, about, recipes) so its
  headings/paragraphs/lists/links render in the design language
  without per-element classes. Apply to the body container:
    <div class="jm-prose">{{ body|raw }}</div>
============================================================*/
.jm-prose {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-p-lg);
  line-height: var(--lh-p-lg);
  color: var(--color-black);
}

.jm-prose h1,
.jm-prose h2,
.jm-prose h3,
.jm-prose h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-thin);
  color: var(--color-black);
  margin: 1.5em 0 0.4em;
}
.jm-prose h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.jm-prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.jm-prose h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.jm-prose h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* Smaller subheads default to the uppercase Aktiv label style */
.jm-prose h5,
.jm-prose h6 {
  font-family: var(--font-body-extended);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  color: var(--color-black);
  margin: 1.5em 0 0.4em;
}

.jm-prose p { margin: 0 0 1.25em; }
.jm-prose ul,
.jm-prose ol { margin: 0 0 1.25em 1.25em; }
.jm-prose li { margin-bottom: 0.5em; }

.jm-prose a,
.jm-prose a:link,
.jm-prose a:visited {
  color: var(--color-blood-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.jm-prose a:hover,
.jm-prose a:focus { color: var(--color-black); }

.jm-prose strong,
.jm-prose b { font-weight: var(--fw-semibold); }

.jm-prose blockquote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid var(--color-electric-lime);
  color: var(--color-dark-grey);
}

.jm-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5em 0;
}

/* When .jm-prose wraps a full Drupal node (e.g. /about), legacy rules force
   proxima 16px on .node__content and 20px !important on .field--name-body.
   Re-assert prose type directly on the text elements (a direct rule on p/li
   beats the inherited size, so no !important needed). */
.jm-prose .node__content,
.jm-prose .node__content p,
.jm-prose .node__content li {
  font-family: var(--font-body);
}
.jm-prose .node__content p,
.jm-prose .node__content li {
  font-size: var(--fs-p-lg);
  line-height: var(--lh-p-lg);
}
/* --- Cart (storefront tiles + chrome) ---
   button_to renders <form><button> — display:contents keeps the button a direct flex child of
   the Webflow tile row; the button reset lets the Webflow link-block classes style it like the
   anchor it replaces. Badge = count bubble on the nav Cart_Icon anchors. */
.jm-cart-form { display: contents; }
/* :where() = zero specificity: neutralize UA button chrome while letting the Webflow
   link-block classes (e.g. .link-block-42's black pill) win every property they set. */
:where(button.jm-cart-btn) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.jm-cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--color-blood-orange, #ff4c00);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.jm-cart-badge[hidden] { display: none; }
a.jm-cart-icon { position: relative; display: inline-block; }

/* Tailwind's preflight (application.css — the vite bundle loads on every layout, after this
   sheet) zeroes button backgrounds at (0,1,0), tying and out-cascading the Webflow pill
   classes. Re-assert the pill paint for the tile buttons at higher specificity. */
button.jm-cart-btn.link-block-42 { background-color: #000; }
button.jm-cart-btn.link-block-43 { background-color: #fff; }
/* Same preflight collision for the jm cart page's CHECK OUT pill (.link-block-99). */
button.jm-cart-btn.link-block-99 { background-color: #000; }

/* JM flash banner — slim, in flow under the navbar (never overlaps the chrome). */
.jm-flash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 10px 16px;
  background: var(--color-black, #111);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 14px;
  letter-spacing: .02em;
  text-align: center;
}
.jm-flash-alert { background: var(--color-blood-orange, #ff5e00); }
.jm-flash button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 2px;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.jm-flash button:hover { opacity: 1; }

/* The member routine screens' tab strip hardcodes the 28shred beige (bg-[#F2EBE5]) in the
   shared view; on the JM chrome (this sheet only loads here) it wears the brand surface.
   div+attribute selector out-specifies the Tailwind utility. */
div[class*="F2EBE5"] { background-color: var(--color-surface-grey, #f5f5f5); }

/* Owned-item CTA — the "go" state: deep green pill, white text (black pills = purchase,
   orange = badges/alerts). Typography matches the BUY/RENT labels (.text-block-102/39). */
a.jm-cta-owned {
  display: inline-block;
  background-color: var(--color-green, #024438);
  color: #fff;
  border-radius: 40px;
  padding: 10px 40px;
  font-family: aktiv-grotesk-extended, var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
a.jm-cta-owned:hover { filter: brightness(1.15); }

/* IN CART — passive status, not an action: quiet text link, pill-height padding. */
a.jm-in-cart {
  display: inline-block;
  padding: 10px 12px;
  color: var(--color-dark-grey, #828282);
  font-family: aktiv-grotesk-extended, var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
a.jm-in-cart:hover { text-decoration: underline; color: var(--color-black, #111); }

/* Nav account + cart icons share a bare Webflow <li>: same 22px box, and the row itself
   becomes a centered flex line (baseline/line-box alignment wobbles otherwise). */
.jm-account-summary img, a.jm-cart-icon img { height: 22px; width: auto; }
li:has(> .jm-account-menu), li:has(> a.jm-signin) {
  display: flex;
  align-items: center;
}

/* Account menu — signed out: plain SIGN IN link; signed in: icon dropdown (desktop) /
   stacked sub-menu (mobile drawer). */
.jm-signin, .jm-signin-m { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; text-decoration: none; }
.jm-account-menu { position: relative; display: inline-flex; align-items: center; } /* flex kills the line-box descender that hung 6px below the icon */
.jm-account-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.jm-account-summary::-webkit-details-marker { display: none; }
.jm-account-summary img { display: block; }
.jm-account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 100;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--color-grey, #e6e5e1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  padding: 6px 0;
  text-align: left;
}
.jm-account-dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--color-black, #111);
  font-family: aktiv-grotesk-extended, var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.jm-account-dropdown a:hover { background: var(--color-surface-grey, #f5f5f5); }
.jm-account-email {
  padding: 10px 16px;
  color: var(--color-dark-grey, #828282);
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  border-bottom: 1px solid var(--color-grey, #e6e5e1);
  margin-bottom: 4px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jm-account-mobile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.jm-account-mobile .jm-account-email { padding: 6px 0; border-bottom: 0; margin-bottom: 0; }

/* My Library — desktop: uniform card grid (art square-cropped, CTA left / expiry right
   below); mobile: a single-file list (thumb | name + expiry | CTA). One markup, the tile's
   grid-areas flip at the breakpoint. width:100% keeps auto-fill wrapping inside the flexed
   pricing-section (a max-content grid would overflow sideways). */
.jm-library { padding-bottom: 4rem; }
.jm-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 24px;
  width: 100%;
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: 0 32px;
}
.jm-library-tile {
  display: grid;
  min-width: 0; /* a nowrap footer must not widen this tile's grid column (min-width:auto gotcha) */
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "img img"
    "cta info";
  align-items: center;
  column-gap: 12px;
  row-gap: 12px;
}
.jm-library-tile img {
  grid-area: img;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.jm-library-cta { grid-area: cta; justify-self: start; }
.jm-library-info { grid-area: info; justify-self: end; text-align: right; min-width: 0; }
.jm-library-name { display: none; } /* desktop: the art carries the name */
.jm-library-expiry {
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  color: var(--color-dark-grey, #828282);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .jm-library-grid { display: flex; flex-direction: column; gap: 0; padding: 0 20px; margin-top: 1.5rem; }
  .jm-library-tile {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: "img info cta";
    row-gap: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-grey, #e6e5e1);
  }
  .jm-library-tile img { width: 72px; }
  .jm-library-info { justify-self: start; text-align: left; min-width: 0; }
  .jm-library-name {
    display: block;
    font-family: aktiv-grotesk-extended, var(--font-body, sans-serif);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .jm-library-expiry { margin-top: 2px; }
  .jm-library-tile .jm-cta-owned { padding: 10px 16px; }
}