/* ============================================================
   GreenBayPackers.eu — Main CSS
   Design system: variables, reset, base typography, layout
   ============================================================ */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
    /* Brand */
    --packers-green:   #203731;
    --packers-gold:    #FFB612;

    /* Backgrounds */
    --gbp-bg-dark:     #07130D;
    --gbp-bg-deep:     #020403;
    --gbp-bg-section:  #0D1F15;
    --gbp-card-dark:   #10291B;
    --gbp-bg-header:   #203731;

    /* Borders */
    --gbp-card-border:       rgba(255, 182, 18, 0.18);
    --gbp-card-border-hover: rgba(255, 182, 18, 0.50);
    --gbp-divider:           rgba(255, 255, 255, 0.07);
    --gbp-divider-gold:      rgba(255, 182, 18, 0.30);

    /* Text */
    --gbp-white-soft:  #F8F8F2;
    --gbp-muted:       rgba(240,237,230,0.85);
    --gbp-muted-dark:  rgba(240,237,230,0.60);
    --gbp-gold-text:   #FFB612;

    /* Overlays */
    --gbp-overlay-dark:   rgba(2, 4, 3, 0.65);
    --gbp-overlay-darker: rgba(2, 4, 3, 0.82);
    --gbp-overlay-green:  rgba(32, 55, 49, 0.78);

    /* Article reading context */
    --gbp-article-bg:         #FFFFFF;
    --gbp-article-bg-soft:    #FAFAF7;
    --gbp-article-text:       #111111;
    --gbp-article-muted:      #555555;
    --gbp-article-heading:    #203731;
    --gbp-article-link:       #203731;
    --gbp-article-link-hover: #FFB612;
    --gbp-article-border:     #E8EBE8;
    --gbp-article-blockquote: #FFB612;

    /* Status */
    --gbp-success: #2ECC71;
    --gbp-error:   #E74C3C;

    /* Typography */
    --font-headline: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-body:     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', 'Courier New', monospace;

    /* Type scale */
    --text-display: clamp(2.75rem, 5.5vw, 4.5rem);
    --text-h1:  clamp(2rem,   4vw,  3.5rem);
    --text-h2:  clamp(1.5rem, 3vw,  2.25rem);
    --text-h3:  clamp(1.25rem,2vw,  1.75rem);
    --text-h4:  1.25rem;
    --text-h5:  1.0625rem;
    --text-h6:  0.9375rem;
    --text-lg:  1.125rem;
    --text-md:  1rem;
    --text-sm:  0.875rem;
    --text-xs:  0.75rem;

    /* Line heights */
    --lh-tight:   1.2;
    --lh-snug:    1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.75;
    --lh-loose:   2.0;

    /* Letter spacing */
    --ls-tight:  -0.02em;
    --ls-normal:  0;
    --ls-wide:    0.05em;
    --ls-wider:   0.10em;

    /* Spacing (8px base) */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;

    /* Section rhythm */
    --section-padding-y: clamp(48px, 6vw, 80px);
    --section-padding-x: clamp(16px, 4vw, 32px);

    /* Content widths */
    --width-site:    1440px;
    --width-content: 1200px;
    --width-narrow:  960px;
    --width-article: 860px;
    --width-text:    680px;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-card:       0 2px 8px  rgba(0, 0, 0, 0.40);
    --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.65);
    --shadow-gold:       0 0  16px  rgba(255, 182, 18, 0.20);
    --shadow-gold-lg:    0 0  32px  rgba(255, 182, 18, 0.30);
    --shadow-panel:      0 4px 24px rgba(0, 0, 0, 0.50);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.40s ease;

    /* Z-index */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;

    /* Layout heights */
    --gbp-header-h: 72px;

    /* Admin bar offset — overridden by body.admin-bar (WP adds that class for admins) */
    --wp-admin-bar-offset: 0px;
}

/* Admin bar present (admins only — non-admins have show_admin_bar(false)) */
body.admin-bar {
    --wp-admin-bar-offset: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --wp-admin-bar-offset: 46px;
    }
}
/* WP hides admin bar completely at ≤600px — reset offset to avoid gap */
@media screen and (max-width: 600px) {
    body.admin-bar {
        --wp-admin-bar-offset: 0px;
    }
}
/* Mobile header is shorter */
@media (max-width: 900px) {
    :root {
        --gbp-header-h: 60px;
    }
}

/* ── 2. Modern CSS Reset ───────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    min-height: 100vh;
    background-color: #F8F5EE;
    color: var(--gbp-white-soft);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-tight);
    overflow-wrap: break-word;
}
p { overflow-wrap: break-word; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
svg { display: block; }

/* ── 3. Focus styles ─────────────────────────────────────────  */
:focus { outline: 2px solid var(--packers-gold); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--packers-gold); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── 4. Base Typography ──────────────────────────────────────  */
h1 { font-family: var(--font-headline); font-size: var(--text-h1); font-weight: 700; letter-spacing: var(--ls-tight); }
h2 { font-family: var(--font-headline); font-size: var(--text-h2); font-weight: 700; }
h3 { font-family: var(--font-headline); font-size: var(--text-h3); font-weight: 600; }
h4 { font-family: var(--font-headline); font-size: var(--text-h4); font-weight: 600; }
h5 { font-size: var(--text-h5); font-weight: 600; }
h6 { font-size: var(--text-h6); font-weight: 600; }
p:not(:last-child) { margin-bottom: 1em; }
strong { font-weight: 600; }
em { font-style: italic; }

/* ── 5. Layout containers ────────────────────────────────────  */
.gbp-container {
    width: 100%;
    max-width: var(--width-content);
    margin-inline: auto;
    padding-inline: var(--section-padding-x);
}
.gbp-container--wide    { max-width: var(--width-site); }
.gbp-container--narrow  { max-width: var(--width-narrow); }
.gbp-container--article { max-width: var(--width-article); }
.gbp-container--text    { max-width: var(--width-text); }

/* ── 6. Grid utilities ───────────────────────────────────────  */
.gbp-grid     { display: grid; gap: var(--space-6); }
.gbp-grid--3  { grid-template-columns: repeat(3, 1fr); }
.gbp-grid--2  { grid-template-columns: repeat(2, 1fr); }
.gbp-grid--4  { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .gbp-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .gbp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .gbp-grid--4,
    .gbp-grid--3,
    .gbp-grid--2 { grid-template-columns: 1fr; }
}

/* ── 7. Utility classes ──────────────────────────────────────  */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.gbp-text-gold     { color: var(--packers-gold); }
.gbp-text-muted    { color: var(--gbp-muted); }
.gbp-text-upper    { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.gbp-divider       { border: none; border-top: 1px solid var(--gbp-divider); margin: var(--space-8) 0; }
.gbp-divider--gold { border-top-color: var(--gbp-divider-gold); }
.gbp-center        { text-align: center; }

/* ── 8. Skip link ────────────────────────────────────────────  */
.gbp-skip-link {
    position: absolute;
    top: -120%;
    left: var(--space-4);
    background: var(--packers-gold);
    color: var(--gbp-bg-dark);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    z-index: var(--z-toast);
    transition: top var(--transition-fast);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.gbp-skip-link:focus { top: 0; }

/* ── 9. Image wrapper + placeholders ────────────────────────  */
.gbp-img-wrap {
    overflow: hidden;
    position: relative;
    background: var(--gbp-card-dark);
}
.gbp-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.gbp-img-wrap--16-9  { aspect-ratio: 16 / 9; }
.gbp-img-wrap--4-3   { aspect-ratio: 4  / 3; }
.gbp-img-wrap--sq    { aspect-ratio: 1  / 1; }
.gbp-img-wrap--thumb { width: 80px; height: 60px; flex-shrink: 0; }

.gbp-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 160px;
    background:
        radial-gradient(circle at 60% 40%, rgba(255,182,18,0.07) 0%, transparent 55%),
        linear-gradient(135deg, #0A1A12 0%, #203731 55%, #050C08 100%);
    position: absolute;
    inset: 0;
}
.gbp-img-placeholder__g {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 4rem;
    color: rgba(255, 182, 18, 0.16);
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}
.gbp-img-placeholder--large .gbp-img-placeholder__g { font-size: 6rem; }
.gbp-img-placeholder--small .gbp-img-placeholder__g { font-size: 2rem; }

/* ── 10. Section title shared styles ─────────────────────────  */
.gbp-section-label {
    font-family: var(--font-headline);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--packers-gold);
    margin-bottom: var(--space-3);
    display: block;
}
.gbp-section-title {
    font-family: var(--font-headline);
    font-size: var(--text-h2);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gbp-white-soft);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}
.gbp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.gbp-section-header .gbp-view-all {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--packers-gold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}
.gbp-section-header .gbp-view-all:hover { opacity: 0.75; }

/* ── 11. Gold accent bar (before major headings) ─────────────  */
.gbp-gold-bar::before {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--packers-gold);
    margin-bottom: var(--space-4);
}

/* ── 12. Section reveal animation ───────────────────────────  */
@media (prefers-reduced-motion: no-preference) {
    .gbp-section--reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity var(--transition-slow), transform var(--transition-slow);
    }
    .gbp-section--visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── 13. Post meta shared ────────────────────────────────────  */
.gbp-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--gbp-muted);
}
.gbp-meta__sep     { color: var(--gbp-muted-dark); }
.gbp-meta__author  { color: var(--gbp-muted); font-weight: 500; }
.gbp-meta__author:hover { color: var(--packers-gold); }
.gbp-meta__date    { color: var(--gbp-muted-dark); }

/* ── 14. Tag pills ───────────────────────────────────────────  */
.gbp-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gbp-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--gbp-card-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    color: var(--gbp-muted);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.gbp-tag:hover { border-color: var(--packers-gold); color: var(--packers-gold); }

/* ── 15. Scrollbar ───────────────────────────────────────────  */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--gbp-bg-deep); }
::-webkit-scrollbar-thumb  { background: var(--packers-green); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--packers-gold); }

/* ── 16. WordPress alignment helpers ────────────────────────  */
.alignleft  { float: left;  margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: var(--text-sm); color: var(--gbp-muted); text-align: center; margin-top: var(--space-2); }
.gallery { display: grid; gap: var(--space-3); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img  { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
    .gallery-columns-3,
    .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 17. Logo text treatment ─────────────────────────────────  */
.gbp-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    flex-shrink: 0;
}
.gbp-logo--image img { max-height: 48px; width: auto; }
.gbp-logo--text      { gap: var(--space-2); }
.gbp-logo__g {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--packers-gold);
    color: var(--gbp-bg-dark);
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;
}
.gbp-logo__name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.gbp-logo__greenbay {
    font-family: var(--font-headline);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--gbp-muted);
}
.gbp-logo__packers {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    color: var(--gbp-white-soft);
    line-height: 1;
}
.gbp-logo__eu {
    font-family: var(--font-headline);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: var(--ls-wider);
    color: var(--packers-gold);
    text-transform: uppercase;
    margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════
   RYCHLE SPRAVY ARCHIVE — encyclopedia style overrides
   ══════════════════════════════════════════════════════════════════ */

.gbp-qn-archive {
    background: #F8F5EE;
}

/* Header */
.gbp-qn-archive__eyebrow {
    color: #FFB612 !important;
}
.gbp-qn-archive__title {
    font-size: clamp(48px, 7vw, 96px) !important;
    color: #203731 !important;
}
.gbp-qn-archive__title span {
    color: #203731 !important;
}

/* Filters */
.gbp-qn-archive-filter {
    border-color: rgba(32,55,49,0.2) !important;
    color: rgba(32,55,49,0.65) !important;
    background: transparent !important;
}
.gbp-qn-archive-filter:hover {
    border-color: #203731 !important;
    color: #fff !important;
    background: #203731 !important;
}
.gbp-qn-archive-filter.is-active {
    border-color: #203731 !important;
    color: #FFB612 !important;
    background: #203731 !important;
}

/* Cards — clean white */
.gbp-qn-archive-grid .gbp-qn-card {
    background: #ffffff !important;
    border: 1px solid rgba(32,55,49,0.12) !important;
    box-shadow: 0 2px 12px rgba(32,55,49,0.08) !important;
}
.gbp-qn-archive-grid .gbp-qn-card:hover {
    border-color: rgba(32,55,49,0.25) !important;
    box-shadow: 0 6px 24px rgba(32,55,49,0.14) !important;
    transform: translateY(-3px);
}
/* Remove dark image overlay */
.gbp-qn-archive-grid .gbp-qn-card__img-wrap::after {
    display: none !important;
}
/* Card text colors */
.gbp-qn-archive-grid .gbp-qn-card__title,
.gbp-qn-archive-grid .gbp-qn-card__title a {
    color: #203731 !important;
}
.gbp-qn-archive-grid .gbp-qn-card__title a:hover {
    color: #FFB612 !important;
}
.gbp-qn-archive-grid .gbp-qn-card__text {
    color: rgba(0,0,0,0.72) !important;
}
/* expand: short visible by default, full hidden; .is-expanded flips them */
.gbp-qn-card__text-full { display: none; }
.gbp-qn-card__text-wrap.is-expanded .gbp-qn-card__text-short { display: none; }
.gbp-qn-card__text-wrap.is-expanded .gbp-qn-card__text-full  { display: block; }
.gbp-qn-card__expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #203731;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.gbp-qn-card__expand-btn:hover { opacity: 1; }
.gbp-qn-card__expand-btn svg { flex-shrink: 0; }
.gbp-qn-archive-grid .gbp-qn-card__date {
    color: rgba(32,55,49,0.50) !important;
}
.gbp-qn-archive-grid .gbp-qn-card__footer {
    border-top-color: rgba(32,55,49,0.10) !important;
}
/* Reactions */
.gbp-qn-archive-grid .gbp-qn-reaction-btn {
    background: rgba(32,55,49,0.06) !important;
    border-color: rgba(32,55,49,0.15) !important;
    color: rgba(32,55,49,0.65) !important;
}
.gbp-qn-archive-grid .gbp-qn-reaction-btn:hover {
    background: rgba(32,55,49,0.12) !important;
    border-color: rgba(32,55,49,0.30) !important;
    color: #203731 !important;
}
.gbp-qn-archive-grid .gbp-qn-reaction-btn.is-reacted {
    background: rgba(255,182,18,0.12) !important;
    border-color: rgba(255,182,18,0.45) !important;
    color: #C99700 !important;
}
/* Comment button */
.gbp-qn-archive-grid .gbp-qn-comment-btn {
    background: rgba(32,55,49,0.06) !important;
    border-color: rgba(32,55,49,0.15) !important;
    color: rgba(32,55,49,0.65) !important;
}
.gbp-qn-archive-grid .gbp-qn-comment-btn:hover {
    background: rgba(255,182,18,0.10) !important;
    border-color: rgba(255,182,18,0.40) !important;
    color: #203731 !important;
}

/* ── Scroll to top button ──────────────────────────────────── */
.gbp-scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--packers-green);
    border: 2px solid rgba(255,182,18,0.40);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}
.gbp-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.gbp-scroll-top:hover {
    background: #2d4a3e;
    border-color: var(--packers-gold);
}
@media (max-width: 768px) {
    .gbp-scroll-top {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}