/* header */

#signed-in-header-mobile, #not-signed-in-header {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    /* The top inset clears the iOS status bar when running as an installed app. It resolves to 0 in a normal browser. */
    padding: calc(10px + env(safe-area-inset-top)) 15px 10px;
    background: rgba(9, 9, 9, 0.8); /* same as #090909 with 0.8 opacity. This is how you can give only the background color opacity */
    color: #FFFFFF;
}

#not-signed-in-header ul {
    list-style-type: none;
    display: flex;
    /* The CTA pill is taller than a plain text link, so without this the link and the
       button sit at the top of the row instead of level with the pill. */
    align-items: center;
    gap: 25px;
    padding: 0;
    margin: 0;
}

/* Only rendered on the landing page, where a signed-in visitor has no side nav to log
   out from. Matches the plain header links rather than .logout-button, which is white
   and sized for the dark side nav. */
#not-signed-in-header .header-logout-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

#not-signed-in-header .header-logout-btn:hover {
    font-weight: 700;
}

#not-signed-in-header a {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Ensures the color is inherited from the parent */
}

#not-signed-in-header a:hover {
    font-weight: 700;
}

#not-signed-in-header .header-cta-btn {
    background-color: #7161EF;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

#not-signed-in-header .header-cta-btn:hover {
    background-color: #5C4EE8;
    font-weight: 600;
}

@media (max-width: 420px) {
    #not-signed-in-header {
        padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    }

    #not-signed-in-header ul {
        gap: 10px;
        align-items: center;
    }

    #not-signed-in-header .header-title {
        font-size: 1rem;
    }

    #not-signed-in-header .header-cta-btn {
        padding-left: 12px;
        padding-right: 12px;
    }
}

#signed-in-header-mobile .header-title,
#not-signed-in-header .header-title {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

#mobile-menu-button {
    font-size: 24px;
    cursor: pointer;
    padding-top: 2px;
}

/* Mobile navigation */

#signed-in-nav-mobile {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background-color: #1D1D1D;
    color: #FFFFFF;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: calc(25px + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
}

#signed-in-nav-mobile ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    transition: 0.3s;
}

#signed-in-nav-mobile li {
    transition: 0.3s;
}

#signed-in-nav-mobile li, #signed-in-nav-desktop li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 8px 10px 15px;
}

.nav-icon {
    font-size: 18px;
    width: 20px;
    margin: 0px 18px;
}

.desktop-nav-closed .edit-suggestions-nav-icon {
    margin: 0px 20px;
}

#signed-in-nav-mobile a {
    text-decoration: none;
    font-size: 20px;
    color: #FFFFFF;
    display: block;
    transition: 0.3s;
    text-wrap: nowrap;
}

#signed-in-nav-mobile .nav-tooltip {
    display: none;
}

.logout-button {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-align: left;
    text-decoration: none;
    display: flex;
    align-items: center;
}

#signed-in-nav-mobile .logout-button .nav-icon {
    margin-right: 22px;
}

#mobile-nav-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    line-height: 1;
    cursor: pointer;
}

#signed-in-nav-desktop {
    display: none;
}
  
  /* Large devices (laptops/desktops, 1000px and up) */
@media only screen and (min-width: 1000px) {
  
    /* Header and navigation */
    #signed-in-header-mobile {
        display: none;
    }
  
    #signed-in-nav-desktop {
        display: block;
        height: 100%;
        width: 54px; /* if this is changed, also change the width of the desktop nav in the popup.css file */
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        background-color: #1D1D1D;
        color: #C7C7C7;
        overflow-x: hidden;
        transition: 0.5s;
        font-size: 16px;
    }
  
    #main-content {
        width: calc(100% - 54px); /* 54px is the width of the desktop navigation */
        max-width: none;
        margin-left: 54px;
        transition: 0.5s;
    }
  
    .desktop-nav-open + #main-content {
        width: calc(100% - 255px); /* 255px is the width of the desktop navigation when open */
        margin-left: 255px;
    }
  
    #signed-in-nav-desktop.desktop-nav-open {
        width: 255px; /* if this is changed, also change the width of the desktop nav in the popup.css file */
    }
  
    #desktop-nav-header {
        background-color: #F1F1F1;
        color: #000000;
        font-family: "Noto Sans", sans-serif;
        font-weight: 600;
        padding: 20px;
        margin-bottom: 10px;
    }
  
    #desktop-nav-header-menu-btn {
        cursor: pointer;
        margin-right: 20px;
    }
  
    .desktop-nav-open #desktop-nav-header-menu-btn {
        display: none;
    }
  
    #desktop-nav-header-open {
        display: none;
    }
  
    .desktop-nav-open #desktop-nav-header-open {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-wrap: nowrap;
    }
  
    #desktop-nav-close-btn {
        cursor: pointer;
        padding: 7px 10px;
        border: 1px solid #aaa;
        border-radius: 7px;
    }
  
    #desktop-nav-close-btn:hover {
        border-color: #000;
        background-color: #F8F8F8;
    }
  
    #signed-in-nav-desktop ul {
        padding: 0;
        margin: 0;
    }
  
    #signed-in-nav-desktop li {
        padding: 0;
        position: relative;
    }
  
    #signed-in-nav-desktop a:hover, 
    #signed-in-nav-desktop li:hover .logout-button {
        color: #ffffff;
        font-weight: 700;
    }
  
    #signed-in-nav-desktop a {
        text-decoration: none;
        color: #C7C7C7;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        text-wrap: nowrap;
        padding: 12px 0px;
    }
  
    #signed-in-nav-desktop .nav-icon {
        align-self: center;
    }
  
    #signed-in-nav-desktop .logout-button {
        color: #C7C7C7;
        padding: 12px 0px;
        font-size: 16px;
    }
  
    .nav-tooltip {
        visibility: hidden; /* Hidden by default */
        background-color: #1d1d1d;
        color: #ffffff;
        padding: 3px 10px;
        border-radius: 6px;
        position: absolute;
        z-index: 10; /* Ensure tooltip is displayed above content */
        left: 60px;
        white-space: nowrap;
    }
  
    /* the tooltip little triangle */
    .nav-tooltip::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #1d1d1d transparent transparent;
    }
  
    .desktop-nav-closed a:hover + .nav-tooltip,
    .desktop-nav-closed form:has(.logout-button:hover) + .nav-tooltip {
        visibility: visible;
    }
  
    #signed-in-nav-desktop.desktop-nav-closed:has(li:hover) {
        overflow-x: visible;
    }
  
    #signed-in-nav-desktop.desktop-nav-closed:has(li:hover) a,
    #signed-in-nav-desktop.desktop-nav-closed:has(li:hover) .logout-button {
        width: 54px; /* 54px is the width of the desktop navigation when closed*/
        overflow-x: hidden;
    }
  
}