/* static/css/style.css */
:root {
    --hover_color: #316546; /* Define a single hover color (Green in this case) */
    --button_background_color: #9D4636;
    --hyperlink_color: #3157B7;
    --dark_theme_text_color:#F7f7f7;
    --dark_theme_background_color:#191919;
    --blog_header_color:#aaaaaa;
    --blog_image_text_color: #3157B7;
    --header_height: 8vh;
    --mobile_header_height: 15vh;
    --footer_height: 8vh;
    --shadow_depth: 10px;
    --shadow_color:  rgba(50, 50, 50, 0.5);
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    line-height: 1.6;
    color: var(--dark_theme_text_color); /* Black for body text on light backgrounds */
    background: var(--dark_theme_background_color); /* White as the default background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%; /* So the footer can “stick” to bottom if short */
  }
  
.content {
    flex: 1; /* Take up remaining space, push footer down */
}

/* Hero Section */
main h1 {
    font-size: xx-large;
}
main h2 {
    font-size: x-large;
}
main h3 {
    font-size: large;
}
/* Main Content Sections */
h1, h2, h3, h4, h5, h6 {
    color: var(--blog_header_color)
}

.button {
    padding: 0.5rem 1rem;
    background: var(--button_background_color); /* Blue for primary buttons */
    color: var(--dark_theme_text_color); /* White text */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.button.secondary {
    background: var(--button_background_color); /* Green for secondary buttons */
}

.button.danger {
    background: #871A06; /* Red for alert buttons */
}

.button:hover {
    background: var(--hover_color); /* Green hover effect */
}
.cta-button {
    position: relative;
    padding: 1rem 2rem;
    background: var(--button_background_color); /* Blue for primary CTA */
    color: var(--dark_theme_text_color); /* White text */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    transition: transform 0.2s ease, background 0.2s ease;
    animation: bounceIn 1s ease-out 1s backwards;
    text-align: center;
}

.cta-button:hover {
    transform: scale(1.1);
    background: var(--hover_color); /* Green hover effect for action */
    color: var(--dark_theme_text_color)
}

/* Header Styles (Navbar) */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--dark_theme_background_color); /* Black for a sleek, professional look */
    color: var(--dark_theme_text_color); /* White for readability */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 10px var(--shadow_depth) var(--shadow_color) ;
    height: var(--header_height);
}

/* Footer Styles */
.footer {
    background: var(--dark_theme_background_color);
    color: var(--dark_theme_text_color);
    padding: 1rem 1rem;
    text-align: center;
    box-shadow: 0 -10px var(--shadow_depth) var(--shadow_color);
    height: var(--footer_height);
    z-index: 500;

    /* position: absolute;
    bottom: 0; 
    width: 100%; */
}


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

.logo h1 {
    font-size: 1.5rem;
    color: var(--dark_theme_text_color); /* White text */
}

.logo h1 a {
    color: var(--dark_theme_text_color); /* White text */
    text-decoration: none;
}

/* Apply the new fade animation to each letter */
.logo h1 a span {
    display: inline-block;
    margin: 0 2px;
    animation: fade 4s ease-in-out infinite;
    animation-delay: calc(var(--index) * 0.2s);
    transition: all 0.3s ease;
    /* animation-fill-mode: forwards; */
}

.hamburger {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    cursor: pointer;
    padding: 1rem;
}


/* Navigation */
.header_nav_menu ul {
    list-style: none;
    display: flex;
}

.header_nav_menu ul li {
    margin-left: 2rem;
}

.header_nav_menu ul li a {
    color: var(--dark_theme_text_color); /* White text */
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.header_nav_menu ul li a:hover {
    color: var(--hover_color); /* Blue for an interactive effect */
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.footer_nav_menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.footer_nav_menu ul li a {
    color: var(--dark_theme_text_color); /* Blue links */
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer_nav_menu ul li a:hover {
    color: var(--hover_color); /* White on hover */
}

.non_home_page-content.parent_div{
    padding-top: var(--mobile_header_height);
    justify-content: top;
    align-items: top;
    display: flex;
    min-height: calc(100vh - var(--footer_height));
}

.non_home_page-content.article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.non_home_page-content.list_article {
    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: center;
    width: 100%;
}
.non_home_page-content.content{
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    align-items: left;
    width: 70%;
    flex: 1;
}
.non_home_page-content.list_content{
    flex-direction:column;
    justify-content: left;
    text-align: left;
    align-items: left;
    width: 70%;
    flex: 1;
    max-height: fit-content;
}
.non_home_page-content.list_content.list_item{
    flex-direction:row;
    justify-content: left;
    text-align: left;
    align-items: left;
    /* width: 80%; */
    flex: 1;
    max-height: fit-content;
}
.non_home_page-content.list_item{
    display: flex;
    flex-direction:column;
    justify-content: left;
    text-align: left;
    align-items: left;
    /* width: 80%; */
    flex: 1;
}
.non_home_page-content.content ul {
    margin-left: 1rem;    /* Adds space to the left for top-level bullets */
    padding-left: 1rem;   /* Adds additional padding for bullet visibility */
    list-style: disc;     /* Ensures bullets are shown */
}
.non_home_page-content.content ul ul {
    list-style: circle;   /* or square, etc. */
    margin-left: 1rem;
    padding-left: 1rem;
}
.non_home_page-content.spacer {
    margin-bottom: 1rem;
  }
.non_home_page-content.hyperlink {
    color: var(--hyperlink_color);
    font-weight: bold;      /* Makes the text bold */
    text-decoration: none;  /* Removes the underline if it's a link */
}
.non_home_page-content.hyperlink:hover {
    text-decoration: underline;  /* Removes the underline if it's a link */
}


.hero {
    display: flex;
    padding-top: var(--header_height);
    height: calc(100vh - var(--footer_height));
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--dark_theme_background_color);
    color: var(--dark_theme_text_color); /* White heading */
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--dark_theme_text_color);
    animation: fadeInDown 1s ease-out;
    /* margin-top: -10vh; */
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1920px; /* Match the max-width of video-container for consistency */
    margin: 0 auto;
    border-radius: 5px;
}



.hero-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #002FA7 0%, rgba(0, 0, 0, 0) 70%); /* Blue gradient */
    /* animation: pulse 2s infinite; */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* Responsive YouTube Video */
.video-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    
    /* Native aspect ratio support: */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem; /* or however much space you want */
  }
  
  .video-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
/* Responsive adjustments specifically for Hugo-generated content */





/* Animations */
@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
}



/* Mobile Adjustments */
@media (max-width: 1200px) {
    /* Adjust hero section padding and height */
    .hero {
        padding-top: var(--mobile_header_height);
        height: calc(100vh - var(--footer_height));
    }

    .non_home_page-content.content{
        max-width: 95%;
    }
    .non_home_page-content.list_content{
        max-width: 95%;
    }
    .hero-content {
        font-size: 90%;
    }
    .hero-content h2 {
        font-size: 2rem;
        margin-bottom: 0.8rem;
        margin-top: -10vh;
    }

    .cta-button {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
    }

    .cta-button:hover,
    .cta-button:focus,
    .cta-button:active {
        background: var(--hover_color);
        color: var(--dark_theme_text_color);
    }

    /* Adjust fixed header */
    .header {
        flex-direction: column;
        padding: 1rem 1rem;
        height: calc(var(--header_height)+5vh);
    }
    .header_nav_menu {
        flex-direction: flex;
        border-top: 1px solid var(--dark_theme_text_color); /* White divider line above the menu */
        width: 100%;
        justify-content: space-evenly;
        align-items: center;
        padding: 0.5rem;

    }
    .header_nav_menu ul {
        display: flex;
        justify-content: space-evenly; /* or space-between, etc. */
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%; /* ensures flex items span the header's width */
      }
    .header_nav_menu ul li {
        /* Remove or reduce margin so that items can fully stretch */
        margin: 0; 
        list-style: none; 
      }

    .header_nav_menu ul li a {
        transition: color 0.2s ease;
    }
    .header_nav_menu ul li a:hover,
    .header_nav_menu ul li a:focus,
    .header_nav_menu ul li a:active {
        color: var(--hover_color); /* White on hover */
    }

    .footer {
        padding: 1.5rem 1rem;
    }

    .footer_nav_menu ul {
        flex-direction: row; /* Ensure horizontal on mobile */
        gap: 1.2rem; /* Adjusted gap for mobile */
    }

    .footer_nav_menu ul li a {
        font-size: 0.9rem;
        transition: color 0.2s ease;
    }
    .footer_nav_menu ul li a:hover,
    .footer_nav_menu ul li a:focus,
    .footer_nav_menu ul li a:active {
        color: var(--hover_color); /* White on hover */
    }
    .footer p {
        font-size: 0.9rem;
        margin-bottom: 0.9rem;
    }
}

@media (min-width: 2000px){
    .non_home_page-content.content{
        width: 60%;
    }
}