/* The header and footer every gotemail.net page shares: the home page, the inner pages
   (privacy, terms, What's New, pricing changes, thanks) and /ios. The markup is
   pages.HEADER and pages.FOOTER; build.py puts it in each page. Colours are literal here,
   not the pages' own variables, so the bar looks the same on every page. */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(1.8) blur(20px);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* Brand left, the links in the middle of the bar, iPhone and Download right. */
.site-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    height: 52px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.site-nav a { text-decoration: none; }

.site-brand {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}
.site-brand img { width: 24px; height: 24px; border-radius: 6px; }

.site-nav-links { display: flex; justify-content: center; gap: 26px; }
.site-nav-links a, .site-ios { font-size: 13.5px; color: #6e6e73; white-space: nowrap; transition: color .2s; }
.site-nav-links a:hover, .site-ios:hover { color: #1d1d1f; }

.site-nav-end { justify-self: end; display: flex; align-items: center; gap: 20px; }

.site-cta {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(180deg, #4f9eff 0%, #1F63DE 100%);
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* The iPhone app is in testing: an amber "Beta" tag, never "New" (it read like an iPhone for sale). */
.site-ios { display: inline-flex; align-items: center; gap: 5px; }
.site-ios svg { display: none; }
.beta-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #a35200;
    background: rgba(255, 159, 10, 0.16);
    padding: 1px 6px;
    border-radius: 999px;
    vertical-align: 1px;
}

/* Phones: the brand and one dark iPhone pill, nothing else. A solid bar: the blurred,
   translucent one flickers while scrolling in mobile browsers. */
@media (max-width: 920px) {
    .site-nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .site-nav-inner { grid-template-columns: 1fr auto; padding: 0 16px; }
    .site-nav-links, .site-cta { display: none; }
    .site-ios {
        gap: 6px;
        padding: 7px 14px 7px 12px;
        border-radius: 999px;
        background: #1d1d1f;
        color: #fff;
        font-weight: 500;
    }
    .site-ios:hover { color: #fff; }
    .site-ios svg { display: block; width: 15px; height: 15px; margin-top: -2px; }
    .site-ios .beta-tag { margin-left: 2px; color: #1d1d1f; background: #ffb340; }
}

.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding: 32px 24px 48px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #6e6e73;
    background: #fff;
}
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0 0 10px; padding: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #1d1d1f; }
.site-footer p { margin: 0; }

@media (max-width: 640px) {
    .site-footer { padding: 28px 16px 40px; }
}