/*
 Theme Name:     Aloha Cyclery
 Theme URI:      https://alohacyclery.wpengine.com/wp-content/themes/
 Description:    Storefront Child Theme customized by External Design
 Author:         External Design
 Author URI:     https://www.ExternalDesign.com
 Template:       storefront
 Version:        1.0.0
 License URI:    http://www.gnu.org/licenses/gpl-2.0.html
 Tags:           light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:    xd
*/

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../storefront/style.css'); /* REPLACE BY ENQUEUE SCRIPT IN FUNCTIONS.php? */
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:300|Open+Sans|Open+Sans+Condensed:300'); */

/* =Theme customization starts here - by External Design
-------------------------------------------------------------- */

html {
	quotes: "“" "”";
}

/* HOME PAGE */
.home #primary .col-full:first-child {
	padding:2em 0;
}

.page-template-template-homepage .entry-content, .page-template-template-homepage .entry-header {
	max-width:96%;
}


/* START: For DsgnWrks Instagram Importer */
h3.lcp_title_xd + .entry p,
ul.lcp_catlist_xd li h3.lcp_title_xd + .entry p {
    display:inline !important;
    white-space: nowrap;
    max-width: 75ch;
    cursor:pointer;
}
/*
h3.lcp_title_xd + .entry p:first-child {
    white-space: unset;
    display:unset;
    overflow: visible;
    text-overflow: unset;
    max-width: unset;
}
*/
h3.lcp_title_xd + .entry .gallery figure.gallery-item, /* Hide all Instagram gallery images except the first */
h3.lcp_title_xd + .entry p iframe {  /* Hide video iframes, they throw off the layout */
	display:none;
}
h3.lcp_title_xd + .entry .gallery figure:first-child {
	display:block;
	width:100%;
	height:auto;
}

 /* Blog excerpts on main blog landing page only */
.blog article {
    border-top:dashed 1px #999;
}
.blog .gallery figure {
    display:none;
}
.blog .gallery figure:first-child {
    display:block;
}

 /* Blog excerpts on home page only */
.home ul.lcp_catlist#lcp_instance_0 li h3.lcp_title {
    float:none;
}
.home ul.lcp_catlist#lcp_instance_0 li h3.lcp_title + span.note {
	font-size:0.7em;
	display:contents;
}
/*
.home ul.lcp_catlist#lcp_instance_0 li h3.lcp_title + span.note::before {
	clear:both;
	content:'...';
	white-space:pre-line;
	display:none !important;
}
*/
.home ul.lcp_catlist li { /* Blog excerpts on home page only */
    font-size:0.9em;
}
.home ul.lcp_catlist_xd li div.entry {
    overflow:hidden;
    text-overflow: ellipsis !important;
    clear:both;
}
.home ul.lcp_catlist#lcp_instance_0 li h3.lcp_title {
	float:none;
}
.home ul.lcp_catlist_xd#lcp_instance_0 li h3.lcp_title_xd  {
	width:100%;
	font-size:2.3em !important;
}
.home ul.lcp_catlist_xd li div.entry p {
    display:inline-block !important;
}
.home ul.lcp_catlist_xd li div.entry p:first-child {
    margin:0;
    font-size:0.1em !important;
    line-height:auto !important;
}
.home ul.lcp_catlist_xd li div.entry .gallery + p {
    display:none !important;
}
.home ul.lcp_catlist_xd li div.entry .gallery + p + p {
    display:inline !important;
/*    --max-lines:1;
    --lh: 1.4rem;
    max-height: calc(var(--lh) * var(--max-lines));
*/
}

/* END: For DsgnWrks Instagram Importer */


.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
	float: right; /* After removing the woocommerce product-search field */
}

.shareaholic-cookie-consent .shareaholic-consent-message {
	font-family:"Source Sans Pro",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,"Lucida Grande",sans-serif;
}
div.shareaholic-recommendations-header {
	background-color:#676;
	color:#eee;
	padding:0 0.4em;
}
.shareaholic-canvas .shareaholic-recommendations-attribution .shareaholic-recommendations-attribution-logo {
	background:none !important;
}


.secondary-navigation ul ul,
.secondary-navigation ul.menu ul {
	background-color:rgba(256,256,256,0.6);
}

nav.secondary-navigation {
	background-image: linear-gradient(to right, transparent, transparent, rgba(256,256,256,0.6), rgba(256,256,256,0.8));
	border-radius:6px;
	padding-left:0.2em;
}

nav.secondary-navigation a {
	background-color:rgba(256,256,256,0);
	transition:background-color 0.3s ease-in-out;
	border-radius:6px;
	color:#000;
}
nav.secondary-navigation a:hover {
	background-color:rgba(256,256,256,0.4);
}
nav.secondary-navigation a:active {
	background-color:rgba(256,256,256,0.7);
}

ul#menu-handheld-menu > li a {
	font-weight:bold;
	padding-left:0.4em;
}
ul#menu-handheld-menu > li a:hover {
	background-color:#ccc;
	text-decoration:none;
	color:#000;
}
ul#menu-handheld-menu > li a:active {
	background-color:#777;
	text-decoration:none;
	color:#ccc;
}


img.custom-logo {
  filter: drop-shadow(0 0 10px #fff);
}
header#masthead {
	  background:linear-gradient(to bottom right, #fff, transparent);
	border-bottom:none;
}

a {
	color:#4c5aad;
}
a:hover {
	text-decoration:underline;
}
a:active {
	position:relative;
	top:1px;
}

div.indent {
	padding-left:4em;
}

.widget .widget-title,
.widget .widgettitle {
	margin-bottom:0.3em;
	margin-top:1.4em;
	padding-bottom:0;
}

a.discreet {
	font-weight:normal !important;
	color:inherit;
	text-decoration:none !important;
}

.site-header {
	background-color:transparent;
}

body.home #primary .col-full h1,
body.home #primary .col-full p {
	background-color:rgba(256,256,256,0.3);
	transition:background-color 0.3s ease-in-out;
}
body.home #primary .col-full {
	background-color:rgba(256,256,256,0.4);
	transition:background-color 0.3s ease-in-out;
}
body.home #primary .col-full:hover {
	background-color:rgba(256,256,256,0.8);
}
body.home #primary .col-full:hover h1,
body.home #primary .col-full:hover p {
	background-color:rgba(256,256,256,0);
}

.storefront-primary-navigation {
	background-color:rgba(256,256,256,0.6);
	transition:background-color 0.3s ease-in-out;
}
.storefront-primary-navigation:hover {
	background-color:rgba(256,256,256,0.7);
	transition:background-color 0.3s ease-in-out;
}
a.cart-contents {
	padding-left:0.4em !important;
	padding-right:0.4em !important;
}
#menu-primary-menu li a,
a.cart-contents {
	background-color:rgba(256,256,256,0);
	transition:background-color 0.3s ease-in-out;
	font-weight:bold;
	color:#000;
	min-width:5em;
}
#menu-primary-menu li a:hover,
a.cart-contents:hover  {
	background-color:rgba(256,256,256,0.7);
	color:#000;
}
#menu-primary-menu li a:active,
a.cart-contents:active  {
	background-color:rgba(256,256,256,0.9);
}

div.widget_shopping_cart_content p.woocommerce-mini-cart__empty-message {
	color:#fff;
	padding:0.2em;
}

p.note {
	font-size:0.85em;
	font-style:italic;
}
footer p.note {
	font-style:unset;
}

#secondary .gamma.widget-title::before { /* down-arropw in sidebar */
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	vertical-align: baseline;
    content: "\f358";
    height: 1em;
    float:left;
	padding-right:0.4em;
}
/*
li#menu-item-236 a::before,
li#menu-item-237 a::before {
	font-family: 'Font Awesome 5 Free';
    vertical-align:baseline;
    content: "\f03d ";
    display:inline;
	padding:0.4em .4em 0 0.2em;
}
*/

/*
li#menu-item-202 ul.sub-menu li a::before {
	font-family: 'Font Awesome 5 Free';
    vertical-align:baseline;
    content: "\f03d ";
    display:inline;
	padding:0.4em .4em 0 0.2em;
}
*/

a.service::before {
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	vertical-align: baseline;
    content: "\f0ad";
   height: 1em;
    float:left;
	padding-right:0.4em;
}

a.package::before {
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	vertical-align: baseline;
    content: "\f49e";
   height: 1em;
    float:left;
	padding-right:0.4em;
}

footer#colophon a {
	color:inherit;
	cursor:pointer;
}



.wp-block-image.cards {
	background-image:none;
	padding:1em;
	border:solid 1px #ddd;
	background-color:#fff;
	display:inline-block;
	width:100%;
	margin:0;

	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
          
	border-collapse:separate;
	/* -moz-box-shadow:    1px 1px 2px #ccc;
	-webkit-box-shadow: 1px 1px 2px #ccc;
	box-shadow:         1px 1px 2px #ccc; */
}
.home .wp-block-image.cards,
.home .wp-block-image.cards * {
	text-align:center !important;
}

h3,
h4 {
	clear:none;
}

.cards h2 {
	margin-bottom:0.2em;
}
.wp-block-image.cards2,
.wp-block-image.cards3 {
	width:48%;
	max-width:48%;
	float:left;
}
.wp-block-image.cards2:nth-child(odd),
.wp-block-image.cards3:nth-child(3n + 1) {
	float:right;
	margin-right:0;
}

.wp-block-image.cards2:first-child,
.wp-block-image.cards3:first-child {
	clear:both;
}
.wp-block-image.cards2 img {
	width:100%;
}
.wp-block-image.cards3 {
	width:32%;
}
.wp-block-image.cards3 img {
	/* max-height:140px;
	width:auto; */
}
.wp-block-image.cards h4 {
	font-size:1.3em;
	background-color:#f9f6f5;
}

figure h2 {
	margin:0;
}

body.blog .entry-meta,
.single-post aside.entry-meta { /* Suppress author, date, gravatar on category & archive pages */
	display:none !important;
}
body.blog .hentry.type-post .entry-content,
.single-post .entry-content {
	width: 100% !important;
	float:none;
}
body.blog div.tags-links {
    padding-left:2em;
    color:#777;
    margin-top:0;
    padding-top:0;
}
body.blog aside.entry-taxonomy {
    padding-top:0;
    margin-top:0.2em;
}
/* // Could't get it to work from here so I inlined the CSS in a fresh copy of loop.php (which existed already to get the page title)
body.blog #content #primary > h1,
body.blog main#main > h1 {
    margin:0 0 0 !important;
    margin-block-end:0 !important;
}
*/
.nav-links,
.nav-links a {
	width:unset !important;
}
nav#post-navigation div.nav-links a {
	padding:0 0.4em !important;
}
.nav-links a {
	background-color:#fff;
	border:solid 1px green;
	background-image: linear-gradient(to bottom right, rgba(256,256,256,0.3), transparent, rgba(256,256,256,0.6));
	border-radius:6px !important;
}
.site-main nav.navigation .nav-next a::after {
	content: "\f35a";
}
.site-main nav.navigation .nav-prev a::after {
	content: "\f359";
}
.nav-links a:hover {
	text-decoration:none;
}
.nav-links a:active {
	text-decoration:none;
	border:solid 1px #333;
	background-image: linear-gradient(to bottom right, transparent, rgba(256,256,256,0.6));
}

/* LIST CATEGORY POSTS */
h3.lcp_title {
	font-size:1.6em;
	margin:0;
}
ul.lcp_catlist {
	list-style-type:none;
}
ul.lcp_catlist h2 {
	text-align:center;
	border-top:dotted 8px #aabaaa;
}

ul.lcp_catlist li h3:first-child {
	float:left;
}
ul.lcp_catlist li h3 + span.note {
	float:right;
	color:#999;
	position:relative;
	top:5px;
}
ul.lcp_catlist li h3 + span.note + p {
	clear:both !important;
	font-size:1.4em;
	line-height:1.7em;
}
ul.lcp_catlist li h3 + span.note + p a {
	font-size:0.8em;
}
ul.lcp_catlist li h3 a::before
/* ul.lcp_catlist li h3 + span.note + p a::after */ {
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	vertical-align: baseline;
	content:'\f35a';
    height: 1em;
	padding:0 0.4em;
}

ul.lcp_catlist li,
.home ul.lcp_catlist_xd#lcp_instance_0 li {
	display:inline-block;
	font-size:0.85em;
	width:44%;
	margin:1em 2em 2em 0;
	float:left;
}
ul.lcp_catlist li:nth-child(even),
.home ul.lcp_catlist_xd#lcp_instance_0 li(even) {
	margin:1em 0 2em 0;
	float:right;
}
ul.lcp_catlist li:nth-child(odd) {
	clear:both;
}

#content {
	padding-top:2em;
}
.home #content {
	padding-top:0;
}
footer#colophon {
	clear:both !important;
}

ul.tips {
	list-style:none;
}
ul.tips li {
	text-indent:-12px !important;
}

i.fa::before {
	font-family: 'Font Awesome 5 Free';
    padding:0 0.4em 0 0;
	min-width:2em;
}
i.tip::before {
	content:'\f0eb';
}
.wp-admin div#wpfooter {
	margin-top:3em !important;
}
/*
div#wpfooter p#footer-left img#wlcms-footer-logo,
div#wpfooter p#footer-left,
div#wpfooter { /***
	width:140px !important;
	height:auto;
	border:solid 4px red !important;
}
*/

body.home #primary .wp-block-column {
	background-color:rgba(255,255,255,1) !important;
}


@media only screen and (max-width: 768px) {
	.wp-block-image.cards2,
	.wp-block-image.cards3 {
		width:100%;
		max-width:100%;
		float:none;
	}
	ul.lcp_catlist li {
		display:block;
		font-size:0.85em;
		width:100%;
		margin:2em 0;
		float:none;
	}
}

@media only screen and (max-width: 1024px) {

}