/* ===========================================================================
   Megan Salmon — brand theme for the client docs site

   STRUCTURE
     1. UNIVERSAL RULES   — apply to every client. Don't remove.
     2. PER-CLIENT BRAND  — fill from the client's site / brand kit (colors + fonts).

   Worked example:  client-theladcollective/docs/stylesheets/extra.css
   Full guide:      NEW-CLIENT-RUNBOOK.md  "Phase G: Branding"
   =========================================================================== */


/* ========================= 1. UNIVERSAL RULES ============================ */

/* Header: logo only.
   When a logo is set (theme.logo in mkdocs.yml), the wordmark stands alone —
   hide the redundant site-name text. Keeps the page topic (shown on scroll).
   Keys off the logo's presence, so a client without a logo yet still shows
   their name. (Sidebar/drawer keeps site_name = client name.) */
.md-header__button.md-logo ~ .md-header__title .md-header__topic:first-child {
  display: none;
}

/* Vertically center the header title row */
.md-header__ellipsis {
  display: flex;
  align-items: center;
}

/* Logo a touch larger in the header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* Avoid a duplicate logo in the mobile nav drawer */
@media (max-width: 768px) {
  .md-nav__button.md-logo {
    display: none !important;
  }
}

/* Links + text selection use the brand accent (set per client below) */
.md-typeset a:hover { color: var(--md-accent-fg-color); }
::selection { background: var(--md-accent-fg-color); color: #fff; }

/* --- Interactive widgets (Overview/Conversion/Performance dashboards, clickable
   rows, month-nav). All colors come from the Material palette, so they auto-match
   whatever brand colors the client sets below. --- */

.kpi-controls, .kpi-chart-head {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0.5rem 0;
}
.kpi-controls__label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--md-default-fg-color--light); }
.kpi-seg { display: inline-flex; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 999px; overflow: hidden; }
.kpi-btn { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 0.62rem; font-weight: 600; padding: 0.26rem 0.7rem;
  color: var(--md-default-fg-color); transition: background .15s, color .15s; }
.kpi-btn:hover { background: var(--md-accent-fg-color--transparent, rgba(0,0,0,0.05)); }
.kpi-btn.is-active { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color, #fff); }

.kpi-dates { font-size: 0.72rem; color: var(--md-default-fg-color--light); margin: 0 0 0.7rem; }
.kpi-dates strong { color: var(--md-default-fg-color); font-weight: 700; }
.kpi-dates__warn { color: #b06a00; }

.kpi-cards { display: grid; gap: 0.7rem; margin: 0.4rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-card { background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px; padding: 0.7rem 0.85rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.kpi-card__label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--md-default-fg-color--light); }
.kpi-card__value { font-weight: 800; font-size: 1.05rem; color: var(--md-default-fg-color);
  line-height: 1.15; margin: 0.15rem 0 0.2rem; white-space: nowrap; }
.kpi-card__delta { font-size: 0.72rem; font-weight: 700; display: flex; flex-direction: column; }
.kpi-card__delta.up { color: #1a9d6e; }
.kpi-card__delta.down { color: #d1495b; }
.kpi-card__delta.flat { color: var(--md-default-fg-color--light); }
.kpi-card__prev { font-size: 0.62rem; font-weight: 500; color: var(--md-default-fg-color--lighter); margin-top: 0.1rem; }

.kpi-chart { position: relative; height: 240px; background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: 12px; padding: 0.6rem 0.8rem; }
.kpi-note { font-size: 0.72rem; color: var(--md-default-fg-color--light); margin: 0.5rem 0 0; }

/* Funnel */
.funnel { margin: 0.3rem 0 0.5rem; }
.funnel-row { margin-bottom: 0.55rem; }
.funnel-row__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; }
.funnel-row__label { font-weight: 700; color: var(--md-default-fg-color); }
.funnel-row__val { color: var(--md-default-fg-color); font-weight: 600; }
.funnel-row__val em { font-style: normal; font-weight: 500; color: var(--md-default-fg-color--light); font-size: 0.72rem; }
.funnel-bar { background: var(--md-default-fg-color--lightest); border-radius: 6px; height: 18px; margin-top: 0.2rem; overflow: hidden; }
.funnel-bar__fill { height: 100%; background: var(--md-accent-fg-color); border-radius: 6px; transition: width .3s ease; }
.funnel-step { font-size: 0.68rem; color: var(--md-default-fg-color--light); margin: 0.2rem 0 0 0.1rem; }

/* Clickable table rows */
.clickable-rows tbody tr.is-clickable { cursor: pointer; transition: background .12s; }
.clickable-rows tbody tr.is-clickable:hover { background: var(--md-accent-fg-color--transparent, rgba(0,0,0,0.04)); }

/* Month jump nav (Activity Log) */
.month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.4rem 0 1.3rem; }
.month-nav__label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--md-default-fg-color--light); }
.month-nav__group { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.month-nav__yr { font-size: 0.66rem; font-weight: 800; color: var(--md-default-fg-color--light); }
.month-nav__pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.65rem;
  border-radius: 999px; border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color) !important; text-decoration: none; transition: background .12s; }
.month-nav__pill:hover { background: var(--md-accent-fg-color--transparent, rgba(0,0,0,0.05)); }


/* ==================== 2. PER-CLIENT BRAND — Megan Salmon ================= */
/* Editorial fashion aesthetic: warm cream + black ink + refined gold,
   Playfair Display headings. Logo is black, so the header is light. */

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

:root {
  --ms-ink:    #1A1A1A;   /* black ink (logo, text) */
  --ms-cream:  #FAF7F2;   /* warm off-white page bg */
  --ms-gold:   #9C7B4D;   /* refined gold accent */
  --ms-gold-d: #7E6238;   /* darker gold — readable links on cream */
}

/* --- LIGHT scheme (editorial cream + gold) --- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--ms-ink);
  --md-primary-fg-color--light: #3a3a3a;
  --md-primary-fg-color--dark:  #000000;
  --md-accent-fg-color:         var(--ms-gold);

  --md-default-bg-color:        var(--ms-cream);
  --md-default-fg-color:        rgba(26, 26, 26, 0.90);
  --md-default-fg-color--light: rgba(26, 26, 26, 0.62);
  --md-default-fg-color--lighter: rgba(26, 26, 26, 0.32);
  --md-default-fg-color--lightest: rgba(26, 26, 26, 0.07);

  --md-typeset-a-color:         var(--ms-gold-d);
  --md-code-bg-color:           #F0EBE2;
  --md-footer-bg-color:         var(--ms-ink);
}

/* --- Light header so the black logo reads (with a subtle rule) --- */
.md-header {
  background-color: #ffffff;
  color: var(--ms-ink);
  box-shadow: 0 0 0.2rem rgba(0,0,0,0.06), 0 0.15rem 0.4rem rgba(0,0,0,0.04);
}
.md-search__input { background-color: rgba(26,26,26,0.05); color: var(--ms-ink); }
.md-search__input::placeholder { color: rgba(26,26,26,0.55); }

/* --- Editorial serif headings --- */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-nav__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
}

::selection { background: var(--ms-gold); color: #fff; }