/*
==================================================
RESET
==================================================
*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/*
==================================================
HTML / BODY
==================================================
*/

html{

    font-size:16px;

}

body{

    background:var(--bbw-paper);

    color:var(--bbw-ink);

}

img,
svg{

    display:block;

    max-width:100%;

}

/*
==================================================
SCREEN READER TEXT
==================================================
*/

.screen-reader-text{

    position:absolute;

    width:1px;
    height:1px;

    margin:-1px;
    padding:0;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/*
==================================================
CONTAINER
==================================================
*/

.bbw-container{

    width:min(100% - 2.5rem,var(--bbw-max-width));

    margin-inline:auto;

}

/*
==================================================
CONTENT SECTIONS
==================================================
*/

.bbw-content{

    padding:var(--bbw-space-lg) 0;

}

/*
==================================================
PROSE
==================================================
*/

.bbw-prose{

    max-width:68ch;

    margin-inline:auto;

}

.bbw-prose > * + *{

    margin-top:1.25rem;

}

.bbw-prose h2,
.bbw-prose h3,
.bbw-prose h4{

    margin-top:2.5rem;

    font-family:"Anton",sans-serif;
    font-weight:400;

}

.bbw-prose img{

    border:4px solid var(--bbw-teal);

    box-shadow:6px 6px 0 rgba(0,0,0,.14);

}

.bbw-prose a{

    color:var(--bbw-red-dark);

}

.bbw-prose a:hover,
.bbw-prose a:focus-visible{

    color:var(--bbw-red);

}

/*
==================================================
BUTTON
==================================================
*/

.bbw-button{

    display:inline-block;

    padding:.95rem 1.8rem;

    background:var(--bbw-yellow);

    color:var(--bbw-teal-dark);

    border:3px solid var(--bbw-teal-dark);

    font-weight:800;

    text-decoration:none;

    text-transform:uppercase;

    box-shadow:5px 5px 0 rgba(0,0,0,.16);

    transition:transform .2s ease;

}

.bbw-button:hover,
.bbw-button:focus-visible{

    color:var(--bbw-teal-dark);

    transform:translate(-2px,-2px);

}

/*
==================================================
GUTENBERG BUTTON BLOCK
==================================================
*/

.wp-block-button__link{

    color:var(--bbw-paper-light);

    text-decoration:none;

}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible{

    color:var(--bbw-paper);

}

/*
==================================================
SEARCH FORM
==================================================
*/

.search-form{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    max-width:420px;

    margin:1.5rem auto;

}

.search-form .search-field{

    flex:1;

    min-width:180px;

    padding:.6rem .8rem;

    background:var(--bbw-paper-light);

    color:var(--bbw-ink);

    border:2px solid var(--bbw-teal);

    font-family:inherit;

    font-size:1rem;

}

.search-form .search-submit{

    padding:.6rem 1.2rem;

    background:var(--bbw-teal);

    color:var(--bbw-paper-light);

    border:2px solid var(--bbw-teal-dark);

    font-weight:800;

    text-transform:uppercase;

    cursor:pointer;

    transition:background .2s ease;

}

.search-form .search-submit:hover,
.search-form .search-submit:focus-visible{

    background:var(--bbw-teal-dark);

}

/*
==================================================
FOOTER
==================================================
*/

.bbw-footer{

    margin-top:3rem;

    padding:2.5rem 0 2rem;

    background:var(--bbw-teal-dark);

    border-top:4px solid var(--bbw-yellow);

    color:var(--bbw-paper-light);

    text-align:center;

}

.bbw-footer-nav-list,
.bbw-footer-social{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    margin:0 0 1.25rem;

    padding:0;

    list-style:none;

}

.bbw-footer-nav-list li:not(:last-child)::after,
.bbw-footer-social li:not(:last-child)::after{

    content:"★";

    margin:0 .75rem;

    color:var(--bbw-yellow);

    font-size:.7rem;

}

.bbw-footer-nav-list a,
.bbw-footer-social a{

    color:var(--bbw-paper-light);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.85rem;

    font-weight:800;

    letter-spacing:.1em;

    text-decoration:none;

    text-transform:uppercase;

}

.bbw-footer-nav-list a:hover,
.bbw-footer-nav-list a:focus-visible,
.bbw-footer-social a:hover,
.bbw-footer-social a:focus-visible{

    color:var(--bbw-yellow);

}

.bbw-footer-copyright{

    margin:0;

    color:rgba(247,239,217,.75);

    font-family:
        "Arial Narrow",
        "Franklin Gothic Condensed",
        Arial,
        sans-serif;

    font-size:.78rem;

    letter-spacing:.03em;

}

/*
==================================================
RESPONSIVE
==================================================
*/

@media (max-width:640px){

    .bbw-container{

        width:min(100% - 2rem,var(--bbw-max-width));

    }

    .bbw-content{

        padding:var(--bbw-space-md) 0;

    }

    .bbw-footer-nav-list li:not(:last-child)::after,
    .bbw-footer-social li:not(:last-child)::after{

        margin:0 .5rem;

    }

}