/*
 * Page-level rules shared by every public bio, menu and game page. They used
 * to be printed inline by public/partials/theme-vars.php on every request;
 * only the per-business variables stay inline now, so this file can be cached.
 * Loaded right after that inline block, so the cascade order is unchanged.
 */
.layout-bio .bio-page {
    --bio-primary: var(--page-primary);
    --bio-accent: var(--page-secondary);
}

.layout-menu .menu-page .menu-item-price,
.layout-menu .menu-page .menu-section-title {
    color: var(--page-secondary);
}

.layout-bio .bio-btn--link,
.layout-menu .menu-contact-btn,
.layout-game .game-link,
.layout-game .btn-primary {
    color: var(--page-button-text);
}

.layout-game .game-link,
.layout-game .btn-primary {
    background: var(--page-primary);
    border-color: transparent;
    box-shadow: var(--tb-shadow-sm);
}

.layout-game .game-link:hover,
.layout-game .btn-primary:hover {
    background: var(--tb-primary-hover);
    filter: brightness(1.03);
}

.layout-bio .public-footer,
.layout-menu .public-footer,
.layout-game .public-footer {
    border-top-color: var(--page-border, var(--border-soft));
}

.layout-bio .public-footer-text,
.layout-menu .public-footer-text,
.layout-game .public-footer-text {
    color: var(--page-footer-text, var(--page-text-secondary));
}

.layout-bio .public-footer-copy,
.layout-menu .public-footer-copy,
.layout-game .public-footer-copy,
.layout-bio .public-footer-legal,
.layout-menu .public-footer-legal,
.layout-game .public-footer-legal,
.layout-bio .public-powered-by,
.layout-menu .public-powered-by,
.layout-game .public-powered-by {
    color: var(--page-footer-muted, var(--page-text-subtle));
}

.layout-bio .public-footer-legal a,
.layout-menu .public-footer-legal a,
.layout-game .public-footer-legal a,
.layout-bio .public-powered-by a,
.layout-menu .public-powered-by a,
.layout-game .public-powered-by a {
    color: var(--page-footer-link, var(--page-primary));
}

/* ============================================================
   Phase 21 Extended Branding Variables
   These only apply when set — each falls back to the base system.
   ============================================================ */

/* Page background override.
   This used to fall back to `initial`, which reset the background set above to
   transparent — the page colour was really just the UA canvas following
   color-scheme, so a chosen brand background never painted. Fall back to the
   resolved background instead. */
.layout-bio,
.layout-menu,
.layout-game {
    background-color: var(--tb-page-bg, var(--tb-bg));
}

/* Card / surface background */
.layout-bio .bio-card,
.layout-bio .bio-page > .card,
.layout-game .game-card,
.layout-game .game-hero-card,
.layout-menu .menu-section-card {
    background: var(--tb-card-bg, var(--page-surface-strong));
}

/* Heading text — only affects headings, not body copy */
.layout-bio .bio-page h1,
.layout-bio .bio-page h2,
.layout-bio .bio-page h3,
.layout-game .game-card h1,
.layout-game .game-card h2,
.layout-game .game-card h3,
.layout-game .game-hero-card h1,
.layout-game .game-hero-card h2,
.layout-menu .menu-page h1,
.layout-menu .menu-page h2,
.layout-menu .menu-page h3 {
    color: var(--tb-heading-text, var(--page-text));
}

/* Body text — only affects body copy, not headings or buttons */
.layout-bio .bio-page p,
.layout-bio .bio-page span:not(.badge),
.layout-game .game-card p,
.layout-game .game-card span:not(.badge),
.layout-menu .menu-page p,
.layout-menu .menu-page span:not(.badge) {
    color: var(--tb-body-text, var(--page-text));
}

/* Secondary / muted text */
.layout-bio .bio-page .muted,
.layout-game .game-card .muted,
.layout-menu .menu-page .muted {
    color: var(--tb-secondary-text, var(--page-text-secondary));
}

/* Links (not buttons). Tabs, contact buttons and social chips carry their own
   colour, so they are excluded the same way .bio-btn is. */
.layout-bio .bio-page a:not(.bio-btn):not(.btn):not(.bio-social),
.layout-game .game-card a:not(.btn):not(.game-link),
.layout-menu .menu-page a:not(.btn):not(.menu-tab):not(.menu-contact-btn) {
    color: var(--tb-link-text, var(--page-primary));
}

/* Button overrides — background, text, and border separately */
.layout-bio .bio-btn--link,
.layout-menu .menu-contact-btn,
.layout-game .game-link,
.layout-game .btn-primary {
    background: var(--tb-btn-bg, var(--page-primary));
    color: var(--tb-btn-text, var(--page-button-text));
    border-color: var(--tb-btn-border, transparent);
}

.layout-bio .bio-btn--link:hover,
.layout-menu .menu-contact-btn:hover,
.layout-game .game-link:hover,
.layout-game .btn-primary:hover {
    background: var(--tb-btn-hover-bg, var(--tb-primary-hover));
    color: var(--tb-btn-hover-text, var(--tb-btn-text, var(--page-button-text)));
}

/* Form input overrides */
.layout-game .game-card input,
.layout-game .game-card select,
.layout-game .game-card textarea {
    background: var(--tb-input-bg, var(--page-surface-strong));
    color: var(--tb-input-text, var(--page-text));
    border-color: var(--tb-input-border, var(--page-border));
}

.layout-game .game-card input::placeholder,
.layout-game .game-card textarea::placeholder {
    color: var(--tb-secondary-text, var(--page-text-secondary));
    opacity: 0.7;
}

/* Label text */
.layout-game .game-card label {
    color: var(--tb-label-text, var(--page-text-secondary));
}

/* Status colors */
.layout-game .alert-error,
.layout-game .field-error,
.layout-game .error-message {
    color: var(--tb-error-text, #f87171);
}

.layout-game .alert-success,
.layout-game .field-success,
.layout-game .success-message {
    color: var(--tb-success-text, #4ade80);
}