/* =========================================================
   NOVEL HERO MENU
   ========================================================= */

.novelMenuWrapper
{
  position:fixed;
  bottom:0;
  left:0;

  width:100%;

  z-index:500;
}

/* -------------------------------
   DESKTOP / TABLET MENU
-------------------------------- */

.novelHeroMenu
{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:14px;

    padding:14px 20px;

    background: linear-gradient(
        to right,
        rgba(40,25,18,0),
        rgba(40,25,18,0),
        rgba(40,25,18,0),
        rgba(40,25,18,0.1),
        rgba(40,25,18,0.2),
        rgba(40,25,18,0.3),
        rgba(40,25,18,.7),
        rgba(40,25,18,.7),
        rgba(40,25,18,.7),
        rgba(40,25,18,.7),
        rgba(40,25,18,.7),
        rgba(40,25,18,0.3),
        rgba(40,25,18,0.2),
        rgba(40,25,18,0.1),
        rgba(40,25,18,0),
        rgba(40,25,18,0),
        rgba(40,25,18,0)
    );

}

.novelHeroMenu a
{
    color:#C7A768;

    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(0.75rem, 1.2vw, 0.95rem);

    letter-spacing:.04em;
    text-decoration:none;
    white-space:nowrap;

    transition:color .25s ease;
}

.novelHeroMenu a:hover
{
    color:#D8C7A2;
}

.novelHeroMenu i
{
    font-size:0.95rem;
}

/* Divider */
.menuDivider
{
    width:1px;
    height:16px;

    background:#9b1b22;

    opacity:.7;
}

/* -------------------------------
   HAMBURGER (hidden by default)
-------------------------------- */

.novelMobileNav
{
    display:none;
}

/* Button */
.novelMenuButton
{
    width:48px;
    height:48px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#f3e7c8;
    background:rgba(45,30,21,.9);

    border:1px solid rgba(243,231,200,.35);

    font-size:1.4rem;

    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,.55);
}

/* Dropdown */
.novelMobileMenu
{
    position:absolute;
    right:0;
    top:55px;

    width:min(85vw,300px);

    background:rgba(40,27,19,.96);

    border:1px solid rgba(243,231,200,.2);

    box-shadow:0 8px 25px rgba(0,0,0,.65);

    display:none;

    z-index:10000;
}

.novelMobileMenu a
{
    display:flex;
    align-items:center;

    padding:14px 18px;

    color:#C7A768;

    font-family:Georgia, "Times New Roman", serif;
    font-size:1rem;

    text-decoration:none;
}

.novelMobileMenu a:hover
{
    color:#D8C7A2;
    background:rgba(255,255,255,.06);
}

/* -------------------------------
   MOBILE SWITCH
-------------------------------- */

.novelMobileNav
{
    display:none;
}

@media (max-width:600px)
{
    .novelHeroMenu
    {
        display:none;
    }

    .novelMobileNav
    {
        display:block;

        position:absolute;

        top:14px;
        right:14px;

        z-index:10000;   /* IMPORTANT */
    }

    .novelMenuButton
    {
        width:40px;
        height:40px;
        font-size:1.2rem;
    }

  }
}