/* ===== Ohio Primetime Basketball � Red / Black / White ===== */

:root {
    --pt-red: #cc0000;
    --pt-red-dark: #990000;
    --pt-red-glow: #ff1a1a;
    --pt-black: #0d0d0d;
    --pt-dark: #141414;
    --pt-darker: #0a0a0a;
    --pt-white: #ffffff;
    --pt-offwhite: #f0f0f0;
    --pt-gray: #999;
    --pt-gray-light: #bbb;
    --pt-card-bg: #1a1a1a;
    --pt-card-border: rgba(204, 0, 0, 0.2);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--pt-black);
    color: var(--pt-offwhite);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* Bootstrap's .text-muted/::placeholder default to their light-theme colors (a dark
   charcoal, ~rgba(33,37,41,.75)) since this site never sets data-bs-theme="dark" - on this
   site's near-black backgrounds that composites to roughly 1.1-1.2:1 contrast, i.e.
   effectively invisible. .identity-page already had its own .text-muted override; this
   makes the same fix apply everywhere, and adds the equivalent placeholder fix, which had
   no override anywhere. */
.text-muted {
    color: var(--pt-gray-light) !important;
}

::placeholder {
    color: var(--pt-gray-light);
    opacity: 1;
}

/* Bare fallback so a bare <span class="text-red"> (e.g. required-field asterisks in forms)
   actually renders red - previously .text-red only existed nested inside four unrelated
   scoped selectors (hero h1, image-break overlay, page-header h1, store-cta h2), each with
   extra effects (text-stroke, etc.) that still apply on top of this in those contexts since
   they're more specific. Stroke added here too so the un-scoped uses (required-field
   asterisks, inline heading words like "Acceptance"/"Now") get the same edge legibility the
   four scoped contexts already have - no font-size here since these already inherit at least
   1rem from their surrounding label/heading and this must not shrink those headings.
*/
.text-red {
    color: var(--pt-red);
    -webkit-text-stroke: 0.5px var(--pt-white);
    paint-order: stroke fill;
}

/* Red validation/error text (Bootstrap's .text-danger/.invalid-feedback/validation-summary)
   has never had a dark-theme override anywhere on this site, so it renders at Bootstrap's
   plain #dc3545 with no minimum size or stroke against this site's near-black
   body/card backgrounds. Headings are excluded from the size floor (Views/Shared/Error.cshtml
   uses <h1 class="text-danger">/<h2 class="text-danger">, meant to render at their normal,
   much larger heading size) but still get a stroke, sized for their larger text, below. */
.text-danger:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.invalid-feedback,
.validation-summary-errors li {
    font-size: 1rem;
    -webkit-text-stroke: 0.5px var(--pt-white);
    paint-order: stroke fill;
}

h1.text-danger, h2.text-danger, h3.text-danger, h4.text-danger, h5.text-danger, h6.text-danger {
    -webkit-text-stroke: 1px var(--pt-white);
    paint-order: stroke fill;
}

/* ===== Skip link ===== */
/* Bootstrap's .visually-hidden-focusable handles hiding this until focused; this just makes
   it look like an intentional banner instead of plain unstyled link text once it appears,
   so keyboard users landing here on the very first Tab press (before the six-link nav, its
   dropdown, and the account widget) get a clear, on-brand "yes, this did something." */
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    background: var(--pt-red);
    color: var(--pt-white);
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

/* ===== Navbar ===== */
.navbar-pt {
    background: rgba(10, 10, 10, 0.96) !important;
    backdrop-filter: blur(12px);
    border-bottom: 3px solid var(--pt-red);
    padding: 0.4rem 0;
    transition: padding 0.3s ease;
}

.navbar-pt .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar-pt .navbar-brand img {
    height: 50px;
    width: auto;
    transition: height 0.3s ease;
}

.navbar-pt .brand-text {
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pt-white) !important;
    line-height: 1.1;
}

.navbar-pt .brand-text span {
    color: var(--pt-red);
    -webkit-text-stroke: 0.5px var(--pt-white);
    paint-order: stroke fill;
}

.navbar-pt .nav-link {
    color: var(--pt-offwhite) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    padding: 0.6rem 1rem !important;
    transition: color 0.2s;
    position: relative;
}

.navbar-pt .nav-link:hover,
.navbar-pt .nav-link.active {
    color: var(--pt-red) !important;
}

.navbar-pt .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--pt-red);
    transition: width 0.25s;
}

.navbar-pt .nav-link:hover::after,
.navbar-pt .nav-link.active::after {
    width: 50%;
}

.navbar-pt .nav-link.nav-link-store {
    color: var(--pt-red) !important;
    border: 1px solid var(--pt-red);
    border-radius: 4px;
    margin-left: 0.5rem;
    padding: 0.4rem 0.9rem !important;
}

.navbar-pt .nav-link.nav-link-store:hover {
    background: var(--pt-red);
    color: var(--pt-white) !important;
}

.navbar-pt .nav-link.nav-link-store::after {
    display: none;
}

.navbar-toggler {
    border-color: var(--pt-red) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23cc0000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===== Hero ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.3);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.6) 0%,
        rgba(10, 10, 10, 0.3) 40%,
        rgba(10, 10, 10, 0.7) 80%,
        var(--pt-black) 100%
    );
    z-index: 1;
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 1rem;
}

.hero-logo {
    max-width: 240px;
    width: 60%;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 40px rgba(204, 0, 0, 0.35));
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 40px rgba(204, 0, 0, 0.35)); }
    50% { transform: scale(1.03); filter: drop-shadow(0 0 50px rgba(204, 0, 0, 0.5)); }
}

.hero h1 {
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--pt-white);
    margin: 0;
    line-height: 1;
    text-shadow: 2px 2px 30px rgba(0, 0, 0, 0.8);
}

.hero h1 .text-red {
    color: var(--pt-red);
    -webkit-text-stroke: 1.5px var(--pt-white);
    paint-order: stroke fill;
}

.hero .hero-sub {
    font-size: 1.2rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: var(--pt-gray-light);
    margin-top: 0.5rem;
}

.hero .hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--pt-red);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    text-decoration: none;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ===== Image Banner Strip ===== */
.image-strip {
    display: flex;
    overflow: hidden;
    height: 200px;
    gap: 0;
}

.image-strip img {
    height: 100%;
    width: auto;
    min-width: 300px;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(20%) brightness(0.85);
    transition: filter 0.3s;
}

.image-strip img:hover {
    filter: grayscale(0%) brightness(1);
}

@media (max-width: 768px) {
    .image-strip { height: 130px; }
    .image-strip img { min-width: 200px; }
}

/* ===== Red Accent Bar / Stats ===== */
.stats-bar {
    background: var(--pt-red);
    padding: 2.5rem 0;
}

.stats-bar .stats-season {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-bottom: 1rem;
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--pt-white);
    display: block;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ===== Sections ===== */
.section-black { background: var(--pt-black); padding: 5rem 0; }
.section-dark  { background: var(--pt-dark);  padding: 5rem 0; }

.section-title {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 0.75rem;
    color: var(--pt-white);
}

.section-divider {
    width: 60px;
    height: 4px;
    background: var(--pt-red);
    margin: 0 auto 3rem;
    border-radius: 2px;
}

/* ===== Callout Cards ===== */
.callout-card {
    background: var(--pt-card-bg);
    border-radius: 10px;
    padding: 2rem 1.75rem;
    height: 100%;
    border: 1px solid var(--pt-card-border);
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
    position: relative;
    overflow: hidden;
}

.callout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pt-red);
}

.callout-card:hover {
    transform: translateY(-6px);
    border-color: rgba(204, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(204, 0, 0, 0.1);
}

.callout-card .card-icon {
    width: 56px;
    height: 56px;
    background: var(--pt-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--pt-white);
    margin-bottom: 1.2rem;
}

/* h3 on Home/Index (correctly follows an h2 there); h2 on Teams/Index, which has no h2
   before it otherwise (h1 straight to a card heading) - same component, two valid heading
   levels depending on what precedes it on the page, so both are styled identically here. */
.callout-card h2,
.callout-card h3 {
    color: var(--pt-white);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.callout-card p,
.callout-card li {
    color: var(--pt-gray-light);
    line-height: 1.75;
    font-size: 0.95rem;
}

.callout-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.callout-card ul li {
    padding: 0.35rem 0 0.35rem 1.4rem;
    position: relative;
}

.callout-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 8px;
    height: 8px;
    background: var(--pt-red);
    border-radius: 50%;
}

.btn-pt {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.6rem 1.75rem;
    background: transparent;
    border: 2px solid var(--pt-red);
    color: var(--pt-red);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
    transition: all 0.25s;
}

.btn-pt:hover {
    background: var(--pt-red);
    color: var(--pt-white);
    box-shadow: 0 4px 20px rgba(204, 0, 0, 0.4);
}

.btn-pt-solid {
    display: inline-block;
    padding: 0.75rem 2.5rem;
    background: var(--pt-red);
    color: var(--pt-white) !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    transition: all 0.25s;
}

.btn-pt-solid:hover {
    background: var(--pt-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(204, 0, 0, 0.5);
    color: var(--pt-white) !important;
}

/* ===== Photo Gallery ===== */
.gallery-section {
    background: var(--pt-dark);
    padding: 5rem 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

/* Gallery tiles are real <button> elements (so they're keyboard-focusable/operable) rather
   than <div onclick>, which needs this reset since a <button> otherwise brings its own
   padding/border/background/font from the browser's UA stylesheet. */
button.gallery-item {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
}

button.gallery-item:focus-visible {
    outline: 3px solid var(--pt-red);
    outline-offset: 2px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.45s ease;
    filter: brightness(0.85);
}

.gallery-item:hover img {
    transform: scale(1.07);
    filter: brightness(1);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 6px;
    transition: border-color 0.3s;
}

.gallery-item:hover::after {
    border-color: var(--pt-red);
}

.gallery-item.featured {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item.featured { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 480px) {
    .gallery-item.featured { grid-column: span 1; }
}

/* ===== Tryout registration images =====
   Square (1:1) tiles, centred as a group above the registration form. Separate from
   .gallery-grid/.gallery-item on purpose: that pair is 4:3 and, being a `repeat(auto-fill,
   minmax(280px, 1fr))` grid, parks a single tile in the left-hand column. Flex + centre keeps
   one image centred and several evenly balanced. */
.tryout-image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.tryout-image-tile {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    /* Square regardless of the source image's own ratio - the img below crops to fill it. */
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 420px;
    flex: 0 1 320px;
}

/* The tiles are <button> elements (keyboard-operable, opening the shared lightbox), which needs
   this reset since a <button> otherwise brings its own padding/border/background/font from the
   browser's UA stylesheet - same reason button.gallery-item has one. */
button.tryout-image-tile {
    display: block;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    /* zoom-in rather than pointer: this opens a larger view, it doesn't navigate. */
    cursor: zoom-in;
}

.tryout-image-tile img {
    width: 100%;
    height: 100%;
    /* cover + a per-image object-position (set inline from FocalPointX/Y) is what makes a
       non-square photo crop around the admin-chosen subject instead of always its centre. */
    object-fit: cover;
    transition: filter 0.25s ease;
}

/* Deliberately no default dimming or hover zoom (unlike .gallery-item): these images are usually
   flyers whose text needs to stay legible, and a scale-on-hover inside the square crop would just
   cut more off the edges. A brightness lift plus a ring is enough to signal "clickable". */
.tryout-image-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 6px;
    transition: border-color 0.25s;
    pointer-events: none;
}

button.tryout-image-tile:hover::after,
button.tryout-image-tile:focus-visible::after {
    border-color: var(--pt-red);
}

button.tryout-image-tile:hover img {
    filter: brightness(1.08);
}

button.tryout-image-tile:focus-visible {
    outline: 3px solid var(--pt-red);
    outline-offset: 3px;
}

/* Expand affordance, so it's obvious the tile opens a larger view rather than being decorative. */
.tryout-image-zoom {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--pt-white);
    font-size: 0.85rem;
    opacity: 0.85;
    transition: opacity 0.25s ease, background-color 0.25s ease;
    pointer-events: none;
}

button.tryout-image-tile:hover .tryout-image-zoom,
button.tryout-image-tile:focus-visible .tryout-image-zoom {
    opacity: 1;
    background: var(--pt-red);
    border-color: var(--pt-red);
}

/* ===== Full-width Image Break ===== */
.image-break {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.image-break-collage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
}

.image-break-collage img {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}

.image-break .overlay-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
}

.image-break .overlay-text h2 {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--pt-white);
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.8);
}

.image-break .overlay-text h2 .text-red {
    color: var(--pt-red);
    -webkit-text-stroke: 1px var(--pt-white);
    paint-order: stroke fill;
}

.image-break .overlay-text p {
    color: var(--pt-gray-light);
    font-size: 1.1rem;
    max-width: 500px;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .image-break { height: 280px; }
    .image-break .overlay-text h2 { font-size: 1.6rem; letter-spacing: 2px; }
}

/* ===== Values Cards ===== */
.value-card {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.value-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pt-red);
    transform: scaleX(0);
    transition: transform 0.35s;
}

.value-card:hover::after {
    transform: scaleX(1);
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.value-card .v-icon {
    width: 50px;
    height: 50px;
    background: var(--pt-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.3rem;
    color: var(--pt-white);
}

.value-card h4 {
    color: var(--pt-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.value-card p {
    color: var(--pt-gray-light);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ===== FAQ Accordion ===== */
.faq-section .accordion-item {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    margin-bottom: 0.5rem;
    border-radius: 8px !important;
    overflow: hidden;
}

.faq-section .accordion-button {
    background: var(--pt-card-bg);
    color: var(--pt-white);
    font-weight: 600;
    font-size: 1rem;
    padding: 1.1rem 1.4rem;
    box-shadow: none !important;
    border: none;
    transition: font-size 0.25s ease, padding 0.25s ease;
}

.faq-section .accordion-button:not(.collapsed) {
    background: rgba(204, 0, 0, 0.12);
    color: var(--pt-red);
    font-size: 1.2rem;
    padding: 1.3rem 1.4rem;
}

.faq-section .accordion-button::after {
    filter: invert(1);
}

.faq-section .accordion-button:not(.collapsed)::after {
    filter: invert(0.3) sepia(1) saturate(20) hue-rotate(350deg);
}

.faq-section .accordion-body {
    background: var(--pt-card-bg);
    color: var(--pt-gray-light);
    line-height: 1.8;
    padding: 0.75rem 1.4rem 1.25rem;
    font-size: 0.95rem;
}

/* ===== About ===== */
.about-hero {
    position: relative;
    height: 50vh;
    min-height: 350px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.about-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.35);
}

.about-hero .overlay-text {
    position: relative;
    z-index: 2;
    padding: 3rem;
    width: 100%;
    background: linear-gradient(to top, var(--pt-black), transparent);
}

.about-hero .overlay-text h1 {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--pt-white);
}

.about-content { padding: 4rem 0; }

.about-content p {
    color: var(--pt-gray-light);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1.25rem;
}

.about-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    min-height: 300px;
}

.about-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    border-radius: 8px;
    overflow: hidden;
}

.about-mosaic img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* ===== Footer ===== */
.footer-pt {
    background: var(--pt-darker);
    border-top: 3px solid var(--pt-red);
    padding: 3rem 0 1.5rem;
}

.footer-pt .footer-logo {
    height: 55px;
    margin-bottom: 1rem;
}

.footer-pt h5 {
    color: var(--pt-white);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-pt p { color: var(--pt-gray); font-size: 0.9rem; }

.footer-pt a {
    color: var(--pt-gray);
    font-size: 0.9rem;
    text-decoration: none;
    display: block;
    padding: 0.2rem 0;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-pt a:hover {
    color: var(--pt-red);
    padding-left: 4px;
}

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.footer-bottom p { color: var(--pt-gray); font-size: 0.8rem; margin: 0; }

.footer-login-link {
    display: inline;
    color: var(--pt-gray) !important;
    font-size: 0.8rem;
    padding: 0 !important;
    transition: color 0.2s;
}

.footer-login-link:hover {
    color: var(--pt-red) !important;
    padding-left: 0 !important;
}

/* Social */
.social-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.social-links a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--pt-gray) !important;
    padding: 0 !important;
    transition: all 0.3s;
    font-size: 1.1rem;
}

.social-links a:hover {
    border-color: var(--pt-red);
    color: var(--pt-red) !important;
    background: rgba(204, 0, 0, 0.1);
    transform: translateY(-3px);
    padding-left: 0 !important;
}

/* ===== Lightbox ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox-overlay.active { display: flex; }

.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.5);
    color: var(--pt-white);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    border-color: var(--pt-red);
    color: var(--pt-red);
}

.lightbox-close:focus-visible {
    outline: 3px solid var(--pt-red);
    outline-offset: 2px;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(204, 0, 0, 0.15);
}

/* ===== Scroll-to-top ===== */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 46px;
    height: 46px;
    background: var(--pt-red);
    color: var(--pt-white);
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(204, 0, 0, 0.3);
}

.scroll-top.visible { opacity: 1; }

.scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(204, 0, 0, 0.5);
}

/* ===== Page Header (for inner pages) ===== */
.page-header {
    position: relative;
    height: 40vh;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.page-header-collage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
}

.page-header-collage img {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.3) grayscale(30%);
}

.page-header .page-header-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 3rem;
    background: linear-gradient(to top, var(--pt-black), transparent);
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--pt-white);
    margin: 0;
}

.page-header h1 .text-red {
    color: var(--pt-red);
    -webkit-text-stroke: 1px var(--pt-white);
    paint-order: stroke fill;
}

/* ===== Identity / Login Page ===== */
.identity-page {
    padding-top: 100px;
    padding-bottom: 4rem;
    min-height: 70vh;
}

.identity-page h1,
.identity-page h2 {
    color: var(--pt-white);
}

.identity-page .form-label {
    color: var(--pt-gray-light);
}

.identity-page .form-control {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    color: var(--pt-offwhite);
}

.identity-page .form-control:focus {
    background: var(--pt-dark);
    color: var(--pt-white);
    border-color: var(--pt-red);
}

.identity-page .btn-primary {
    background: var(--pt-red);
    border-color: var(--pt-red);
}

.identity-page .btn-primary:hover {
    background: var(--pt-red-dark);
    border-color: var(--pt-red-dark);
}

.identity-page .form-floating > label,
.identity-page .form-text {
    color: var(--pt-gray-light) !important;
}

.identity-page .nav-pills .nav-link {
    color: var(--pt-gray-light);
}

.identity-page .nav-pills .nav-link:hover:not(.active) {
    color: var(--pt-white);
}

.identity-page .nav-pills .nav-link.active {
    background-color: var(--pt-red);
    color: var(--pt-white);
}

.identity-page .card {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    color: var(--pt-offwhite);
}

.identity-page .card-title {
    color: var(--pt-white);
}

.register-note {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: rgba(204, 0, 0, 0.08);
    border: 1px solid var(--pt-card-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--pt-gray-light);
}

.register-note a {
    color: var(--pt-red);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    -webkit-text-stroke: 0.5px var(--pt-white);
    paint-order: stroke fill;
}

.register-note a:hover {
    text-decoration: underline;
}

/* ===== Contact Page ===== */
.contact-method {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-radius: 10px;
    padding: 2.5rem 2rem;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-method::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--pt-red);
}

.contact-method:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.contact-method .contact-icon {
    width: 72px;
    height: 72px;
    background: var(--pt-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--pt-white);
    margin: 0 auto 1.5rem;
}

.contact-method h2 {
    color: var(--pt-white);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.contact-method .contact-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pt-red);
    -webkit-text-stroke: 0.5px var(--pt-white);
    paint-order: stroke fill;
    display: block;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

.contact-method .contact-value:hover {
    color: var(--pt-red-dark);
}

.contact-method p {
    color: var(--pt-gray-light);
    font-size: 0.9rem;
    margin: 0;
}

.contact-note {
    background: rgba(204, 0, 0, 0.08);
    border: 1px solid var(--pt-card-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    color: var(--pt-gray-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

.contact-note i {
    color: var(--pt-red);
    margin-right: 0.4rem;
}

/* ===== Social Media Page ===== */
.social-platform-card {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.social-platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.social-platform-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--pt-red);
    text-decoration: none;
}

.social-platform-header i {
    font-size: 1.8rem;
    color: var(--pt-white);
    flex-shrink: 0;
}

.social-platform-header div {
    display: flex;
    flex-direction: column;
}

.social-platform-header .platform-name {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pt-white);
    line-height: 1;
}

.social-platform-header .platform-handle {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.2rem;
}

.social-platform-body {
    padding: 1.5rem;
}

.social-platform-body p {
    color: var(--pt-gray-light);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.social-embed-container {
    position: relative;
    width: 100%;
    background: var(--pt-darker);
    border-radius: 6px;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-embed-container iframe {
    width: 100%;
    border: none;
    display: block;
}

.social-follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: transparent;
    border: 2px solid var(--pt-red);
    color: var(--pt-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.25s;
    margin-top: 1rem;
}

.social-follow-btn:hover {
    background: var(--pt-red);
    color: var(--pt-white);
    box-shadow: 0 4px 20px rgba(204,0,0,0.4);
}

.social-link-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--pt-darker);
    border: 1px solid var(--pt-card-border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 0.25rem;
}

.social-preview-icon {
    font-size: 2.5rem;
    color: var(--pt-red);
    flex-shrink: 0;
}

.social-link-preview span {
    color: var(--pt-gray-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ===== Store Banner ===== */
.store-section {
    background: var(--pt-dark);
    padding: 4rem 0;
}

.store-img-wrap {
    display: block;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

.store-img-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--pt-card-border);
    transition: box-shadow 0.3s;
}

.store-img-wrap:hover img {
    box-shadow: 0 0 40px rgba(204,0,0,0.25);
}

.store-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1rem 0 1rem 2rem;
}

.store-cta .store-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--pt-red);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.store-cta h2 {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pt-white);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.store-cta h2 .text-red {
    color: var(--pt-red);
    -webkit-text-stroke: 1px var(--pt-white);
    paint-order: stroke fill;
}

.store-cta p {
    color: var(--pt-gray-light);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
    max-width: 380px;
}

.btn-store {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2.25rem;
    background: var(--pt-red);
    color: var(--pt-white) !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 4px;
    align-self: flex-start;
    transition: all 0.25s;
    box-shadow: 0 4px 20px rgba(204,0,0,0.35);
}

.btn-store:hover {
    background: var(--pt-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(204,0,0,0.55);
}

@media (max-width: 991px) {
    .store-cta {
        padding: 2rem 0 0 0;
        align-items: center;
        text-align: center;
    }
    .store-cta p { max-width: 100%; }
    .btn-store { align-self: center; }
}

/* ===== Navbar dropdown ===== */
.dropdown-menu-pt {
    background: rgba(10, 10, 10, 0.97);
    border: 1px solid var(--pt-red);
    border-radius: 4px;
    padding: 0.4rem 0;
    margin-top: 0 !important;
    backdrop-filter: blur(12px);
}

.dropdown-menu-pt .dropdown-item {
    color: var(--pt-offwhite);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.55rem 1.25rem;
    transition: color 0.2s, background 0.2s;
}

.dropdown-menu-pt .dropdown-item:hover,
.dropdown-menu-pt .dropdown-item:focus {
    background: rgba(204, 0, 0, 0.15);
    color: var(--pt-red);
}

.navbar-pt .nav-link.dropdown-toggle::after {
    border-top-color: currentColor;
}

/* Hover-open on desktop - a progressive enhancement only. The toggle itself is handled by
   site.js (click, and Enter/Space via keydown) for every screen size, so it must stay
   clickable/focusable here - a prior `pointer-events: none` on the toggle made it
   completely unreachable without a mouse. */
@media (min-width: 992px) {
    .navbar-pt .nav-item.dropdown:hover > .dropdown-menu-pt {
        display: block;
    }
}

/* ===== Social callout banner (Contact page) ===== */
.social-callout-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-left: 4px solid var(--pt-red);
    border-radius: 10px;
    padding: 1.75rem 2rem;
    flex-wrap: wrap;
}

.social-callout-icon {
    font-size: 2.2rem;
    color: var(--pt-red);
    flex-shrink: 0;
}

.social-callout-body {
    flex: 1 1 200px;
}

/* h3 on Home/Contact, which already has its own h2 ("Find Us Online") earlier on the page,
   and on Home/Index, where the callout renders above the hero's h1. */
.social-callout-body h2,
.social-callout-body h3 {
    color: var(--pt-white);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.social-callout-body p {
    color: var(--pt-gray-light);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

.social-callout-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.65rem 1.5rem;
    font-size: 0.82rem;
}

@media (max-width: 576px) {
    .social-callout-banner { flex-direction: column; text-align: center; }
    .social-callout-btn { width: 100%; text-align: center; }
    /* The body's 200px flex-basis is a *width* floor in the default row layout, but becomes a
       200px height once this flips to column — leaving a tall dead gap above the button. */
    .social-callout-body { flex-basis: auto; }
}

/* Home/Index tryout teaser: first element on the page, so it needs to clear the fixed-top
   navbar (~66px: 50px brand logo + 0.4rem vertical padding + 3px red bottom border). */
.tryout-teaser-top {
    padding-top: 85px;
    padding-bottom: 1.5rem;
}

/* ===== Honeypot (spam-bot trap field) ===== */
/* Off-screen rather than display:none/visibility:hidden, since some bots
   specifically skip fields hidden that way to evade honeypot detection. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Player Card (generated, downloadable/shareable image) ===== */
.player-card-generated-image {
    max-width: 480px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(204, 0, 0, 0.15);
}

/* ===== WYSIWYG bio editor (Dashboard/EditPlayer) ===== */
.wysiwyg-editor {
    min-height: 100px;
    cursor: text;
}

/* Visible focus replacement, matching .identity-page .form-control:focus's border-color
   swap - the previous `outline: none` here left keyboard users with no visible indicator
   that this contenteditable div (not a real <textarea>, so it gets no default focus ring
   from a browser stylesheet the way an <input> would) was focused at all. */
.wysiwyg-editor:focus {
    outline: none;
    border-color: var(--pt-red);
    box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.35);
}

.wysiwyg-editor p:last-child,
.wysiwyg-editor div:last-child,
.wysiwyg-editor ul:last-child,
.wysiwyg-editor ol:last-child {
    margin-bottom: 0;
}

/* ===== Player photo ===== */
.player-photo-preview {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--pt-card-border);
}

.dashboard-player-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--pt-card-border);
    margin-right: 0.75rem;
}

/* ===== Credit card payment panel (Payments/Pay) ===== */
.card-payment-panel {
    width: 100%;
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-top: 4px solid var(--pt-red);
    border-radius: 10px;
    padding: 2rem 1.75rem;
}

.card-payment-panel-title {
    color: var(--pt-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-payment-panel-amount {
    color: var(--pt-offwhite);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

/* Deliberately a solid white box, not the ambient dark card background - the
   Stripe Card Element's default text color is dark, so a dark surrounding box
   made typed card details nearly unreadable against this site's dark theme. */
.stripe-card-input {
    background: var(--pt-white);
    border: 2px solid var(--pt-red);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-top: 0.75rem;
}

.stripe-card-input.StripeElement--focus {
    border-color: var(--pt-red-glow);
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.25);
}

.stripe-card-input.StripeElement--invalid {
    border-color: var(--pt-red-glow);
}

/* Same "solid light box" treatment as .stripe-card-input just above, and for the same
   reason - a plain .form-control on this dark panel wasn't rendering with enough contrast
   (reported as unreadable/"black on black"). Overriding with an ID selector + !important
   since .identity-page .form-control (site.css) and Bootstrap's own .form-control both
   target this element already; this needs to win outright rather than tweak one property. */
#paymentAmountInput {
    background: var(--pt-white) !important;
    color: var(--pt-black) !important;
    border: 2px solid var(--pt-red) !important;
    font-weight: 600;
}

#paymentAmountInput:focus {
    background: var(--pt-white) !important;
    color: var(--pt-black) !important;
    border-color: var(--pt-red-glow) !important;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.25);
}

/* The "$" prefix sitting directly against #paymentAmountInput's now-white box - matched to
   it rather than left as Bootstrap's default light-gray input-group-text, so the two don't
   visually clash. */
.card-payment-panel .input-group-text {
    background: var(--pt-white);
    color: var(--pt-black);
    border: 2px solid var(--pt-red);
    border-right: none;
    font-weight: 600;
}