/* Universal Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Basic Body Styling */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: hsl(36, 100%, 99%); /* Off-white */
    color: hsl(236, 13%, 48%); /* Dark Grayish Blue */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scroll from mobile menu */
}

/* Typography Defaults */
h1, h2, h3, h4 {
    color: hsl(240, 100%, 5%); /* Dark Blue */
    line-height: 1.1;
}

p {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: hsl(5, 85%, 63%); /* Soft Orange */
}

/* Header Styling */
.header {
    width: 100%;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo .w-logo {
    height: 28px; /* Adjust logo size */
    width: auto;
}

/* Main Navigation (Desktop) */
.main-nav {
    display: none; /* Hidden by default on mobile */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2rem;
}

.nav-link {
    font-weight: 400;
    color: hsl(236, 13%, 48%); /* Dark Grayish Blue */
}

.nav-link:hover {
    color: hsl(5, 85%, 63%); /* Soft Orange */
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: block; /* Show on mobile */
    cursor: pointer;
    z-index: 100;
    transition: opacity 0.2s ease-in-out;
}

.mobile-menu-toggle:active {
    opacity: 0.5;
}

.mobile-menu-toggle .icon-menu {
    width: 40px; /* Adjust icon size */
    height: auto;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 0; /* Initially hidden */
    height: 100%;
    background-color: rgba(0, 0%, 0%, 0.75); /* Dark overlay */
    overflow: hidden;
    opacity: 0; /* Start hidden for fade */
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 101;
}

.mobile-menu-overlay.open {
    width: 100%; /* Full width when open */
    opacity: 1; /* Fade in */
}

.mobile-nav {
    background-color: hsl(36, 100%, 99%); /* Off-white */
    height: 100%;
    width: 65%; /* Width of the sliding menu */
    position: absolute;
    right: 0;
    top: 0;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.3s ease-in-out;
}

.mobile-menu-overlay.open .mobile-nav {
    transform: translateX(0); /* Slide in */
}

.mobile-menu-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    cursor: pointer;
    z-index: 102;
    transition: opacity 0.2s ease-in-out;
}

.mobile-menu-close:active {
    opacity: 0.5;
}

.mobile-menu-close .icon-close {
    width: 30px; /* Adjust icon size */
    height: auto;
}

.mobile-nav-list {
    list-style: none; /* Space from close button */
    margin-top: 10rem; /* Space from close button */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-link {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: hsl(240, 100%, 5%); /* Dark Blue */
}

.mobile-nav-link:hover {
    color: hsl(5, 85%, 63%); /* Soft Orange */
}

/* Main Layout - Mobile First */
.main-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Gap between sections on mobile */
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto; /* Center content */
    flex-grow: 1;
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-image {
    width: 100%;
    height: auto;
}

.hero-mobile-img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-desktop-img {
    display: none; /* Hide desktop image on mobile */
}

.hero-text-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-title {
    font-size: 2.5rem; /* 40px */
    font-weight: 800;
    margin: 0;
}

.hero-description-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-description {
    margin: 0;
}

.btn-read-more {
    background-color: hsl(5, 85%, 63%); /* Soft Orange */
    color: hsl(36, 100%, 99%); /* Off-white */
    border: none;
    padding: 0.8rem 2rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.btn-read-more:hover {
    background-color: hsl(240, 100%, 5%); /* Dark Blue */
}

/* New Articles Section */
.new-articles {
    background-color: hsl(240, 100%, 5%); /* Dark Blue */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.new-title {
    color: hsl(35, 77%, 62%); /* Soft Orange */
    font-size: 2rem; /* 32px */
    margin: 0;
}

.new-article-item {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid hsl(236, 13%, 48%); /* Dark Grayish Blue for separator */
}

.new-article-item:last-child {
    border-bottom: none; /* No border on last item */
    padding-bottom: 0;
}

.new-article-item h3 {
    font-size: 1.25rem; /* 20px */
    color: hsl(36, 100%, 99%); /* Off-white */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.new-article-item h3 a:hover {
    color: hsl(35, 77%, 62%); /* Soft Orange */
}

.new-article-item p {
    color: hsl(236, 13%, 48%); /* Dark Grayish Blue */
    margin: 0;
}

/* Trending Articles Section */
.trending-articles {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.trending-article-item {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.trending-img {
    width: 100px;
    height: 120px;
    object-fit: cover;
}

.trending-text-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-number {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    color: hsl(5, 85%, 63%); /* Soft Orange */
}

.trending-article-item h4 {
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    margin: 0;
}

.trending-article-item h4 a:hover {
    color: hsl(5, 85%, 63%); /* Soft Orange */
}

.trending-article-item p {
    margin: 0;
    color: hsl(236, 13%, 48%); /* Dark Grayish Blue */
}


/* Desktop Styles */
@media (min-width: 768px) {
    .header {
        padding: 2.5rem 2rem; /* More padding on desktop */
    }

    .main-nav {
        display: block; /* Show on desktop */
    }

    .mobile-menu-toggle {
        display: none; /* Hide on desktop */
    }

    .mobile-menu-overlay {
        display: none; /* Hide on desktop */
    }

    .main-layout {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Two columns: 2/3 for hero, 1/3 for new articles */
        grid-template-rows: auto auto; /* Two rows */
        gap: 2rem; /* Gap between grid items */
        padding: 2rem; /* More padding on desktop */
    }

    .hero {
        grid-column: 1 / 2; /* Hero spans first column */
        grid-row: 1 / 2; /* Hero is in the first row */
        display: grid;
        grid-template-columns: 1fr 1fr; /* Hero image on left, text on right */
        gap: 2rem;
    }



    .hero-image {
        grid-column: 1 / 3; /* Image spans both columns of the hero grid */
    }

    .hero-mobile-img {
        display: none; /* Hide mobile image on desktop */
    }
    .hero-desktop-img {
        display: block; /* Show desktop image on desktop */
        width: 100%;
        height: auto;
    }    
    .hero-text-content {
        display: grid;
        grid-column: 1 / 3; /* Text content spans both columns */
        gap: 1.5rem;
    }
    .hero-title {
        font-size: 3.5rem; /* 56px */
        grid-column: 1 / 2; /* Title takes first column of hero-text-content */
    }

    .hero-description-group {
        grid-column: 2 / 3; /* Description group takes second column */
        justify-content: space-between; /* Push button to bottom */
    }

    .new-articles {
        grid-column: 2 / 3; /* New articles section is in the second column */
        grid-row: 0 / 2; /* Spans both rows */
        display: flex;
        padding: 2.5rem 1.5rem; /* Adjust padding */
    }

    .new-title {
        font-size: 2.5rem; /* 40px */
    }

    .trending-articles {
        grid-column: 1 / 3; /* Trending articles span both columns */
        grid-row: 2 / 3; /* In the second row */
        flex-direction: row; /* Arrange horizontally */
        justify-content: space-between;
        gap: 1.5rem; /* Adjust gap between trending items */
    }

    .trending-article-item {
        flex: 1; /* Distribute space evenly */
    }
}

/* Larger Desktop Styles (e.g., for very wide screens) */
@media (min-width: 1024px) {
    .main-layout {
        gap: 3rem; /* Slightly larger gap for larger screens */
    }

    .hero {
        gap: 3rem;
    }
}