/*
 Theme Name:   Hyvää työtä -akatemia
 Theme URI:    
 Description:  
 Author:       Jussi Pääkkönen
 Author URI:   https://jpvisuals.fi
 Template:     generatepress
 Version:      1.10
*/

/* ------------------------------------------------------------------
   Mobile menu toggle: animated "vortex" hamburger
   (reference: https://jonsuh.com/hamburgers/)
   Block: GenerateBlocks Pro Menu Toggle in Elements > Header (#32)
   The open-icon span is the rotating box; its ::before / svg / ::after
   are the three bars. The close icon is not used.
------------------------------------------------------------------- */
.gb-menu-toggle-919b45cd .gb-menu-close-icon {
	display: none !important;
}

.gb-menu-toggle-919b45cd .gb-menu-open-icon {
	display: block !important;
	position: relative;
	width: 26px;
	height: 20px;
	line-height: 0;
	transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Middle bar (the original SVG, drawn as a bar) */
.gb-menu-toggle-919b45cd .gb-menu-open-icon svg {
	position: absolute;
	left: 0;
	top: 50%;
	width: 26px;
	height: 3px;
	margin-top: -1.5px;
	background-color: currentColor;
	border-radius: 2px;
}

.gb-menu-toggle-919b45cd .gb-menu-open-icon svg path {
	display: none;
}

/* Top and bottom bars */
.gb-menu-toggle-919b45cd .gb-menu-open-icon::before,
.gb-menu-toggle-919b45cd .gb-menu-open-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 26px;
	height: 3px;
	background-color: currentColor;
	border-radius: 2px;
	transition-duration: 0s;
	transition-delay: 0.1s;
	transition-timing-function: linear;
}

.gb-menu-toggle-919b45cd .gb-menu-open-icon::before {
	top: 0;
	transition-property: top, opacity;
}

.gb-menu-toggle-919b45cd .gb-menu-open-icon::after {
	bottom: 0;
	transition-property: bottom, transform;
}

/* Open state: spin and form an X */
.gb-menu-toggle-919b45cd.gb-menu-toggle--toggled .gb-menu-open-icon {
	transform: rotate(765deg);
}

.gb-menu-toggle-919b45cd.gb-menu-toggle--toggled .gb-menu-open-icon::before,
.gb-menu-toggle-919b45cd.gb-menu-toggle--toggled .gb-menu-open-icon::after {
	transition-delay: 0s;
}

.gb-menu-toggle-919b45cd.gb-menu-toggle--toggled .gb-menu-open-icon::before {
	top: 8.5px;
	opacity: 0;
}

.gb-menu-toggle-919b45cd.gb-menu-toggle--toggled .gb-menu-open-icon::after {
	bottom: 8.5px;
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.gb-menu-toggle-919b45cd .gb-menu-open-icon,
	.gb-menu-toggle-919b45cd .gb-menu-open-icon::before,
	.gb-menu-toggle-919b45cd .gb-menu-open-icon::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Mobile menu panel: 40% black overlay with blur
   Block: GenerateBlocks Pro Menu Container in Elements > Header (#32)
------------------------------------------------------------------- */
body .gb-menu-container-6aa2d42c.gb-menu-container--mobile {
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* Mobile menu links: larger font size */
body .gb-menu-container-6aa2d42c.gb-menu-container--mobile .gb-menu-link {
	font-size: 1.5rem;
}

/* Mobile menu: current page link in orange */
body .gb-menu-container-6aa2d42c.gb-menu-container--mobile .current-menu-item > .gb-menu-link {
	color: var(--orange);
}

/* ------------------------------------------------------------------
   Desktop menu: underline bar under the current page link
   Block: GenerateBlocks Pro Classic Menu Item in Elements > Header (#32)
   Bar spans the link text (the link has 18px side padding).
------------------------------------------------------------------- */
@media (min-width: 768px) {
	.gb-menu-container-6aa2d42c:not(.gb-menu-container--mobile) .current-menu-item > .gb-menu-link {
		position: relative;
	}

	.gb-menu-container-6aa2d42c:not(.gb-menu-container--mobile) .current-menu-item > .gb-menu-link::after {
		content: "";
		position: absolute;
		left: 18px;
		right: 18px;
		bottom: 2px;
		height: 4px;
		background-color: #21a0b2;
	}
}

/* ------------------------------------------------------------------
   Palvelut: service card accordion
   Markup: [data-hta-accordion] card > [data-hta-panel] > div, [data-hta-toggle] button
   Script: assets/hta-accordion.js toggles .is-open on the card
------------------------------------------------------------------- */
[data-hta-accordion] {
	transition: background-color 0.4s ease;
}

[data-hta-accordion] h3,
[data-hta-accordion] p {
	transition: color 0.4s ease;
}

[data-hta-accordion].is-open {
	background-color: #023138;
}

[data-hta-accordion].is-open h3,
[data-hta-accordion].is-open p {
	color: #ffffff;
}

[data-hta-panel] {
	visibility: hidden;
	transition: grid-template-rows 0.5s ease, visibility 0s linear 0.5s;
}

[data-hta-accordion].is-open [data-hta-panel] {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.5s ease, visibility 0s linear 0s;
}

[data-hta-panel] > div > :last-child {
	margin-bottom: 24px;
}

button[data-hta-toggle].hta_button {
	border: 0;
	cursor: pointer;
}

button[data-hta-toggle].hta_button:focus,
button[data-hta-toggle].hta_button:active {
	background-color: #d9732b;
	color: #ffffff;
}

button[data-hta-toggle].hta_button:hover {
	background-color: #d9732b;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	[data-hta-accordion],
	[data-hta-accordion] h3,
	[data-hta-accordion] p,
	[data-hta-panel] {
		transition: none !important;
	}
}
/* ------------------------------------------------------------------
   Yhteystiedot: contact form (Contact Form 7, "Yhteydenottolomake")
   Shortcode on the page adds html_class="hta-form" to the <form>.
   Grey fields with the placeholder as the visible label, orange button.
------------------------------------------------------------------- */
.hta-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hta-form p {
	margin: 0;
}

.hta-form input[type="text"],
.hta-form input[type="email"],
.hta-form textarea {
	display: block;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background-color: var(--surface-band);
	color: var(--ink);
	font-family: var(--gp-font--roboto);
	font-size: clamp(1rem, 0.94rem + 0.27vw, 1.1875rem);
	font-weight: 300;
	line-height: 1.2;
}

.hta-form textarea {
	min-height: 260px;
	resize: vertical;
}

.hta-form ::placeholder {
	color: var(--ink);
	opacity: 1;
}

.hta-form input:focus-visible,
.hta-form textarea:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.hta-form__actions {
	margin-top: 16px !important;
}

.hta-form .hta-form__submit {
	display: inline-flex;
	align-items: center;
	min-height: 49.5px;
	padding: 0 30px;
	border: 0;
	border-radius: 20px;
	background-color: #d9732b;
	color: #ffffff;
	font-family: var(--gp-font--roboto);
	font-size: clamp(1.125rem, 1.0045rem + 0.5357vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.hta-form .hta-form__submit:hover,
.hta-form .hta-form__submit:focus {
	background-color: #d9732b;
	color: #ffffff;
}

.hta-form .hta-form__submit:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

/* CF7 markup */
.hta-form .hidden-fields-container {
	display: none;
}

.hta-form .wpcf7-form-control-wrap {
	display: block;
}

.hta-form .wpcf7-not-valid {
	box-shadow: inset 4px 0 0 var(--orange);
}

.hta-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: var(--ink);
	font-size: 0.9375rem;
}

.hta-form .hta-form__actions {
	display: flex;
	align-items: center;
}

.hta-form .wpcf7-spinner {
	margin: 0 0 0 16px;
}

/* Sent / error message under the form */
.wpcf7 form.hta-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 0;
	border-left: 4px solid var(--orange);
	background-color: var(--surface-card);
	color: var(--ink);
}

.wpcf7 form.hta-form.sent .wpcf7-response-output {
	border-left-color: var(--teal);
}

/* ------------------------------------------------------------------
   Referenssit: recommendation carousel (GenerateBlocks Pro carousel)
   Dots in the brand palette; a lone slide hides arrows and dots.
------------------------------------------------------------------- */
.hta-suositukset .gb-carousel-pagination .gb-carousel-dot {
	width: 8px;
	height: 8px;
	background-color: var(--dot);
}

.hta-suositukset .gb-carousel-pagination .gb-carousel-dot.is-active {
	background-color: var(--orange);
	transform: none;
}

.hta-suositukset:has(.gb-carousel-item:only-child) .gb-carousel-control {
	visibility: hidden;
}

/* Swiper sizes slides from the carousel element itself, so the arrows sit in
   its side padding (not in grid columns) to keep slides from running under
   the next button. Dots are centred under the quote. */
.hta-suositukset .gb-carousel {
	display: block;
	position: relative;
	padding-left: 64px;
	padding-right: 64px;
}

.hta-suositukset .gb-carousel-control {
	position: absolute;
	top: calc(50% - 16px);
	transform: translateY(-50%);
	z-index: 2;
}

.hta-suositukset .gb-carousel-control--previous {
	left: 0;
}

.hta-suositukset .gb-carousel-control--next {
	right: 0;
}

.hta-suositukset .gb-carousel-pagination {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

@media (max-width: 767px) {
	.hta-suositukset .gb-carousel {
		padding-left: 44px;
		padding-right: 44px;
	}
}