/* --- CSS STYLING --- */
        :root {
            --primary: #CECECE;
            --accent: #767676;
            --bg: #151515;
            --white: #BABABA;
			--grey: #181818;
            --header-height: 80px; 
        }

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

        body {
            body {
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
}
            background-color: var(--bg);
            color: var(--grey);
            line-height: 1.6;
            padding-top: var(--header-height); 
			
        }

/* This forces the font onto every single element */
* {
    font-family: 'Josefin Sans', sans-serif !important;
}

/* Reset the icons so they don't break from the force-font above */
.fa, .fas, .far, .fa-solid, .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
}

		
/* Increase spacing between characters */
p {
letter-spacing: 0.3px;
line-height:30px;
}
        /* --- UPDATED HEADER CSS --- */
        header {
            background: var(--grey);
            height: var(--header-height); 
            padding: 0 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        /* Container for Logo + Text */
        .brand-link {
            display: flex;
            align-items: center;
            text-decoration: none; /* Removes underline from title if it's a link */
            gap: 15px; /* Space between logo and text */
        }

        .main-logo {
            height: 55px; 
            width: auto;
            display: block;
        }

        .site-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: 1px;
            text-transform: lowercase;
        }
		
.video-container {
  /* Optional: Limit container width (e.g., 1200px on large screens) */
  max-width: 1200px;
  margin: 0 auto; /* Center container */
  padding: 20px;
}
 
.video-container video {
  width: 100%; /* Fit container width */
  height: auto; /* Auto-calculate height to preserve aspect ratio */
  display: block; /* Remove inline spacing artifacts */
}


	 nav a:link { 
            margin-left: 25px; 
            text-decoration: none; 
            color: var(--primary); 
            font-weight: 600; 
            transition: color 0.2s ease;
        }
        
        nav a:hover { color: var(--accent); 
		text-decoration:underline;}
		 
        nav a:visited { color: var(--primary); }
		
		
		.update-box {
    margin-top: 15px;
    border-top: 1px dashed var(--primary);
    padding-top: 10px;
    opacity: 0.9; /* Makes it look like secondary info */
}
	hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(186, 186, 186, 0), rgba(186, 186, 186, 0.85), rgba(186, 186, 186, 0));
    margin: 0 20px 0; /* Added margin top/bottom for spacing */
}
		
		/* Style for the preview images in the blog feed */
.blog-preview-img {
    width: 100%;
    height: 250px;       /* Fixed height for uniformity */
    object-fit: cover;   /* Crops image to fill the area without stretching */
    border-radius: 4px;  /* Matches your post card's rounded corners */
    display: block;
    transition: opacity 0.3s ease;
}

.blog-preview-img:hover {
    opacity: 0.8;        /* Subtle feedback when hovering the image */
}

/* Adds a bit of breathing room between entries */
.blog-entry {
    margin-bottom: 20px;
}
		
		
		/* Base link style */
a {
  font-family: 'Helvetica Neue', Josefin Sans, sans-serif, Arial;
    color: var(--grey);
}

/* Unvisited */
a:link {
  color: var(--grey);
text-decoration:underline;
}

/* Visited */
a:visited {
text-decoration:underline;
  color: var(--grey);
}

/* Hover */
a:hover {
	text-decoration:none;
  color: #5C5C5C;
}


		 h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: 1px;
        
        }

        nav {
            display: flex;
            align-items: center;
			 color: var(--primary); 
        }

       

        /* --- GALLERY & BLOG STYLES (TRIMMED FOR BREVITY) --- */
        .container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
        
		
		.hero {
    position: relative;
    height: 40vh; /* Adjusted height for better visibility */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #000;
}

.hero-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* This creates the smooth 1.5 second fade */
    transition: opacity 1.5s ease-in-out;
}

/* Ensure the text stays above the images */
.hero-content {
    position: relative;
    z-index: 10;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Overlay to keep text readable */
.hero-layer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); 
}
		
		.blog-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 50px; }
        .blog-post { background: #F1F1F1; padding: 20px; border-radius: 8px; }
        .blog-post img { width: 100%; border-radius: 5px; }

        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
        .gallery-item { height: 200px; overflow: hidden; border-radius: 8px; cursor: pointer; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
        .gallery-item:hover img { transform: scale(1.05); }

        #lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center; }
        #lightbox img { max-width: 85%; max-height: 85%; border: 3px solid white; }
        .close-btn { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; }

       footer {
    background: var(--grey); /* Matches your #181818 variable */
    color: var(--white);
    padding: 40px 20px;
    margin-top: 50px;
    width: 100%;           /* Ensure it hits the edges */
    text-align: center;
    clear: both;           /* Prevents grid/sidebar overlap */
}

footer a {
    color: #FFFFFF !important; /* Forces the link to be white */
    text-decoration: underline; 
}

footer a:hover {
    color: var(--primary); /* Optional: adds a hover effect */
    text-decoration: none;
}

        @media (max-width: 768px) {
            header { flex-direction: column; height: auto; padding: 15px; }
            .brand-link { margin-bottom: 10px; }
            .blog-grid { grid-template-columns: 1fr; }
        }
		
		#backToTopBtn {
  display: none;          /* Hidden by default */
  position: fixed;        /* Fixed position */
  bottom: 20px;           /* 20px from the bottom */
  right: 30px;            /* 30px from the right */
  z-index: 99;            /* Make sure it stays on top */
  border: none;
  outline: none;
  background-color: #555; /* Button color */
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

/* Enables smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}