/* style-mobile.css - Targeted for screens up to 768px */

/* --- Layout & Containers --- */
.container,
.post-wrapper,
.project-wrapper {
    width: 90%;
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* --- Header & Nav --- */
.site-header .container {
    flex-direction: column; /* Stacks logo and nav */
    gap: 1rem;
    padding: 1rem;
}

.navigation-bar li {
    font-size: 1.1rem; /* Smaller nav text */
    padding: 0 0.5rem;
}

.nav-logo img {
    width: 64px; /* Scaled down logo */
    height: 64px;
}

/* --- Hero / Home Page --- */
.home-page::before {
    /* The diagonal background usually covers text on mobile,
       so we make it a top-bar or hide it */
    width: 100%;
    height: 40vh;
    background: #121212;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.hero-logo {
    flex-direction: column; /* Stack logo and text */
    gap: 1rem;
    margin-top: 2rem;
    animation: none; /* Animations with translates often cause horizontal scroll on mobile */
    opacity: 1;
    transform: none;
}

.hero-logo img {
    width: 8rem;
    height: 8rem;
}

.home-page .logo-text {
    font-size: 3rem; /* Scaled down from 6rem */
    text-align: center;
}

.home-page .intro {
    width: 90%; /* Remove fixed 28rem width */
    padding: 1rem;
    font-size: 1.1rem;
    text-align: center;
    margin: 0 auto;
}

/* --- Typography Scaling --- */
#title,
.projects-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.post-title,
.project-title {
    font-size: 2rem;
}

.contact-cta {
    font-size: 1.5rem;
}

/* --- Footer & Socials --- */
.footer {
    position: relative; /* Fixed footers often block content on small screens */
    justify-content: center;
    background: #121212;
    color: #e3e3e3;
    padding: 2rem 1rem;
}

.footer-right-stack,
.social-icons {
    align-items: center;
}

.social-icons {
    flex-direction: row; /* Horizontal icons are easier to tap */
    justify-content: center;
}

.social-icons li a {
    height: 3rem;
    width: 3rem;
}

.social-icons i {
    font-size: 2rem;
}

/* --- Lists (Blog & Projects) --- */
.project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.project-link {
    font-size: 1.5rem;
}

.project-description {
    width: 100%;
    font-size: 1rem;
}