/* VALDIBIA OFFICIAL v1.4.12 — Unified Typography
 * This file is intentionally loaded AFTER the original theme, its responsive
 * rules, the Character Bazaar and Character Profile CSS.
 * Applies only to the Valdibia Official theme (body.vr-theme).
 * Does not change colors, form actions, graphics, game assets or JS behavior.
 * Fonts: Google Fonts (Cinzel Decorative 700 / Metamorphous 400).
 */

body.vr-theme {
    --vr-font-title: "Cinzel Decorative", Georgia, serif;
    --vr-font-copy: "Metamorphous", Georgia, serif;
    font-family: var(--vr-font-copy) !important;
    font-weight: 400;
}

/* Text produced by both the main theme and MyAAC's own templates/hooks.
 * By changing font-family, not all text weights, important labels and
 * accessibility emphasis retain their hierarchy. */
body.vr-theme :is(
    p, a,
    span:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.material-icons):not([class^="icon-"]):not([class*=" fa-"]),
    small, strong, b, em, cite, label, legend,
    ul, ol, li, dt, dd, th, td, caption, blockquote, figcaption,
    time, summary, details, article, address,
    input, textarea, select, option,
    .vr-news-body, .vr-dropdown, .vdb-bazaar, .vdb-character-profile,
    .vdb-character-search, .vr-login-subtitle, .vr-footer,
    .vr-page-stage, .vr-content-card
) {
    font-family: var(--vr-font-copy) !important;
}

/* Heading text always wins, including headings inside links, legacy tables,
 * Bazaar pages, news, Character Profile, login and account pages. */
body.vr-theme :is(h1, h2, h3, h4, h5, h6),
body.vr-theme :is(
    .TableHeadline, .BigTableHeadline, .Headline, .SubHeadline,
    .CaptionInnerContainer .Text, .vr-logo-copy strong,
    .vr-news-title, .vr-page-title, .vr-login-title,
    .vdb-profile-panel-head h3, .vdb-bazaar-hero h2,
    .vdb-detail-profile h2, .vdb-character-search h3
),
body.vr-theme :is(h1, h2, h3, h4, h5, h6) :is(span, small, strong, b, em, i, a) {
    font-family: var(--vr-font-title) !important;
    font-weight: 700 !important;
}

/* All real text-bearing action controls, including Core MyAAC legacy button
 * classes and ornamental links. This does not convert navigation links to
 * buttons or change their click/form behavior. */
body.vr-theme :is(
    button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.button, a.Button, a.SubmitButton, a.BigButton,
    a.greenButton, a.redButton, a.blueButton, a.BlueButton,
    .btn, .button, .Button, .SubmitButton, .BigButton,
    .greenButton, .redButton, .blueButton, .BlueButton,
    .vr-login-submit, .vr-create-account, .vr-link-btn, .vr-play-btn,
    .vdb-btn, .vdb-btn-primary, .vdb-btn-secondary, .vdb-btn-buy,
    .vr-ornate-button, .vr-ornate-btn,
    .vdb-profile-text-action
) {
    font-family: var(--vr-font-title) !important;
    font-weight: 700 !important;
}

/* Strong override for original ornamental rules that already use !important
 * on font-family in the final ornamental-buttons.css. */
html[data-vr-theme] body.vr-theme .vr-ornate-button,
html[data-vr-theme] body.vr-theme .vr-ornate-button.vr-ornate-button--content,
html[data-vr-theme] body.vr-theme .vr-login-card .vr-login-submit b,
html[data-vr-theme] body.vr-theme .vdb-bazaar .vdb-btn {
    font-family: var(--vr-font-title) !important;
    font-weight: 700 !important;
}
body.vr-theme :is(
    button, a.vr-ornate-button, a.vr-ornate-btn, a.btn,
    .vr-login-submit, .vr-create-account, .vdb-btn
) :is(span, strong, b, small, em, i) {
    font-family: var(--vr-font-title) !important;
    font-weight: 700 !important;
}

/* Navigation dropdown entries, inputs and icon-only utility controls are
 * navigation/copy, not CTA buttons; preserve the visual separation. */
body.vr-theme :is(
    .vr-nav-trigger, .vr-dropdown a, .vr-theme-toggle,
    .vr-music-controls button, .vr-music-art,
    #vr-music-provider-close, .vr-language-switch select,
    .vr-social-icon
) {
    font-family: var(--vr-font-copy) !important;
    font-weight: 400 !important;
}

/* More ornate letterforms require a little less tracking on narrow CTAs;
 * retain the current ornamental frames, dimensions and behavior. */
html[data-vr-theme] body.vr-theme .vr-ornate-button {
    letter-spacing: .015em;
}
html[data-vr-theme] body.vr-theme .vr-header-actions .vr-ornate-button {
    letter-spacing: 0;
}
body.vr-theme :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: 0;
    overflow-wrap: break-word;
}

@media (min-width: 901px) and (max-width: 1350px) {
    body.vr-theme .vr-nav-trigger { letter-spacing: 0; }
    html[data-vr-theme] body.vr-theme .vr-header-actions .vr-ornate-button {
        --vr-ornate-font-size: 10px;
    }
}

/* Header/navigation remain legible on mobile, without changing breakpoints. */
@media (max-width: 620px) {
    body.vr-theme .vr-nav-trigger { letter-spacing: 0; }
    body.vr-theme .vr-content-card :is(h1,h2) { overflow-wrap: anywhere; }
}