/*--------------------------------------------------------------
JUS Astra Child – Trippple style guide (trippple.no)
--------------------------------------------------------------*/

/* Typography */
body,
button,
input,
select,
textarea,
.ast-button,
.menu-link,
.site-title a {
	font-family: var(--trippple-font-body);
	font-size: var(--trippple-font-size-body);
	line-height: var(--trippple-line-height-body);
	color: var(--trippple-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.site-title,
.ast-archive-description .ast-archive-title,
.wp-block-heading {
	font-family: var(--trippple-font-heading);
	font-weight: 700;
	color: var(--trippple-blue-1);
}

h1,
.entry-title {
	font-size: var(--trippple-font-size-h1);
	line-height: 1.4;
}

h2 {
	font-size: var(--trippple-font-size-h2);
	line-height: 1.4;
}

h3 {
	font-size: var(--trippple-font-size-h3);
	line-height: 1.4;
}

h4 {
	font-size: var(--trippple-font-size-h4);
	line-height: 1.4;
}

h5 {
	font-size: var(--trippple-font-size-h5);
	line-height: 1.4;
}

h6 {
	font-size: var(--trippple-font-size-h6);
	line-height: 1.4;
}

b,
strong {
	font-family: var(--trippple-font-heading);
	font-weight: 700;
}

.lead,
.has-medium-font-size {
	font-size: 1.5em;
	line-height: 1.5;
}

/* Links */
a {
	color: var(--trippple-blue-1);
	text-decoration: underline;
	transition: color var(--trippple-transition), box-shadow var(--trippple-transition);
}

a:hover,
a:focus {
	color: var(--trippple-blue-2);
}

.entry-content p a:not(.wp-block-button__link):not(.ast-button):not(.button),
.site-content a:not(.wp-block-button__link):not(.ast-button):not(.button):not(.menu-link) {
	color: var(--trippple-ink);
	text-decoration: none;
	box-shadow: inset 0 calc(-1 * var(--trippple-link-underline)) 0 0 var(--trippple-blue-1);
	padding-bottom: 2px;
}

.entry-content p a:not(.wp-block-button__link):not(.ast-button):not(.button):hover,
.site-content a:not(.wp-block-button__link):not(.ast-button):not(.button):not(.menu-link):hover {
	color: var(--trippple-ink);
	box-shadow: inset 0 -15px 0 0 var(--trippple-red);
	text-decoration: none;
}

/* Header & navigation */
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-builder-grid-row {
	background-color: var(--trippple-white);
	border-color: var(--trippple-border);
}

.main-header-menu .menu-link,
.ast-header-custom-item a,
.site-header .main-header-menu a {
	color: var(--trippple-text);
	text-decoration: none;
}

.main-header-menu .menu-link:hover,
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current-menu-parent > .menu-link {
	color: var(--trippple-blue-1) !important;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current-menu-parent > .menu-link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Buttons */
.ast-button,
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--trippple-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	background-color: var(--trippple-blue-1);
	border: 2px solid var(--trippple-blue-1);
	border-radius: var(--trippple-radius-button);
	color: var(--trippple-white);
	padding: 15px 25px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--trippple-transition), border-color var(--trippple-transition), color var(--trippple-transition);
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--trippple-red);
	border-color: var(--trippple-red);
	color: var(--trippple-white);
	text-decoration: none;
}

.wp-block-buttons {
	margin: 3rem 0;
}

/* Forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea,
.woocommerce form .input-text {
	width: 100%;
	min-height: 50px;
	padding: 5px 15px;
	border: none;
	border-bottom: 3px solid var(--trippple-blue-1);
	border-radius: var(--trippple-radius-input);
	background-color: var(--trippple-input-bg);
	color: var(--trippple-text);
	transition: border-color var(--trippple-transition), background-color var(--trippple-transition);
}

textarea {
	min-height: 150px;
}

input:focus,
select:focus,
textarea:focus {
	border-bottom-color: var(--trippple-red);
	outline: none;
	box-shadow: none;
}

label,
.gform_wrapper .gfield_label {
	color: var(--trippple-blue-1);
}

/* Footer */
.site-footer,
.site-below-footer-wrap,
.site-above-footer-wrap,
.site-primary-footer-wrap {
	background-color: var(--trippple-white);
	color: var(--trippple-text);
	border-color: var(--trippple-border);
}

.site-footer a {
	text-decoration: none;
	font-size: 1.1em;
	transition: color 0.5s ease-in-out;
}

.site-footer a:hover {
	color: var(--trippple-blue-1);
	text-decoration: none;
}

/* Blockquote (Trippple signature style) */
.wp-block-quote,
blockquote {
	border-left: none;
	margin: 5rem 0;
	padding: 0;
}

.wp-block-quote p,
blockquote p {
	font-family: var(--trippple-font-body);
	color: var(--trippple-text);
	font-size: 1.4rem;
	line-height: 1.3;
}

/* Content area */
.site-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
	background-color: var(--trippple-white);
}

/* Gutenberg columns */
.wp-block-columns.is-layout-flex {
	gap: 4rem;
}

@media (max-width: 768px) {
	.wp-block-columns.is-layout-flex {
		gap: 0;
	}
}