/* Mobile overrides for index.css
   Target: small screens (<= 768px)
   Include this file after index.css: <link rel="stylesheet" href="assets/css/index.css">\n<link rel="stylesheet" href="assets/css/mobile.css" media="(max-width:768px)">
*/

:root {
    --minimum-content-padding: 1rem;
    /* used by page-layout */
}

/* Reduce overall base font-size slightly for small screens */
html {
    font-size: 16px;
}

/* Make the global grid collapse to a single column */
.page-layout,
.full-width {
    --main-padding: 1.25rem;
    /* grid-template-columns: [full-start] 1fr [full-end]; */
    gap: 1rem 0;
}

/* Ensure content children take full width */
.page-layout>*,
.full-width>* {
    grid-column: full;
}

/* Reduce padding for main content areas */
.full-content {
    padding-inline: var(--minimum-content-padding);
}

main {
    padding: 1.25rem 1rem 2rem;
}

/* Headings scale down for mobile */
h1,
.h1 {
    font-size: 2.5rem;
}

h2,
.h2 {
    font-size: 2rem;
}

h3,
.h3 {
    font-size: 1.25rem;
}

/* Buttons and tappable targets - increase hit area */
button,
.button,
nav.main-nav li a,
.footer-links li a {
    padding: 0.5rem 0.75rem;
}

nav.main-nav ul {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* padding: 0.5rem; */
    flex-direction: column;
    align-content: center;
    align-items: center;
    background-color: unset;
}

nav.main-nav li a {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    background-color: light-dark(var(--light-dimmed-bg), var(--dark-dimmed-bg));
}

/* Articles: switch to single column list and tighter gaps */
section.articles ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section.articles ul li a {
    padding: 0.75rem;
}

.article-card figure {
    /* margin-left: 0; */
    /* margin-top: 0; */
    /* width: 100%; */
}

.article-card img {
    border-radius: 0.75rem 0.75rem 0 0;
}

/* Wishlist and two-column layouts collapse to one column */
article.wishlist {
    grid-template-columns: 1fr;
}

/* Forms: stretch inputs and make labels stack nicely */
#kommentform {
    gap: 0.75rem;
}

#kommentform textarea,
#kommentform input {
    padding: 0.75rem;
}

/* Footer: stack elements vertically to save horizontal space */
footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
}

.footer-navigation ul,
.footer-links ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-links ul {
    gap: 2rem;
    margin-top: 1rem;
}

.footer-links li a {
    padding: 0.5rem 0.75rem;
}

/* Misc small-screen tweaks */
.language-switcher {
    gap: 0.5rem;
}

.article-introduction {
    columns: 1;
}

article.introduction {
    columns: 1;
    column-gap: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    nav.main-nav ul,
    section.articles ul li a {
        scroll-behavior: auto;
    }
}

/* Further tighten layout for very small phones */
@media (max-width: 360px) {
    html {
        font-size: 15px;
    }

    h1,
    .h1 {
        font-size: 2rem;
    }
}

li.nav-item {
    display: none;
}

nav.main-nav.open li.nav-item {
    display: list-item;
}

li.nav-item.active {
    order: -1;
    display: list-item;
}

/* Give the active navigation item a burger menu icon ::after */
li.nav-item.active a::after {
    /* use the SVG as a mask and paint it with the parent's color */
    content: "";
    display: inline-block;
    width: 1rem;
    height: 0.75rem;
    /* margin-left: 0.5rem; */

    /* fill the masked shape with the parent's color */
    background-color: currentColor;

    /* use the external SVG as a mask (supports modern browsers + WebKit) */
    -webkit-mask: url("../icons/burger.svg") no-repeat center/contain;
    mask: url("../icons/burger.svg") no-repeat center/contain;

    /* ensure the masked graphic scales correctly */
    background-size: contain;
}

article.introduction {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.header .easy-design-control {
    position: inherit;
    padding: 0;
    justify-content: center;
}

header.header.page-layout {
    display: flex;
    flex-direction: column-reverse;
    padding: 1rem;
}

nav.main-nav {
    padding: 0;
}

h2.project-title.h3 {
    display: none;
}

.easy-design-control.easy-design-control--footer {
    justify-content: center;
    padding: 1rem 0 0;
}

.footer .footer-copyright {
    margin: auto;
}