/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://osaweso.me
 Description:  Child theme for GeneratePress
 Author:       Osaweso
 Author URI:   https://osaweso.me
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

/* =========================================================
   osAwesome – palette foundation
   ========================================================= */

:root {
  --contrast: #2F3437;
  --contrast-2: #5F676C;
  --contrast-3: #A8B0B4;

  --base: #E9EEEA;
  --base-2: #F4F6F5;
  --base-3: #FFFFFF;

  --accent: #82B541;

  --oa-green-dark: #6E9A38;
  --oa-green-tint: #EAF3DE;

  --oa-coral: #E87552;
  --oa-coral-hover: #D86645;

  --oa-gold: #D8B35C;
  --oa-gold-tint: #F3E9C9;

  --oa-panel: #F7F8F7;
  --oa-border: #DDE3E1;
  --oa-footer-text: #D9DEE2;
  --oa-footer-muted: #8E979B;

  --oa-radius-sm: 6px;
  --oa-radius-md: 10px;
  --oa-radius-lg: 14px;

  --oa-shadow-sm: 0 1px 2px rgba(47, 52, 55, 0.04);
  --oa-shadow-md: 0 4px 16px rgba(47, 52, 55, 0.06);
}


/* =========================================================
   Global
   ========================================================= */

body {
  background: var(--base-2);
  color: var(--contrast);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--oa-green-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--contrast);
}

p,
li,
.entry-content,
.woocommerce-result-count,
.woocommerce-breadcrumb {
  color: var(--contrast-2);
}


/* =========================================================
   Header / Navigation
   ========================================================= */

.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--oa-border);
  box-shadow: 0 1px 0 rgba(47, 52, 55, 0.03);
}

/* TEMPORARY - DELETE ME */
.site-logo {
    margin-left: -5px;
}

.main-navigation,
.main-navigation ul ul {
  background: #FFFFFF;
}

.main-navigation .main-nav ul li a {
    padding-left: 17px;
    padding-right: 17px;
    line-height: 40px;
}

.main-navigation a {
    font-size: 14px;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: var(--contrast);
  font-weight: 500;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
  color: var(--accent);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--accent);
}

.main-navigation .main-nav ul li a {
  transition: color 0.18s ease, background-color 0.18s ease;
}

.menu-item-has-children .dropdown-menu-toggle {
    display: inline-block;
    height: 100%;
    clear: both;
    padding-right: 11px;
    padding-left: 4px;
}

/* Icon-only nav items */
.menu-icon-home a,
.menu-icon-account a,
.menu-icon-cart a {
    font-size: 0;
    display: flex;
    align-items: center;
}

.menu-icon-home a::before,
.menu-icon-account a::before,
.menu-icon-cart a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Home */
.menu-icon-home a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F3437' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

/* Account */
.menu-icon-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F3437' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662'/%3E%3C/svg%3E");
}

/* Cart */
.menu-icon-cart a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F3437' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9'/%3E%3Cpath d='m19 11-4-7'/%3E%3Cpath d='M2 11h20'/%3E%3Cpath d='m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4'/%3E%3Cpath d='M4.5 15.5h15'/%3E%3Cpath d='m5 11 4-7'/%3E%3Cpath d='m9 11 1 9'/%3E%3C/svg%3E");
}

/* White versions for dark header */
.dark-header .menu-icon-home a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}


/* Get Started CTA */

li#menu-item-70 {
    margin-left: 15px !important;
}

.main-navigation .main-nav ul li.cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 22px;

  background: #E87552; /* coral */
  color: #FFFFFF !important;

  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;

  text-decoration: none;

  box-shadow: 0 2px 0 rgba(160, 78, 54, 0.9);
  transition: all 0.18s ease;
}

/* hover */
.main-navigation .main-nav ul li.cta > a:hover {
  background: #D86645;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(140, 68, 46, 0.95);
}

/* active (click) */
.main-navigation .main-nav ul li.cta > a:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(140, 68, 46, 0.95);
}


/* =========================================================
   Main content containers
   ========================================================= */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
  background: transparent;
}

.site-main .wp-block-group__inner-container,
.inside-article {
  padding-top: 48px;
  padding-bottom: 48px;
}


/* =========================================================
   Breadcrumbs / titles
   ========================================================= */

.woocommerce-breadcrumb {
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--contrast-3);
}

.woocommerce-breadcrumb a {
  color: var(--contrast-2);
}

.woocommerce-products-header__title.page-title,
.entry-title {
  color: var(--contrast);
  margin-bottom: 12px;
}


/* =========================================================
   Shop toolbar
   ========================================================= */

.woocommerce-result-count,
.woocommerce-ordering {
  margin-bottom: 28px;
}

.woocommerce .woocommerce-ordering select,
select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
  background: #FFFFFF;
  border: 1px solid var(--oa-border);
  color: var(--contrast);
  border-radius: var(--oa-radius-sm);
  padding: 10px 12px;
  box-shadow: none;
}

.woocommerce .woocommerce-ordering select:focus,
select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(130, 181, 65, 0.12);
}


/* =========================================================
   Product grid
   ========================================================= */

.woocommerce ul.products {
  margin-top: 20px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #FFFFFF;
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius-lg);
  padding: 22px;
  box-shadow: var(--oa-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--oa-shadow-md);
  border-color: #D3DBD7;
}

.woocommerce ul.products li.product a img {
  border-radius: var(--oa-radius-md);
  margin-bottom: 16px;
  background: var(--oa-panel);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--contrast);
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.woocommerce ul.products li.product .price {
  color: var(--contrast-2);
  font-weight: 500;
  margin-bottom: 18px;
}

.woocommerce ul.products li.product .price .amount {
  color: var(--contrast);
  font-weight: 700;
}

.woocommerce ul.products li.product .from,
.woocommerce ul.products li.product .subscription-details {
  color: var(--contrast-3);
}


/* =========================================================
   Buttons
   ========================================================= */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--oa-coral);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--oa-radius-md);
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 3px 0 rgba(180, 86, 58, 0.9);
  transition: transform 0.15s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.wp-block-button__link:not(.has-background):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus {
  background: var(--oa-coral-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(160, 75, 49, 0.95);
}


/* =========================================================
   Notices / alerts
   ========================================================= */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius-md);
  box-shadow: none;
  padding: 16px 18px 16px 20px;
}

.woocommerce-info {
  background: var(--oa-green-tint);
  border-color: #D5E5C2;
  color: var(--contrast);
}

.woocommerce-message {
  background: var(--oa-green-tint);
  border-color: #D5E5C2;
  color: var(--contrast);
}

.woocommerce-error {
  background: #F9E2DA;
  border-color: #F1C7BB;
  color: var(--contrast);
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  color: var(--accent);
}


/* =========================================================
   Panels / optional utility class
   ========================================================= */

.oa-panel {
  background: var(--oa-panel);
  border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius-lg);
  padding: 24px;
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer,
.site-info {
  background: var(--contrast);
  color: var(--oa-footer-text);
}

.site-footer {
  margin-top: 64px;
}

.inside-site-info {
  padding-top: 22px;
  padding-bottom: 22px;
}

.site-info a {
  color: var(--accent);
}

.site-info a:hover,
.site-info a:focus {
  color: #A7C86D;
}

.copyright-bar {
  color: var(--oa-footer-text);
}


/* =========================================================
   Mobile touch-up
   ========================================================= */

@media (max-width: 768px) {
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    padding: 18px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 22px;
  }

  .site-main .wp-block-group__inner-container,
  .inside-article {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}