/* ==========================================================
   Workman Adventure Compound
   Version 1.0
   Part 1 of 4
   Base, Hero and Navigation
   ========================================================== */

:root {
    --forest: #173d24;
    --forest-deep: #0f2918;
    --forest-soft: #2d5a39;
    --gold: #d4aa22;
    --gold-light: #f0cf62;
    --cream: #f6f1e5;
    --white: #ffffff;
    --ink: #162018;
    --muted: #6a756d;
    --border: rgba(23, 61, 36, 0.12);

    --shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    --shadow-soft: 0 10px 28px rgba(23, 61, 36, 0.12);

    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 26px;

    --max-width: 1280px;
    --transition: 0.22s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(var(--max-width), 92%);
    margin: 0 auto;
}

/* ==========================================================
   HERO
   ========================================================== */

.hero {
    min-height: 100vh;
    color: var(--white);

    background:
        linear-gradient(
            180deg,
            rgba(5, 15, 9, 0.55),
            rgba(8, 24, 14, 0.22) 44%,
            rgba(8, 24, 14, 0.72)
        ),
        url("../assets/images/wac-hero-logo.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-overlay {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

.navbar {
    position: relative;

    margin-top: 22px;
    padding: 14px 18px;

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

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;

    background: rgba(10, 30, 18, 0.46);
    backdrop-filter: blur(14px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.brand {
    display: flex;
    align-items: center;
}

.logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    position: relative;

    padding: 8px 0;

    color: var(--white);
    font-size: 17px;
    font-weight: 800;

    transition: var(--transition);
}

.nav-links a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    border-radius: 999px;
    background: var(--gold-light);

    transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gold-light);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;

    border: 0;
    background: transparent;

    color: var(--white);
    font-size: 30px;
}

/* ==========================================================
   HERO CONTENT
   ========================================================== */

.hero-content {
    flex: 1;

    max-width: 900px;
    margin: 0 auto;
    padding: 70px 0 54px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.hero-kicker {
    margin-bottom: 16px;

    color: var(--gold-light);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero-content h1 {
    font-size: clamp(58px, 8vw, 106px);
    line-height: 0.95;
    letter-spacing: 8px;

    text-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.hero-content h2 {
    margin-top: 20px;

    font-size: clamp(30px, 4vw, 48px);
    font-weight: 500;
}

.tagline {
    margin-top: 22px;

    color: #f6f5f0;

    font-size: clamp(20px, 2.3vw, 29px);
}

.button {
    min-width: 300px;
    margin-top: 38px;
    padding: 18px 30px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    color: var(--forest-deep);

    font-size: 22px;
    font-weight: 900;

    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);

    transition: var(--transition);
}

.button:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.scroll-indicator {
    margin-top: 24px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==========================================================
   MAIN PAGE FOUNDATION
   ========================================================== */

main {
    min-height: 400px;

    background:
        radial-gradient(
            circle at top right,
            rgba(212, 170, 34, 0.08),
            transparent 30%
        ),
        var(--cream);
}

.page-section {
    padding: 68px 0;
}

.page-section + .page-section {
    padding-top: 0;
}

.page-header {
    margin-bottom: 28px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.eyebrow {
    color: var(--gold);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title {
    margin-top: 6px;

    color: var(--forest-deep);

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.05;
}

.section-subtitle {
    max-width: 760px;
    margin-top: 12px;

    color: var(--muted);

    font-size: 18px;
}

.chip {
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border-radius: 999px;

    background: var(--forest);
    color: var(--white);

    font-size: 14px;
    font-weight: 800;
}
/* ==========================================================
   DASHBOARD
   ========================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(12,minmax(0,1fr));

    gap:22px;

}

.panel{

    background:#fff;

    border-radius:28px;

    padding:34px;

    margin-bottom:34px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.panel:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.panel-large{

    grid-column:span 7;

}

.panel-medium{

    grid-column:span 5;

}

.panel-third{

    grid-column:span 4;

}

.panel-wide{

    grid-column:1 / -1;

}

.panel-label{

    margin-bottom:14px;

    color:var(--gold);

    font-size:13px;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.panel h3{

    color:var(--forest-deep);

    font-size:28px;

    line-height:1.2;

}

.panel p{

    margin-top:10px;

    color:var(--muted);

    font-size:17px;

}

.badge{

    display:inline-flex;

    margin-bottom:14px;

    padding:7px 14px;

    border-radius:999px;

    background:var(--forest);

    color:var(--white);

    font-size:13px;

    font-weight:900;

    letter-spacing:1px;

}

.metric{

    margin:8px 0;

    color:var(--forest-deep);

    font-size:58px;

    font-weight:900;

    line-height:1;

}

.small-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:22px;

    padding:13px 20px;

    border-radius:14px;

    background:var(--forest);

    color:var(--white);

    font-weight:800;

    transition:var(--transition);

}

.small-button:hover{

    background:var(--forest-soft);

    transform:translateY(-2px);

}

.quick-links{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;

    margin-top:20px;

}

.quick-link{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:140px;

    padding:22px;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        var(--forest),
        var(--forest-deep)
    );

    color:var(--white);

    transition:var(--transition);

}

.quick-link:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.quick-link span{

    font-size:36px;

}

.quick-link strong{

    font-size:18px;

    font-weight:800;

}

.quick-link small{

    margin-top:6px;

    opacity:.85;

    font-size:14px;

}

/* ==========================================================
   STATUS PANELS
   ========================================================== */

.status-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;

}

.status-card{

    padding:26px;

    border-radius:22px;

    background:var(--white);

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

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

}

.status-card h4{

    color:var(--forest-deep);

    margin-bottom:10px;

    font-size:20px;

}

.status-card p{

    color:var(--muted);

}

.progress-bar{

    width:100%;

    height:12px;

    margin-top:18px;

    border-radius:999px;

    background:#e8e8e8;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    width:35%;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );

}

/* ==========================================================
   PAGE ANIMATION
   ========================================================== */

.page-enter{

    animation:pageFade .22s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   CARDS
   ========================================================== */

.card-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:22px;

}

.card{

    min-height:220px;

    padding:26px;

    border-radius:var(--radius-large);

    background:var(--white);

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

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

    display:flex;

    flex-direction:column;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

    border-color:rgba(212,170,34,.45);

}

.dark-card{

    background:linear-gradient(
        145deg,
        var(--forest),
        var(--forest-deep)
    );

    color:var(--white);

}

.card-icon{

    font-size:44px;

    margin-bottom:36px;

}

.card h3{

    margin-top:auto;

    font-size:24px;

}

.card p{

    margin-top:8px;

    opacity:.9;

}

/* ==========================================================
   TOOLBAR
   ========================================================== */

.toolbar{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:18px;

    margin-bottom:28px;

}

.search-input,
.filter-select{

    width:100%;

    padding:15px 16px;

    border:1px solid rgba(23,61,36,.18);

    border-radius:14px;

    background:var(--white);

    color:var(--ink);

    outline:none;

}

.search-input:focus,
.filter-select:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(212,170,34,.14);

}

/* ==========================================================
   LISTS
   ========================================================== */

.list{

    display:grid;

    gap:18px;

}

.list-item{

    padding:24px;

    border-radius:22px;

    background:var(--white);

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

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

}

.list-item h3{

    color:var(--forest-deep);

    margin-bottom:8px;

}

.list-item p{

    color:var(--muted);

}

/* ==========================================================
   EMPTY STATE
   ========================================================== */

.empty-state{

    padding:50px;

    border-radius:26px;

    background:var(--white);

    border:2px dashed rgba(23,61,36,.18);

    text-align:center;

}

.empty-state h3{

    color:var(--forest-deep);

    font-size:34px;

}

.empty-state p{

    margin-top:10px;

    color:var(--muted);

}

/* ==========================================================
   TABLES
   ========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

    background:var(--white);

    border-radius:22px;

    overflow:hidden;

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

}

.table th{

    padding:18px;

    background:var(--forest);

    color:var(--white);

    text-align:left;

}

.table td{

    padding:18px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

/* ==========================================================
   FORMS
   ========================================================== */

.form-group{

    margin-bottom:22px;

}

.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:700;

    color:var(--forest-deep);

}

.text-input,
.text-area{

    width:100%;

    padding:14px;

    border-radius:14px;

    border:1px solid rgba(23,61,36,.18);

    background:var(--white);

}

.text-area{

    resize:vertical;

    min-height:140px;

}

.primary-button{

    padding:15px 28px;

    border:none;

    border-radius:14px;

    background:var(--forest);

    color:var(--white);

    font-weight:800;

    cursor:pointer;

    transition:var(--transition);

}

.primary-button:hover{

    background:var(--forest-soft);

}
/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1100px){

    .panel-large{
        grid-column:span 12;
    }

    .panel-medium{
        grid-column:span 12;
    }

    .panel-third{
        grid-column:span 6;
    }

    .card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .quick-links{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:850px){

    .navbar{

        flex-wrap:wrap;

        align-items:flex-start;

    }

    .menu-toggle{

        display:block;

        margin-left:auto;

    }

    .nav-links{

        display:none;

        width:100%;

        margin-top:18px;

        flex-direction:column;

        gap:10px;

    }

    .nav-links.open{

        display:flex;

    }

    .nav-links a{

        width:100%;

        padding:14px;

        border-radius:12px;

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

    }

    .hero-content h1{

        letter-spacing:4px;

    }

    .button{

        width:100%;

        max-width:340px;

        min-width:0;

    }

    .page-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .toolbar{

        grid-template-columns:1fr;

    }

}

@media (max-width:700px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .panel-large,
    .panel-medium,
    .panel-third,
    .panel-wide{

        grid-column:auto;

    }

    .card-grid{

        grid-template-columns:1fr;

    }

    .quick-links{

        grid-template-columns:1fr;

    }

    .status-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:500px){

    .container{

        width:94%;

    }

    .hero-content{

        padding:50px 0;

    }

    .hero-content h1{

        font-size:56px;

    }

    .hero-content h2{

        font-size:30px;

    }

    .tagline{

        font-size:20px;

    }

    .panel,
    .card{

        padding:20px;

    }

    .table{

        display:block;

        overflow-x:auto;

    }

}

/* ==========================================================
   UTILITIES
   ========================================================== */

.text-center{
    text-align:center;
}

.mt-1{
    margin-top:10px;
}

.mt-2{
    margin-top:20px;
}

.mt-3{
    margin-top:30px;
}

.mb-1{
    margin-bottom:10px;
}

.mb-2{
    margin-bottom:20px;
}

.mb-3{
    margin-bottom:30px;
}

.hidden{
    display:none;
}
/*======================================
Adventure Toolbar
======================================*/

.toolbar{

display:flex;

gap:18px;

margin-bottom:28px;

flex-wrap:wrap;

}

.search-input{

flex:1;

min-width:280px;

padding:16px;

border-radius:12px;

border:none;

font-size:17px;

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

}

.filter-select{

padding:16px;

border:none;

border-radius:12px;

font-size:17px;

min-width:250px;

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

}

.hidden{

display:none;

}
/*======================================
DRAWER COMPONENT
======================================*/

.drawer-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(3px);

    display:flex;

    justify-content:flex-end;

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:5000;

}

.drawer-overlay.open{

    opacity:1;

    visibility:visible;

}

.drawer{

    width:min(760px,100%);

    height:100%;

    background:#ffffff;

    overflow-y:auto;

    padding:42px;

    box-shadow:-18px 0 45px rgba(0,0,0,.28);

    transform:translateX(100%);

    transition:.35s ease;

    color:#222;

}

.drawer-overlay.open .drawer{

    transform:translateX(0);

}

.drawer-close{

    position:absolute;

    top:22px;

    right:24px;

    background:none;

    border:none;

    font-size:32px;

    cursor:pointer;

    color:#777;

    transition:.2s;

}

.drawer-close:hover{

    color:#000;

    transform:rotate(90deg);

}

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

.drawer-header{

    display:flex;

    align-items:center;

    gap:32px;

    margin-bottom:34px;

    padding-bottom:28px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.drawer-badge{

    width:180px;

    height:180px;

    flex-shrink:0;

    object-fit:contain;

    filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));

}

.drawer-header-info{

    flex:1;

}

.drawer-category{

    display:inline-block;

    margin-bottom:10px;

    color:var(--gold-dark);

    font-size:.90rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}

#drawerTitle{

    margin:0 0 18px;

    font-size:2.3rem;

    line-height:1.15;

    color:var(--forest);

}

.drawer-chip-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:18px;

}

.drawer-summary{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.summary-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border-radius:14px;

    background:#f7f6f2;

    border:1px solid rgba(0,0,0,.06);

    font-size:.95rem;

    font-weight:600;

}

.summary-item span{

    color:var(--forest);

}

/*==============================
ADVENTURE PHOTOS
==============================*/

.drawer-photos{

    margin:28px 0 34px;

}

.drawer-hero-button{

    display:block;

    width:100%;

    padding:0;

    border:none;

    border-radius:22px;

    background:#e9ebe6;

    overflow:hidden;

    cursor:pointer;

    box-shadow:0 14px 32px rgba(0,0,0,.16);

}

.drawer-hero-image{

    display:block;

    width:100%;

    height:360px;

    object-fit:contain;

    background:#111;

    transition:transform .35s ease;

}

.drawer-hero-button:hover .drawer-hero-image{

    transform:scale(1.025);

}

.drawer-gallery-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:24px;

    margin-bottom:14px;

}

.drawer-gallery-header h3{

    margin:0;

    color:var(--forest);

    font-size:1.2rem;

}

.drawer-photo-count{

    color:#6b6b63;

    font-size:.9rem;

    font-weight:700;

}

.drawer-gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

}

.drawer-gallery-item{

    position:relative;

    padding:0;

    aspect-ratio:4 / 3;

    border:2px solid transparent;

    border-radius:14px;

    background:#e9ebe6;

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}

.drawer-gallery-item:hover{

    transform:translateY(-2px);

    border-color:var(--gold);

    box-shadow:0 8px 18px rgba(0,0,0,.14);

}

.drawer-gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

.drawer-photos[hidden],
.drawer-gallery[hidden],
.drawer-gallery-header[hidden]{

    display:none;

}

@media (max-width:700px){

    .drawer-hero-image{

        height:280px;

    }

    .drawer-gallery{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:480px){

    .drawer-hero-image{

        height:220px;

    }

    .drawer-gallery{

        gap:9px;

    }

}

/*==============================
CONTENT
==============================*/

.drawer-section{

    margin-top:30px;

}

.drawer-section h3{

    margin-bottom:10px;

    color:var(--forest);

    font-size:1.25rem;

}

.drawer-section p{

    line-height:1.75;

    color:#444;

}

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

.drawer-footer{

    margin-top:45px;

    display:flex;

    justify-content:center;

}

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

@media(max-width:768px){

    .drawer{

        padding:28px;

    }

    .drawer-header{

        flex-direction:column;

        text-align:center;

    }

    .drawer-badge{

        width:150px;

        height:150px;

    }

    .drawer-summary{

        grid-template-columns:1fr;

    }

}
/* ======================================
   Adventure Record
====================================== */
/* =====================================================
   ADVENTURE RECORD
===================================================== */

.profile-cover{

    display:grid;
    grid-template-columns:220px 1fr 160px;
    gap:40px;

    align-items:center;

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    margin-bottom:40px;

}

.profile-photo{

    width:220px;
    height:220px;

    border-radius:24px;

    overflow:hidden;

    background:#ece8dc;

    border:6px solid #d8af33;

}

.profile-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.profile-header h1{

    margin:0;

    font-size:3.2rem;

    color:#173321;

}

.profile-subtitle{

    margin-top:10px;

    font-size:1.15rem;

    color:#666;

}

.profile-subtitle .dot{

    margin:0 12px;

}

.profile-quote{

    margin-top:24px;

    font-size:1.35rem;

    color:#173321;

    font-style:italic;

    line-height:1.6;

}

.profile-level{

    display:flex;

    justify-content:center;

}

.level-circle{

    width:150px;
    height:150px;

    border-radius:50%;

    background:#173321;

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border:8px solid #d8af33;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.level-number{

    font-size:3rem;

    font-weight:700;

    line-height:1;

}

.level-text{

    margin-top:10px;

    font-size:.85rem;

    letter-spacing:2px;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.stats-grid-two{

    grid-template-columns:repeat(2,1fr);

}

.stat-card{

    background:white;

    border-radius:22px;

    padding:30px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.stat-number{

    font-size:3rem;

    font-weight:700;

    color:#173321;

}

.stat-label{

    margin-top:10px;

    color:#777;

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.9rem;

}

.activity-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.activity-item{

    display:flex;

    align-items:center;

    gap:18px;

}

.activity-icon{

    width:54px;
    height:54px;

    border-radius:50%;

    background:#173321;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

}

.badge-placeholder{

    width:90px;
    height:90px;

    border-radius:18px;

    background:#f4f1e7;

    border:2px dashed #d8af33;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

}

@media(max-width:900px){

    .profile-cover{

        grid-template-columns:1fr;

        text-align:center;

    }

    .profile-photo{

        margin:auto;

    }

}/* ======================================
   Featured Badges
====================================== */

.badge-grid{

    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
    align-items:flex-start;

}

.badge-card{

    width:180px;
    min-height:240px;

    background:#232323;

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

    border-radius:18px;

    padding:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    text-align:center;

    transition:all .25s ease;

}

.badge-card:hover{

    transform:translateY(-3px);

    border-color:#c8a64b;

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

}

.badge-image{

    width:80px;

    height:80px;

    object-fit:contain;

}

.badge-title{

    font-weight:700;

    color:#ffffff;

    line-height:1.3;

}

.badge-id{

    font-size:.85rem;

    color:#b8b8b8;

    letter-spacing:1px;

}
.badge-card:hover{

    transform:translateY(-3px);

}

.badge-image{

    width:72px;

    height:72px;

    object-fit:contain;

    margin-bottom:12px;

}

.badge-title{

    color:white;

    font-weight:600;

    font-size:.95rem;

    margin-bottom:6px;

}

.badge-id{

    color:#999;

    font-size:.8rem;

}
/* ======================================
   Category Progress
====================================== */

.category-progress-row{

    display:grid;

    grid-template-columns:
        320px 1fr 50px;

    gap:20px;

    align-items:center;

    margin-bottom:18px;

}

.category-name{

    font-weight:600;

}

.category-bar{

    height:14px;

    background:#e7e7e7;

    border-radius:20px;

    overflow:hidden;

}

.category-fill{

    height:100%;

    background:#d8ab2c;

    border-radius:20px;

}

.category-count{

    text-align:right;

    font-weight:700;

}/* ======================================
   Achievement Trophy Case
====================================== */

.achievement-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.achievement-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px;

    border-radius:14px;

    background:#1f1f1f;

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

    transition:.2s;

    max-width:550px;
    
margin:auto;

}

.achievement-item:hover{

    transform:translateX(4px);

}

.achievement-icon{

    font-size:42px;

    width:60px;

    text-align:center;

}

.achievement-details{

    flex:1;

}

.achievement-title{

    font-size:1.1rem;

    font-weight:700;

    color:#fff;

    margin-bottom:6px;

}

.achievement-description{

    color:#bbb;

    line-height:1.4;

}.button-disabled{

    opacity:.6;

    cursor:default;

    pointer-events:none;

}
/*======================================
DRAWER LISTS
======================================*/

.drawer-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:12px;

}

.list-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    background:#f8f8f5;

    border:1px solid rgba(0,0,0,.06);

    border-radius:14px;

    transition:.2s;

}

.list-item:hover{

    background:#f2f6ef;

    border-color:rgba(26,94,32,.18);

}

.list-icon{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--forest);

    color:white;

    font-size:15px;

    flex-shrink:0;

}
/*======================================
DRAWER CALLOUTS
======================================*/

.mission-card{

    border-left:6px solid #2e7d32;

    background:#eef8ef;

    padding:18px 22px;

    border-radius:14px;

}

.why-card{

    border-left:6px solid #c89b1d;

    background:#fff9ea;

    padding:18px 22px;

    border-radius:14px;

}

.note-card{

    border-left:6px solid #1976d2;

    background:#eef6ff;

    padding:18px 22px;

    border-radius:14px;

}
/*======================================
DRAWER ADVENTURE CHECKLIST
======================================*/

.checklist-card{

    border-left:6px solid var(--gold);

    background:linear-gradient(
        145deg,
        #fffdf4,
        #f8f3df
    );

    padding:22px;

    border-radius:16px;

    box-shadow:0 10px 26px rgba(23,61,36,.08);

}

.checklist-card[hidden]{

    display:none;

}

.checklist-card h3{

    margin-bottom:6px;

}

.checklist-card > p{

    margin-bottom:18px;

    color:#666;

    font-size:.96rem;

}

/*--------------------------------------
Checklist Header
--------------------------------------*/

.checklist-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:8px;

}

.checklist-header h3{

    margin:0;

}

#drawerChecklistCount{

    flex-shrink:0;

    padding:6px 11px;

    border-radius:999px;

    background:var(--forest);

    color:#fff;

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.3px;

}

/*--------------------------------------
Checklist Progress Bar
--------------------------------------*/

.checklist-progress{

    width:100%;

    height:11px;

    margin:16px 0 20px;

    border-radius:999px;

    background:#dedfd9;

    overflow:hidden;

    box-shadow:inset 0 1px 3px rgba(0,0,0,.12);

}

#drawerChecklistProgress{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );

    transition:width .3s ease;

}

/*--------------------------------------
Checklist Items
--------------------------------------*/

#drawerChecklist{

    display:flex;

    flex-direction:column;

    gap:11px;

}

.drawer-checklist-item{

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:14px 15px;

    border:1px solid rgba(23,61,36,.10);

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}

.drawer-checklist-item:hover{

    transform:translateY(-1px);

    border-color:rgba(212,170,34,.55);

    box-shadow:0 7px 16px rgba(23,61,36,.09);

}

.drawer-checklist-checkbox{

    position:absolute;

    width:1px;

    height:1px;

    opacity:0;

    pointer-events:none;

}

/*--------------------------------------
Custom Checkbox
--------------------------------------*/

.drawer-checklist-control{

    width:24px;

    height:24px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:1px;

    border:2px solid #a9afa8;

    border-radius:7px;

    background:#fff;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.drawer-checklist-checkbox:focus-visible
+ .drawer-checklist-control{

    outline:3px solid rgba(212,170,34,.35);

    outline-offset:3px;

}

.drawer-checklist-checkbox:checked
+ .drawer-checklist-control{

    border-color:var(--forest);

    background:var(--forest);

}

.drawer-checklist-checkbox:checked
+ .drawer-checklist-control::after{

    content:"✓";

    color:#fff;

    font-size:16px;

    font-weight:900;

    line-height:1;

}

/*--------------------------------------
Checklist Text
--------------------------------------*/

.drawer-checklist-content{

    min-width:0;

    display:flex;

    align-items:flex-start;

    gap:11px;

    flex:1;

}

.drawer-checklist-number{

    min-width:26px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:#f0ead2;

    color:var(--forest-deep);

    font-size:.78rem;

    font-weight:900;

}

.drawer-checklist-label{

    padding-top:1px;

    color:#303630;

    line-height:1.5;

    font-weight:600;

}

/*--------------------------------------
Completed Checklist Item
--------------------------------------*/

.drawer-checklist-item.completed{

    border-color:rgba(23,61,36,.20);

    background:#edf6ee;

}

.drawer-checklist-item.completed
.drawer-checklist-number{

    background:var(--forest);

    color:#fff;

}

.drawer-checklist-item.completed
.drawer-checklist-label{

    color:#667067;

    text-decoration:line-through;

}

/*--------------------------------------
Checklist Mobile
--------------------------------------*/

@media(max-width:480px){

    .checklist-card{

        padding:18px;

    }

    .checklist-header{

        align-items:flex-start;

    }

    .drawer-checklist-item{

        gap:10px;

        padding:13px;

    }

    .drawer-checklist-content{

        gap:9px;

    }

}
/*======================================
DASHBOARD CABIN WEATHER
======================================*/

.weather-panel{

    display:flex;

    flex-direction:column;

}

.weather-location{

    margin-bottom:2px;

}

.weather-updated{

    margin-top:0 !important;

    margin-bottom:18px;

    color:var(--muted);

    font-size:.9rem !important;

}

.weather-forecast{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:10px;

    margin-top:auto;

}

.weather-day{

    min-width:0;

    padding:14px 8px;

    border:1px solid rgba(23,61,36,.10);

    border-radius:16px;

    background:#f7f8f3;

    text-align:center;

}

.weather-day-name{

    color:var(--forest);

    font-size:.82rem;

    font-weight:900;

    text-transform:uppercase;

}

.weather-icon{

    margin:7px 0 5px;

    font-size:2rem;

    line-height:1;

}

.weather-temperatures{

    display:flex;

    justify-content:center;

    align-items:baseline;

    gap:6px;

    color:var(--forest-deep);

}

.weather-temperatures strong{

    font-size:1.25rem;

}

.weather-temperatures span{

    color:var(--muted);

    font-size:.9rem;

}

.weather-condition{

    min-height:34px;

    margin-top:5px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#555;

    font-size:.75rem;

    font-weight:700;

    line-height:1.2;

}

.weather-precipitation{

    margin-top:6px;

    color:#35719b;

    font-size:.76rem;

    font-weight:800;

}

.weather-loading,
.weather-error{

    grid-column:1 / -1;

    padding:20px;

    border-radius:14px;

    background:#f7f8f3;

    color:var(--muted);

    text-align:center;

}

@media(max-width:500px){

    .weather-forecast{

        gap:7px;

    }

    .weather-day{

        padding:12px 5px;

    }

    .weather-day-name{

        font-size:.72rem;

    }

    .weather-icon{

        font-size:1.7rem;

    }

    .weather-temperatures strong{

        font-size:1.1rem;

    }

}
/*======================================
DASHBOARD LATEST NEWS
======================================*/

.home-news-meta{

    margin-top:14px !important;

    color:var(--muted);

    font-size:.85rem !important;

    font-weight:700;

}
/*======================================
WAC EVENTS PAGE
======================================*/

.events-page{

    padding-bottom:28px;

}

/*--------------------------------------
Header Action
--------------------------------------*/

.events-scroll-link{

    transition:
        transform .2s ease,
        background .2s ease;

}

.events-scroll-link:hover{

    transform:translateY(-2px);

    background:var(--forest-soft);

}

/*--------------------------------------
Featured Event
--------------------------------------*/

.events-featured-section{

    margin-top:12px;

}

.featured-event-card{

    display:grid;

    grid-template-columns:170px 1fr;

    gap:34px;

    align-items:stretch;

    padding:34px;

    border-radius:28px;

    background:linear-gradient(
        145deg,
        var(--forest),
        var(--forest-deep)
    );

    color:#fff;

    box-shadow:var(--shadow);

}

.featured-event-date-block{

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-radius:22px;

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

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

    text-align:center;

}

.featured-event-date-block
.event-date-month{

    color:var(--gold-light);

}

.featured-event-date-block
.event-date-day{

    color:#fff;

}

.featured-event-date-block
.event-date-year{

    color:rgba(255,255,255,.76);

}

.featured-event-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

}

.featured-event-category{

    margin-bottom:10px;

    color:var(--gold-light);

    font-size:.82rem;

    font-weight:900;

    letter-spacing:1.6px;

    text-transform:uppercase;

}

.featured-event-content h2{

    color:#fff;

    font-size:clamp(32px,4vw,52px);

    line-height:1.05;

}

.featured-event-date,
.featured-event-location{

    margin-top:12px;

    color:rgba(255,255,255,.88);

    font-weight:700;

}

.featured-event-content p{

    max-width:780px;

    margin-top:18px;

    color:rgba(255,255,255,.85);

    font-size:1.05rem;

    line-height:1.65;

}

.featured-event-actions{

    margin-top:24px;

}

.featured-event-actions
.small-button{

    margin-top:0;

    border:none;

    background:linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    color:var(--forest-deep);

}

/*--------------------------------------
Upcoming Events
--------------------------------------*/

.events-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.event-list-card{

    display:grid;

    grid-template-columns:100px 1fr auto;

    gap:22px;

    align-items:center;

    padding:24px;

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

    border-radius:22px;

    background:#fff;

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

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}

.event-list-card:hover{

    transform:translateY(-3px);

    border-color:rgba(212,170,34,.45);

    box-shadow:var(--shadow);

}

.event-list-card.next-event{

    border-left:6px solid var(--gold);

}

.event-date-block{

    min-height:94px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#f4f0df;

    text-align:center;

}

.event-date-month{

    color:var(--forest);

    font-size:.78rem;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

}

.event-date-day{

    margin:2px 0;

    color:var(--forest-deep);

    font-size:2.2rem;

    line-height:1;

}

.event-date-year{

    color:var(--muted);

    font-size:.75rem;

    font-weight:700;

}

.event-list-content{

    min-width:0;

}

.event-list-heading{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}

.event-list-heading h3{

    margin:0;

    color:var(--forest-deep);

    font-size:1.35rem;

}

.event-next-label{

    padding:5px 9px;

    border-radius:999px;

    background:var(--forest);

    color:#fff;

    font-size:.72rem;

    font-weight:900;

    letter-spacing:.4px;

    text-transform:uppercase;

}

.event-list-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px 16px;

    margin-top:8px;

    color:#687069;

    font-size:.88rem;

    font-weight:700;

}

.event-list-content p{

    margin-top:10px;

    color:var(--muted);

}

.event-row-button{

    padding:11px 16px;

    border:none;

    border-radius:12px;

    background:var(--forest);

    color:#fff;

    font-weight:800;

    transition:
        background .2s ease,
        transform .2s ease;

}

.event-row-button:hover{

    background:var(--forest-soft);

    transform:translateY(-2px);

}

/*--------------------------------------
Annual Traditions
--------------------------------------*/

#annualTraditionsSection[hidden]{

    display:none;

}

.events-tradition-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:20px;

}

.event-tradition-card{

    min-height:310px;

    display:flex;

    flex-direction:column;

    padding:24px;

    border-radius:24px;

    background:linear-gradient(
        145deg,
        var(--forest),
        var(--forest-deep)
    );

    color:#fff;

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

}

.event-tradition-icon{

    font-size:2.5rem;

}

.event-tradition-date{

    margin-top:16px;

    color:var(--gold-light);

    font-size:.78rem;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

}

.event-tradition-card h3{

    margin-top:10px;

    color:#fff;

    font-size:1.45rem;

    line-height:1.2;

}

.event-tradition-card p{

    margin-top:12px;

    color:rgba(255,255,255,.82);

}

.event-tradition-button{

    margin-top:auto;

    padding:11px 14px;

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

    border-radius:12px;

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

    color:#fff;

    font-weight:800;

}

.event-tradition-button:hover{

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

}

/*--------------------------------------
Empty and Loading States
--------------------------------------*/

.events-loading,
.events-empty-state{

    width:100%;

    padding:34px;

    border-radius:22px;

    background:#fff;

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

    color:var(--muted);

    text-align:center;

}

.featured-event-card
.events-loading,
.featured-event-card
.events-empty-state{

    grid-column:1 / -1;

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

    border-color:rgba(255,255,255,.15);

    color:rgba(255,255,255,.82);

}

.events-empty-icon{

    font-size:2.4rem;

}

.events-empty-state h3{

    margin-top:10px;

    color:var(--forest-deep);

}

.featured-event-card
.events-empty-state h3{

    color:#fff;

}

.events-empty-state p{

    margin-top:8px;

}

/*--------------------------------------
Event Detail Dialog
--------------------------------------*/

.event-dialog-open{

    overflow:hidden;

}

.event-detail-overlay{

    position:fixed;

    inset:0;

    z-index:7000;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

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

    backdrop-filter:blur(4px);

}

.event-detail-dialog{

    position:relative;

    width:min(620px,100%);

    max-height:90vh;

    overflow-y:auto;

    padding:34px;

    border-radius:26px;

    background:#fff;

    box-shadow:0 24px 70px rgba(0,0,0,.34);

}

.event-detail-close{

    position:absolute;

    top:16px;

    right:18px;

    border:none;

    background:none;

    color:#777;

    font-size:32px;

}

.event-detail-close:hover{

    color:#000;

}

.event-detail-icon{

    margin-bottom:10px;

    font-size:3rem;

}

.event-detail-dialog h2{

    margin-top:4px;

    color:var(--forest-deep);

    font-size:2rem;

    line-height:1.15;

}

.event-detail-line{

    display:flex;

    gap:12px;

    align-items:flex-start;

    margin-top:14px;

    padding:12px 14px;

    border-radius:14px;

    background:#f6f6f2;

    color:#39413b;

    font-weight:700;

}

.event-detail-line span:first-child{

    flex-shrink:0;

}

.event-detail-description{

    margin-top:20px;

    color:#4d554f;

    line-height:1.7;

}

/*--------------------------------------
Responsive
--------------------------------------*/

@media(max-width:1000px){

    .events-tradition-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:760px){

    .featured-event-card{

        grid-template-columns:1fr;

        padding:24px;

    }

    .featured-event-date-block{

        min-height:150px;

    }

    .event-list-card{

        grid-template-columns:82px 1fr;

    }

    .event-row-button{

        grid-column:1 / -1;

        width:100%;

    }

}

@media(max-width:520px){

    .events-tradition-grid{

        grid-template-columns:1fr;

    }

    .event-list-card{

        grid-template-columns:1fr;

    }

    .event-date-block{

        min-height:80px;

        flex-direction:row;

        gap:8px;

    }

    .event-date-day{

        font-size:1.5rem;

    }

    .event-detail-dialog{

        padding:28px 22px;

    }

}
/*======================================
FAMILY & FRIENDS PAGE
======================================*/

.family-page{

    padding-bottom:34px;

}

/*--------------------------------------
Section Headings
--------------------------------------*/

.family-section-heading{

    margin-top:34px;

    margin-bottom:22px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

}

.family-directory-heading{

    margin-top:48px;

}

.family-section-title{

    margin-top:6px;

    color:var(--forest-deep);

    font-size:clamp(30px,3vw,42px);

    line-height:1.08;

}

.family-section-description{

    margin-top:10px;

    color:var(--muted);

}

/*--------------------------------------
Snapshot Statistics
--------------------------------------*/

.family-stats-grid{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

/*--------------------------------------
Member Directory
--------------------------------------*/

.family-member-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:22px;

}

.family-member-card{

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-width:0;

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

    border-radius:24px;

    background:#fff;

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

    cursor:pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;

}

.family-member-card:hover,
.family-member-card:focus-visible{

    transform:translateY(-5px);

    border-color:rgba(212,170,34,.48);

    box-shadow:var(--shadow);

    outline:none;

}

.family-member-photo{

    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        radial-gradient(
            circle at top,
            rgba(240,207,98,.22),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            var(--forest),
            var(--forest-deep)
        );

}

.family-member-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    padding:6px;
}

.family-member-initials{

    color:var(--gold-light);

    font-size:3.2rem;

    font-weight:900;

    letter-spacing:2px;

    text-shadow:0 6px 18px rgba(0,0,0,.28);

}

.family-member-content{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:22px;

}

.family-member-role{

    color:var(--gold);

    font-size:.76rem;

    font-weight:900;

    letter-spacing:1.2px;

    text-transform:uppercase;

}

.family-member-content h3{

    margin-top:7px;

    color:var(--forest-deep);

    font-size:1.45rem;

    line-height:1.15;

}

.family-member-rank{

    margin-top:7px;

    color:var(--muted);

    font-size:.9rem;

    font-weight:700;

}

.family-member-stats{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:10px;

    margin-top:20px;

}

.family-member-stat{

    padding:12px 8px;

    border-radius:14px;

    background:#f5f5f0;

    text-align:center;

}

.family-member-stat strong{

    display:block;

    color:var(--forest-deep);

    font-size:1.25rem;

    line-height:1;

}

.family-member-stat span{

    display:block;

    margin-top:5px;

    color:var(--muted);

    font-size:.72rem;

    font-weight:800;

    text-transform:uppercase;

}

.family-member-action{

    margin-top:auto;

    padding-top:20px;

    color:var(--forest);

    font-size:.88rem;

    font-weight:900;

}

/*--------------------------------------
Highlights
--------------------------------------*/

.family-highlights-section{

    padding-top:0;

}

.family-highlight-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;

}

.family-highlight-card{

    min-height:300px;

    display:flex;

    flex-direction:column;

    padding:28px;

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

    border-radius:24px;

    background:#fff;

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

}

.family-highlight-icon{

    margin-bottom:20px;

    font-size:2.6rem;

}

.family-highlight-card h3{

    margin-top:4px;

    color:var(--forest-deep);

    font-size:1.55rem;

    line-height:1.2;

}

.family-highlight-card p{

    margin-top:12px;

    color:var(--muted);

    line-height:1.65;

}

.family-highlight-meta{

    margin-top:auto;

    padding-top:20px;

    color:var(--forest);

    font-size:.88rem;

    font-weight:900;

}

.family-highlight-leader{

    background:linear-gradient(
        145deg,
        var(--forest),
        var(--forest-deep)
    );

    color:#fff;

}

.family-highlight-leader
.panel-label{

    color:var(--gold-light);

}

.family-highlight-leader h3{

    color:#fff;

}

.family-highlight-leader p{

    color:rgba(255,255,255,.80);

}

.family-highlight-leader
.family-highlight-meta{

    color:var(--gold-light);

}

/*--------------------------------------
Compound Goal
--------------------------------------*/

.family-goal-progress{

    width:100%;

    height:12px;

    margin-top:22px;

    overflow:hidden;

    border-radius:999px;

    background:#e5e5df;

    box-shadow:inset 0 1px 3px rgba(0,0,0,.12);

}

.family-goal-progress-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );

    transition:width .35s ease;

}

/*--------------------------------------
Loading and Empty States
--------------------------------------*/

.family-loading-state,
.family-empty-state{

    grid-column:1 / -1;

    padding:42px;

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

    border-radius:24px;

    background:#fff;

    color:var(--muted);

    text-align:center;

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

}

.family-empty-icon{

    font-size:2.7rem;

}

.family-empty-state h3{

    margin-top:12px;

    color:var(--forest-deep);

}

.family-empty-state p{

    margin-top:8px;

}

/*--------------------------------------
Responsive
--------------------------------------*/

@media(max-width:1100px){

    .family-member-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

    .family-stats-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:850px){

    .family-member-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .family-highlight-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    .family-section-heading{

        align-items:flex-start;

        flex-direction:column;

    }

    .family-member-grid,
    .family-stats-grid{

        grid-template-columns:1fr;

    }

    .family-member-photo{

        aspect-ratio:16 / 10;

    }

}
/*======================================
STREAMLINED MEMBER PROFILE
======================================*/

.profile-page{

    padding-bottom:40px;

}

/*--------------------------------------
Back Navigation
--------------------------------------*/

.profile-back-row{

    margin-bottom:18px;

}

.profile-back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--forest);

    font-weight:900;

    text-decoration:none;

}

.profile-back-link:hover{

    color:var(--gold);

}

/*--------------------------------------
Profile Summary
--------------------------------------*/

.profile-summary-card{

    display:grid;

    grid-template-columns:190px 1fr auto;

    gap:30px;

    align-items:center;

    padding:30px;

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

    border-radius:28px;

    background:#fff;

    box-shadow:var(--shadow);

}

.profile-summary-photo{

    position:relative;

    width:190px;

    aspect-ratio:1;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    border:6px solid var(--gold);

    border-radius:28px;

    background:linear-gradient(
        145deg,
        var(--forest),
        var(--forest-deep)
    );

}

.profile-summary-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.profile-summary-initials{

    color:var(--gold-light);

    font-size:4rem;

    font-weight:900;

}

.profile-summary-content h1{

    margin-top:4px;

    color:var(--forest-deep);

    font-size:clamp(40px,5vw,68px);

    line-height:1;

}

.profile-summary-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:14px;

    color:var(--muted);

    font-size:1rem;

}

.profile-summary-quote{

    margin-top:22px;

    color:var(--forest-deep);

    font-size:1.15rem;

    font-style:italic;

}

.profile-rank-block{

    min-width:190px;

    text-align:center;

}

.profile-level-circle{

    width:150px;

    height:150px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border:10px solid var(--gold);

    border-radius:50%;

    background:var(--forest);

    color:#fff;

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

}

.profile-level-circle strong{

    font-size:3rem;

    line-height:1;

}

.profile-level-circle span{

    margin-top:8px;

    font-size:.82rem;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

}

.profile-rank-label{

    margin-top:16px;

    color:var(--muted);

    font-size:.76rem;

    font-weight:900;

    letter-spacing:1.2px;

    text-transform:uppercase;

}

.profile-rank-name{

    margin-top:6px;

    color:var(--forest-deep);

    font-size:1.35rem;

    font-weight:900;

}

/*--------------------------------------
Primary Statistics
--------------------------------------*/

.profile-stat-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;

    margin-top:28px;

}

.profile-stat-card{

    padding:26px 20px;

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

    border-radius:22px;

    background:#fff;

    text-align:center;

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

}

.profile-stat-number,
.profile-stat-rank{

    color:var(--forest-deep);

    font-size:2.5rem;

    font-weight:900;

    line-height:1;

}

.profile-stat-rank{

    font-size:1.5rem;

}

.profile-stat-label{

    margin-top:12px;

    color:var(--muted);

    font-size:.78rem;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*--------------------------------------
Rank Progress
--------------------------------------*/

.profile-progress-card{

    margin-top:28px;

    padding:30px;

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

    border-radius:24px;

    background:#fff;

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

}

.profile-progress-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

.profile-progress-heading h2{

    margin-top:6px;

    color:var(--forest-deep);

    font-size:2rem;

}

.profile-progress-percent{

    color:var(--forest);

    font-size:1.8rem;

    font-weight:900;

}

.profile-progress-card > p{

    margin-top:12px;

    color:var(--muted);

}

.profile-progress-bar{

    width:100%;

    height:14px;

    margin-top:20px;

    overflow:hidden;

    border-radius:999px;

    background:#e4e4df;

    box-shadow:inset 0 1px 3px rgba(0,0,0,.12);

}

.profile-progress-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );

    transition:width .35s ease;

}

.profile-progress-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:20px;

}

.profile-progress-actions p{

    color:var(--muted);

}

.profile-progress-actions
.small-button{

    margin-top:0;

    flex-shrink:0;

}

/*--------------------------------------
Profile Content Sections
--------------------------------------*/

.profile-content-section{

    margin-top:34px;

    padding:28px;

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

    border-radius:24px;

    background:#fff;

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

}

.profile-content-section[hidden]{

    display:none;

}

.profile-section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

    margin-bottom:22px;

}

.profile-section-title{

    margin-top:6px;

    color:var(--forest-deep);

    font-size:2rem;

}

/*--------------------------------------
Recent Adventures
--------------------------------------*/

.profile-recent-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.profile-recent-card{

    display:grid;

    grid-template-columns:76px 1fr;

    gap:18px;

    align-items:center;

    padding:16px;

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

    border-radius:18px;

    background:#fafaf7;

}

.profile-recent-content{

    min-width:0;

}

.profile-recent-category{

    color:var(--gold);

    font-size:.72rem;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

}

.profile-recent-content h3{

    margin-top:4px;

    color:var(--forest-deep);

    font-size:1.2rem;

}

.profile-recent-meta{

    margin-top:7px;

    color:var(--muted);

    font-size:.88rem;

}

/*--------------------------------------
Badge Collection
--------------------------------------*/

.profile-badge-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;

}

.profile-badge-card{

    padding:18px;

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

    border-radius:18px;

    background:#fafaf7;

    text-align:center;

}

.profile-badge-card h3{

    margin-top:12px;

    color:var(--forest-deep);

    font-size:1rem;

    line-height:1.25;

}

.profile-badge-card p{

    margin-top:6px;

    color:var(--muted);

    font-size:.82rem;

}

.profile-badge-image{

    width:76px;

    height:76px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:16px;

    background:#f0eddf;

}

.profile-badge-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}

/*--------------------------------------
Category Progress
--------------------------------------*/

.profile-category-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.profile-category-row{

    padding:16px;

    border-radius:16px;

    background:#fafaf7;

}

.profile-category-heading{

    display:flex;

    justify-content:space-between;

    gap:20px;

    color:var(--forest-deep);

}

.profile-category-heading span{

    color:var(--muted);

    font-size:.85rem;

    font-weight:800;

}

.profile-category-bar{

    width:100%;

    height:10px;

    margin-top:12px;

    overflow:hidden;

    border-radius:999px;

    background:#e4e4df;

}

.profile-category-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--forest),
        var(--gold)
    );

}

/*--------------------------------------
Achievements / Trophy Room
--------------------------------------*/

.profile-achievement-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:18px;

}

.profile-achievement-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:250px;

    padding:22px;

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

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f7f2 100%
        );

    box-shadow:
        0 10px 28px
        rgba(18,42,26,.08);

    overflow:hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        opacity .2s ease;

}

.profile-achievement-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:5px;

    background:
        var(--gold);

}

.profile-achievement-card.is-earned{

    border-color:
        rgba(191,151,55,.5);

    background:
        linear-gradient(
            180deg,
            #fffdf5 0%,
            #f8f3df 100%
        );

    box-shadow:
        0 14px 34px
        rgba(87,64,12,.14);

}

.profile-achievement-card.is-earned:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px
        rgba(87,64,12,.18);

}

.profile-achievement-card.is-locked{

    opacity:.72;

    filter:
        grayscale(.35);

    background:
        linear-gradient(
            180deg,
            #f5f5f2 0%,
            #ebebe6 100%
        );

}

.profile-achievement-card.is-locked::before{

    background:
        #a9aaa5;

}

.profile-achievement-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    border-radius:50%;

    background:
        rgba(191,151,55,.14);

    border:
        1px solid
        rgba(191,151,55,.3);

    font-size:2.25rem;

    line-height:1;

}

.profile-achievement-card.is-locked
.profile-achievement-icon{

    background:
        rgba(80,80,80,.08);

    border-color:
        rgba(80,80,80,.18);

}

.profile-achievement-icon img{

    width:56px;

    height:56px;

    object-fit:contain;

}

.profile-achievement-card h3{

    margin:14px 0 0;

    color:var(--forest-deep);

    font-size:1.08rem;

    line-height:1.25;

}

.profile-achievement-card p{

    margin:9px 0 0;

    color:var(--muted);

    line-height:1.5;

}

.profile-achievement-meta{

    margin-top:auto;

    padding-top:18px;

    color:var(--muted);

    font-size:.82rem;

    font-weight:700;

    line-height:1.4;

}

.profile-achievement-status{

    margin-top:12px;

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    min-height:30px;

    padding:6px 11px;

    border-radius:999px;

    background:
        rgba(19,82,48,.1);

    color:var(--forest-deep);

    font-size:.76rem;

    font-weight:800;

    letter-spacing:.03em;

    text-transform:uppercase;

}

.profile-achievement-card.is-locked
.profile-achievement-status{

    background:
        rgba(80,80,80,.1);

    color:#666;

}

@media(max-width:950px){

    .profile-achievement-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }

}

@media(max-width:650px){

    .profile-achievement-grid{

        grid-template-columns:1fr;

    }

    .profile-achievement-card{

        min-height:220px;

    }

}

/*--------------------------------------
Empty State
--------------------------------------*/

.profile-empty-state{

    grid-column:1 / -1;

    padding:38px;

    border:2px dashed #d4d9d3;

    border-radius:20px;

    text-align:center;

}

.profile-empty-icon{

    font-size:2.6rem;

}

.profile-empty-state h3{

    margin-top:12px;

    color:var(--forest-deep);

}

.profile-empty-state p{

    margin-top:8px;

    color:var(--muted);

}

/*--------------------------------------
Responsive
--------------------------------------*/

@media(max-width:1000px){

    .profile-summary-card{

        grid-template-columns:150px 1fr;

    }

    .profile-summary-photo{

        width:150px;

    }

    .profile-rank-block{

        grid-column:1 / -1;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:18px;

    }

    .profile-level-circle{

        width:110px;

        height:110px;

        margin:0;

    }

    .profile-stat-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .profile-badge-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .profile-summary-card{

        grid-template-columns:1fr;

        text-align:center;

    }

    .profile-summary-photo{

        margin:0 auto;

    }

    .profile-summary-meta{

        justify-content:center;

    }

    .profile-rank-block{

        flex-direction:column;

    }

    .profile-progress-heading,
    .profile-progress-actions,
    .profile-section-header{

        align-items:flex-start;

        flex-direction:column;

    }

    .profile-progress-actions
    .small-button{

        width:100%;

        text-align:center;

    }

    .profile-badge-grid,
    .profile-achievement-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:480px){

    .profile-stat-grid,
    .profile-badge-grid,
    .profile-achievement-grid{

        grid-template-columns:1fr;

    }

    .profile-recent-card{

        grid-template-columns:60px 1fr;

    }

}
/*======================================
WAC RESOURCE CENTER
======================================*/

.resources-page{

    padding-bottom:48px;

}

/*--------------------------------------
Hero
--------------------------------------*/

.resources-hero{

    display:grid;

    grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr);

    gap:28px;

    align-items:stretch;

    padding:34px;

    border-radius:28px;

    background:
        radial-gradient(
            circle at top right,
            rgba(212,175,55,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--forest-deep),
            var(--forest)
        );

    color:#fff;

    box-shadow:var(--shadow);

}

.resources-hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.resources-hero-content .eyebrow{

    color:var(--gold-light);

}

.resources-hero-content h1{

    margin-top:6px;

    font-size:clamp(42px,5vw,70px);

    line-height:1;

}

.resources-hero-content p{

    max-width:720px;

    margin-top:18px;

    color:rgba(255,255,255,.84);

    font-size:1.08rem;

    line-height:1.6;

}

.resources-hero-stats{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px;

}

.resources-hero-stat{

    min-height:132px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:20px;

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

    border-radius:20px;

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

    text-align:center;

    backdrop-filter:blur(8px);

}

.resources-update-stat{

    grid-column:1 / -1;

}

.resources-hero-stat strong{

    color:var(--gold-light);

    font-size:2.1rem;

    line-height:1;

}

.resources-hero-stat span{

    margin-top:10px;

    color:rgba(255,255,255,.8);

    font-size:.76rem;

    font-weight:900;

    letter-spacing:1.1px;

    text-transform:uppercase;

}

/*--------------------------------------
Search and Filters
--------------------------------------*/

.resources-toolbar{

    margin-top:26px;

    padding:22px;

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

    border-radius:22px;

    background:#fff;

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

}

.resources-search{

    position:relative;

    display:flex;

    align-items:center;

}

.resources-search-icon{

    position:absolute;

    left:16px;

    pointer-events:none;

}

.resources-search input{

    width:100%;

    min-height:52px;

    padding:0 48px;

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

    border-radius:16px;

    background:#fafaf7;

    color:var(--forest-deep);

    font:inherit;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}

.resources-search input:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(212,175,55,.14);

}

.resources-search-clear{

    position:absolute;

    right:12px;

    width:32px;

    height:32px;

    border:0;

    border-radius:50%;

    background:transparent;

    color:var(--muted);

    font-size:1.5rem;

    cursor:pointer;

}

.resources-search-clear:hover{

    background:#ecece6;

    color:var(--forest-deep);

}

.resources-filter-row{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

}

.resources-filter{

    padding:10px 16px;

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

    border-radius:999px;

    background:#fff;

    color:var(--forest-deep);

    font-weight:900;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.resources-filter:hover{

    transform:translateY(-1px);

    border-color:var(--gold);

}

.resources-filter.active{

    border-color:var(--forest);

    background:var(--forest);

    color:#fff;

}

/*--------------------------------------
Sections
--------------------------------------*/

.resources-section{

    margin-top:34px;

}

.resources-section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

    margin-bottom:20px;

}

.resources-section-header h2{

    margin-top:5px;

    color:var(--forest-deep);

    font-size:2rem;

}

.resources-section-header p{

    margin-top:8px;

    color:var(--muted);

}

/*--------------------------------------
Featured Resources
--------------------------------------*/

.resources-featured-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;

}

.resources-featured-card{

    position:relative;

    min-height:310px;

    display:flex;

    flex-direction:column;

    padding:24px;

    overflow:hidden;

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

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            var(--forest),
            var(--forest-deep)
        );

    color:#fff;

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

}

.resources-featured-card::after{

    content:"";

    position:absolute;

    right:-46px;

    bottom:-52px;

    width:150px;

    height:150px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

}

.resources-featured-card-safety{

    background:
        linear-gradient(
            145deg,
            #5a1b1b,
            #2e0d0d
        );

}

.resources-featured-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

    font-size:2rem;

}

.resources-card-category{

    margin-top:18px;

    color:var(--gold-light);

    font-size:.72rem;

    font-weight:900;

    letter-spacing:1.1px;

    text-transform:uppercase;

}

.resources-featured-card h3{

    margin-top:7px;

    font-size:1.35rem;

    line-height:1.2;

}

.resources-featured-card p{

    margin-top:12px;

    color:rgba(255,255,255,.82);

    line-height:1.55;

}

.resources-featured-action{

    position:relative;

    z-index:1;

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 16px;

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

    border-radius:12px;

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

    color:#fff;

    font-weight:900;

    text-decoration:none;

    cursor:pointer;

}

.resources-featured-action:hover{

    background:var(--gold);

    color:var(--forest-deep);

}

/*--------------------------------------
Resource Library
--------------------------------------*/

.resources-library-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;

}

.resources-library-card{

    display:flex;

    flex-direction:column;

    min-height:290px;

    padding:22px;

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

    border-radius:20px;

    background:#fff;

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

}

.resources-library-card-top{

    display:grid;

    grid-template-columns:58px 1fr;

    gap:15px;

    align-items:center;

}

.resources-library-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#f1efe3;

    font-size:1.7rem;

}

.resources-library-heading{

    min-width:0;

}

.resources-library-heading .resources-card-category{

    margin-top:0;

    color:var(--gold);

}

.resources-library-heading h3{

    margin-top:5px;

    color:var(--forest-deep);

    font-size:1.2rem;

}

.resources-library-description{

    margin-top:18px;

    color:var(--muted);

    line-height:1.55;

}

.resources-card-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:18px;

}

.resources-card-meta span{

    padding:7px 10px;

    border-radius:999px;

    background:#f2f2ed;

    color:var(--muted);

    font-size:.75rem;

    font-weight:800;

}

.resources-library-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-top:auto;

    padding-top:20px;

}

.resources-access-label{

    color:var(--muted);

    font-size:.76rem;

    font-weight:900;

    letter-spacing:.9px;

    text-transform:uppercase;

}

.resources-card-action{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 15px;

    border:0;

    border-radius:12px;

    background:var(--forest);

    color:#fff;

    font-weight:900;

    text-decoration:none;

    cursor:pointer;

}

.resources-card-action:hover{

    background:var(--gold);

    color:var(--forest-deep);

}

/*--------------------------------------
Disabled Actions
--------------------------------------*/

.resources-action-disabled{

    cursor:not-allowed;

    opacity:.55;

}

.resources-featured-action.resources-action-disabled:hover,
.resources-card-action.resources-action-disabled:hover{

    background:inherit;

    color:inherit;

}

/*--------------------------------------
Loading, Empty and Error States
--------------------------------------*/

.resources-loading-state,
.resources-empty-state{

    grid-column:1 / -1;

    padding:44px;

    border:2px dashed #d3d7d1;

    border-radius:22px;

    background:#fff;

    text-align:center;

}

.resources-loading-icon,
.resources-empty-icon{

    font-size:2.8rem;

}

.resources-loading-state h3,
.resources-empty-state h3{

    margin-top:12px;

    color:var(--forest-deep);

}

.resources-loading-state p,
.resources-empty-state p{

    margin-top:8px;

    color:var(--muted);

}

.resources-empty-state .small-button{

    margin-top:18px;

}

.resources-error-state{

    border-color:#d9b0b0;

    background:#fff7f7;

}

/*--------------------------------------
Responsive
--------------------------------------*/

@media(max-width:1100px){

    .resources-hero{

        grid-template-columns:1fr;

    }

    .resources-featured-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:760px){

    .resources-hero{

        padding:26px;

    }

    .resources-hero-stats{

        grid-template-columns:1fr;

    }

    .resources-update-stat{

        grid-column:auto;

    }

    .resources-section-header{

        align-items:flex-start;

        flex-direction:column;

    }

    .resources-featured-grid,
    .resources-library-grid{

        grid-template-columns:1fr;

    }

    .resources-library-footer{

        align-items:flex-start;

        flex-direction:column;

    }

    .resources-card-action{

        width:100%;

    }

}

@media(max-width:480px){

    .resources-toolbar,
    .resources-library-card,
    .resources-featured-card{

        padding:18px;

    }

    .resources-filter{

        width:100%;

    }

}
/*======================================
WAC MEMBER AUTHENTICATION
======================================*/

/*--------------------------------------
Navigation Authentication
--------------------------------------*/

.auth-navigation{

    position:relative;

    display:flex;

    align-items:center;

    margin-left:18px;

}

.auth-sign-in-button,
.signed-in-member-button{

    min-height:42px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:0 16px;

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

    border-radius:999px;

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

    color:#fff;

    font:inherit;

    font-size:.84rem;

    font-weight:900;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;

}

.auth-sign-in-button:hover,
.signed-in-member-button:hover{

    transform:translateY(-1px);

    border-color:var(--gold);

    background:var(--gold);

    color:var(--forest-deep);

}

.signed-in-member-menu{

    position:relative;

}

.signed-in-member-initials{

    width:30px;

    height:30px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gold);

    color:var(--forest-deep);

    font-size:.76rem;

    font-weight:900;

}

.signed-in-member-name{

    max-width:140px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/*--------------------------------------
Signed-In Dropdown
--------------------------------------*/

.signed-in-member-dropdown{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    z-index:1500;

    width:250px;

    padding:12px;

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

    border-radius:18px;

    background:#fff;

    color:var(--forest-deep);

    box-shadow:0 18px 50px rgba(0,0,0,.2);

}

.signed-in-member-dropdown[hidden]{

    display:none;

}

.signed-in-member-summary{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:10px 10px 14px;

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

}

.signed-in-member-summary strong{

    font-size:1rem;

}

.signed-in-member-summary span{

    overflow-wrap:anywhere;

    color:var(--muted);

    font-size:.78rem;

}

.signed-in-member-dropdown button{

    width:100%;

    min-height:42px;

    margin-top:8px;

    padding:0 12px;

    border:0;

    border-radius:11px;

    background:#f3f4ef;

    color:var(--forest-deep);

    font:inherit;

    font-weight:900;

    text-align:left;

    cursor:pointer;

}

.signed-in-member-dropdown button:hover{

    background:var(--forest);

    color:#fff;

}

/*--------------------------------------
Modal Overlay
--------------------------------------*/

body.auth-modal-open{

    overflow:hidden;

}

.auth-modal-overlay{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:22px;

    background:rgba(5,20,17,.78);

    backdrop-filter:blur(8px);

}

.auth-modal-overlay[hidden]{

    display:none;

}

.auth-modal-panel{

    position:relative;

    width:min(100%,460px);

    max-height:calc(100vh - 44px);

    overflow-y:auto;

    padding:34px;

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

    border-radius:26px;

    background:#fff;

    color:var(--forest-deep);

    box-shadow:0 28px 80px rgba(0,0,0,.38);

}

.auth-modal-close{

    position:absolute;

    top:14px;

    right:14px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

    background:#f0f1ec;

    color:var(--muted);

    font-size:1.6rem;

    line-height:1;

    cursor:pointer;

}

.auth-modal-close:hover{

    background:var(--forest);

    color:#fff;

}

.auth-modal-brand{

    width:82px;

    height:82px;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border:4px solid var(--gold);

    border-radius:20px;

    background:var(--forest);

}

.auth-modal-brand img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.auth-modal-panel h2{

    margin-top:6px;

    color:var(--forest-deep);

    font-size:2rem;

    line-height:1.1;

}

.auth-modal-intro{

    margin-top:12px;

    color:var(--muted);

    line-height:1.55;

}

/*--------------------------------------
Form
--------------------------------------*/

.auth-modal-panel form{

    margin-top:24px;

}

.auth-modal-panel label{

    display:block;

    margin-top:16px;

    color:var(--forest-deep);

    font-size:.82rem;

    font-weight:900;

}

.auth-modal-panel input{

    width:100%;

    min-height:50px;

    margin-top:7px;

    padding:0 14px;

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

    border-radius:13px;

    background:#fafaf7;

    color:var(--forest-deep);

    font:inherit;

    outline:none;

}

.auth-modal-panel input:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(200,158,61,.15);

}

.auth-modal-submit{

    width:100%;

    min-height:50px;

    margin-top:22px;

    border:0;

    border-radius:13px;

    background:var(--forest);

    color:#fff;

    font:inherit;

    font-weight:900;

    cursor:pointer;

}

.auth-modal-submit:hover{

    background:var(--gold);

    color:var(--forest-deep);

}

.auth-modal-submit:disabled,
.auth-password-reset:disabled{

    cursor:wait;

    opacity:.6;

}

.auth-password-reset{

    width:100%;

    min-height:42px;

    margin-top:10px;

    border:0;

    background:transparent;

    color:var(--forest);

    font:inherit;

    font-weight:900;

    cursor:pointer;

}

.auth-password-reset:hover{

    color:var(--gold);

}

/*--------------------------------------
Messages
--------------------------------------*/

.auth-modal-message{

    margin-top:16px;

    padding:12px 14px;

    border-radius:12px;

    font-size:.86rem;

    line-height:1.45;

}

.auth-modal-message[hidden]{

    display:none;

}

.auth-modal-message-success{

    border:1px solid #a8cbb8;

    background:#edf8f1;

    color:#215b3d;

}

.auth-modal-message-error{

    border:1px solid #d9aeae;

    background:#fff1f1;

    color:#7a2525;

}

.auth-modal-help{

    margin-top:20px;

    padding-top:18px;

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

    color:var(--muted);

    font-size:.78rem;

    line-height:1.5;

}

/*--------------------------------------
Responsive Navigation
--------------------------------------*/

@media(max-width:1050px){

    .navbar{

        flex-wrap:wrap;

        gap:14px;

    }

    .nav-links{

        order:3;

        width:100%;

    }

    .auth-navigation{

        margin-left:auto;

    }

}

@media(max-width:700px){

    .signed-in-member-name{

        display:none;

    }

    .auth-sign-in-button{

        padding:0 13px;

    }

    .auth-modal-panel{

        padding:28px 22px;

    }

}

@media(max-width:480px){

    .auth-navigation{

        width:100%;

        margin-left:0;

    }

    .auth-sign-in-button,
    .signed-in-member-button{

        width:100%;

    }

    .signed-in-member-menu{

        width:100%;

    }

    .signed-in-member-dropdown{

        left:0;

        right:auto;

        width:100%;

    }

}
/*======================================
WAC ADVENTURE QUICK GUIDE
======================================*/

.adventure-toolbar,
.quick-guide-toolbar{

    align-items:center;

}

.adventure-quick-guide-button{

    white-space:nowrap;

}

.quick-guide-list{

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-top:28px;

}

.quick-guide-category{

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

    border-radius:22px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.quick-guide-category-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:18px 22px;

    background:var(--forest);

    color:#fff;

}

.quick-guide-category-header h2{

    margin:0;

    font-size:1.15rem;

}

.quick-guide-category-list{

    display:flex;

    flex-direction:column;

}

.quick-guide-item{

    display:grid;

    grid-template-columns:84px minmax(0,1fr);

    gap:18px;

    padding:20px 22px;

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

}

.quick-guide-item:last-child{

    border-bottom:0;

}

.quick-guide-badge{

    width:84px;

    height:84px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:18px;

    background:#f3f4ef;

}

.quick-guide-badge img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.quick-guide-item-content{

    min-width:0;

}

.quick-guide-item-heading{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:18px;

}

.quick-guide-item-heading h3{

    margin:0;

    color:var(--forest-deep);

    font-size:1.05rem;

    line-height:1.35;

}

.quick-guide-points{

    flex:0 0 auto;

    padding:5px 9px;

    border-radius:999px;

    background:rgba(200,158,61,.16);

    color:var(--forest-deep);

    font-size:.72rem;

    font-weight:900;

}

.quick-guide-mission{

    margin:10px 0 14px;

    color:var(--muted);

    line-height:1.6;

}

.quick-guide-open-button{

    min-height:38px;

}

@media(max-width:700px){

    .quick-guide-item{

        grid-template-columns:64px minmax(0,1fr);

        padding:16px;

    }

    .quick-guide-badge{

        width:64px;

        height:64px;

    }

    .quick-guide-item-heading{

        flex-direction:column;

        gap:8px;

    }

    .quick-guide-category-header{

        align-items:flex-start;

        flex-direction:column;

    }

}

/*======================================
QUICK GUIDE PRINT VIEW
======================================*/

@media print{

    body{

        background:#fff;

    }

    header.hero,
    .profile-back-row,
    .quick-guide-toolbar,
    .quick-guide-open-button,
    #globalComponents{

        display:none !important;

    }

    #app-content{

        display:block;

    }

    .page-section{

        padding:0;

    }

    .container{

        width:100%;

        max-width:none;

        margin:0;

        padding:0;

    }

    .quick-guide-page .page-header{

        margin-bottom:20px;

    }

    .quick-guide-page .section-title{

        font-size:24px;

    }

    .quick-guide-page .section-subtitle{

        font-size:12px;

    }

    .quick-guide-list{

        gap:16px;

        margin-top:16px;

    }

    .quick-guide-category{

        break-inside:avoid;

        border:1px solid #bbb;

        border-radius:0;

        box-shadow:none;

    }

    .quick-guide-category-header{

        padding:10px 12px;

        background:#eee !important;

        color:#000 !important;

        print-color-adjust:exact;

        -webkit-print-color-adjust:exact;

    }

    .quick-guide-category-header .chip{

        background:#fff;

        color:#000;

        border:1px solid #bbb;

    }

    .quick-guide-item{

        grid-template-columns:52px minmax(0,1fr);

        gap:12px;

        padding:10px 12px;

        break-inside:avoid;

    }

    .quick-guide-badge{

        width:52px;

        height:52px;

        border-radius:8px;

    }

    .quick-guide-item-heading h3{

        font-size:12px;

    }

    .quick-guide-points{

        font-size:9px;

    }

    .quick-guide-mission{

        margin:5px 0 0;

        font-size:10px;

        line-height:1.4;

    }

}
/*======================================
ADVENTURE ELIGIBILITY BANNER
======================================*/

.adventure-eligibility-banner{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:24px;

    padding:18px 22px;

    border-left:6px solid var(--gold);

    border-radius:16px;

    background:linear-gradient(
        145deg,
        #fff9df,
        #f6edc7
    );

    color:var(--forest-deep);

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

}

.adventure-eligibility-banner strong{

    font-size:.88rem;

    font-weight:900;

    letter-spacing:1.2px;

    text-transform:uppercase;

}

.adventure-eligibility-banner span{

    font-size:1rem;

    font-weight:700;

    line-height:1.55;

}

@media(max-width:500px){

    .adventure-eligibility-banner{

        padding:16px 18px;

    }

    .adventure-eligibility-banner span{

        font-size:.94rem;

    }

}
/*======================================
COMPACT ADVENTURE CARDS
======================================*/

#adventureGrid{

    gap:16px;

}

#adventureGrid .adventure-card{

    min-height:180px;

    padding:18px;

    border-radius:20px;

}

#adventureGrid .adventure-card h3{

    font-size:1.15rem;

    line-height:1.25;

}

#adventureGrid .adventure-card p{

    margin-top:5px;

    font-size:.9rem;

}

#adventureGrid .adventure-card .badge{

    margin-bottom:9px;

    padding:5px 10px;

    font-size:.75rem;

}

#adventureGrid .adventure-card .small-button{

    margin-top:14px;

    padding:10px 14px;

    font-size:.9rem;

}

#adventureGrid .adventure-card .card-image{

    margin-bottom:12px;

}

#adventureGrid .adventure-card .card-image img{

    max-height:105px;

    margin:0 auto;

    object-fit:contain;

}
/*======================================
HIDE ADVENTURE DRAWER HERO IMAGE
======================================*/

#drawerHeroButton{

    display:none;

}

.drawer-photos .drawer-gallery-header{

    margin-top:0;

}
/*======================================
EVENTS LIST / CALENDAR VIEW
======================================*/

.events-view-controls{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.events-view-toggle{

    display:flex;

    padding:4px;

    border-radius:14px;

    background:#e7e3d5;

    box-shadow:inset 0 1px 3px rgba(0,0,0,.08);

}

.events-view-button{

    padding:9px 14px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--forest-deep);

    font-weight:800;

    transition:var(--transition);

}

.events-view-button.active{

    background:var(--forest);

    color:#fff;

    box-shadow:0 5px 12px rgba(23,61,36,.18);

}

.events-calendar-view{

    margin-top:8px;

}

.events-calendar-view[hidden]{

    display:none;

}

.events-calendar-header{

    display:grid;

    grid-template-columns:48px 1fr 48px;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

    padding:18px 20px;

    border-radius:18px;

    background:var(--forest);

    color:#fff;

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

}

.events-calendar-header h3{

    text-align:center;

    font-size:1.45rem;

}

.events-calendar-nav{

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    font-size:1.8rem;

    line-height:1;

    transition:var(--transition);

}

.events-calendar-nav:hover{

    background:var(--gold);

    color:var(--forest-deep);

}

.events-calendar-grid{

    display:grid;

    grid-template-columns:repeat(7,minmax(0,1fr));

    gap:8px;

}

.events-calendar-weekday{

    padding:10px 6px;

    color:var(--forest);

    font-size:.8rem;

    font-weight:900;

    letter-spacing:.6px;

    text-align:center;

    text-transform:uppercase;

}

.events-calendar-day{

    min-height:125px;

    padding:10px;

    border:1px solid rgba(23,61,36,.13);

    border-radius:14px;

    background:#fff;

    box-shadow:0 5px 14px rgba(23,61,36,.06);

}

.events-calendar-day-empty{

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

    box-shadow:none;

}

.events-calendar-day.today{

    border:2px solid var(--gold);

    background:#fffdf2;

}

.events-calendar-day-number{

    margin-bottom:8px;

    color:var(--forest-deep);

    font-size:.9rem;

    font-weight:900;

}

.events-calendar-event{

    width:100%;

    margin-top:5px;

    padding:7px 8px;

    border:none;

    border-radius:9px;

    background:var(--forest);

    color:#fff;

    font-size:.75rem;

    font-weight:800;

    line-height:1.25;

    text-align:left;

    transition:var(--transition);

}

.events-calendar-event:hover{

    background:var(--forest-soft);

    transform:translateY(-1px);

}

@media(max-width:850px){

    .events-calendar-day{

        min-height:105px;

        padding:8px;

    }

    .events-calendar-event{

        font-size:.68rem;

    }

}

@media(max-width:650px){

    .events-view-controls{

        width:100%;

        align-items:flex-start;

        flex-direction:column;

    }

    .events-calendar-view{

        overflow-x:auto;

    }

    .events-calendar-grid{

        min-width:760px;

    }

    .events-calendar-header{

        min-width:760px;

    }

}
.events-list[hidden]{

    display:none;

}
/*======================================
ADVENTURE COMPLETION STORY
======================================*/

.drawer-submission-section{

    margin-top:34px;

    padding:24px;

    border-left:6px solid var(--gold);

    border-radius:18px;

    background:linear-gradient(
        145deg,
        #fffdf4,
        #f8f3df
    );

    box-shadow:0 10px 26px rgba(23,61,36,.08);

}

.drawer-submission-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    margin-bottom:20px;

}

.drawer-submission-heading h3{

    margin:4px 0 6px;

    color:var(--forest-deep);

    font-size:1.35rem;

}

.drawer-submission-heading p{

    margin:0;

    color:#666;

    line-height:1.55;

}

.drawer-submission-required{

    flex-shrink:0;

    padding:6px 10px;

    border-radius:999px;

    background:var(--forest);

    color:#fff;

    font-size:.76rem;

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.drawer-story-label{

    display:block;

    margin-bottom:8px;

    color:var(--forest-deep);

    font-weight:900;

}

.drawer-story-input{

    width:100%;

    min-height:170px;

    padding:15px;

    border:1px solid rgba(23,61,36,.18);

    border-radius:14px;

    background:#fff;

    color:var(--ink);

    line-height:1.55;

    resize:vertical;

    outline:none;

}

.drawer-story-input:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(212,170,34,.14);

}

.drawer-story-footer{

    display:flex;

    justify-content:space-between;

    gap:16px;

    margin-top:9px;

    color:#6b6b63;

    font-size:.82rem;

}

.drawer-story-footer span:last-child{

    flex-shrink:0;

    font-weight:800;

}

@media(max-width:500px){

    .drawer-submission-section{

        padding:18px;

    }

    .drawer-submission-heading{

        flex-direction:column;

    }

    .drawer-story-footer{

        flex-direction:column;

        gap:4px;

    }

}
/*======================================
ADMIN SUBMISSION REVIEW
======================================*/

.admin-review-section{

    margin-top:18px;

    padding:18px;

    border-radius:14px;

    background:#f7f4e8;

    border:1px solid rgba(23,61,36,.12);

}

.admin-review-label{

    margin-bottom:8px;

    color:var(--forest-deep);

    font-size:.78rem;

    font-weight:900;

    letter-spacing:.7px;

    text-transform:uppercase;

}

.admin-review-text{

    margin:0;

    color:var(--ink);

    line-height:1.6;

    white-space:pre-wrap;

}

.admin-submission-story{

    border-left:5px solid var(--gold);

}

.admin-submission-actions{

    margin-top:18px;

}

/*======================================
ADMIN REVIEW CONTROLS
======================================*/

.admin-adventure-requirements{

    border-left:5px solid var(--forest);

}

.admin-comment-section{

    border-left:5px solid #7a5a24;

}

.admin-comment-input{

    width:100%;

    min-height:110px;

    padding:13px 14px;

    border:1px solid rgba(23,61,36,.18);

    border-radius:12px;

    background:#fff;

    color:var(--ink);

    line-height:1.5;

    resize:vertical;

    outline:none;

}

.admin-comment-input:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(212,170,34,.14);

}

.admin-submission-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.admin-return-button{

    background:#b98622;

    color:#fff;

}

.admin-reject-button{

    background:#8b2f2f;

    color:#fff;

}
/*======================================
PERSISTENT HOME BUTTON
======================================*/

.global-home-button{

    position:fixed;

    right:22px;

    bottom:22px;

    z-index:1400;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:48px;

    padding:11px 18px;

    border:2px solid rgba(255,255,255,.3);

    border-radius:999px;

    background:var(--forest);

    color:#fff;

    font:inherit;

    font-weight:900;

    letter-spacing:.2px;

    cursor:pointer;

    box-shadow:
        0 10px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.15);

}

.global-home-button:hover{

    transform:translateY(-2px);

    background:var(--forest-deep);

}

.global-home-button:focus-visible{

    outline:3px solid var(--gold);

    outline-offset:3px;

}

.global-home-button[hidden]{

    display:none;

}

.global-home-icon{

    font-size:1.15rem;

    line-height:1;

}

@media(max-width:700px){

    .global-home-button{

        right:14px;

        bottom:84px;

        min-height:46px;

        padding:10px 15px;

        font-size:.9rem;

    }

}
/*======================================
CALENDAR MULTI-DAY EVENT MARKERS
======================================*/

.events-calendar-event-start{

    border-left:5px solid var(--gold);

}

.events-calendar-event-end{

    width:100%;

    margin-top:6px;

    padding:7px 9px;

    border:1px solid rgba(23,61,36,.2);

    border-radius:9px;

    background:#eef3ec;

    color:var(--forest-deep);

    font:inherit;

    font-size:.78rem;

    font-weight:800;

    line-height:1.25;

    text-align:left;

    cursor:pointer;

}

.events-calendar-event-end:hover{

    background:#e3ece0;

}
/*======================================
EVENT SEARCH
======================================*/

.events-search-panel{

    width:100%;

    margin-top:20px;

    padding:18px;

    border:1px solid rgba(23,61,36,.12);

    border-radius:16px;

    background:#f8f5e9;

}

.events-search-label{

    display:block;

    margin-bottom:8px;

    color:var(--forest-deep);

    font-size:.8rem;

    font-weight:900;

    letter-spacing:.6px;

    text-transform:uppercase;

}

.events-search-row{

    display:flex;

    align-items:center;

    gap:10px;

}

.events-search-input-wrap{

    position:relative;

    flex:1;

}

.events-search-icon{

    position:absolute;

    left:13px;

    top:50%;

    transform:translateY(-50%);

    pointer-events:none;

}

.events-search-input{

    width:100%;

    min-height:46px;

    padding:11px 14px 11px 42px;

    border:1px solid rgba(23,61,36,.18);

    border-radius:12px;

    background:#fff;

    color:var(--ink);

    font:inherit;

    outline:none;

}

.events-search-input:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(212,170,34,.14);

}

.events-search-clear{

    min-height:46px;

    padding:10px 16px;

    border:0;

    border-radius:12px;

    background:var(--forest);

    color:#fff;

    font:inherit;

    font-weight:900;

    cursor:pointer;

}

.events-search-summary{

    min-height:20px;

    margin-top:8px;

    color:#67675f;

    font-size:.86rem;

}

@media(max-width:600px){

    .events-search-row{

        align-items:stretch;

        flex-direction:column;

    }

    .events-search-clear{

        width:100%;

    }

}
.events-search-panel{

    margin-bottom:24px;

}

/*======================================
WAC MEMBER GALLERY
======================================*/

.gallery-page{
    width:100%;
}

.gallery-upload-panel{
    margin:24px 0 32px;
    padding:22px;
    border:1px solid rgba(23,61,36,.14);
    border-radius:18px;
    background:#f8f5e9;
}

.gallery-upload-panel[hidden]{
    display:none;
}

.gallery-upload-form{
    display:grid;
    gap:18px;
    margin-top:18px;
}

.gallery-photo-picker{
    display:grid;
    gap:12px;
}

.gallery-photo-picker input[type="file"]{
    width:100%;
    min-height:46px;
    padding:10px;
    border:1px solid rgba(23,61,36,.2);
    border-radius:12px;
    background:#fff;
    font:inherit;
}

.gallery-photo-preview-wrap{
    overflow:hidden;
    border:1px solid rgba(23,61,36,.14);
    border-radius:16px;
    background:#e9ede6;
}

.gallery-photo-preview-wrap[hidden]{
    display:none;
}

.gallery-photo-preview{
    display:block;
    width:100%;
    max-height:480px;
    object-fit:contain;
}

.gallery-display-section{
    margin-top:28px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px,1fr)
        );
    gap:20px;
}

.gallery-grid[hidden]{
    display:none;
}

.gallery-card{
    overflow:hidden;
    border:1px solid rgba(23,61,36,.13);
    border-radius:16px;
    background:#fff;
    box-shadow:
        0 8px 20px
        rgba(0,0,0,.07);
}

.gallery-card-button{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.gallery-card-image{
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    background:#e8ebe6;
}

.gallery-card-details{
    padding:14px 15px 16px;
}

.gallery-card-caption{
    margin:0;
    color:var(--forest-deep);
    font-weight:800;
    line-height:1.35;
}

.gallery-card-meta{
    margin:8px 0 0;
    color:#6c6c64;
    font-size:.84rem;
    line-height:1.4;
}

.gallery-upload-message{
    min-height:24px;
    padding:10px 12px;
    border-radius:10px;
    font-weight:700;
}

.gallery-upload-message-working{
    background:#f2ead0;
    color:#665119;
}

.gallery-upload-message-success{
    background:#e6f1e3;
    color:#234f2d;
}

.gallery-upload-message-error{
    background:#f5e2df;
    color:#7a2822;
}

.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(10,16,11,.9);
}

.gallery-lightbox[hidden]{
    display:none;
}

.gallery-lightbox-content{
    width:min(100%,1000px);
    max-height:92vh;
    overflow:auto;
    border-radius:18px;
    background:#fff;
    box-shadow:
        0 24px 60px
        rgba(0,0,0,.4);
}

.gallery-lightbox-image{
    display:block;
    width:100%;
    max-height:72vh;
    object-fit:contain;
    background:#101410;
}

.gallery-lightbox-details{
    padding:18px 20px 22px;
}

.gallery-lightbox-caption{
    margin:0;
    color:var(--forest-deep);
    font-size:1.06rem;
    font-weight:800;
    line-height:1.45;
}

.gallery-lightbox-meta{
    margin:9px 0 0;
    color:#66665f;
    font-size:.9rem;
}

.gallery-lightbox-close{
    position:fixed;
    top:16px;
    right:20px;
    z-index:5001;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
}

.gallery-lightbox-open{
    overflow:hidden;
}

@media(max-width:700px){

    .gallery-page .page-header{
        align-items:flex-start;
        gap:16px;
    }

    .gallery-page .page-header .primary-button{
        width:100%;
    }

    .gallery-upload-panel{
        padding:17px;
    }

    .gallery-upload-panel .section-heading{
        align-items:flex-start;
        gap:12px;
    }

    .gallery-upload-panel .secondary-button{
        width:100%;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-lightbox{
        padding:10px;
    }

    .gallery-lightbox-content{
        max-height:95vh;
        border-radius:14px;
    }

    .gallery-lightbox-close{
        top:10px;
        right:10px;
    }

}

/*======================================
GALLERY PAGE WIDTH
======================================*/

.gallery-page{
    width:min(100% - 40px, 1200px);
    margin:0 auto;
}

@media(max-width:700px){

    .gallery-page{
        width:min(100% - 24px, 1200px);
    }

}

/*======================================
ADMIN GALLERY APPROVALS
======================================*/

.admin-queue-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:28px 0 14px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(23,61,36,.14);
}

.admin-queue-section-heading h2{
    margin:4px 0 0;
}

.admin-queue-section-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    border-radius:999px;
    background:var(--forest-deep);
    color:#fff;
    font-weight:800;
}

.admin-gallery-card{
    align-items:stretch;
}

.admin-gallery-photo-wrap{
    width:220px;
    min-width:220px;
    overflow:hidden;
    border-radius:14px;
    background:#e8ebe6;
}

.admin-gallery-photo{
    display:block;
    width:100%;
    height:100%;
    min-height:240px;
    object-fit:cover;
    cursor:pointer;
}

.admin-gallery-photo:hover{
    opacity:.92;
}

@media(max-width:760px){

    .admin-queue-section-heading{
        align-items:flex-start;
    }

    .admin-gallery-card{
        display:block;
    }

    .admin-gallery-photo-wrap{
        width:100%;
        min-width:0;
        margin-bottom:16px;
    }

    .admin-gallery-photo{
        width:100%;
        height:auto;
        min-height:0;
        max-height:420px;
        object-fit:contain;
    }

}

/*======================================
ADMIN GALLERY CARD LAYOUT OVERRIDE
======================================*/

.admin-gallery-approval-list{
    display:grid;
    gap:22px;
}

.admin-gallery-card{
    display:block;
    overflow:hidden;
}

.admin-gallery-photo-wrap{
    width:100%;
    min-width:0;
    margin:0;
    overflow:hidden;
    border-radius:14px 14px 0 0;
    background:#e8ebe6;
}

.admin-gallery-photo{
    display:block;
    width:100%;
    height:auto;
    max-height:620px;
    min-height:0;
    object-fit:contain;
    background:#111;
}

.admin-gallery-card .profile-recent-content{
    width:100%;
    padding:20px;
}

.admin-section-description{
    margin:8px 0 0;
    color:#67675f;
    line-height:1.5;
}

.admin-section-controls{
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-gallery-queue-section{
    margin-top:32px;
}

@media(max-width:700px){

    .admin-section-controls{
        width:100%;
        justify-content:space-between;
    }

    .admin-gallery-card .profile-recent-content{
        padding:16px;
    }

    .admin-gallery-photo{
        max-height:480px;
    }

}

/*======================================
PUBLIC GALLERY THUMBNAIL GRID
======================================*/

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

.gallery-card{
    overflow:hidden;
}

.gallery-card-image{
    width:100%;
    height:220px;
    aspect-ratio:auto;
    object-fit:cover;
}

.gallery-card-details{
    padding:12px 14px 14px;
}

.gallery-card-caption{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

@media(max-width:700px){

    .gallery-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap:12px;
    }

    .gallery-card-image{
        height:160px;
    }

    .gallery-card-details{
        padding:10px;
    }

    .gallery-card-meta{
        font-size:.76rem;
    }

}

@media(max-width:430px){

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-card-image{
        height:220px;
    }

}

/* ==========================================================
   HERO BRAND LOCKUP
   ========================================================== */

.hero{
    position:relative;
}

.hero-content{
    position:static;
}

.hero-brand-lockup{
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:5;
    transform:translateX(-50%);
    width:min(90%,700px);
    color:var(--gold);
    text-align:center;
    text-shadow:
        0 2px 8px rgba(0,0,0,.9);
    pointer-events:none;
}

.hero-brand-lockup h1{
    margin:0;
    color:var(--gold);
    font-size:clamp(1rem,1.7vw,1.45rem);
    font-weight:800;
    letter-spacing:.04em;
    line-height:1.15;
    text-transform:none;
}

.hero-brand-year{
    margin-top:5px;
    color:var(--gold);
    font-size:clamp(.65rem,.9vw,.8rem);
    font-weight:800;
    letter-spacing:.22em;
}

@media(max-width:700px){

    .hero-brand-lockup{
        bottom:16px;
        width:90%;
    }

    .hero-brand-lockup h1{
        font-size:1rem;
    }

    .hero-brand-year{
        font-size:.68rem;
    }

}

/* ==========================================================
   HERO BUTTON POSITION
   ========================================================== */

.hero-content{
    position:absolute;
    left:50%;
    bottom:190px;
    z-index:6;
    transform:translateX(-50%);
    width:min(90%,700px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
}

.hero-content .cta-button,
.hero-content .hero-button,
.hero-content .small-button{
    margin:0;
}

.hero-content .scroll-indicator{
    margin-top:14px;
}

@media(max-width:700px){

    .hero-content{
        bottom:170px;
        width:90%;
    }

}
/* ====================================== */
/* Persistent Bottom Navigation */
/* ====================================== */

.global-page-navigation {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 12px;
}

.global-navigation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 52px;
    padding: 13px 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;

    background: #174a2d;
    color: #ffffff;

    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;

    box-shadow:
        0 8px 22px rgba(18, 52, 34, 0.24);

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.global-navigation-button:hover {
    background: #103b23;
    transform: translateY(-2px);

    box-shadow:
        0 10px 26px rgba(18, 52, 34, 0.3);
}

.global-navigation-button:focus-visible {
    outline: 3px solid #d4a72c;
    outline-offset: 3px;
}

.global-navigation-button[hidden] {
    display: none;
}

.global-navigation-icon {
    font-size: 1.15rem;
    font-weight: 900;
}

/* Cabin button uses the primary WAC green */

.global-cabin-button {
    background: #174a2d;
}

/* Keep the Home button visually distinct */

.global-home-button {
    background: #123b25;
}