/*
Theme Name: Aristocat Enclosures
Author: Thanh Vu
Author URI: https://thanh.vu
Description: Made for Simon Chapman
Tested up to: 6.4
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Aristocat Enclosures
Tags: custom-colors, custom-menu, custom-logo, blog, featured-images, post-formats, rtl-language-support, threaded-comments, translation-ready
*/

div, header, nav, section {
	xborder: 1px solid #f00;
	xpadding: 1rem;
}

:root {
	--ae-blue: rgba(40,149,250,1.0);
	--ae-blue-light: rgba(191,224,254,1.0);
	--ae-blue-dark: rgba(109,186,255,1.0);
	--ae-border-radius: 2rem;
	--ae-box-shadow: 0px 10px 10px 0px rgba(0,0,0,.1);
}


/* FONTS */
/* ---------------------------------------------------------------------- */
@font-face {
    font-family: 'Antique Olive';
    src: url('fonts/aql-webfont.woff2') format('woff2'),
         url('fonts/aql-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Antique Olive';
    src: url('fonts/aqbl-webfont.woff2') format('woff2'),
         url('fonts/aqbl-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* GENERAL */
/* ---------------------------------------------------------------------- */
body {
	font-family: "Antique Olive", sans-serif !important;
	font-size: 20px;
}
img {
	max-width: 100%;
	height: auto;
}
table, tr, th, td {
	border: 1px solid #000;
	padding: 10;
}
hr {
	background: url('images/ae_separator.svg') repeat-x;
	background-position: left center;
	height: 6px !important;
	border: none !important;
	border-radius: 100rem;
	margin: 3rem 0 !important;
}
h2 {
	font-size: 2.5rem !important;
	padding-bottom: 3rem;
}
.page-content li {
	padding-bottom: .7rem;
}
a:focus, a:hover {
	text-decoration: none !important;
}


/* GENERAL STRUCTURE */
/* ---------------------------------------------------------------------- */
.page-content {
	padding: 3rem 0 10rem 0;
}
.wrapper {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 3.5rem;
	padding-left: 3.5rem;
}
.wp-block-columns {
	gap: 1.5rem;
}

.overlap {
	margin-top: -10rem;
}
.full-width img {
	width: 100%;
	border-radius: var(--ae-border-radius);
}
.wp-block-button a:link,
.wp-block-button a:visited {
	background: var(--ae-blue-light);
	border-radius: var(--ae-border-radius);
	transition: all 100ms;
}
.wp-block-button a:focus,
.wp-block-button a:hover,
.wp-block-button a:active {
	background: var(--ae-blue);
	color: #fff !important;
}

figure {
	position: relative;
}
figure a:after {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.wp-block-cover {
	padding: 0;
}
.wp-block-cover .wp-block-cover__inner-container {
	color: #fff;
	background: rgba(0,0,0,.4);
	position: absolute;
	bottom: 0;
	padding: 2rem 2rem 1rem 2rem;
	font-weight: bold;
	font-size: 2rem;
	line-height: 2rem;
	border-radius: 0 0 var(--ae-border-radius) var(--ae-border-radius);
}
.has-background-dim {
	display: none;
}

/* features: figure and caption image used on the home page */
.features {
	padding: .5rem 0 4rem 0;
}
.features .wp-block-column {
	text-align: center;
	border-radius: var(--ae-border-radius);
	background: var(--ae-blue-light);
	box-shadow: var(--ae-box-shadow);
	transition: background-color 200ms;
}
.features .wp-block-column:hover {
	background: var(--ae-blue-dark);
}
.features figure {
	display: flex;
	flex-direction: column-reverse;
	padding: 0rem 1.5rem 0rem 1.5rem;
	top: 2rem;
	height: 100%;
}
.features img {
	padding-top: 1rem;
	margin-bottom: -2rem;
}
.features figcaption {
	font-size: 1.5rem;
	line-height: 1.5rem;
	flex-grow: 1;
	margin: 0;
}

/* bubble: rounded highlighted and boxes */
.bubble {
	background: var(--ae-blue-light);
	border-radius: var(--ae-border-radius);
	box-shadow: var(--ae-box-shadow);
	overflow: hidden;
	margin-bottom: 1.5rem;
	transition: all 200ms;
	padding: 2rem;
}
.bubble strong {
	font-weight: 500;
}
figure.bubble {
	padding: 0;
}
figure.bubble:hover {
	background: var(--ae-blue-dark);
}
figure.bubble strong {
	display: block;
	font-size: 1.5rem;
	line-height: 1.5rem;
	margin-bottom: .5rem;
}
figure.bubble br {
	display: none;
}
figure.bubble figcaption {
	padding: 1rem 2rem;
}
figure.bubble figcaption p {
	margin-bottom: 0;
}


/* HEADER */
/* ---------------------------------------------------------------------- */
header {
	padding: 3rem 0;
	background: var(--ae-blue);
}
header .wrapper {
	display: flex;
	align-items: stretch;
}
@media all and (max-width: 580px) {
header {
	padding-top: 5rem;
}
}
.logo {
	flex: 5;
	background: url('images/ae_logo.svg') no-repeat;
	background-size: contain;
	min-height: 5rem;
}
.logo h1,
.logo h1 a {
	text-indent: -9000rem;
	display: block;
	height: 100%;
	min-height: 5rem;
}


/* NAVIGATION */
/* ---------------------------------------------------------------------- */
nav {
	flex: 2;
	text-align: center;
}

.menu-item-home {
	display: none !important;
}
@media all and (max-width: 580px) {
.menu-item-home {
	display: block !important;
}
}


/* FOOTER */
/* ---------------------------------------------------------------------- */
.footer > div {
	display: flex;
	justify-content: space-between;
}
.contact-phone,
.contact-email,
.contact-fb,
.contact-abn {
	margin-top: .8rem;
}
.contact-phone:before,
.contact-email:before,
.contact-fb:before,
.contact-abn:before {
	content: '';
	display: block;
	height: 2rem;
	width: 2rem;
	float: left;
	margin: -.3rem .5rem 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
.contact-phone:before 	{ background-image: url('images/icon_phone.svg'); }
.contact-email:before 	{ background-image: url('images/icon_email.svg'); }
.contact-fb:before 		{ background-image: url('images/icon_so.svg'); }
.contact-abn:before 	{ background-image: url('images/icon_abn.svg'); }



/* GALLERY */
/* ---------------------------------------------------------------------- */
#yard, #patio, #side, #garden, #skywalk {
  scroll-margin-top: 5rem;
}
.wp-block-gallery {
	display: grid !important;
	gap: 1.5rem !important;
	margin-top: -2rem;
	grid-template-columns: 1fr 1fr 1fr;
}
.wp-block-gallery.columns-1 {
	grid-template-columns: 1fr;
}
.wp-block-gallery.columns-2 {
	grid-template-columns: 1fr 1fr;
}
.wp-block-gallery.columns-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wp-block-gallery.columns-5 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.wp-block-gallery.columns-6 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wp-block-gallery.columns-7 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wp-block-gallery.columns-8 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wp-block-gallery .wp-block-image {
	width: 100% !important;
	display: block;
}
.wp-block-gallery .wp-block-image a,
.wp-block-gallery .wp-block-image a:link,
.wp-block-gallery .wp-block-image a:visited {
	border: none;
	position: relative;
}
.wp-block-gallery .wp-block-image a:after {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: background 200ms;
	border-radius: var(--ae-border-radius);
	opacity: .5;
}
.wp-block-gallery .wp-block-image a:hover:after {
	background-color: var(--ae-blue);
}
.wp-block-gallery .wp-block-image a:focus,
.wp-block-gallery .wp-block-image a:hover,
.wp-block-gallery .wp-block-image a:active {
	background: rgba(255,255,255,0);
}
.wp-block-gallery .wp-block-image a img {
	aspect-ratio: 1;
	border-radius: var(--ae-border-radius);
	box-shadow: var(--ae-box-shadow);
	border: 10px solid var(--ae-blue-light);
}


/* DROP DOWN MENU */
/* ---------------------------------------------------------------------- */
#cssmenu #menu-menu {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0 .2rem;
	font-size: 1.4rem;
}
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
	border: none;
	margin: 0;
	padding: 0;
	line-height: 1 !important;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	text-align: left;
	list-style: inside none;
	position: relative;
	display: block;
	color: #fff;
}
#cssmenu {
	padding: 0;
	margin: 0;
	width: auto;
}
/* first level */
#cssmenu > ul > li > a {
	padding: .7rem 1rem .5rem 1rem;
	text-align: center;
	text-decoration: none;
	background: rgba(255,255,255,.2);
	border-radius: 100rem;
	margin-bottom: .2rem;
	transition: background 200ms;
}
#cssmenu > ul > li:hover > a {
	background: rgba(255,255,255,1);
	color: var(--ae-blue);
}
#cssmenu .current-menu-item > a,
#cssmenu > ul > li:hover > a:hover {
	background: rgba(255,255,255,1);
	color: var(--ae-blue);
}
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .*/
/* second level */
#cssmenu ul ul {
	display: none;
	width: auto;
	position: absolute;
	z-index: 100;
	width: 230px;
	background: rgba(0,0,0,.05);
	border-radius: 1rem;
}
#cssmenu ul ul a {
	padding: .75rem 0 .7rem 0;
	border-bottom: 1px solid rgba(0,0,0,.2);
	transition: background 200ms;
}
#cssmenu ul ul a span {
	margin: 0 1rem;
	display: block;
}
#cssmenu ul ul a:hover {
	background: rgba(0,0,0,.2);
}
#cssmenu ul li.has-sub:hover > ul {
	display: block;
}
#cssmenu ul ul li:first-child > a {
	border-radius: 1rem 1rem 0 0;
}
#cssmenu ul ul li:last-child > a {
	border-radius: 0 0 1rem 1rem;
	border-bottom: none;
}
#cssmenu ul ul li:only-child > a {
	border-radius: 1rem;
	border-bottom: none;
}
#cssmenu ul ul .menu-item-has-children > a:after {
	content: '>';
	color: rgba(0,0,0,.2);
	position: absolute;
	right: 1rem;
	top: .6rem;
}
#cssmenu ul ul .menu-item-has-children > a:hover:after {
	color: rgba(0,0,0,1);
}
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .*/
/* third level */
#cssmenu ul ul ul {
	left: 200px;
	top: 0;
}


/* MEDIA QUERIES */
/* ---------------------------------------------------------------------- */
@media all and (max-width: 1120px) {
.footer > div {
	display: block;
}
.footer h2 {
	padding-bottom: 0;
}
.footer p {
	border-top: 1px solid rgba(0,0,0,.1);
	padding: 1.2rem 0 0 0;
}
.contact-phone:before,
.contact-email:before,
.contact-fb:before,
.contact-abn:before {
	margin-right: 1.5rem;
}
}
@media all and (max-width: 1025px) {
.logo {
	flex: 3;
}
}
@media all and (max-width: 950px) {
.features figcaption {
	font-size: 1rem;
	line-height: 1rem;
}
header .wrapper {
	display: block;
}
.logo {
	margin-bottom: 1rem;
}
#cssmenu #menu-menu {
	justify-content: start;
}
}
@media all and (max-width: 781px) {
h2 {
	padding-bottom: 1rem;
}
.overlap {
	margin-top: 0;
}
.wp-block-columns {
	gap: 0;
}
.features {
	gap: 1rem;
	padding-bottom: 1rem;
}
.features img {
	margin-bottom: 2rem;
}
.wp-block-gallery {
	gap: 1rem !important;
}
.features.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
	flex-basis: 0 !important;
}
.features .wp-block-column {
	min-width: 40%;
	gap: 1rem;
}
.features figure {
	margin-bottom: 0;
	padding-bottom: 1.5rem;
}
}
@media all and (max-width: 580px) {
header {
	padding-bottom: 1rem;
}
header .wrapper {
	display: block;
}
.logo {
	aspect-ratio: 408/80;
	width: 100%;
	min-height: auto;
}
.logo h1 {
	min-height: auto;
	margin-bottom: 0;
}
.logo h1 a:before {
	content: '';
	display: block;
	height: 53px;
	width: 53px;
	background: url('images/icon_paw.svg') no-repeat;
	background-position: left center;
	position: fixed;
	top: 0;
	left: 1rem;
	z-index: 200;
}
h2 br {
	display: none;
}
.wp-block-gallery {
	gap: 0 !important;
}
.wp-block-gallery .wp-block-image a:after,
.wp-block-gallery .wp-block-image a img {
	border-radius: 0;
	border: none;
}
.features figure {
	height: 100%;
}
.features figcaption {
	flex-grow: 1;
}
}
@media all and (max-width: 420px) {
.mean-container .mean-nav ul li a {
	padding: 1rem 2rem;
}
.wrapper {
	padding-left: 2rem;
	padding-right: 2rem;
}
.page-content {
	padding-top: 2rem;
}
h2 {
	font-size: 1.5rem !important;
}
hr {
	margin: 2rem 0 !important;
}
.wp-block-cover .wp-block-cover__inner-container {
	font-size: 1.5rem;
	line-height: 1.5rem;
}
.features {
	gap: 1rem;
	padding-bottom: 1rem;
}
}