/* =========================================================
   CANONICAL SITE SHELL
   Shared navigation, page rhythm, typography, and accessibility preferences.
   Page-specific styles should handle page-specific components only.
   ========================================================= */

:root {
    --page-title-size: clamp(2.45rem, 4.4vw, 4.1rem);
    --page-header-gap: clamp(1.15rem, 2.4vw, 1.6rem);
}

/* Header / brand */
.logo-banner {
    padding: 0.2rem 1rem;
    opacity: 1;
}

.logo-banner > a,
.site-logo {
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
}

.site-logo {
    width: min(64vw, 260px);
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
}

/* =========================================================
   NAVIGATION
   Keep the primary links visually centered. Display preferences live in a
   clearly separate utility area instead of competing with navigation items.
   ========================================================= */

@media (min-width: 851px) {
    .navigation-inner {
        justify-content: center;
    }

    .navigation-panel {
        position: relative;
        display: grid;
        width: 100%;
        grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr);
        align-items: center;
        column-gap: 0.7rem;
    }

    .navigation-list {
        grid-column: 2;
        width: auto;
        justify-content: center;
        gap: 0.05rem;
        margin: 0;
        padding: 0;
    }

    .navigation-list a {
        padding: 1.05rem 0.68rem;
        font-size: 0.79rem;
        white-space: nowrap;
    }

    .site-display-controls {
        position: static;
        grid-column: 3;
        justify-self: end;
        transform: none;
    }
}

.site-display-controls {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--border);
}

.site-display-button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    padding: 0.45rem 0.46rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font: 800 0.63rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    cursor: pointer;
}

.site-display-label {
    display: inline;
}

.site-display-icon {
    min-width: auto;
    color: var(--accent-soft);
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    text-align: center;
}

.site-display-button:hover,
.site-display-button:focus-visible {
    color: #ffffff;
}

.site-display-button[aria-pressed="true"] {
    border-bottom-color: var(--accent);
    color: #ffffff;
}

.site-display-button:disabled {
    cursor: default;
    opacity: 0.72;
}

@media (min-width: 851px) and (max-width: 1050px) {
    .navigation-panel {
        grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
        column-gap: 0.35rem;
    }

    .navigation-list a {
        padding-inline: 0.45rem;
        font-size: 0.71rem;
    }

    .site-display-controls {
        gap: 0;
        padding-left: 0.35rem;
    }

    .site-display-button {
        padding-inline: 0.3rem;
        font-size: 0.57rem;
    }

    .site-display-icon {
        display: none;
    }
}

/* Shared page rhythm */
.site-main {
    padding-top: clamp(1.55rem, 2.4vw, 2rem);
}

h1,
h2,
h3 {
    text-wrap: balance;
}

/* Straightforward utility/archive pages share one title rhythm. */
.archive-header,
.news-page-header,
.upcoming-events-header,
.event-map-hero,
.ufc-roster-header {
    margin: 0 0 var(--page-header-gap);
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--border);
}

.archive-header h1,
.news-page-header h1,
.upcoming-events-header h1,
.event-map-hero h1,
.ufc-roster-header h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Gobold", Impact, sans-serif;
    font-size: var(--page-title-size);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.008em;
    text-transform: uppercase;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Feature pages keep their compositions, but use sane display leading. */
.homepage-intro h1,
.featured-content h2,
.post-header h1,
.simple-about-hero h1,
.simple-about-heading h2,
.simple-about-background h2,
.contact-hero-main h1,
.contact-section-header h2,
.privacy-hero h1,
.privacy-summary h2,
.privacy-content h2,
.mma-gallery-hero h1,
.media-kit-hero h1,
.media-kit-section-heading h2,
.media-kit-panel h2,
.media-kit-value > header h2 {
    line-height: 1.08;
}

.media-kit-stat strong,
.media-kit-proof strong,
.media-kit-platform-lead strong,
.ufc-roster-rank {
    line-height: 1;
}

/* Editorial body copy stays readable and separate from display type. */
.post-body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.72;
}

.post-body h2,
.post-body h3,
.post-body h4 {
    line-height: 1.2;
}

/* The gallery still had the old page-label treatment after the other
   top-level labels were removed. Keep section labels; hide only this one. */
.mma-gallery-hero-copy > .eyebrow {
    display: none;
}

/* Fight Card Picker: retain the compact zine layout without microscopic UI text. */
.event-promotion {
    font-size: 0.56rem;
}

.event-card-meta p {
    font-size: 0.54rem;
    line-height: 1.35;
}

.event-card-meta a {
    font-size: 0.53rem;
}

.event-card-section-heading span {
    font-size: 0.52rem;
}

.event-card-heading h2 {
    line-height: 1.01;
}

.event-card-section-heading h3 {
    line-height: 1.05;
}

.bout-label {
    min-height: 18px;
    font-size: 0.47rem;
    line-height: 1.2;
}

.bout-footer {
    min-height: 20px;
    font-size: 0.44rem;
    line-height: 1.12;
}

.event-card-note p {
    font-size: 0.52rem;
    line-height: 1.4;
}

.fighter-name {
    line-height: 1.05;
}

/* Event Map utility labels should read as UI, not decoration. */
.event-map-detail-lock,
.event-map-detail-topline,
.event-map-detail-matchup-label,
.event-map-legend {
    line-height: 1.3;
}

/* =========================================================
   READABILITY MODE
   Opt-in: more spacing, calmer type, and a conventional sans-serif hierarchy.
   ========================================================= */

html.readable-mode body {
    font-size: 18px;
    line-height: 1.78;
    letter-spacing: 0.006em;
}

html.readable-mode h1,
html.readable-mode h2,
html.readable-mode h3,
html.readable-mode h4,
html.readable-mode .mobile-brand,
html.readable-mode .ufc-roster-rank {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: 0.005em;
}

html.readable-mode h1,
html.readable-mode h2,
html.readable-mode h3 {
    line-height: 1.16;
}

html.readable-mode .post-body {
    width: min(100%, 760px);
    font-size: 1.04rem;
    line-height: 1.85;
}

html.readable-mode .post-body p,
html.readable-mode .post-body li,
html.readable-mode .post-description,
html.readable-mode .featured-description,
html.readable-mode .homepage-intro-description {
    max-width: 72ch;
}

html.readable-mode .article-card-content,
html.readable-mode .post-share,
html.readable-mode .event-map-detail-card,
html.readable-mode .ufc-roster-card {
    line-height: 1.65;
}

html.readable-mode .navigation-list a,
html.readable-mode .footer-navigation a,
html.readable-mode .primary-button,
html.readable-mode .secondary-button {
    letter-spacing: 0.025em;
}

html.readable-mode .eyebrow,
html.readable-mode .article-date,
html.readable-mode .post-meta,
html.readable-mode .event-map-detail-topline,
html.readable-mode .event-map-legend {
    letter-spacing: 0.06em;
}

/* =========================================================
   REDUCE MOTION
   User preference supplements prefers-reduced-motion and stops decorative motion.
   ========================================================= */

html.reduce-motion {
    scroll-behavior: auto;
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
}

html.reduce-motion .site-news-track {
    animation: none !important;
    transform: none !important;
}

html.reduce-motion .article-card:hover,
html.reduce-motion .featured-image:hover img,
html.reduce-motion .article-card-image:hover img,
html.reduce-motion .news-card:hover img,
html.reduce-motion .mma-gallery-card:hover,
html.reduce-motion .mma-gallery-image-button:hover img {
    transform: none !important;
}

@media (max-width: 850px) {
    :root {
        --page-title-size: clamp(2.05rem, 9.1vw, 3rem);
        --page-header-gap: 1.05rem;
    }

    /* Undo the old numbered/arrow mobile menu treatment. It became ambiguous
       once internal links stopped carrying a decorative arrow span. */
    .navigation-list,
    .navigation-list.navigation-list-open {
        gap: 0.25rem;
        counter-reset: none;
    }

    .navigation-list li {
        counter-increment: none;
    }

    .navigation-list a {
        display: flex;
        min-height: 54px;
        align-items: center;
        grid-template-columns: none;
        gap: 0;
        padding: 0.78rem 0.85rem;
        border: 1px solid transparent;
        border-left: 3px solid transparent;
        border-radius: 8px;
        color: var(--text-soft);
        font-size: 0.92rem;
        letter-spacing: 0.035em;
    }

    .navigation-list a::before {
        display: none;
        content: none;
    }

    .navigation-list a > span:last-child {
        display: inline;
        color: inherit;
        font-size: inherit;
        transition: none;
        transform: none;
    }

    .navigation-list a:hover > span:last-child,
    .navigation-list a:focus-visible > span:last-child {
        transform: none;
    }

    .navigation-list a[aria-current="page"] {
        border-color: rgba(255, 74, 84, 0.3);
        border-left-color: var(--accent);
        background: rgba(255, 74, 84, 0.1);
    }

    .site-display-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin: 0.25rem 0 0;
        padding: 0.9rem 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .site-display-controls::before {
        grid-column: 1 / -1;
        color: var(--muted);
        font: 800 0.64rem/1.2 Arial, Helvetica, sans-serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        content: "Display preferences";
    }

    .site-display-button {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--border-bright);
        border-radius: var(--radius-small);
        background: #101010;
        color: var(--text-soft);
        font-size: 0.68rem;
    }

    .site-display-button[aria-pressed="true"] {
        border-color: var(--accent);
        background: rgba(255, 74, 84, 0.12);
    }

    .site-display-icon {
        display: inline;
        font-size: 0.72rem;
    }
}

@media (max-width: 760px) {
    .logo-banner {
        padding: 0.2rem 0.75rem;
    }

    .site-logo {
        width: min(62vw, 220px);
    }

    .archive-header,
    .news-page-header,
    .upcoming-events-header,
    .event-map-hero,
    .ufc-roster-header {
        padding-bottom: 0.8rem;
    }

    .post-body h2,
    .post-body h3,
    .post-body h4 {
        line-height: 1.22;
    }

    html.readable-mode body {
        font-size: 17px;
    }
}