/*
Theme Name: Commerce7
Theme URI: https://commerce7.com
Author: URSA6
Author URI: https://commerce7.com
Description: Commerce7 marketing site block theme built on the URSA6 platform.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.2.7
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: commerce7-block-theme
Tags: full-site-editing, block-patterns, accessibility-ready, translation-ready, editor-style, featured-images, wide-blocks
*/

/* set basic css view transition */
@view-transition {
	navigation: auto;
}

/*
 * Transparent header hero offset — tune per site when header padding, logo, or nav
 * layout changes. Keep in sync with TransparentHeader::HEADER_HEIGHT (critical CSS).
 */
 :root {
	--commerce7-header-height: 129px;
}

/* CSS Reset
---------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold, 600);
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium, 1.5rem);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--custom-body-grey, #4a4a4a);
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

img,
figure {
	max-width: 100%;
	height: auto;
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--contrast-800, #121212);
	border-radius: 0.35rem;
	border: solid 1px var(--wp--preset--color--borders, #d7d8e0);
	padding: 0.5em 1em;
	font-size: var(--wp--preset--font-size--small, 1rem);
	background-color: var(--wp--preset--color--base, #fff);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.02),
		0 0.5px 1px rgba(0, 0, 0, 0.04);
}

input,
textarea,
select {
	&:focus-visible {
		outline-color: var(--wp--preset--color--contrast-800, #121212);
		outline-offset: 1px;
	}
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat;
	background-size: 16px;
	background-position: calc(100% - 12px) 50%;
	padding-right: 2.2em;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--custom-body-grey, #4a4a4a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	opacity: 0.75;
}

/* Helper styles
---------------------------------------------------------------------------- */

:root :where(.wp-block-post-template h2) {
	font-size: var(--wp--preset--font-size--large) !important;
}

.wp-block-post-title :where(a) {
	color: var(--wp--preset--color--contrast-800);
}

.wp-block-post-title :where(a):hover {
	color: var(--wp--preset--color--custom-accessible-blue);
}

#main-content:has(.alignfull:last-child) {
	margin-block-end: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap-style: pretty;
	overflow-wrap: break-word;
}

h1, h2 {
	em {
		color: var(--wp--preset--color--custom-accessible-blue);
		font-family: var(--wp--preset--font-family--roboto-serif-120-pt) !important;
		font-style: italic;
		font-weight: 300;
		}
}

.nowrap {
	text-wrap: nowrap!important;
}



.wp-site-blocks {
	>* {
		margin-block-start: var(--wp--preset--spacing--3-x-large);
		margin-block-end: var(--wp--preset--spacing--3-x-large);
	}
}

.has-commerce7-transparent-header .wp-site-blocks>* {
	margin-block-start: 0;
}

.page-template-page-no-footer .wp-site-blocks>*,
.page-template-page-no-header-no-footer .wp-site-blocks>* {
	margin-block-start: 0;
	margin-block-end: 0;
}

a.more-link {
	display: block;
}

*:not(.wp-block-code)>code {
	background-color: var(--wp--preset--color--brand-depth, #f7f7fb);
	padding: 3px 5px;
	position: relative;
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

.wp-block-categories {
	position: relative;
}

.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

.single {
	.post-meta {
		align-items: center;

		>*+*::before {
			content: "·";
			margin-inline-end: 0.75rem;
			opacity: 0.65;
		}
	}

	.wp-block-group:has(> .post-meta:empty) {
		display: none;
	}
}

.wp-block-group:empty:has(+ .comment-respond) {
	display: none;
}

.row-logos>figure {
	flex-shrink: 1 !important;
}

/* Sticky header — admin bar offset only when logged in. */

body:not(.wp-admin) header:has(> .is-position-sticky:not(.commerce7-header-transparent)) {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar:not(.wp-admin) header:has(> .is-position-sticky:not(.commerce7-header-transparent)) {
	top: var(--ursa6-admin-bar-offset, var(--wp-admin--admin-bar--height, 0px));

	@media (max-width: 600px) {
		top: 0;
	}
}

/* Menu helpers */

.wp-block-navigation {
	gap: 0.5em;

	.wp-block-navigation-item {
		padding: 5px;
	}
}

.wp-block-navigation .button {
	.wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--small);
		font-style: normal;
		font-weight: 400;
		padding-top: 0.75em;
		padding-right: 1.5em;
		padding-bottom: 0.75em;
		padding-left: 1.5em;
		border-radius: 999px;
		color: var(--wp--preset--color--base);
		text-decoration: none;
	}
}

/* Desktop submenu viewport overflow (scoped by ursa6-nav-is-mobile from navigation-submenu-overflow.js). */
.wp-block-navigation:not(.ursa6-nav-is-mobile) {
	.wp-block-navigation-item.ursa6-submenu-align-right>.wp-block-navigation__submenu-container {
		left: auto;
		right: calc(100% * -3);
		max-width: calc(100vw - 1.5rem);
	}

	.wp-block-navigation-item.ursa6-submenu-flyout-left>.wp-block-navigation__submenu-container {
		left: auto;
		right: 100%;
	}
}

.wp-block-site-logo .custom-logo-link {
	width: 100%;
}


/* Search
--------------------------------------------- */

.wp-block-search__button-only {
	max-width: 60rem;

	&:not(.wp-block-search__searchfield-hidden) {
		.wp-block-search__inside-wrapper {
			gap: 10px;
		}
	}
}

.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
    overflow: visible;
}

.wp-block-post-terms__prefix {
	margin-right: var(--wp--preset--spacing--2-xs);
}

.wp-block-post-terms__postfix {
	margin-left: var(--wp--preset--spacing--2-xs);
}

/* Table
--------------------------------------------- */

.wp-block-table {
	table {
		background: var(--wp--preset--color--base, #fff);
		border-radius: 0.35rem;
		border: solid 1px var(--wp--preset--color--borders, #d7d8e0);
		font-size: var(--wp--preset--font-size--x-small, 0.875rem);
		overflow: hidden;
	}

	&.is-style-stripes {
		border-bottom: none;

		tbody tr:nth-child(odd) {
			background-color: var(--wp--preset--color--brand-depth, #f7f7fb);
		}
	}

	td,
	th,
	thead {
		border: none;
		border-bottom: solid 1px var(--wp--preset--color--borders, #d7d8e0);
	}

	th,
	tfoot {
		text-align: left;
		background-color: var(--wp--preset--color--brand-depth, #f7f7fb);
	}

	td,
	th {
		padding: 0.8em 1em;
	}

	tfoot {
		border-top: solid 1px var(--wp--preset--color--borders, #d7d8e0);

		td {
			border-bottom: none;
		}
	}
}

/* Columns
--------------------------------------------- */

.wp-block-columns.is-layout-flex {
	justify-content: space-between;
}

/* Empty columns hidden when stacked; desktop restore is in configured breakpoint inline CSS. */
.wp-block-column:empty {
	display: none;
}


/* Groups and Grids
--------------------------------------------- */

.wp-block-group:has(
  [data-ursa6-motion-preset="fade-up"],
  [data-ursa6-motion-preset="fade-down"],
  [data-ursa6-motion-preset="slide-left"],
  [data-ursa6-motion-preset="slide-right"],
  [data-ursa6-motion-preset="zoom-in"]
) {
  overflow: hidden;
}


/* Layout
--------------------------------------------- */

.narrow-content {
	--wp--style--global--content-size: 1200px;
}

.narrow-left {
	max-width: 1200px;
	margin-left: 0;
}

.post-template-single-data-drop-embed .wp-site-blocks {
	>* {
			margin-block-start: 0;
			margin-block-end: 0;
	}
}


/* Footer
--------------------------------------------- */

.has-base-dark-background-color .wp-block-navigation a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base);
}

footer.wp-block-template-part {
	margin-bottom: 0;
}

footer {
	.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-item__content {
		background-repeat: no-repeat;
    background-position: bottom left;
    background: linear-gradient(var(--wp--preset--color--base) 0 0) calc(100% - var(--p, 0%)) / var(--p, 0%) no-repeat;
    background-position-y: bottom;
    background-size: var(--p, 0%) 1px;
    padding-bottom: 1px;
    transition: .4s, background-position 0s, opacity .4s ease-in-out, color 0s;

		&:hover,
		&:focus-visible {
			text-decoration: none;
			background-size: 100% 1px;
			transition: .4s, background-position 0s;
			--p: 100%;
		}
	}

	.wp-block-navigation .wp-block-navigation-link.current-menu-item .wp-block-navigation-item__content {
		background-size: 100% 1px;
		--p: 100%;
	}
}


/* Color helpers when we have dark backgrounds on parent blocks
--------------------------------------------- */

.has-base-dark-background-color,
.has-dark-gradient-gradient-background,
.has-base-contrast-800-background-color {
	color: var(--wp--preset--color--base);
	--swiper-scrollbar-bg-color: rgba(255, 255, 255, 0.2);
	--swiper-scrollbar-drag-bg-color: rgba(255, 255, 255, 0.75);
	--color-button-background: var(--wp--preset--color--base);
	--color-button-background-hover: var(--wp--preset--color--contrast-800);
	--color-button-text: var(--wp--preset--color--contrast-800);
	--color-button-text-hover: var(--wp--preset--color--base);
	--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--base);
	--swiper-pagination-color: var(--wp--preset--color--brand);

	h1, h2, h3, h4, h5, h6 {
		color: var(--wp--preset--color--base);
	}
}

.has-base-dark-background-color .wp-block-button__link {
	color: var(--wp--preset--color--base);
}



/* Slider variables
--------------------------------------------- */

:root {
	--swiper-theme-color: var(--wp--preset--color--custom-accessible-blue);
	--swiper-navigation-color: var(--swiper-theme-color);
	--swiper-navigation-size: 2.75rem;
	/*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  
  */
}

:root {
	/*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

:root {
	/*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}

.swiper-button-prev,
.swiper-button-next {
	border: 1px solid var(--wp--preset--color--brand-300);
	border-radius: 5em;
	background-color: var(--wp--preset--color--brand-300);
	color: var(--wp--preset--color--contrast-800);
	transition: all var(--transition-duration) var(--transition-easing);

	svg {
		width: 60%;
		height: 60%;
		transition: transform var(--ursa6-transition-transform);
	}

	&:hover,
	&:focus-visible {
		background-color: var(--wp--preset--color--contrast-800);
		border-color: var(--wp--preset--color--contrast-800);
		color: var(--wp--preset--color--base);
	}
}

.swiper-button-prev:hover,
.swiper-button-prev:focus-visible {
	svg {
		transform: translateX(-2px);
	}
}

.swiper-button-next:hover,
.swiper-button-next:focus-visible {
	svg {
		transform: translateX(2px);
	}
}

.ursa6-slider--nav-below {
	.ursa6-slider__viewport {}
}

.ursa6-slider--nav-inside {

	.swiper-button-prev,
	.swiper-button-next {
		background-color: var(--wp--preset--color--base);
	}
}

.ursa6-slider--nav-sides {}


@media (min-width: 60rem) {
	.is-style-text-hero:has(+.ursa6-slider--nav-above) {
		padding-right: calc(var(--swiper-navigation-size, 44px) * 3);
	}
	
	.is-style-text-hero+.ursa6-slider--nav-above {
	
		.ursa6-slider__chrome.swiper-button-prev, .ursa6-slider__chrome.swiper-button-next {
			position: absolute;
			--swiper-navigation-top-offset: calc(var(--swiper-navigation-size, 44px) * -2);
			left: auto;
			margin: 0;
		}
	
		.ursa6-slider__chrome.swiper-button-next {
			right: 0;
		}
	
		.ursa6-slider__chrome.swiper-button-prev {
			right: calc(var(--swiper-navigation-size, 44px) + var(--wp--preset--spacing--2-xs));
		}
	
	}
}


/* Homepage testimonials
--------------------------------------------- */

.home-feedback-item-img img{
	aspect-ratio: 1/1;
	width: 100%;
	object-fit: cover;
	object-position: left top;
}
.home-feedback-item-img {
	mask-image: linear-gradient(90deg, rgba(1, 22, 35, 1) 70%, rgba(255, 255, 255, 0) 100%);
}