/**
 * 4D Greens Website - Main Stylesheet
 * 
 * This file contains all the styles for the website.
 */

/* Variables */
:root {
    --primary-color: #2c8e3e;
    --primary-dark: #1e6e2e;
    --primary-light: #4cae4c;
    --secondary-color: #f8f9fa;
    --text-color: #333;
    --light-text: #f8f9fa;
    --dark-text: #212529;
    --border-color: #dee2e6;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body {
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f8f9fa;
    overflow-x: hidden;

    /* Use flexbox layout on the body so that the footer can be
       automatically pushed to the bottom of the viewport when there
       isn't enough content. This addresses the issue where pages
       like the events page display the footer halfway up the screen. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
     /* Ensure body doesn't create stacking context above header/ticker */
     position: relative;
     z-index: auto;
}

/* Main content area - pushes footer to bottom */
main,
.container:not(footer .container),
body > .container:first-of-type {
    flex: 1 0 auto;
     /* Keep main content below sticky header/ticker */
     position: relative;
     z-index: 1;
}

/* Footer sticks to bottom */
footer,
.site-footer,
.bg-dark.py-4 {
    flex-shrink: 0;
    margin-top: auto;
}

/*
 * Card styling
 * Apply a consistent look to Bootstrap cards across the site.  Use a subtle
 * gradient background, rounded corners and a soft shadow.  This helps
 * unify the appearance of event, news, and other cards.
 */
.card {
    /* Subtle transparency with crisp stroke and 3D depth */
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(28, 40, 34, 0.15); /* stroke-like border */
    border-radius: 0.75rem;
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.10), /* outer depth */
      0 6px 12px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8), /* top highlight */
      inset 0 -1px 0 rgba(0, 0, 0, 0.04); /* bottom shade */
    backdrop-filter: saturate(110%) blur(2px);
        /* Ensure cards stay in document flow without creating stacking context */
        position: relative;
        z-index: auto;
}

/* Constrain featured cards to a comfortable width and center them */
.card-wide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem 0.75rem 0 0;
}
.card-body {
    padding: 1.25rem;
}
.card-footer {
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Consistent card heading style */
.card h1, .card h2, .card h3, .card .card-title {
    color: #333;
    font-weight: 700;
}

/*
 * Smooth page transition styles
 *
 * A subtle fade effect is used when navigating between pages. The body
 * element starts hidden and fades in once the page has finished loading. When
 * navigating to another internal page, the current page fades out before
 * redirecting. The `.no-transition` class can be added to links that should
 * bypass the effect (for example, anchor links or AJAX triggers).
 */
.page-transition {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Applied after the page has fully loaded to reveal content */
.page-transition.page-loaded {
    opacity: 1;
}

/* Randomised page transition effects */
/* Fade effect (default) */
.page-transition.fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.page-transition.fade.page-loaded {
    opacity: 1;
}
/* Slide effect: slides in from the right */
.page-transition.slide {
    transform: translateX(20px);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.page-transition.slide.page-loaded {
    transform: translateX(0);
    opacity: 1;
}
/* Zoom effect: zooms in */
.page-transition.zoom {
    transform: scale(0.98);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.page-transition.zoom.page-loaded {
    transform: scale(1);
    opacity: 1;
}

/* Seasonal weather effects container */
#seasonal-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Snowflake animation */
.snowflake {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    opacity: 0.8;
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes snowfall {
    0% { transform: translateY(-10px) translateX(0); opacity: 1; }
    100% { transform: translateY(100vh) translateX(50px); opacity: 0.2; }
}

/* Raindrop animation */
.raindrop {
    position: absolute;
    width: 2px;
    height: 10px;
    background: rgba(173, 216, 230, 0.8);
    border-radius: 1px;
    opacity: 0.7;
    animation-name: rainfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rainfall {
    0% { transform: translateY(-10px); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0.3; }
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Header */
.site-header {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

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

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 60px;
    margin-right: 15px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    /* Add space between the logo image and text */
    margin-left: 8px;
}

.logo-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
    line-height: 1.2;
    text-shadow: 
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        1px 1px 0 #000000,
        0 0 3px rgba(0, 0, 0, 0.5);
}

.logo-nickname {
    font-size: 1rem;
    color: #ffffff !important;
}

/* Navigation */
.main-nav {
    position: relative;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin-left: 20px;
    position: relative;
}

.nav-menu a {
    color: var(--text-color);
    font-weight: 500;
    padding: 10px 0;
    display: block;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-menu a:hover,
.nav-menu li.active a {
    color: var(--primary-color);
}

/* Force mobile nav menu to be hidden by default.  Some browsers may
   ignore the @media query if the CSS is loaded before window width
   is known; adding a default rule ensures the menu is not shown
   until explicitly activated. */
.nav-menu {
    display: none;
}
.nav-menu.active {
    display: flex;
}

/* Mobile navigation: hide the nav menu by default and show it when active */
@media (max-width: 991.98px) {
    .main-nav .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--primary-color);
        margin-top: 10px;
        padding: 10px 15px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .main-nav .nav-menu.active {
        display: flex;
    }
    .main-nav .nav-menu li {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .main-nav .nav-menu li:last-child {
        margin-bottom: 0;
    }

    /* Ensure mobile menu toggle button is visible on small screens and hidden on large screens */
    .menu-toggle {
        display: inline-block;
    }
}

/* Desktop navigation: show menu and hide the hamburger */
@media (min-width: 992px) {
    .main-nav .nav-menu {
        display: flex !important;
        flex-direction: row;
        width: auto;
        background: transparent;
        margin-top: 0;
        padding: 0;
    }
    .main-nav .nav-menu li {
        margin-left: 20px;
        margin-bottom: 0;
    }
    .main-nav .menu-toggle {
        display: none;
    }
}
}

/*
 * Position the header info (date, time and weather) absolutely in the
 * top‑right corner of the header.  On larger screens it appears
 * pinned to the top right; on small screens it hides completely.
 */
.site-header .header-inner {
    position: relative;
}
#header-info {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.9rem;
    padding: 5px 10px;
    z-index: 10;
}
#header-info i {
    margin-right: 4px;
}
/* Hide the header info entirely on small screens */
@media (max-width: 767.98px) {
    #header-info {
        display: none;
    }
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* News Ticker */
.news-ticker-container {
    background-color: var(--primary-color);
    color: white;
    position: relative;
    overflow: hidden;
    height: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ticker-overlay-left,
.ticker-overlay-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50px;
    z-index: 2;
    pointer-events: none;
}

.ticker-overlay-left {
    left: 0;
    background: linear-gradient(to right, var(--primary-color), transparent);
}

.ticker-overlay-right {
    right: 0;
    background: linear-gradient(to left, var(--primary-color), transparent);
}

.news-ticker-header {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    position: relative;
    z-index: 3;
}

.news-ticker-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.news-ticker-nav {
    display: flex;
    margin-left: 15px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.news-ticker-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.news-ticker-nav-item {
    color: rgba(255, 255, 255, 0.7);
    padding: 0 10px;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.news-ticker-nav-item:hover,
.news-ticker-nav-item.active {
    color: white;
}

.news-ticker-content {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 100%;
    overflow: hidden;
}

.ticker-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
}

.ticker-section.active {
    display: flex;
}

.ticker-items {
    display: flex;
    animation: ticker 30s linear infinite;
    white-space: nowrap;
}

.ticker-item {
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.ticker-item a {
    color: white;
    text-decoration: none;
}

.ticker-item a:hover {
    text-decoration: underline;
}

.ticker-item .time {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-right: 10px;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Flash animation for featured items */
@keyframes flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

Flash {
    animation: flash 2s infinite;
    font-weight: bold;
}

/* Hero Section */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 100px 0;
    position: relative;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            rgba(72, 255, 161, 0.28) 0%,
            rgba(136, 255, 204, 0.92) 18%,
            rgba(221, 255, 238, 1) 50%,
            rgba(136, 255, 204, 0.92) 82%,
            rgba(72, 255, 161, 0.28) 100%
        );
    box-shadow:
        0 0 10px rgba(101, 255, 176, 0.48),
        0 0 22px rgba(101, 255, 176, 0.24);
    pointer-events: none;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero .btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 30px;
    font-size: 1.1rem;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

.hero .btn:hover {
    background-color: var(--primary-dark);
    text-decoration: none;
}

/* Content Sections */
.site-content {
    padding: 50px 0;
}

.welcome-section {
    text-align: center;
    margin-bottom: 50px;
}

.welcome-section h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

.welcome-section p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Features */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.feature {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
}

.feature-inner {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

/* Social Section */
.social-section {
    background-color: #f8f9fa;
    padding: 50px 0;
    text-align: center;
}

.social-section h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.social-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.social-icon:hover {
    transform: translateY(-5px);
    color: var(--primary-color);
    text-decoration: none;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(44, 142, 62, 0.25);
}

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

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Flash Messages */
.flash-messages {
    margin-top: 20px;
}

/* Footer */
footer {
    background-color: #343a40;
    color: white;
    padding: 50px 0 20px;
}

footer h5 {
    color: var(--primary-light);
    margin-bottom: 20px;
    font-weight: 600;
}

footer a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

footer a:hover {
    color: white;
    text-decoration: none;
}

footer hr {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 30px 0;
}

footer .list-inline-item:not(:last-child) {
    margin-right: 15px;
}

footer .list-inline-item a {
    font-size: 1.2rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .features {
        flex-direction: column;
        align-items: center;
    }
    
    .feature {
        width: 100%;
        max-width: 500px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .nav-menu {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 250px;
        flex-direction: column;
        background-color: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 20px;
        transition: right 0.3s ease;
            z-index: 4400;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu li {
        margin: 0 0 15px 0;
    }
    
    .menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .news-ticker-header {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 10px 15px;
    }
    
    .news-ticker-title {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding-right: 0;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    
    .news-ticker-nav {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .news-ticker-container {
        height: 80px;
    }
    
    .news-ticker-content {
        left: 15px;
        top: 50px;
    }
    
    .hero {
        padding: 80px 0;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .logo img {
        height: 40px;
    }
    
    .logo-title {
        font-size: 1.2rem;
        color: #ffffff !important;
    }
    
    .logo-nickname {
        font-size: 0.8rem;
        color: #ffffff !important;
    }
    
    .hero {
        padding: 60px 0;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .social-icon i {
        font-size: 1.5rem;
    }
    
    .social-icon span {
        font-size: 0.8rem;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Utility Classes */
.mt-2 {
    margin-top: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

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

.text-md-right {
    text-align: right;
}

@media (max-width: 768px) {
    .text-md-right {
        text-align: center;
    }
}

/* Login & Registration Forms */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 20px;
}

.card-body {
    padding: 30px;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    padding: 15px;
}

/* Password Strength Meter */
.password-strength-meter {
    margin-top: 5px;
}

.password-strength-text {
    font-size: 0.8rem;
    margin-top: 5px;
}