/*
Theme Name: Ontario's Port Hope Theme
Description: Custom designed theme specially for Ontario's Port Hope
Version: 0.9
Author: Rob Williams, DevUp Inc <hello@devup.ca>
Tags: custom template
*/

/* Default Styles */

:root {
	--container-width: 1400px;
	--primary-color: #20372e;
	--secondary-color: #688173;
	--call-to-action: #deb668;
	--accent: #cc6b57;
}

html, body {
    width:                  100%;
    font-family:            'Lato', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             white;
}
html { scroll-behavior: smooth; }
body { height: 100%; overflow-x: hidden; }

p { padding: 0 0 1em 0; color: var(--primary-color); }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }

img.centered {
	display: block;
	margin: 0 auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 1em 1em;
	display: inline;
}

img.alignleft {
	display: inline;
}

img.aligncenter {
    display: block;
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { margin: 0 auto; }


/* Basic styles */

a { text-decoration: none; color: var(--primary-color); font-weight: 800; transition: 0.5s all; }
a:hover { color: var(--secondary-color); }

h1 { font-size: 4rem; line-height: 1.4em; color: var(--primary-color); font-weight: 800; }
h2 { font-size: 2rem; line-height: 1.4em; color: var(--primary-color); font-weight: 800; }
h3 { font-size: 1.5rem; line-height: 1.4em; color: var(--primary-color); font-weight: bold; }
h2 + h3 { margin-bottom: 1.5rem; }
h4 { font-size: 1.35rem; line-height: 1.4em; color: var(--primary-color); font-weight: bold; }

header { position: fixed; top: 0; left: 0; width: 100%; background: var(--primary-color); height: 100px; z-index: 999; }
.logged-in header { top: 30px; }
.header_bar { width: 95%; max-width: var(--container-width); margin: 0 auto; list-style: none outside; }
.header_bar figure { height: 80px; margin: 10px 0; }
.header_bar img { height: 80px !important; width: auto !important; }

.header_bar li .wp-block-columns { align-items: center !important; }
.header_bar .menu-navigation-menu-container ul { text-align: right; list-style: none outside; }
.header_bar .menu-navigation-menu-container ul li { display: inline-block; margin-left: 3rem; }
.header_bar .menu-navigation-menu-container ul li a, .button_link a, .wc-block-cart__submit-container a, .wc-block-components-button  { color: white; background: var(--primary-color); display: inline-block; border-radius: 15px; border: none; }
.header_bar .menu-navigation-menu-container ul li:last-child a, .button_link a, .wc-block-cart__submit-container a, .wc-block-components-button  { background: var(--call-to-action); padding: 0.75rem 2rem; }
.header_bar .menu-navigation-menu-container ul li:last-child a:hover, .button_link a:hover, .wc-block-cart__submit-container a:hover, .wc-block-components-button:hover { background: var(--accent); }
.wc-block-components-button { text-transform: uppercase; font-size: 1.1rem; font-weight: bold; }

footer { background: var(--primary-color); padding: 2rem 0; }
.footer_bar { list-style: none outside; width: 95%; max-width: var(--container-width); margin: 0 auto; }
.footer_bar img { height: 60px !important; width: auto !important; }
.footer_bar a { color: white; font-weight: normal; }
.footer_bar a:hover { color: var(--call-to-action); }
.footer_bar .menu { list-style: none outside; text-align: right; }

main { margin-top: 95px; overflow-x: hidden; }
.content_area { width: 95%; max-width: var(--container-width); margin: 0 auto; }
.bg_green { background-color: var(--primary-color); }

.zoomable { position: relative; }
.zoomable img { transition: 0.5s all; transform-origin: center left;  }
.zoomable:hover img { transform: scale(1.3); }

.higher { margin-top: -5rem; position: relative; z-index: 10; }

.hero_area { border-bottom: 0.75rem solid var(--primary-color); }
.hero_area h1 { line-height: 2em; text-shadow: 0 0 1rem rgba(0,0,0,0.6), 0 0 0.5rem rgba(0,0,0,0.6); }
.hero_area h2 { line-height: 1.25em; font-family: "Kaisei Tokumin", Verdana, sans-serif; font-weight: 800; text-shadow: 0 0 1rem rgba(0,0,0,0.6), 0 0 0.5rem rgba(0,0,0,0.6); }
.hero_area h3 { line-height: 1.25em; font-size: 1.5em !important; font-family: "Kaisei Tokumin", Verdana, sans-serif; font-weight: 800; text-shadow: 0 0 1rem rgba(0,0,0,0.6), 0 0 0.5rem rgba(0,0,0,0.6); }
.hero_area hr { border-color: white; width: 20%; margin: 1rem auto; box-shadow: 0 0 1rem rgba(0,0,0,0.6), 0 0 0.5rem rgba(0,0,0,0.6); }
.hero_area p { padding: 1rem 0 0; }

.extend_to_left, .extend_to_right { margin-top: 1rem; padding: 2rem 2rem 2rem 0; background: white; position: relative; border-radius: 1rem; z-index: 5; }
.extend_to_right { padding: 2rem 0 2rem 2rem; }
.extend_to_left:after, .extend_to_right:after { content: ''; display: block; position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; }
.extend_to_left:after { right: 95%; }
.extend_to_right:after { left: 95%; }

.extend_white:after { background: white; }
.extend_green:after { background: var(--secondary-color); }

.vertical_align_middle { align-self: stretch; }

.about_container > div { width: 100%; display: grid; grid-template-columns: 1.8fr 1.25fr 1.25fr 1fr 2.5fr; grid-template-rows: auto auto auto auto; gap: 2rem; padding: 2rem; }
.about_header {	grid-column: 1 / 5; grid-row: 1; background: white; padding: 1rem; border-radius: 1rem; }
.architecture { margin-top: 0; grid-column: 1 / 3; grid-row: 2; background: white; position: relative; border-radius: 1rem; line-height: 1.6em; z-index: 5; }
.architecture p:last-child { padding-bottom: 0; margin-bottom: 0; }
.house_image { grid-column: 5 / 3; grid-row: 2; height: 100%; }
.house_image div { height: 100%; }
.house_image img { border-radius: 1rem; }
.church_image { grid-column: 1 / 2; grid-row: 3 / 5; height: 100%; }
.church_image div, .church_image figure { height: 100%; }
.church_image img { border-radius: 1rem; height: 100%; }
.history { grid-column: 2 / 5; grid-row: 3; background: white; padding: 1.5rem; border-radius: 1rem; line-height: 1.6em; }
.history p:last-child { padding: 0; }
.about_container .gold_box { grid-column: 2 / 2; grid-row: 4; background: var(--call-to-action); border-radius: 1rem; }
.about_container .gold_box > div { height: 100%; }
.about_container .gold_box figure { position: relative; height: 100%; }
.about_container .gold_box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
.culture { margin-top: 0; grid-column: 3 / 6; grid-row: 4; background: white; padding: 1.5rem; border-radius: 1rem; line-height: 1.6em; position: relative; z-index: 5; }
.culture p:last-child { padding: 0; }
.main_photo { grid-column: 5; grid-row: 1 / 4; }
.main_photo > div, .main_photo figure, .main_photo img { height: 100% !important; }

.authors_container > div { width: 95%; max-width: var(--container-width); margin: 3rem auto; }

.draw_as_columns { flex-direction: column; height: 100%; }
.draw_as_columns > div:first-child { background: var(--accent); border-radius: 1rem;}
.draw_as_columns > div:last-child { flex-grow: 1; background: var(--call-to-action); border-radius: 1rem; }
.draw_as_columns > div:last-child p { color: transparent; }

.authors_header { background: var(--secondary-color); padding: 1rem; border-radius: 1rem; font-size: 2rem; font-weight: bold; margin-bottom: 2rem; }
.authors_header h1 { color: white; }

.bruce_bio { background: var(--secondary-color); margin-top: 0; color: white; padding: 1.5rem; border-radius: 1rem; line-height: 1.6; position: relative; z-index: 5; }
.bruce_bio h2, .bruce_bio p { color: white; }
.bruce_bio h3 { color: white; text-transform: uppercase; font-weight: normal; }
.foyer_photo { border-radius: 1rem; height: 100%; }

.nigel_area { margin-top: 2rem; }
.nigel_bio { margin-top: 0; background: var(--secondary-color); color: white; padding: 1.5rem; border-radius: 1rem; line-height: 1.6; position: relative; z-index: 5; height: 100%; display: flex; align-items: center; }
.nigel_bio h2, .nigel_bio p { color: white; }
.nigel_bio h3 { color: white; text-transform: uppercase; font-weight: normal; }

.nigel_house_container { display: flex; flex-direction: column; height: 100%; gap: 2rem; }
.nigel_house { border-radius: 1rem; min-height: 12rem !important; flex-basis: 60%; }
.nigel_house_container .orange_box { background: var(--accent); border-radius: 1rem; }
.nigel_house_container .orange_box p { color: transparent; }
.nigel_house_container .gold_box { background: var(--call-to-action); border-radius: 1rem; }

.dark_section { background: var(--primary-color); padding: 2rem 0 4rem; }
.dark_section .wp-block-columns { padding: 2rem 0 0; width: 95%; max-width: var(--container-width); margin: 0 auto; }
.dark_section h1 { background: white; color: var(--primary-color); padding: 1rem 2rem; border-radius: 1rem;}
.highlight_photo img { border-radius: 1rem; }
.highlight_content { background: white; padding: 1rem; border-radius: 1rem; }
.highlight_gold_box { background: var(--call-to-action); color: transparent; border-radius: 1rem; flex-grow: 1; }
.highlight_orange_box { background: var(--accent); color: transparent; border-radius: 1rem; flex-grow: 1; }
.highlight_rightcol { display: flex; flex-direction: column; gap: 1rem; }
.highlight_house .wp-block-cover { height: 100% !important; border-radius: 1rem; }
.highlight_3col figure { width: 100%; height: 100%; position: relative; }
.highlight_3col figure img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
.highlight_content h4 + p { margin-top: 1rem; }

#purchase { width: 95%; max-width: var(--container-width); margin: 2rem auto; }
.purchase_extend { position: relative; z-index: 5; }
.purchase_extend:after { content: ''; position: absolute; top: 15%; right: 0; background: var(--secondary-color); border-radius: 1rem; height: 70%; width: 200%; z-index: -1; }

.book_launch { background: var(--accent); padding: 2rem 0; }
.book_launch h2, .book_launch p { color: white; line-height: 1.4em; }
.book_launch p { font-size: 1.25em; margin-bottom: 0.5rem; }
.book_launch a { color: white; }
.book_launch a:hover { color: var(--call-to-action); }
.book_launch p:last-child { margin-bottom: 0; padding-bottom: 0; }

div.woocommerce, div.wp-block-woocommerce-cart, div.wp-block-woocommerce-checkout  { width: 95%; max-width: var(--container-width); margin: 3rem auto; }
.product_meta { display: none; }

@media screen and (max-width: 1100px) {
	.nigel_house { min-height: 14rem !important; }
	.higher h2 { padding-top: 5rem; }
}

@media screen and ( max-width: 900px ) {
	h1 { font-size: 2.5rem; }
	h2 + h3 { margin-bottom: 0.25rem; }
	h3 { font-size: 1.3rem; }
	header { height: 140px; }
	.header_bar li .wp-block-columns { display: block; }
	.header_bar li .wp-block-columns .wp-block-column { text-align: center; }
	.header_bar figure, .header_bar img { height: 50px !important; }
	.header_bar .menu-navigation-menu-container ul { text-align: center; }
	.house_image .wp-block-cover img { object-position: 40% 50%; }
	.authors_header { margin-bottom: 1rem;}
	.nigel_house_container { gap: 1rem; }
	.nigel_house { min-height: 20rem !important; }
	.nigel_house img { object-position: 37.5% 50%; }
	.highlight_church_row > .wp-block-column { flex-basis: 50% !important; }
	.highlight_church_row > .wp-block-column:first-child { flex-basis: 25% !important; }
	.highlight_church_row > .wp-block-column:last-child { flex-basis: 25% !important; }
	.highlight_3col > .wp-block-column { flex-basis: 15% !important; display: none; }
	.highlight_3col > .wp-block-column:first-child { flex-basis: 40% !important; display: block; }
	.highlight_3col > .wp-block-column:last-child { flex-basis: 60% !important; display: block; }
	#authors .wp-block-columns, .dark_section .wp-block-columns { gap: 1rem !important;}
	.dark_section .wp-block-columns { padding-top: 1rem; }
}

@media screen and ( max-width: 850px ) {
	header { position: relative; top: 0 !important; margin-top: -10px; }
	.header_bar { padding-top: 1rem; }
	main { margin-top: 0; }
	.higher .wp-block-columns > .wp-block-column:first-child { padding: 2rem 0; }
	.about_container > div { grid-template-columns: 1.8fr 1.25fr 1.25fr 1fr; }
	.main_photo, .scroll_box, #authors .orange_box, .highlight_gold_box { display: none; }
}

@media screen and ( max-width: 500px ) {
	.header_bar .menu-navigation-menu-container ul li { margin: 0.5rem 1rem; }
	.hero_area h1 { line-height: 1.4em; }
	header { height: auto; padding: 0 0 2rem; }
	.higher { margin-top: 0; }
	.higher .wp-block-columns > .wp-block-column:first-child { padding: 0; }
	.higher h2 { padding-top: 1rem; }
	.zoomable { left: 2.5rem; margin: -2rem 0 2rem; }
	.zoomable:hover img { transform: none; }
	.about_container > div { display: block; padding: 2rem 0; }
	.about_container > div > div { margin-bottom: 1rem;}
	.about_container .gold_box { text-align: center;}
	.about_container .gold_box img { position: relative; top: 0; left: 0; width: 100%; transform: none; }
	.footer_bar p, .footer_bar .menu { text-align: center; }
	.footer_bar .menu li { display: inline-block; margin: 0.5rem; }
}