/*
Theme Name: Applab
Theme URI: https://applab.qa
Author: Applab
Description: Applab corporate site — Gutenberg block theme (FSE) rebuilt from the static Applab-Website source.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: applab
*/

/*
 * Some section eyebrows are emitted as core/paragraph blocks (<p class="eyebrow wp-block-paragraph">)
 * instead of the original's plain <span class="eyebrow">. WordPress's global styles set a base
 * font-size on .wp-block-paragraph that ties in specificity with .eyebrow's own 11px rule and wins
 * on cascade order (global styles print after our enqueued stylesheets) — this restores the original
 * 11px/letter-spacing regardless of which tag the eyebrow ends up on.
 */
.eyebrow.wp-block-paragraph {
	font-size: 11px;
	letter-spacing: 0.2em;
}

/*
 * parts/header.html's outer .nav wrapper and .nav-actions are core/group
 * blocks so they're editable as real blocks instead of one wp:html blob.
 * WordPress's global styles add `margin-block-start` between every child of
 * a `.is-layout-flow` container — harmless in normal document flow, but
 * these are a flex row/fixed bar, so that injected margin visibly misaligns
 * them. Reset it back to 0 so the original static-site layout is unaffected.
 * (.nav-mega/.drop/.drop-socials are core/navigation + core/social-links
 * now, which use "is-layout-flex" instead, not affected by this bug.)
 */
.nav.is-layout-flow > *,
.nav-actions.is-layout-flow > * {
	margin-block-start: 0;
}

/*
 * The original static-site .nav-mega{ display:flex; ... } never declared
 * flex-wrap, so it used CSS's own default (nowrap) — a single unbroken
 * row. core/navigation instead explicitly sets flex-wrap: wrap by default,
 * so the last item ("Careers") wraps onto a hidden/overlapping second line
 * whenever the row's natural width is close to the viewport width. Restore
 * the original single-row behavior above the theme's own mobile breakpoint
 * (max-width: 1100px, see applab-original.css's `.nav-mega{ display:none }`)
 * so it doesn't fight the intended hamburger collapse below that width.
 */
@media (min-width: 1101px) {
	.nav-mega {
		flex-wrap: nowrap;
	}
}

/*
 * patterns/partners-technology.php's Tier 2 grid uses a core/query +
 * core/post-template Query Loop. core/post-template always wraps its items
 * in its own <ul class="wp-block-post-template">, nested INSIDE core/query's
 * wrapper div — so applab-original.css's `.pt2-grid{ display:grid; ... }`
 * (applied to that outer div) was only grid-laying-out a single child (the
 * <ul> itself), while the actual .pt2-card items inside that <ul> stacked
 * via normal block flow. Move the grid onto the actual items' direct
 * parent instead.
 */
.pt2-grid > .wp-block-post-template {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pt2-grid > .wp-block-post-template > li {
	width: 100%;
	min-width: 0;
}
/* WordPress's global styles add `margin-block-start` between every child of
 * a `.is-layout-flow` container (here, each <li> under
 * .wp-block-post-template.is-layout-flow) — harmless in normal document
 * flow, but these are grid items now, so that injected margin misaligns
 * them vertically within their row. */
.wp-block-post-template.is-layout-flow > li {
	margin-block-start: 0;
}
.pt2-grid > .wp-block-post-template > li > .pt2-card {
	width: 100%;
	box-sizing: border-box;
}
@media (max-width: 960px) {
	.pt2-grid > .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 540px) {
	.pt2-grid > .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Shared button component — used across every homepage pattern. */
.applab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--14);
	text-decoration: none;
	transition: all 0.25s ease;
}

.applab-btn--blue {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--paper);
}

.applab-btn--blue:hover {
	background: var(--wp--preset--color--blue-dark);
	color: var(--wp--preset--color--paper);
}

.applab-btn--ghost-light {
	background: transparent;
	border: 1px solid rgb(255 255 255 / 35%);
	color: var(--wp--preset--color--paper);
}

.applab-btn--ghost-light:hover {
	border-color: var(--wp--preset--color--paper);
}

.applab-btn--ghost-dark {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.applab-btn--ghost-dark:hover {
	border-color: var(--wp--preset--color--ink);
}

.applab-btn--white {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.applab-btn__arrow::after {
	content: "\2192";
}

/* Shared "eyebrow" label used above every section heading. */
.applab-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--14);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--blue);
	margin: 0 0 var(--wp--preset--spacing--12);
}

.applab-eyebrow--paper {
	color: var(--wp--preset--color--paper);
}

/*
 * parts/header.html's mega-menu is built from core/navigation +
 * core/navigation-submenu + core/navigation-link (see ABP Revamp project's
 * header for the same convention) instead of raw core/group > ul > li > a,
 * so Gutenberg's own component owns the block, sidestepping the block-move
 * animation transform conflicts that raw static list markup hit in the
 * isolated Template Part editor.
 *
 * core/navigation-submenu's className attribute is applied by WordPress core
 * to BOTH the parent <li> (wp-block-navigation-submenu) and its own
 * <ul class="wp-block-navigation__submenu-container"> — reusing the
 * original .drop class here would therefore also match the <li> itself and
 * hide the whole nav-item (since .drop defaults to opacity:0). "submenu-panel"
 * is a new class scoped together with the structural
 * wp-block-navigation__submenu-container class, which only ever exists on
 * the actual dropdown panel, to avoid that collision.
 *
 * The top-level link/chevron styling (.nav-mega .nav-item > a, its ::after
 * chevron, .no-drop) and the dropdown link styling (padding/hover/etc.)
 * still work unmodified from applab-original.css, since those selectors are
 * tag-based ("a") and the rendered markup is still a real <a> element.
 */
.wp-block-navigation__submenu-container.submenu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	width: max-content;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 14px;
	box-shadow: 0 30px 60px rgba(10, 14, 40, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all 0.3s var(--ease);
	z-index: 200;
	display: block;
	counter-reset: dropnum;
}
.nav-mega .nav-item:hover .wp-block-navigation__submenu-container.submenu-panel,
.nav-mega .nav-item:focus-within .wp-block-navigation__submenu-container.submenu-panel,
.nav-mega .nav-item.is-open .wp-block-navigation__submenu-container.submenu-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.wp-block-navigation__submenu-container.submenu-panel.submenu-panel--wide {
	min-width: 320px;
}
.nav.is-dark .wp-block-navigation__submenu-container.submenu-panel {
	background: rgba(20, 28, 55, 0.96);
	border-color: rgba(255, 255, 255, 0.08);
}

/* Dropdown links — replicates the old .drop a styling; still tag-based so
 * it must be re-scoped under .submenu-panel instead of the removed .drop. */
.wp-block-navigation__submenu-container.submenu-panel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 12px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: all 0.25s var(--ease);
}
.wp-block-navigation__submenu-container.submenu-panel a:hover {
	background: var(--off);
	color: var(--blue);
	transform: translateX(2px);
}
.nav.is-dark .wp-block-navigation__submenu-container.submenu-panel a {
	color: rgba(255, 255, 255, 0.85);
}
.nav.is-dark .wp-block-navigation__submenu-container.submenu-panel a:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--cyan);
}

/* core/navigation-link only outputs a label span, no "01/02..." prefix —
 * fake the original <span class="n"> numbering with a CSS counter instead. */
.wp-block-navigation__submenu-container.submenu-panel > li > a::before {
	counter-increment: dropnum;
	content: counter(dropnum, decimal-leading-zero);
	font-family: var(--mono);
	font-size: 10px;
	color: var(--grey-2);
	letter-spacing: 0.12em;
	min-width: 22px;
}
.wp-block-navigation__submenu-container.submenu-panel > li > a:hover::before {
	color: var(--blue);
}
.nav.is-dark .wp-block-navigation__submenu-container.submenu-panel > li > a::before {
	color: rgba(255, 255, 255, 0.45);
}

/* Hide core/navigation's own chevron toggle button on desktop — the
 * .nav-mega .nav-item > a::after pseudo-element chevron already provides
 * the same affordance there. Below 600px this is the real (and only)
 * control for opening/closing a submenu in the mobile overlay, so it
 * stays visible. */
@media (min-width: 600px) {
	.wp-block-navigation-submenu__toggle {
		display: none !important;
	}
}

/* Social icons inside the "Connect with us" dropdown now come from
 * core/social-links rather than the custom applab/icon-link block, so
 * they need their own circle-button styling matching the old .drop-social. */
.drop-socials {
	display: flex !important;
	justify-content: center;
	gap: 8px !important;
	padding: 20px 18px 4px !important;
	border-top: 1px solid var(--line);
	margin-top: 8px;
}
/* Core's own default social-link CSS puts a brand-color background-color
 * directly on the <li class="wp-social-link-{service}"> element (via a
 * zero-specificity :where() selector) — the original static design's
 * .drop-social was a single <a> with no such wrapper, so that colorful
 * circle shows through behind our anchor styling unless reset here first. */
.drop-socials .wp-social-link {
	background: none !important;
	border-radius: 0;
}
.drop-socials .wp-block-social-link-anchor {
	display: grid;
	place-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--off);
	color: var(--ink);
	transition: all 0.25s var(--ease);
	padding: 0 !important;
}
.drop-socials .wp-block-social-link-anchor svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.drop-socials .wp-block-social-link-anchor:hover {
	background: var(--ink);
	color: #fff;
	transform: translateY(-2px);
}
.drop-socials .wp-social-link-linkedin .wp-block-social-link-anchor:hover {
	background: #0a66c2;
}
.drop-socials .wp-social-link-instagram .wp-block-social-link-anchor:hover {
	background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.drop-socials .wp-social-link-x .wp-block-social-link-anchor:hover {
	background: #000;
}
.nav.is-dark .drop-socials .wp-block-social-link-anchor {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
}
.nav.is-dark .drop-socials .wp-social-link-linkedin .wp-block-social-link-anchor:hover {
	background: #0a66c2;
	border-color: #0a66c2;
	color: #fff;
}
.nav.is-dark .drop-socials .wp-social-link-instagram .wp-block-social-link-anchor:hover {
	background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
	border-color: transparent;
	color: #fff;
}
.nav.is-dark .drop-socials .wp-social-link-x .wp-block-social-link-anchor:hover {
	background: #000;
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}