/*
Theme Name: Trigger for Nick
Author: Toby and Paul
Description: A custom theme designed by Toby at Trigger Solutions and implemeted by Paul
Version: 1.0
Text Domain: trigger
*/


/******************************* general styles *******************************/
html, body, ul, li, div, form, input, h1, h2, h3, h4, h5, h6, p {margin:0; padding:0;}
h1, h2, h3 {text-transform: uppercase;}
a {text-decoration: none; color: inherit;}
/*The body tags make sure the content area has at least 43px margin each side, the bodywrapper is centrally aligned within this*/
/*The bodywrapper is 1280px with at least 43px on each side makes 1366px. If the screen is over 1366px then the bodywrapper*/
/*will have some margin as well.*/
body {font-family: 'Roboto', sans-serif; font-size: 18px; color: black; margin: 0 43px;}
body.home {margin: 0;} /*Except on the home page which will use the entire 1366px*/
.clear {clear: both;}



/******************************* header styles *******************************/
/*THe header and body are wrapped separately so that the black bar can stretch all the way across.*/
/*They are each 1366px wide centrally aligned. In the header the image on the left stays 48px from the left side*/
/*while the navigation and search bar are 48px from the right.*/
.headerwrapper {
    z-index: 21; /*in front of breadcrumbs when mobile menu comes up*/
    top: 0;
    left: 0;
    position: fixed;
    background-color: black;
    width: 100%; /*set height to 88px to align with bottom of logo*/
}
body.admin-bar .headerwrapper {top: 32px;}
.header {
    margin: 0 auto;
    height: 115px;
    color: white;
    text-align: right; /*put nav and search form on the right, logo is floated left*/
    max-width: 1366px;
} 
.header img, .header nav, .header form, .header div {vertical-align: top;} /*so I can use top-margin to position them all*/
.header img {float: left; margin: 48px 0 0 48px;} /*left margin of 48px, no right margin so the menu can get closer*/
.header nav {
    margin-top: 63px; /*if margin-top:71px, bottom of text exactly aligns with bottom of image, so raise it, set .header height:88px to try this */
    display: inline-block;
    /*margin-left: 106px;*/ /*128px between logo and home, but it has about 22px left margin*/
}
.header nav li {
    list-style-type: none;
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    margin-right: 48px; /*48px between menu items*/
}
.header nav a {
    color: white;
    padding-bottom: 4px; /*this puts the bottom border just under the image base line, set .header height 88px to see this*/
}
.header nav a:hover, .header nav a.active {border-bottom: 4px solid white;} /*appears below baseline of image*/
/*I started with Wordpress's get_search_form function but I wanted a placeholder so just copied the HTML into header.php*/
.header form {display: inline-block; margin: 56px 48px 0 0;} /*plus the 24px to the right of last item*/
.header form label {display: none;}
.header form input[type=text] {
    border: 0;
    width: 224px;
    height: 30px;
    border-radius: 18px;
    font-size: 15px;
    padding-left: 15px;
    font-style: italic;
    background-image:url(images/search-icon.png);
    background-repeat: no-repeat;
    background-position: 210px 6px;
}
::-webkit-input-placeholder {color: black;}
:-ms-input-placeholder {color: black;}
::-moz-placeholder {color: black; opacity: 1;}
:-moz-placeholder {color: black; opacity: 1;}
.header form input[type=submit] {display: none;} /*hide default submit button*/


/*Hamburger menu based on https://codepen.io/erikterwan/pen/EVzeRP. I'm so impressed by this!*/
.header > input {
    width: 23px;
    height: 20px;
    display: none; /*only shown on smaller screens*/
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2; /*appears on top of hamburger*/
    cursor: pointer;
    -webkit-touch-callout: none;
    opacity: 0; /* hide checkbox */
}
.header > div { /*the word menu*/
    display: none; 
    position: absolute;
    top: 15px; 
    right: 50px;
    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    transition: top 0.5s ease;
}
.header span { /*top slice of hamburger*/
    width: 23px;
    height: 4px;
    display: none; /*only on smaller screens*/
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    z-index: 1;
    transform-origin: 0% 0%; /*element will rotate from this point*/
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
}
.header span:nth-of-type(2) {top: 23px;} /*middle bit*/
.header span:nth-of-type(3) {top: 31px; transform-origin: -3px 3px;} /*the bottom bun, this is to make the x look right it took some trial and error*/
.header input:checked ~ span {transform: rotate(45deg) translate(-2px, -1px);} /*rotate top one downards and move it a bit*/
.header input:checked ~ span:nth-of-type(2) {opacity: 0; transform: scale(0.2, 0.2);} /*make this one disappear*/
.header input:checked ~ span:nth-of-type(3) {transform: rotate(-45deg) translate(0, -1px);} /*rotate bottom one upwards*/



/******************************* breadcrumb styles *******************************/
.breadcrumbswrapper {
    z-index: 20;
    top: 115px;
    left: 0;
    position: fixed;
    background-color: #e5e5e5;
    width: 100%;
}
body.admin-bar .breadcrumbswrapper {top: 147px;} /*32px + 115px*/
.breadcrumbs {
    margin: 0 auto;
    color: black;
    font-size: 15px;
    max-width: 1366px;
    text-transform: uppercase;
} 
.breadcrumbs p {margin: 0 20px 0 48px; padding: 18px 0 18px 0;} /*left margin of 48px, small right margin so the Back button can get closer but needs some in case there is no back button, should be 60px high but can go higher*/
.breadcrumbs p a.back {float: right; margin-right: 48px; padding-top: 4px;}
.breadcrumbs p span {font-weight: bold; font-size: 20px; padding-right: 10px;}



/******************************* body wrapper and tags within it *******************************/
/*The maximum widdth and margin of the body wrapper. It should have 43px left and right*/
.bodywrapper {max-width: 1280px; margin: 150px auto 43px auto;} /*115px so it shows the fixed header + 35 space at the top*/
body.home .bodywrapper {max-width: 1366px; margin-bottom: 0;}
body.category .bodywrapper, body.single .bodywrapper {margin-top: 203px;} /*to make room for the breadcrumbs*/
/*On Books and Videos, the h1 and h2 are directly within the bodywrapper*/
.bodywrapper > h1 {font-size: 26px; margin-bottom: 26px;}
.bodywrapper > h2 {font-size: 21px; font-family: "Roboto Slab"; font-weight: normal; margin-bottom: 26px;;} /*Books subtitle*/
/*On category pages, the h1 should appear a bit bigger*/
body.category .bodywrapper > h1 {font-size: 33px;} /*h1 on category page*/
/*Other tags directly within the body wrapper, used on category pages*/
.bodywrapper > img {margin-bottom: 26px; width: 100%;} /*an image directly within the bodywrapper, taking as much room as possible*/
.bodywrapper > .homeimage > img {padding-bottom: 26px; width: 100%;} /*use padding so I can give it a white background*/
.bodywrapper > p {margin-bottom: 2em;}
.bodywrapper > p > a {text-decoration: underline;}
/*On the About page, the h1 and h2 are within a grey container on the about page*/
.greycontainer > h1 {font-size: 38px; margin-left: 5px; margin-bottom: 10px;} /*should be 20px total but font has some space when text is all caps*/
.greycontainer > h2 {font-family: "Roboto Slab"; font-size: 21px; font-weight: normal; margin-left: 5px; margin-bottom: 12px;}
.greycontainer > h4 {margin-left: 5px; margin-bottom: 20px;}
.sharethis-inline-share-buttons {float: right;}





/******************************* floating containers *******************************/
/*The following define containers which stack up next to each other to fill the available space. This is inspired by*/
/*bootstrap's columns. I would have liked to use that but was too much to learn just for this customisation.*/
/*The maximum space available within the bodywrapper is 1280px. div.space13 uses about 1/3 of that space*/
/*(eg it is for 1 column out of 3), used on Articles and categories. div.spacenot13 uses all but 1/3 on about page*/
/*div.space14 is used for books. All the columns have 34px margin on the right, so need a wrapper with negative margin to compensate.*/
.marginwrapper {margin-right: -34px;}
.space13, .spacenot13, .space14, .space12 {float: left; margin: 0 34px 34px 0; display: inline-block; text-align: left; vertical-align: top;}
.space13 {width: 404px;} /*404*3 + 34*2 = 1280px*/
.spacenot13 {width: 842px; width: calc(100% - 472px);} /*842 + 34 + 404 = 1280px, the 100% is based on 1314px which is 1280px plus 34px negative margin*/*/
.space14 {width: 280px;} /*280*4 + 34*3 = 1222px, 280px is used as it's the size of the book cover images*/
.space12 {width: 640px;}

/*This grey area is used on About and book pages, it has a white area inside it*/
.greycontainer {background-color: #e5e5e5; padding: 20px 20px 20px 20px;} /*20px of grey padding*/
.greycontainer .content {padding: 25px; background-color: white;}
.greycontainer .content > h2 {margin-bottom: 1em;}
.greycontainer .content > p {margin-bottom: 1.5em; line-height: 1.5em;}
.greycontainer .content img {float: left; padding-right: 25px;}
.greycontainer .content a {font-weight: bold;}
/*Book covers in space14 have a fixed height*/
.bookcover {height: 436px;}



/******************************* home page *******************************/
/*These styles are for the home page. The homeleft and homeright colours extend to 1366px wide.*/
body.home .bodywrapper {background: linear-gradient(90deg, #000000 50%, #e5e5e5 50%);} /*extend background to bottom, as .homeleft and .homeright are different heights*/
.homeimage {background: white; padding-left: 43px; padding-right: 43px;} /*around the home page image, give white background to go over bodywrapper background*/
.homeleft, .homeright {display: inline-block; width: 50%; height: 100%; vertical-align: top;}
.homeleft {background-color: black; color: white;}
.homeleft h2 {font-size: 33px; margin: 48px 0 48px 66px;}
.homeleft h2 a {border-bottom: 4px solid white;}
.homeleft ul {font-size: 18px; margin: 0 66px;}
.homeleft ul li {
    list-style-type: none;
    padding-bottom: 4px; 
    border-bottom: 2px solid white;
    margin: 8px 0;
    text-transform: uppercase;
}
.homeleft ul li a::after {content: ">"; float: right;} /*the arrow after the link*/
.homeleft img {margin-top: 100px; min-width: 342px; max-width: 342px; height: auto;}
.homeleft div {margin: 200px 34px 0 0; float: right; width: 260px; width: calc(100% - 423px);}
.homeleft div p {width: auto; font-size: 17px; margin-bottom: 1em;}
.homeleft div p a {font-size: 18px; font-weight: bold; text-transform: uppercase;}

.homeright {background-color: #e5e5e5;}
.homeright h2 {font-size: 30px; margin: 48px 0 48px 55px; clear: both;}
.homeright h2 a {border-bottom: 4px solid black;}
.homeright ul {margin: 0 -15px 0 55px;} 
.homeright ul li {list-style-type: none; float: left; display: inline-block; margin: 0 20px 20px 0; width: 182px; height: 290px;}
.homeright ul li.video {height: 158px; font-size: 90%;}
.homeright ul li img {min-width: 182px; max-width: 182px; height: auto;}
.homeright p {margin-left: 55px; margin-bottom: 60px; clear: both;}
.homeright p a {font-size: 18px; text-transform: uppercase; font-weight: bold;}



/******************************* sidebar on about page *******************************/
/*The picture menu sidebar comes first in the HTML so has to be floated right*/
.sidebar {text-align: right; float: right;} /*div.sidebar is also div.space13 which is 404px wide, so align right*/
.sidebar > img {min-width: 400px; max-width: 400px; height: auto; padding-bottom: 20px;} /*min-width and max-width rather than width lets the height be proportional*/
.sidebar nav li, .sidebar h3 {
    text-align: left;
    padding: 25px 15px 25px 20px;
    width: 365px; /*400px minus 15 padding on right and 20 padding on left*/
    list-style-type: none;
    font-size: 21px;
    font-weight: bold;
    background-color: #e5e5e5;
    text-transform: uppercase;
    vertical-align: middle;
    margin-bottom: 5px;
}
.sidebar nav li a {color: black;}
.sidebar nav li a img {min-height: 48px; max-height: 48px; float: left; margin-top: -10px; margin-right: 10px;}
.sidebar nav li a::after {content: ">"; float: right;} /*the arrow after the link*/
.sidebar h3 {background-color: white; padding-left: 0;}



/******************************* contact page *******************************/
.contactleft > h3, .contactright > h3 {
    padding: 8px 0 8px 20px;
    background: black;
    color: white;
    font-size: 20px;
    font-weight: normal;
}
.contactleft p {padding: 15px 0 5px 0; font-size: 16px;}
.contactleft input, .contactleft textarea {margin-top: 5px; width: 95%; width: calc(100% - 10px); font-size: 16px; padding: 8px 5px; border:0; background: #eeeeee;}
.contactleft textarea {height: 100px;}
.contactleft input[type=submit] {width: auto; background: none; text-transform: uppercase; font-weight: bold; font-size: 105%; cursor: pointer;}
.contactright p {padding: 15px 0 5px 0; font-size: 18px;}
.contactright p img {vertical-align: middle;}



/******************************* For reveal boxes *******************************/
/*These boxes reveal text over images when you roll over them. They are used on Articles and Videos*/
/*Overflow hidden so when the text slides up it won't escape. Black background in case there is no image*/
.revealbox {position: relative; overflow: hidden; background-color: black; height: 250px; color: white;}
/*So that the boxes can have 34px right margin and not wrap too soon*/
.revealbox > img, .revealbox > h2 {
    width: 100%;
    height: 250px;
    position: absolute;
    top: 0;
    z-index: 2;
    transition: all 0.25s ease-out; 
}
.revealbox > h2 { /*This is the text over the image*/
    text-transform: uppercase;
    font-size: 33px;
    text-align: center;
    line-height: 250px;
    z-index: 5;
}
/*See https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css for vertically aligning text*/
.revealbox > h2 > span {
    padding: 0 15px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
.revealbox > div {
    z-index: 4; /*image on bottom, then div, then h2*/
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.25s ease-out; 
}
.revealbox > div.aslink {cursor: pointer;} /*These divs have onclicks making them links*/
.revealbox > div > h3 {padding: 38px 22px 16px 22px; font-size: 22px;}
.revealbox > div > p {padding: 0 22px 16px 22px; font-size: 16px;}
.revealbox > div > p a {font-weight: bold; text-transform: uppercase;}
.revealbox > div > p a::after {content: " >";}
.revealbox:hover > h2 {top: -150%;} /*slide the category name up, it's got a lot of padding too so needs to go far up*/
.revealbox:hover > img {opacity: 0.25;} /*and make the image see through*/
.revealbox:hover > div {opacity: 1;} /*and make the image see through*/

/*Second level categories in category.php*/
.categorydepth1 {color: white;}
/*This is the white text and the black header*/
.categorydepth1 > h3 {
    width: 384px;
    width: calc(100% - 20px);
    padding: 8px 0 8px 20px;
    vertical-align: middle;
    background: black;
    color: white;
    font-size: 20px;
    font-weight: normal;
}
.categorydepth1 > h3 > a.description {text-transform: none; color: #cccccc; font-size: 90%; padding-right: 8px;}
/*This is the black on white for depth2 with a depth3 beneath it - Nick asked me to remove this 14/1/2018 and just style them as p.categorydepth3*/
/*p.categorydepth2.withkids {
    width: 100%;
    color: black;
    background: white;
    padding: 20px 0;
    font-size: 18px;
    font-weight: bold;
}*/
/*White on grey for depth2 with no kids and depth3. Before 14/1/2018 this was just for p.categorydepth2.nokids and withkids was above. */
p.categorydepth2, p.categorydepth3, p.categorydepth4 {
    width: 374px; /*default width 15px padding makes 400px*/
    width: calc(100% - 30px); /*15px padding makes 400px*/
    color: black;
    background: #e5e5e5;
    padding: 10px 15px;
    margin-top: 2px;
    line-height: 24px;
}
p.categorydepth3 {padding-left: 20px;} /*to indent the sub-sub-sub categories a bit*/
p.categorydepth4 {padding-left: 40px; width: calc(100% - 50px);} /*to indent the sub-sub-sub categories a bit*/
p.categorydepth2.article {padding-left: 25px; width: calc(100% - 40px);} /*on main category like Law and Order*/
p.categorydepth3.article {padding-left: 30px; width: calc(100% - 40px);} /*on sub categories like Law and Order > Policing*/
p.categorydepth4.article {padding-left: 35px; width: calc(100% - 45px);} /*on sub categories like Law and Order > Policing*/

p.categorydepth2 > a, p.categorydepth3 > a, p.categorydepth4 > a {text-transform: uppercase; font-weight: bold;} /*Removed .nokids 14/1/2018*/
p.categorydepth2 > a.description, p.categorydepth3 > a.description, p.categorydepth4 > a.description {text-transform: none; font-weight: normal;}
p.categorydepth2.article > a, p.categorydepth3.article > a, p.categorydepth4.article > a {text-transform: none;} /*added 3/6/2020 at Nick's request*/
/*p.categorydepth2.withkids {font-style: italic;} *//*eg for Truth about policing text on Law and Order page*/
/*p.categorydepth2.withkids a {font-style: normal;}*/
p.categorydepth2 > a::after, p.categorydepth3 > a::after, p.categorydepth4 > a::after {content: ">"; float: right;} /*Removed the .nokids 14/1/2018*/
p.categorydepth2 > a.description::after, p.categorydepth3 > a.description::after, p.categorydepth4 > a.description::after {content: "";}
p.categorydepth2.article > a::after, p.categorydepth3.article > a::after, p.categorydepth4.article > a::after {content: "";}
p.subcategoriesheading {border: 1px solid #cccccc; padding: 20px;} /*shown when there are subcategories, with categories as categorydepth3*/
.categorydepth1 i, .categorydepth2 i, .categorydepth3 i, .categorydepth4 i {white-space: nowrap; color: red;}

/*Articles within categories*/
.categoryarticle {background-color: #cccccc; height: 470px;}
/*.categoryarticle:nth-of-type(2n) {background-color: #e5e5e5;} lighter background removed 30/6/2020 at Nick's request*/
.categoryarticle > h3 {font-size: 25px; text-transform: uppercase; padding: 16px;}
.categoryarticle > p {margin: 0 15px; padding: 13px; background-color: white; font-size: 17px;}
.categoryarticle > p > a {font-weight: bold;}
nav.pagination {clear: both; float: right;}
nav.pagination h4 {display: inline-block; font-size: 14px; text-transform: uppercase; padding-right: 12px;}
nav.pagination span.current, nav.pagination a {
    display: inline-block;
    font-size: 14px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
}
nav.pagination span.current {background-color: black; color: white;}
nav.pagination a {background-color: #e5e5e5;}
nav.pagination a.prev, nav.pagination a.next {display: none;}

/*Very similar for videos*get_permalink*/
div.video {background-color: #cccccc; height: 530px; padding-top: 15px; padding-bottom: 15px;}
div.video:nth-of-type(2n) {background-color: #e5e5e5;}
div.video > a > img {background-color: white; width: 374px; margin: 0 15px;} /*404px - 15px padding each side*/
/*-4 pixels to cover the gap under the image where the grey background shows through*/
div.video > h3 {margin: -4px 15px 0 15px; padding: 13px 13px 0 13px; background-color: white; font-size: 22px; text-transform: uppercase;}
div.video > p {margin: 0 15px; padding: 0 13px 13px 13px; background-color: white; font-size: 17px;}
div.video > p > a {font-weight: bold;}




/******************************* for mobiles *******************************/
/*Put back the right margin which will force it to wrap to two lines*/
@media (max-width: 1366px) {
    .marginwrapper {margin-right: 0;}
}

/*As the screen gets smaller, first the search box gets smaller and spacing in between menu items*/
/*goes from 48px to 30px. Main content area goes down to 30px as well.*/
@media (max-width: 1290px) {
    .header img {margin-left: 30px;}
    .header nav li {margin-right: 30px;}
    .header form {margin-right: 30px;}  
    .header form input[type=text] {width: 104px; background-position: 90px 6px;}
    .homeimage {padding-left: 30px; padding-right: 30px;} /*around the home page image*/
    .homeleft img {margin: 48px auto; display: block;}
    .homeleft div {margin: 48px auto; width: 342px; float: none;}
}

/*Lose the search box and shrink menu spacing even more*/
@media (max-width: 1005px) {
    .header nav li {margin-right: 20px;}
    .header nav {margin-right: 10px;} /*to give 30px total on right*/
    .header form {display: none;}
}

/*Go to mobile view*/
@media (max-width: 820px) {
    .header {height: 51px;} /*21px high image with 15 margin all around*/
    .header > input {display: block;} /*invisible checkbox only shown on smaller screens*/
    .header > div {display: block;} /*the word MENU*/
    .header > span {display: block;} /*the hamburger slices*/
    .header img {margin-top: 15px; margin-left: 15px; height: 21px;}
    .header nav {
        margin: 0;
        transition: right 0.5s ease;
        background: black;
        position: absolute;
        width: 100%;
        /*height: 100%; this does not make it 100% of the screen as headerwrapper has position fixed*/
        top: 51px;
        right: -100%;
    }
    .header input:checked + nav {right: 0;}
    .header input:checked ~ div {top: -30px;}
    .header nav li {
        margin: 0;
        width: 100%;
        padding-top: 15px;
        text-align: center;
        display: block;
        background: black;
    }
    .header nav li:last-of-type {padding-bottom: 15px;}
    .breadcrumbswrapper {top: 51px;}
    .breadcrumbs p {margin-left: 15px; margin-right: 15px;}
    .homeleft, .homeright {width: 100%;}
    body.admin-bar .breadcrumbswrapper {top: 82px;} /*32px + 115px*/
    a.back {display: none;} /*not enough room for this*/
    body {margin: 0 15px;}
    .bodywrapper {margin-top: 71px;} /*51px so it shows the fixed header + 35 space at the top*/
    body.category .bodywrapper, body.single .bodywrapper {margin-top: 124px;} /*to make room for the breadcrumbs*/
    .space13, .spacenot13, .space14, .space12 {float: none; display: block; margin-left: auto; margin-right: auto;}
    .spacenot13 {width: auto;}
    .sidebar {text-align: center;}
    body.page .sidebar nav, body.page .sidebar h3 {display: none;} /*hide on the about page, but not on articles*/
}

@media (max-width: 450px) {
    .sidebar {width: 100%;}
    .sidebar > img {max-width: 100%; min-width: 100%;}
    .space13 {width: 290px; width: calc(100% - 30px);} /*boxes keep same height unfortunately*/
    .revealbox > img, .revealbox > h2 {width: 100%;}
    .homeleft img {max-width: 100%; min-width: 100%;}
    .homeleft div {width: 100%; padding-left: 15px; padding-right: 15px;}
    .sidebar nav li, .sidebar h3 {width: 90%; width: calc(100% - 30px);}
}