/*
Theme Name: Neve Child
Theme URI: https://themeisle.com/themes/neve/
Template: neve
Author: ThemeIsle
Author URI: https://themeisle.com
Description: Neve Child Theme - modified by Gábor Farkas
Version: 1.0.1
*/

/* ============================================================
   Custom Footer
   ============================================================ */

.qms-footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	padding: 2rem 0 1rem;
}

.qms-footer-col {
	flex: 1 1 160px;
	text-align: center;
}

.qms-footer-heading {
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	text-transform: none;
}

.qms-footer-heading--legal {
	margin-top: 1.5rem;
}

.qms-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.qms-footer-links li {
	margin-bottom: 0.35rem;
}

.qms-footer-links li a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 0.95rem;
	display: block;
	padding: 4px 0;
	min-height: 24px;
}

.qms-footer-links li a:hover {
	color: #fff;
}

.qms-footer .social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.qms-footer .social li {
	display: inline-flex;
}

.qms-footer .social a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

.qms-footer .social a:hover {
	color: #fff;
}

.qms-footer p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	margin-bottom: 0;
}

.qms-footer p a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.qms-footer p a:hover {
	color: #fff;
}

.qms-footer-bottom {
	text-align: center;
	padding: 1rem 0 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.6);
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
	.qms-footer-grid {
		justify-content: center;
	}

	.qms-footer-col {
		flex: 1 1 calc(50% - 2rem);
		max-width: calc(50% - 1rem);
	}
}

/* Mobile: 1 column */
@media (max-width: 480px) {
	.qms-footer-col {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Book demo CTA block - force centering when Otter post-meta CSS is stale */
#wp-block-themeisle-blocks-advanced-columns-4b23d2a7 {
	justify-content: center;
}

/* GDPR checkbox – own row with clear visual separation */
#bookDemoForm .gdpr-row {
	margin-top: 18px;
	margin-bottom: 18px;
	padding-top: 14px;
	border-top: 1px solid #e0e0e0;
}

/* Nav logo: pad exactly to match old 86px bar height (75px logo + 5.5px each side = 86px) */
.builder-item--logo {
	padding-top: 5.5px !important;
	padding-bottom: 5.5px !important;
}
.hfg-slot.left .builder-item {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Nav header: pull only the logo slot toward the left corner, nav links stay in place.
   Only fires at >=1280px, where the centred header row already has a left gutter
   (~47px at 1280, growing with viewport) big enough to absorb the pull. A flat -40px
   is smaller than the narrowest gutter, so the 300px logo can never bleed off the
   left edge at any width. The old `-10vw - 10px` over-pulled and clipped the logo
   below ~1500px (and even slightly at 1400).
   Also locks the nav to a single row — at certain sub-breakpoints (e.g. 1344, 1423px)
   the -40px logo pull causes the nav slot to narrow just enough to wrap "Support" onto
   a second row. nowrap prevents this regardless of sub-pixel layout variation. */
@media (min-width: 1280px) {
	.header-main .hfg-slot.left {
		margin-left: -40px;
	}
	.header-main .nav-menu-primary ul.nav-ul,
	.header-main #nv-primary-navigation-main {
		flex-wrap: nowrap !important;
	}
}

/* Nav 1152–1279px: shrink logo + force single-row nav so links never wrap.
   Also correct the page top-margin: Neve hardcodes margin-top:70px on <main> for the
   sticky nav, which works when the nav is ≥70px. At 51px (160px logo) the 19px gap
   exposes the white body background. Set it to match the actual nav height. */
@media (min-width: 1152px) and (max-width: 1279px) {
	.site-logo img.neve-site-logo {
		width: 160px !important;
		height: auto !important;
	}
	.header-main .nav-menu-primary ul.nav-ul,
	.header-main #nv-primary-navigation-main {
		flex-wrap: nowrap !important;
	}
	main.neve-main {
		margin-top: 51px !important;
	}
}

/* Section label headings ("WHO IT'S FOR", "PLATFORM OVERVIEW", etc.)
   These small uppercase eyebrow labels were left-aligned. Center them and
   nudge the font size up from 20px to 22px. Targeting by column ID +
   has-medium-font-size so the large H2 titles in the same column are untouched.
   Using !important to override the WP-generated has-text-align-left rule. */
#wp-block-themeisle-blocks-advanced-column-e89c57c2 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-5d4cabe8 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-11bb65df .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-1ac31e93 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-23b47b86 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-22baec96 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-4ce39ffc .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-ff052d17 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-81c2d3a4 .wp-block-heading.has-medium-font-size,
#wp-block-themeisle-blocks-advanced-column-7ab4f75a .wp-block-heading.has-medium-font-size {
	text-align: center !important;
	font-size: 22px !important;
}

/* Flipcard interaction hint — tells users the card can be interacted with.
   Uses @media (hover: none) to switch copy between desktop and touch devices. */
.wp-block-themeisle-blocks-flip .o-flip-front::after {
	content: "hover for details";
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	pointer-events: none;
}
@media (hover: none) {
	.wp-block-themeisle-blocks-flip .o-flip-front::after {
		content: "tap for details";
	}
	/* Disable Otter's hover-triggered flip on touch — it fires on touchstart
	   then drops on touchend, causing a half-flip-and-back glitch.
	   JS in snap-scroll.js toggles .is-tapped instead. */
	.wp-block-themeisle-blocks-flip:hover.anim > .o-flip-inner {
		transform: none !important;
	}
	.wp-block-themeisle-blocks-flip.is-tapped.anim > .o-flip-inner {
		transform: var(--flip-anim);
	}
}

/* Mobile: flipcard compaction — 3 rows of 2 (2-2-2), reduced height */
@media (max-width: 768px) {
	/* Dissolve the two Gutenberg .wp-block-columns wrappers so all 6 cards
	   participate directly in the parent flex container → unified 2-col grid */
	#wp-block-themeisle-blocks-advanced-column-038887f3 {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 12px !important;
		align-items: flex-start !important;
	}
	#wp-block-themeisle-blocks-advanced-column-038887f3 > .wp-block-columns {
		display: contents !important;
	}
	/* Each card: 50% width → 2 per row */
	#wp-block-themeisle-blocks-advanced-column-038887f3 .wp-block-column {
		flex: 0 0 calc(50% - 6px) !important;
		max-width: calc(50% - 6px) !important;
	}
	/* Intro text block + tagline stay full-width */
	#wp-block-themeisle-blocks-advanced-columns-d2bf159d,
	#wp-block-themeisle-blocks-advanced-columns-2fc9d42a {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
	/* Reduce card height from Otter default 200px */
	#wp-block-themeisle-blocks-advanced-columns-d96b6b86 .wp-block-themeisle-blocks-flip {
		--height: 110px !important;
		--padding: 6px 10px !important;
	}
	#wp-block-themeisle-blocks-advanced-columns-d96b6b86 .o-flip-content h3 {
		font-size: 13px !important;
		line-height: 1.3 !important;
		margin: 0 !important;
	}
	#wp-block-themeisle-blocks-advanced-columns-d96b6b86 .o-flip-back p {
		font-size: 12px !important;
		line-height: 1.4 !important;
		margin: 0 !important;
	}
}

/* Mobile: badge/certification columns — override collapsedRows layout so badges wrap in a grid */
@media (max-width: 768px) {
	#wp-block-themeisle-blocks-advanced-column-7f1be397 .wp-block-themeisle-blocks-advanced-columns .innerblocks-wrap {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 12px;
	}
	#wp-block-themeisle-blocks-advanced-column-7f1be397 .wp-block-themeisle-blocks-advanced-columns .wp-block-themeisle-blocks-advanced-column {
		flex: 0 0 auto;
		width: auto;
		padding: 0;
	}
	#wp-block-themeisle-blocks-advanced-column-7f1be397 .wp-block-image {
		margin-bottom: 0;
	}
	/* Shrink badge images so more fit per row and total height drops */
	#wp-block-themeisle-blocks-advanced-column-7f1be397 img {
		width: 68px !important;
		height: 68px !important;
	}
}

/* WCAG 2.5.5: expand nav dropdown caret tap targets to 24×24px.
   Padding expands the hit area; negative margins pull it back so the
   surrounding nav layout is unchanged (no wider items, same visual gap).
   Element box = 7+10+7 = 24px on each axis; flow contribution stays 10px. */
#nv-primary-navigation-main .caret-wrap {
	padding: 7px !important;
	margin-top: -7px !important;
	margin-bottom: -7px !important;
	margin-right: -7px !important;
	margin-left: -2px !important; /* inline style is 5px; 7px padding − 2px = 5px visual gap */
}

/* Mobile: "Before you Choose" text + arrow — side by side, not stacked */
@media (max-width: 768px) {
	#wp-block-themeisle-blocks-advanced-columns-5815c6a7 > .innerblocks-wrap {
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}
	#wp-block-themeisle-blocks-advanced-column-39aed238 {
		flex: 1 1 auto !important;
		width: auto !important;
	}
	#wp-block-themeisle-blocks-advanced-column-937ac437 {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	#wp-block-themeisle-blocks-advanced-column-937ac437 .wp-block-image {
		margin-bottom: 30px !important;
	}
}

/* A11y: tap target fixes (Lighthouse target-size audit) */
.qms-footer-bottom a,
.qms-footer p a {
	display: inline-block;
	padding: 4px 0;
	min-height: 24px;
}
.cmplz-close {
	min-width: 44px !important;
	min-height: 44px !important;
}
.cmplz-link {
	display: inline-block !important;
	padding: 4px 0 !important;
	min-height: 24px !important;
}
#bookDemoForm input[type="checkbox"] {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	cursor: pointer;
	vertical-align: middle;
	flex-shrink: 0;
}
#bookDemoForm label a {
	display: inline-block;
	padding: 4px 2px;
	min-height: 24px;
	line-height: 1.2;
}