/* =========================================================
   AFTER THE BELL — Wrestling Het Fanlisting
   Where wrestling stories find their hearts.
   ========================================================= */

/* Colour palette */

:root {
    --plum: #321b30;
    --deep-plum: #1b101c;
    --charcoal: #171318;
    --rose: #89516f;
    --dusty-rose: #b17d99;
    --gold: #c9a96e;
    --ivory: #eee4d9;
    --muted: #b9a9b5;
    --border: rgba(201, 169, 110, 0.35);
}


/* Reset and page defaults */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 30px 18px;
    background:
        radial-gradient(ellipse at top, rgba(80, 43, 76, 0.35), transparent 55%),
        var(--charcoal);
    color: var(--ivory);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.7;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--dusty-rose);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover,
a:focus {
    color: var(--gold);
    text-decoration: underline;
}

p {
    margin: 0 0 16px;
}


/* Main site wrapper */

.site-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(27, 16, 28, 0.88);
    border: 1px solid var(--border);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
}


/* Header */

.site-header {
    padding: 0;
    background: var(--deep-plum);
    text-align: center;
    overflow: hidden;
}

.site-header a {
    display: block;
}

.header-image {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}


/* Main navigation */

.main-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--deep-plum), var(--plum), var(--deep-plum));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.main-navigation a {
    display: inline-block;
    padding: 9px 13px;
    color: var(--ivory);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a.active {
    color: var(--gold);
    background: rgba(137, 81, 111, 0.22);
    text-decoration: none;
}


/* Main page layout */

.main-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(230px, 0.85fr);
    gap: 24px;
    padding: 28px;
    align-items: start;
}

.content-panel,
.sidebar-panel {
    margin-bottom: 22px;
    padding: 24px;
    background: rgba(50, 27, 48, 0.58);
    border: 1px solid var(--border);
}

.content-panel:last-child,
.sidebar-panel:last-child {
    margin-bottom: 0;
}

.content-panel h1,
.content-panel h2,
.sidebar-panel h2 {
    margin: 0 0 18px;
    color: var(--gold);
    font-weight: normal;
    line-height: 1.3;
}

.content-panel h1 {
    font-size: 30px;
    letter-spacing: 1px;
}

.content-panel h2 {
    font-size: 22px;
}

.sidebar-panel h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 18px;
}

.content-panel h3 {
    color: var(--dusty-rose);
    font-weight: normal;
}

.sidebar {
    min-width: 0;
}

.sidebar-panel p:last-child,
.content-panel p:last-child {
    margin-bottom: 0;
}

.sidebar-panel ul {
    margin: 0;
    padding-left: 19px;
}

.sidebar-panel li {
    margin-bottom: 7px;
    color: var(--muted);
}

.sidebar-links {
    list-style: none;
    padding: 0 !important;
}

.sidebar-links li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(201, 169, 110, 0.16);
}

.sidebar-links li:last-child {
    border-bottom: none;
}


/* Footer */

.site-footer {
    padding: 22px 18px;
    background: var(--deep-plum);
    border-top: 1px solid var(--border);
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.site-footer p {
    margin: 3px 0;
}

.site-footer .footer-title {
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}

.site-footer .footer-credit {
    color: var(--dusty-rose);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 10px;
}


/* Affiliate buttons */

/* Keep ordinary sidebar text links unaffected; only images receive button styling. */
.sidebar-panel img {
    display: inline-block;
    max-width: 88px;
    max-height: 31px;
    width: auto;
    height: auto;
    margin: 5px;
    object-fit: contain;
    border: 1px solid var(--border);
    padding: 2px;
    background: var(--deep-plum);
    transition: opacity 0.3s ease;
}

.sidebar-panel a:hover img {
    opacity: 0.75;
}


/* Fanlisting statistics */

.fanlisting-stats {
    display: flex;
    flex-direction: column;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--muted);
}

.stat-value {
    color: var(--gold);
    text-align: right;
    font-weight: bold;
}

.stat-value a {
    font-size: inherit;
}


/* Member listing */

.member-entry {
    background: rgba(50, 27, 48, 0.65);
    border: 1px solid var(--border);
    border-left: 3px solid var(--rose);
    padding: 14px 18px;
    margin-bottom: 12px;
}

.member-name {
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 17px;
    margin-bottom: 5px;
}

.member-country {
    color: var(--muted);
    font-size: 13px;
}

.member-country span {
    color: var(--dusty-rose);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    margin-right: 5px;
}

.member-contact {
    margin-top: 8px;
    font-size: 12px;
}

.member-contact a {
    margin-right: 12px;
}


.contact-divider {
    color: var(--gold);
    margin: 0 5px;
}


/* Rules page */

.rules-list {
    padding-left: 28px;
    margin: 25px 0;
}

.rules-list li {
    padding: 12px 12px 12px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--ivory);
}

.rules-list li::marker {
    color: var(--gold);
    font-weight: bold;
}

.rules-closing {
    margin-top: 25px;
    color: var(--muted);
    font-style: italic;
}


/* Codes page */

.codes-notice {
    padding: 13px 16px;
    background: rgba(137, 81, 111, 0.2);
    border-left: 3px solid var(--gold);
    color: var(--ivory);
}

.code-subheading {
    color: var(--dusty-rose);
    font-size: 15px;
    font-weight: normal;
    margin: 22px 0 14px;
}

.code-credit {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 15px;
}

.code-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 15px 0 25px;
}

.code-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 8px;
    background: rgba(23, 19, 24, 0.65);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.code-item img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}

.code-size-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.code-size-section:last-child {
    border-bottom: none;
}

.code-size-section h3 {
    color: var(--gold);
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 1px;
}

.code-size-section .code-grid {
    margin-bottom: 8px;
}



/* =========================================================
   FANLISTING FORMS
   Join, Update, Lost Password and Affiliates
   ========================================================= */

.join-form-panel form,
.update-form-panel form,
.lostpass-form-panel form,
.affiliate-form-panel form {
    margin-top: 20px;
}

/* Text fields, email fields, passwords and dropdowns */

.join-form-panel input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.join-form-panel select,
.join-form-panel textarea,
.update-form-panel input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.update-form-panel select,
.update-form-panel textarea,
.lostpass-form-panel input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.lostpass-form-panel select,
.lostpass-form-panel textarea,
.affiliate-form-panel input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.affiliate-form-panel select,
.affiliate-form-panel textarea {
    width: 100%;
    max-width: 420px;
    padding: 9px 11px;
    background: var(--deep-plum);
    color: var(--ivory);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
}

/* Focus effects */

.join-form-panel input:focus,
.join-form-panel select:focus,
.join-form-panel textarea:focus,
.update-form-panel input:focus,
.update-form-panel select:focus,
.update-form-panel textarea:focus,
.lostpass-form-panel input:focus,
.lostpass-form-panel select:focus,
.lostpass-form-panel textarea:focus,
.affiliate-form-panel input:focus,
.affiliate-form-panel select:focus,
.affiliate-form-panel textarea:focus {
    outline: 1px solid var(--gold);
    border-color: var(--gold);
}

/* Radio buttons and checkboxes */

.join-form-panel input[type="radio"],
.join-form-panel input[type="checkbox"],
.update-form-panel input[type="radio"],
.update-form-panel input[type="checkbox"],
.lostpass-form-panel input[type="radio"],
.lostpass-form-panel input[type="checkbox"],
.affiliate-form-panel input[type="radio"],
.affiliate-form-panel input[type="checkbox"] {
    accent-color: var(--gold);
}

/* Submit buttons */

.join-form-panel input[type="submit"],
.join-form-panel button,
.update-form-panel input[type="submit"],
.update-form-panel button,
.lostpass-form-panel input[type="submit"],
.lostpass-form-panel button,
.affiliate-form-panel input[type="submit"],
.affiliate-form-panel button {
    padding: 10px 22px;
    background: var(--rose);
    color: var(--ivory);
    border: 1px solid var(--gold);
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: inherit;
    transition: background 0.3s ease;
}

.join-form-panel input[type="submit"]:hover,
.join-form-panel button:hover,
.update-form-panel input[type="submit"]:hover,
.update-form-panel button:hover,
.lostpass-form-panel input[type="submit"]:hover,
.lostpass-form-panel button:hover,
.affiliate-form-panel input[type="submit"]:hover,
.affiliate-form-panel button:hover {
    background: var(--plum);
}

/* Labels */

.join-form-panel label,
.update-form-panel label,
.lostpass-form-panel label,
.affiliate-form-panel label {
    color: var(--dusty-rose);
}


/* Preserve Enthusiast's honeypot field: keep it hidden from visitors. */

.enth-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* Responsive layout */

@media (max-width: 760px) {
    body {
        padding: 16px 10px;
    }

    .main-layout {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 18px;
    }

    .main-navigation {
        gap: 0;
        padding: 8px;
    }

    .main-navigation a {
        padding: 8px 10px;
        font-size: 10px;
    }

    .content-panel,
    .sidebar-panel {
        padding: 19px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
    }

    .site-wrapper {
        border-left: 0;
        border-right: 0;
    }

    .main-layout {
        padding: 14px;
    }

    .content-panel h1 {
        font-size: 25px;
    }

    .content-panel h2 {
        font-size: 20px;
    }

    .stat-row {
        gap: 8px;
        font-size: 12px;
    }

    .code-grid {
        gap: 8px;
    }

    .code-item {
        padding: 5px;
    }
}