/* --- 1. VARIABLES (The Theme) --- */
/*:root {*/
/*    --primary-color: #093C71;    /* Blue*/
/*    --accent-color: #FF9A16;     /* Orange (Good for buttons) */
/*    /*--bg-light: #f4f6f7;*/         /* Light Grey background */
/*    --text-color: #333333;*/
/*    --white: #ffffff;*/
/*    --radius: 8px;               /* Rounded corners */
/*    --shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle 3D effect */
/*}*/

/* New fonts*/
@font-face {
    font-family: 'Feeling Passionate';
    src: url('fonts/feeling_passionate.ttf') format('truetype'); 
    font-display: swap;
}

@font-face {
    font-family: 'Life Savers Bold';
    src: url('fonts/LifeSaversBold.ttf') format('truetype');
    font-display: swap;
}

/* --- 1. VARIABLES (Dark Mode Default) --- */
:root {
    --bg-light: #28292d;          /* Default Dark Background */
    --primary-color: #185da6cf;
    --accent-color: #FF9A16;
    --text-color: #e0e0e0;        /* Default Light Text */
    --bg-card: #1E1E1E;          /* Dark Grey Cards */
    --radius: 8px;               /* Rounded corners */
    --shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle 3D effect */
    --bg-hglt: #262c37;         /* The background of a highlight box*/
    --bd-hglt: #a0b9e5;         /* The border of the highlight box*/
    --tree-bg: url('images/tree.svg');      /* Adds the tree background*/
    --team-img: url('images/FOE_Team_d.webp'); /* Adds the correct color photo*/
}

/* --- LIGHT MODE OVERRIDE --- */
[data-theme="light"] {
    --bg-light: #ffffff;
    --primary-color: #093C71;
    --accent-color: #FF9A16;
    --text-color: #333333;
    --bg-card: #f4f6f7;
    --radius: 8px;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
    --bg-hglt: #eceff4;
    --bd-hglt: #a0b9e5;
    --team-img: url('images/FOE_Team_l.webp');
    --tree-bg: url('images/tree.svg');
}

/* GLOBAL BACKGROUND WATERMARK */
body::before {
    content: "";
    
    /* "fixed" means the tree stays put while the text scrolls over it.
       If you want the tree to scroll away, change this to "absolute". */
    position: fixed;
    top: 0;
    left: 0;

    /* Force it to fill the entire browser window */
    width: 100vw; 
    height: 100vh;
    
    background-image: var(--tree-bg);
    
    /* Positioning */
    background-repeat: no-repeat;
    background-position: 50% 50%; /* Or 'bottom right' looks good for trees */
    background-size: 50%;      /* Or 'contain' if you want to see the whole tree */
    
    /* The Fade */
    opacity: 0.1; /* Keep this very low (5%) so text is readable! */
    z-index: -1;   /* Send to back */
    
    /* Safety: Ensures clicks pass through the image to the buttons below */
    pointer-events: none; 
}

/* --- 2. RESET & BASE --- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-light);
}

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

h1, h2, h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-family: 'Life Savers Bold', sans-serif;
    letter-spacing: 1px;
    font-weight: bold;
}

/* --- 3. LAYOUT UTILITIES --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0;
}

.section-tight {
    padding-top: 10px;
}

.bg-light {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    padding: 40px;
}

/* --- 4. RESPONSIVE GRID --- */
.row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.column {
    flex: 1;
    min-width: 300px;
}

.calendar {
    flex: 1 1 0px;
    min-width: 330px;
    max-width: 800px;
    height: 330px;
}

/* --- 5. COMPONENTS --- */

/* Navbar */
.navbar {
    background-color: var(--primary-color);
    color: var(--text-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

/* Navbar Logo Sizing */
.nav-logo {
    height: 50px; /* Adjusted height to fit standard navbars */
    width: auto;  /* Maintains aspect ratio */
    
    /* Optional: If the logo is too dark against the black navbar, 
       uncomment the next line to give it a little white pill background */
    /* background: rgba(255, 255, 255, 0.9); padding: 5px; border-radius: 4px; */
    
    /* Ensure no filters are messing with your colors */
    filter: none !important; 
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    opacity: 1;
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
}

/* Cards */
.card {
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s;
}

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

/* Hero Section */
.hero {
    background: linear-gradient(rgba(44, 62, 80, 0.5), rgba(44, 62, 80, 0.5)),
    url('images/banner.jpeg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 100px 20px;
}

.hero h1 {
    color: white;
    font-family: 'Feeling Passionate', cursive;
    font-weight: normal;
    font-size: 4rem;
    margin-bottom: 20px;
}

/* Team Photo Section*/
.team-photo {

    background-image: var(--team-img);
    
    /* Forces the whole image to fit inside the box without cropping */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: top center;
    
    width: 100%;
    
    /* The actual width and height of the image file.
       This tells the div to scale its height dynamically as column flexes. */
    aspect-ratio: 1003 / 805;
    transition: transform 0.3s ease-in-out;
    
    display: block;
}

.team-photo:hover {
    transform: scale(1.025);
}

/* Info Boxes */
.info-box {
    margin-bottom: 20px;
}

.highlight-box {
    background: var(--bg-hglt);
    padding: 20px;
    border-left: 5px solid var(--bd-hglt);
    border-radius: 4px;
}

.rounded-img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Theme button*/
.theme-toggle {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: 10px;
}

.theme-toggle:hover {
    background: var(--accent-color);
    border-color: white;
    color: #333333;
}

/* Footer */
footer {
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
    font-size: 0.8rem;
}

/* --- 6. THE LOADER CURTAIN --- */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-light);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out;
}

/* Helper to hide it via JS */
.loader-hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- PASTED FROM UIVERSE (With minor tweaks) --- */
.three-body {
 --uib-size: 50px;
 --uib-speed: 0.8s;
 position: relative;
 display: inline-block;
 height: var(--uib-size);
 width: var(--uib-size);
 animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
 position: absolute;
 height: 100%;
 width: 30%;
}

.three-body__dot:after {
 content: '';
 position: absolute;
 height: 0%;
 width: 100%;
 padding-bottom: 100%;
 background-color: var(--accent-color);
 border-radius: 50%;
}

.three-body__dot:nth-child(1) {
 bottom: 5%;
 left: 0;
 transform: rotate(60deg);
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite ease-in-out;
 animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
 bottom: 5%;
 right: 0;
 transform: rotate(-60deg);
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite
    calc(var(--uib-speed) * -0.15) ease-in-out;
}

.three-body__dot:nth-child(3) {
 bottom: -5%;
 left: 0;
 transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
 top: 0;
 left: 0;
 animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}

@keyframes wobble1 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }
 50% {
  transform: translateY(-66%) scale(0.65);
  opacity: 0.8;
 }
}

@keyframes wobble2 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }
 50% {
  transform: translateY(66%) scale(0.65);
  opacity: 0.8;
 }
}