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