/* =============================================
   RESPONSIVE LAYOUT
   Master responsive rules for Black Talon AAC.

   Replaces the legacy layout/css/resp.css with a
   fluid, mobile-first-friendly approach.

   Breakpoints (from variables.css):
     --bp-mobile:   768px   (phones / small tablets)
     --bp-tablet:  1024px   (tablets / narrow laptops)
     --bp-desktop: 1200px   (standard desktops)
     --bp-wide:    1418px   (wide / high-res monitors)

   The .main wrapper defaults to 1220px (set in
   style.css).  The rules below progressively
   shrink it and switch to 100% width on mobile.
   ============================================= */


/* -----------------------------------------
   Wide  -  max-width: 1418px
   ----------------------------------------- */
@media screen and (max-width: 1418px) {
    .main {
        max-width: 1220px;
        width: 95%;
    }
}


/* -----------------------------------------
   Desktop  -  max-width: 1300px
   ----------------------------------------- */
@media screen and (max-width: 1300px) {
    .main {
        max-width: 1100px;
    }

    .banner {
        height: 214px;
    }
}


/* -----------------------------------------
   Small Desktop  -  max-width: 1200px
   ----------------------------------------- */
@media screen and (max-width: 1200px) {
    .main {
        max-width: 1000px;
    }

    .banner {
        height: 192px;
    }
}


/* -----------------------------------------
   Tablet  -  max-width: 1100px
   ----------------------------------------- */
@media screen and (max-width: 1100px) {
    .main {
        max-width: 900px;
    }

    nav .container > div > ul > li > a {
        padding: 20px 10px;
    }

    .banner {
        height: 170px;
    }
}


/* -----------------------------------------
   Large Mobile / Small Tablet  -  max-width: 1024px
   ----------------------------------------- */
@media screen and (max-width: 1024px) {
    .main {
        max-width: 100%;
        width: 100%;
        padding-left: var(--spacing-md, 12px);
        padding-right: var(--spacing-md, 12px);
        box-sizing: border-box;
    }
}


/* -----------------------------------------
   Mobile  -  max-width: 768px
   ----------------------------------------- */
@media screen and (max-width: 768px) {
    .main {
        margin: 1rem auto;
        padding-left: var(--spacing-sm, 8px);
        padding-right: var(--spacing-sm, 8px);
    }

    .banner {
        height: auto;
        min-height: 120px;
        background-size: cover;
        background-position: center;
    }
}


/* -----------------------------------------
   Small Mobile  -  max-width: 480px
   ----------------------------------------- */
@media screen and (max-width: 480px) {
    .main {
        padding-left: var(--spacing-xs, 4px);
        padding-right: var(--spacing-xs, 4px);
    }

    .banner {
        min-height: 90px;
        border-width: 4px;
    }
}


/* =============================================
   RESPONSIVE UTILITY CLASSES
   Show / hide content based on viewport size.
   ============================================= */

/* Hidden on mobile (768px and below) */
.hide-mobile {
    display: initial;
}

@media screen and (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Shown only on mobile (hidden above 768px) */
.show-mobile {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .show-mobile {
        display: initial !important;
    }
}

/* Hidden on tablet and below (1024px and below) */
.hide-tablet {
    display: initial;
}

@media screen and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Shown only on tablet and below */
.show-tablet {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    .show-tablet {
        display: initial !important;
    }
}