/* =====================================
   FONTS
===================================== */

@font-face {
    font-family: "Old Western";
    src: url("/assets/fonts/OldWestern_new.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("/assets/fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}


/* =====================================
   ROOT VARIABLES
===================================== */

:root {

    /* Typography */
    --font-heading: "Old Western", serif;
    --font-body: "Libre Franklin", sans-serif;


    /* Colors */
    --text-dark: #1F1F1F;
    --text-light: #C2A14D;
    --link-color: #4B3C34;
    --grc-green: #2f5e4e;


    /* Glass */
    --glass-background: rgba(255,255,255,.35);
    --glass-border: rgba(255,255,255,.25);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 25px rgba(0,0,0,.12);


    /* Layout */
    --panel-width: min(90%, 1000px);
    --radius: 4px;
    --transition: all .2s ease;

}


/* =====================================
   RESET / GLOBAL
===================================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: var(--font-body);
    color: var(--text-dark);

    background-color: #D8D0C5;
    background-image: url("/assets/rr_wanted.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-heading);
    color: var(--text-dark);

}


p {

    line-height: 1.6;

}


a {

    color: var(--link-color);
    text-decoration: none;
    transition: var(--transition);

}


a:hover {

    color: var(--text-light);

}


img {

    max-width: 100%;
    display: block;

}


/* =====================================
   LAYOUT
===================================== */

section {

    padding: 1rem 0;

}


main {

    min-height: 100vh;

}


/* =====================================
   GLASS COMPONENT
===================================== */

.glass,
.glass-panel {

    background: var(--glass-background);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    box-shadow: var(--glass-shadow);

}


/* Shared panel sizing */

.content-box,
.glass-panel {

    width: var(--panel-width);
    margin: 0 auto;

    padding: 2rem;

}


/* =====================================
   HEADER / NAVIGATION
===================================== */


/* Landing page header */

.landing-header,
.site-header {

    display: flex;
    justify-content: center;

    width: 100%;
    padding: 1rem 0;

}



/* Landing header */

.landing-page .glass-panel {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: clamp(1rem,3vw,1.5rem);

}



/* Internal pages */

/* =========================
   INTERNAL PAGE HEADER
========================= */

.site-header {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
}


.site-header .glass-panel {

    width: min(90%, 1000px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 2rem;

    background: var(--glass-background);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    box-shadow: var(--glass-shadow);

}


/* SMALL LOGO LEFT */

.nav-logo img {

    width: clamp(70px, 8vw, 110px);

    height: auto;

}



/* NAV LINKS RIGHT */

.site-header .nav-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: clamp(1rem, 3vw, 2rem);

    list-style: none;

    margin: 0;

    padding: 0;

}


.site-header .nav-links a {

    font-size: clamp(.85rem, 2vw, 1rem);

    font-family: var(--font-body);

}



/* Logos */

.hero-logo img {

    width: clamp(180px,28vw,350px);

}


.nav-logo img {

    width: clamp(80px,10vw,130px);

}



/* Navigation links */

.nav-links {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: clamp(.75rem,3vw,2rem);

    list-style:none;

    padding:0;
    margin:0;

}


.nav-links a {

    font-size: clamp(.85rem,2vw,1.1rem);

}



/* =====================================
   IMAGES
===================================== */

.rr-about-cover {

    width:100%;

}


/* =====================================
   BOARD CAROUSEL
===================================== */


.board-carousel {

    display:flex;

    gap:1.5rem;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding:1rem 0;

}


.board-photo {

    flex:0 0 auto;

    width:160px;

    border-radius:var(--radius);

    scroll-snap-align:center;

}



/* =====================================
   EVENT CAROUSEL
===================================== */


.event-carousel {

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:var(--radius);

}


.carousel-image {

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity .8s ease;

}


.carousel-image.active {

    opacity:1;

}



/* =====================================
   BUTTONS
===================================== */


.gold-button,
.membership-waiver,
.score-download {

    display:inline-block;

    background:var(--text-light);

    color:var(--text-dark);

    padding:.75rem 1.5rem;

    border:none;

    border-radius:var(--radius);

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}


.gold-button:hover,
.membership-waiver:hover,
.score-download:hover {

    background:#4B3C34;

    color:white;

}



/* =====================================
   CONTACT FORM
===================================== */


.contact-form {

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}


.form-group {

    display:flex;

    flex-direction:column;

    gap:.5rem;

}


.form-group input,
.form-group textarea {

    width:100%;

    padding:.85rem 1rem;

    font-family:var(--font-body);

    background:rgba(255,255,255,.45);

    border:1px solid rgba(255,255,255,.35);

    border-radius:var(--radius);

}


.form-group textarea {

    resize:vertical;

    min-height:180px;

}



/* =====================================
   SCORES TABLE
===================================== */


.table-container {

    width:var(--panel-width);

    margin:auto;

}


.table-scroll {

    overflow-x:auto;

}


table {

    width:max-content;

    min-width:100%;

    border-collapse:collapse;

}


th,
td {

    padding:.75rem;

    border:1px solid rgba(31,31,31,.2);

    white-space:nowrap;

}


th {

    font-family:var(--font-heading);

}



/* =====================================
   FOOTER
===================================== */


footer {

    display:flex;

    justify-content:center;

    padding:2rem 0;

}


footer .content-box {

    text-align:center;

}


footer .nav-links {

    justify-content:center;

}



.grc-link {

    color:var(--grc-green);

    font-weight:600;

}


.grc-link:hover {

    color:var(--text-light);

}



/* =====================================
   MOBILE
===================================== */


@media(max-width:700px) {


    .site-header .glass-panel {

        flex-direction:column;

        gap:1rem;

    }


    .nav-links {

        flex-direction:column;

    }


    .content-box,
    .glass-panel {

        width:90%;

    }

}


/* Sticky first column */
table th:first-child,
table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgb(137, 120, 112);
}

/* Sticky second column */
table th:nth-child(2),
table td:nth-child(2) {
    position: sticky;
    left: 50px;
    z-index: 3;
    background: rgb(137, 120, 112);
}

.table-scroll {
    overflow-x: auto;
}

table th:first-child,
table td:first-child {
    width: 50px;
    min-width: 50px;
}

table th:nth-child(2),
table td:nth-child(2) {
    width: 200px;
    min-width: 200px;
}

/* =======================================
   DOCUMENT SECTION
======================================= */

.document-section{
    width:min(1200px,90%);
    margin:70px auto;
    text-align:center;
}

.document-section h2{
    margin-bottom:30px;
}


/* =======================================
   CAROUSEL
======================================= */

.document-carousel{
    display:flex;
    align-items:center;
    gap:15px;
}

.carousel-track{
    display:flex;
    gap:25px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:10px;
    flex:1;

    scrollbar-width:none;
}

.carousel-track::-webkit-scrollbar{
    display:none;
}


/* =======================================
   DOCUMENT CARD
======================================= */

.document-card{

    min-width:300px;

    background:rgba(255,255,255,.15);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:16px;

    padding:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    transition:.3s;
}

.document-card:hover{
    transform:translateY(-6px);
}

.document-card img{

    width:100%;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;

}

.document-card img:hover{
    transform:scale(1.03);
}

.document-card h3{
    margin:18px 0;
}


/* =======================================
   BUTTON
======================================= */

.doc-button{

    display:inline-block;

    padding:12px 24px;

    background:#b58c38;
    color:white;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.doc-button:hover{

    background:#9d782d;

}


/* =======================================
   CAROUSEL BUTTONS
======================================= */

.carousel-button{

    background:none;

    border:none;

    color:white;

    font-size:2.4rem;

    cursor:pointer;

}


/* =======================================
   MODAL
======================================= */

.image-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.image-modal img{

    max-width:90%;

    max-height:90%;

    border-radius:15px;

}

.close-modal{

    position:absolute;

    right:35px;

    top:20px;

    color:white;

    font-size:45px;

    cursor:pointer;

}

.board-carousel video {

    width: 300px;
    height: 220px;

    object-fit: cover;

    border-radius: 10px;

    flex-shrink: 0;

}