/*
 Theme Name:   Advanced Autologic
 Theme URI:    https://brightbluegum.com.au
 Description:  Divi child theme for Advanced Autologic
 Author:       Jean Werk
 Author URI:   https://brightbluegum.com.au
 Template:     Divi
 Version:      1.2
*/

/** TABLE OF CONTENTS
---------------------------------------------------------------------------/


1.0 - Global Styles
	1.1 - General
	1.2 - Typography
	1.3 - Buttons	
	1.4 - Dividers
	1.5 - Blurbs
	1.6 - Search modules
	1.7 - Ajax filter
	1.x - Forms

2.0 - Layout + Themer
	2.1 - Header
	2.2 - Navigation
	2.3 - Footer
	2.4 - Content layout
	2.5 - Temporary fix

3.0 - Page Specific CSS
	3.1 - Home
	3.2 - Product
	3.3 - Archive
	
4.0 - Accessibility Styles


/// END TABLE OF CONTENTS
--------------------------------------------------------------------------*/

/** 1.0 - Global Settings
--------------------------------------------------------------------------*/

/* =========================
	1.1 - General
	========================= */

/* Colours are also set as Global colours in Divi */
:root {
	--colour-1: #cc2500; /* Red         */
	--colour-2: #f4df3e; /* Gold        */
	--colour-3: #181310; /* Smoky black */
	--colour-4: #545B63; /* Dark grey   */
	--colour-5: #05299E; /* Blue        */
	--colour-6: #eaeaf1; /* Light grey  */
	--colour-7: #ffffff; /* White       */
	--colour-8: #021827; /* Rich black  */
}

/* =========================
	1.2 - Typography
	========================= */

/* Break long words on another line (eg email address) */
p {
	word-break: break-word;
}

/* Headings */
#page-container h1 {
	font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
	font-size: clamp(2.5rem, 5vw, 4rem); 
	font-weight: 900;
	text-transform: uppercase;
	transform: skewX(-20deg) skewY(0deg); /* May need to be on parent */  
}

#page-container h2 {
	font-size: clamp(2rem, 1.636rem + 1.818vi, 3rem);
	text-transform: uppercase;
}

#page-container h3 {
	font-size: clamp(1.5rem, 1.318rem + 0.909vi, 2rem);
	text-transform:uppercase;
}

#page-container h4,
.aal-looks-h4,
#page-container h5,
#page-container h6 {
	color: var( --colour-5 );  
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform:uppercase;
}

/* Body and lists */
#page-container p, li {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.8em;
}

#page-container ol, ul {
	padding-top: 1em;
}

/* Links (general) */
.et_pb_text_inner a, 
ol a, 
ul a,
.woocommerce a {
  color: var( --colour-5 );
  text-decoration: underline;
  text-decoration-color: var( --colour-5 );
  text-decoration-thickness:0.125em;
  text-underline-offset: 2px;
}


.et_pb_text_inner a:hover, 
ol a:hover, 
ul a:hover {
  text-decoration-thickness:0.25em;
}

/* Links (blurbs) */
.aal-blurb a {
  color: var( --colour-5 ) !important;;
}

/* Callout (eg under H1 */
#page-container .aal-callout {
  font-size: clamp(1.125rem, 0.989rem + 0.682vw, 1.5rem);
  font-weight: 700;
  line-height: 2em;
}

/* Footer text and links in white */
#page-container .aal-footer p {
  color: var( --colour-6 );
  font-size: 1rem;
}

#page-container #et-boc .aal-footer .et_pb_text_inner a {
  color: var( --colour-6 );
  text-decoration-color: var( --colour-3 );
}  

#page-container #et-boc .aal-footer .et_pb_text_inner a:hover {
  text-decoration-color: var( --colour-6 );
  text-decoration-thickness:0.125em;
}


/* =========================
	1.3 - Buttons
	========================= */

/* Default button
   View Product button */
body.et-db #et-boc .et-l .aal-button,
body.et-db #et-boc .et-l .aal-button a { 
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

/* Red button */
body.et-db #et-boc .et-l a.aal-button.aal-button--red,
body.et-db #et-boc .et-l .aal-button.aal-button--red a,
body.et-db #et-boc .et-l .et_pb_db_products_search.aal-button.aal-button--red button {
  border-color: var( --colour-1 );
  border-style: solid;
  border-width: 2px;
  background-color: var( --colour-1 );
  color: var( --colour-7 );
  text-decoration: none;
}

body.et-db #et-boc .et-l .aal-button.a.aal-button--red:hover,
body.et-db #et-boc .et-l .aal-button.aal-button--red a:hover,
body.et-db #et-boc .et-l .et_pb_db_products_search.aal-button.aal-button--red button:hover {
  border-color: var( --colour-1 );
  border-style: solid;
  border-width: 2px;  
}

/* Blue button */
body.et-db #et-boc .et-l a.aal-button.aal-button--blue,
body.et-db #et-boc .et-l .aal-button.aal-button--blue a {
  border-color: var( --colour-5 );
  border-style: solid;
  border-width: 2px;
  background-color: var( --colour-5 );
  color: var( --colour-7 );
  text-decoration: none;
}

body.et-db #et-boc .et-l .aal-button.a.aal-button--blue:hover,
body.et-db #et-boc .et-l .aal-button.aal-button--blue a:hover {
  border-color: var( --colour-5 );
  border-style: solid;
  border-width: 2px;  
}

/* Rectangular button */
body.et-db #et-boc .et-l .aal-button.aal-button--rectangular.et_pb_button,
body.et-db #et-boc .et-l .aal-button.aal-button--rectangular a.et_pb_button,
body.et-db #et-boc .et-l .et_pb_db_products_search.aal-button.aal-button--rectangular button {
  border-radius: 0.2em;
  letter-spacing: 1px;
  transform: none;
}

/* Skewed button */
.aal-button--skewed { 
  border-width: 0;
  border-radius: 0;
  letter-spacing: 3px;
  transform: skewX( -20deg ) skewY( 0deg );
}


/* =========================
	1.4 - Dividers
	========================= */

/* Not used at the moment */
body.et-db #et-boc .et-l .aal-divider {
	background-image: linear-gradient( 180deg, var( --colour-3 ) 40%, var( --colour-2 ) 40% );
	height: 16px;
	transform: skewX( -20deg ) skewY( 0deg );
	width: 100px;
}

body.et-db #et-boc .et-l .aal-divider::before {
	border-top-width: 0;
}

/* Specific to Home page h1 because heading on 2 lines */
body.et-db #et-boc .et-l .aal-divider--clamped-width {
	width: clamp(205px, 25vw, 320px);
}

/* Divider for some h1 and h2 */
body.et-db #et-boc .et-l .aal-heading--divider {
	background-image: linear-gradient( 180deg, var( --colour-3 ) 40%, var( --colour-2 ) 40% );;
	background-position-y: bottom;
	background-repeat: no-repeat;
	background-size:100% 1rem;
	padding-bottom: 1.5em;
	width:fit-content;
}

/* Shorter divider (eg Home page h1) */
body.et-db #et-boc .et-l .aal-heading--divider-shorter {
  background-position-x: -1vw;
}


/* =========================
	1.5 - Blurbs
	========================= */

/* Icon on top: text centred */
.aal-blurb--icon-top	 p {
	text-align: center; 
}

/* Icon on top: reduce space between icon and text */
.aal-blurb--icon-top .et_pb_main_blurb_image {
  margin-bottom: 1em;
}

/* Icon on top: reduce icon size */
.aal-blurb--icon-top	.et-pb-icon {
  font-size: 4rem;
}


/* =========================
	1.6 - Search modules
	========================= */

/* Search module in white colour (eg footer) */
#page-container .aal-search-module--white {
  border-color: var( --colour-6 );
}

#page-container .aal-search-module--white .et_pb_s {
  color: var( --colour-7 );
}

#page-container .aal-search-module--white .et_pb_searchsubmit {
  background-color: var( --colour-6 );
  color: var( --colour-3 );
  font-weight: 700;
}


/* =========================
	1.7 - Ajax filter
	========================= */

/* Product loop list view on desktop/tablet: single row */
@media ( min-width: 769px ) {
  .et_pb_db_shop_loop.de-list-view .divi-filter-loop-container  .et_pb_column {
    display: grid !important;
    grid-column-gap: 1em;
    grid-template-columns: 50px auto 10em 12em !important;
  } 
} 

/* Product loop list view: reduce padding */
.et_pb_db_shop_loop.de-list-view .divi-filter-loop-container .et_pb_section {
  padding-bottom: 0;
  padding-top: 0;
}

.et_pb_db_shop_loop.de-list-view .divi-filter-loop-container .et_pb_row {
  padding-bottom: 0;
  padding-top: 0;
}

/* Product loop list/grid view on mobile: reduce padding */
@media ( max-width: 768px ) {
  .divi-filter-loop-container .et_pb_section {
    padding-bottom: 0;
    padding-top: 0;
  }

  .divi-filter-loop-container .et_pb_row {
    padding-bottom: 0;
    padding-top: 0;
  }
}  
  
/* Hide Sale badge on list view */
.et_pb_db_shop_loop.de-list-view .divi-filter-loop-container .bodycommerce-sale-badge {
  display: none;
}

/* Search + Reset buttons */
body.et-db #et-boc .et-l .et_pb_de_mach_filter_posts .button_container button.et_pb_button,
body.et-db #et-boc .et-l .et_pb_de_mach_filter_posts .button_container a.et_pb_button {
  border-color: var( --colour-1 );
  border-style: solid;
  border-width: 2px;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Search button */
body.et-db #et-boc .et-l .et_pb_de_mach_filter_posts .button_container button {
  background-color: var( --colour-1 );
  color: var( --colour-7 );
}

/* Reset button */
body.et-db #et-boc .et-l .et_pb_de_mach_filter_posts .button_container a {
  background-color: var( --colour-6 );
  color: var( --colour-1 );
}

/* Reduce spacing between search field and field label 
   And add border */
body.et-db #et-boc .et-l .et_pb_de_mach_filter_posts .et_pb_contact_field input {
  border-color: var( --colour-4 );
  border-style: solid;
  border-width: 1px;
  margin-top: 0;
}

/* Reduce spacing between search field and buttons */
body.et-db #et-boc .et-l .et_pb_de_mach_filter_posts .et_pb_contact_field {
  margin-bottom: 0.5em;
}

/* Align dropdown lists with search field */
body.et-db #et-boc .et-l .aal-ajax-filter #field_1 .divi-filter-item,
body.et-db #et-boc .et-l .aal-ajax-filter #field_2 .divi-filter-item {
  background-color: var( --colour-6); /* Module background colour doesn't cover this */
  height: auto;
  padding-left: 0;
  margin-bottom: 1em;
  margin-top: 0;
}

/* Set height of dropdown lists */
#divi_filter .select2-container .select2-selection--single {
  height: auto;
}

/* Streamline spacing between filter fields on tablet/mobile */
@media (max-width: 980px) {
  /* .et-db #et-boc .et-l .et_pb_row .et_pb_column .et_pb_module.et-last-child, */
  .et-db #et-boc .et-l .aal-ajax-filter .et_pb_module.et_pb_de_mach_search_posts_item,
  .et-db #et-boc .et-l .aal-ajax-filter .et_pb_module.et_pb_de_mach_search_posts_item:last-child {
    margin-bottom: 1em;
  }
}

/* Search field placeholder: darker */
body.et-db #et-boc .et-l .aal-ajax-filter #field_4 input.divi-filter-item::placeholder {
  color: var( --colour-4);
}

/** END Global Settings
--------------------------------------------------------------------------*/

/** 2.0 - Header & Footer
--------------------------------------------------------------------------*/

/* =========================
	2.1 - Header
	========================= */

/* Primary menu: align to right */
#et-boc #aal-primary-menu .et_pb_menu__wrap {
  justify-content: flex-end; 
}

/* Primary menu: smoky black without underline */
#et-boc #aal-primary-menu .et_pb_menu__wrap a {
  color: var( --colour-3);
  text-decoration: none;
  font-weight: 700;
}

/* =========================
	2.2 - Navigation
	========================= */



/* =========================
	2.3 - Footer
	========================= */

/* Text and links: see 1.2 Typography */


/* =========================
	2.4 - Content layout
	========================= */

/* Set canvas width for large screens */
#page-container, #main-header {
	margin-left: auto;
	margin-right: auto;
	max-width: 1920px;  
}

/* Vertically align columns of a row on desktop */
@media ( min-width: 981px ) {
  .aal-row--vertically-aligned {
    display: flex;
    align-items: center;
  }
}

/* All pages template: remove content section padding about (can't find option in GUI) */
.et_pb_post_content .et_pb_section_0 {
  padding-top: 0;
}


/* =========================
	2.5 - Temporary fix
	========================= */

/* Make the product search form mobile responsive */
/* This should be fixed in a future version of BodyCommerce */
@media(max-width:768px) {
    #page-container .et_pb_db_products_search form {
        display: block;
    }
    .et_pb_db_products_search .search-field {
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
    }
}


/** END Layout
--------------------------------------------------------------------------*/


/** 3.0 - Page Specific CSS
--------------------------------------------------------------------------*/

/* =========================
	3.1 - Homepage
   ========================= */

/* Min height for background image on mobile to avoid CLS */
@media ( max-width: 768px ) {
  .aal-hero .et_pb_column_1 {
    min-height: 65vw;
  }
}


/* =========================
   3.2 - Product page
   ========================= */

/* Hide SKU since it's unused */
.woocommerce .sku_wrapper {
  display: none !important;
}

/* Breadcrumbs: bigger and darker */
.woocommerce #page-container #et-boc .woocommerce-breadcrumb a,
.woocommerce #page-container #et-boc .woocommerce-breadcrumb {
  color: var( --colour-4 );
  font-size: 1rem;
}

/* Breadcrumbs: links underline in grey */
.woocommerce .woocommerce-breadcrumb a {
  text-decoration-color: var( --colour-4 );
}

/* Breadcrumb delimiter in red */
.woocommerce .delimiter {
  color: var( --colour-1 );
}

/* Prices: black */
.woocommerce div.product .et_pb_db_product_summary  p.price,
.woocommerce-page div.product .et_pb_db_product_summary span.price {
  color: var( --colour-3 );
}


/* =========================
   3.3 - Products archive
   ========================= */

/* Desktop & Mobile : 1-column layout */
#page-container .aal-product-list .loop-grid.products {
	grid-template-columns: 1fr;
}

/* Tablet: 2-column layout */
@media ( min-width: 769px ) and ( max-width: 980px ) {
	#page-container .aal-product-list .loop-grid.products {
		grid-template-columns: 1fr 1fr;
  }
}  

/* Desktop: table layout */
#page-container .aal-product-list .loop-grid .et_pb_row {
  column-gap: 0.5em;
  display: grid;
  grid-template-columns: 150px auto minmax(8em, max-content) 12em;
  width: 95%;
}
#page-container .aal-product-list .loop-grid.products .et_pb_row .et_pb_column {
  width: 100%;
}

@media ( max-width: 981px ) {
	/* Mobile & Tablet: stack elements (instead of 2-column grid) */
	#page-container .aal-product-list .loop-grid.products .et_pb_row {
		grid-template-columns: 1fr;
	}

	/* Mobile & Tablet: product elements closer together */
	#page-container .aal-product-list .loop-grid.products .et_pb_row .et_pb_column {
		margin-bottom: 0.5em;  
	}
	#page-container .aal-product-list .loop-grid.products .et_pb_row .et_pb_column:last-child {
		margin-bottom: 2em;  
	}  
	#page-container .aal-product-list .loop-grid.products .et_pb_row .et_pb_column h3 {
		padding-bottom: 0 !important;;
	}
  
	/* Mobile & Tablet: centre content */
	#page-container .aal-product-list .loop-grid.products h3, 
	.price,
	.aal-button {
		text-align: center;
	}
}

/* View Product button: short height */
/* This is a workaround for an issue introduced in Divi BodyCommerce 8.4.13 */
#page-container .aal-product-list .loop-grid.products .dbc_view_product {
  display: inline;
}

/** END Page Specific CSS
--------------------------------------------------------------------------*/


/** 4.0 - Accessibility Styles 
--------------------------------------------------------------------------*/

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
				animation-duration: 0.01ms !important;
				animation-delay: 0.01ms !important;
				animation-iteration-count: 1 !important;
				scroll-behavior: auto !important;
				transition-delay: 0.01ms !important;
				transition-duration: 0.01ms !important;
	}
}

/* Keyboard outline for focus state */
:focus,
.aal-looks-focus {
	box-shadow: none; /* Remove box shadow from buttons for better contrast */
	outline-color: var( --colour-1 );
	outline-offset: 2px;
	outline-style: solid;  
	outline-width: 3px;
}

/* Hide focus indicator when user clicks with a mouse (not a WCAG violation) */
:focus:not( :focus-visible ) { 
	outline: none;
}