:root {
    --background-color: #000;
    --nav-color : #ffef78;
    --header-title-color: #de1173;
    --header-sub-title-color: #f3edc2;
    --main-background-color: #000;
    --footer-background-color: #52c32f;
    --h3-background-color: #c1fbaf;
    --nav-link-color : #ffffff;
    --nav-link-color-hover : #e0ffa6;
    --nav-link-color-visited : #fff;
    --menu-link-color : #1758c0;
    --menu-link-hover-color : #367ef0;
}

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

html, body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    background: var(--background-color);
}

.hidden {
    display: none;
}

header {
    height: 600px;
}


header .hero {
    position: relative;
    display: flex;
    background-image: url('./assets/flag_4.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 600px;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    margin: auto;
}

header .hero::after {
    content: "";
    background-color: #0000003d;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 600px;
    width: 100%;
}


header .hero  h1{ 
    color: #fff;
    font-size: 80px;
    z-index: 3;
}

/* hamburger  */

.hamburger-icon {
    display: none;
    position: absolute;
    top: 0;
    left : 0;
    z-index: 4;
    padding: 10px;
    cursor: pointer;
}

.hamburger-icon img {
    width: 60px;
    height: 60px;
}

.hamburger-menu {
    position: absolute;
    top: 80px;
    left : 0;
    z-index: 4;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    border-radius: 10px;
}


/* Link styles for a white or light panel background */

/* 1. Default (Unvisited) Link Style - High contrast on white */
.hamburger-menu a:link {
    color: #1a73e8; /* Standard Google Blue for high visibility */
    text-decoration: none; /* Remove underline by default */
    transition: color 0.2s ease-in-out;
}

/* 2. Visited Link Style - Distinct but still legible */
.hamburger-menu a:visited {
    color: #1a73e8; /* A darker plum/purple color */
    text-decoration: none; /* Remove underline by default */
}

/* 3. HOVER State (MUST come after :visited to override it) */
.hamburger-menu a:hover {
    color: #1558b3; /* Slightly darker blue than :link */
    text-decoration: none; /* Remove underline by default */
}

/* 4. Active State (When the link is being clicked) */
.hamburger-menu a:active {
    color: #0d47a1; /* Very dark blue for a "pressed" effect */
    text-decoration: none; /* Remove underline by default */
}

/* 5. Focus State (Accessibility for keyboard users) */
.hamburger-menu a:focus {
    outline: 2px solid #ffcc00; /* Bright yellow outline */
    outline-offset: 2px;
    text-decoration: none; /* Remove underline by default */
}

/* NAV  */

nav ul {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style-type: none;
}

nav ul a {
    text-decoration: none;
    color: var(--nav-link-color);
}

nav ul a:visited {
    color: var(--nav-link-color-visited);
}

nav ul a:hover {
    color: var(--nav-link-color-hover);
}

/* LAYOUT  */

.row {
    display: flex;
    flex-direction: row;
}

.card img {
    width: 80%;
    margin-left: 10%;
    border-radius: 10px;
}

.img-with-name {
    width: 80%;
    position: relative;
}

.img-with-name h2 {
    position: absolute;
    color: #fff;
    bottom: 10px;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

form {
    margin-left: 10%;
    margin-right: 10%;
}

form h2 {
    color: #fff;
    text-align: center;
}

form .form-group {
    color: #fff;
    display: flex;
    flex-direction: row;
}


form .form-group {
    margin: 10px;
}

form .form-group  label {
    width: 50%;
}

form .form-group input {
    width: 50%;
    margin: 10px;
    height: 30px;
}

form .form-group textarea {
    width: 50%;
    margin: 10px;
    height: 200px;
    resize: none;
}

form .form-group .photo-upload {
    display: flex;
    flex-direction: column;
    width: 50%;
}

form .checkbox-group {
    color: #fff;
}

form button {
    margin: 20px 0;
}

/* BUTTONS  */

.dark-button {
    /* 1. Appearance */
    background-color: #007bff; /* Vibrant blue is highly visible on black */
    color: #ffffff;           /* Pure white text for maximum contrast */
    border: 2px solid #007bff; /* Solid border matches background for clean look */
    border-radius: 6px;        /* Slightly rounded corners */
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* 2. Transition for Smoothness */
    transition: all 0.3s ease; /* Apply smooth transitions to all changes */

    /* 3. Ensure inline-block for proper padding/margin handling */
    display: inline-block;
}

/* Hover State (Mouse over the button) */
.dark-button:hover {
    background-color: #0056b3; /* Darker blue for a pressed/activated look */
    border-color: #0056b3;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6); /* Subtle glow effect for highlight */
}

/* Active State (When the button is being clicked) */
.dark-button:active {
    background-color: #004085; /* Even darker blue for a "click-down" effect */
    transform: translateY(1px); /* Slight downward shift for tactile feel */
}

/* Focus State (Important for keyboard navigation/accessibility) */
.dark-button:focus {
    /* Standard accessible focus indicator */
    outline: none; /* Remove default browser outline */
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.5); /* Custom bright focus ring */
}

/* Disabled State (If the button is temporarily inactive) */
.dark-button:disabled {
    background-color: #343a40; /* Darker, subdued color */
    border-color: #343a40;
    color: #b8b8b8;
    cursor: not-allowed;
    opacity: 0.7;
}


/* CSS for Small Calendar Navigation Arrows */

.cal-nav-arrow {
    /* 1. Reset and Sizing */
    justify-content: center;
    align-items: center;
    width: 30px;        /* Fixed width */
    height: 30px;       /* Fixed height */
    padding: 0;
    margin: 0 4px;      /* Small gap between the arrow buttons */
    
    /* 2. Appearance */
    background-color: transparent; /* Start with no background color */
    color: #4A90E2;              /* Primary blue color for the arrow text */
    border: 1px solid #ddd;      /* Light gray border for definition */
    border-radius: 50%;          /* Makes the button perfectly circular */
    font-size: 18px;             /* Ensures the character is visible */
    font-weight: bold;
    line-height: 1;              /* Helps center the text vertically */
    cursor: pointer;
    
    /* 3. Smooth Transitions */
    transition: all 0.2s ease;
}

/* Hover State: Clear visual feedback */
.cal-nav-arrow:hover {
    background-color: #4A90E2; /* Fill the circle with the blue color */
    color: #ffffff;           /* Change text to white for high contrast */
    border-color: #4A90E2;    /* Match border to the new background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle lift effect */
}

/* Active State: "Pressing" effect */
.cal-nav-arrow:active {
    transform: scale(0.95); /* Shrinks slightly when clicked */
}

/* Focus State: Accessibility */
.cal-nav-arrow:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5); /* Blue glow focus ring */
}


/* LINKS  */
a {
    /* High-contrast color for visibility */
    color: #00ffff; /* Bright/Electric Cyan/Blue */
    text-decoration: none; /* Removes the distracting underline by default */
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out; /* Smooth transition for visual effect */
}

/* Visited links (optional: keeps them distinct but still bright) */
a:visited {
    color: #9932cc; /* Medium Orchid/Purple - still bright, but distinct */
}

/* Hover state (when the mouse is over the link) */
a:hover {
    color: #ffffff; /* Pure White - offers maximum contrast */
    text-decoration: underline; /* Adds underline back on hover for clear interaction feedback */
}

/* Active state (when the link is being clicked) */
a:active {
    color: #ff4500; /* OrangeRed - a clear "click" feedback color */
}

/* Focus state (important for keyboard accessibility) */
a:focus {
    /* Use a clear outline for keyboard users, adhering to accessibility standards */
    outline: 2px solid #ffff00; /* Bright Yellow outline */
    outline-offset: 2px;
}

/* .card {
    position: relative;
} */



/* DIALOGS */

.page-overlay {
    /* 1. Positioning */
    position: fixed; /* Crucial: Fixes the element relative to the viewport */
    top: 0;          /* Start at the very top of the screen */
    left: 0;         /* Start at the very left of the screen */
    
    /* 2. Dimensions */
    width: 100%;     /* Extend across the entire width of the viewport */
    height: 100%;    /* Extend across the entire height of the viewport */
    
    /* 3. Appearance (Semi-Transparent Dark) */
    background-color: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */
    
    /* 4. Layering */
    /* Ensures the overlay sits on top of all other content */
    z-index: 100; 
    
    /* 5. Optional: If you want to center content within the overlay */
    display: flex;
    justify-content: center; /* Horizontally center content */
    align-items: center;     /* Vertically center content */
}


.page-overlay.hidden {
    display: none;
}

.terms-container.hidden {
    display: none;
}

.terms-container {
    display: flex;
    position: fixed;
    top: -200px;
    z-index: 200;
    height: 80vh;
    width: 80%;
    margin: 20% 10%;
    background-color: #fff;
    border-radius: 10px;
}

.terms {
    background-color: #fff;
    position: absolute;
    /* top: -400px; */
    /* z-index: 200; */
    height: 96%;
    margin: 20px 0;
    overflow-y: scroll;
    background: #fffef2;
}

.terms p {
    color: #000;
}

.terms h1, h2, h3 {
    margin: 0 10%;
}


.terms li {
    color: #000;
}

.terms hr {
    width: 60%;
    margin: 10px 20%;
}

.terms button {
    margin: 10px 10%;
}


/* EVENTS CALENDAR */

.events-container {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: 10px 10%;
    border: 4px solid #fff;
    border-radius: 10px;
    padding: 20px;
}


.events-container .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 10px;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px;
}

.selected-event .card {
    display: flex;
    
}

.events-container .card.solid {
    background: #fff;
    
}

.events-container .card.solid  p {
    color: #000;
}

#events-calendar {
    color: #fff;
    height: 200px;
}

#events-calendar .month-selector {
    display: flex;
    justify-content: center;
}

#events-calendar th {
    padding: 2px;
}



/* 
SECTIONS */

.section-head {
    color: #fff;
    margin-top: 100px;
    margin-left: 10%;
    margin-bottom: 40px;
    font-size: 80px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-shadow: 
    -2px -2px 0 red,
     2px -2px 0 red,
    -2px  2px 0 red,
     2px  2px 0 red;
}


section p {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
}


section ul {
  list-style-type: disc; /* classic bullet points */
  padding-left: 1.5em;
  line-height: 1.6;
  color: #fff;
  margin-left: 10%;
  margin-right: 10%;
}

section ul li {
  margin-bottom: 0.8em;
}

section ul li strong {
  color: #c41e3a; /* highlight key phrases in a strong red tone */
  font-weight: 700;
}

/* get the app section */

.android-app-showcase {
    display: flex;
    flex-direction: row;
    margin: 10px 10%;
    text-align: center;
}

.android-app-showcase .card {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 10px;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px;
}


/* FOOTER  */

footer {
    color: #fff;
    background-color: #004085;
}

footer p {
    margin: 0;
}

footer h3 {
    margin : 6px  0;
}

footer .footer-container {
    display: flex;
    flex-direction: row;
}

footer .footer-container div {
    width: 50%;
    margin: 10px;
}

footer ul {
    list-style-type: none;
}

footer .footer-bottom {
    text-align: center;
    padding-bottom: 10px;
}


footer .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

footer .footer-links h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: inherit; /* inherits the footer text color */
}

footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .footer-links li {
  margin-bottom: 0.4rem;
}

footer .footer-links a {
  text-decoration: none;
  color: inherit; /* uses the current footer text color */
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

footer .footer-links a:hover,
footer .footer-links a:focus {
  text-decoration: underline;
  color: #c41e3a; /* highlight color (you can change this) */
}

footer .footer-social ul {
    display: flex;
    flex-direction: column;
    padding: 6px;
}


footer .footer-social img {
    width: 60px;
    height: 60px;
}


/* MEDIA QUERIES  */

@media (max-width: 900px) {
    section p {
        margin: 10px 10px;
    }

    .section-head {
        margin: 10px 10px;
        text-align: center;
    }
}

@media (max-width: 825px) {
    table tr,
    table th {
        font-size: 10px;
    }

    table {
        margin: auto;
    }

    .month-selector {
        font-size: 16px;
    }

    .month-selector span {
        text-align: center;
    }
}


@media (max-width: 650px) {
    header nav {
        display: none;
    }

    .hamburger-icon {
        display: block;
    }
}   


@media (max-width: 600px) {
    .events-container,
    .android-app-showcase {
        width: 96%;
        margin: 10px 10px;
    }

    #stories .row {
        flex-direction: column;
    }

    #stories .row .card .img-with-name {
        margin: auto;
    }
}


@media (max-width: 500px) {
    .events-container {
        flex-direction: column;
    }

    .events-container .card {
        width: 96%;
    }
    
}