/*
Theme Name: Geelark Landing
Theme URI: https://geelark.com
Description: Block theme for the Geelark cloud phone landing page.
Version: 0.24.1
Requires at least: 7.1
Requires PHP: 8.4
Text Domain: geelark-landing
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}


.wp-block-list.is-style-plain {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-plain a {
	color: inherit;
	text-decoration: none;
}

/* Header */
.geelark-header {
	z-index: 100;
	box-shadow: 0 2px 12px rgba(26, 32, 44, 0.08);
}

.geelark-header .wp-block-navigation-item__content,
.geelark-login a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.geelark-header .wp-block-navigation-item__content:hover,
.geelark-login a:hover {
	color: var(--wp--preset--color--primary);
}

/* Keep every header item on one line */
.geelark-header .wp-block-navigation-item__content,
.geelark-header .wp-block-button__link,
.geelark-login,
.geelark-site-title {
	white-space: nowrap;
}

.geelark-header-actions {
	flex-shrink: 0;
}

/* Thin grey chevrons next to dropdown labels */
.geelark-header .wp-block-navigation__submenu-icon {
	width: 0.75rem;
	height: 0.75rem;
	margin-left: 0.4rem;
	color: var(--wp--preset--color--secondary);
}

.geelark-header .wp-block-navigation__submenu-icon svg {
	stroke-width: 1px;
}

.geelark-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 220px;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--surface) !important;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 32px rgba(26, 32, 44, 0.12);
}

.geelark-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
}

.geelark-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--tint);
}

/* Compact sign-up button */
.geelark-signup .wp-block-button__link {
	padding: 0.45rem 0.9rem;
	border-radius: 6px;
	font-weight: 500;
}

/* Language switcher: blue globe + label, menu opens towards the left */
.geelark-lang > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--primary);
}

.geelark-lang > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.geelark-lang .wp-block-navigation__submenu-container {
	left: auto !important;
	right: 0;
}

/* Show the text title only until a logo is uploaded */
.geelark-header .wp-block-site-logo + .geelark-site-title {
	display: none;
}

/* Temporary development mark next to the text title. Swap the file in
   --geelark-temp-logo, or upload a site logo, which hides the title. */
.geelark-header .geelark-site-title a {
	--geelark-temp-logo: url("assets/img/logo-temp.svg");
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.geelark-header .geelark-site-title a::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--geelark-temp-logo) center / contain no-repeat;
}

/* Tighter spacing on small laptops, so a wider logo still fits the full menu */
@media (min-width: 1240px) and (max-width: 1366px) {
	.geelark-header > .wp-block-group > .wp-block-group:first-child {
		gap: 1.5rem;
	}

	.geelark-main-nav {
		--wp--style--block-gap: 1rem;
		gap: 1rem;
	}

	.geelark-header-actions {
		gap: 1rem;
	}
}

/* Narrow phones: let the logo shrink instead of pushing the buttons out */
@media (max-width: 419px) {
	.geelark-header .wp-block-site-logo,
	.geelark-header .geelark-site-title {
		min-width: 0;
		flex-shrink: 1;
	}

	.geelark-header .wp-block-site-logo img,
	.geelark-header .geelark-site-title img {
		max-width: 100%;
		height: auto;
	}

	.geelark-header-actions {
		margin-left: 0.75rem;
	}
}

/* The full menu needs ~1240px; below that use the overlay toggle (core only
   switches at 600px). The dropdown card styles in landing.css start at 1240px. */
@media (min-width: 600px) and (max-width: 1239px) {
	.geelark-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.geelark-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 1239px) {
	/* Logo left, menu toggle pushed next to the sign-up button */
	.geelark-header > .wp-block-group > .wp-block-group:first-child {
		flex: 1;
		justify-content: space-between;
	}

	.geelark-header-actions {
		margin-left: 1rem;
	}
}

@media (max-width: 599px) {
	.geelark-header-actions .geelark-login,
	.geelark-lang {
		display: none;
	}
}

/* Logo, sized by height so any file keeps the header height: the theme default
   (geelark_landing_logo() in functions.php) and a logo uploaded in the Site Editor,
   which core renders at the block's fixed width instead. */
.wp-block-site-logo {
	--geelark-logo-height: 32px;
	min-width: 0;
	line-height: 0;
}

.geelark-header .wp-block-site-logo img,
.geelark-footer .wp-block-site-logo img {
	width: auto;
	max-width: 100%;
	height: var(--geelark-logo-height);
	object-fit: contain;
	object-position: left center;
}

.geelark-footer .wp-block-site-logo {
	--geelark-logo-height: 28px;
}

@media (max-width: 1239px) {
	.geelark-header .wp-block-site-logo {
		--geelark-logo-height: 28px;
	}
}

@media (max-width: 419px) {
	.geelark-header .wp-block-site-logo {
		--geelark-logo-height: 24px;
	}
}

/* Sticky header: the template-part wrapper is only as tall as the header,
   so stick the wrapper itself (offset by the admin bar when logged in). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}