/* first experience global styles

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */


/* ==========================================================================
   setup
   ========================================================================== */
:root {
    --grey-33: #333333;
    --grey-53: #535353;
    --gold:    #fdcf2f;
    --wri-red: #dd1100;

    --nav-bg:         #222222;
    --nav-hover:      #333333; 
    --nav-ddl-bg:     #333333f0;
    --nav-item-hover: #555555;
}

html { 
    border: none; 
    color: var(--grey-53);
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

header .inner,
section,
footer {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.inner { margin: 0 auto; }
section .inner { max-width: 1000px; }
header .inner, footer .inner { max-width: 1200px; }

/*override*/
.chevron-after:after { margin-left: 0.1875rem; }



/* ========================================================================== 
   general/shared
   ========================================================================== */
section { padding-bottom: 3.125rem; padding-top: 3.125rem; }



/* ========================================================================== 
   header/nav
   ========================================================================== */
#header {
    background: var(--nav-bg);
    color: #fff;
}
.nav {
    position: relative;
    z-index: 9999;
    align-items: center;
    display: grid;
    grid-spacing: 1rem;
    grid-template-columns: 1fr 1fr;
}


/*logo*/
a#nav-logo { 
    align-items: center;
    display: inline-flex;
    justify-content: center;
    justify-self: start;
    /*temp*/
    margin: 1.5rem 0;
}
#logo-img { 
    margin-right: 0.375rem; 
    height: 3.125rem; /*50px*/ 
    width: 3.125rem; /*50px*/ 
}
#logo-text {
    height: 0.9375rem; /*15px*/ 
    width: 18.75rem; /*300px*/ 
}


/*desktop*/
.nav ul {
    justify-self: end;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

.nav li { display: inline-block; position: relative; }

.nav li a {
    display: block;
    color: #fff;
    padding: 2.625rem 1.125rem;
    position: relative;
    font-size: 0.9375rem;
    line-height: 1;
}

.nav .has-subnav { user-select: none; }

.nav .has-subnav a {
    display: inline-block;
    vertical-align: middle;
    padding-right: 0;
}
.nav .nav-arrow {
    background: url('https://www.wolfram.com/start/img/nav-arrow.png') no-repeat 0 0;
    background-size: 20px;
    border: 8px solid var(--nav-bg);
    width: 10px;
    height: 7px;
    left: -2px;
    outline: none;
    vertical-align: middle;
    position: relative;
    box-sizing: content-box;
}
.nav .show-apply .nav-arrow,
.nav .has-subnav:hover .nav-arrow {
    background-position: -10px 0;
    border-color: var(--nav-hover); 
}


/*hovers*/
.nav ul li:hover button { border-color: var(--nav-hover); }
.nav ul ul li:hover { background: var(--nav-item-hover); }

.nav .dropdown {
    z-index: 20;
    background: var(--nav-ddl-bg);
    position: absolute;
    display: none;
    /*TEMPORARY*/
    right: 0;
}
.nav li:last-child .dropdown { right: 0; }
.nav .dropdown li {
    display: block;
    text-align: left;
}
.nav .dropdown a { 
    padding: 0.75rem 1.125rem; 
    line-height: 1.2;
    white-space: nowrap;
    width: 100%; 
}
.nav .menu { display: none; }

.nav ul li:hover,
#about-menu:hover,
#resources-menu:hover,
#pisa-index #pisa,
#take-action-index #take-action,
#making-the-case-index #making-the-case,
#apply-index #about-menu,
#news-index #news,
#community-index #about-menu,
#what-is-cbm-index #about-menu,
#module-summary #resources-menu,
#activity-compute #resources-menu,
#activity-define #resources-menu,
#activity-interpret #resources-menu,
#activity-translate #resources-menu,
#chapter-introduction #resources-menu,
#chapter-review #resources-menu,
#primer #resources-menu,
#project #resources-menu,
#resources-index #resources-menu,
#materials-index #resources-menu,
#download-index #resources-menu { 
    background: var(--nav-hover); 
}



/* ========================================================================== 
   footer
   ========================================================================== */
#footer {
    background: #000;
    color: #a4a4a4;
    font-size: 14px;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}
#footer .inner {
    display: grid;
    grid-spacing: 1rem;
    grid-template-columns: 1fr 1fr;
}
#footer p:first-child { justify-self: start; }
#footer p:last-child { justify-self: end; }
#footer a { color: #a4a4a4; }
#footer a:hover { color: #fff; }







/* ========================================================================== 
   responsive breakpoint styles 
   ========================================================================== */
@media (max-width: 1200px) {}


@media (max-width: 900px) { 
    /*setup*/
    header .inner, section, footer { padding-left: 1.5rem; padding-right: 1.5rem; }


    /*header/nav*/
    .nav .dropdown { right: 0; }
}


@media (max-width: 600px) { 
    /*setup*/
    section, footer { padding-left: 1rem; padding-right: 1rem; }
    header .inner { padding: 0; }


    /*general/shared*/
    section { padding-bottom: 24px; padding-top: 24px; }


    /*header/nav*/
    a#nav-logo { margin: 10px 0; }
    #logo-img { margin-left: 1rem; }
    .nav ul {
        display: none;
        background: var(--nav-bg);
        grid-column: 1 / span 2;
        width: calc(100%);
        padding: 5px 0;
        position: relative;
    }
    .nav .menu {
        justify-self: end;
        display: inline-block;
        border: 0;
        border-top: 12px double #bfbfbf;
        width: 20px;
        height: 20px;
        background: transparent;
        position: relative;
        right: 1rem;
        cursor: pointer;
        outline: none;
    }
    .nav .menu:after {
        content: '';
        width: 20px;
        height: 4px;
        background: #bfbfbf;
        display: block;
        position: absolute;
        left: 0;
    }
    .nav .menu:hover { border-color: #fff; }
    .nav .menu:hover:after { background: #fff; }
    .nav li { display: block; }
    .nav ul li a { font-size: 1.125rem; padding: 11px 1.125rem; }
    .nav .dropdown {
        background: var(--nav-hover);
        position: relative;
        text-indent: 8px;
    }
	.nav .nav-arrow {
		left: unset;
		position: absolute;
		right: 0;
	}

    /*footer*/
    #footer .inner { grid-template-columns: 1fr; }
    #footer p { justify-self: center !important; }
}


@media (max-width: 320px) {}