/* main theme stylesheet by Richard Dominguez */

/* smooth scrolling anchor links (that cooperate with the sticky nav) */
* {
    scroll-margin-top: 6rem;
    scroll-behavior: smooth;
}

:root {
	--translucent-gray: rgba(15, 23, 39, 0.45);
	--thin-gray: rgba(7,36,86,.075);
	--near-transparent-gray: rgba(7, 36, 86, 0.085);
	--mint: #15cd72;
    --leaf-green: #8cc34b;
	--light-mint: #3ad588;
	--goldenrod: #ffc107;
	--light-goldenrod: #ffd046;
	--sky-blue: #537cd8;
	--light-sky-blue: #4d8cee;
}

.sky-blue { color: #537cd8; }
.translucent-gray { color: var(--translucent-gray); }
.leaf-green { color: var(--leaf-green); }
.bg-near-transparent-gray { background-color: var(--near-transparent-gray); }
.bg-mint { background-color: var(--mint); }
.bg-leaf-green { background-color: var(--leaf-green); }
.bg-sky-blue { background-color: var(--sky-blue); }
.hover-color-inherit:hover { color: inherit; }
.br--3 { border-radius: 3px; }

/* don't show disabled links as clickable */
a[aria-disabled=true] { cursor: initial; }

/* don't wrap phone number links */
a[href^="tel:"] { white-space: nowrap; }

/* buttons should show pointer on hover */
button { cursor: pointer; }

/* FIXME: remove the actual html later */
.entry-meta { display: none; }

/* typography */
body {
}

h1, h2, h3, h4, h5, h6, button {
    text-wrap: balance;
}

p, li, blockquote {
    text-wrap: pretty;
}

.small-heading {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.large-heading {
    font-family: "Orbitron", sans-serif;
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
    font-size: 2.2rem;
}

.nested-copy a {
	color: #f00f00;
}

.nested-copy h1,
.nested-copy h2,
.nested-copy h3,
.nested-copy h4,
.nested-copy h5,
.nested-copy h6 {
	font-size: 1.75rem;
	line-height: 1.25;
	margin: 2rem 0 0.75rem;
}

@media(min-width: 46rem) {
	.nested-copy h1,
	.nested-copy h2,
	.nested-copy h3,
	.nested-copy h4,
	.nested-copy h5,
	.nested-copy h6 {
		font-size: 2rem;
	}
}


.nested-copy p,
.nested-copy li,
.nested-copy ul,
.nested-copy blockquote {
    margin-top: 0;
    margin-bottom: 1rem;
}

.nested-copy ul,
.nested-copy ol {
    padding-left: 1.0em;
}

.nested-copy :first-child {
    margin-top: 0rem;
}

.nested-copy :last-child {
    margin-bottom: 0rem;
}

/* responsive typography styles */
@media(min-width: 46rem) {
    .large-heading {
        font-size: 3rem;
    }
}

/* main wrapper */

.container, .wrap {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 32rem) {
    .container, .wrap {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media(min-width: 48rem) {
    .container, .wrap, .mw-wrap-s {
        max-width: 48rem;
    }
}

@media(min-width: 64rem) {
    .container, .wrap, .mw-wrap-m {
        max-width: 64rem;
    }
}

@media(min-width: 75rem) {
    .container { width: auto; }
    .container, .wrap, .mw-wrap-l {
        max-width: 75rem;
    }
}

@media(min-width: 86rem) {
    .container, .wrap, .mw-wrap-xl {
        max-width: 86rem;
    }
}


/* buttons */

button[type=submit],
.btn,
.button,
.nested-form input[type=submit] {
    line-height: 1.5rem;
	color: #fff;
	display: inline-block;
    text-wrap: balance;
	font-weight: 700;
	border-radius: 3px;
	transition: background-color 0.3s;
    border-radius: 99999px;
}

.btn,
.nested-form input[type=button] {
	padding: 1rem 2rem;
	font-size: 1.125rem;
	padding-left: 2rem;
	padding-right: 2rem;
	background-color: var(--leaf-green);
}

.btn:hover, a:hover .btn {
	color: #fff;
    background-color: var(--light-goldenrod);
}

.btn--alt,
.nested-form input[type=submit] {
    background-color: var(--mint);
}

.btn--alt:hover,
a:hover .btn--alt,
.nested-form input[type=submit]:hover {
    color: #fff;
    background-color: var(--light-mint);
}

.btn--active {
    color: #fff;
    background-color: #f00f00;
    border-color: #600600;
    font-weight: 600;
}

.btn--active:hover {
    color: #fff;
    border-color: #600600;
    background-color: #C00C00;
}

.btn--blue {
	background-color: var(--sky-blue);
}

.btn--header {
    min-height: 3rem;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media(min-width: 62rem) {
    .btn--header {
        min-height: 2rem;
        padding: 0.25rem 1rem;
    }
}

.btn--translucent {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: rgba(255,255,255,0.2);
}

.btn--translucent:hover, a:hover .btn--translucent {
    background-color: #000;
}

.btn--chevron {
    border: none;
    background: transparent;
    position: relative;
    padding-right: 2rem;
    padding-left: 0.25rem;
}

.btn--chevron:hover, a:hover .btn--chevron {
    color: #fff;
    text-decoration: underline;
}

.btn--chevron::after {
    content: "";
    background-image: url(../images/glyph-chevron-right.svg);
    background-size: cover;
    display: inline-block;
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
}

/* forms */

.nested-form form {
	padding: 2rem;
	border-radius: 0.25rem;
	background-color: var(--near-transparent-gray);
}

.nested-form label {
    display: block;
	font-weight: bold;
    width: 100%;
}

/* contact form 7 adds these */
.nested-form p {
    margin: 0;
}

.nested-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.nested-form select,
.nested-form textarea {
    margin-top: 0.25rem; /* push the label upwards */
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    -webkit-appearance: none;
    appearance: none;
	border-style: solid;
	border-width: 1px;
	border-radius: 0.25rem;
    padding: 0.5rem;
	background-color: #fff;
}

.nested-form select {
    background-image: url(../images/glyph-chevron-down.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 0.5em) 50%;
}

.nested-form textarea {
	min-height: 150px;
}

/* hivepress */
/* correct issue with negative margins overflowing the box at times */
.site-inner {
    overflow-x: clip;
    overflow-y: visible;
}

.header-navbar {
    padding-left: 0;
    padding-right: 0;
}

/* use a border radius that fits with tachyons */
/* .hp-listing-category--submit-block .hp-listing-category__image img,
.hp-listing-category--view-block .hp-listing-category__image img,
.hp-map,
.hp-listing--view-block,
.hp-listing__images > img {
	border-radius: 0.25rem;
	overflow: hidden;
} */

/* .hp-listing--view-block .hp-listing__image img {
	border-radius: 0;
} */

/* reduce space taken by the single listing heading area */
.single-hp_listing .site-content {
	padding-top: 2rem;
}

.single-hp_listing .hp-page__header:not(:last-child) {
	margin-bottom: 2rem;
}

.hp-listing__verified-badge,
.hp-listing__location i {
    color: var(--leaf-green);
}

.hp-page {
    max-width: initial;
}

.hp-listing--view-page .hp-listing__title:not(:last-child) {
	margin-bottom: 0.5rem;
}

.hp-listing--view-page .hp-listing__title {
	font-size: 1.75rem;
}

.hp-listing--view-page .hp-listing__created-date {
	display: none;
}

.hp-map--narrow {
	min-height: initial;
	height: 16rem;
	max-height: 16rem;
}

.hp-map--hero {
	min-height: initial;
	height: 32rem;
	max-height: 32rem;
}

@media(min-width: 32rem) {
	.hp-map--hero {
		min-height: initial;
		height: 32rem;
		max-height: 32rem;
	}
}

.post-type-archive-hp_listing .hp-form--listing-search {
	margin-top: -6.25rem;
}

.hp-listing--view-block .hp-listing__footer,
.hp-listing--view-block .hp-listing__created-date {
	display: none;
}

.hp-grid__item > .hp-listing {
	height: 100%;
}

.hp-listing__claim-banner {
	text-align: center;
	position: absolute;
	transform-origin: left center;
	transform: rotate(-30deg);
	top: 56%;
	background-color: #15cd72;
	width: 140%;
	left: -21%;
	padding: 0.25rem 0;
}

.hp-listing__claim-banner__top-text,
.hp-listing__claim-banner__bottom-text {
	display: block;
}

.hp-listing__claim-banner__top-text {
	font-weight: 600;
	color: #777;
}

.hp-listing__claim-banner__bottom-text {
	color: #fff;
	font-weight: 800;
}

.hp-listing .hp-page__content {
	flex-basis: 100%;
	max-width: 100%;
}
.hp-listing .hp-page__sidebar {
	flex-basis: 100%;
	max-width: 100%;
}

@media(min-width: 48em) {
	.hp-form--listing-search {
		border-radius: 9999px;
	}

	.hp-listing__title {
		border-bottom: 1px solid var(--thin-gray);
	}

	.hp-listings .hp-grid__item {
		flex-basis: calc(100% / 2);
		max-width: calc(100% / 2);
	}
}

@media(min-width: 64em) {
	.hp-listings .hp-grid__item {
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	.hp-listing .hp-page__content {
		flex-basis: calc(100% * 7 / 12);
		max-width: calc(100% * 7 / 12);
	}
	.hp-listing .hp-page__sidebar {
		flex-basis: calc(100% * 5 / 12);
		max-width: calc(100% * 5 / 12);
	}
}

@media(min-width: 86em) {
	.hp-listing .hp-page__content {
		flex-basis: calc(100% * 8 / 12);
		max-width: calc(100% * 8 / 12);
	}
	.hp-listing .hp-page__sidebar {
		flex-basis: calc(100% * 4 / 12);
		max-width: calc(100% * 4 / 12);
	}
}

/* this is necessary to enable a fixed background hack on mobile */

/* sticky header */
/* .site-header {
    position: sticky;
    top: 0;
    z-index: 3;
} */

/* take into account the WordPress admin bar */
.admin-bar .site-header {
    top: 32px;
}

@media(max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media(max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

/* misc utilities */

.tww { text-wrap: wrap; }
.twb { text-wrap: balance; }
.twp { text-wrap: pretty; }

.w-0 { width: 0%; }

.mh-100 { max-height: 100%; }

.ph2\.5 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.nh2\.5 {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.overflow-clip { overflow: clip; }

.hover-fade .hover-fade-child {
    transition: opacity 0.5s;
}
.hover-fade:hover .hover-fade-child {
    opacity: 0;
}
.hover-reveal .hover-reveal-child {
    opacity: 0;
    transition: opacity 0.5s;
}
.hover-reveal:hover .hover-reveal-child {
    opacity: 1;
}

.show-on-scroll {}

.show-on-scroll__child {
	transition: opacity 0.6s, transform 0.6s;
    opacity: 0.001;
    transform: translateY(8rem);
}

.show-on-scroll--shown .show-on-scroll__child {
    transform: translateY(0);
    opacity: 1;
}