/*
Theme Name: BeverleyBaptistTheme
Theme URI: https://beverleybaptist.com
Author: Josh Heng
Author URI: https://www.joshheng.co.uk
Description: Custom theme for Beverley Baptist Church. Must be used alongside the Beverley Baptist custom plugin. Customisations can be made on the Customise page, otherwise please contact Josh (josh@joshheng.co.uk) to make any changes.
Version: 1.0
Requires at least: 5.9
Tested up to: 5.9
Stable tag: 5.9
Requires PHP: 7.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: beverleybaptisttheme
Tags: blog, one-column
*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans&Lato&family=Roboto:wght@300;400&display=swap");
/** Main Styles */
* { margin: 0; padding: 0; border: 0; font-size: 100%; }

html { font-family: 'Lato', sans-serif; color: #333; }

body { position: relative; min-height: 100vh; font-size: 16px; line-height: 1.4; background-color: var(--background-color); }

p { margin-bottom: 1rem; }

h1, h2, h3, h4, h5, em { font-family: 'Roboto', sans-serif; color: var(--heading-color); font-weight: 500; }

h1 { margin-top: 2.2rem; font-size: 2.1em; margin-bottom: 0.6rem; }

h2 { margin-top: 2rem; font-size: 1.9em; margin-bottom: 0.5rem; }

h3 { margin-top: 1.6rem; font-size: 1.6em; margin-bottom: 0.4rem; }

h4 { margin-top: 1.4rem; font-size: 1.4em; margin-bottom: 0.3rem; }

a { text-decoration: none; font-weight: 500; color: var(--hyperlink-color); transition: all .2s; cursor: pointer; }

main a, .styled-anchor { position: relative; }

main a:before, main a:after, .styled-anchor:before, .styled-anchor:after { content: ""; position: absolute; bottom: -3px; width: 0px; left: 0; height: 2px; margin: 2px 0 0; transition: all .15s ease-in-out; opacity: 0; background-color: var(--hyperlink-hover-color); }

main a:hover, .styled-anchor:hover { color: var(--hyperlink-hover-color); width: 100%; opacity: 1; }

main a:hover:before, main a:hover:after, .styled-anchor:hover:before, .styled-anchor:hover:after { width: 100%; opacity: 1; }

.styled-white-anchor { color: white; font-weight: bold; }

.styled-white-anchor:hover { color: white; }

.styled-white-anchor:before, .styled-white-anchor:after { background-color: white; }

.non-styled-anchor a { position: inherit !important; color: inherit !important; width: inherit !important; }

.non-styled-anchor a:before, .non-styled-anchor a:after { position: inherit !important; margin: inherit !important; content: inherit !important; bottom: inherit !important; background-color: inherit !important; left: inherit !important; right: inherit !important; opacity: inherit !important; transform: inherit !important; }

ul, ol { padding-left: 2rem; margin-bottom: 1.5rem; }

li { margin-bottom: 0.2rem; }

table { border-spacing: 0; border-collapse: separate; }

th { font-family: 'Fira Sans', sans-serif; font-weight: bold; font-size: 1.05em; border-bottom: 0.15rem solid var(--secondary-color) !important; }

td { padding: 0.3rem 0.5rem; }

img { object-fit: contain; }

.styled-border-image img { border-radius: 0.5rem 0 1rem 0 !important; box-shadow: 0.1rem 0.12rem 0.1rem 0.1rem #aaa; height: auto; }

figure { border-bottom: none !important; margin-bottom: 1rem; }

figure figcaption { font-family: 'Fira Sans', sans-serif; font-size: 0.9em; text-align: center; color: #343434; }

blockquote { margin: 0.6rem 0; padding-left: 1.3rem; font-family: 'Fira Sans', sans-serif; color: #424242; border-left: 0.2rem solid var(--primary-color); }

.sticky { position: sticky; }

.alignright { text-align: right; }

.alignleft { text-align: left; }

.aligncenter { text-align: center; }

@media screen and (max-width: 600px) { #wpadminbar { position: fixed !important; } }

/** Navigation Styles */
.site-header { position: sticky; top: 0; left: 0; right: 0; z-index: 10; font-family: 'Fira Sans', sans-serif; font-size: 0.95em; box-shadow: 0 0.04rem 0.2rem #242424; color: white; }

.site-header a { color: #f1faff; }

.site-header .site-logo { text-align: left; width: 8rem; }

.site-header .site-logo .custom-logo { max-height: 4.5rem; width: auto; transition: .2s; }

.site-header .site-header-top { display: flex; padding: 0.5rem 1rem; align-items: center; flex-grow: 1; transition: 0.2s; background-color: var(--primary-color); }

.site-header .site-header-top #primary-menu-list { margin-left: 1rem; padding-left: 0; margin-bottom: 0; font-family: 'Fira Sans', sans-serif; }

.site-header .site-header-top #primary-menu-list a { position: relative; }

.site-header .site-header-top #primary-menu-list a:before, .site-header .site-header-top #primary-menu-list a:after { content: ""; position: absolute; bottom: -2px; width: 100%; left: 0; height: 2px; margin: 2px 0 0; transition: all .15s ease-in-out; opacity: 0; background-color: var(--hyperlink-hover-color); }

.site-header .site-header-top #primary-menu-list a:hover, .site-header .site-header-top #primary-menu-list li.menu-toggle-clicked > a { opacity: 1; }

.site-header .site-header-top #primary-menu-list a:hover:before, .site-header .site-header-top #primary-menu-list a:hover:after, .site-header .site-header-top #primary-menu-list li.menu-toggle-clicked > a:before, .site-header .site-header-top #primary-menu-list li.menu-toggle-clicked > a:after { opacity: 1; }

.site-header .site-header-top #primary-menu-list li { list-style-type: none; margin-bottom: 0; }

.site-header .site-header-top #primary-menu-list li .sub-menu { display: block; visibility: hidden; opacity: 0; position: absolute; left: auto; padding: 0; padding-bottom: 0.5rem; font-size: 16px; background-color: var(--primary-color); box-shadow: 0.04rem 0.1rem 0.1rem #242424; transition: .15s; }

.site-header .site-header-top #primary-menu-list li .sub-menu > li > a { display: block; margin: 0.7rem 2.5rem 0.7rem 1.5rem; }

.site-header .site-header-top #primary-menu-list li .sub-menu li > .sub-menu { left: 100%; top: 0; min-height: 100%; }

.site-header .site-header-top #primary-menu-list li:hover > .sub-menu, .site-header .site-header-top #primary-menu-list li.menu-toggle-clicked { visibility: visible; opacity: 1; }

.site-header .site-header-top #primary-menu-list > li { float: left; margin: 0.5rem 0.9rem; font-size: 18px; }

.site-header .site-header-top #primary-menu-list > li > .sub-menu { margin-top: 0.1rem; padding-top: 0.5rem; }

.site-header .site-header-top #primary-menu-list .current-menu-item > a, .site-header .site-header-top #primary-menu-list #primary-menu-list > .current-menu-parent > a { border-bottom: 0.15rem solid var(--hyperlink-color); }

.site-header .site-header-top .header-social-icons { display: flex; height: 2.5rem; margin-left: auto; align-items: center; }

.site-header .site-header-top .header-social-icons a { height: 100%; margin: 0 0.1rem; }

.site-header .site-header-top .header-social-icons img { object-fit: contain; height: 100%; transition: .2s; }

.site-header .site-header-top .header-social-icons img:hover { filter: brightness(90%); }

@media only screen and (max-width: 1000px) { .site-header .site-header-top { flex-direction: column; }
  .site-header .site-header-top .header-social-icons { margin: auto 0 0.5rem 0.5rem; } }

.site-header .header-bottom { display: flex; padding: 0.1rem 1rem; min-height: 1rem; justify-content: space-between; background-color: var(--secondary-color); }

.site-header .header-bottom div { margin: 0.2rem; }

.site-header-small img.custom-logo { max-height: 3rem; }

#header-toggle { cursor: pointer; display: none; position: absolute; right: -0.4rem; top: 2rem; padding: 0.7rem 0.5rem 0.5rem 0.8rem; margin-right: -2.2rem; box-shadow: 0.09rem 0.05rem 0.08rem #242424; border-radius: 0.2rem; background-color: var(--primary-color); color: white; }

#header-close { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; display: none; }

@media only screen and (max-width: 1000px) { .site-header-top { flex-direction: column; }
  .site-header-top .header-social-icons { margin: auto 0 0.5rem 0.5rem; } }

@media only screen and (max-width: 800px) { .site-header { position: fixed; left: -0.2rem; top: 0; bottom: 0; display: flex; flex-direction: column; z-index: 100002; width: 0; transition: .5s; border-right: var(--secondary-color) 0.2rem solid; }
  .site-header .site-header-top { overflow-x: hidden; padding: 0; align-items: start; }
  .site-header .site-header-top #primary-menu-list { margin-top: 1rem; margin-bottom: 2rem; }
  .site-header .site-header-top #primary-menu-list > li { float: none; margin: 0.5rem 0.5rem 0.4rem 0; }
  .site-header .site-header-top #primary-menu-list .sub-menu { z-index: 100002; display: none; box-shadow: none !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  .site-header .site-header-top #primary-menu-list .sub-menu li > .sub-menu { margin-top: 1rem !important; left: 1rem !important; }
  .site-header .site-header-top #primary-menu-list li.showChildren > .sub-menu, .site-header .site-header-top #primary-menu-list li:hover > .sub-menu, .site-header .site-header-top #primary-menu-list li.current-menu-ancestor > .sub-menu, .site-header .site-header-top #primary-menu-list li.current_page_item > .sub-menu, .site-header .site-header-top #primary-menu-list li.menu-toggle-clicked > .sub-menu { position: relative; display: block; visibility: visible; opacity: 1; }
  .site-header .site-header-top #primary-menu-list li .sub-menu > li > a { margin-left: 1rem; }
  .site-header .site-header-top .site-logo { margin-left: auto; margin-right: auto; }
  .site-header .site-header-top .custom-logo { max-height: 4.5rem !important; }
  .site-header .header-bottom { overflow-x: hidden; padding: 0; flex-direction: column; flex-shrink: 0; }
  .site-header.site-header-visible { width: 300px; }
  .site-header.site-header-visible .site-header-top { padding: 0.5rem 1rem; }
  .site-header.site-header-visible .header-bottom { padding: 0.1rem 1rem; }
  .site-header.site-header-visible #header-close { display: block; }
  #header-toggle { display: block; background-color: var(--secondary-color); } }

/** Page Styles */
.site-wrap { padding-bottom: 2rem; }

.site-main { padding: 1rem 2rem 3rem; max-width: 70rem; margin: 0 auto; }

.page-header { text-align: center; margin: 0 1rem 1rem; }

.page-header h1 { font-size: 3em; font-weight: 300; }

.page-footer { display: flex; justify-content: space-between; margin-top: 2rem; }

.site-footer { position: absolute; bottom: 0; left: 0; right: 0; min-height: 1rem; padding: 0.8rem 1rem; font-family: 'Fira Sans', sans-serif; color: white; font-size: 0.8em; text-align: center; background-color: var(--primary-color); }

.feature { max-width: 40rem; }

.feature img { width: 100%; }

.feature em { font-style: normal; display: block; text-align: right; font-size: 1.5em; font-weight: bold; }

.post-title, .page-title { margin-top: 0; margin-bottom: 0rem; }

/** Blocks Styles */
.whats-on-block { border: 0.15rem solid #ccc; box-shadow: 0.1rem 0.12rem 0.1rem 0.1rem #aaa; border-radius: 0.5rem 0 1rem 0; }

.whats-on-block .fc-list-event-time { white-space: break-spaces !important; min-width: 6rem; }

.whats-on-block .fc-list-event-graphic { display: none; }

.whats-on-block .fc-list-table td { padding: 6px 9px !important; }

.whats-on-block .fc-list-sticky .fc-list-day th { z-index: 2; }

.whats-on-block.fc-theme-standard .fc-list { border: none; }

.whats-on-block a { color: #f1faff; }

.calendar-block .fc-daygrid-event-dot { display: none; }

.calendar-block .fc-toolbar-title { color: var(--primary-color); font-size: 1.4em; }

.calendar-block .fc-v-event { border: none; }

:root { --fc-button-bg-color: var(--primary-color); --fc-neutral-bg-color: var(--secondary-color); --fc-event-bg-color: var(--secondary-color); --fc-list-event-hover-bg-color: #ffffff11; }

/** Service Styles */
.service-main { display: flex; flex-wrap: wrap; }

.service-main > div { flex-grow: 1; width: 20rem; }

.service-media-iframe { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }

.service-media-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-width: 800px) { .service-main { grid-template-columns: 100%; } }

@media only screen and (max-width: 400px) { .service-media-iframe { height: 12rem; } }

.bbc_service .series { margin-bottom: 0.5rem; }

.service-media { padding: 0.5rem; }

.service-media audio { width: 100%; display: block; }

.service-media iframe { width: 100%; }

.service-media img { width: 100%; height: auto; }

.service-media h2 { margin-top: 1rem; font-size: 1.2em; margin-bottom: 0.2rem; }

.service-description { padding: 0.5rem; display: flex; flex-direction: column; }

.bible-reading { margin-bottom: 1.5rem; }

.bible-reading h2 { margin-top: 0; font-size: 1.2em; margin-bottom: 0.2rem; }

.service-people { display: flex; flex-wrap: wrap; margin: auto 0 0.5rem; }

.service-people .service-person { display: flex; margin: 0.3rem 2rem 0.3rem 0; }

.service-people .service-person-img img { height: 4rem; }

.service-person-details { margin: 0.3rem 0.3rem 0.3rem 0.7rem; }

.service-person-details h2 { margin-top: 0; font-size: 1.2em; margin-bottom: 0.2rem; }

.service-person-details p { font-family: 'Fira Sans', sans-serif; color: #424242; }

.services-list { display: flex; justify-content: center; align-items: start; flex-wrap: wrap; }

.service-preview { position: relative; background-color: #fff; color: #333; border: 0.15rem solid #ccc; margin: 1rem; width: 20rem; transition: .2s; border-radius: 0.5rem 0 1rem 0; min-width: 10rem; }

.service-preview > a { display: flex; flex-direction: column; }

.service-preview > a:before, .service-preview > a:after { height: 0; }

.service-preview .thumbnail { margin: 0.5rem; transition: all .2s; box-shadow: 0.1rem 0.15rem 0.15rem 0.1rem #929292; border-radius: 0.5rem 0 1rem 0; }

.service-preview h2, .service-preview h3 { margin-top: 0; font-size: 1.4em; margin-bottom: 0.2rem; color: var(--heading-color); font-family: 'Fira Sans', sans-serif; }

.service-preview:hover { background-color: #eee; border-radius: 0; }

.service-preview:hover .thumbnail { filter: brightness(90%); border-radius: 0.3rem 0 0.7rem 0; }

.service-preview .youtube { position: absolute; width: 1.6rem; left: 0.9rem; top: 0.9rem; }

.service-preview .sermon { position: absolute; width: 1.2rem; right: 0.9rem; top: 0.9rem; }

.service-preview .details { margin-top: 1rem; padding: 1rem; }

.service-preview .series { margin-bottom: 0.3rem; font-size: 0.9em; }

.service-preview .date { font-family: 'Fira Sans', sans-serif; color: #555; font-size: 0.9em; }

.service-preview-small { width: 13rem; font-size: 0.9em; }

.service-preview-medium { min-width: 16rem; width: 16rem; }

.services-navigation { text-align: center; }

.services-block { display: flex; flex-wrap: wrap; }

.services-block .services-list { justify-content: start; align-items: stretch; }

.services-block > div { width: 46.5rem; }

/** Homepage Styles */
.home { color: white; background-color: var(--primary-color); }

.home h1, .home h2, .home h3, .home h4, .home h5, .home em { color: white; }

.home h2 { font-weight: bold; font-size: 1.6em; }

.home p { font-size: 1.1em; }

.home blockquote { color: white; }

.home iframe { border-radius: 0.5rem 0 1rem 0; box-shadow: 0.1rem 0.12rem 0.1rem 0.1rem #aaa; width: 100%; height: 19rem; }

.home section { margin-bottom: 2rem; }

.home .services-block h3 { color: inherit !important; }

#home-featured { width: 100%; padding: 1rem 1rem 20rem 1rem; background-image: url("images/home.png"); background-repeat: no-repeat; background-size: 100%; background-position: bottom; display: grid; grid-template-columns: auto 10rem; }

#home-services { display: flex; }

#home-contact { display: grid; grid-template-columns: auto auto; }

.home-footer { background-color: var(--secondary-color); }

/** Cookie Popup */
.cookie-popup { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; padding: 0.8rem 1rem; background-color: var(--secondary-color); font-size: 0.9rem; color: #ffffff; transition: 0.5s; }

.cookie-popup h2 { margin-top: 0; margin-bottom: 0; font-size: 1.3em; font-weight: bold; color: #ffffff; }

.cookie-popup p { margin-bottom: 0.2rem; font-size: 1em; }

.cookie-popup a { color: white; position: relative; }

.cookie-popup a:before, .cookie-popup a:after { content: ""; position: absolute; bottom: -2px; width: 100%; left: 0; height: 2px; margin: 2px 0 0; transition: all .15s ease-in-out; opacity: 0; background-color: var(--hyperlink-hover-color); }

.cookie-popup a:hover { opacity: 1; }

.cookie-popup a:hover:before, .cookie-popup a:hover:after { opacity: 1; }

.cookie-popup.hidden { opacity: 0; }

.cookie-popup .cookie-buttons button { color: #ffffff; font-size: 0.9em; font-weight: bold; letter-spacing: 0.01rem; box-sizing: content-box; background-color: transparent; border: 0.08rem solid #ffffff; border-radius: 0.3rem; padding: 0.4rem 0.8rem; margin-right: 0.5rem; margin-top: 0.2rem; cursor: pointer; transition: 0.1s; }

.cookie-popup .cookie-buttons button:hover { outline: 0.1rem solid #ffffff; }