/*
Theme Name: bbg
Theme URI: https://brightbluegum.com.au/
Description: Divi Child Theme for BBG
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 - Selection Highlight
  1.3 - Buttons
  1.4 - Typography
  1.5 - Custom Font Face
  1.6 - Blurbs
  1.7 - Forms
  1.8 - Pricing table
  1.9 - Shape dividers
  1.10 - TablePress (to delete once Ninja Tables is stable)
  1.11 - Ninja Tables
  1.12 - Table of Contents block (from SEOPress)

2.0 - Layout + Themer
  2.1 - Header
  2.2 - Navigation
  2.3 - Footer

3.0 - Page Specific CSS
  3.1 - Homepage

4.0 - Admin Branding
  4.1 - Admin Bar
  4.2 - Builder Styles

5.0 - Tablet Only Styles

6.0 - Tablet + Mobile Styles

7.0 - Mobile Only Styles

8.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: #ffffff; /* White                 */
  --colour-2: #f5f5f5; /* Cultured (light grey) */
  --colour-3: #444444; /* Onyx (dark grey)      */
  --colour-4: #006b99; /* Sapphire blue         */
  --colour-5: #759F2D; /* Olive drab 3          */
  --colour-6: #607F27; /* Avocado               */

/* Fonts are also set in Text Global preset in Divi */
  --font-body: "Roboto", Arial, sans-serif;
  --font-header: "Nunito", Arial, sans-serif;

  --transition-duration: 0.3s;
}

/* Set colour to green (eg number in h2 on Website care plan page) */
.bbg-green-colour {
  color: var( --colour-6 );
}


/* =========================
   1.2 - Selection Highlight
   ========================= */

/* Managed by Divi Accessibility plugin */

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

/* Managed by Divi Global Presets */

/* =========================
   1.4 - Typography
   ========================= */

/* Links: thick and green underline for text module body, 
 * ordered lists, 
 * unordered lists,
 * blurbs,
 * pagination on blog page */
.et_pb_text_inner a, 
ol a, 
ul a,
.et_pb_blurb a,
.pagination a {
  text-decoration: underline;
  text-decoration-color: var( --colour-5 );
  text-decoration-thickness:0.125em;
  text-underline-offset: 2px;
}

/* Links on hover: higher underline */
.et_pb_text_inner a:hover, 
ol.a:hover,
ul.a:hover,
.et_pb_blurb a:hover,
.pagination a:hover {
  text-decoration-thickness:0.25em;
}

/* Links on posts
 * !important is required to override Divi default stylesheet loaded inline */
#main-content p a {
  text-decoration: underline !important;
  text-decoration-color: var( --colour-5 ) !important;
  text-decoration-thickness:0.125em !important;
  text-underline-offset: 2px;
}

/* Links on hover on posts: higher underline  
 * !important is required to override Divi default stylesheet loaded inline */
#main-content p a:hover {
  text-decoration-thickness:0.25em !important;
}


/* Ordered lists: numbers in discs */
ol {
  counter-reset: rowNumber;
  margin-left: 0;
}

ol li:not(:empty)::before {
  background: var( --colour-6 );
  border-radius: 100%;
  color: #fff;
  content: counter(rowNumber);
  counter-increment: rowNumber;
  display: inline-block;
  left: 0;
  line-height: 1;
  padding: 8px;
  position: absolute;
  text-align: center;
  width: 18px;
}

ol li {
  list-style-type: none;
  margin-bottom: 10px;
  padding-left: 40px;
}

/* Unordered lists: green discs */
ul li::marker {
  color: var( --colour-6 );
}

/* All lists: increased spacing between items*/
li:not(.menu-item) {
  padding-bottom: 10px;
}

/* Text, links, list discs, h2 on dark background: white colour */
#page-container .bbg-dark-background .et_pb_row .et_pb_column .et_pb_text .et_pb_text_inner, /* 404 page */
#page-container .bbg-dark-background .et_pb_row .et_pb_column .et_pb_text .et_pb_text_inner a, 
#main-content .bbg-dark-background .et_pb_text, /* other pages, posts */
#main-content .bbg-dark-background a,
#main-content .bbg-dark-background .et_pb_text ul li::marker,
#main-content .bbg-dark-background h2 {
  color: var( --colour-1 ) !important;
  text-decoration-color: var( --colour-1 ) !important;
}

/* Links in footer on hover: deeper bottom border */
.bbg-dark-background a:hover {
  text-decoration-thickness:0.25em;
}

/* H2-4 headings: add spacing above */
h2, h3, h4 {
  padding-top: 10px;
}

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

/* =========================
   1.5 - Custom Font Face
   ========================= */

/* Managed by Divi */

/* =========================
   1.6 - Blurbs
   ========================= */

/* Reduce spacing between icon/image and text */
.et_pb_main_blurb_image {
  margin-bottom: 10px;
}

/* =========================
   1.7 - Forms
   ========================= */

/* -----------------------------------------
   1.7.1 - Dark background (eg Contact page) */

/* Form labels: white colour */
.bbg-form-dark {
  color: var( --colour-1 );
}

/* Form labels and submit button: bigger and bolder text */
.bbg-form-dark .gform_wrapper input[type="submit"] {
  background-color: var( --colour-4 );
  border: 3px solid transparent;  
  border-color: var( --colour-1 );  
  border-radius: 15px;
  box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);  
  color: var( --colour-1 );  
  font-size: 1em;
  font-weight: 700;
  line-height: 1.7em!important;  
  padding: 0.3em 1em;
}

/* Radio button text */
.bbg-form-dark .gform_fields input:not([type="radio"]),
.bbg-form-dark .gform_fields textarea {
  border-color: var( --colour-1 );
  border-radius: 5px;
  color: var( --colour-3 );  
  font-size: 1em;
  line-height: 1.5em;
  width: 100%;
}

/* Submit button: invert colours on hover */
.bbg-form-dark .gform_wrapper input[type="submit"]:hover {
  background-color: var( --colour-1 );
  color: var( --colour-4 );
}

/* Submit button: set outline like normal button */
.bbg-form-dark input[type="submit"] {
  outline-offset: 2px;
  outline-color: var( --colour-1 ) !important;
}

/* ----------------------------------------------
   1.7.2 - Light background (eg Get started page) */

/* Form labels and submit button: bigger and bolder text */
.bbg-form-light .gform_wrapper input[type="submit"] {
  background-color: var( --colour-1 );
  border: 3px solid transparent;  
  border-color: var( --colour-4 );  
  border-radius: 15px;
  box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);  
  color: var( --colour-4 );  
  font-size: 1em;
  font-weight: 700;
  line-height: 1.7em!important;  
  padding: 0.3em 1em;
}

/* Radio button text */
.bbg-form-light .gform_fields input:not([type="checkbox"]):not([type="radio"]),
.bbg-form-light .gform_fields textarea {
  border-color: var( --colour-4 );
  border-radius: 5px;
  border-width: 2px;
  color: var( --colour-3 );  
  font-size: 1em;
  line-height: 1.5em;
  width: 100%;
}

/* Submit button: invert colours on hover */
.bbg-form-light .gform_wrapper input[type="submit"]:hover {
  background-color: var( --colour-4 );
  color: var( --colour-1 );
}

/* Submit button: set outline like normal button */
.bbg-form-light input[type="submit"] {
  outline-offset: 2px;
  outline-color: var( --colour-4 ) !important;
}

/* -----------------------------------------------
   1.7.3 Common to dark and light background forms */

/* Human test radio boxes: display on a single line instead of separate lines */
.bbg-gf-math-test .gchoice {
  display: inline;
}

/* Required in italic, slightly smaller font and slightly spaced away from field label */
.bbg-form-dark .gfield_required,
.bbg-form-light .gfield_required {
  font-style: italic;
  font-size: 0.9em;
  padding-left: 5px;
}

/* Add spacing between fields */
.gfield { 
  margin-bottom: 0.8em;
}

/* Radio button icon in green colour */
.gchoice {
  accent-color: var( --colour-6 );
  background-color: var( --colour-1 );
  color: var( --colour-3 );
  padding:8px;
}

/* Answers (radio buttons): round corners */
.gchoice:first-child{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.gchoice:last-child{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Increase spacing between math question and answers */
legend.gfield_label {
  margin-bottom: 2px;
}

/* Add keyboard outline to form textarea (oversight in Divi Accessibility plugin) */
textarea:active.keyboard-outline, textarea:focus.keyboard-outline {
  outline-offset: -5px;
  outline-color: var( --colour-5 );
}

/* Hide honeypot */
/* Need to manually add this rule because the "Output default CSS" is disabled in Gravity Forms > Settings */
.gform_wrapper.gravity-theme .gform_validation_container, 
body .gform_wrapper.gravity-theme .gform_body .gform_fields .gfield.gform_validation_container, 
body .gform_wrapper.gravity-theme .gform_fields .gfield.gform_validation_container, 
body .gform_wrapper.gravity-theme .gform_validation_container {
  display: none !important;
  left: -9000px;
  position: absolute !important;
}

/* =========================
   1.8 - Pricing table
   ========================= */

/* Ticks in blue pricing table */
.bbg-pricing-table-blue ul li::marker {
  content: '\e052';
  color: var( --colour-6 );
  font-family: 'ETMODULES';
}

/* Ticks in green pricing table */
.bbg-pricing-table-green ul li::marker {
  content: '\e052';
  color: var( --colour-4 );
  font-family: 'ETMODULES';
}

/* Spacing between tick and list item */
.bbg-pricing-table-blue ul li,
.bbg-pricing-table-green ul li
{
  padding-left: 5px;
}

/* =========================
   1.9 - Shape dividers
   ========================= */

/* Fix bug with bottom shape divider showing a thin line on some screen resolution/zoom */
/* Introduced in Divi 4.19.1*/
/* Might need this for top shape dividers too */
.et_pb_bottom_inside_divider {
  margin-bottom: -1px ;
}

/* =========================
   1.10. TablePress (to delete once Ninja Tables is stable)
   ========================= */

/* Table name centred in blue */
h2.tablepress-table-name {
  color: var( --colour-4 );
  text-align: center;
}

/* Full borders to table (Optional) */
.bbg-table-with-borders tr td {
  border: 1px solid #ddd !important;;
}

/* Rows spanning multiple cells: vertically align to centre */
td[rowspan] {
  vertical-align: middle;
}

/* =========================
   1.11. Ninja Tables
   ========================= */

/* Reset font size for all tables */
/* There's also an option in Table Design > Other */
#main-content .ninja_footable {
  font-size: unset;
}

/* Reset font colour */
#main-content .semantic_ui .ui.table {
  color: unset;
}

/* Header row: blue background and white text */
#main-content .semantic_ui .ui.table thead th {
  background-color: var( --colour-4 );
  color: var( --colour-1 );
}

/* ===========================================
   1.12 - Table of Contents block (from SEOPress)
   =========================================== */
   
/* No padding between sub-lists */
.wp-block-wpseopress-table-of-contents ul {
  padding-bottom: 0;
}

/* No padding between list items */
.wp-block-wpseopress-table-of-contents ul li {
  padding-bottom: 0;
}

/* Grey background */
.wp-block-wpseopress-table-of-contents {
  background-color: var( --colour-2 );
  border-radius: 1rem;
  padding: 1rem;
}   


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

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

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



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

/* Current page in menu: blue underline */
#menu-bbg-primary-menu .current_page_item a {
  text-decoration: underline;
  text-decoration-color: var( --colour-4 );
  text-decoration-thickness:0.25em;
  text-underline-offset: 5px;
}
/* Hover on menu item: green underline */
#menu-bbg-primary-menu li a:hover {
  text-decoration: underline;
  text-decoration-color: var( --colour-5 );
  text-decoration-thickness:0.25em;
  text-underline-offset: 5px;}

/* Mobile menu: remove underline */
.et_mobile_menu li a
{
  text-decoration: none;
  opacity: unset; 
}

/* Mobile menu on hover: remove opacity */
.et_mobile_menu li a:hover {
  opacity: unset; 
}

/* Display the word "MENU" under the hamburger icon */
.mobile_nav::after {
  content:'Menu'; 
  color: #037eab;
  font-size:15px;
  text-transform:uppercase;
  vertical-align:top; 
  line-height:1em; 
}

/* Move the hamburger icon a bit down and right */
.mobile_menu_bar {
  top:8px;
  left: 4px;
}

/* Back to top icon: more opaque for better contrast */
.et_pb_scroll_top.et-pb-icon {
  background: rgba(0,0,0,0.5);
}


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




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




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

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

/* Display CTA and mockup side by side on tablet */
@media (min-width: 768px) {
  .bbg-home-mockup-row {
    display: flex;
  }
}

/* Accessibility blurb image: align to centre */
/* default text-align property doesn't work because this is an image instead of an icon */
.bbg-accessibility-blurb .et_pb_main_blurb_image {
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   3.2 - Services
   ========================= */
   
/* Services with image in right column: swap columns on mobile */
@media (max-width: 980px) {
  .bbg-swapped-service-section {
    display: flex;
    flex-wrap: wrap;
  }
  .bbg-swapped-service-section > .et_pb_column:first-child {
    order: 2;
  }
}

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

/** 4.0 - Admin Branding
--------------------------------------------------------------------------*/



/** END Admin Branding
--------------------------------------------------------------------------*/

/** 5.0 - Tablet Only Styles
--------------------------------------------------------------------------*/



/** 6.0 - Tablet + Mobile Styles
--------------------------------------------------------------------------*/
/* Remove margin on 1st column (eg for wolf image on website care plan page) */
@media (max-width: 980px) {
  .bbg-column1-no-bottom-margin > .et_pb_column:first-child {
    margin-bottom: 0;
  }
}

/** 7.0 - Mobile Only Styles
--------------------------------------------------------------------------*/



/** 8.0 - Accessibility Styles
--------------------------------------------------------------------------*/

/* Reduce Motion if option set in browser*/
@media (prefers-reduced-motion: reduce) {
  /* Reduce animations */
  *,
  *::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;
  }          
  /* Disable parallax scrolling */
  .et_parallax_bg_wrap { 
    display: none;
  }            
  
}

/* Open in New window icon: remove margin to avoid broken underline and increase icon size */
.anww-external-link-icon:before {
 font-size: 0.8em;
 margin-left: 0; 
}

/* Offset the keyboard to make it stand out since it's the same colour */
.keyboard-outline {
 outline-offset: 2px;
}

/* Duplicate keyboard-outline class to demonstrate outline in Style guide page */
.bbg-style-guide-keyboard-outline {
 outline-style: solid !important;
 outline-width: 2px !important;
 outline-offset: 2px;  
}