/* Copyright 2026 d7r LLC. Proprietary. */
/*
 * Academy chrome bridge, website theme only.
 *
 * shared/assets/academy.css is a value-for-value port of the prototype's own
 * classes. This file is the other half of the conversion: it dresses Kajabi's
 * STOCK chrome markup in the same design, so the native menu, dropdown, User
 * Menu, cart and mobile drawer keep working while looking like the prototype.
 *
 * This scoped bridge applies Signal Atlas to native platform chrome while
 * preserving menu, member, cart and footer behavior. Equivalents remain recorded
 * in fidelity.map.json and require private-import fidelity checks before release.
 *
 * Rules of this file:
 *   - It never restyles Academy classes. Those belong to academy.css.
 *   - It never uses *-child structural selectors: Kajabi interleaves <style>
 *     elements and spacer divs between blocks (anatomy 11.5). Use *-of-type
 *     and :has() anchors.
 *   - It sets colours only where the stock rule would otherwise win. Encore
 *     writes several colours inline from Style Guide settings, so a few rules
 *     here need the same specificity the stock stylesheet uses.
 */

/* ---------- Announcement bar: stands in for .academy-announcement ---------- */

.academy .hello-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  background: var(--academy-cream);
  text-align: center;
}
.academy .hello-bar__text {
  margin: 0;
  color: var(--academy-forest-deep);
  font-family: var(--academy-mono, 'IBM Plex Mono', monospace);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.academy .hello-bar a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }

/* ---------- Masthead: stands in for .academy-header and -header-inner ------- */

.academy .header {
  background: var(--academy-paper);
  border-bottom: 1px solid var(--academy-line);
}
.academy .header__container {
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Brand left, everything else right. `*-of-type` rather than `*-child`, because
   Kajabi interleaves style elements between the blocks. */
.academy .header__block--menu { margin-left: auto; }
.academy .header__block { margin-top: 0; margin-bottom: 0; min-width: 0; max-width: 100%; }

/* Native desktop spacing must not combine stock margins with bridge gaps.
   The menu's stock stretch rule uses a zero basis and can crush it to letters. */
@media (min-width: 768px) {
  .academy .header__content--desktop { padding-block: 0; }
  .academy .header__content--desktop .header__block { margin-inline: 0; }
  .academy .header__content--desktop .header__block--menu { flex: 1 1 auto; }
  .academy .header__content--desktop .header__block--logo,
  .academy .header__content--desktop .header__block--user,
  .academy .header__content--desktop .header__block--cta { flex: 0 0 auto; }
  .academy .header__content--desktop .link-list { gap: 16px; }
  .academy .header__content--desktop .link-list .link-list__link { margin-inline: 0; white-space: nowrap; }
  .academy .header__content--desktop .header__spacer { display: none; }
}

/* ---------- Brand lockup: stands in for .academy-brand and its parts -------- */

.academy .header a.logo,
.academy .footer a.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  text-decoration: none;
  flex: none;
}
/* The mark carries brand copy, so it is a setting on the logo block rather than
   CSS generated content: an operator can edit every part of the lockup. It is
   decoration in the prototype, so the element is aria-hidden. */
.academy .header a.logo .logo__mark,
.academy .footer a.logo .logo__mark {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: none;
  background: var(--academy-forest);
  color: var(--academy-white);
  font-family: var(--academy-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.04em;
  border-radius: 12px;
}
.academy .header a.logo > p.logo__text,
.academy .footer a.logo > p.logo__text {
  margin: 0;
  font-family: var(--academy-font);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 20px;
  color: var(--academy-ink);
}
.academy .footer a.logo > p.logo__text { color: var(--academy-cream); }
.academy .footer .logo__tagline { color: var(--academy-line); }
.academy .footer a.logo .logo__mark { background: var(--academy-white); color: var(--academy-ink); }

/* ---------- Navigation: stands in for .academy-nav-list -------------------- */

.academy .header a.logo .logo__mark:has(svg), .academy .footer a.logo .logo__mark:has(svg) { width: 56px; height: 44px; background: transparent; color: var(--academy-ink); border-radius: 0; }
.academy .footer a.logo .logo__mark:has(svg) { color: var(--academy-white); }
.academy .logo__mark svg { width: 56px; height: 24px; }

.academy .header__content--desktop .header__block--logo a.logo:has(.logo__text) {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tagline";
  gap: 2px 10px; justify-content: start; min-width: 0; max-width: 100%;
}
.academy .header__content--desktop .header__block--logo a.logo:has(.logo__mark) {
  grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "mark name" "mark tagline";
}
.academy .header__content--desktop .header__block--logo .logo__mark { grid-area: mark; align-self: center; }
.academy .header__content--desktop .header__block--logo a.logo > .logo__text { grid-area: name; align-self: end; min-width: 0; margin: 0; }
.academy .header__content--desktop .header__block--logo a.logo > .logo__tagline { grid-area: tagline; align-self: start; min-width: 0; margin: 0; }

.academy .header .link-list {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.academy .header .link-list__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--academy-ink);
  font-family: var(--academy-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.academy .header .link-list__link:hover,
.academy .header .link-list__link[aria-current="page"] {
  color: var(--academy-forest);
  border-bottom-color: var(--academy-gold-text);
}

/* ---------- Header actions: stand in for .academy-btn variants ------------- */

.academy .header__block--cta .btn,
.academy .header__block--user .user__login a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--academy-font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  line-height: 1.375;
  transition: background-color 160ms ease, color 160ms ease;
}
.academy .header__block--cta .btn {
  background: var(--academy-forest);
  color: var(--academy-white);
  border: 1px solid var(--academy-forest);
  box-shadow: none;
}
.academy .header__block--cta .btn:hover {
  background: var(--academy-forest-light);
  box-shadow: none;
  transform: none;
}
.academy .header__block--user .user__login a {
  background: transparent;
  color: var(--academy-forest);
  border: 1px solid #87878D;
}
.academy .header__block--user .user__login a:hover {
  background: var(--academy-cream);
  color: var(--academy-ink);
}

/* ---------- Mobile trigger: stands in for .academy-menu-toggle ------------- */

/* The accessible button sections/header.liquid renders needs the UA chrome
   stripped so it draws exactly as the stock div did. */
.academy .header .hamburger {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.academy .header .hamburger__slice { background: var(--academy-forest); }
.academy .header .hamburger:focus-visible {
  outline: 3px solid #4C52FF;
  outline-offset: 2px;
}

/* ---------- Wordmark tagline: the element added to the logo block ---------- */

.academy .logo__tagline {
  margin: 2px 0 0;
  color: var(--academy-earth);
  font-family: var(--academy-font);
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 16px;
}

/* ---------- Footer: stands in for .academy-footer and its columns ---------- */

.academy .footer {
  background: var(--academy-forest-deep);
  color: var(--academy-cream);
  padding: 70px 0 28px;
}
.academy .footer__container {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(120px, 0.55fr));
  gap: 44px;
  margin-bottom: 60px;
}
.academy .footer__block { margin: 0; }
.academy .footer .link-list {
  display: grid;
  gap: 0;
}
.academy .footer .link-list__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--academy-cream);
  font-family: var(--academy-font);
  font-size: 1rem;
  line-height: 1.375;
  text-decoration: none;
}
.academy .footer .link-list__link:hover { color: var(--academy-white); }
.academy .footer .powered-by {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--academy-cream);
  font-size: 0.875rem;
  line-height: 1.65;
}

.academy .header :is(a, button):focus-visible,
.academy .footer :is(a, button):focus-visible {
  outline: 3px solid #4C52FF;
  outline-offset: 4px;
}
.academy .header :is(.dropdown__trigger, .user__login, .user__logout, .cart),
.academy .footer .powered-by a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.academy .header__container,
.academy .footer__container {
  width: min(1280px, calc(100% - 2 * var(--academy-gutter, 48px)));
  max-width: 1280px;
  padding-inline: 0;
  margin-inline: auto;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .academy .header__block--cta .btn,
  .academy .header__block--user .user__login a { transition: none; }
}

@media (max-width: 1120px) {
  .academy .header__container { min-height: 64px; gap: 16px; flex-wrap: wrap; }
}

/* Keep the native menu visible at tablet widths without compressing its text.
   Named areas tolerate Kajabi's interleaved style nodes and record ordering. */
@media (min-width: 768px) and (max-width: 1120px) {
  .academy .header__content--desktop { padding-block: 12px; }
  .academy .header__content--desktop .header__container {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand account action" "navigation navigation navigation";
    min-height: 0; gap: 12px 16px;
  }
  .academy .header__content--desktop .header__block--logo { grid-area: brand; }
  .academy .header__content--desktop .header__block--user { grid-area: account; }
  .academy .header__content--desktop .header__block--cta { grid-area: action; }
  .academy .header__content--desktop .header__block--menu { grid-area: navigation; width: 100%; }
  .academy .header__content--desktop .link-list { justify-content: flex-start; }
}

/* Match the approved Page phone masthead on Kajabi's native 768px boundary.
   The stock script still owns moving menu/user blocks into its drawer. Brand
   children are named explicitly because Kajabi may interleave editor nodes. */
@media (max-width: 767px) {
  .academy .header__content--desktop { padding-block: 12px; }
  .academy .header__content--desktop .header__container { min-height: 48px; flex-wrap: nowrap; gap: 16px; }
  .academy .header__content--desktop .header__block--logo { flex: 1 1 auto; min-width: 0; margin: 0; }
  .academy .header__content--desktop .header__block--logo a.logo:has(.logo__text) {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tagline";
    gap: 2px 10px; justify-content: start; min-width: 0; max-width: 100%;
  }
  .academy .header__content--desktop .header__block--logo a.logo:has(.logo__mark) {
    grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "mark name" "mark tagline";
  }
  .academy .header__content--desktop .header__block--logo .logo__mark { grid-area: mark; align-self: center; }
  .academy .header__content--desktop .header__block--logo a.logo > .logo__text {
    grid-area: name; align-self: end; min-width: 0; margin: 0; font-size: 16px; line-height: 20px;
  }
  .academy .header__content--desktop .header__block--logo a.logo > .logo__tagline {
    grid-area: tagline; align-self: start; min-width: 0; margin: 0; font-size: 11px; line-height: 16px;
  }
  .academy .header .hamburger {
    flex: 0 0 48px; width: 48px; height: 48px; margin-left: auto; align-self: center;
    border: 1px solid var(--academy-control, #87878D); border-radius: 999px;
  }
  .academy .header .hamburger__slices { width: 22px; height: 18px; }
  .academy .header .hamburger__slice { left: 0; }
  .academy .header .hamburger--slice-1 { top: 0; }
  .academy .header .hamburger--slice-2,
  .academy .header .hamburger--slice-3 { top: 8px; }
  .academy .header .hamburger--slice-4 { top: 16px; }
}

@media (max-width: 860px) {
  .academy .footer__container { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .academy .footer { padding: 48px 0 24px; }
  .academy .footer__container { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
}