/*
 Theme Name:   GeneratePress Child Theme for TranBC
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       B.C. Ministry of Transportation and Infrastructure
 Author URI:   
 Template:     generatepress
 Version:      1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Typography
# Layout
# Navigation
    ## Mobile Menu
    ## Navigation Search
    ## Pagination
    ## Post Navigation
# Header
# Article
# Comments
# Widgets
# Slider
# Social Icons Sidebar
# Sidebar Badges
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* noto-sans-regular - latin */
@font-face {
    font-family: 'Noto Sans';
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans'), local('NotoSans'),
    url('assets/fonts/noto-sans-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('assets/fonts/noto-sans-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-700 - latin */
@font-face {
    font-family: 'Noto Sans';
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'),
    url('assets/fonts/noto-sans-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('assets/fonts/noto-sans-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-700italic - latin */
@font-face {
    font-family: 'Noto Sans';
    font-display: auto;
    font-style: italic;
    font-weight: 700;
    src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'),
    url('assets/fonts/noto-sans-v9-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('assets/fonts/noto-sans-v9-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-italic - latin */
@font-face {
    font-family: 'Noto Sans';
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    src: local('Noto Sans Italic'), local('NotoSans-Italic'),
    url('assets/fonts/noto-sans-v9-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('assets/fonts/noto-sans-v9-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'noto-sans-semicondensed';
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    src:url("assets/fonts/noto-sans-semicondensed-500.woff2") format("woff2"),url("assets/fonts/noto-sans-semicondensed-500.woff") format("woff");
}

@font-face {
    font-family: 'noto-sans-semicondensed';
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    src:url("assets/fonts/noto-sans-semicondensed-600.woff2") format("woff2"),url("assets/fonts/noto-sans-semicondensed-600.woff") format("woff");
}

@font-face {
    font-family: 'noto-sans-semicondensed';
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    src:url("assets/fonts/noto-sans-semicondensed-700.woff2") format("woff2"),url("assets/fonts/noto-sans-semicondensed-700.woff") format("woff");
}

.site-content p a:hover {
    text-decoration: underline;
}

.entry-title,
.comments-title,
.page-header-meta,
.article-category > a,
.sidebar .widget .widget-title {
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 700;
}

.entry-meta {
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 500;
}

.comments-link {
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 500;
}

.meta-prefix {
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 500;
}

.entry-title {
    font-size: 1.5em;
}

.single-post h1.entry-title {
    font-size: 38px;
}

/* ARTICLE META TAGS*/
/* Post meta tags*/
.single .entry-meta {
    color: #000;
    font-weight: 600;
    font-size: 1em;
}

#comments .comments-pagination {
    text-align: center;
}

#comments .page-numbers {
	display: none;
}

#comments a.prev.page-numbers,
#comments a.next.page-numbers {
	display: inline;
}


/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

body {
    min-width: 225px;
}

.inside-article {
    border: 1px solid #cccccc;
}

.read-more {
    display: block;
}

@media (max-width:1100px) {
    .home .site-content,
    .single-post .site-content {
        padding: 0 10px;
    }
}

/* Override article column breakpoint*/
@media (max-width: 885px) {

    .grid-parent article.tablet-grid-50 {
        clear: both;
        width: 100%;
    }

    .separate-containers .site-main {
        margin: 10px;
    }

    .separate-containers .inside-right-sidebar,
    .separate-containers .inside-left-sidebar {
        margin-top: 10px;
    }

    /* 4:3 Aspect Ratio */
    /*.post-image img {*/
    /*    max-height: 585px;*/
    /*}*/

    /* 3:2 Aspect Ratio*/
    .generate-columns-container article .inside-article img {
        max-height: 512px;
    }
}

.generate-columns-container article .inside-article img {
    /*max-height: 219px;*/
    max-height: 396px;
}

@media (min-width:769px) {
    /* Fixed sidebar width */
    #right-sidebar {
        width: 260px;
    }

    #primary {
        width: calc(100% - 260px);
    }
}

@media (max-width:768px) {
    /* Press carousel up against header*/
    .home .site-main {
        margin-top: 0;
    }

    .blog .site-main {
        margin-left: 0;
    }

    #primary, #right-sidebar {
        transition: width 0.4s ease-in-out;
    }

   .generate-columns-container article .inside-article img {
       max-height: 497px !important;
   }
}

/* Remove padding for phones */
@media (max-width: 480px) {
    .single-post .site-content {
        padding: 0;
    }

    .single-post .inside-article {
        border-left: 0;
        border-right: 0;
    }
}

/* Main container styles */
#page {
    min-height: 90vh;
}

/* TODO: Simplify this*/
.single-post.separate-containers .page-hero + .grid-container > .site-content .site-main {
    margin-top: -80px !important;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*TODO: Refactor custom CSS*/
.page-numbers {
    padding: 1rem;
}

.menu-item a:hover {
    text-decoration: underline;
}

.main-navigation .sub-menu {
    border: 1px solid #ccc;
    border-left: 2px solid #38598a;
    border-top: 0;
}

.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
    border-left: 1px solid #036;
}

/* NAV and FOOTER  */
.main-navigation,
footer.site-info {
    border-top: solid 3px #FCBA19;
}

.nav-next > .icon-arrow {
    margin-right: 0;
    margin-left: 0.6em;
}

/*--------------------------------------------------------------
## Mobile Menu
--------------------------------------------------------------*/

#mobile-header {
    background-color: #036;
    border-bottom: 3px solid #FCBA19;
    border-top: none;
}

/*--------------------------------------------------------------
## Navigation Search
--------------------------------------------------------------*/

.search-button + .gp-icon {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 60px;
    display: block;
    color: #fff;
    cursor: pointer;
    padding: 0 20px;
}

.navigation-search.nav-search-active {
    top: 100%;
}

.navigation-search {
    display: flex;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: rgba(255,255,255,0.95);
    border-top: 5px solid #036;
}

.navigation-search .search-field,
.navigation-search .search-button {
    border: 2px solid black;
}

.navigation-search input[type="search"],
.navigation-search input[type="search"]:active {
    background-color: white;
}

.navigation-search .search-field:focus {
    border: 2px solid black;
}

.navigation-search .search-button {
    border-radius: 0;
    border-left: 0;
}

.navigation-search.nav-search-active input {
    opacity: 1;
}

.navigation-search.nav-search-active .search-field,
.navigation-search.nav-search-active .search-field:focus {
    background: #ffffff;
    color: #000;
}

.navigation-search.nav-search-active .search-field::placeholder {
    color: #000000;
}

/*--------------------------------------------------------------
## Pagination
--------------------------------------------------------------*/

.paging-navigation span,
.paging-navigation a {
    background: #036;
    color: #fff;
}

.paging-navigation a:visited {
    color: #fff;
}

.paging-navigation .current {
    background: #38598a;
}

/*--------------------------------------------------------------
## Post Navigation
--------------------------------------------------------------*/

.single-post .post-navigation {
    display: flex;
    flex-wrap: wrap;

    margin-top: 1em;
    padding-top: 1em;
    padding-bottom: 1em;

    border-top: 1px solid #cccccc;

    align-items: stretch;
}

.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 49%;
    flex: 1 0 49%;
}

.single-post .post-navigation .nav-previous {
    display: inline-flex;
}

.single-post .post-navigation .nav-next {
    display: inline-flex;
    flex-direction: row-reverse;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.page-header-meta .cat-links,
.page-header-meta .tags-links {
    display: block;
    line-height: 1.05em;
}

.page-header-meta .gp-icon {
    margin-right: .6em;
    opacity: .7;
    display: inline-flex;
    align-self: center;
}

.page-header-meta .gp-icon svg {
    height: 1em;
    width: 1em;
    top: .125em;
    position: relative;
    fill: currentColor;
}

.page-header-meta,
.page-header-meta > span {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid;
}

/*--------------------------------------------------------------
# Article
--------------------------------------------------------------*/

.article-content-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.article-content-meta > div {
    margin: 0 1.3em 0.5em 0;
}

.entry-header > .article-category {
    margin-bottom: 1.3rem;
}

.article-category {
    /* TODO: Fix comma in category list */
    color: transparent;
}

.article-category > a {
    color: #fff;
    background: #036;
    padding: 0.13rem 0.5rem;
    border-radius: 0.2em;
    font-size: 0.94rem;
}

.inside-page-hero h2 {
    font-size: 40px;
}


/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/

.separate-containers .comments-area {
    /* Override container padding - delegate to children */
    padding: 0;
    border-top: 3px solid #ffab00;
}

.nx-comment-content {
    padding: 25px;
    border: 1px solid #cccccc;
    border-top: 0;
}

.nx-comments-title {
    padding: 15px 20px;
    margin: 0;
    line-height: 1.5;

    background: #036;
    color: white;
}

.comment-meta .avatar {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.bypostauthor > article > .comment-content {
    border-left: 3px solid #036;
}

@media (max-width: 768px) {
    /* Container Gutter */
    .separate-containers .site.grid-container {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 769px) {
    /* Posts grid styles */
    .generate-columns .inside-article {
        transition: all 0.2s ease-in;
    }
    .generate-columns .inside-article:hover {
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
    }
}
.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.read-more-container {
    margin-top: auto;
    text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 3px;
}

.comment-form input[type="text"],
.comment-form input[type="text"]:focus,
.comment-form input[type="email"],
.comment-form input[type="email"]:focus,
.comment-form textarea,
.comment-form textarea:focus {
    color: #000000;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

/* Give widget blocks depth*/
.widget-area .widget {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.widget-area .inner-padding > * {
    padding: 10px 15px;
}

.sidebar .widget .widget-title {
    font-style: normal;
    color: #ffffff;
    background: #003366;

    margin: 0;

}

.widget-grid {
    clear: both;
    padding-left: 10px;
    width: 100%;
}

.site-main .widget-title {
    font-style: normal;
    color: #ffffff;
    background: #003366;
    font-size: 1.6em;
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 700;
    padding: 10px 15px;
    /*margin-top: 10px;*/
    margin-bottom: 10px;
}

.sidebar .widget:first-child {
    background: #38598a;
}

.sidebar .widget:first-child h2 {
    color: #ffffff;
    font-weight: 700;
}

.sidebar .widget:first-child .textwidget {
    color: #ffffff;
}

/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/

/* Home Page Carousel */
.nx-home-carousel {
    margin-bottom: 10px;
    margin-left: 11px;
    /* 1 pixel to align with post borders*/
    margin-right: 1px;
}

@media (max-width:768px) {
    .nx-home-carousel {
        margin-left: -10px;
        margin-right: -10px;

        width: calc(100% + 20px) !important;
    }
}

/*- Carousel Style */
.nx-home-carousel .caption-wrap {
    background: rgba(0, 51, 102, 0.9) !important;
}

.nx-home-carousel .caption-wrap p {
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 500;
    font-size: 1.5em;
    line-height: 1.2;
}

.nx-home-carousel {
    /*border: 1px solid rgba(232, 234, 237, 1);*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.home .nx-home-carousel .caption-wrap {
    margin-bottom: 15px !important;
    margin-left: 20px !important;
}

.home .nx-home-carousel {
    margin-bottom: 10px !important;
}


/*--------------------------------------------------------------
# Social Icons Sidebar
--------------------------------------------------------------*/

.nx-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    font: 16px "noto-sans", sans-serif;
    font-weight: 600;
}

.nx-social-icons a {
    text-decoration: none;
    color: #778899;
}

.nx-social-icons .c-icon {
    width: 32px;
    height: 32px;

    fill: currentColor;
    transition: .2s;
    vertical-align: middle;
}

.c-link--facebook:hover     { color: #3b5998; }
.c-link--twitter:hover      { color: #55acee; }
.c-link--youtube:hover      { color: #cd201f; }
.c-link--pinterest:hover    { color: #bd081c; }
.c-link--instagram:hover    { color: #d43377; }
.c-link--mail:hover         { color: #34465d; }
.c-link--flickr:hover       { color: #ff1981; }

.c-link {
    position: relative;
    color: #bbb;
}

.c-link:not(:last-of-type) {
    margin-right: 2px;
}

.c-tooltip::before,
.c-tooltip::after {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: .2s;
}

.c-tooltip::after {
    content: attr(aria-label);
    bottom: calc(100% + 10px);
    padding: .61em .93em;
    font-size: .875rem;
    color: white;
    border-radius: 3px;
    background: #3b5998;
}

.c-tooltip:hover::before,
.c-tooltip:hover::after {
    opacity: 1;
    transform: translate(-50%);
}

/*--------------------------------------------------------------
# Sidebar Badges (TODO: REFACTOR)
--------------------------------------------------------------*/

/* Services Widget Typography */
.widget_links .blogroll > li {
    font-family: "noto-sans-semicondensed", sans-serif;
    font-weight: 600;
    font-size: 13px;
}

#linkcat-5680883 .blogroll li {
    padding: 1em;
    margin-bottom: 1em;

    border: 4px solid black;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #000;

    transition: all 0.2s ease-in;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#linkcat-5680883 .blogroll li a {
    display: block;
    font-family: "noto-sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000;

    margin-bottom: .5em !important;
    padding-bottom: .5em;
    /*border-bottom: 2px solid #FCBA19;*/
    border-bottom: 3px solid #000;
}

.blogroll li:hover {
    transition: all 0.2s ease-in;
    box-shadow: 5px 10px 0 rgba(0,0,0,0.3);
}

/* WSPS - Featured Image */
.generate-columns-container article .inside-article img {
    width: 100%;
    -o-object-fit: cover !important;
    object-fit: cover !important;
    object-position: center;
    /* 16:9 Aspect ratio*/
    max-height: 219px;
}

.generate-columns-container .entry-header .comments-link {
    float: right;
}

.generate-columns-container .entry-header .comments-link .icon-comments {
    display: inline;
}

/* TOP BAR - Advisory section */
/* TODO: Make more specific to widget advisory content. */
.top-bar .widget-title {
    display: inline-flex;
    font-size: 16px;
    font-weight: 500;
    background: #d4351c;
    padding: 0 0.8em;
    margin: 0 1em 0 0;
    align-self: stretch;
}

.top-bar a {
    text-decoration: underline;
}

.top-bar .textwidget {
    text-align: left;
}

.top-bar .textwidget p {
    margin: auto;
}

#text-15 {
    display: flex;
    align-items: baseline;
}