/* ===== 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; }
}

/* ===== 3v3 signup page ===== */
.threeonthree-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    color: var(--pt-gray-light);
}

.threeonthree-meta i { color: var(--pt-red); margin-right: 0.25rem; }

/* The event graphic is shown whole (contain, no crop) - flyers carry text. A <button> so it's
   keyboard-operable for the shared lightbox; same UA-style reset as button.tryout-image-tile. */
button.threeonthree-graphic {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: zoom-in;
    max-width: 100%;
}

.threeonthree-graphic img {
    max-width: 100%;
    max-height: 600px;
    object-fit: contain;
    border-radius: 6px;
}

.threeonthree-player {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 1rem;
}

.threeonthree-player legend {
    float: none;
    width: auto;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

/* ===== 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);
}

/* Header text wrapped in a .container (Teams/Details) so the title lines up with the page
   content below it - the container supplies the horizontal inset, so the full-width band's own
   side padding would only push the title out of line on narrower screens. */
.about-hero .overlay-text.hero-text-contained,
.page-header .page-header-content.hero-text-contained {
    padding-left: 0;
    padding-right: 0;
}

.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);
}

/* Set/Reset Password checklist - each line turns green as it's met. */
.password-requirements {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--pt-gray-light);
}

.password-requirements-title {
    color: var(--pt-offwhite);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.password-requirements li {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.1rem 0;
}

.password-requirements li.met {
    color: #4caf50;
}

.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);
}

/* Bootstrap's .list-group-item is a white box with near-black text - untouched, it rendered
   as a stack of bright cards on this site's near-black pages (reported on the parent
   dashboard's practice list). Matched to .identity-page .card above so the two read as the
   same surface; every list-group on the public site (dashboard fees + practices, player
   contacts, team contacts) sits inside .identity-page, so this covers all of them. */
.identity-page .list-group-item {
    background: var(--pt-card-bg);
    border-color: var(--pt-card-border);
    color: var(--pt-offwhite);
}

.identity-page .list-group-item strong {
    color: var(--pt-white);
}

/* Bootstrap's default link blue on the now-dark item is well under contrast; these are
   incidental links (a gym's map link), so they take the site red rather than a button. */
.identity-page .list-group-item a:not(.btn) {
    color: var(--pt-red-glow);
}

.identity-page .list-group-item a:not(.btn):hover {
    color: var(--pt-white);
}

/* The tryout "thank you" page body (Tryouts/RegisterConfirmation) is admin-editable site
   content written in the same email style as the confirmation email - inline colours meant for
   a white background (#666/#999 text, #cc0000 links) that are hard to read on this dark page.
   !important is the only way past an inline style, and it means whatever an admin pastes in
   stays readable here; font sizes and spacing are left as authored. */
.confirmation-body,
.confirmation-body * {
    color: var(--pt-gray-light) !important;
}

.confirmation-body strong,
.confirmation-body b {
    color: var(--pt-white) !important;
}

.confirmation-body a {
    color: var(--pt-red-glow) !important;
}

.confirmation-body a:hover {
    color: var(--pt-white) !important;
}

/* Same problem in the dark tables on public pages (the game schedule and the practice
   schedule on a team's page): Bootstrap's default link blue is both off-palette and short of
   contrast on .table-dark's near-black rows. */
/* :not(.btn) - a link styled as a button (the Evaluate button on My Tryout Groups) keeps its
   button colours; without it this rule painted red-glow text onto the red .btn-primary
   background, which was close to unreadable. */
.table-dark a:not(.btn) {
    color: var(--pt-red-glow);
}

.table-dark a:not(.btn):hover {
    color: var(--pt-white);
}

/* The "no answer yet" chip on the parent practice list. Deliberately an outline rather than
   another solid Bootstrap color: it's the absence of an answer, so it shouldn't compete with
   the real statuses (Coming/Not coming/Cancelled) sitting beside it. Was .bg-light, which
   was a bright white pill against the dark item. */
.badge-unanswered {
    background: transparent;
    border: 1px solid var(--pt-gray);
    color: var(--pt-gray-light);
    font-weight: 500;
}

.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);
}

/* .dropdown-menu-end only right-aligns via Bootstrap's Popper positioning, which this hand-rolled
   menu doesn't use - so the account menu (the last item in the navbar) opened rightwards from its
   icon and ran off the screen edge. Pin it to the right on desktop; in the collapsed mobile nav
   the menu sits in normal flow and needs nothing. */
@media (min-width: 992px) {
    .navbar-pt .dropdown-menu-pt.dropdown-menu-end {
        right: 0;
        left: auto;
    }
}

/* "Viewing as someone@example.com" in the account menu while impersonating - wraps rather than
   stretching the menu to the width of a long email. */
.dropdown-menu-pt .impersonation-menu-label {
    max-width: 16rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.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;
}
/* Tournament bracket snapshots (_TournamentBracket.cshtml) - see fitBracketFrames in site.js
   for why the iframe is transformed rather than sized. Each bracket takes 80% of its container
   (all of it on a phone, where 80% would only make it smaller) and the frame is scaled up or
   down to fill that - err on the side of showing too much. The iframe is taken out of flow so
   its native width never sizes anything (inside the team page's schedule table it would
   otherwise widen the table); the script sets the wrapper's height once the scale is known. */
.tournament-bracket {
    width: 80%;
}

@media (max-width: 575.98px) {
    .tournament-bracket {
        width: 100%;
    }
}

.bracket-frame-wrap {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

.bracket-frame-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 0;
    transform-origin: top left;
    max-width: none;
}

/* A bracket inside the team page's schedule table (Teams/Details), after its tournament's last
   game. Its own background, rather than the stripe, keeps it from reading as one more game row. */
.table-striped > tbody > tr.schedule-bracket-row > * {
    --bs-table-bg-type: transparent;
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

/* Impersonation bar (_ImpersonationBanner.cshtml) - pinned to the bottom of the viewport on every
   page of an impersonated session, unmissable on purpose. The body gets matching bottom padding
   so the bar never covers the footer's last line. */
.impersonation-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 0.6rem 0;
    background: #ffc107;
    color: #000;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
}

.impersonation-bar-admin {
    font-size: 0.875em;
    opacity: 0.8;
}

body:has(.impersonation-bar) {
    padding-bottom: 4.5rem;
}

/* ===== Online store (/store, StoreController) ===== */
.store-page .breadcrumb a { color: var(--pt-red-glow); }
.store-page .breadcrumb-item.active,
.store-page .breadcrumb-item + .breadcrumb-item::before { color: var(--pt-gray-light); }

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
}

.store-card {
    display: flex;
    flex-direction: column;
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-radius: 8px;
    overflow: hidden;
    color: var(--pt-offwhite);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}

.store-card:hover,
.store-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(204, 0, 0, 0.3);
    color: var(--pt-white);
}

@media (prefers-reduced-motion: reduce) {
    .store-card { transition: none; }
    .store-card:hover, .store-card:focus-visible { transform: none; }
}

/* Product pictures are shown whole (contain), on white, since most are flat product shots. */
.store-card-image,
.store-photo {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--pt-white);
    overflow: hidden;
}

.store-photo { border-radius: 8px; }

.store-card-image img,
.store-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.store-card-image img.store-card-placeholder,
.store-photo img.store-card-placeholder {
    padding: 20%;
    background: var(--pt-dark);
}

.store-card-body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 1rem 1rem;
}

.store-card-name { font-weight: 600; }

.store-card-price,
.store-price {
    color: var(--pt-red-glow);
    font-weight: 700;
}

.store-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.store-thumb {
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--pt-white);
    overflow: hidden;
}

.store-thumb img { width: 100%; height: 100%; object-fit: contain; }
.store-thumb.is-current { border-color: var(--pt-red); }

/* Admin-authored HTML (sanitized): readable links on the dark page. */
.store-rich a { color: var(--pt-red-glow); }

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

.store-page .form-check-label { color: var(--pt-offwhite); }

.store-cart-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--pt-card-border);
}

.store-cart-image {
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    background: var(--pt-white);
    border-radius: 6px;
    overflow: hidden;
}

.store-cart-image img { width: 100%; height: 100%; object-fit: contain; }
.store-cart-name { color: var(--pt-white); text-decoration: none; }
.store-cart-total { min-width: 5rem; }

.store-page .flex-grow-1 { min-width: 10rem; }

/* ===== Super Bowl squares (/squares, SquaresController) ===== */
.squares-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

.squares-grid {
    border-collapse: collapse;
    min-width: 640px;
    width: 100%;
    table-layout: fixed;
    color: var(--pt-offwhite);
}

.squares-grid th,
.squares-grid td {
    border: 1px solid var(--pt-card-border);
    text-align: center;
    vertical-align: middle;
}

.squares-corner { width: 4.5rem; border: none !important; }

.squares-team {
    background: var(--pt-red);
    color: var(--pt-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: .35rem;
}

.squares-team-vertical { width: 2rem; padding: 0; }

.squares-team-vertical span {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: .5rem 0;
}

.squares-digit {
    background: var(--pt-dark);
    color: var(--pt-white);
    font-size: 1.15rem;
    font-weight: 700;
    height: 2.5rem;
    width: 2.5rem;
}

.squares-cell {
    height: 3.25rem;
    font-size: .72rem;
    line-height: 1.1;
    padding: 0;
    overflow: hidden;
    word-break: break-word;
}

.squares-cell.is-taken {
    background: var(--pt-card-bg);
    color: var(--pt-white);
    padding: .15rem;
}

.squares-cell label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 3.25rem;
    cursor: pointer;
    color: var(--pt-gray);
    background: transparent;
    transition: background .1s;
}

.squares-cell label:hover { background: rgba(204, 0, 0, 0.25); color: var(--pt-white); }

.squares-cell .btn-check:checked + label {
    background: var(--pt-red);
    color: var(--pt-white);
    font-weight: 700;
}

.squares-cell .btn-check:focus-visible + label { outline: 2px solid var(--pt-white); outline-offset: -3px; }

/* ===== Light checkout panels =====
   Cart, checkout, order/pay and the squares purchase/claim pages put their forms and totals on
   white panels with dark text, like the Stripe card box, instead of the site's near-black cards -
   dark inputs on dark cards read poorly where people are typing addresses and paying. Opt in by
   adding .checkout-light to the page's section. Specific enough (and !important where the site's
   own overrides use it) to beat the .identity-page dark-theme rules. */
.checkout-light .card,
.checkout-light .card-payment-panel,
.checkout-light .list-group-item {
    background: var(--pt-white);
    color: #1a1a1a;
    border: 1px solid #d9d9d9;
}

.checkout-light .card,
.checkout-light .card-payment-panel {
    border-top: 4px solid var(--pt-red);
    border-radius: 10px;
}

.checkout-light .card .card-title,
.checkout-light .card h2,
.checkout-light .card strong,
.checkout-light .card-payment-panel-title,
.checkout-light .card-payment-panel-amount,
.checkout-light .list-group-item strong {
    color: #0d0d0d;
}

.checkout-light .card .text-muted,
.checkout-light .card .form-text,
.checkout-light .card-payment-panel .text-muted,
.checkout-light .list-group-item .text-muted {
    color: #595959 !important;
}

.checkout-light .card .form-label,
.checkout-light .card .form-check-label {
    color: #1a1a1a;
}

.checkout-light .card .form-control,
.checkout-light .card .form-select,
.checkout-light .card-payment-panel .form-control {
    background-color: var(--pt-white);
    color: #0d0d0d;
    border: 1px solid #a6a6a6;
}

.checkout-light .card .form-control:focus,
.checkout-light .card .form-select:focus {
    background-color: var(--pt-white);
    color: #0d0d0d;
    border-color: var(--pt-red);
    box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .2);
}

.checkout-light .card ::placeholder { color: #767676; }

.checkout-light .card a:not(.btn):not(.btn-pt):not(.btn-pt-solid),
.checkout-light .list-group-item a:not(.btn) {
    color: var(--pt-red);
}

.checkout-light .card .btn-outline-light {
    color: #333;
    border-color: #a6a6a6;
}

.checkout-light .card .btn-outline-light:hover {
    background: #333;
    color: var(--pt-white);
}

.checkout-light .card hr { border-color: #cfcfcf; opacity: 1; }
.checkout-light .card .store-cart-line { border-bottom-color: #e6e6e6; }
.checkout-light .card .store-cart-name { color: #0d0d0d; }
.checkout-light .card .store-rich,
.checkout-light .card .store-rich * { color: #1a1a1a; }
.checkout-light .card .store-rich a { color: var(--pt-red); }
.checkout-light .card .store-price { color: var(--pt-red); }
.checkout-light .card .text-warning { color: #8a5300 !important; }
.squares-cell.is-taken.is-held { color: var(--pt-gray-light); font-style: italic; }
.checkout-light .card .btn-link, .checkout-light .card-payment-panel .btn-link { color: var(--pt-red); }
.checkout-light .card .form-check-input { border-color: #8c8c8c; }
.checkout-light .card .form-check-input:checked { background-color: var(--pt-red); border-color: var(--pt-red); }
/* A square the buyer has picked says so, not "Open". */
.squares-cell .squares-picked { display: none; }
.squares-cell .btn-check:checked + label .squares-open { display: none; }
.squares-cell .btn-check:checked + label .squares-picked { display: inline; }
.squares-paid { color: #3ccf6e; font-weight: 700; }

/* ===== Pick 3 fundraiser (/pick3, Pick3Controller; boxes driven by js/pick3.js) ===== */
.pick3-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem 1rem;
}
.pick3-input {
    width: 5.5rem;
    font-family: var(--bs-font-monospace);
    font-size: 1.35rem;
    letter-spacing: 0.15em;
    text-align: center;
}
.pick3-numbers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick3-number {
    font-family: var(--bs-font-monospace);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.75rem;
    border: 2px solid #cc0000;
    border-radius: 0.375rem;
}

/* ===== Paint My Player (PaintMyPlayerSvg draws the graphic and carries its own styles) ===== */
.pmp-art-frame {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.pmp-family-note {
    background: #fff;
    color: #0d0d0d;
    border-left: 4px solid var(--pt-red);
    padding: 12px 16px;
    border-radius: 6px;
}

.pmp-legend .pmp-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #0d0d0d;
    border-radius: 3px;
    vertical-align: -2px;
}

.pmp-swatch-open { background: #fff; }
.pmp-swatch-selected { background: #ff5c5c; }
.pmp-swatch-painted { background: #cc0000; }
.pmp-swatch-held { background: repeating-linear-gradient(45deg, #ff9a9a 0 4px, #ffe3e3 4px 9px); }

.pmp-palette .btn { margin: 0 4px 6px 0; min-width: 52px; }
.pmp-palette .btn.active { background: var(--pt-red); border-color: var(--pt-red); color: #fff; }

.pmp-paid-to-program {
    background: rgba(25, 135, 84, 0.15);
    border: 1px solid rgba(25, 135, 84, 0.6);
    border-radius: 6px;
    padding: 10px 14px;
    font-weight: 600;
}

/* ===== Create a Player (CreateAPlayerSvg draws the flyer and carries its own styles) ===== */
.cap-art-frame {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(120, 60, 220, 0.35);
}

.cap-form { position: sticky; top: 90px; }

.cap-summary {
    font-weight: 700;
    background: #f3eefe;
    border-left: 4px solid #8a4dff;
    padding: 8px 12px;
    border-radius: 4px;
}

/* ===== Active Fundraisers (/fundraisers) ===== */
.fundraiser-card {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    color: var(--pt-offwhite);
    transition: transform .15s ease, border-color .15s ease;
}

.fundraiser-card:hover,
.fundraiser-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--pt-red);
}

.fundraiser-card .card-img-top { height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

.fundraiser-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

/* The menu has nine items: keep each label on one line and tighten the spacing on desktop widths,
   and below 1400px show the logo without the name beside it, so the row (Login is last) fits the
   container (the phone menu is unaffected). */
.navbar-pt .nav-link { white-space: nowrap; }

@media (min-width: 992px) {
    .navbar-pt .nav-link { padding: 0.6rem 0.6rem !important; letter-spacing: 0.5px; }
    .navbar-pt .nav-link.nav-link-store { padding: 0.4rem 0.6rem !important; }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-pt .brand-text { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-pt .nav-link { font-size: 0.75rem; padding: 0.6rem 0.4rem !important; }
    .navbar-pt .navbar-brand { font-size: 1rem; }
}

/* "Share on Facebook" on the fundraiser pages (_FacebookShareButton), in Facebook's blue. */
.fb-share-btn {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff !important;
    font-weight: 600;
}

.fb-share-btn:hover,
.fb-share-btn:focus-visible {
    background: #166fe5;
    border-color: #166fe5;
    color: #fff !important;
}

/* ===== Sponsors (/sponsors, the home page rotation, team pages) ===== */
/* Logos are always square with a white background (SquareImage), so tiles frame them on white. */
.sponsor-intro { max-width: 720px; }

.sponsor-grid { display: grid; gap: 1.5rem; }
.sponsor-grid-large { grid-template-columns: 1fr; }
.sponsor-grid-medium { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sponsor-grid-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

.sponsor-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-radius: 8px;
}

.sponsor-card-logo { display: block; flex-shrink: 0; }

.sponsor-card-logo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #fff;
}

/* The pitch is plain text: keep the line breaks the sponsor typed. */
.sponsor-card-pitch { white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 0; }

.sponsor-card h3 a { color: var(--pt-white); }
.sponsor-card h3 a:hover,
.sponsor-card h3 a:focus-visible { color: var(--pt-red-glow); }

/* A higher tier must never look smaller: on a phone Large fills the width, so Medium is capped. */
.sponsor-grid-medium .sponsor-card-logo { width: min(100%, 240px); }
.sponsor-grid-small .sponsor-card-logo { width: min(100%, 160px); }
.sponsor-grid-small .sponsor-card-pitch { font-size: 0.875rem; }

@media (min-width: 768px) {
    .sponsor-grid-large .sponsor-card-logo { width: 360px; }
    .sponsor-grid-large .sponsor-card { flex-direction: row; align-items: center; padding: 1.5rem; gap: 2rem; }
    .sponsor-grid-large .sponsor-card-body { font-size: 1.125rem; }
}

.sponsor-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }

.sponsor-logo-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 160px;
    color: var(--pt-offwhite);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sponsor-logo-link:hover,
.sponsor-logo-link:focus-visible { color: var(--pt-white); text-decoration: underline; }

.sponsor-logo-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #fff;
}

.sponsor-rotator { width: min(240px, 100%); }

.sponsor-logo-preview img,
.sponsor-order-logo {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}