html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Base navbar link */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icons hidden by default */
.nav-icon {
    display: none;
    height: 32px;
    width: auto;
}

/* Text visible by default */
.nav-text {
    display: inline;
}

.navbar-domain {
    white-space: normal;
    color: #000000;
    /*color: #311300;*/
    text-align: center;
    word-break: break-all;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'carilliantine';
}

/* Switch to image when navbar has room */
@media (min-width: 992px) {
    .nav-text {
        display: none;
    }

    .nav-icon {
        display: inline;
    }
}

.nav-item:hover .nav-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Giant burnt orange background */
.register-page {
    min-height: 100vh;
    background-color: #CC5500; /* Burnt Orange */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flex container */
.register-flex {
    display: flex;
    width: 100%;
    max-width: 1400px;
    align-items: stretch;
}

/* Side image panels */
.side-image {
    flex: 1;
    background-size: cover;
    background-position: center;
}

    /* Replace these URLs with your images */
    .side-image.left {
        background-image: url('/images/left-fan.jpg');
    }

    .side-image.right {
        background-image: url('/images/right-fan.jpg');
    }

/* Center card */
.register-card {
    flex: 0 0 680px;
    background: #fff;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

    .register-card h2 {
        text-align: center;
        margin-bottom: 1.5rem;
    }

/* Inputs spacing */
.form-group {
    margin-bottom: 1rem;
}

/* Avatar */
.avatar-radio {
    display: none;
}

/* Default state */
.avatar-icon {
    border: 2px solid #311D00;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

/* Hover */
.avatar-item:hover .avatar-icon {
    transform: scale(1.1);
}

/* Selected avatar */
/*.avatar-radio:checked + .avatar-icon {
    border: 3px solid #212529;
    box-shadow: 0 0 0 3px rgba(33,37,41,0.25);
    transform: scale(1.1);
}
*/
.avatar-radio:checked + .avatar-icon {
    border-color: #ff3c00;
    box-shadow: 0 0 0 3px rgba(255,60,0,0.4);
}


/* Locker image panels */
.locker-image {
    flex: 1;
    height: 100vh;
    /* image handling */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% auto;
    /*background-size: contain;*/ /* prevents stretching */
    /* fallback background color */
    background-color: #8b5a2b; /* Browns orange */
}

    /* Left locker panel */
    .locker-image.left {
        background-image: url('/Images/Walls/Locker.png');
    }

    /* Right locker panel */
    .locker-image.right {
        background-image: url('/Images/Walls/DawgPoundSm.jpg');
    }


    /*Font defaults*/
.edu-sa-hand-drawn {
    font-family: "Edu SA Hand", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.special-gothic-condensed-one-regular {
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.special-gothic-expanded-one-regular {
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.playwrite-gb-j-guides-regular {
    font-family: "Playwrite GB J Guides", cursive;
    font-weight: 400;
    font-style: normal;
}

.playwrite-gb-j-guides-regular-italic {
    font-family: "Playwrite GB J Guides", cursive;
    font-weight: 400;
    font-style: italic;
}

.great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}

.permanent-marker-regular {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
}

.yellowtail-regular {
    font-family: "Yellowtail", cursive;
    font-weight: 400;
    font-style: normal;
}

.acme-regular {
    font-family: "Acme", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.luckiest-guy-regular {
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
}

.sekuya-regular {
    font-family: "Sekuya", system-ui;
    font-weight: 400;
    font-style: normal;
}

.bbh-bogle-regular {
    font-family: "BBH Bogle", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.keania-one-regular {
    font-family: "Keania One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.cinzel-one {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.reenie-beanie-regular {
    font-family: "Reenie Beanie", cursive;
    font-weight: 400;
    font-style: normal;
}

.eater-regular {
    font-family: "Eater", serif;
    font-weight: 400;
    font-style: normal;
}

.carilliantine-regular {
    font-family: "carilliantine", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.betania-patmos-regular {
    font-family: "Betania Patmos", cursive;
    font-weight: 400;
    font-style: normal;
}

.betania-patmos-regular {
    font-family: "Betania Patmos", cursive;
    font-weight: 400;
    font-style: normal;
}

.lobster-two-regular {
    font-family: "Lobster Two", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lobster-two-bold {
    font-family: "Lobster Two", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.lobster-two-regular-italic {
    font-family: "Lobster Two", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.lobster-two-bold-italic {
    font-family: "Lobster Two", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.allkin-regular {
    font-family: "Allkin", system-ui;
    font-weight: 400;
    font-style: normal;
}

.shadows-into-light-regular {
    font-family: "Shadows Into Light", cursive;
    font-weight: 400;
    font-style: normal;
}

.source-serif-4-reg {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


.gamja-flower-regular {
    font-family: "Gamja Flower", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.tangerine-regular {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
}

.tangerine-bold {
    font-family: "Tangerine", cursive;
    font-weight: 700;
    font-style: normal;
}

.stalemate-regular {
    font-family: "Stalemate", cursive;
    font-weight: 400;
    font-style: normal;
}

/* ================================================
   REUNION SCROLL — Smooth Infinite CSS Animation
   ================================================ */
.reunion-scroll-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.reunion-scroll-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: reunion-scroll 30s linear infinite;
}

.reunion-scroll-wrapper:hover .reunion-scroll-track {
    animation-play-state: paused;
}

@keyframes reunion-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ================================================
   SCRAPBOOK — Masonry Grid
   ================================================ */
.scrapbook-masonry {
    column-count: 3;
    column-gap: 1.25rem;
    padding: 0 0.5rem;
}

@media (max-width: 992px) {
    .scrapbook-masonry {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .scrapbook-masonry {
        column-count: 1;
    }
}

.scrapbook-tile {
    break-inside: avoid;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.scrapbook-tile:hover {
    transform: translateY(-4px);
}

.scrapbook-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.scrapbook-caption {
    padding: 0.75rem 1rem 0;
    font-family: 'BBH Bogle', sans-serif;
    font-size: 0.95rem;
}

.scrapbook-meta {
    padding: 0.5rem 1rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ================================================
   DOG BOWL PAGE
   ================================================ */
.dogbowl-page {
    max-width: 720px;
    margin: 0 auto;
}

/******************/
/*Buttons*/
.btn-dark-alt {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}

.legend-tile {
    text-decoration: none;
    color: inherit;
    display: block;
}

.legend-image-wrapper {
    width: 100%;
    height: 280px; /* visual consistency */
    background-color: #311300; /* Browns seal brown or burnt orange */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    overflow: hidden;
}

    .legend-image-wrapper img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* NO distortion */
    }


.receipt-wall {
    column-count: 3;
    column-gap: 1.5rem;
    padding: 0 1rem;
}

@media (max-width: 992px) {
    .receipt-wall {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .receipt-wall {
        column-count: 1;
    }
}

.receipt-card {
    break-inside: avoid;
    background: #fffdf8;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    box-shadow: 4px 6px 12px rgba(0,0,0,0.15);
    transform: rotate(var(--tilt));
}

    .receipt-card:nth-child(odd) {
        --tilt: -1deg;
    }

    .receipt-card:nth-child(even) {
        --tilt: 1.2deg;
    }

.lounge-title {
    font-family: 'Gamja Flower';
    font-size: 3rem;
    color: darkorange;
    /* Soft white drop shadow */
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 1);
    /* black drop shadow */
    /*text-shadow: 2px 2px 0 rgba(0,0,0,1);*/
    /*margin-bottom: 1.5rem !important;*/
}

.lounge-signature {
    font-family: 'Tangerine';
    font-size: 1.5rem;
    font-weight: 400;
    color: black;
    /* Soft white drop shadow */
    text-shadow: .5px .5px 0 rgba(255, 255, 255, 0.5);
    /* black drop shadow */
    /*text-shadow: 2px 2px 0 rgba(0,0,0,1);*/
    margin-bottom: 1.5rem !important;
}

.letter {
    font-family: 'Reenie Beanie';
    font-size: 1.5rem;
    font-weight: 400;
    color: black;
    /* Soft white drop shadow */
    text-shadow: .5px .5px 0 rgba(255, 255, 255, 0.5);
    /* black drop shadow */
    /*text-shadow: 2px 2px 0 rgba(0,0,0,1);*/
    margin-bottom: 1.5rem !important;
}

.letter-signature {
    font-family: 'Stalemate';
    font-size: 2rem;
    font-weight: 400;
    color: black;
    /* Soft white drop shadow */
    text-shadow: .5px .5px 0 rgba(255, 255, 255, 0.5);
    /* black drop shadow */
    /*text-shadow: 2px 2px 0 rgba(0,0,0,1);*/
    margin-bottom: 1.5rem !important;
}

.receipt-title {
    font-family: 'Gamja Flower';
    margin-bottom: .75rem;
}

.receipt-player-name {
    font-family: 'Permanent Marker';
    color: black;
    font-size: 1rem;
    font-weight: 500;
}

.receipt-stat {
    font-family: 'Permanent Marker';
    color: black;
    font-size: 1rem;
    font-weight: 500;
}

.receipt-stat-cat {
    font-family: 'Allkin';
    font-size: 1rem;
    letter-spacing: -1px;
    --bs-text-opacity: 1;
    color: #6c757d !important;
}

.announcement-drk {
    font-family: 'Edu SA Hand';
    font-weight: bold;
    
    color: black;
    font-size: 2rem;
    font-weight: 400;
    /* Soft white drop shadow */
    /*text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.85);*/
}

/*Media Rotation*/
.congregation-rotator {
    overflow: hidden;
    position: relative;
}

.congregation-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.6s ease-in-out;
}

.media-card {
    position: relative;
    width: 300px;
    flex-shrink: 0;
    text-align: center;
}

.media-image-wrap {
    display: block;
    position: relative;
}

.media-image {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 12px;
}

.media-social-icons {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

/* Social icons rendered under the profile name (non-overlay layout) */
.media-social-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.media-social-row .social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.78);
    border-radius: 50%;
    padding: 7px;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.media-social-row .social-icon-link:hover {
    transform: translateY(-2px);
    background-color: #59260B;
}

.media-social-row .social-icon-link svg {
    width: 100%;
    height: 100%;
    display: block;
}

.social-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 50%;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

    /* Platform icons */
    .social-icon.x {
        background-image: url('/images/icons/twitter.png');
    }

    .social-icon.youtube {
        background-image: url('/images/icons/youtube.png');
    }

    .social-icon.instagram {
        background-image: url('/images/icons/instagram.png');
    }

    .social-icon.website {
        background-image: url('/images/icons/internet.png');
    }



/*Text formatting*/
.splash-header {
    font-weight: bold;
    font-size: 2.5rem;
    font-family: 'Luckiest Guy';
    color: #CC5500; /* Burnt orange */
    text-shadow: 2px 2px 0 #59260B; /* Seal brown */
}

.banner {
    font-size: 1.25rem;
    font-weight: 300;
    font-family: 'BBH Bogle';
}

.announce {
    font-size: 1.25rem;
    font-weight: 300;
    font-family: 'Permanent Marker';
}

.dogbowl {
    font-size: 1.5rem;
    font-weight: 300;
    font-family: 'BBH Bogle';
    text-align: center;
}

.dogbowl-alt {
    font-size: 1.25rem;
    font-weight: 300;
    font-family: 'BBH Bogle';
    text-align: center;
    margin-bottom: 1.5rem !important;
}

.page_title {
    font-size: 1.25rem;
    font-weight: 300;
    font-family: 'Sekuya';
}

.success-header {
    font-weight: bold;
    font-size: 2.5rem;
    font-family: 'Keania One';
    /* Browns seal brown */
    color: #59260B;
    /* Soft white drop shadow */
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
}

.bio-name {
    font-weight: bold; /* Make the text bold */
    color: dimgray; /* Change the color to blue (you can adjust to the color you prefer) */
    font-size: 36px;
    font-family: 'Sekuya';
    /* Add other styles if needed */
}

.bio-answer {
    font-weight: bold;
    font-size: 36px;
    font-family: 'BBH Bogle';
    /* Browns seal brown */
    color: #311D00;
    /* White drop shadow for contrast */
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
}

.profile-name {
    /*font-weight: bold;*/
    font-size: 2rem;
    font-family: 'Sekuya';
    color: #000000;
    /* Browns burnt orange 000000*/
    /*color: #FF3C00;*/
    /* Soft white drop shadow */
    /*text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);*/
}

.profile-header {
    /*font-weight: bold;*/
    font-size: 1rem;
    font-family: 'Sekuya';
    color: #000000;
    /* Browns burnt orange 000000*/
    /*color: #FF3C00;*/
    /* Soft white drop shadow */
    /*text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);*/
}


.profile-body {
    font-weight: bold; /* Make the text bold */
    color: #000000;
    font-size: 36px;
    font-family: 'Yellowtail';
    /* Add other styles if needed */
}

.profile-cat {
    font-size: 2rem;
    font-family: 'Lobster Two';
    color: #FF3C00;
    /*color: #000000;*/
    /*color: #311D00;*/
    /* Soft white drop shadow */
    text-shadow: 1px 1px 0 #311D00;    
    text-align:justify-all;
    /*text-align: center;*/
}

.profile-answer {
    font-size: 2rem;
    font-family: 'Allkin';
    /*color: #FF3C00;*/
    color: #000000;
    /* Soft white drop shadow */
    text-shadow: 1px 1px 0 #CC5500;
    text-align: justify-all;
}

.receipt-slate-title {
    font-weight: bold;
    font-size: 2.5rem;
    font-family: 'Source Serif 4';
    color: #FFFFFF; /* Burnt orange */
    text-shadow: 1px 1px 0 #000000;
    /*text-shadow: 1px 1px 0 #CC5500;*/ /* Burnt orange */
    /*text-shadow: 2px 2px 0 #59260B;*/ /* Seal brown */
}

.receipt-slate-claim {
    font-size: 1.5rem;
    font-family: 'Source Serif 4';
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #000000;
    /*text-shadow: 2px 2px 0 #CC5500;*/ /* Burnt orange */
}

.cookout-banner-text1 {
    font-size: 2.5rem;
    font-family: 'Reenie Beanie';
    color: #FF3C00;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
    text-align: center;
}

.cookout-banner-text2 {
    font-size: 2.5rem;
    font-family: 'Eater';
    color: #FF3C00;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
    text-align: center;
}


.cookout-splash-text {
    font-size: 1.5rem;
    font-family: 'Playwrite GB J Guides';
    font-style: italic;    
    color: #000000;
}

.cookout-card-text {
    font-size: 1.5rem;
    font-family: 'Playwrite GB J Guides';
    font-style: italic;
    color: #000000;
    padding-left: 1.5rem;
}


.test1 {
    font-size: 2.5rem;
    font-family: 'Cinzel';
    /* Browns burnt orange */
    color: #FF3C00;
    /* Soft white drop shadow */
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
}

.test2 {
    font-size: 2.5rem;
    font-family: 'Cinzel';
    /* Browns seal brown */
    color: #59260B;
    /* Soft white drop shadow */
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
}