/* ********************************
*
*   Stylesheet for PASDA
*   by Graphics and Design
*
*   Revised 2022-10-27
*
********************************* */

/* COLORS
***********************************
White           #FFFFFF
Gray Lt         #EDEDED
Gray Lt-2       #F5F5F5 (table cell bgd)
Gray Lt-3       #E2E2E2
Gray Lt-4       #C9C9C9 (hz rule)
Gray            #555555 (text) 
Gray Dk         #3C3C3C
Gray Dk-2       #6F6F6F (table header)
Gray Dk-3       #656565 (icons)
Gray Dk-4       #484848 
Black           #000000
PASDA Yellow    #FDB827
PASDA Blue      #094FA3

***********************************/


/* TYPOGRAPHY
***********************************
FONTS
Roboto Bold (headings, navigation)
Roboto Regular (body text)

SIZES
H1          30px
H1 Ihome)   40px    2.5rem
H2          28px   
H2 (home)   24px
H3          24px
h3 subhead  18px
h4          16px    .875
Body text   14px    .875rem
Navs        16px    1.0rem (main menu, data summary)
Footer      13px    .8125rem
TH          24px    1.5rem
            22px    
            28px    1.75rem

STYLE
H1          Normal
H2          Normal
H2 (home)   Normal
H3          Normal
h3 subhead  Normal
h4          Uppercase
Body text   Normal
Navs        Normal
Footer      Normal 
TH          Normal        


/* CSS VARIABLES
**********************************/
:root {
    /* Colors */
    --pasda-blue :          #094FA3;
    --pasda-yellow :        #FDB827;
    --pasda-gray-dk-3 :     #656565;
    --pasda-gray-lt-4 :     #C9C9C9;
    --pasda-gray-dk-2 :     #6F6F6F;
    --pasda-gray-dk-4 :     #484848;
    --pasda-body-bgd :      #EDEDED;
    --pasda-body-text :     #555555;
    /* Fonts */
    --pasda-font-sans-serif:    Roboto,sans-serif; 
    --pasda-body-font-size:     .875rem;
    --pasda-body-font-weight:   400;
    --pasda-font-size-16px:     1.0rem;
}

/* ELEMENTS
***********************************/
body {
    background-color: var(--pasda-body-bgd);
    color: var(--pasda-body-text);
    font-family : var(--pasda-font-sans-serif);
    font-size: var(--pasda-body-font-size);
    font-weight: var(--pasda-body-font-weight);
}

/* FOOTER
***********************************/
footer {
    background-color: var(--pasda-gray-dk-4);
    color: #fff;
    padding-top:15px;
    padding-bottom:15px;
}
footer .nav {
    justify-content: center;
}
footer .nav .nav-link {
    color:#fff;
    font-size: .8125rem;
}
footer .nav .nav-link  {
    padding-top:0;
    padding-bottom:0;
}
footer .nav .nav-item:not(:last-child) a {
    border-right:1px solid #fff;
}
@media (max-width:500px) {
    footer .nav {
        flex-direction: column;
    }
    footer .nav .nav-item:not(:last-child) a {
        border-right:none;
    }
    footer .nav .nav-item.nav-item:not(:last-child) {
        margin-bottom:1em;
    }
}


h1 {
    color: var(--pasda-blue);
    font-size: calc(1.375rem + .4vw);
}
main > h1 {
    margin-left:2.0rem;
}
h2 {
    font-size: calc(1.25rem + .4vw);
}
h3 {
    font-size: calc(1.15rem + .4vw);
    margin-top:.5rem;
}
h3 a {
    color:var(--pasda-blue);
    text-decoration: none;
}
h3 a:hover {
    text-decoration: underline;
}
h4 {
    font-size: 1.0rem;
}
hr {
    color: var(--pasda-gray-lt-4);
}


/* LAYOUT
***********************************/
@media (min-width: 1400px)
{
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px !important;
    }
}
._pasda-content {
    margin-top:26px;
    margin-bottom:26px;
    padding: 47px 40px 48px;
    background-color: #fff;
}
section {
    padding-top: 40px;
    padding-bottom: 40px;
    border-top:1px solid var(--pasda-gray-lt-4);
}
section:first-of-type {
    margin-top: 40px;
}
._pasda-content section:first-child {
    border-top:none;
    margin-top:0;
    padding-top:0;
}

/* MASTHEAD
***********************************/
header {
    padding-top:42px;
    padding-right:1rem;
    padding-bottom:40px;
    padding-left:1rem;
    margin-bottom:47px;
    background-image: url("/images/header-bgd.png");
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 154px;
}
/* ----- Home page ----- */
body.home-category header {
    background-image: url("/images/header-bgd-tall.png");
    max-height: fit-content;
    margin-bottom:0;
}
body.home-category header h1,
body.home-category header p {
    color:#fff;
    text-align: center;
}
body.home-category header h1 {
    font-size: calc(2.0rem + .4vw); 
    margin:100px auto 0;
}
body.home-category header p {
    font-size: calc(1.30rem + .4vw); 
    max-width: 865px;
    margin:10px auto 90px;
}
body.home-category ._pasda-content {
    margin-top:0;
}
@media (max-width:700px) {
    body.home-category header h1 {
        margin:20px auto 0;
    }
    body.home-category header p {
        margin:10px auto 20px;
    }  
}
/* ---------------------- */

header .navbar-brand {
    width:auto;
}
header .navbar-brand img {
    max-width:389px;
    display: inline-block !important;
    vertical-align: top !important;
}
@media (max-width:500px) {
    header {
        padding-top:30px;
        padding-bottom:30px;
    }
    header .navbar-brand {
        width:60% !important;
    } 
    header .navbar-brand img {
        width:100% !important;
    } 
}

/* ----- Primary Navigation ----- */
header .navbar {
    padding-top:0;
    padding-bottom:0;
}
header .navbar .container-fluid {
    padding-left:0;
    padding-right:0;
}
header .navbar .navbar-nav {
    padding-left:1rem;
}
header .navbar-collapse {
    flex-grow:unset; 
}
header .navbar-collapse.show {
    background-color: var(--pasda-gray-dk-4);
    
}
header .navbar-nav .nav-item .nav-link {
    color:#fff;
    font-size: 1.0rem; /* 16px */
}
header .navbar-nav .nav-item .nav-link:hover {
    color: var(--pasda-yellow);
}
/* Style nav of active category */
body.home-category header .navbar-nav #_pasda-home-nav,
body.about-category header .navbar-nav #_pasda-about-nav,
body.events-category header .navbar-nav #_pasda-events-nav,
body.share-category header .navbar-nav #_pasda-share-nav,
body.help-category header .navbar-nav #_pasda-help-nav,
body.contact-category header .navbar-nav #_pasda-contact-nav {
    color: var(--pasda-yellow);
}
/* Nav button toggler */
header nav button.navbar-toggler,
header nav button.navbar-toggler .navbar-toggler-icon {
    color: #ededed;
    border-color: transparent !important;
    border-width:0 !important;
}
header nav button.navbar-toggler .navbar-toggler-icon {
    background-image : url("/images/icons/navbar-toggler-icon.svg");
}

/* HOME PAGE 
***********************************/
body.home-category h2 {
    color: var(--pasda-blue);
}
body.home-category ._pasda-content {
    background-color: transparent;
}
body.home-category section {
    border-top:none !important;
}
/* ---- Search Section ---- */
body.home-category section._pasda-home-search-section {
    margin-top:0 !important;
    margin-bottom: 0 !important;
    padding-top:0 !important;
}
body.home-category section._pasda-home-search-section ._pasda-content {
    margin-bottom: 0 !important;
}
body.home-category ._pasda-browse-ftp span {
    color: var(--pasda-blue);
    font-size: calc(1.15rem + .2vw);
    margin-right:1em;
}
body.home-category ._pasda-home-search-section  svg {
    fill: var(--pasda-blue);
    max-height:56px;
    
}
body.home-category ._pasda-home-search-section svg:hover {
    fill: var(--pasda-yellow);
}

/* ---- Apps & Tools Section ---- */
body.home-category ._pasda-home-apps-and-tools-section {
    background-color: #fff;
    padding-top:50px !important;
    padding-bottom:0 !important;
}
body.home-category ._pasda-home-apps-and-tools-section ._pasda-content {
    margin-bottom: 0 !important;
    padding-bottom: 80px !important;
}
body.home-category ._pasda-home-apps-and-tools-section h2 {
    margin-bottom:50px;
}
body.home-category ._pasda-home-apps-and-tools-section svg {
    fill: var(--pasda-gray-dk-3);
    width:100%;
    height:100%;
    max-height:56px;
    margin-bottom:15px;
}
body.home-category ._pasda-home-apps-and-tools-section svg:hover {
    fill: var(--pasda-yellow);
}
body.home-category ._pasda-home-apps-and-tools-section ._pasda-apps-and-tools-list li {
    text-align: center;
    display: block;
}
body.home-category ._pasda-home-apps-and-tools-section ._pasda-apps-and-tools-list li a {
    color: var(--pasda-body-text) !important;
    text-align: center;
    text-decoration: none;
}
/* ---- Data Shortcuts Section ---- */
body.home-category ._pasda-home-data-shortcuts-section {
    background-color: #fff;
    padding-top:0 !important;
}
body.home-category ._pasda-home-data-shortcuts-section ._pasda-content {
    border-top:1px solid var(--pasda-gray-dk-3) !important;
    padding-top:90px !important;
}
body.home-category ._pasda-home-data-shortcuts-section h2 {
    margin-bottom:50px;
}
body.home-category ._pasda-home-data-shortcuts-section svg {
    fill: var(--pasda-gray-dk-3);
    width:100%;
    height:100%;
    max-height:56px;
    margin-bottom:15px;
}
body.home-category ._pasda-home-data-shortcuts-section svg:hover {
    fill: var(--pasda-yellow);
}
body.home-category ._pasda-home-data-shortcuts-section ._pasda-data-shortcuts-list li {
    text-align: center;
    display: block;
}
body.home-category ._pasda-home-data-shortcuts-section ._pasda-data-shortcuts-list li a {
    color: var(--pasda-body-text) !important;
    text-align: center;
    text-decoration: none;
}

/* ---- Additional Info Section ---- */
body.home-category ._pasda-home-additional-info-section {
    padding: 0;
}
body.home-category ._pasda-home-additional-info-section ._pasda-pa-base-themes {
    background-color: #e2e2e2;
    width: 100%;
}
body.home-category ._pasda-home-additional-info-section ._pasda-pa-base-themes > div:first-child {
    max-width:500px !important;
}
body.home-category ._pasda-home-additional-info-section ._pasda-new-additions {
    width: 100%;
}
body.home-category ._pasda-home-additional-info-section ._pasda-new-additions hr {
    color: var(--pasda-gray-dk-4);
}
body.home-category ._pasda-home-additional-info-section ._pasda-new-additions > div:first-child {
    max-width:500px !important;
}

/* SEARCH-RELATED PAGES
***********************************/
/* ---- Return to Search on data summary and search results pages ---- */
body.data-summary-category h1 {
    /*margin-left:40px;*/  
  }
  ._pasda-return-to-search {
      font-size: 1.4rem;
  }
  @media (max-width:768px) {
      ._pasda-return-to-search {
          margin-left: 40px;
          border: 1px solid var(--pasda-gray-dk-4);
          border-radius: 6px;
          padding:4px 8px 4px 4px;
          width: fit-content;
          font-size: var(--pasda-body-font-size);
      }
  }
  ._pasda-return-to-search a {
      color: var(--pasda-body-text);
      text-decoration: none;
  }
  ._pasda-return-to-search a:hover {
      color: var(--pasda-yellow);
  }
  ._pasda-return-to-search a svg {
      fill: var(--pasda-yellow);
  }
  .dataSummaryCategoryTitles {
      font-size:12pt;

  /* ---- Search Links on data summary and search results pages ---- */
._pasda-search-links .nav-item {
    border-right:1px solid var(--pasda-yellow);
    padding-right:6px;
    padding-left:6px;
    margin:0 !important;
}
._pasda-search-links a {
    color:var(--pasda-body-text);
    padding:0 !important;
    margin:0 !important;
}
._pasda-search-links a.nav-link {
    display:inline-block;
}
._pasda-search-links .nav-item:last-child {
    border-right:none;
}
._pasda-search-links .nav-item:first-child {
    padding-left:0;
}
._pasda-search-links a:hover,
._pasda-search-links a:hover span {
    text-decoration: underline;
}
._pasda-search-links a span {
    font-size:75%;
    display: inline-block;
}
@media (max-width:768px) {
    ._pasda-search-links .nav-item,
    ._pasda-search-links a {
        padding-left: 0px;
        border-right:none !important;
    }
}

/* ADVANCED SEARCH PAGE
***********************************/
body.search-category h2 {
    color: var(--pasda-blue);
}
body.search-category ._pasda-content:last-of-type {
    margin-top:0 !important;
    padding-top:0 !important;
}

/* SEARCH RESULTS PAGE
***********************************/
body.search-results-category table {
    margin-top:30px;
    color: #212529 !important;
}
body.search-results-category table thead {
    background-color: var(--pasda-gray-dk-2);
    color:#fff !important;
}
body.search-results-category table thead th {
    font-size: calc(1.25rem + .2vw);
    font-weight: normal;
    border: 1px solid var(--pasda-gray-lt-4);

}
body.search-results-category table tbody td {
    border: 1px solid var(--pasda-gray-lt-4);
}
body.search-results-category table tbody tr > td:first-child,
body.search-results-category table tbody tr > td:last-child {
    font-size: calc(1.25rem + .2vw);
}
body.search-results-category table tbody td h3 { 
    margin-top:3px !important;
    font-size: calc(1.25rem + .2vw);
}

body.search-results-category .active>.page-link, 
body.search-results-category .page-link.active {
    color: #fff;
    background-color: #626262;
}


/* DATA SUMMARY PAGE
***********************************/
body.data-summary-category h3 > span.subhead {
    font-size:75%;
}
body.data-summary-category section:first-of-type {
    margin-top: 30px;
    padding-top:10px;
}
body.data-summary-category section {
    padding-top:30px;
    padding-bottom: 14px;
}
body.data-summary-category section:not(._pasda-title-section) a {
    width:90%;
    white-space: pre-wrap !important; /* Override Bootstrap */
    display:inline !important;
    word-wrap: break-word;
}

/* GIS BASICS PAGES
***********************************/
._gis-basics-toc {
    margin-bottom:1rem;
}
._gis-basics-toc .nav:first-of-type li a {
    padding-left:0;
    padding-right:0;
}
._gis-basics-toc .nav .nav li a {
    padding-left:1rem;
}
._gis-basics-toc h2,
._gis-basics-toc button  {
    font-size: var(--pasda-body-font-size);
    font-weight: bold;
}
@media (min-width:768px) {
    ._gis-basics-content .flex-fill:first-child {
        padding-right:2rem;
    } 
}