:root {
    --body-background-color: var(--spk-site-background-color-primary);
    --navigation-background-color: var(--spk-site-sub-header-background-color-primary);
    --footer-background-color: var(--spk-site-footer-background-color-one);
}

body {
    background-color: var(--body-background-color);
    margin: 0;
}

.app {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Fill out the whole page but take height from navigation and footer into calculation */
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
}

nav {
    height: var(--nav-height);
    background: var(--navigation-background-color);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: 'navigation-primary navigation-center navigation-secondary';
    align-items: center;
    justify-content: center;
}

nav .navigation-primary {
    grid-area: navigation-primary;
    margin-left: 1rem;
}

nav .navigation-secondary {
    grid-area: navigation-secondary;
    justify-self: right;
}

nav .navigation-item {
    display: flex;
    align-items: center;
    background-color: var(--spk-site-sub-header-button-background-color-default);
    color: var(--spk-site-sub-header-button-icon-color-default);
    border: 1px solid var(--spk-site-sub-header-button-stroke-color-default);
    border-radius: 6px;
    width: fit-content;
    padding: 7px 8px;
    text-decoration: none;
}

nav .navigation-item:hover {
    background-color: var(--spk-site-sub-header-button-background-color-hover);
    border: 1px solid var(--spk-site-sub-header-button-stroke-color-hover);
    color: var(--spk-site-sub-header-button-icon-color-hover);
    text-decoration: none;
}

nav .navigation-primary, nav .navigation-secondary {
    margin: 0 12px;
}

nav .navigation-logo {
    grid-area: navigation-center;
    justify-self: center;
    align-self: center;
    z-index: 10;
}

/* Style any links within the Oracle content for alerts,
notifications, GA answers, related answers or search FAQs */
#alert .modal a,
#notification a,
.faq-answer a,
.faq-item-answer a {
    color: var(--spk-link-color-text-primary-default);
}

#alert .modal a:hover,
#notification a:hover,
.faq-answer a:hover,
.faq-item-answer a:hover {
    color: var(--spk-link-color-text-primary-hover);
}

#alert .modal a:active,
#notification a:active,
.faq-answer a:active,
.faq-item-answer a:active {
    color: var(--spk-link-color-text-primary-active);
}

#alert .modal a:visited,
#notification a:visited,
.faq-answer a:visited,
.faq-item-answer a:visited {
    color: var(--spk-link-color-text-primary-visited);
}

.error-page {
    padding: 2rem 1rem;
}

.app-content {
    padding: 0 1rem;
}

.help-center-title {
    display: block;
    margin: 1rem 0 1.5rem 0;
}

@media only screen and (min-width: 768px) {
    .help-center-title {
        margin: 2rem 0;
    }
}

#beginners-guide,
#quick-paths,
#need-more-help.front {
    margin-top: 2.5rem;
}

footer {
    height: var(--footer-height);
    background: var(--footer-background-color);
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
}

footer .footer-disclaimer {
    background-color: var(--spk-site-footer-background-color-two);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 16px;
}

footer .footer-disclaimer-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media only screen and (min-width: 768px) {
    .app-content {
        padding: 0 1.5rem;
    }

    #need-more-help.front {
        margin-bottom: 2rem;
    }
}

@media only screen and (min-width: 1024px) {
    .app {
        max-width: 1156px;
        width: 95%;
    }

    .app-content {
        padding: 0 5rem;
    }
}

.text-center {
    text-align: center;
}

.nav-row-container {
    display: block;
    margin: 16px 0;
}