/* Template: Basic_1-1 */
/* Use the pattern below for organizing CSS declarations for each selector. 
1. Display Properties
2. Flexbox Properties
3. Position Properties
    a. Top, bottom, right, left
    b. Opacity
    c. Z-index
4. Height, Width Properties
    a. Background-color
    b. Color
5. Box Model Properties
    a. Margin, Border, Padding, Border-Radius
6. Typography Properties */

/* CSS reset to set a baseline for all browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS variables */
:root {
    /* Colors */
    --clr-primary: #101720;
    --clr-secondary: #1f51ff;
    --clr-tertiary: #e3e3e3;
    /* #ddd #D3D3D3 #e3e3e3*/
    --clr-accent: #1fff5d;
    --clr-background: #f5f5f5;
    --clr-text: #555;

    /* Typography */
    --font-family: "Trebuchet MS", Helvetica, sans-serif;
    --font-size-ba: 1rem;
    /* base */
    --font-size-sm: 0.8rem;
    /* small */
    --font-size-xs: 0.6rem;
    /* extra small */
    --font-size-lg: 2rem;
    /* large */
    --font-size-xl: 3rem;
    /* extra large */

    --font-weight-norm: 400;
    --font-weight-bold: 700;

    --line-height-ba: normal;
    --line-height-sm: .9;
    --line-height-lg: 1.5;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-ba: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Layout Design */
    --border-radius: 5px;

    /* Responsive Design */
    --container-max-width: 1200px;
    --breakpoint-tablet: 1100px;
    --breakpoint-mobile: 500px;
}


body {
    background-color: var(--clr-background);
    color: var(--clr-text);
    font-family: var(--font-family);
    font-size: var(--font-size-ba);
    line-height: var(--line-height-ba);

}

#container-responsive {
    container-type: inline-size;
    container-name: container-responsive-name;
}

#container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    /* height: 100svh; */
    /* Setting the height to height:100svh will cause problems when there is alot of content to display in the main-01 section, such as in about.html.
        This requires use of min-height: 100svh */
    min-height: 100svh;
    /* 100% of the viewport height */
    padding: var(--spacing-xs);
}

#head-01 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Ensure relative positioning */
    background-color: var(--clr-background);
    /* color: var(--clr-text); */
    padding: var(--spacing-sm);
}

/* NAVIGATION MENU */

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

a:visited {
    color: var(--clr-text);
    text-decoration: none;
}

/* a:hover {
    text-decoration: underline;
    text-decoration-thickness: 4px;
} */

a:active {
    color: var(--clr-secondary);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* background-color: #333; */
}

.nav-list {
    list-style: none;
    display: flex;
}

.nav-list li {
    position: relative;
}

.nav-list a {
    text-decoration: none;
    /* color: white; */
    padding: 10px 20px;
    display: block;
    white-space: nowrap;
    /* Prevent text wrapping */
}

/* This block of code (.dropdown>a::after) provides the default styling for the ::after pseudo-element (the down arrow) on all dropdown links (.dropdown > a). 
The arrow appears white, with a 5px margin to the left of the link text. It also defines display: inline-block,which is important to allow the arrow to be 
transformed (e.g., rotated). The position: relative ensures that the pseudo-element is positioned relative to its container,
so transformations like rotate can be applied properly. The transition applies smooth transitions to both the transform (for rotation) and color properties,
which means the arrow smoothly rotates and changes color when triggered. */
.dropdown>a::after {
    display: inline-block;
    /* Ensure the element can be transformed */
    position: relative;
    /* Ensure the pseudo-element can rotate */
    /* color: white; */
    /* Default color */
    content: '\25BC';
    /* Down arrow symbol */
    margin-left: 5px;
    /* font-size: 12px; */
    transition: transform 0.3s ease, color 0.3s ease;
    /* Add both transitions */
}

/* Hover behavior for desktop and larger screen layout (above 1000px) */
@container container-responsive-name (min-width: 1001px) {
    .dropdown:hover>a::after {
        transform: rotate(180deg);
        /* Rotate up arrow on hover */
        color: var(--clr-secondary);
        /* For debugging */
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

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

    .nav-list li {
        width: auto;
    }

    .mobile-menu-icon {
        display: none;
        /* Hide hamburger menu icon on larger screens */
    }
}

/* Dropdown Menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--clr-tertiary);
    border: thin solid black;
    /* border-radius: var(--border-radius); */
    top: 100%;
    left: 0;
    z-index: 2;
    min-width: 200px;
}

.dropdown-content li {
    display: block;
}

.dropdown-content a {
    padding: 10px 20px;
    white-space: nowrap;
    /* color: #333; */
}

.dropdown-content a:hover {
    background-color: #D3D3D3;
    /* #ddd */
}

/* Mobile Styles */
.mobile-menu-icon {
    display: none;
    font-size: 28px;
    /* color: white; */
    cursor: pointer;
}

/* END NAVIGATION MENU */

#main-01 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    position: relative;
    padding: var(--spacing-sm);
    z-index: 1;
}

#foot-01 {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: var(--spacing-sm);
}

.foot-item {
    /* Layout Design */
    display: flex;
    align-items: center;

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

    a:visited {
        color: var(--clr-text);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
        text-decoration-thickness: 4px;
    }

    a:active {
        color: var(--clr-secondary);
        text-decoration: none;
    }
}

/* START OF RESPONSIVE CODE */
/* Responsive for Viewport < 1000px */
@container container-responsive-name (max-width: 1000px) {

    .nav-list {
        display: none;
        /* Hidden by default */
        position: absolute;
        /* Absolute positioning for overlay */
        top: 100%;
        /* Place it just below the header */
        left: 0;
        width: 100%;
        /* Full width */
        background-color: var(--clr-background);
        /* Same background as the header */
        z-index: 999;
        /* Ensure it overlays the main content */
    }

    .nav-list li {
        width: 100%;
    }

    /* Default Hamburger Menu Icon (three horizontal lines) */
    .mobile-menu-icon {
        display: block;
        font-size: 28px;
        cursor: pointer;
    }

    /* Hamburger to X transition */
    .mobile-menu-icon.active {
        content: 'X';
        /* This will change it to 'X' when active */
        font-size: 28px;
    }

    /* Container for the hamburger icon and MENU text */
    .mobile-menu-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        border: 1px solid black;
        /* Apply the black border to the entire container */
        padding: 0px 3px 3px 3px;
        /* Add some padding for spacing */
        /* border-radius: 5px; */
        /* Optional: rounded corners */
        background-color: var(--clr-background);
        /* Background color to make it stand out */
    }

    /* The actual hamburger/X icon */
    .mobile-menu-container .icon {
        font-size: 24px;
        /* margin-bottom: 5px; */
        /* Add some space between the icon and MENU text */
    }

    /* Styling for the MENU text below the icon */
    .mobile-menu-container .menu-text {
        font-size: 10px;
        /* Adjust the size of the MENU text */
        /* margin-top: 5px; */
        /* Space between icon and MENU */
        /* padding: 2px 8px; */
        /* border: 1px solid black; */
        /* Thin black border */
        /* border-radius: 5px; */
        /* Optional: rounded corners */
        text-align: center;
        background-color: white;
        /* Background color for better visibility */
    }

    .nav-list a {
        padding: 15px;
        border-bottom: 1px solid #444;
    }

    .dropdown-content {
        position: relative;
        min-width: 100%;
    }

    .nav-list.active {
        display: flex;
        /* Show the menu when active */
        flex-direction: column;
        /* Flexbox layout when visible */
    }

    /* Arrow rotation for mobile when menu is open */
    .open>a::after {
        transform: rotate(180deg);
        /* Rotate the arrow up when open */
        color: var(--clr-secondary);
        /* For debugging */
    }
}

/* Media query for larger screen width (above 1000px) */
@media (min-width: 1000px) {
    .mobile-menu-container {
        display: none;
        /* Hide the hamburger menu on larger screens */
    }

    /* Make sure the horizontal nav menu is displayed correctly on large viewports */
    .nav-list {
        display: flex;
        /* Show the horizontal menu */
        flex-direction: row;
        /* Ensure the menu is laid out horizontally */
    }

    /* .mobile-menu-icon {
        display: none;
    } */

}


/* END OF RESPONSIVE NAVIGATION CODE */

/* START of Slider code */
.slide-text {
    h1 {
        font-size: var(--font-size-lg);
    }

    p {
        font-size: var(--font-size-ba);
    }
}