/* ===========================================================
   INDEX HERO (PROTOTYPE)
   Move to style.css when complete.
   =========================================================== */
.indexHeroMenu
{
    position:absolute;

    left:0;
    bottom:0;

    z-index:100;

    display:flex;
    align-items:center;
    gap:30px;

    width:100%;

    padding:18px 40px;

    background:linear-gradient(
        to right,
        rgba(63,45,31,.91) 0%,
        rgba(63,45,31,.76) 35%,
        rgba(74,54,37,.44) 70%,
        rgba(74,54,37,0) 100%
    );
}

.indexHeroMenu a
{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#f3e7c8;

    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(.9rem, 1vw, 1.08rem);
    font-weight:400;
    letter-spacing:.03em;

    text-decoration:none;
    white-space:nowrap;

    transition:
        color .25s ease,
        transform .25s ease;
}

.indexHeroMenu a:hover
{
    color:#fff1c9;
    transform:translateY(-2px);
}

.newArticle
{
    color:#ffb347;
    font-weight:600;
}

  .indexHeroMenu a::after {

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:1px;

    background:#d7b36a;

    transition:width .3s ease;

  }

  .indexHeroMenu a:hover::after {

    width:100%;

  }

  .indexHeroMenu i
  {
      color:#d1b36e;
  }

  .indexHeroMenu a:hover i
  {
      color:#f1d28b;
  }

  .indexHeroMenu a.newArticle
  {
      color:#ffb347;

      font-weight:600;
  }

  .menuLogo
  {
      width:22px;
      height:22px;

      object-fit:contain;
  }

  .menuDivider
  {
      flex:0 0 2px;

      width:2px;
      height:22px;

      background:linear-gradient(
          to bottom,
          rgba(150,35,35,0),
          rgba(170,40,40,.95),
          rgba(150,35,35,0)
      );
  }

  /* Desktop */
  .hero-overlay {
      position: absolute;
      width: 18.5cm;
      height: auto;
      max-width: 100%;

      top: 1.5%;
      left: 50%;
      z-index: 9000;
      transform: translateX(-50%);

      pointer-events: none;
  }

  @media (max-width:1400px) {

      .indexHeroMenu {
          padding: 18px 45px;
          gap: 24px;
      }

      .indexHeroMenu a {
          font-size: 1rem;
      }

      .menuLogo {
          width: 18px;
          height: 18px;
      }

      .hero-overlay {
          top: 1.5%;
          left: 50%;
          z-index: 9000;
          transform: translateX(-50%);

          width: 90%;
          max-width: 500px;
      }

  }

  @media (max-width:1100px)
  {
      .indexHeroMenu
      {
          gap:20px;
          padding:18px 25px;
      }

      .indexHeroMenu a
      {
          font-size:.90rem;
      }

      .menuLogo
      {
          width:18px;
          height:18px;
      }

      .hero-overlay {
          top: 1.5%;
          left: 50%;
          z-index: 9000;
          transform: translateX(-50%);

          width: 50%;
          max-width: 500px;
      }
  }

  @media (max-width:850px)
  {
      .indexHeroMenu
      {
          gap:16px;
          padding:14px 16px;
      }

      .indexHeroMenu a
      {
          font-size:.76rem;
      }

      .hero-overlay {
          top: 1.5%;
          left: 50%;
          z-index: 9000;
          transform: translateX(-50%);

          width: 90%;
          max-width: 400px;
      }
  }

  .indexMobileNav
  {
      display:none;
      z-index: 10000;
  }


  /* Phones */
  @media (max-width:600px)
  {
      .indexHeroMenu
      {
          display:none;
      }

      .indexMobileNav
      {
          position:absolute;

          top:14px;
          right:14px;

          display:block;

          z-index:10000;
      }

      .indexMenuButton.w3-button
      {
          width:48px;
          height:48px;

          padding:0;

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

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

          font-size:1.35rem;

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

      .indexMenuButton.w3-button:hover
      {
          color:#ffffff;
          background:rgba(60,40,27,.96);
      }

      .indexMobileMenu
      {
          position:absolute;

          top:55px;
          right:0;

          width:min(82vw,310px);

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

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

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

      .indexMobileMenu .w3-bar-item
      {
          display:flex;
          align-items:center;
          gap:12px;

          padding:14px 18px;

          color:#f3e7c8;
          background:transparent;

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

          text-decoration:none;
      }

      .indexMobileMenu .w3-bar-item:hover
      {
          color:#ffffff !important;
          background:rgba(255,255,255,.08) !important;
      }

      .indexMobileMenu i
      {
          width:22px;

          color:#d1b36e;
          text-align:center;
      }

      .indexHeroMenu a.newArticle,
      .indexMobileMenu a.newArticle
      {
          color:#ffb347;

          font-weight:600;
      }

      .mobileMenuLogo
      {
          width:22px;
          height:22px;

          object-fit:contain;
      }


      .hero-overlay {
          top: 10.0%;
          left: 50%;
          z-index: 9000;
          transform: translateX(-50%);

          width: 90%;
          max-width: 500px;
      }
  }

  @media (max-height: 500px) {
    .hero-overlay {
        top: 1.5%;
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
    }
  }

  /* ===========================================================
     INDEX HERO (PROTOTYPE)
     Move to style.css when complete.
     =========================================================== */