/* Veterans Employment Portal styles */
/* some elements have increased specificity so they can override declarations from jobs-style.css */

h1#main-title { color:#4f4e43; margin-bottom:0; display: none; }

article#primaryContent h2, article#primaryContent h3, article#primaryContent h4 { color:#4f4e43; }

.acknowledgement, #contact-box { background-color:#f3f3f3; padding:1.5rem; margin:1.5rem 0; }
.acknowledgement p { font-size:0.9rem; margin:0; padding:0; }
#contact-box h2 { margin-top:1rem; }
article#primaryContent #contact-box a:focus { background-color:#e2ddae; outline-offset:0; }

/* VEP links grid on home page */
#links-wrapper { display:grid; grid-gap:1rem; grid-template-columns:auto 250px; grid-template-rows:auto; grid-template-areas:'grid-links quick-links'; margin-bottom:1rem; }
#links-wrapper #grid-links { grid-area:grid-links; }
#links-wrapper #quick-links { grid-area:quick-links; margin-top:1rem; }

.links-grid { display:flex; flex-wrap:wrap; grid-gap:1rem; list-style-type:none; margin:0; padding:0; }
article#primaryContent .links-grid a { border-radius:0.8rem; align-items:center; background-color: #5C874B; border:none; color:#fff; display:flex; flex:0 0 30%; font-size:1.2rem; font-weight:700; justify-content:center; line-height:1.6; margin:0; min-height:80px; padding:2rem 0.5rem; text-align:center; text-decoration:none; }
article#primaryContent .links-grid a:visited { color:#fff; }
article#primaryContent .links-grid a:hover { text-decoration:underline; }
article#primaryContent .links-grid a:focus { color:#333; text-decoration:underline; }
article#primaryContent .links-grid a:active { color:#d0c580; }

/* VEP menu */
nav#submenu { margin-bottom:1rem; }
nav#submenu ul { list-style-type:none; margin:0; padding:0.5rem 1rem; }
nav#submenu ul li { margin:0.5rem 0.1rem 0.5rem 0.75rem; text-indent:-1rem; }
nav#submenu ul li a { border-bottom:1px solid transparent; color:#333; display:block; padding:0.2rem 0.4rem; text-decoration:none; }
nav#submenu ul li a::before { content:""; border-bottom:0.4em solid transparent; border-left:0.4em solid #4f4e43; border-top:0.4em solid transparent; display:inline-block; height:0; margin-right:0.6em; width: 0; }
nav#submenu ul li:hover, nav#submenu ul li:focus { background-color:#4f4e43; border-radius:4px; color:#fefefe; }
nav#submenu ul li:active { background-color:#7f569e; }
nav#submenu ul li a:hover, nav#submenu ul li a:active { background-color:transparent !important; border-radius:4px; color:#fefefe !important; }
nav#submenu ul li a:focus { background-color:#4f4e43; border-radius:4px; color:#fefefe !important; text-decoration:underline; outline:2px solid #444; }
nav#submenu ul li a.current { background-color:#4f4e43; border-radius:4px; color:#fefefe; }
nav#submenu ul li a.current::before { border-left:0.4em solid #fefefe; }

/* VEP quick links */
#quick-links, nav#submenu { background-color:#efefe8; }
article#primaryContent #quick-links h2 { background-color:#4f4e43; color:#fefefe; font-size:1.2rem; margin:0; padding:0.5rem; border-bottom: 0.5rem solid #5C874B; }
#quick-links ul { list-style-type:none; margin:0; padding:0.8rem; }
article#primaryContent .columnWrapper #quick-links ul li { margin:0 0 1rem 0; }
article#primaryContent .columnWrapper #quick-links ul li a:focus { background-color:#e2ddae; outline-offset:0; }

article#primaryContent .columnWrapper { grid-template-columns:250px auto; grid-template-areas:'rightCol leftCol'; }
article#primaryContent .rightCol { margin-top:1.5rem; min-width:initial; }

/* 'on this page' links */
#this-page { display:none; background-color:#efefe8; border-left:0.5rem solid #4f4e43; margin-top:1.5rem; padding:1rem 1rem 0.5rem 1rem;}
#this-page h2 { color:#000; font-size:1.5rem; margin:0; padding:0 0 0.2rem 0; }
#this-page ul { line-height:1.6; list-style-type:disc; margin:0.5rem 0.9rem; padding:0; }
#this-page ul li a:focus { background-color:#e2ddae; outline-offset:0; }

/* button links, eg interview tips */
article#primaryContent a.buttonLink { background:#4f4e43; display:inline-block; }
article#primaryContent a.buttonLink:hover, article#primaryContent a.buttonLink:focus { background:#e2ddae; }

@media screen and (max-width:57em) {
    article#primaryContent .links-grid a { flex:0 0 44%; }
}

@media screen and (max-width:44em) {
    #links-wrapper { grid-gap:0.5rem; grid-template-columns:1fr; grid-template-areas:'grid-links' 'quick-links'; }
    article#primaryContent .links-grid a { flex:0 0 46%; }
}

@media screen and (max-width:39em) {
    article#primaryContent .links-grid a { flex:0 0 90%; margin:0 auto; }
    /*.content-wrapper { grid-gap:1rem; grid-template-columns:1fr; grid-template-areas:'content' 'side-panel'; margin-bottom:1rem; }*/
}