/*==========================================================

WILD FOCUS

RESPONSIVE.CSS

==========================================================*/



/*==========================================================
1400px
==========================================================*/

@media(max-width:1400px){

.container{

padding-inline:36px;

}

.hero-grid{

grid-template-columns:45% 55%;

}

.hero h1{

font-size:60px;

}

.hero h2{

font-size:42px;

}

.collection-grid{

grid-template-columns:repeat(4,1fr);

gap:22px;

}

.services-grid{

gap:24px;

}

.footer-grid{

gap:40px;

}

}





/*==========================================================
1200px
==========================================================*/

@media(max-width:1200px){

nav ul{

gap:28px;

}

.hero{

min-height:820px;

}

.hero-grid{

grid-template-columns:1fr 1fr;

gap:50px;

}

.hero-image img{

max-width:620px;

}

.stats-grid{

grid-template-columns:repeat(5,1fr);

}

.intro-grid{

gap:50px;

}

.services-grid{

grid-template-columns:repeat(2,1fr);

}

.collection-grid{

grid-template-columns:repeat(2,1fr);

}

.cafe-grid{

grid-template-columns:repeat(2,1fr);

}

.logo-grid{

grid-template-columns:repeat(4,1fr);

}

.process-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:2fr 1fr;

row-gap:60px;

}

.banner-grid{

gap:40px;

}

}





/*==========================================================
992px
==========================================================*/

@media(max-width:992px){

.site-header{

padding:20px 0;

}

nav{

display:none;

}

.nav-actions{

display:none;

}

.hero{

padding-top:140px;

min-height:auto;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

max-width:100%;

margin:auto;

}

.hero p{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-highlights{

justify-content:center;

}

.hero-image{

justify-content:center;

margin-top:50px;

}

.hero-image img{

max-width:560px;

}

.scroll-down{

display:none;

}

.statistics{

margin-top:0;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.intro-grid{

grid-template-columns:1fr;

gap:60px;

}

.feature-row{

max-width:700px;

margin:auto;

}

.banner-grid{

grid-template-columns:1fr;

}

.banner-image{

order:-1;

}

.logo-grid{

grid-template-columns:repeat(3,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.footer-bottom-grid{

flex-direction:column;

gap:14px;

text-align:center;

}

}





/*==========================================================
768px
==========================================================*/

@media(max-width:768px){

.container{

padding-inline:22px;

}

section{

padding:80px 0;

}

.section-header{

margin-bottom:50px;

}

h1{

font-size:46px;

}

h2{

font-size:38px;

}

h3{

font-size:24px;

}

.hero h2{

font-size:34px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-highlights{

gap:10px;

}

.hero-highlights div{

font-size:12px;

}

.stats-grid{

grid-template-columns:1fr 1fr;

}

.stat-card{

padding:28px 18px;

}

.services-grid{

grid-template-columns:1fr;

}

.collection-grid{

grid-template-columns:1fr;

}

.cafe-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.cafe-grid{

grid-template-columns:1fr;

}

.logo-grid{

grid-template-columns:repeat(2,1fr);

}

.process-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter{

max-width:420px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons .btn{

width:100%;

}

.back-top{

right:18px;

bottom:18px;

}

}





/*==========================================================
576px
==========================================================*/

@media(max-width:576px){

.container{

padding-inline:18px;

}

.hero{

padding-top:120px;

}

.logo img{

width:145px;

}

.hero h1{

font-size:38px;

}

.hero h2{

font-size:28px;

}

.hero p{

font-size:15px;

}

.section-tag{

font-size:11px;

}

.section-header{

margin-bottom:40px;

}

.stats-grid{

grid-template-columns:1fr;

}

.stat-card{

border-right:none;

border-bottom:1px solid rgba(255,255,255,.08);

}

.feature-row{

flex-direction:column;

text-align:center;

align-items:center;

}

.feature-row p{

max-width:100%;

}

.story-content,

.service-content,

.collection-overlay{

padding:22px;

}

blockquote{

font-size:28px;

}

.testimonial-card{

padding:30px;

}

.process-number{

width:64px;

height:64px;

font-size:24px;

}

.footer-social{

justify-content:center;

}

.footer-about,

.footer-links,

.footer-contact{

text-align:center;

}

.footer-logo{

margin-inline:auto;

}

}

/*==========================================================
MOBILE NAVIGATION
Preserves the desktop navigation and introduces a compact,
accessible menu below 992px.
==========================================================*/
.mobile-menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background:rgba(0,0,0,.16);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.mobile-menu-toggle span{
    display:block;
    width:18px;
    height:1.5px;
    background:#fff;
    border-radius:2px;
    transition:transform .28s ease, opacity .2s ease;
}

.mobile-menu{
    display:none;
}

@media(max-width:992px){
    .navbar{
        position:relative;
    }

    .mobile-menu-toggle{
        display:flex;
        margin-left:auto;
        margin-right:12px;
        position:relative;
        z-index:1003;
    }

    .mobile-menu{
        position:absolute;
        top:calc(100% + 12px);
        right:0;
        width:min(330px, calc(100vw - 44px));
        padding:10px;
        background:rgba(18,32,24,.98);
        border:1px solid rgba(255,255,255,.12);
        border-radius:8px;
        box-shadow:0 18px 45px rgba(0,0,0,.28);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
        z-index:1002;
    }

    .mobile-menu ul{
        display:flex;
        flex-direction:column;
        gap:0;
        margin:0;
        padding:0;
        list-style:none;
    }

    .mobile-menu li{
        border-bottom:1px solid rgba(255,255,255,.09);
    }

    .mobile-menu li:last-child{
        border-bottom:0;
        padding-top:8px;
    }

    .mobile-menu a{
        display:block;
        padding:15px 14px;
        color:#fff;
        font-size:14px;
        font-weight:500;
        letter-spacing:.2px;
    }

    .mobile-menu a:hover,
    .mobile-menu a:focus-visible{
        color:var(--gold);
    }

    .mobile-menu .mobile-contact a{
        color:var(--green);
        background:var(--gold);
        border-radius:4px;
        text-align:center;
    }

    .mobile-menu.is-open{
        display:block;
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .mobile-menu-toggle.is-open span:nth-child(1){
        transform:translateY(6.5px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3){
        transform:translateY(-6.5px) rotate(-45deg);
    }

    .inner-page .mobile-menu{
        background:rgba(18,32,24,.99);
    }
}

@media(max-width:576px){
    .mobile-menu-toggle{
        width:42px;
        height:42px;
        margin-right:0;
    }

    .mobile-menu{
        right:0;
        width:calc(100vw - 36px);
        max-width:330px;
    }
}

/* ==========================================================
   FINAL MOBILE NAV OVERRIDE
   Keeps desktop navigation untouched and ensures the compact
   mobile menu is the only navigation shown below 992px.
   ========================================================== */
@media (max-width: 992px) {
    .site-header nav {
        display: none !important;
    }

    .site-header .nav-actions {
        display: none !important;
    }

    .site-header .mobile-menu-toggle {
        display: flex !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        margin-right: 0;
        position: relative;
        z-index: 1102;
        color: #fff;
        background: rgba(19,32,24,.42);
        border: 1px solid rgba(255,255,255,.35);
        box-shadow: 0 6px 18px rgba(0,0,0,.14);
    }

    .site-header .mobile-menu {
        display: none !important;
        position: absolute;
        top: calc(100% + 14px);
        right: 0;
        left: auto;
        width: min(340px, calc(100vw - 32px));
        max-height: calc(100vh - 105px);
        overflow-y: auto;
        padding: 10px;
        background: rgba(19,32,24,.98);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 10px;
        box-shadow: 0 20px 50px rgba(0,0,0,.32);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
        z-index: 1101;
    }

    .site-header .mobile-menu.is-open {
        display: block !important;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-header .mobile-menu ul {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-header .mobile-menu li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .site-header .mobile-menu li:last-child {
        border-bottom: 0;
        margin-top: 8px;
        padding-top: 8px;
    }

    .site-header .mobile-menu a {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        padding: 15px 14px;
        color: #fff !important;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 500;
        letter-spacing: .25px;
        text-decoration: none;
    }

    .site-header .mobile-menu a:hover,
    .site-header .mobile-menu a:focus-visible {
        color: var(--gold) !important;
        background: rgba(255,255,255,.045);
    }

    .site-header .mobile-menu .mobile-contact a {
        color: var(--green) !important;
        background: var(--gold);
        border-radius: 5px;
        text-align: center;
        font-weight: 600;
    }

    .site-header .mobile-menu-toggle.is-open {
        background: rgba(19,32,24,.9);
        border-color: rgba(214,177,106,.7);
    }
}

@media (max-width: 576px) {
    .site-header .mobile-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .site-header .mobile-menu {
        width: calc(100vw - 28px);
        max-width: 340px;
        right: 0;
    }
}