/*
MCM Stories plugin: slide-out menu type.
With Stories added the menu runs to five items, so the type comes down a little and
the items get more air between them. Theme values are noted beside each change.
Remove this file's enqueue in mcm-stories.php to go back to the theme sizes.
*/

.menu .menu__item
{
    padding : 13px 0px; /* theme: 6px */
}

.menu .menu__anchor
{
    font-size   : 60px; /* theme: 55pt = 73px */
    line-height : 66px; /* theme: 60pt = 80px */
}

@media screen and (max-width : 750px)
{
    .menu .menu__item
    {
        padding : 12px 0px;
    }

    .menu .menu__anchor
    {
        font-size   : 50px; /* theme: 73px */
        line-height : 56px;
    }
}

/* short landscape screens */
@media screen and (max-width : 900px) and (max-height : 450px)
{
    .menu .menu__item
    {
        padding : 7px 0px;
    }

    .menu .menu__anchor
    {
        font-size   : 38px; /* theme: 40pt = 53px */
        line-height : 42px;
    }
}

@media screen and (max-width : 400px)
{
    .menu .menu__item
    {
        padding : 11px 0px;
    }

    .menu .menu__anchor
    {
        font-size   : 44px; /* theme: 45pt = 60px */
        line-height : 50px;
    }
}

/* Homepage text menu: five items no longer fit a phone at the theme's spacing,
   so the row tightens on small screens to stay on one line inside the viewport. */
@media screen and (max-width : 560px)
{
    .homepage-menu .homepage-menu__item
    {
        margin : 0px 9px; /* theme: 20px */
    }

    .homepage-menu .homepage-menu__anchor
    {
        font-size : 11px; /* theme: 9pt = 12px */
    }
}

@media screen and (max-width : 400px)
{
    .homepage-menu .homepage-menu__item
    {
        margin : 0px 6px;
    }

    .homepage-menu .homepage-menu__anchor
    {
        font-size : 10.5px;
    }
}