/*
 Theme Name:   Kipling Society (using GeneratePress Child)
 Theme URI:    https://generatepress.com
 Description:  Customised based on Default GeneratePress child theme
 Author:       Michael Wilcox
 Author URI:   
 Template:     generatepress
 Version:      0.2
*/

/* -------------------------------------------- 
   Main theme  
   -------------------------------------------- */


/* -------------------------------------------- 
   Page Header  */

/* Home page icon */
.menu-item-home img {
	margin: 0 5px 5px 0;
	vertical-align: middle;
}

/* Main header tiles */
.nav-tile img {
    border: 1px solid #fff;
    margin-bottom: .2em;
    width: 4.5em;
}
@media (max-width: 768px) {
    /* smaller on the mobile view */
    .nav-tile {
        width: 3em;
        margin-left: auto;
        margin-right: auto;
    }
    /* remove the site description on mobile view */
    .site-description {
        display: none;
    }
}

/* fix bug for left-aligned secondary menu */
/*.secondary-navigation .main-nav > ul {
    justify-content: center;
}*/
.secondary-navigation .main-nav>ul {
	justify-content: center; 
}


/* -------------------------------------------- */


/* Centre the page titles*/
h1.entry-title {
	text-align: center;
}

/* Captions */
.wp-caption-text {
	text-align:center;
}
.thumb-caption-text {
	color: #3A3A3A;
}


/* Footer - back to top button */
.generate-back-to-top {
    bottom: 30px;
}
@media (max-width:768px) {
    /* tablet AND mobile view */
    .generate-back-to-top {
        bottom: 20px;
        right: 20px;
    }
}


/* tables - remove default padding and borders */
table {
	padding:initial;
    border: initial;
    width: initial;
}
td {
	padding:4px;
    border: initial;
} 

/* space above tablepress tables when at top of entry content */
div.entry-content > table.tablepress {
	margin-top: 4em;
}


/* row style tables - added via register_block_style snippet  */
#page .wp-block-table.is-style-rows {
    border-spacing: 0;
    border-collapse: inherit;
    background-color: transparent;
}
#page .wp-block-table.is-style-rows tbody tr td {
    border-bottom: 1px solid #b4bbb0;
    padding: 8px;
}
#page .wp-block-table.is-style-rows thead tr td {
    border-bottom: 1px solid #b4bbb0;
    padding: 8px;
    font-weight: bold;
}


/* slider */
.gb-container.slider {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 1em 0;
}
.slider .gb-inside-container {
    min-width: 1400px; 
}


/* generic stylings */
.has-border-white {
    border: white 1px solid;
}

/* adding a custom colour to the Block palette (via a snippet) */
.has-golden-yellow-background-color {
    background-color: #fcde00;
}

.has-golden-yellow-color {
    color: #fcde00;
}

/* adding a custom image style (via a snippet) */
.is-style-has-border-white figure img {
    border: white 1px solid;
}

/* class to enable an 'absmiddle' type style for images */
img.align-middle {
	vertical-align: middle;
}

/* -------------------------------------------- 
   Pages */


/* hr - make the styles actually work with the options in Block Editor */
.wp-block-separator:not(.is-style-wide) {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}
/* hr - colour */
hr {
	background-color:#9A9A9A;
}

/* makes a narrow block (half width on desktop) */
.half-width-block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    width: 50%;
}
@media (min-width: 769px) and (max-width:1024px) {
    /* tablet view */
    .half-width-block {
        width: 65%;
    }
}
@media (max-width: 768px) {
    /* mobile view */
    .half-width-block {
        width: 80%;
    }
}

/* centre a block */
.centre-block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    width: -moz-fit-content; 
    width: fit-content;
}


.page blockquote {
    padding: 0 40px;
    font-size: unset;
    border-left:unset;
    font-style: unset;
}


/* ----- For Young Readers / Children section pages ----- */

/* using H4 for the content pages where images and titles are laid out in a grid */
.page_setting-for-young-readers .entry-content .gb-grid-wrapper h4 {
    text-align: center;
}
.page_setting-for-young-readers .entry-content .gb-grid-wrapper p {
    text-align: center;
}
.page_setting-for-young-readers .entry-content .gb-grid-wrapper figure {
    margin-left: auto;
    margin-right: auto;
    display: table;
    clear: both;
    margin: 0 auto;
}

/* larger wording for bulk of page */
.page_setting-for-young-readers .has-large-font-size {
    font-size: 1.75em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* format blockquote to handle the aside voice of Kipling */
.page_setting-for-young-readers blockquote {
    padding-left: 40px;
    padding-right: 40px;
    border-left: 0;
    font-size: unset;
    line-height: 1.75em;
}
/* the smaller wording which is the aside voice of Kipling  */
.page_setting-for-young-readers blockquote p {
    font-size: 1.25em;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
/* add the Clearfix (https://css-tricks.com/snippets/css/clear-fix/) to the blockquote */
.page_setting-for-young-readers blockquote:after {
    content: "";
    display: table;
    clear: both;
}

/* for hanging the little ark image at the end of a text block */
.page_setting-for-young-readers img[src*="arksmall_green"] {
    vertical-align: middle;    
}

/* make the media player play nicely */
.page_setting-for-young-readers .wp-block-audio {
    width: 350px;
    margin: 0 auto;
}
.page_setting-for-young-readers .wp-block-audio figcaption {
    text-align: center;
    margin-bottom: 40px;
}
@media (max-width: 768px) {
    /* mobile view */
    .page_setting-for-young-readers .wp-block-audio audio {
        min-width: unset;
        margin: 0 auto;
    }
}
@media (max-width: 499px) {
    /* small mobile view */
    .page_setting-for-young-readers .wp-block-audio {
        width: 250px;
        margin: 0 auto;
    }
}

/* undo the default which added a slight dark background to the Gutenberg verse block */
.page_setting-for-young-readers pre.wp-block-verse {
    background-color: unset;
    font-size: 1.25em;
    width: fit-content;
    margin: 0 auto;
} 

/* note that these styles aren't limited to young readers section*/

/* a specific class that could be used for hanging the little ark image at end of text */
.has-vertical-align-top {
    vertical-align: top;
}



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

h3 {
    padding-top: 0.75rem;
}
h5 {
    font-weight: bold;
    line-height: 1.2;
}
h6 {
    font-style: italic;
    line-height: 1.2;
}
small {
    font-size: 80%;
    /* added 90% to make this work better on poem subtitles */
    /* amended to 80% to match the manual size used by JR */
}

/* WYSIWYG FORMAT options*/
/* Make a block of text use serif face (Times) etc */
.block-is-times {
    margin-bottom: 1.5em;
    font-family: Georgia, 'Times New Roman', Times, serif; 
}
/* Make a block of text use serif face (Times) etc and be italic */
.block-is-italic-times {
    margin-bottom: 1.5em;
    font-family: Georgia, 'Times New Roman', Times, serif; 
    font-style: italic; 
}


/* -------------------------------------------- 


/* Normal links */
#page a:hover {
    text-decoration: underline;
/*    color: #1e73be; */
}

/* Red triangle links */
a img.wp-image-557 {
	padding-left:6px;
}


/* -------------------------------------------- 
   Green background  */

/* The entire browser */
body.page_setting-background-green {
    background-color: #073901;
}

/* for use on a Readers Guide page - see bottom of this file */


/* White border on bottom of menu
   - First is for full menu on page with green background,
   - Second is on DIV added by the Header Element (for Young Reader page settings) (see also custom.css) */
   .page_setting-background-green #secondary-navigation, 
   .page_setting-background-green .page-hero {  
       border-bottom: 1px solid rgba(255, 255, 255, 0.5);
   }
   
/* Everything after the header/nav sections (i.e. #page) */
.page_setting-background-green #page {
    color: #fff;
}
.page_setting-background-green #page h1,
.page_setting-background-green #page h2,
.page_setting-background-green #page h3,
.page_setting-background-green #page h4,
.page_setting-background-green #page h5 {
    color: #fff;
}
.page_setting-background-green #page a, 
.page_setting-background-green #page a:focus, 
.page_setting-background-green #page a:hover,
.page_setting-background-green #page a:visited  {
    color: #fff;
    text-decoration: underline;
}

/* the highlight is a slightly more "golden" yellow than #ff0 */
.page_setting-background-green #page .highlight {
    color: #fcde00;
} 


/* The widgets */
.page_setting-background-green #page .sidebar .widget  {
    font-size: 1rem;
    color: #fff;
}
.page_setting-background-green #page .sidebar .widget a {
    color: #fff;
}


/* stripey tables - over-ride the defaults */
.page_setting-background-green #page .wp-block-table.is-style-stripes {
    border-spacing: 0;
    border-collapse: inherit;
    background-color: transparent;
    border-bottom: 1px solid #f0f0f0;
}
.page_setting-background-green #page .wp-block-table.is-style-stripes table {
    margin-bottom: 0px;
}
.page_setting-background-green #page .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.1);
}
.page_setting-background-green #page .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: transparent;
}
.page_setting-background-green #page .wp-block-table.is-style-stripes td {
    padding: 8px;
}
.page_setting-background-green #page .wp-block-table.is-style-stripes td,
.page_setting-background-green #page .wp-block-table.is-style-stripes th {
    border-color: transparent;
}


/* row style tables - added via register_block_style snippet  */
.page_setting-background-green #page .wp-block-table.is-style-rows {
    border-spacing: 0;
    border-collapse: inherit;
    background-color: transparent;
}
.page_setting-background-green #page .wp-block-table.is-style-rows tbody tr td {
    border-bottom: 1px solid rgba(240, 240, 240, 0.5);
    padding: 8px;
}


/* --------------------------------------------
   PAGE SETTINGS: Black links with red hover - added for index and contents pages */
.page_setting-style-black-links #page a {
  color: #000000;
  text-decoration: underline;
}
.page_setting-style-black-links #page a:hover {
  color: red;
  text-decoration: underline;
}


/* --------------------------------------------
   WIDGET: Easy Table of Contents (ez) */

/* Fix the block while the page scrolls (on desktop) */
 .inside-right-sidebar {
    position: sticky;
    top: 0;
}

/* Make the block (in the sidebar) appear at the top on mobile view */
/* @media (max-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
} */



/* --------------------------------------------
   WIDGET: Slide Anything */

#for_young_readers_slider .sa_owl_theme .owl-nav div,
#for_young_readers_slider.sa_owl_theme .owl-nav button {
       top: 40% !important;
   }
#for_young_readers_slider .owl-item {
    padding-left: 12px;
    padding-right: 12px;
}
#for_young_readers_slider .owl-item a {
    text-decoration: none;
}

#for_young_readers_slider.sa_owl_theme .owl-dots .owl-dot span {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
#for_young_readers_slider.sa_owl_theme .owl-dots .active span {
    background-color: rgba(255, 255, 255, 0.5) !important;
}


/* -------------------------------------------- 
   Readers Guide pages  */

/* Background */
.single-readers_guide,
.single-readers_guide .container,
.single-readers_guide .site-content .widget,
.single-readers_guide .content-area,
.single-readers_guide .inside-article {
    background: #eeeeee !important;
}

/* Top part */
.readers_guide .entry-header-container {
    text-align:center;
}
.readers_guide h1.entry-title {
    margin-bottom: 1.2em;
}
.readers_guide .entry-subtitle {
    margin-left: 20%;
    margin-right: 20%;
}
.readers_guide .featured-image {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}



/* Readers Guide icon */
.readers-guide-logo {
	margin-top: 40px;
	margin-left: 40px;
}

/* Add border to 2nd column - only for the RG main page */
.page-id-21 .wp-block-column:nth-of-type(2) {
    padding-left: 32px;  
	border-left: 1px solid #D3D3D3;
}

/* links */
#page .single-readers_guide a {
    color: red;
    text-decoration: underline;
}

/* Blockquotes need to be same size, not italic and no border */
.single-readers_guide blockquote {
    font-size: 1em;
    font-style: normal;
    border-left: 0;
    margin-left: 1.5em;
    margin-bottom: 0;
    color: blue;
}

/* created for use with blockquote style when it shouldn't be blue */
blockquote.plain {
    color: #333333;
}

/* Highlight, created for Reader's Guide */
.rg-highlight {
    color: blue;
}

/* Copyright, created for Reader's Guide */
.rg-copyright {
    color: grey;
    font-size: 0.8rem;
}



/* -------------------------------------------- 
   Poems  */

/* A-Z anchor horizontal bar - used on the poem index page (poems.htm)  */
.atoz-anchors {
    padding: 5px;
    border: solid grey 1px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.atoz-anchors a {
    padding: 5px;
}
.atoz-letter-group {
    padding-top:10px;
}

/* Background */
.single-poem,
.single-poem .container,
.single-poem .site-content .widget,
.single-poem .content-area,
.single-poem .inside-article {
    background: #eeeeee !important;
}

/* Layout */
.single-poem .inside-article {
    padding: 0 40px 80px 40px;
    margin: auto;
    width: max-content;
    display: table;
}


/* H1 treatment on post */
.poem h1 {
    font-size: 26px;
    text-align: center;
	color: red;
}
.poem .entry-subtitle {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
	padding: 15px 0 0 0;
    text-align: center;
}
/* deal with the subtitle field format which adds a paragraph tag */
.poem .entry-subtitle p:last-child {
    margin-bottom: 0;
}

/* contains the title, subtitle and featured image. allows the image to centre under the titles */
.poem .entry-header-container {
    display: block;
    text-align: center;
    padding-right: 10%;
}

/* provides the block that has red top and bottom borders */
.poem .entry-header-titles-box {
	margin-top: 40px;
	margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
	padding: 20px 40px;
    display: inline-block;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

.poem .entry-content {
    margin: 2em 0 0 0;
}

/* pre */
pre {
	background: revert;
}

.poem pre {
/*	background: #eeeeee; */
    white-space:pre-wrap;
    padding: 0;
    margin: 0 0 1.5em 0;
    display: block;
}

/*  Featured image */
.poem .featured-image {
    margin-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
}

/* side bar for "Learn More" */
.pods_widget_single h3 {
    font-size: 1rem;
    font-weight: bold;
    color: #455C3B;
    margin: 30px 0 0 0;
}
.pods_widget_single {
    font-size: 1rem;
}
.pods_widget_single li, 
.pods_widget_single li a {
    font-size: 1rem;
    color: #777;
    margin: 5px 0 0 0;
}
.pods_widget_single p {
    font-size: 1rem;
    color: #777;
    margin: 25px 0 0 0;
}
.pods_widget_single p a,
.pods_widget_single li a {
    color: #777;
    text-decoration: underline;
    text-decoration-color: #aaa;
}
.pods_widget_single li a:hover {
    color: #777;
    text-decoration: underline;
    text-decoration-color: #555;
}
/* red triangles on the bullet list*/
.pods_widget_single ul {
	list-style: none;
}
.pods_widget_single ul li:before {
    content: "\25BA \0020";
    color: red;
    font-size: 0.8rem;
}


/* Poem: the 'eathen */
/* Override 2nd td alignment */
#post-3717 .entry-content td:nth-child(2) {
	text-align:right
}


/* -------------------------------------------- 
   Tales  */

/* H2 for 'by Rudyard Kipling' byline */
.single-tale h2 {
    color: unset;
}

/* H3 in the subtitle div */
.single-tale .entry-subtitle {
  text-align: center;
}
.single-tale .entry-subtitle h3 {
  color: red;
  margin-top: 40px;
  margin-bottom: 60px;
}

.single-tale .elephantheadintale {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Highlight for Tales */
.tales-highlight {
    color: blue;
}

/* Make the Blockquote simpler */
/* Added 13-1-21 for /tale/the-wreck-of-the.htm */
.single-tale blockquote {
    padding: 0 0 0 20px;
    font-size: unset;
    border-left:unset;
    font-style: unset;
}

.single-tale .featured-image {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    width: -moz-fit-content; 
    width: fit-content;
}


/* -------------------------------------------- 
   Journalism (content types)  */

.single-journalism .featured-image {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    width: -moz-fit-content; 
    width: fit-content;
}


/* for use on a Readers Guide page */
body.page_setting-background-green.single-readers_guide, 
body.page_setting-background-green.single-readers_guide .container, 
body.page_setting-background-green.single-readers_guide .site-content .widget, 
body.page_setting-background-green.single-readers_guide .content-area, 
body.page_setting-background-green.single-readers_guide .inside-article
{
    background-color: #073901 !important;
}
/* border under For Readers Guide page with a green background - slim header menu - via Page Settings */
.page_setting-background-green.single-readers_guide #site-navigation {
	border-bottom: 1px solid rgba(255,255,255,0.5);
}