/*Root*/
:root{
    --txt-col: #333;
    --col-1: rgb(68, 3, 100);
    --col-2: rgba(173, 5, 5, 0.80);
    --col-3: red;
    --col-4: rgba(158, 145, 128, 0.973);
    --col-5: rgba(146, 81, 199, 0.616);
    --col-6: rgb(39, 10, 85);

    --bg-col-1: #faebd0;
    --bg-col-2: rgb(252, 245, 236);
    --bg-col-3: rgb(248, 158, 55);

    
    --shdw-1:4px 4px 6px rgba(44, 15, 92, 0.3);
    --shdw-2:5px 6px 8px rgba(66, 1, 1, 0.63);

    --grd-1:linear-gradient(135deg, var(--bg-col-1) 0%, var(--bg-col-2) 20%, var(--bg-col-3) 100%);
    --grd-2:linear-gradient(135deg, var(--col-1) 0%, var(--col-6) 20%, var(--col-2) 100%);
}


/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Includes padding in width 📏 */
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-col-2);
    overflow-x: hidden; /* Prevents the "ghost width" 👻 */
}

a {
    text-decoration: none;
    color: var(--col-1);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-shadow: var(--shdw-1);
    
}

a:hover{
    color: var(--col-3);
    text-shadow: var(--shdw-2);
}

/* Navigation Container */
nav {
    display: flex;
    justify-content: space-between; /* Logo left, Toggle right ↔️ */
    align-items: center;
    padding: 10px 5px;
    background: white;
    border-bottom: solid 2px var(--col-6);
    width: 100%;
    position: sticky;
    z-index: 1000;
}

/* The Logo - Flexible but constrained */
.logo {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto; /* Allow it to take only what it needs */
    min-width: 0;   /* Allows text to wrap if the screen is tiny 🤏 */
}

.logo a {
    font-size: 1.3rem;
    text-decoration: none;
    font-weight: 800;
    color: var(--col-6);
    white-space: nowrap; /* Keeps name on one line if possible */
}

.sub-title {
    font-size: 0.8rem;
    min-width: 400px;
    font-weight: 600;
    margin-top: -8px;
    padding-left: 25px;
    color: var(--col-5);
    text-shadow: var(--shdw-1);
    transition: all 0.3s ease;
}

.hero-section {
  position: relative;
  width: 100%;
  height: 450px; /* Adjust height as needed */
  background-image: url('/public/images/Banner1.JPG'); /* Ensure path is correct */
  background-size: cover;
  background-position: center;
  box-shadow: #333333a8 0px 5px 10px; /* Adds a subtle shadow for depth */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video {
  position: relative;
  display:block;
  width: auto;
  height: 800px; /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  box-shadow: #333333a8 0px 5px 10px; /* Adds a subtle shadow for depth */
}

.hero{aspect-ratio: 16 / 9;}

/* The Menu Toggle (Hamburger) */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    flex-shrink: 0; /* NEVER let the button disappear 🛡️ */
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background: #333;
    border-radius: 3px;
}

/* The Links - Mobile First (Hidden by default) */
.nav-links {
    display: none; /* Logic: JS will swap this */
    font-weight: 400;
}

/* Active State (Triggered by your JS) */
.nav-links.active {
    display: flex;
    flex-direction: column;
    position: fixed; /* Pulls it out of the logo's way ⚓ */
    top: 0;
    right: 0;
    width: 80vw;    /* Takes 80% of screen width */
    height: 100vh;  /* Full height */
    background: whitesmoke;
    padding: 2rem;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

.nav-links li {
    list-style: none;
    margin-bottom: 1.5rem;
}



/* --- 💻 DESKTOP (Wider than 1024px) --- */
@media (min-width: 1024px) {
 
}

/*Layout*/
.breadcrumb-container { 
    display: flex;
    align-items: center; 
    margin-left: 12px;
    color: var(--col-4);
    background-color: var(--bg-col-2);
    a {
        font-size: 1rem;
        color: var(--col-4);
        font-weight: 500;
        padding: 0 15px; 
        transition: all 0.3s ease;
    }
    padding: 8px 18px; 
    font-weight: 500;
    transition: all 0.3s ease;
}

.container {
    display: grid;
    grid-template-columns: 1fr; /* Desktop layout */
    gap: 15px;
    padding: 50px 25px;
    transition: all 0.3s ease;
}

.sidebar-left, .main-content, .sidebar-right {
    min-height: 100vh;
    padding: 25px 15px;
    margin-bottom: 150px;
    border-radius: 8px;
    box-shadow: var(--shdw-1);
}

.sidebar-left, .sidebar-right { 
    background-color:var(--bg-col-1); 
}

.main-content { 
    background-color:var(--col-1);
    background: var(--grd-1);
    order:1;
}

.sidebar-left{
    display:contents
    /*display: flex;
    flex-direction: column;
    align-items: center;
    order:3;
    gap: 20px;*/
}
#featured-img, 
#featured-desc, 
#yt-iframe, 
#vid-desc {
  order: -1; /* Negative order pulls them to the very top of the grid */
}
#paypal{order: 0;}
#featured-img{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
#featured-desc{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 20px;
}

#featured-desc h4{
    text-align:center;
    font-size:16px;
}

#yt-iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* Keeps the cinematic shape 🎬 */
    border-radius: 8px;
}

.sidebar-left img {
  width: 100%;            /* Force image to take up full container width */
  height: 100%;           /* Force image to take up full container height */
  object-fit: cover;      /* Magic rule: maintains ratio by cropping edges */
  object-position: center; /* Ensures the middle of the image stays visible */
  display: block;         /* Removes the tiny default gap at the bottom of images */

}

.sidebar-right {
    order:2;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.sidebar-right a {
    display: block;
    margin: 15px 15px;
    line-height: 1.8;
    word-wrap: break-word; /* Prevents long words from leaking out 🌊 */
    text-decoration: none;
}


/* RESPONSIVE DESIGN - desktop only*/
@media (min-width: 1125px) {
    .sidebar-left{display: block;}
    .container {
        display: grid;
        grid-template-columns: 20% 1fr 20%;
        max-width : 1700px;
        margin-left: auto;
        margin-right: auto;
        gap: 30px;
        align-items: start; /* Prevents sidebars from stretching to footer height */
    }
    #featured-img{width: 100%;}
    #featured-desc h4{font-size:20px;}

    /* Hide the hamburger icon */
    .menu-toggle {
        display: none;
    }

    /* 2. Force the menu to show and lay out horizontally */
    .nav-links {
        display: flex !important; /* Overrides 'display: none' */
        flex-direction: row;
        position: static;         /* Put it back in the navbar */
        height: auto;
        padding-top: 15px;
        background: transparent;
    }
    .nav-links li {margin-left: 20px;}
    .logo a {font-size: 2rem;}
    .sub-title{font-size: 1.2rem;}
    .breadcrumb-container { a {font-size: 1.3rem;} }
    .sidebar-left{order: 1;}
    .main-content{order: 2;}
    .sidebar-right{order: 3;}
}

/*cards*/

.info-card { 
    width: 100% !important;
    text-align: left;
    a {color: rgb(80, 78, 78);}
    h4 {font-size: 18px; margin-bottom: 15px;}
    p {font-size: 14px;}
    padding : 0.5rem;
    margin-bottom: 15px !important;
    border-left: 4px solid red; 
    box-shadow: var(--shdw-2);
    background-color: rgb(253, 247, 240); 
    border-radius: 8px;
    transition: all 0.3s ease;

}

.card { 
    background: rgb(253, 247, 240); 
    margin-top: 1rem;
    padding: 0.8rem 0.5rem;
    border-radius: 8px; 
    box-shadow: var(--shdw-2);
    margin-bottom: 15px !important;
    width: 100% !important;
}

.content-link { 
    width: 100% !important;
    text-align: left;
    a {color: #333; font-size: 16px; margin-left: 25px; margin-bottom: 25px;}
    padding : 0.5rem;
    margin-top:15px !important;
    margin-bottom:25px !important;
    border-left: 4px solid red; 
    box-shadow: var(--shdw-1);
    background-color: var(--bg-col-1); 
    border-radius: 8px;
    transition: all 0.3s ease;
}
.content-link a:hover {color: var(--col-3); text-shadow: var(--shdw-2);}

/* Custom styling for the Google Doc content*/
#new-content div {
        padding: 2%;
        border-radius: 8px;
        margin: 0;
    }

@media screen and (min-width: 768px) {
    #new-content div {
        padding: 10%;
        max-width: 100%;
    }
}


/*footer*/   
#footer { 
    background: antiquewhite; 
    max-height: 100px;
    padding-top: 25px !important;
    border-top: solid 1px rgb(83, 74, 74);
    text-align: center; 
    margin-top: 50px; 
    transition: all 0.3s ease;
}

.footer-link { 
    display: inline-flex; 
    align-items:center; 
    gap: 5px; 
    margin: 0 25px;
}

/* Back to TOP  */
#back {
    position: fixed;
    bottom: 15px;
    right: 30px;
    background:var(--col-1);
    color: white;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

#back a {
    color: white;
    text-decoration: none;
}
#back:hover {
    background:var(--col-5);
    transform: scale(1.1);
}   
#back.hide {
    opacity: 0;
    pointer-events: none;
}


/*Seperators*/
.s20 { height: 20px; }
.s50 { height: 50px; }
.s100 { height: 100px; }



 /*Buttons*/

.contact-btn { 
    margin-top: 20px !important;
    background: var(--bg-col-1); 
    padding: 8px 18px; 
    border: #01142f solid 0.1rem;
    border-radius: 8px; 
    font-weight: 700;
    transition: all 0.3s ease;
}

.contact-btn:hover { 
    background: rgb(250, 235, 215); 
}


/* Utility to hide things */
.hide {
    display: none !important;
}