/* GoShaka theme — things theme.json cannot express. */

:root {
	--gs-primary: #17B1D7;
	--gs-secondary: #F97403;
	--gs-accent: #E0FBFB;
	--gs-leaf: 0 20px 0 20px;
}

/* ---------- Header ---------- */
.gs-header-wrap { position: sticky; top: 0; z-index: 100; }
.admin-bar .gs-header-wrap { top: 32px; }
.gs-header { min-height: 58px; }
.gs-logo { margin: 0; }
.gs-logo img { display: block; height: auto; }
.gs-nav .wp-block-navigation-item__content { color: #fff; }
.gs-nav .wp-block-navigation-item__content:hover { color: var(--gs-accent); }
.gs-nav .wp-block-navigation__submenu-container {
	background: #fff !important; color: #000 !important; border: 0 !important;
	border-radius: 0 0 0 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 8px 0; min-width: 220px !important;
}
.gs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #000; padding: 8px 18px; font-size: .95rem; }
.gs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--gs-primary); }
.gs-header .wc-block-mini-cart__button { color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 700; padding: 0; }
.gs-header .wc-block-mini-cart__badge { background: var(--gs-secondary); color: #fff; border: 0; }
.gs-header .wc-block-customer-account a { color: #fff; padding: 0; }
.gs-header .wc-block-customer-account svg { width: 22px; height: 22px; }
@media (max-width: 599px) {
	.gs-header .wc-block-mini-cart__amount { display: none; }
	.gs-logo img { width: 120px !important; }
}

/* ---------- Shape dividers (Elementor "wave-brush" etc.) ---------- */
.gs-has-shape { position: relative; }
.gs-shape {
	position: absolute; left: 0; width: 100%; height: var(--gs-shape-height, 40px);
	background: var(--gs-shape-color, #fff); pointer-events: none; z-index: 1;
	-webkit-mask: var(--gs-shape-mask) center / 100% 100% no-repeat;
	mask: var(--gs-shape-mask) center / 100% 100% no-repeat;
	--gs-shape-mask: url(../shapes/wave-brush.svg);
}
.gs-shape--top { top: -1px; }
.is-layout-constrained > .gs-shape, .gs-shape { max-width: none !important; margin: 0 !important; }
.gs-shape--bottom { bottom: -1px; transform: rotate(180deg); }
.gs-shape--flip { transform: scaleX(-1); }
.gs-shape--bottom.gs-shape--flip { transform: rotate(180deg) scaleX(-1); }
.gs-shape--wave-brush { --gs-shape-mask: url(../shapes/wave-brush.svg); }
.gs-shape--curve { --gs-shape-mask: url(../shapes/curve.svg); }
.gs-shape--mountains { --gs-shape-mask: url(../shapes/mountains.svg); }
.gs-shape--waves-pattern { --gs-shape-mask: url(../shapes/waves-pattern.svg); }
.gs-shape--triangle { --gs-shape-mask: url(../shapes/triangle.svg); }
.gs-shape--triangle-asymmetrical { --gs-shape-mask: url(../shapes/triangle-asymmetrical.svg); }
.gs-shape--tilt { --gs-shape-mask: url(../shapes/tilt.svg); }
.gs-has-shape:not(.wp-block-cover) > :not(.gs-shape) { position: relative; z-index: 2; }
/* In covers the shapes sit inside the inner container; position them against the cover itself. */
.wp-block-cover.gs-has-shape > .wp-block-cover__inner-container { position: static; }
.wp-block-cover .gs-shape { z-index: 3; }

/* ---------- Responsive visibility (Elementor hide_desktop / hide_tablet / hide_mobile) ---------- */
@media (min-width: 1025px) { .gs-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .gs-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .gs-hide-mobile { display: none !important; } }

/* ---------- Sections ---------- */
.gs-main > .wp-block-post-content > .alignfull:first-child { margin-top: 0; }
.wp-block-post-content > .alignfull { margin-top: 0; margin-bottom: 0; }
.gs-section { margin-top: 0; margin-bottom: 0; }
.wp-block-cover.gs-section { padding-left: clamp(20px, 4vw, 60px); padding-right: clamp(20px, 4vw, 60px); }
.gs-section .wp-block-columns { margin-bottom: 0; }
.wp-block-heading + .wp-block-heading { margin-top: 0; }
.has-text-align-center.wp-block-heading { text-wrap: balance; }

/* Subtitle under a title: Elementor used an orange secondary heading directly below. */
.gs-subtitle { color: var(--gs-secondary); font-weight: 600; margin-top: 0 !important; }

/* Images and video get the leaf radius like the original. */
.gs-rounded img, .gs-rounded iframe, .gs-rounded video, .wp-block-embed.gs-rounded .wp-block-embed__wrapper { border-radius: 16px; overflow: hidden; }

/* Check-mark lists (Elementor icon-list with check icons). */
ul.gs-checks { list-style: none; padding-left: 0; }
ul.gs-checks li { position: relative; padding-left: 32px; margin: .45em 0; }
ul.gs-checks li::before {
	content: ""; position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 50%;
	background: var(--gs-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
ul.gs-plain { list-style: none; padding-left: 0; }

/* Small cyan button (Elementor "Hoe het werkt" style) */
.wp-block-button.is-style-small .wp-block-button__link { font-size: .8rem; padding: .55em 1.2em .45em; background: var(--gs-primary); }
.wp-block-button.is-style-small .wp-block-button__link:hover { background: var(--gs-secondary); }

/* ---------- FAQ / toggles ---------- */
.wp-block-details summary {
	font-family: "Baloo 2", sans-serif; font-weight: 700; color: var(--gs-primary); text-transform: uppercase;
	font-size: 1.1rem; cursor: pointer; list-style: none; position: relative; padding-right: 2rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "▸"; position: absolute; right: 0; top: 0; transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(90deg); }
.wp-block-details > :not(summary) { margin-top: .75rem; }

/* ---------- Flip / icon / image boxes, testimonials ---------- */
.gs-box { background: #fff; border-radius: var(--gs-leaf); padding: 28px; box-shadow: 0 6px 24px rgba(23, 177, 215, .12); height: 100%; }
.gs-box .gs-box__back { color: #333; font-size: .9rem; }
.wp-block-quote.gs-testimonial { border: 0; background: #fff; border-radius: var(--gs-leaf); padding: 24px 28px; box-shadow: 0 6px 24px rgba(23, 177, 215, .12); }
.wp-block-quote.gs-testimonial cite { color: var(--gs-primary); font-weight: 700; font-style: normal; }

/* ---------- WooCommerce: product cards from [products] shortcodes ---------- */
.woocommerce ul.products li.product, .wc-block-product {
	text-align: center;
}
.woocommerce ul.products li.product a img { border-radius: 16px; background: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "Baloo 2", sans-serif; color: var(--gs-primary); font-size: 1.15rem; font-weight: 700;
}
.woocommerce ul.products li.product .price { color: #000; font-weight: 600; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link), .wp-block-button__link.add_to_cart_button {
	background: var(--gs-secondary) !important; color: #fff !important; border-radius: var(--gs-leaf) !important;
	font-family: "Baloo 2", sans-serif; font-weight: 700; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--gs-primary) !important; }
.woocommerce span.onsale, .wc-block-components-product-sale-badge { background: var(--gs-secondary); color: #fff; border-radius: var(--gs-leaf); }
.gs-product-row ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.gs-product-row ul.products::before, .gs-product-row ul.products::after { display: none !important; }
.gs-product-row ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* ---------- Forms ---------- */
.gs-form form { display: grid; gap: 14px; }
.gs-form label { display: block; font-weight: 600; font-size: .9rem; }
.gs-form input:not([type=checkbox]):not([type=radio]), .gs-form select, .gs-form textarea {
	display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-weight: 400;
	border: 1px solid rgba(23, 177, 215, .45); border-radius: 0 12px 0 12px; background: #fff;
}
.gs-form input:focus, .gs-form select:focus, .gs-form textarea:focus { outline: 2px solid var(--gs-primary); border-color: transparent; }
.gs-form__choice { font-weight: 400 !important; display: inline-flex !important; gap: 6px; margin-right: 16px; }
.gs-form__req { color: var(--gs-secondary); }
.gs-form__hp { position: absolute !important; left: -9999px !important; }
.gs-form__success, .gs-form__error { padding: 16px 20px; border-radius: var(--gs-leaf); font-weight: 600; }
.gs-form__success { background: var(--gs-accent); color: #0a6f88; }
.gs-form__error { background: #fff1e6; color: #a34c00; }
.gs-form p { margin: 0; }

/* ---------- Footer ---------- */
.gs-footer h4 { font-size: 1.35rem; margin: 1.2em 0 .3em; }
.gs-footer .wp-block-column > h4:first-child { margin-top: 0; }
.gs-footer-links { list-style: none; padding: 0; margin: 0; font-size: .8rem; }
.gs-footer-links li { margin: .25em 0; }
.gs-footer-links a, .gs-footer-text a { color: #000; font-weight: 400; }
.gs-footer-links a:hover { color: var(--gs-primary); }
.gs-footer-text { font-size: .8rem; margin: 0; line-height: 1.6; }
.gs-footer-text a.gs-footer-cta { color: var(--gs-secondary); text-decoration: underline; }
.gs-socials .wp-social-link { background: var(--gs-secondary) !important; }
.gs-socials .wp-social-link-facebook { background: #3b5998 !important; }
.gs-socials .wp-social-link-whatsapp { background: #25d366 !important; }
.gs-copyright { color: var(--gs-primary); font-size: .75rem; }
.gs-copyright strong { font-weight: 600; }

/* ---------- Video background covers ---------- */
.wp-block-cover .gs-bg-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform: scale(1.35); }

/* Images sized in % by Elementor: keep them centred in their column. */
.wp-block-image img[style*="%"] { margin-inline: auto; display: block; }

/* Background overlay image (Elementor background_overlay_image, e.g. the faint shaka watermark). */
.gs-bg-overlay { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: 1; max-width: none !important; margin: 0 !important; }
.wp-block-cover .gs-bg-overlay { z-index: 2; }

/* Blog articles: the old kit styled h2/h3 inside posts as heavy black Montserrat. */
.gs-article h2:not([class*="-color"]), .gs-article h3:not([class*="-color"]) { font-family: Montserrat, sans-serif; font-weight: 900; color: #000; letter-spacing: -0.4px; }
.gs-article h2:not([style*="font-size"]) { font-size: clamp(22px, 2vw, 28px); }
.gs-article h3:not([style*="font-size"]) { font-size: clamp(18px, 1.6vw, 22px); }
.gs-article a { color: var(--gs-secondary); }
.gs-hero .wp-block-post-date { text-align: center; }

/* Shop grid */
.gs-product-grid .wc-block-product { background: #fff; }
.gs-product-grid .wp-block-post-title a { color: var(--gs-primary); font-family: "Baloo 2", sans-serif; }
.gs-product-grid .wc-block-components-product-image img { border-radius: 16px; }
.gs-shop .woocommerce-breadcrumb, .gs-shop .wc-block-breadcrumbs { font-size: .8rem; }

/* ---------- Motion (replaces Elementor animations) ---------- */
@keyframes gs-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes gs-fadeInLeft { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes gs-fadeInRight { from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes gs-zoomIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.gs-anim { opacity: 0; }
.gs-anim.gs-in { animation-duration: 1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.gs-anim-fadeIn.gs-in { animation-name: gs-fadeIn; }
.gs-anim-fadeInUp.gs-in { animation-name: gs-fadeInUp; }
.gs-anim-fadeInLeft.gs-in { animation-name: gs-fadeInLeft; }
.gs-anim-fadeInRight.gs-in { animation-name: gs-fadeInRight; }
.gs-anim-zoomIn.gs-in { animation-name: gs-zoomIn; }
.editor-styles-wrapper .gs-anim { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gs-anim { opacity: 1 !important; animation: none !important; } }

/* Button hover effects (Elementor hover_animation skew-forward is used on almost every button). */
.wp-element-button, .wp-block-button__link { transition: transform .3s, background-color .3s; transform-origin: 0 100%; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: skew(-10deg); }
.gs-hover-grow .wp-block-button__link:hover { transform: scale(1.1); }
.gs-hover-skew .wp-block-button__link:hover { transform: skew(-10deg); transform-origin: center; }

/* ---------- Sliders ---------- */
.gs-slider { --gs-gap: 24px; position: relative; }
.gs-track {
	display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
	grid-auto-columns: calc((100% - (var(--gs-per) - 1) * var(--gs-gap)) / var(--gs-per));
	gap: var(--gs-gap) !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px;
}
.gs-track::-webkit-scrollbar { display: none; }
.gs-track > * { scroll-snap-align: start; width: auto !important; margin: 0 !important; min-width: 0; }
.wp-block-gallery.gs-track > figure { width: auto !important; }
ul.products.gs-track::before, ul.products.gs-track::after { display: none !important; }
@media (max-width: 767px) {
	.gs-track { grid-auto-columns: calc((100% - (var(--gs-per-m) - 1) * var(--gs-gap)) / var(--gs-per-m)); }
}
.gs-slider-nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.gs-arrow {
	width: 40px; height: 40px; border: 0; border-radius: 0 14px 0 14px; cursor: pointer;
	background: var(--gs-primary) center / 18px no-repeat; transition: background-color .2s;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.gs-arrow--prev { transform: scaleX(-1); }
.gs-arrow:hover { background-color: var(--gs-secondary); }
.gs-logos .gs-slider-nav, .gs-slider.gs-no-nav .gs-slider-nav { display: none; }
.wp-block-gallery.gs-track img { object-fit: contain !important; height: 100%; }

/* ---------- Rotating headline words ---------- */
.gs-rotate { display: inline-block; color: var(--gs-secondary); transition: opacity .35s, transform .35s; }
.gs-rotate--out { opacity: 0; transform: translateY(-.3em); }

/* ---------- Image accordion (Unlimited Elements image accordion) ---------- */
.gs-img-accordion { display: flex !important; gap: 12px; min-height: 460px; }
.gs-img-accordion > .wp-block-cover { flex: 1 1 0; min-height: 460px !important; transition: flex-grow .6s ease; border-radius: 0 24px 0 24px; overflow: hidden; margin: 0 !important; align-items: flex-end; }
.gs-img-accordion > .wp-block-cover:hover, .gs-img-accordion > .wp-block-cover:focus-within { flex-grow: 2.6; }
.gs-img-accordion .wp-block-cover__inner-container { text-align: left; }
.gs-img-accordion h3 { color: #fff !important; font-size: clamp(20px, 2vw, 30px) !important; margin: 0 0 .4em; }
@media (max-width: 767px) {
	.gs-img-accordion { flex-direction: column; min-height: 0; }
	.gs-img-accordion > .wp-block-cover { min-height: 260px !important; }
}

/* ---------- Background video ---------- */
.gs-bg-video { position: absolute !important; inset: 0; overflow: hidden; z-index: 0 !important; pointer-events: none; max-width: none !important; margin: 0 !important; opacity: 0; transition: opacity 1.2s; }
.gs-bg-video.is-playing { opacity: 1; }
.gs-bg-video iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; }
.wp-block-cover.gs-has-shape > .wp-block-cover__inner-container > :not(.gs-shape):not(.gs-bg-overlay):not(.gs-bg-video) { position: relative; z-index: 2; }
.wp-block-cover .wp-block-cover__background { z-index: 1; }