/* ============================================================================
   Orita Academy — Obsidian Publish theme
   ----------------------------------------------------------------------------
   Brand-aligned styling for the published customer help hub.
   Values map directly to Orita's Brand Guidelines (2026 refresh):
     Font ....... Figtree (Medium 500 minimum — never Light/Regular)
     Brand ...... Yellow-500 #FBC823, used sparingly as a single accent
     Neutrals ... the foundation for backgrounds and text
     Links ...... Blue (the documented link/CTA color), darkened for contrast
   Only publish.css at the vault root is read by Obsidian Publish, so the whole
   theme lives in this one file.
   ============================================================================ */

/* Figtree — loaded from Google Fonts so it resolves on the published site.
   (A custom font only appears if it's fetched over the network; the local
   Obsidian install doesn't ship it to visitors.) Must stay at the top. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800;900&display=swap');

/* ── Brand tokens ───────────────────────────────────────────────────────── */
body {
  /* Neutrals (from the Color Usage Guide) */
  --orita-neutral-100: #ffffff;
  --orita-neutral-200: #fbf7f0;
  --orita-neutral-300: #ecebe4;
  --orita-neutral-500: #acaba1;
  --orita-neutral-600: #7a7973;
  --orita-neutral-700: #4d4d4d;
  --orita-neutral-900: #212830;

  /* Yellow — brand accent, used sparingly */
  --orita-yellow-100: #fbf7f0;
  --orita-yellow-200: #fff2c5;
  --orita-yellow-400: #fcd349;
  --orita-yellow-500: #fbc823;
  --orita-yellow-600: #d1a41d;
  --orita-yellow-900: #4d3800;

  /* Supporting */
  --orita-blue-500: #62acd3;
  --orita-blue-600: #4d8ba9;
  --orita-blue-800: #38677f; /* link text — meets contrast on light surfaces */
  --orita-green-600: #417f48;
  --orita-red-600: #b36042;

  /* Shape system */
  --orita-radius-lg: 24px;
  --orita-radius-md: 12px;
  --orita-radius-sm: 6px;
  --orita-radius-pill: 99px;

  /* Explicit fallback stack — never depend on an Obsidian var that may be
     undefined on Publish (an undefined var() invalidates the whole rule). */
  --orita-font-stack: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  /* Drive Obsidian's own font variables directly, and keep the *-theme
     aliases too, so every code path picks up Figtree. */
  --font-text-theme: var(--orita-font-stack);
  --font-interface-theme: var(--orita-font-stack);
  --font-text: var(--orita-font-stack);
  --font-interface: var(--orita-font-stack);
}

/* ── Light theme (default) ──────────────────────────────────────────────── */
body,
.theme-light {
  --background-primary: var(--orita-neutral-100);
  --background-primary-alt: var(--orita-neutral-200);
  --background-secondary: var(--orita-neutral-200);
  --background-secondary-alt: var(--orita-neutral-300);
  --background-modifier-border: var(--orita-neutral-300);
  --background-modifier-hover: rgba(33, 40, 48, 0.04);

  --text-normal: var(--orita-neutral-900);
  --text-muted: var(--orita-neutral-600);
  --text-faint: var(--orita-neutral-500);
  --text-on-accent: var(--orita-neutral-900);

  --h1-color: var(--orita-neutral-900);
  --h2-color: var(--orita-neutral-900);
  --h3-color: var(--orita-neutral-900);
  --h4-color: var(--orita-neutral-700);
  --h5-color: var(--orita-neutral-700);
  --h6-color: var(--orita-neutral-600);

  /* Accent / interactive — brand yellow */
  --interactive-accent: var(--orita-yellow-500);
  --interactive-accent-hover: var(--orita-yellow-400);
  --text-accent: var(--orita-blue-800);
  --text-accent-hover: var(--orita-blue-600);
  --text-selection: rgba(251, 200, 35, 0.28);
}

/* ── Dark theme ─────────────────────────────────────────────────────────────
   The brand doc doesn't define a dark palette; this is a faithful derivation
   anchored on Neutral-900 as the base with the yellow accent preserved. */
.theme-dark {
  --background-primary: #1a2027;
  --background-primary-alt: #212830;
  --background-secondary: #161b21;
  --background-secondary-alt: #2a323c;
  --background-modifier-border: #333c46;
  --background-modifier-hover: rgba(255, 255, 255, 0.06);

  --text-normal: var(--orita-neutral-200);
  --text-muted: #b7b6ad;
  --text-faint: var(--orita-neutral-500);
  --text-on-accent: var(--orita-neutral-900);

  --h1-color: var(--orita-neutral-200);
  --h2-color: var(--orita-neutral-200);
  --h3-color: var(--orita-neutral-200);
  --h4-color: #d8d6cc;
  --h5-color: #d8d6cc;
  --h6-color: #b7b6ad;

  --interactive-accent: var(--orita-yellow-500);
  --interactive-accent-hover: var(--orita-yellow-400);
  --text-accent: #8fc7e4;
  --text-accent-hover: var(--orita-blue-500);
  --text-selection: rgba(251, 200, 35, 0.22);
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body,
.published-container,
.site-body,
.markdown-preview-view,
.markdown-rendered,
.site-header,
.site-nav {
  font-family: var(--orita-font-stack);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.markdown-preview-view,
.markdown-rendered {
  font-size: 18px;   /* brand body default sits in the 16–20px range */
  line-height: 1.6;
  font-weight: 500;  /* Medium — never lighter, per brand */
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: var(--font-text-theme);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.markdown-preview-view h1 { font-size: 2.6rem; font-weight: 800; }
.markdown-preview-view h2 { font-size: 1.9rem; }
.markdown-preview-view h3 { font-size: 1.4rem; font-weight: 600; }
.markdown-preview-view h4 { font-size: 1.15rem; font-weight: 600; }

/* Page title — with Publish's built-in title turned off, the first heading in
   the content is the page title. Give it the clean, prominent page-title look
   (larger, bold, extra breathing room below) instead of a regular in-body H1. */
.markdown-preview-view h1:first-of-type {
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 0.1em;
  margin-bottom: 0.7em;
}

/* Yellow accent underline — the brand "one yellow moment," sitting under the
   page title (the content's first H1, now that Publish's built-in title is
   hidden). Applies to every H1; pages carry a single H1, so it reads as one
   accent per page. */
.markdown-preview-view h1::after {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.6rem;
  border-radius: var(--orita-radius-pill);
  background: var(--orita-yellow-500);
}

/* Eyebrow helper: apply with a leading blockquote or inline HTML if desired */
.markdown-preview-view .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--orita-yellow-600);
}

/* ── Links ──────────────────────────────────────────────────────────────── */
.markdown-preview-view a,
.markdown-preview-view a.internal-link,
.markdown-preview-view a.external-link {
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text-accent) 35%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.markdown-preview-view a:hover {
  color: var(--text-accent-hover);
  border-bottom-color: var(--text-accent-hover);
}

/* ── Site header / navigation ───────────────────────────────────────────── */
.site-body-left-column,
.site-body .nav-header,
.site-header {
  font-family: var(--font-interface-theme);
}

.site-name,
.site-header .site-name {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-normal);
}

/* Site logo — sized to match the search bar. The logo's container runs ~18px
   wider on the right than the search box, so calc(100% - 18px) makes the logo's
   right edge line up with the search bar's; its left edge already sits flush
   with the nav at 18px. */
.site-body-left-column-site-logo img,
.site-body-left-column .site-name img,
.site-body-left-column img {
  display: block;
  height: auto;
  width: calc(100% - 18px);
  margin: 12px 0 10px 0;
  padding-left: 0;
}

/* Search bar — enlarged for prominence in the left nav. Publish's default is a
   32px-tall input; we grow only the height, vertical padding, and radius so it
   reads as a primary entry point. Obsidian's own CSS absolutely-positions the
   search icon and centers it vertically, so we deliberately leave the icon and
   the input's horizontal padding untouched — matching the box height keeps the
   icon centered on its own. Width is left to Publish (the .search-view-outer
   18px right-padding keeps the box aligned with the logo above — see the logo
   note). */
.search-view-outer,
.search-view-container,
.search-bar {
  height: 44px;
}
.search-bar {
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--orita-radius-sm);
}
.published-search-icon {
  height: 44px;
}

/* Nav item text — a touch larger than the 14px default for readability */
.site-body-left-column .tree-item-inner {
  font-size: 15px;
  line-height: 1.4;
}

/* Active / hovered nav item picks up a subtle yellow cue */
.nav-file-title.is-active,
.nav-folder-title.is-active {
  color: var(--text-normal);
  font-weight: 700;
  border-radius: var(--orita-radius-sm);
  box-shadow: inset 3px 0 0 var(--orita-yellow-500);
}
.nav-file-title:hover,
.nav-folder-title:hover {
  background: var(--background-modifier-hover);
  border-radius: var(--orita-radius-sm);
}

/* ── Callouts ───────────────────────────────────────────────────────────── */
.markdown-preview-view .callout {
  border-radius: var(--orita-radius-md);
  border: 1px solid var(--background-modifier-border);
  --callout-padding: 1rem 1.25rem;
}
/* Info / note → brand blue (documented for "new or helpful info") */
.markdown-preview-view .callout[data-callout='info'],
.markdown-preview-view .callout[data-callout='note'],
.markdown-preview-view .callout[data-callout='tip'] {
  --callout-color: 98, 172, 211; /* Blue-500 rgb */
}
.markdown-preview-view .callout[data-callout='success'],
.markdown-preview-view .callout[data-callout='check'] {
  --callout-color: 65, 127, 72;  /* Green-600 rgb */
}
.markdown-preview-view .callout[data-callout='warning'],
.markdown-preview-view .callout[data-callout='caution'],
.markdown-preview-view .callout[data-callout='danger'] {
  --callout-color: 179, 96, 66;  /* Red-600 rgb */
}
/* A yellow "important"/"orita" callout for the brand-forward moment */
.markdown-preview-view .callout[data-callout='important'],
.markdown-preview-view .callout[data-callout='orita'] {
  --callout-color: 209, 164, 29; /* Yellow-600 rgb — readable icon/title */
  background: var(--orita-yellow-100);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.markdown-preview-view table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--orita-radius-md);
  overflow: hidden;
}
.markdown-preview-view thead th {
  background: var(--orita-neutral-200);
  font-weight: 700;
  color: var(--text-normal);
}
.theme-dark .markdown-preview-view thead th {
  background: var(--background-secondary-alt);
}
.markdown-preview-view th,
.markdown-preview-view td {
  border: none;
  border-bottom: 1px solid var(--background-modifier-border);
  padding: 0.6rem 0.9rem;
}

/* ── Blockquotes ────────────────────────────────────────────────────────── */
.markdown-preview-view blockquote {
  border-left: 4px solid var(--orita-yellow-500);
  border-radius: 0 var(--orita-radius-sm) var(--orita-radius-sm) 0;
  background: var(--background-secondary);
  color: var(--text-muted);
  padding: 0.5rem 1rem;
}

/* ── Code ───────────────────────────────────────────────────────────────── */
.markdown-preview-view code {
  background: var(--background-secondary-alt);
  border-radius: var(--orita-radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.markdown-preview-view pre {
  border-radius: var(--orita-radius-md);
  border: 1px solid var(--background-modifier-border);
}

/* ── Landing page: topic cards ───────────────────────────────────────────────
   Used by the FAQ landing page (`Academy/FAQ/Index.md`), which opts in via
   `cssclasses: [academy-landing]` in its frontmatter — Obsidian Publish stamps
   that class onto the page's `.markdown-preview-view`, so these rules only touch
   that one page.

   The page's cards are a plain nested Markdown list (no wrapper HTML — Publish
   renders a raw <div> as its own empty block and pushes the list out as a
   sibling, which is why an earlier `.academy-cards > ul` approach never
   matched). Publish wraps each top-level block in `div.el-<type>`, so the one
   top-level list lands in `.el-ul > ul`. We grid that: each top-level <li> is a
   card, its bold lead is the title, and its nested <ul> holds the links. Inner
   link lists sit inside an <li>, so `.el-ul > ul` never catches them. */
/* Two rendering contexts share this card styling:
     1. `.academy-landing` — the Welcome landing page and the standalone
        `Explore More.md` note (both opt in via `cssclasses: [academy-landing]`).
     2. `.markdown-embed` — the `Explore More.md` list transcluded as a footer
        (`![[Explore More]]`) at the bottom of FAQ pages. The embedded note gets
        its own `.el-ul > ul` DOM inside the embed wrapper, so we match it there.
        `Explore More.md` is the only embed in the vault; if other notes are
        embedded later, tighten this `.markdown-embed` scope so their lists don't
        turn into card grids too. */
.academy-landing .el-ul > ul,
.markdown-embed .el-ul > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  list-style: none;
  /* Reset the list's default left indent so the grid's left edge lines up with
     the title and hero above. Obsidian sets `padding-inline-start`, so a plain
     `padding-left: 0` isn't enough — zero out both, plus the margin. */
  padding-left: 0;
  padding-inline-start: 0;
  margin: 1.6rem 0;
}
.academy-landing .el-ul > ul > li,
.markdown-embed .el-ul > ul > li {
  /* Gray card surface (light: very light cool gray; dark: the theme's own gray) */
  background: #f7f8fa;
  border: 1px solid #ecedf0;
  border-radius: var(--orita-radius-lg);
  padding: 1.1rem 1.4rem 1.2rem;
  /* Kill Obsidian's default list-item indent — inside a grid cell it reads as a
     left margin that pushes each card inward, breaking alignment with the hero. */
  margin: 0;
}
.theme-dark .academy-landing .el-ul > ul > li,
.theme-dark .markdown-embed .el-ul > ul > li {
  background: var(--background-secondary-alt);
  border-color: var(--background-modifier-border);
}
/* Card title — the bold lead of each top-level item (covers both tight-list
   `li > strong` and loose-list `li > p > strong` rendering) */
.academy-landing .el-ul > ul > li > strong,
.academy-landing .el-ul > ul > li > p:first-child > strong,
.markdown-embed .el-ul > ul > li > strong,
.markdown-embed .el-ul > ul > li > p:first-child > strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}
/* Links list inside each card */
.academy-landing .el-ul > ul > li ul,
.markdown-embed .el-ul > ul > li ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.academy-landing .el-ul > ul > li li,
.markdown-embed .el-ul > ul > li li {
  margin: 0.35rem 0;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .academy-landing .el-ul > ul,
  .markdown-embed .el-ul > ul {
    grid-template-columns: 1fr;
  }
}
/* Strip Publish's default embed chrome so the transcluded footer reads as plain
   page content, not a quoted block: no left accent border, no inset padding,
   and hide the little "open link" glyph Publish overlays on embeds. */
.markdown-embed {
  border: none;
  padding: 0;
  margin: 0;
}
.markdown-embed-link {
  display: none;
}

/* Hide Publish's per-heading "Copy link" buttons. They copy `location.href`,
   which is only correct on a fresh page load — during in-site (SPA) navigation
   the reverse-proxied URL drifts, so the copied link resolves to the wrong
   (first/Welcome) article, and the clipboard write additionally throws a
   SecurityError in this proxied context. A help-hub visitor can copy the
   address bar instead, so we remove the affordance rather than ship a broken
   one. Scoped by the exact aria-label so other `.clickable-icon`s are untouched. */
.publish-article-heading .clickable-icon[aria-label="Copy link"] {
  display: none;
}

/* ── Misc polish ────────────────────────────────────────────────────────── */
.markdown-preview-view img {
  border-radius: var(--orita-radius-md);
  max-width: 100%;
}
.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2rem 0;
}
/* Tag pills (brand/agency/both, engagement-level tags, etc.) */
.markdown-preview-view a.tag {
  background: var(--orita-neutral-200);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--orita-radius-pill);
  padding: 0.05em 0.6em;
  font-weight: 600;
  font-size: 0.8em;
}
.theme-dark .markdown-preview-view a.tag {
  background: var(--background-secondary-alt);
}

/* ── Hide embed-only fragments from the nav ─────────────────────────────────
   `Explore More.md` exists solely to be transcluded as a footer
   (`![[Explore More]]`) on every FAQ page. It must be published for that embed
   to render on the site, but it should never show up as its own entry in the
   left-hand file tree. Match it by its vault path in Publish's nav. */
.site-body-left-column .tree-item-self[data-path="Academy/FAQ/Explore More.md"] {
  display: none;
}