/* Container / width */
.pfm-brand-shell{max-width:1200px;margin:0 auto;padding:0 16px;width:100%}
@supports (max-width: var(--wp--style--global--wide-size)) {
  .pfm-brand-shell{max-width:var(--wp--style--global--wide-size)}
}

/*
 * Brand page is rendered inside the site's theme (light/dark) and must stay readable.
 * Theme toggles via: html[data-theme="dark"|"light"].
 * Default (no attribute) is treated as light.
 */
.pfm-brand-page{
  /* Defaults: dark-friendly palette (matches existing design) */
  --pfm-brand-text:#e6edf5;
  --pfm-brand-muted:rgba(230,237,245,.86);
  --pfm-brand-surface:rgba(255,255,255,0.04);
  --pfm-brand-border:rgba(255,255,255,0.18);
  --pfm-brand-border-strong:rgba(255,255,255,0.32);
  --pfm-brand-btn-bg:rgba(255,255,255,0.06);
  --pfm-brand-btn-bg-active:linear-gradient(135deg,#1b2a44,#12203b);
  --pfm-brand-card-bg:linear-gradient(180deg,rgba(20,33,54,.95),rgba(12,22,36,.95));
  --pfm-brand-card-shadow:0 18px 40px rgba(0,0,0,.4);
  --pfm-brand-tooltip-bg:rgba(12,19,31,.94);
  --pfm-brand-tooltip-border:rgba(255,255,255,0.10);
  --pfm-brand-logo-bg:rgba(255,255,255,0.04);

  color:var(--pfm-brand-text);
  font-family:inherit;
  margin:24px 0 40px;
}

/* Light mode override (and default when data-theme is not set) */
html:not([data-theme]),
html[data-theme="light"]{
  /* no-op wrapper: keeps specificity minimal */
}
html:not([data-theme]) .pfm-brand-page,
html[data-theme="light"] .pfm-brand-page{
  --pfm-brand-text:#0f172a;
  --pfm-brand-muted:rgba(15,23,42,.82);
  --pfm-brand-surface:rgba(15,23,42,0.06);
  --pfm-brand-border:rgba(15,23,42,0.18);
  --pfm-brand-border-strong:rgba(15,23,42,0.28);
  --pfm-brand-btn-bg:rgba(15,23,42,0.06);
  --pfm-brand-btn-bg-active:linear-gradient(135deg,rgba(15,23,42,0.10),rgba(15,23,42,0.06));
  --pfm-brand-card-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.92));
  --pfm-brand-card-shadow:0 18px 40px rgba(2,6,23,.18);
  --pfm-brand-tooltip-bg:rgba(255,255,255,.96);
  --pfm-brand-tooltip-border:rgba(15,23,42,0.14);
  --pfm-brand-logo-bg:rgba(15,23,42,0.06);
}
.pfm-brand-hero{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.pfm-brand-hero img{max-width:96px;height:auto;border-radius:12px;background:var(--pfm-brand-logo-bg);padding:8px}
.pfm-brand-title h1{margin:0;font-size:28px}
.pfm-brand-desc{background:var(--pfm-brand-surface);border-radius:16px;padding:16px 18px;margin-bottom:18px;line-height:1.5;color:var(--pfm-brand-muted)}
.pfm-brand-range{display:flex;gap:8px;margin:0 0 16px 0}
.pfm-brand-range button{border:1px solid var(--pfm-brand-border);background:var(--pfm-brand-btn-bg);color:var(--pfm-brand-text);border-radius:12px;padding:8px 14px;cursor:pointer;transition:all .2s ease;font-weight:600}
.pfm-brand-range button.is-active,.pfm-brand-range button:hover{background:var(--pfm-brand-btn-bg-active);border-color:var(--pfm-brand-border-strong)}
.pfm-brand-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:960px){.pfm-brand-grid{grid-template-columns:1fr 1fr}}
.pfm-brand-card{background:var(--pfm-brand-card-bg);border-radius:24px;padding:20px;box-shadow:var(--pfm-brand-card-shadow);position:relative}
.pfm-brand-card__title{font-size:18px;font-weight:700;margin-bottom:12px}
.pfm-brand-chart{position:relative}
.pfm-brand-chart canvas{width:100%;height:320px;display:block}
.pfm-brand-tooltip{position:absolute;pointer-events:none;background:var(--pfm-brand-tooltip-bg);color:var(--pfm-brand-text);padding:8px 10px;border-radius:10px;font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,.35);border:1px solid var(--pfm-brand-tooltip-border);transform:translate(-50%,-120%);white-space:nowrap;z-index:5}
.pfm-brand-legend{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.pfm-brand-legend__item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--pfm-brand-muted)}
.pfm-brand-legend__color{width:12px;height:12px;border-radius:50%}
.pfm-brand-card.pfm-empty{background:var(--pfm-brand-surface);text-align:center;color:var(--pfm-brand-muted)}

/* Header bar */
.pfm-brand-headerbar{background:#050505;padding:12px 0;box-shadow:0 4px 12px rgba(0,0,0,0.35);position:relative;z-index:2}
.pfm-brand-headerbar__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 16px}
@supports (max-width: var(--wp--style--global--wide-size)) {
  .pfm-brand-headerbar__inner{max-width:var(--wp--style--global--wide-size)}
}

.pfm-brand-logo .custom-logo{max-height:48px;height:auto;width:auto}
.pfm-brand-site-title{color:#e6edf5;font-size:20px;font-weight:700;text-decoration:none}
.pfm-brand-nav__list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.pfm-brand-nav__list a{color:#e6edf5;text-decoration:none;font-weight:600}
.pfm-brand-nav__list a:hover{text-decoration:underline}

/* ===== PFM CHART THEME VARIABLES ===== */
:root {
  --pfm-chart-text: rgba(255, 255, 255, 0.75);
  --pfm-chart-grid: rgba(255, 255, 255, 0.08);
  --pfm-chart-axis: rgba(255, 255, 255, 0.35);
}

html[data-theme="light"] {
  --pfm-chart-text: rgba(15, 23, 42, 0.85);
  --pfm-chart-grid: rgba(15, 23, 42, 0.08);
  --pfm-chart-axis: rgba(15, 23, 42, 0.35);
}