/* == Top */

body {
	/* border-top: 1.5rem solid #e30615; */
    color: #111;  /* not quite black */
}

.logo img {
    background-color: #e30615;
    margin-top: -1rem;
}

/* == Bottom */

footer {
    background-color: #e30615;
    color: white;
    width: 100%;
    margin-top: 2em;
    padding-bottom: 2em;
}

footer a, footer a:hover {
    color: white;
}

/* == Grid */

.padtop {
    /* padding-top: 6.5rem; */
    padding-top: 8rem;
}


.clearboth {
    clear: both;
}

@media (min-width: 550px) {
    .autocollapse .columns {
        margin: 0;
        padding: 0;
        padding-right: 2%;
        /* min-height: 10em; */

        /* This is what makes the small articles align with each other correctly
        - was previously using floats but it caused incorrect 'tiling' where
        a long headline/standfirst was next to a short one */
        float: initial;
	    display: inline-block;
	    vertical-align: top;
    }

    .featured {
        /* messy but gets grid to line up */
        padding-right: 8%;
        margin-right: -4%;
    }
}

hr {
    border-top: 2px solid #e30615;
}

/* == Mobile */

.mobile-menu {
    width: 100%;
    position: fixed;
    top: 0;
    height: 40px;
    background-color: #e30615;
}

@media (min-width: 550px) {
    .mobile-only {
        display: none;
    }
}

@media (max-width: 550px) {
    .mobile-hide {
        display: none;
    }
}


/* == Links */

a {
    color: #e30615;
    text-decoration: none;
    /* border-bottom: 1px solid transparent; */
}

a:hover {
    color: #98040e;
}


@media (min-width: 550px) {
    a:hover {
        /* border-color: #e30615; */
    }
    .imagelink a:hover, .sidebar a:hover, .logo a:hover {
        /* border-color: transparent !important; */
    }
}



/* == Images */

img {
	max-width: 100%;
    height: auto;
}

/* .imagelink {
    overflow: hidden;
}

.imagelink img:hover {
    transform: scale(1.1);
} */

.meta img {
    border-radius: 50%;
}

.article img.alignnone {
    margin-bottom: 1em;
    margin-top: 2em;
}

.article p:first-of-type img.alignnone {
    /* no top margin on first image */
    margin-top: 0;
}

.writer-bio img {
    display: block;  /* avoid text beside image */
    margin-bottom: 1em;
}

/* Wordpress image alignment */
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin-left: 1em; }
.alignleft { float: left; margin-right: 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.alignnone { width: 100%; }


@media (max-width: 550px) {
    .alignright, .alignleft, img.alignright, img.alignleft {
        /* on mobile, defloat, centre and add top margin */
        float: initial;
        display: block;
        margin: 0 auto 1em auto;
    }
}

.wp-caption img {
    display: block;
}

.wp-caption, small {
    font-size: 0.8em;
    margin-bottom: 1em;
}

/* == Headlines, standfirsts, runners */


/* Override Skeleton to keep semantics of h2 - this is closer to its h5 size */
h2.standfirst, h2.indexhead {
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: -.02rem;
}
@media (min-width: 550px) {
    /* Larger than phablet */
    h2.standfirst, h2.indexhead { font-size: 2.2rem; }
}

h2.indexhead {
    font-weight: bold;
    margin-bottom: 0;
}
@media (min-width: 550px) {
    h2.indexhead { font-size: 2.4rem; }
}

h2.standfirst {
    padding-bottom: 1em;
}

/* first headline on homepage is larger - and just using css! */
.home h2.indexhead:first-of-type {
    font-size: 2.5em;
    line-height: 1.1;
}

.home h2.indexhead {
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100;
}

h6.runner, .sharecount, .mobile-menu-sub {
	text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: .1rem;
    font-weight: 600;
    margin-bottom: 0;
}

.meta {
    color: #666;
    font-size: 0.85em;
}


/* == Body text */

.article {
	font-family: Merriweather, Georgia, serif;
    font-size: 1.75rem;
    line-height: 3rem; 
    letter-spacing: -0.002rem;
    color: #222;
}

@media (max-width: 550px) {
  /* adjustments for mobile as text was too large and lines too close */
  .article {
    font-size: 1.5rem;
    line-height: 4rem;
  }
}

/* .single-post .article p:first-child:first-letter, */
@media screen {
    /* bugfix: don't do drop caps on printouts */
    span.drop {
        /* drop caps */
        font-size: 10rem;
        font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        color: #e30615;
        float: left;
        line-height: .75em;
        margin-right: 6px;
        margin-top: 6px;
    }
}

/* for mobile */
span.pullquote, div.related {
    display: none;
}

@media (min-width: 550px) {
    /* only display when grid is active */
    span.pullquote, div.related {
        display: initial;
        width: 50%;
        float: left;
        margin-left: -13.33%;  /* ie. two cols to the left */
        margin-top: 5px;
        margin-right: 2em;
        margin-bottom: 2em;
        font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 1.5em;
        font-weight: 300;
        line-height: 1.3;
        border-top: 5px solid #e30615;
        border-bottom: 5px solid #e30615;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    div.related {
        font-size: 1em;
    }
}

blockquote {
    margin: 0;
    padding-left: 1em;
    border-left: 5px solid #e30615;
}


/* == Category/tag pages */

.writer-cat-page {
    font-size: 1.2em;
}

.writer-cat-page img {
    float: left;
    border-radius: 50%;
    margin-bottom: 1em;
    margin-right: 2em;
}

/* == Subscribe */

.subsamount {
    font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    text-align: center;
    padding: 0.5em;
    background-color: #e30713;
    color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
    margin-bottom: 0.5em;
    width: 1.5em;
    display: inline-block;
    cursor: pointer; /* shows the 'pointing finger' cursor, like a link */
}

.subsother {
    width: 6em;
}

.subsother input {
    margin-bottom: 0;
    color: black;
}

/* == Sharing */

.socialshare button svg path {
    fill: black;
}

.sharecount, .mobile-menu-sub {
    color: white;
    /* padding-top: 0.7rem; */
    line-height: 1.3rem;
    text-align: right;
}

.sharecount {
    pointer-events: none;
}


/* == New overlay menu */

.mobile-menu-sub a {
    /* padding-top: 5px; */
    color: white;
}

#menu-overlay {

    background-color: #e30615; 
    width: 100%; 
    max-width: 550px;

    position: fixed; 
    top: 0; 
    right: 0; 
    height: 0;  /* this gets used in animated transition when js sets it to 100% */
    overflow: hidden; 

    transition-property: height; 
    transition-duration: 0.5s; 
    transition-timing-function: ease; 

    z-index: 10;

}

.menu-overlay-inner {
    padding: 5px;
    padding-top: 45px;
}

.menu-overlay-inner a {
    color: white;
    font-size: 1.2em;
}

.menu-overlay-inner h6 {
    color: white;
}

.menu-overlay-inner .button {
    background-color: white;
}

/* == Search results */

a.page-numbers, span.page-numbers {
    padding: 1em;
    font-size: 1.2em;
    border: 1px solid red;
}

span.page-numbers {
    border: 1px solid black;
}

span.page-numbers.current {
    font-weight: bold;
}

span.page-numbers.dots {
    border: none;
}

.search-date {
    background-color: #777;
    color: white;
    font-size: 0.9em;
    margin-right: 0.2em;
    padding: 0.2em 0.5em 0.2em 0.5em;
}

 
@media print {

    /* for printing on paper */

    .sidebar, .meta, footer, .pullquote, .mobile-menu, .underarticle, .socialshare {
        display: none;
    }

}


/* == New front page styles 2018 */


    h5 {
        font-size: 1.5em; 
    }
    .home hr {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }
    .headline-lead {
        font-weight: bold;
        line-height: 1.1;
        font-size: 2.2em;
        margin-bottom: 0;
    }
    .headline-grid {
        line-height: 1.1;
        font-size: 1.7em;
        margin-bottom: 0.2em;
    }
    .headline-side {
        line-height: 1.2;
    }
    .headline-bottom {
        line-height: 1.2;
        font-size: 1.7em;
        margin-bottom: 0.2em;
    }
    .popular .runner, .latest .runner {
        font-size: 1.4em;
        margin-bottom: 0.5em;
    }
    .popular li {
        font-size: 1.3em;
        border-top: 1px solid #e30615;
        padding-bottom: 0.5em;
        padding-top: 1em;
        line-height: 1.4;
    }

    .rule-bottom {
        border-bottom: 1px solid #e30615;
        padding-top: 2em;
        padding-bottom: 1em;
    }

    .no-rule-bottom {
        padding-top: 1em;
        padding-bottom: 0.5em;
    }

    .nopadtop {
        padding-top: 0;
    }

    .home .counter {
      list-style-type: none;
    }

    .home .counter li {
      counter-increment: step-counter;
      margin-bottom: 10px;
    }

    .home .counter li::before {
      content: counter(step-counter);
      float: left;
      margin-right: 10px;
      background-color: #e30615;
      color: white;
      font-weight: bold;
      padding: 2px 9px;
      border-radius: 3px;
    }

    .subscribe-box {
        border: 10px double #e30615;
        background-color: rgba(227,6,21,0.05);
        padding: 1em;
    }

    .front-byline {
        margin-top: -1em;
        color: black;
    }



/* == Animated hamburger menu */
/* from hamburgers.css by Jonathan Suh https://github.com/jonsuh/hamburgers */

.hamburger {
  padding: 9px 0px;        /* !! changed padding */
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #fff;     /* !! changed hamburger colour */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }


  .hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    .hamburger--spin .hamburger-inner::before {
      transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
    .hamburger--spin .hamburger-inner::after {
      transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

  .hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .hamburger--spin.is-active .hamburger-inner::before {
      top: 0;
      opacity: 0;
      transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
    .hamburger--spin.is-active .hamburger-inner::after {
      bottom: 0;
      transform: rotate(-90deg);
      transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }


/* == Move WP admin bar to bottom */

#wpadminbar {
    top: auto !important;
    bottom: 0;
}

html { margin-top: 0 !important; }