/* Define color variables for consistent theme usage across the site */
:root {
    --primary: #e07d1a;
    --bg-primary: #f2e3d4;
    --text-main: #180f01;
    --text-muted: #7b705f;
    --border: #ebe4d6;
    --bg-card: #fff;
    --bg-container: #fff;
    --bg-background: #f7f3ee;
    --bg-badge: #fff9e8;
}

/* Highlight selected text with primary color */
::selection {
    background-color: var(--primary);
    color: #fff;
}

/* Reset default margins, padding, and set consistent font for all elements */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Set page background color, text color, and default line height */
body {
    background-color: var(--bg-background);
    color: var(--text-main);
    line-height: 1.7;
}

/* Remove default list styling for list items */
li {
    text-decoration: none;
    list-style: none;
}

/* Set main heading size, spacing, and primary color */
h1 {
    font-size: 2.3rem;
    margin-bottom: .3rem;
    line-height: 1.2;
    color: var(--primary);
}


/* Set maximum width and center main layout sections */
header,
footer,
.container {
    max-width: 900px;
    margin: 0 auto;
}

/* Style header with background, padding, border, and flexbox layout */
header {
    background-color: var(--bg-container);
    padding: 1.5rem 2rem;
    border-bottom: 4px solid var(--primary);
    border-inline: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Style profile image as circular with fixed size */
header > .profile-image img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Style main container with white background, padding, border, and vertical flexbox */
.container {
    background-color: var(--bg-container);
    padding: 2rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Style footer with background, padding, borders, and centered text */
footer {
    background-color: var(--bg-container);
    padding: 1rem 2rem;
    border-top: 4px solid var(--primary);
    border-inline: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
}

/* Style section containers with padding, border, rounded corners, and vertical layout */
section {
    padding-block: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 0.5rem;
}

/* Style section headings with vertical flexbox layout and relative positioning */
.sub-heading {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Style decorative SVG lines with primary color, rotation, and absolute positioning */
.sub-heading > svg {
    width: 8rem;
    color: var(--primary);
    margin-bottom: 0.3rem;
    transform: rotate(180deg);
    position: absolute;
    bottom: -10px;
}

/* Style table with full width and collapsed borders */
table {
    width: 100%;
    border-collapse: collapse;
}

/* Style table header with light background color */
thead {
    background-color: var(--bg-primary);
}

/* Style table header and data cells with padding and bottom border */
th, td {
    text-align: left;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

/* Display skills list as flexbox row with wrapping and gaps */
#skills > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Style individual skill badges with background, border, and rounded corners */
#skills > ul > li {
    background-color: var(--bg-badge);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10rem;
    font-size: 0.9rem;
}

/* Style links with primary color and underline on hover */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Style project cards with shadow, padding, grid layout, and relative positioning */
[id^="project-"] {
    box-shadow: 0px 0px 6px rgba(0,0,0,0.25);
    padding: 1rem;
    border-radius: .6rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: .2rem;
    position: relative;
}

/* Set size for project card headings */
[id^="project-"] h3 {
    font-size: 1.6rem;
}

/* Set size for project card heading links */
[id^="project-"] h3 a {
    font-size: 1.4rem;
}

/* Set size for project card headings (duplicate rule removed) */

/* Style project card paragraphs with smaller font and muted color */
[id^="project-"] p {
    font-size: 14px;
    line-height: 1.2rem;
    color: var(--text-muted);
}

/* Display technologies section as vertical flexbox with spacing */
[id^="project-"] .technologies {
    display: flex;
    flex-direction: column;
    margin-top: 0.8rem; 
    gap: .2rem;
}

/* Display technology list items as wrapping flexbox with gaps */
[id^="project-"] .technologies .libs-used {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}


/* Style individual technology badges with background, border, and rounded corners */
[id^="project-"] .technologies .libs-used span {
    display: flex;
    justify-content: center;    
    align-items: center;
    background-color: var(--bg-badge);
    padding: .3rem .6rem;
    border: 1px solid var(--border);
    border-radius: 100rem;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: lowercase;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* Style project images with full width, rounded corners, and shadow */
[id^="project-"] img {
    width: 100%;
    border-radius: .8rem;
    box-shadow: 0 0 4px 8px rgba(0,0,0,0.1);
}

/* Style project timeline badge with absolute positioning and styling */
[id^="project-"] .timeline {
    display: inline-block;
    margin-top: 0.8rem;
    background-color: var(--bg-primary);
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 10rem;
    font-size: 12px;
    font-weight: bold;
    color: var(--primary);
    position: absolute;
    top: -28px;
    left: 14px;
}

[id^="project-"] .timeline-danger {
    background-color: #f2d4d4;
}

/* Blogs section - vertical flexbox layout for all blog posts */

.blogs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual blog card with 24-column grid layout */
#blog {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: 14rem;
    border-radius: 1rem;
    overflow: hidden;
    padding: .8rem;
}

/* Left side of blog card containing image */
#blog .upper {
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 12;
}

/* Metadata overlay on blog image with date and read time */
#blog .upper .meta {
    position: absolute;
    left: 0rem;
    bottom: 0rem;
    width: 100%;
    padding: 1rem;
    border-radius: .2rem;
    font-size: 10px;
    font-weight: bold;
    color: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: .6rem;
}

/* Style date and read time badges with primary background */
#blog .upper .meta .datetime,
#blog .upper .meta .readtime {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--primary);
    padding-inline: .6rem;
    padding-block: .2rem;
    color: #fff;
    border-radius: 10rem;
    font-size: 14px;
}

/* Blog cover image with full width and height */
#blog .upper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right side of blog card containing text content */
#blog .lower {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 13;
    grid-column-end: 25;
    display: flex;
    flex-direction: column;
}

/* Blog post title styling */
#blog .lower h3 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: .4rem;
}

/* Blog post description text styling */
#blog .lower p {
    font-size: 14px;
    line-height: 1.2rem;
    color: var(--text-muted);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet devices (768px and below) */
@media (max-width: 768px) {
    /* Adjust main heading size for smaller screens */
    h1 {
        font-size: 1.8rem;
    }

    /* Stack header content vertically on small screens */
    header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* Reduce profile image size on small screens */
    header > .profile-image img {
        width: 6rem;
        height: 6rem;
    }

    /* Reduce container padding on small screens */
    .container {
        padding: 1.5rem;
    }

    /* Reduce section padding on small screens */
    section {
        padding: 0.8rem;
        gap: 1.5rem;
    }

    /* Added gap adjustment for projects on small screens */
    #projects {
        gap: 3rem;
    }

    /* Convert project grid to single column on small screens */
    [id^="project-"] {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    /* Adjust font sizes for project cards on small screens */
    [id^="project-"] h3 {
        font-size: 1.3rem;
    }

    /* Adjust project link font size on small screens */
    [id^="project-"] h3 a {
        font-size: 1.1rem;
    }

    /* Reduce padding on header and footer for small screens */
    header,
    footer {
        padding: 1rem;
    }

    /* Adjust SVG decoration size on small screens */
    .sub-heading > svg {
        width: 6rem;
    }

    /* Stack blog cards vertically on small screens */
    #blog {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    /* Adjust blog image to take full width on small screens */
    #blog .upper {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
        height: 12rem;
    }

    /* Adjust blog text content to take full width below image on small screens */
    #blog .lower {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
        padding: 1rem;
    }

    /* Reduce blog title font on small screens */
    #blog .lower h3 {
        font-size: 1.1rem;
    }

    /* Reduce blog description font on small screens */
    #blog .lower p {
        font-size: 12px;
    }
}

/* Mobile devices (480px and below) */
@media (max-width: 480px) {
    /* Further reduce main heading size on mobile */
    h1 {
        font-size: 1.5rem;
        margin-bottom: 0.2rem;
    }

    /* Reduce body font size on mobile for better readability */
    body {
        font-size: 14px;
    }

    /* Further reduce profile image on mobile */
    header > .profile-image img {
        width: 5rem;
        height: 5rem;
    }

    /* Reduce container padding further on mobile */
    .container {
        padding: 1rem;
    }

    /* Reduce section padding further on mobile */
    section {
        padding: 0.5rem;
        gap: 1rem;
    }

    /* Added gap adjustment for projects on mobile */
    #projects {
        gap: 2rem;
    }

    /* Adjust table styles for mobile screens */
    table {
        font-size: 12px;
    }

    /* Reduce padding in table cells on mobile */
    th, td {
        padding: 0.4rem 0.6rem;
    }

    /* Stack skills list more compactly on mobile */
    #skills > ul {
        gap: 0.3rem;
    }

    /* Reduce skill badge size on mobile */
    #skills > ul > li {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Reduce project card padding on mobile */
    [id^="project-"] {
        padding: 0.8rem;
    }

    /* Further reduce project heading on mobile */
    [id^="project-"] h3 {
        font-size: 1.1rem;
    }

    /* Reduce project paragraph font on mobile */
    [id^="project-"] p {
        font-size: 12px;
    }

    /* Reduce technology badge font on mobile */
    [id^="project-"] .technologies .libs-used span {
        font-size: 10px;
        padding: 0.2rem 0.4rem;
    }

    /* Adjust header padding on mobile */
    header {
        padding: 0.8rem;
    }

    /* Adjust footer padding on mobile */
    footer {
        padding: 0.8rem 1rem;
    }

    /* Stack blog cards vertically on mobile */
    #blog {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 0.5rem;
    }

    /* Adjust blog image height on mobile */
    #blog .upper {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
        height: 10rem;
        border-radius: 0.6rem;
    }

    /* Adjust blog text content on mobile */
    #blog .lower {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
        padding: 0.8rem;
    }

    /* Further reduce blog title font on mobile */
    #blog .lower h3 {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }

    /* Further reduce blog description font on mobile */
    #blog .lower p {
        font-size: 11px;
        line-height: 1.1rem;
    }

    /* Reduce SVG decoration size further on mobile */
    .sub-heading > svg {
        width: 4rem;
    }
}