/*
 Theme Name:   OkayRelax One
 Theme URI:    https://okayrelax.com
 Description:  Child theme to GeneratePress' default theme.
 Author:       Ru Singh
 Author URI:   https://rusingh.com
 Template:     generatepress
 Version:      0.1
*/

/* GP Site CSS */
/* We have updated the following two classes. */
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
  background: #5cb85c;
  color: white;
  border-radius: 30px;
  line-height: 36px;
  margin-left: 20px;
  transition: all 0.2s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
  color: white;
  background: #1e921e;
}
/* End GP Site CSS */

/* Use our font and let it be swapped when ready. */
html {
  font-family: "Inter", sans-serif;
  font-display: swap;
}

/* Smooth scrolling */
html,
body {
  scroll-behavior: smooth;
}

/* On the  */
.okr-sticky {
  position: sticky;
  top: 2em;
  height: max-content !important;
}

/* You can't style the read more button in case the excerpt is too long by using the WP/GP/Customizer. */
.read-more.button {
  padding: 12px 24px;
  border-radius: 30px;
}

/* Undo how menu link is styled */
/* 1. We want wider buttons. */
.main-navigation .main-nav ul li a {
  padding-left: 24px;
  padding-right: 24px;
}

/* 2. Let them be rounded. */
.main-navigation li,
.secondary-navigation li {
  border-radius: 30px;
  overflow: hidden;
}

/* Let the line height match the button height so that the text is centered (only works for single-line links). */
.main-navigation .main-nav ul li a {
  line-height: 36px;
}

/* On the dashboard, we have a list of services we rotate/spin. */
.spinny-words {
  height: 1em;
  line-height: 1;
  display: inline-block;
  vertical-align: top;
}

/* Each word within the rotator/spinner. */
.spinny-words span {
  position: absolute;
  font-style: italic;
  font-size: 1.1em;
  opacity: 0;
  white-space: nowrap;
  -webkit-animation: rotateWord 24s ease 0s infinite;
  animation: rotateWord 24s ease 0s infinite;
}

/* Desktop-first. When on mobile, increase the height and try to break longer phrases into two lines. */
@media screen and (max-width: 767px) {
  .spinny-words {
    height: 2em;
  }

  .spinny-words span {
    white-space: break-spaces;
  }
}

/* For each word, control when they enter in. */
.spinny-words span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.spinny-words span:nth-child(2) {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.spinny-words span:nth-child(3) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.spinny-words span:nth-child(4) {
  -webkit-animation-delay: 9s;
  animation-delay: 9s;
}

.spinny-words span:nth-child(5) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

.spinny-words span:nth-child(6) {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}

.spinny-words span:nth-child(7) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

.spinny-words span:nth-child(8) {
  -webkit-animation-delay: 21s;
  animation-delay: 21s;
}

/* The actual animation used by spinny words. */
@keyframes rotateWord {
  0% {
    opacity: 0;
  }

  2% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  7% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  14% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  21% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  80% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

/* Helper classes */
@media screen and (max-width: 480px) {
  .hide-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 800px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Borrowing a TailwindCSS class to help with readability in some places. */
.max-w-prose {
  max-width: 55ch;
}

ol.okayrelax-no-style-list,
ul.okayrelax-no-style-list {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}

/* Handle what links look like in:
 * - Content rendered on WP on pages and posts.
 * - Content rendered using the GP Dynamic Content block.
 * - Links included within post meta (such as author or category).
 * - Links included in comments left by users.
 */

article .entry-content a,
article .dynamic-entry-content a,
.comment-content a,
.inside-article .entry-meta a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #1e3342;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-underline-offset 150ms ease-in;
  font-weight: normal;
}

article .entry-content a:hover,
article .dynamic-entry-content a:hover,
.comment-content a:hover,
.inside-article .entry-meta a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: text-underline-offset 150ms ease-out;
}

article .entry-content a:visited,
article .dynamic-entry-content a:visited,
.comment-content a:visited,
.inside-article .entry-meta a:visited {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-underline-offset 150ms ease-out;
}

article .entry-content a:active,
article .dynamic-entry-content a:active,
.comment-content a:active,
.inside-article .entry-meta a:active {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  color: #5cb85c;
  text-underline-offset: 4px;
  transition: text-underline-offset 150ms ease-out;
}

.dynamic-entry-excerpt p {
  color: #3d3d3d;
}

blockquote.wp-block-quote.okayrelax-review {
  font-size: 1em;
  border-left: 0;
}

blockquote.wp-block-quote.okayrelax-review cite {
  /* See https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/ */
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.is-rounded-image {
  border-radius: 4px;
}

/* Always keep these links blue. */
.okayrelax-offered-services ul li a,
.okayrelax-offered-services ol li a,
.okayrelax-offered-services ul li a:visited,
.okayrelax-offered-services ol li a:visited {
  color: #5593bf;
}

/* And don't underline them. */
.okayrelax-offered-services ul li a,
.okayrelax-offered-services ol li a {
  text-decoration-line: none;
}

/* On service pages, we have these "from our blog" sections that are super hard to cram on mobile. Removing the left margin too. */
ul.wp-block-post-template {
  margin-left: 0;
}

p.gb-headline.okayrelax-headline-mobile-fix {
  align-items: flex-start;
}

/* Prevent ToC from looking ugly. */
article .dynamic-entry-content .lwptoc a {
  text-decoration-line: none;
}

/* Less in the face blockquotes. */
blockquote.wp-block-quote:not(.is-style-large) {
  font-style: unset;
}

blockquote.wp-block-quote:not(.is-style-large) cite {
  font-size: 0.75em;
  font-style: inherit;
}

/* Forms */

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border-color: #858e96;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: #5593bf;
}

.happyforms-flex {
  padding-top: 12px;
}

/* CSS from "Additional CSS" section of WordPress UI */
#sticky-navigation {
  background-color: #1e3342;
  width: 100vw;
  padding-top: 6px;
  padding-bottom: 6px;
}

.navigation-branding img,
.site-logo.mobile-header-logo img {
  height: 32px;
  padding: 0;
}

/* Remove link underline */
article .entry-content a,
article .dynamic-entry-content a,
.comment-content a,
.inside-article .entry-meta a {
  text-decoration-line: none;
}

@media screen and ((min-width: 768px) and (max-width: 1024px)),
  (min-width: 1025px) {
  .main-navigation.sticky-navigation-transition .site-logo img,
  .main-navigation.sticky-navigation-transition
    .navigation-search
    input[type="search"],
  .main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 32px;
    padding: 0;
  }

  .main-navigation.sticky-navigation-transition .main-nav > ul > li > a,
  .sticky-navigation-transition .menu-toggle,
  .main-navigation.sticky-navigation-transition .menu-bar-item > a,
  .sticky-navigation-transition .navigation-branding .main-title {
    line-height: 36px;
  }
}

.main-navigation.has-branding:not([class*="nav-align-"]):not(
    .mobile-header-navigation
  )
  .inside-navigation,
.main-navigation.has-sticky-branding.navigation-stick:not(
    [class*="nav-align-"]
  ):not(.mobile-header-navigation)
  .inside-navigation {
  justify-content: space-between;
}

.footer-links-company a,
.footer-links-personal-services a {
  display: block;
  margin-bottom: 6px;
}

@media screen and (max-width: 767px) {
  .footer-links-company a,
  .footer-links-personal-services a {
    margin-bottom: 9px;
  }
}

.label {
  display: inline-block;
  padding: 1px 9px;
  margin-inline-start: 0.375rem;
  font-size: 0.8rem;
  /* 	text-transform: uppercase; */
  border-radius: 0.25rem;
  background-color: #fafafa;
  color: black;
}

.label-remote {
  background-color: #3d3d3d;
  color: white;
}

.label-pakistan {
  background-color: #5cb85c;
  color: white;
}

.label-philippines {
  background-color: #5593bf;
  color: white;
}

/* Using a layout GP Element for career pages leads to no padding because that's what it says on the GP settings. This is a basic undo without much responsiveness drilled in. */
.contained-content.one-container .site-content,
.contained-content.separate-containers .inside-article {
  padding: 20px 30px 20px 30px;
}

/* Improve contrast for the contact form success message. */
.happyforms-styles .happyforms-message-notices .success h2 {
  color: #2b742b !important;
}

/*  */
/* WooCommerce Customization */
/*  */
.woocommerce ul.products li.product .button {
  border-radius: 30px;
}

/* Sign up button on shop page */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: #325670;
}

/* Labels */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  color: #325670;
  font-size: 1em;
  background: none;
}

/*  Signup button on order page*/
.woocommerce div.product form.cart .button {
  color: #ffffff;
  background-color: #325670;
  border-radius: 30px;
}

/* Tab color on order page */
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #325670;
}

/* Additional information table */
.woocommerce table.shop_attributes td {
  padding: 10px;
  padding-left: 20px;
}

/* Hide SKU */
.product_meta > span.sku_wrapper {
  display: none;
}

/* Cart */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 30px;
}

/* Proceed to checkout button */
.woocommerce a.button.alt {
  background-color: #5cb85c !important;
}
.woocommerce a.button.alt:hover {
  background-color: #1e921e !important;
}

/* Checkout page  */
.woocommerce-info {
  background-color: #325670;
}

button#place_order {
  background-color: #5cb85c;
}
button#place_order:hover {
  background-color: #1e921e;
}

/* Coupon banner at the top of checkout */
div.woocommerce-info a.showcoupon {
  text-decoration: underline;
}

/* Drop menus on checkout */
span.select2-selection.select2-selection--single {
  display: flex;
  align-items: center;
  padding-top: 25px;
  padding-right: 10px;
  padding-bottom: 25px;
  padding-left: 10px;
}

span.select2-selection.select2-selection--single .select2-selection__arrow {
  position: absolute;
  right: 10px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Cart icon in menu */
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover,
.main-navigation .menu-bar-item > a {
  border-radius: 30px;
  height: 36px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 36px;
}
/* Cart goes to the second line at 1168px, so we'll hide it here */
@media screen and (max-width: 1168px) {
  .main-navigation .menu-bar-item > a {
    display: none;
  }
}