/*
 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, body {
	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;
	color: #5cb85c;
	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;
}