/* =================================================
GLOBAL FIX
================================================= */

html,body{
margin:0;
padding:0;
overflow-x:clip;
min-height:100dvh;
}

/* =================================================
EXTRA SMALL DEVICES (<576px)
================================================= */

@media (max-width:575px){

:root{
--spacing-unit:0.875rem;
}

body{
font-size:14px;
}

.site-content h1{font-size:1.5rem;}
.site-content h2{font-size:1.25rem;}
.site-content h3{font-size:1.125rem;}

.container{
padding:0;
margin:0;
max-width:100%;
}

.row{
gap:.75rem;
}

.btn{
width:100%;
padding:.625rem;
font-size:.875rem;
}

/* HEADER */

.site-header{
background:#fff;
}

.logo{
font-size:1.25rem;
}

.navigation-main-wrapper{
display:block;
width:100%;
background:var(--light-bg);
padding:1rem;
border-top:1px solid var(--border-color);
}

.navigation-main{
flex-direction:column;
gap:.5rem;
}

.search-bar-wrapper{
order:3;
margin:.5rem 0;
height:44px;
}

.search-bar-wrapper input{
font-size:14px;
}

.search-button{
padding:0 1rem;
font-size:.85rem;
}

.header-icons-wrapper{
order:2;
}

.header-icon .icon-label{
display:none;
}

.header-icon .icon-wrapper{
width:28px;
height:28px;
}

.header-icon svg{
width:20px;
height:20px;
}

.search-camera-btn{
padding:0 .6rem;
}

/* CATEGORY GRID */

.categories-dropdown{
position:static;
width:100%;
margin-top:.5rem;
padding:.75rem;
border-radius:12px;
background:#f9f9f9;
box-shadow:0 2px 8px rgba(0,0,0,.08);
border:1px solid #f0f0f0;
animation:slideDown .3s ease;
}

@keyframes slideDown{
from{opacity:0;transform:translateY(-10px);}
to{opacity:1;transform:translateY(0);}
}

.categories-dropdown-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:1rem;
row-gap:1rem;
}

.categories-grid-link{
grid-template-columns:40px 1fr;
font-size:14px;
}

.categories-grid-icon{
width:40px;
height:40px;
border-radius:12px;
}

/* HERO */

.hero-section{
padding:2rem .75rem;
}

.hero-section h1{
font-size:1.25rem;
}

.hero-section p{
font-size:.875rem;
}

/* CATEGORIES */

.categories-grid{
grid-template-columns:1fr;
gap:.75rem;
}

.category-card{
height:150px;
}

textarea{
min-height:100px;
}

/* UTILITY */

.mt-2{margin-top:.75rem;}
.mt-3{margin-top:1rem;}
.mb-2{margin-bottom:.75rem;}
.mb-3{margin-bottom:1rem;}

}

/* =================================================
SMALL DEVICES (576px–767px)
================================================= */

@media (min-width:576px) and (max-width:767px){

.col-1{grid-column:span 2;}
.col-2{grid-column:span 3;}
.col-3{grid-column:span 4;}
.col-6{grid-column:span 6;}
.col-8{grid-column:span 8;}
.col-12{grid-column:span 12;}

.categories-grid{
grid-template-columns:repeat(2,1fr);
}

.categories-dropdown-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:1.25rem;
row-gap:1.25rem;
}

.categories-grid-link{
grid-template-columns:44px 1fr;
font-size:14px;
}

.categories-grid-icon{
width:44px;
height:44px;
border-radius:12px;
}

}

/* =================================================
TABLETS
================================================= */

@media (min-width:768px) and (max-width:1023px){

.container{
max-width:720px;
}

.categories-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* =================================================
DESKTOP
================================================= */

@media (min-width:1024px){

.container{
max-width:1300px;
margin:auto;
}

.categories-grid{
grid-template-columns:repeat(4,1fr);
}

}

/* =================================================
XXL
================================================= */

@media (min-width:1400px){

}

/* =================================================
ACCESSIBILITY
================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

outline:3px solid var(--secondary-color);
outline-offset:2px;

}

/* =================================================
PRINT
================================================= */

@media print{

.site-header,
.sidebar,
.comments-section,
.navigation-main,
.search-bar,
button,
input{
display:none;
}

body{
margin:0;
padding:0;
background:white;
color:black;
}

.content-area{
max-width:100%;
}

img{
max-width:100%;
}

}

/* =================================================
MOBILE HEADER GRID
================================================= */

@media (max-width:1023px){

.header-top{
display:none;
}

header.site-header .header-wrapper{

display:grid;

grid-template-columns:40px minmax(0,1fr) auto;

grid-template-areas:
"menu logo icons"
"search search search";

align-items:center;
gap:10px;
padding:8px 12px;

}

.menu-toggle{
grid-area:menu;
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
}

.logo-wrapper{
grid-area:logo;
justify-self:center;
}

.logo-text{
white-space:nowrap;
}

.search-bar-wrapper{
grid-area:search;
width:100%;
max-width:100%;
margin:0;
}

.search-input{
width:100%;
}

.header-icons-wrapper{
grid-area:icons;
justify-self:end;
display:flex;
align-items:center;
gap:6px;
flex-wrap:nowrap;
}

}

/* =================================================
SMALL MOBILE
================================================= */

@media (max-width:767px){

.header-wrapper{
grid-template-columns:36px minmax(0,1fr) auto;
gap:8px;
padding:6px 10px;
}

.menu-toggle{
width:36px;
height:36px;
}

.logo-text{
font-size:20px;
}

.search-bar-wrapper{
min-height:42px;
}

.search-input{
font-size:14px;
}

.search-button{
padding:0 12px;
font-size:14px;
}

}

/* =================================================
EXTRA SMALL MOBILE
================================================= */

@media (max-width:479px){

.header-wrapper{
grid-template-columns:34px minmax(0,1fr) auto;
padding:6px 8px;
}

.logo-text{
font-size:18px;
}

.search-button{
padding:0 10px;
font-size:13px;
}

.header-icon .icon-wrapper{
width:24px;
height:24px;
}

.header-icon svg{
width:16px;
height:16px;
}

}