/*
Theme Name: Red Deer OK Tire Theme
Description: Custom designed theme specially for Red Deer OK Tire
Version: 1.0
Author: Rob Williams, Results Marketing & Advertising <web@resultsinc.ca>
Tags: custom template
*/

/* Default Styles */

:root {
	--oktire_yellow: #ffda09;
	--oktire_grey: #333333;
	--container_width: 1600px;
	--narrow-container_width: 1200px;
}

html, body {
    width:                  100%;
    font-family:            'Open Sans', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             white;
}
body { height: 100%; }

p { padding: 0 0 1em 0; line-height: 1.2em; font-size: 1.25em; }

.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; }

.margin_top { margin-top: 3rem !important; }
.margin_bottom { margin-bottom: 3rem !important; }

/* Basic styles */

a { text-decoration: none; color: var(--oktire_yellow); font-weight: 800; }
a:hover { color: var(--oktire_grey); }

h1 {}
h2 { line-height: 1.2em; font-size: 3rem; margin-bottom: 1rem; }
h3 { line-height: 1.2em; font-size: 2rem; margin-bottom: 1rem; }
h3 i { color: var(--oktire_yellow); }
h4 { line-height: 1.2em; font-size: 1.25rem; margin-bottom: 1rem; }

header { background: white; position: sticky; top: 0; z-index: 100; border-bottom: 1px var(--oktire_yellow) solid; }
.logged-in header { top: 32px; }
.header_bar { list-style: none outside; }
.header_bar .wp-block-columns { width: 95%; max-width: var(--container_width); margin: 0 auto; padding: 1rem 0; }
.header_bar p { padding: 0; }
.header_bar a { font-weight: normal; }

footer { background: black; color: white; padding-top: 2rem; }
footer ul { list-style: none outside; width: 95%; max-width: var(--container_width); margin: 0 auto; }
footer .whitebg figure { background: white; box-shadow: 0 0 5px rgba(255,255,255,0.8); }
footer figure { width: 50% !important; margin-bottom: 1rem !important; display: inline-block !important; }
footer p { font-size: 1rem !important; }
footer a { color: white; transition: 0.5s all; }
footer a:hover { color: var(--oktire_yellow); }

.yellow_bar { background: var(--oktire_yellow); color: black; }
.yellow_bar a, .yellow_bar a:hover { color: black; }

header .menu-nav-menu-container ul { list-style: none outside; display: flex; align-items: center; justify-content: center; gap: 0; }
header .menu-nav-menu-container ul li { flex-grow: 0; }
header .menu-nav-menu-container ul li + li { border-left: 1px #777 solid; padding-left: 16px; margin-left: 16px; }
header .menu-nav-menu-container ul li a { display: block; color: black; font-weight: normal; padding: 0.25rem 0.5rem; background: white; transition: 0.5s all; }
header .menu-nav-menu-container ul li a:hover { background: black; color: white; }
footer .menu-nav-menu-container { margin-bottom: 2rem; }
footer .menu-nav-menu-container li { text-align: center; margin-bottom: 1rem; }

.menu-social-media-container { margin-top: 0.5rem; }
.menu-social-media-container .menu { list-style: none outside; }
.menu-social-media-container .menu li { display: inline-block; margin-right: 0.5rem; padding-right: 0.5rem; border-right: 1px solid black; }
.menu-social-media-container .menu li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
header .menu-social-media-container { float: right; }
header .menu-social-media-container .menu { margin-left: 2rem; }
footer .menu-social-media-container { margin-top: 1rem; text-align: right; }

.button_link a, .gform_button { font-weight: normal; display: inline-block; padding: 0.5rem 1rem; border-radius: 5px; transition: 0.5s all; }
.button_link a + a { margin-left: 2rem; }
.button_link_yellow a, .gform_button { background: var(--oktire_yellow) !important; color: black !important; }
.button_link_yellow a:hover { color: white !important; background: black !important; }
.button_link_black a { background: black; color: white !important; border: 1px black solid; }
.button_link_black a:hover { color: black !important; background: var(--oktire_yellow) !important; }
.button_link_transparent a { background: transparent; color: white !important; border: 3px var(--oktire_yellow) solid; }
.button_link_transparent a:hover { color: black !important; background: var(--oktire_yellow) !important; }
.gform_button:hover { color: white !important; background: var(--oktire_grey) !important; }


.home .wp-block-cover h2 { font-size: 3rem; margin-bottom: 3rem; text-shadow: 3px 3px 5px rgba(0,0,0,0.7); }
.home .wp-block-cover p { font-weight: bold; text-shadow: 3px 3px 5px rgba(0,0,0,0.7); }

main > .wp-block-group { padding: 5rem 0; }
main > .wp-block-group .wp-block-group__inner-container { width: 95%; max-width: var(--container_width); margin: 0 auto; }

.narrow { width: 95%; max-width: var(--narrow-container_width); margin: 0 auto; }

.bordered img { border: 1px black solid;}
.dropshadow img { box-shadow: 5px 5px 5px rgba(0,0,0,0.5); }
.dropshadow_text { text-shadow: 3px 3px 5px rgba(0,0,0,0.5); }

.black_section { background: black; color: white; }
.black_section .wp-block-columns p { margin-top: 1rem; font-size: 2rem; }
.contact_black_section .wp-block-columns p { font-size: 1.25rem; }
.gfield_label, .gform-field-label { color: white !important; }

.grey_section { background: var(--oktire_grey); color: white; padding: 0 !important; }
.grey_section:before { content: ''; background-image: url(/wp-content/uploads/2026/04/grey_section_top.svg); display: block; width: 100%; height: 40px; background-size: 100% 100%; background-repeat: no-repeat; margin-bottom: 5rem; }
.grey_section:not(.no_grey_bottom):after { content: ''; background-image: url(/wp-content/uploads/2026/04/grey_section_bottom.svg); display: block; width: 100%; height: 40px; background-size: 100% 100%; background-repeat: no-repeat; margin-top: 5rem; transform: scaleY(-1); }
.grey_section.padding_bottom { padding-bottom: 3rem !important; }

.dotted_underline:after {
	content: ''; width: 100px; height: 5px; margin: 1rem 0; display: block;
	background: linear-gradient(90deg,rgba(255, 218, 9, 1) 0%, rgba(255, 218, 9, 1) 7%, rgba(255, 218, 9, 0) 7%, rgba(255, 218, 9, 0) 14%, rgba(255, 218, 9, 1) 14%, rgba(255, 218, 9, 1) 21%, rgba(255, 218, 9, 0) 21%, rgba(255, 218, 9, 0) 28%, rgba(255, 218, 9, 1) 28%, rgba(255, 218, 9, 1) 35%, rgba(255, 218, 9, 0) 35%, rgba(255, 218, 9, 0) 42%, rgba(255, 218, 9, 1) 42%, rgba(255, 218, 9, 1) 100%);
}
.dotted_underline.centered:after { margin: 1rem auto 3rem; }

.yellow_section { background: var(--oktire_yellow); color: black; padding-bottom: 0 !important; }
.yellow_section .wp-block-group__inner-container { max-width: var(--narrow-container_width) !important; }
.yellow_section:after { content: ''; background-image: url(/wp-content/uploads/2026/04/yellow_section_bottom.svg); display: block; width: 100%; height: 140px; background-size: 100% 100%; transform: scaleY(-1); }
.rounded_corners img { border-radius: 2rem; }

.gold_stars_group .wp-block-column { padding: 0 3rem; text-align: center; }
.gold_stars_group .wp-block-column:before { content: '\f005'; font: var(--fa-font-solid); color: var(--oktire_yellow); font-size: 4rem; display: inline-block; margin-bottom: 1rem; }

.black_stars_group .wp-block-column { padding: 0 3rem; text-align: center; }
.black_stars_group .wp-block-column:before { content: '\f005'; font: var(--fa-font-solid); display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 1rem; font-size: 2.5rem; margin-bottom: 1rem; background: var(--oktire_yellow); color: black; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5);  }

.questions_block { max-width: var(--narrow-container_width); margin: 0 auto; }
.questions_block .wp-block-column { position: relative; bottom: 0; padding: 3rem 3rem 1rem; border: 1px var(--oktire_yellow) solid; box-shadow: 0 0 5px #33333377; transition: 0.5s all; }
.questions_block .wp-block-column:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 0; background: var(--oktire_yellow); content: ''; transition: 0.5s all; }
.questions_block .wp-block-column:hover { bottom: 10px; }
.questions_block .wp-block-column:hover:after { max-height: 10px; }
.questions_block h4 { font-family: 'Domine', serif; }
.questions_block h4 i { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 1rem; margin-bottom: 1rem; background: var(--oktire_yellow); color: black; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.questions_block p { font-size: 1rem !important; padding-bottom: 2rem !important; }
.questions_block a { color: black; font-weight: normal; }

.canadian_owned img { height: auto !important; }

.brand_parade { position: relative; }
.brand_parade .wp-block-group__inner-container { position: relative; z-index: 5; }
.brand_parade:after { position: absolute; bottom: 0; left: 0; content: ''; background-color: var(--oktire_yellow); background-image: url(/wp-content/uploads/2026/04/yellow_section_bottom.svg); display: block; width: 100%; height: 180px; background-size: 100% 100%; }

.our_services { padding: 0 !important; }
.our_services .wp-block-group__inner-container { width: 100% !important; max-width: none !important; }
.our_services .wp-block-columns .wp-block-column { padding-top: 5rem; padding-bottom: 5rem; }
.our_services .wp-block-columns .wp-block-column h4 { font-size: 2rem; font-weight: normal; margin: 0.5rem 0 1rem; }
.our_services .wp-block-columns.black_section .wp-block-column h4 { color: var( --oktire_yellow); }
.our_services .wp-block-columns .wp-block-column p { width: 70%; margin: 0 auto; }
.paint_it_black img { filter: brightness( 0% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg ); }

.animated_reveal { width: 95%; max-width: var(--narrow-container_width); margin: 0 auto; }
.animated_reveal .wp-block-column h2, .animated_reveal .wp-block-column h3, .animated_reveal .wp-block-column p { padding-left: 3rem; padding-right: 3rem; }
.animated_reveal .wp-block-column:first-child { border-radius: 1rem; position: relative; z-index: 3; opacity: 0; animation: animated_reveal_left 1s ease-in-out forwards; animation-delay: 0.25s; padding: 3rem 0; }
.animated_reveal .wp-block-column:last-child { border-radius: 1rem; position: relative; z-index: 2; opacity: 0; animation: animated_reveal_right 1s ease-in-out forwards; }
.animated_reveal img { max-height: 60vh; width: auto !important; height: auto !important; border-radius: 1rem; }

.mobile_menu_icon, .mobile_book_now_link { display: none; }

@keyframes animated_reveal_left {
	from { opacity: 0; transform: translateX(-200px); }
	to { opacity: 1; transform: translateX(25px); }
}
@keyframes animated_reveal_right {
	from { opacity: 0; transform: translateX(200px); }
	to { opacity: 1; transform: translateX(-25px); }
}


@media screen and ( max-width: 1300px ) {
	.header_bar .button_link_yellow i { display: none; }
	.brand_parade:after { height: 100px;}
}

@media screen and ( max-width: 1160px ) {
	.header_bar .button_link_yellow { font-size: 1rem; }
	.yellow_section:after { height: 70px; }
	.rounded_corners.dropshadow img { width: 100% !important; height: auto !important; }
}

@media screen and ( max-width: 1080px) {
	p { font-size: 1rem; }
	.header_bar li:last-child .wp-block-columns { flex-wrap: wrap !important; gap: 0; }
	.header_bar li:last-child .wp-block-columns > div { flex-basis: 50% !important; }
	.header_bar li:last-child .wp-block-columns > div:first-child img { max-height: 130px; width: auto; }
	.header_bar li:last-child .wp-block-columns > div:nth-child(2) { order: 5; flex-basis: 100% !important; }
	header { position: relative; top: 0 !important; }
	.contact_black_section .wp-block-columns { flex-wrap: wrap !important; }
	.contact_black_section .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
}

@media screen and ( max-width: 1000px ) {
	h2, .home .wp-block-cover h2 { font-size: 2rem; }
	h3 { font-size: 1.5rem; }
	.home .wp-block-cover { min-height: 50vh !important; }
	.wp-block-columns.black_stars_group { flex-wrap: wrap !important; }
	.questions_block .wp-block-columns { flex-wrap: wrap !important; justify-content: center; }
	.questions_block .wp-block-columns .wp-block-column { flex-basis: 35% !important; flex-grow: 0 !important; }
	.brand_parade:after { height: 70px; }
	.footer_bar .wp-block-columns > .wp-block-column { flex-basis: 50% !important;}
	.footer_bar .wp-block-columns > div:nth-child(2) { display: none;}
}


@media screen and ( max-width: 800px) {
	header .menu-social-media-container .menu { margin-left: 1rem; }
	.yellow_bar .wp-block-columns > div:first-child { flex-basis: 80% !important; }
	.yellow_bar .wp-block-columns > div:last-child { flex-basis: 20% !important; }
	.yellow_bar .button_link { display: none; }
	header .menu-social-media-container { margin-top: 0; }
	.yellow_section:after { height: 40px; }
	.footer_bar .wp-block-columns .wp-block-column .wp-block-image { display: inline-block; width: 49%; }
	.footer_bar .wp-block-columns .wp-block-column .wp-block-image figure, .footer_bar .wp-block-columns .wp-block-column .wp-block-image img { width: 100% !important; height: auto; }
	.footer_bar .wp-block-columns .wp-block-column p { display: inline-block; width: 49%; text-align: center !important; }
	footer .menu-social-media-container { margin: 1rem 0; text-align: center; }
	.animated_reveal > div:last-child { display: none; }
	.canadian_owned { text-align: center; }
	.canadian_owned h3:after { margin: 1rem auto; }
	.canadian_owned h3 br { display: none; }
	.our_services .wp-block-columns { gap: 2rem; }
	.our_services .wp-block-columns .wp-block-column { padding-top: 1rem; padding-bottom: 1rem; }
	main > .wp-block-columns { width: 95%; margin: 0 auto; }
	.wp-block-image .alignright { margin: 0.5rem !important; }

	@keyframes animated_reveal_left {
		from { opacity: 0; transform: translateX(-200px); }
		to { opacity: 1; transform: translateX(0); }
	}

}

@media screen and ( max-width: 580px ) {
	header .menu-nav-menu-container ul li + li { padding-left: 8px; margin-left: 8px; }
	h2, .home .wp-block-cover h2 { font-size: 1.6rem; }
	h3 { font-size: 1.1rem; }
	.footer_bar .wp-block-columns .wp-block-column p:first-of-type { width: 59%; }
	.footer_bar .wp-block-columns .wp-block-column p:last-of-type { width: 37%; }
	.footer_bar .wp-block-columns .wp-block-column p a { display: block; }
	.yellow_bar .wp-block-columns > div:first-child { flex-basis: 75% !important; }
	.yellow_bar .wp-block-columns > div:last-child { flex-basis: 25% !important; }
	.yellow_bar .wp-block-columns > div:first-child p { color: transparent; line-height: 0.8rem; }
	.yellow_bar .wp-block-columns > div:first-child a { display: block; }
	header .menu-social-media-container .menu { margin-left: 0; }
	.header_bar li:last-child .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
	.mobile_menu_icon { display: block; margin: 1rem 1rem 0 0; float: right; cursor: pointer; }
	.menu-social-media-container .menu li { margin-right: 0; padding-right: 0; border-right: none; }
	.header_bar li:last-child .wp-block-columns > div:first-child figure { width: 70%; }
	.header_bar li:last-child .wp-block-columns > div:last-child { display: flex; }
	.header_bar li:last-child .wp-block-columns > div:last-child > * { flex-basis: 50%; }
	.header_bar li:last-child .wp-block-columns > div:last-child figure, .header_bar li:last-child .wp-block-columns > div:last-child img { width: 80% !important; height: auto !important; }
	p.mobile_book_now_link { text-align: left !important; padding-left: 2rem; }
	.mobile_book_now_link { display: block; }
	.nonmobile_book_now_link { display: none; }
	header .menu-nav-menu-container ul { display: block; margin-top: -5rem; background: white; max-height: 0; overflow: hidden; position: absolute; width: calc( 100% - 1rem); transition: 0.5s all; }
	.menu-visible header .menu-nav-menu-container ul { max-height: none; }
	header .menu-nav-menu-container ul li { padding: 0.5rem 0 !important; margin: 0 !important; text-align: center; border-left: none !important; border-bottom: 1px var(--oktire_grey) solid; }
	header .menu-nav-menu-container ul li:last-child { border-bottom: 3px black solid; }
}