/*!
 * Fair Play Frankie — documentation brand theme
 *
 * Zensical is built on Material for MkDocs, which styles a class-based DOM
 * (.md-header, .md-nav, .md-typeset, ...) via --md-* CSS variables. This file
 * translates the Fair Play Frankie brand (amber palette, Inter body, Zilla
 * Slab headings) onto Material's variable system. It is NOT a port of the
 * website's Pico CSS — Pico variables have no effect here.
 *
 * Brand tokens (from the website's Pico amber palette):
 *   #ffbf00  brand amber      #977000  link amber     #e8ae01  hover amber
 *   #3f2d00  heading brown    #4d3700  text brown      #fcefd9  pale amber
 *
 * Body font (Inter) is loaded by Material via [project.theme.font] in
 * zensical.toml. Headings use Zilla Slab, imported below.
 *
 * ICONS — the site uses Lucide (":lucide-check:", ":lucide-smartphone:", ...)
 * as its single icon set. Zensical bundles five (material, fontawesome,
 * lucide, octicons, simple) but builds its own chrome — nav chevrons,
 * admonition icons, footnote arrows — out of Lucide, so content icons drawn
 * from it match the theme instead of introducing a second visual language.
 *
 * Lucide is stroke-based ('fill="none" stroke="currentColor"'), which would
 * normally be flattened by Material's 'fill: currentcolor' on inline icons.
 * Zensical ships the fix, so no CSS is needed here to make them render:
 *
 *   .twemoji svg        { fill: currentcolor }
 *   .twemoji svg.lucide { fill: #0000; stroke: currentcolor }
 *
 * The practical consequence is that a Lucide icon takes its color from
 * "color", not "fill" — see the YES / NO MARKS section at the foot of this
 * file, which is the only place the site colors an icon.
 */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&display=swap');

/* ===================================================================
   BRAND COLORS — light, white header with amber accents
   primary = "custom" / accent = "custom" in zensical.toml
   =================================================================== */
:root,
[data-md-color-scheme="default"] {
  /* Header / primary surface: white, with dark-brown text & icons on it */
  --md-primary-fg-color:          #ffffff;
  --md-primary-fg-color--light:   #ffffff;
  --md-primary-fg-color--dark:    #f4ecd8;
  --md-primary-bg-color:          #3f2d00; /* text/icons sitting on the header */
  --md-primary-bg-color--light:   #694d00;

  /* Accent: interactive amber (hover, active nav, focus highlights) */
  --md-accent-fg-color:             #e8ae01;
  --md-accent-fg-color--transparent: rgba(232, 174, 1, 0.10);

  /* Content links */
  --md-typeset-a-color:           #977000;


  /* Code blocks: pale-amber surface, brown text, system monospace */
  --md-code-font:                 "Menlo", "Monaco", "Courier New", monospace;
  --md-code-bg-color:             #fcefd9;
  --md-code-fg-color:             #3f2d00;
}

/* Keep the header readable on its white background (Material assumes a
   colored header, so the bottom border helps it read as a bar). */
.md-header {
  border-bottom: 1px solid #fddea6;
}

/* Zensical's default ("modern") theme variant colors .md-header from
   --md-default-fg-color, not --md-primary-bg-color (that only drives header
   text in the "classic" variant) — so the brand brown above never reaches
   the nav title/icons without this explicit override. */
.md-header__title,
.md-header__button {
  color: #3f2d00;
}


/* ===================================================================
   LOGO
   theme.logo in zensical.toml points at a real image, so the logo always
   renders as an <img>. Sizing it is the only thing left to do here.
   =================================================================== */

/* Zensical pins a logo image to height: 1.2rem (24px), which shrank the app's
   amber-tile artwork past the point of legibility. Pin it to 2rem (40px)
   instead, which is about the practical maximum inside a 48px header bar.

   Both dimensions are fixed because the source is square; object-fit keeps it
   honest if a non-square asset is ever swapped in. Zensical's own rule uses
   width: auto, which let the image size itself off the 1.2rem height. */
.md-header__button.md-logo img {
  height: 2rem;
  object-fit: contain;
  width: 2rem;
}

/* The drawer gives the logo a 1.6rem box (32px). Match the header so the mark
   is the same size on both surfaces.

   The selector mirrors Zensical's own -- .md-nav .md-nav__title[for="__drawer"]
   .md-logo -- because that carries three classes plus an attribute selector and
   outranks a plainer .md-nav__title .md-logo, which silently lost. */
.md-nav .md-nav__title[for="__drawer"] .md-logo {
  height: 2rem;
  width: 2rem;
}

.md-nav .md-nav__title[for="__drawer"] .md-logo img {
  height: 2rem;
  object-fit: contain;
  width: 2rem;
}

/* Hide the search box. Visual only — search.json, its JS, and the ⌘K/"/"
   shortcut still load; a true removal needs a header.html partial override.

   The magnifying-glass toggle has to be hidden alongside it. It is a sibling
   of .md-search, not a descendant, so the rule above never reached it: below
   the search breakpoint the header rendered a button that flipped the
   __search checkbox and revealed nothing. */
.md-header .md-search,
.md-header__button[for="__search"] {
  display: none;
}

/* ===================================================================
   NAV TABS — amber hover and active underline
   Zensical fades inactive tabs with opacity: .7 over --md-default-fg-color,
   and its hover rule only restores opacity: 1 -- so hovering just darkens the
   same gray. Recolor hover to the accent amber, and match the active tab's
   underline to it (it defaults to --md-default-fg-color, a dark gray).
   =================================================================== */
.md-tabs__link:focus,
.md-tabs__link:hover {
  color: var(--md-accent-fg-color);
  opacity: 1;
}

.md-tabs__item--active {
  border-bottom-color: var(--md-accent-fg-color);
}

/* The active tab sets "color: inherit" on its link, which would otherwise beat
   the hover rule above and keep the active tab gray on hover. */
.md-tabs__item--active .md-tabs__link:focus,
.md-tabs__item--active .md-tabs__link:hover {
  color: var(--md-accent-fg-color);
}

/* ===================================================================
   AUTH CTAs IN THE NAV
   "Sign in" / "Sign up free" are external nav entries in zensical.toml,
   rendered as buttons here to match the MkDocs site's header.

   Selected by href rather than by position, so adding or reordering nav
   entries cannot detach the styling from the right links. Both the tabs row
   (desktop) and the drawer (below 1220px, where the tabs row is display:none)
   are covered.
   =================================================================== */

/* Push the pair to the right, away from the page tabs. */
.md-tabs__item:has(> .md-tabs__link[href*="/auth/login"]) {
  margin-left: auto;
}

.md-tabs__link[href*="/auth/login"],
.md-tabs__link[href*="/auth/register"],
.md-nav__link[href*="/auth/login"],
.md-nav__link[href*="/auth/register"] {
  align-items: center;
  border-radius: 0.4rem;
  font-weight: 600;
  opacity: 1;
  padding: 0.15rem 0.6rem;
}

.md-tabs__link[href*="/auth/login"],
.md-tabs__link[href*="/auth/register"] {
  margin-top: 0.5rem;
}

/* Outlined: secondary action. The 2px border matches the MkDocs site, where it
   is what gives the outlined button enough presence next to the filled one. */
.md-tabs__link[href*="/auth/login"],
.md-nav__link[href*="/auth/login"] {
  border: 0.1rem solid #ffbf00;
  color: #3f2d00;
}

/* Filled: primary action. Carries a border of its own colour purely so its box
   matches the outlined button's -- without it the 2px border above made the two
   differ by 4px in height and they sat misaligned. The MkDocs site does the
   same thing. */
.md-tabs__link[href*="/auth/register"],
.md-nav__link[href*="/auth/register"] {
  background-color: #ffbf00;
  border: 0.1rem solid #ffbf00;
  color: #3f2d00;
}

/* Without this, the amber hover colour set on .md-tabs__link above would put
   amber text on the amber fill. */
.md-tabs__link[href*="/auth/login"]:hover,
.md-tabs__link[href*="/auth/register"]:hover,
.md-nav__link[href*="/auth/login"]:hover,
.md-nav__link[href*="/auth/register"]:hover {
  background-color: #e8ae01;
  border-color: #e8ae01;
  color: #3f2d00;
  opacity: 1;
}

/* The drawer lays links out full-width, so keep the pills from spanning it. */
.md-nav--primary .md-nav__link[href*="/auth/login"],
.md-nav--primary .md-nav__link[href*="/auth/register"] {
  display: inline-flex;
  margin: 0.2rem 0.6rem;
}

/* ===================================================================
   LAYOUT — reclaim the empty left sidebar column
   With navigation.tabs every nav entry becomes a tab, so the primary sidebar
   renders with no visible content at desktop widths while still reserving
   242px. That pushed the page body right and left the layout asymmetric.

   Scoped to Zensical's 76.25em breakpoint deliberately: below it, this same
   element IS the off-canvas drawer (parked at left: -12.1rem and translated
   in when #__drawer is checked), so hiding it there would remove mobile
   navigation, including the sign in / sign up buttons.

   This assumes a flat site -- every page is a top-level nav entry. If nested
   pages are ever added beneath a tab, the sidebar becomes meaningful and this
   rule should be removed.
   =================================================================== */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    display: none;
  }
}

/* ===================================================================
   ANNOUNCEMENT BAR
   Zensical fills the banner with --md-accent-fg-color--transparent, a 10%
   amber wash that reads as near-white against the page. Make it the full brand
   amber so the strapline it carries works as a brand band.

   Brown on amber measures 8.01:1. The dismiss button inherits its colour from
   the banner, so it follows without a rule of its own.
   =================================================================== */
.md-banner {
  background-color: #ffbf00;
  color: #3f2d00;
}

.md-banner__inner {
  font-weight: 500;
}

/* ===================================================================
   CTA BUTTONS
   Material fills .md-button--primary from --md-primary-fg-color, which is
   #ffffff here (the white header), so the button renders white-on-white with
   no visible chrome. Fill it with brand amber instead.

   Material's own hover is opacity: .8, which washes the amber out, so hover
   moves to the darker hover amber at full opacity instead.

   Shape and weight follow the MkDocs site rather than Material's defaults:
   8px corners instead of a 1.2rem oval, and weight 600 instead of 700. This
   keeps the in-page CTAs consistent with the nav buttons.

   The plain .md-button is given the same amber outline as the nav's "Sign in".
   Material's default is rgba(0,0,0,.05) on rgba(0,0,0,.55), which beside the
   filled amber button reads as disabled rather than as a secondary action.

   Material ships .md-button with no margin, so side-by-side buttons are only
   separated by the whitespace between them. On narrow viewports the pair wraps
   and the buttons stack edge to edge; the vertical margin keeps the gap when
   they wrap without changing the wide layout.
   =================================================================== */
.md-typeset .md-button {
  background-color: transparent;
  border: 0.1rem solid #ffbf00;
  border-radius: 0.4rem;
  color: #3f2d00;
  font-weight: 600;
  margin: 0.25rem 0.25rem 0.25rem 0;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: #e8ae01;
  border-color: #e8ae01;
  color: #3f2d00;
  opacity: 1;
}

.md-typeset .md-button--primary {
  background-color: #ffbf00;
  color: #3f2d00;
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-color: #e8ae01;
  color: #3f2d00;
  opacity: 1;
}

/* ===================================================================
   TYPOGRAPHY — Zilla Slab headings in brand brown
   The header title is included deliberately: the web app at
   app.fairplayfrankie.com sets its "Fair Play Frankie" wordmark and every card
   heading in this same slab serif, so matching it here keeps the marketing
   site and the app consistent. Inter is the body and UI face on both.
   =================================================================== */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-nav__title {
  font-family: "Zilla Slab", "Rockwell", "Courier New", serif;
  letter-spacing: -0.01em;
}

/* Zilla Slab's x-height is 8.1px against Inter's 9.8px at the same 18px, so
   Zensical's default 0.9rem title reads smaller than intended once it is set
   in the slab face. 1.1rem (22px) brings the x-height back to 9.9px, matching
   what Inter renders at 18px, so the wordmark keeps its prominence over the
   14px tabs. */
.md-header__title {
  font-size: 1.1rem;
}

/* NOTE on the app's stacked lockup (wordmark over tagline, logo spanning both):
   this cannot be done in CSS alone. Zensical makes .md-header__topic
   position: absolute -- that is the mechanism that swaps the site name for the
   page title on scroll -- so .md-header__title computes to height: 0 and a
   second line has nothing to push against. Measured, it overflowed the header
   inner and overlapped the tabs row by 15px. Restructuring that region means
   overriding partials/header.html. */

.md-typeset h1 {
  color: #3f2d00;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: #4d3700;
  font-weight: 600;
}


/* ===================================================================
   YES / NO MARKS
   The affirmative and negative marks in the pricing plan lists and the
   comparison table. Icons come from Lucide, which Zensical renders via
   ".twemoji svg.lucide { fill: #0000; stroke: currentcolor }" -- so these
   only need to set "color" and the stroke follows.

   Brand amber (#ffbf00) is deliberately NOT used for the affirmative mark:
   on white it measures 1.75:1, under the 3:1 WCAG 1.4.11 floor for a graphic
   that carries meaning. The darker link amber measures 4.9:1. The negative
   mark is muted rather than red so the table stays inside the brand.
   =================================================================== */
.md-typeset .twemoji.yes {
  color: #977000;
}

.md-typeset .twemoji.no {
  color: #b9a882;
}


/* ===================================================================
   CARD ICONS
   The four feature icons on the homepage inherit --md-default-fg-color, a
   near-black that reads colder than everything around it. Brand brown
   (#4d3700) is too close to that near-black to be worth the rule -- measured
   side by side the two are hard to tell apart -- so these take the same
   link amber as the affirmative marks above, which ties the two icon
   treatments together and warms the section up.
   =================================================================== */
.md-typeset .grid.cards .twemoji {
  color: #977000;
}


/* ===================================================================
   PLAN FEATURE LISTS
   The lists inside the pricing plan cards lead with a check icon, so the
   disc marker in front of it was a second bullet doing the same job.

   Dropping the marker alone would leave wrapped lines running back under
   the icon, so the item becomes a flex row: icon in the first track, text
   in the second, and a wrapped second line stays aligned with the first.
   Baseline alignment (rather than centre) keeps the check sitting on the
   text baseline whatever the item's line count.

   Scoped to lists nested inside a card, so the plain bulleted lists
   elsewhere on the page -- "Who This Isn't For" -- are untouched.
   =================================================================== */
.md-typeset .grid.cards li ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.md-typeset .grid.cards li ul li {
  align-items: baseline;
  display: flex;
  gap: 0.5em;
  margin-left: 0;
}