/* GEO Geek component styles. Copied from design-system/components/bundle.css, plus WordPress adjustments at the end. Needs tokens.css first. */

.gg { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.gg *, .gg *::before, .gg *::after { box-sizing: border-box; }
.gg :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gg a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gg a:hover { text-decoration-thickness: 2px; }
.gg mark { background: var(--signal); color: var(--on-signal); border-radius: var(--radius-sm); padding: 0 3px; }

.gg-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }

/* Button */
.gg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 500 15px/23px var(--font-sans); padding: var(--space-3) 22px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.gg-btn--primary { background: var(--ink); color: var(--ink-inverse) !important; }
.gg-btn--primary:hover { background: var(--ink-muted); }
.gg-btn--secondary { background: transparent; color: var(--ink) !important; border-color: var(--line-strong); }
.gg-btn--secondary:hover { background: var(--surface-200); }
.gg-btn--signal { background: var(--signal); color: var(--on-signal) !important; }
.gg-btn--signal:hover { background: var(--surface-inverse); color: var(--ink-inverse) !important; }
.gg-btn--ghost { background: transparent; color: var(--ink) !important; padding-left: var(--space-3); padding-right: var(--space-3); }
.gg-btn--ghost:hover { background: var(--surface-200); }
.gg-btn--sm { font-size: 13px; line-height: 18px; padding: var(--space-2) var(--space-4); }
.gg-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* StatusBadge */
.gg-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-1) 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.gg-status__glyph { font-family: var(--font-sans); letter-spacing: 0; }
.gg-status--supported { color: var(--status-supported); background: var(--status-supported-bg); }
.gg-status--refuted { color: var(--status-refuted); background: var(--status-refuted-bg); }
.gg-status--running { color: var(--status-running); background: var(--status-running-bg); }
.gg-status--inconclusive, .gg-status--planned { color: var(--status-inconclusive); background: var(--status-inconclusive-bg); }

/* Chip (topics, engines) */
.gg-chip { display: inline-flex; align-items: center; font: 500 13px/18px var(--font-sans); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-200); color: var(--ink); text-decoration: none !important; }
a.gg-chip:hover { background: var(--surface-300); }

/* SummaryBlock */
.gg-summary { background: var(--surface-200); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-4); max-width: 760px; }
.gg-summary__text { font-size: 21px; line-height: 31px; letter-spacing: -0.01em; margin: 0; }
.gg-summary__finding { display: flex; gap: var(--space-4); align-items: baseline; background: var(--signal); color: var(--on-signal); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.gg-summary__finding .gg-label { color: var(--on-signal); }
.gg-summary__finding p { margin: 0; font-size: 17px; line-height: 26px; font-weight: 500; }
.gg-summary__takeaways { margin: 0; padding-left: 20px; font-size: 15px; line-height: 23px; display: grid; gap: var(--space-2); }

/* ExperimentCard */
.gg-card { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-200); border-radius: var(--radius-lg); padding: var(--space-8); color: var(--ink); text-decoration: none !important; transition: background-color 150ms ease-out; min-height: 260px; }
a.gg-card:hover { background: var(--surface-300); }
.gg-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.gg-card__title { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.gg-card__excerpt { font-size: 15px; line-height: 23px; color: var(--ink-muted); margin: 0; }
.gg-card__metric { margin-top: auto; display: flex; align-items: baseline; gap: var(--space-2); }
.gg-card__metric strong { font: 500 34px/38px var(--font-mono); letter-spacing: -0.03em; }
.gg-card__metric span { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ExperimentMeta */
.gg-meta { background: var(--surface-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-8); margin: 0; }
.gg-meta__row { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.gg-meta__row:first-child { border-top: 0; }
.gg-meta dt { font-family: var(--font-mono); font-size: 12px; line-height: 22px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.gg-meta dd { margin: 0; font-size: 15px; line-height: 23px; }
.gg-meta .gg-data { font: 400 14px/22px var(--font-mono); }
@media (max-width: 560px) { .gg-meta__row { grid-template-columns: 1fr; gap: var(--space-1); } .gg-meta { padding: var(--space-2) var(--space-6); } }

/* Callout (disclosures, notes, errors) */
.gg-callout { display: grid; gap: var(--space-1); background: var(--surface-200); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); font-size: 15px; line-height: 23px; max-width: 760px; }
.gg-callout p { margin: 0; }
.gg-callout--error { background: var(--status-refuted-bg); }
.gg-callout--error .gg-label { color: var(--status-refuted); }

/* GlossaryTerm */
.gg-term { display: grid; gap: var(--space-3); padding: var(--space-8) 0; border-top: 1px solid var(--line); max-width: 760px; }
.gg-term__name { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.gg-term__abbr { font: 500 14px/22px var(--font-mono); color: var(--ink-muted); margin-left: var(--space-2); letter-spacing: 0; }
.gg-term__def { font-size: 19px; line-height: 29px; margin: 0; }
.gg-term__more { font-size: 15px; line-height: 23px; color: var(--ink-muted); margin: 0; }

/* Byline */
.gg-byline { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); flex-wrap: wrap; }
.gg-byline__avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--surface-300); color: var(--ink); display: grid; place-items: center; font: 600 13px/1 var(--font-sans); flex: none; }
.gg-byline__name { color: var(--ink); font-weight: 500; }
.gg-byline__sep { color: var(--line-strong); }

/* ---------------------------------------------------------------------------
   WordPress adjustments: global element rules and block overrides.
   --------------------------------------------------------------------------- */

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
mark { background: var(--signal); color: var(--on-signal); border-radius: var(--radius-sm); padding: 0 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Patterns are block groups: cancel flow-layout margins inside grid/flex components. */
.gg-summary > *, .gg-summary__finding > *, .gg-callout > * { margin-block: 0 !important; }
.gg-summary { margin-block: var(--space-8); }
.gg-callout { margin-block: var(--space-4); }
/* The pattern's finding label is a paragraph block, not a span: keep the finding text rule off it. */
.gg-summary__finding p.gg-label { font-size: 12px; line-height: 16px; font-weight: 500; flex-shrink: 0; }

/* Button block styles (registered in inc/design-system.php). The default is the ink pill from theme.json. */
.wp-block-button.is-style-gg-secondary .wp-block-button__link { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wp-block-button.is-style-gg-secondary .wp-block-button__link:hover { background: var(--surface-200); color: var(--ink); }
.wp-block-button.is-style-gg-signal .wp-block-button__link { background: var(--signal); color: var(--on-signal); }
.wp-block-button.is-style-gg-signal .wp-block-button__link:hover { background: var(--surface-inverse); color: var(--ink-inverse); }

/* Site logo helper output */
.gg-logo { display: inline-flex; align-items: center; line-height: 0; }
.gg-logo img { display: block; width: auto; }
.gg-logo .gg-logo__dark { display: none; }
[data-theme="dark"] .gg-logo .gg-logo__light { display: none; }
[data-theme="dark"] .gg-logo .gg-logo__dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gg-logo .gg-logo__light { display: none; }
  :root:not([data-theme="light"]) .gg-logo .gg-logo__dark { display: block; }
}