/*
Theme Name: TalTeam
Author: TalTeam
Description: Custom block theme for TalTeam IT Solutions.
Version: 1.0.22
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: talteam
*/

/* =============================================
   Smooth scrolling
   ============================================= */

html,
body,
.wp-site-blocks {
	scroll-behavior: smooth;
}

/* =============================================
   Global link styles
   ============================================= */

a:not(.wp-element-button) {
	text-decoration: none;
}

a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--secondary);
}

/* Scoped override: add the "cta-hover-blue" Additional CSS Class to a block
   to make its links hover to Primary Navy instead of the site-wide orange. */
.cta-hover-blue a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* =============================================
   Buttons
   ============================================= */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: #c46e1a !important;
}

/* Button style variations (registered in functions.php + theme.json) need
   higher specificity than the default hover rule above to win against it. */
.wp-block-button.is-style-solid-white .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--light-grey) !important;
}

.wp-block-button.is-style-primary .wp-block-button__link:hover {
	background-color: #11223e !important;
}

/* =============================================
   Navigation
   ============================================= */

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #183059;
	font-weight: 700;
	text-decoration: none;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #E37F26;
}

.site-header .wp-block-navigation-item__content[href="#"] {
	cursor: default;
}

.site-header .wp-block-navigation-item__content[href="#"]:hover {
	color: #183059;
}

.site-header .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border-top: 3px solid #E37F26;
	border: 1px solid #efefef;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	min-width: 220px;
	padding: 8px 0;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 20px;
	display: block;
	font-weight: 400;
	color: #183059;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: #efefef;
	color: #E37F26;
}

.site-header .wp-block-navigation__submenu-icon svg {
	stroke: #183059;
}

.site-header .wp-block-navigation__submenu-container .nav-submenu-heading .wp-block-navigation-item__content {
	font-weight: 700;
	cursor: default;
}

.site-header .wp-block-navigation__submenu-container .nav-submenu-heading .wp-block-navigation-item__content:hover {
	background-color: transparent;
	color: #183059;
}

/* =============================================
   Service Cards
   ============================================= */

.service-card .wp-block-cover {
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.service-card .wp-block-cover:hover {
	transform: translateY(-4px);
}

/* =============================================
   Team Cards
   ============================================= */

.team-card {
	text-align: center;
}

.team-card .wp-block-image img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* =============================================
   Why TalTeam rows — icon bump on hover
   ============================================= */

.tt-why-row .wp-block-outermost-icon-block {
	transition: transform 0.25s ease;
}

.tt-why-row:hover .wp-block-outermost-icon-block,
.wp-block-column:hover .tt-why-row .wp-block-outermost-icon-block {
	transform: translateY(-6px);
}

/* =============================================
   Icon Block
   ============================================= */

.wp-block-outermost-icon-block svg {
	fill: currentColor;
}

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

.site-footer .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 15px;
}

.site-footer .wp-block-navigation a:hover {
	color: #E37F26;
}

.site-footer .wp-block-paragraph a:hover {
	color: var(--wp--preset--color--primary) !important;
}

.site-footer .wp-block-social-links .wp-social-link {
	background-color: #E37F26;
}

/* =============================================
   Utility
   ============================================= */

.has-orange-accent::after {
	content: ' +';
	color: #E37F26;
}

/* =============================================
   Service Card Pattern
   ============================================= */

.tt-service-card {
	--label-height: 72px;
	position: relative;
	width: 100%;
	min-width: 101%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	display: block;
}

.tt-service-card__bg {
	position: absolute;
	/* bleeds past the card edge (clipped by overflow:hidden) so the 2px navy
	   frame baked into some card photos is cropped and doesn't mask the
	   rounded top corners */
	inset: -3px;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
	will-change: transform;
}

.tt-service-card:hover .tt-service-card__bg {
	transform: scale(1.05);
}

.tt-service-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(227, 127, 38, 0.9);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transform: translateY(calc(100% - var(--label-height)));
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.tt-service-card:hover .tt-service-card__overlay {
	transform: translateY(0);
}

.tt-service-card__label {
	height: var(--label-height);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	flex-shrink: 0;
}

.tt-service-card__title {
	color: #ffffff;
	font-family: Aileron, sans-serif;
	font-weight: 700;
	font-size: 22px;
	margin: 0;
	line-height: 1.2;
	text-align: center;
}

.tt-service-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px;
	text-align: left;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.tt-service-card:hover .tt-service-card__content {
	opacity: 1;
	transition: opacity 0.3s ease 0.2s;
}

.tt-service-card__description {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

.tt-service-card__link {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tt-service-card__link:hover,
.tt-service-card__link:hover .tt-service-card__plus {
	opacity: 1;
	color: var(--wp--preset--color--primary) !important;
}


.tt-service-card__plus {
	font-family: Aileron, sans-serif;
	font-weight: 300;
	font-size: 36px;
	line-height: 0;
	position: relative;
	top: -0.08em;
	color: #ffffff;
}

/* =============================================
   Fluid logo
   ============================================= */


/* =============================================
   Flip Card pattern
   ============================================= */

.flip-card {
	perspective: 1000px;
	aspect-ratio: 1;
	width: 100%;
}

.flip-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

.flip-card:hover .flip-card__inner {
	transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 6px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.flip-card__front {
	background-color: var(--wp--preset--color--secondary);
}

.flip-card__front::after {
	content: '+';
	position: absolute;
	bottom: -8px;
	right: 4px;
	font-family: var(--wp--preset--font-family--aileron);
	font-size: 72px;
	font-weight: 600;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

.flip-card__back {
	background-color: var(--wp--preset--color--light-grey);
	transform: rotateY(180deg);
}

.flip-card__back .tt-service-card__link {
	color: var(--wp--preset--color--primary);
}

.flip-card__back .tt-service-card__link .tt-service-card__plus {
	color: var(--wp--preset--color--primary);
}

.flip-card__back .tt-service-card__link:hover,
.flip-card__back .tt-service-card__link:hover .tt-service-card__plus {
	color: var(--wp--preset--color--secondary);
}

.flip-card__heading {
	color: #ffffff !important;
	text-align: center !important;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--aileron) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
}

.flip-card__subheading {
	color: var(--wp--preset--color--primary) !important;
	text-align: center !important;
	margin: 0 0 8px !important;
	font-family: var(--wp--preset--font-family--aileron) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
}

.flip-card__front-subheading {
	color: rgba(255, 255, 255, 0.85) !important;
	text-align: center !important;
	margin: 8px 0 0 !important;
	padding-top: 8px !important;
	border-top: 2px solid rgba(255, 255, 255, 0.4) !important;
	font-family: var(--wp--preset--font-family--aileron) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	width: 100%;
}

.flip-card__text {
	color: var(--wp--preset--color--primary) !important;
	text-align: center !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	padding-top: 8px !important;
	border-top: 2px solid var(--wp--preset--color--secondary) !important;
	width: 100%;
}

/* =============================================
   Floating Download Button
   ============================================= */

.tt-floating-download-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1000;
	margin: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.tt-floating-download-btn.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* =============================================
   Team Member Card pattern
   ============================================= */

.tt-member-card {
	display: table;
	max-width: 100%;
}

.tt-member-card .wp-block-image,
.tt-member-card .wp-block-image img {
	width: 100%;
}

/* =============================================
   Gradient Info Card pattern
   ============================================= */

.gradient-info-card {
	position: relative;
	cursor: default;
	align-items: flex-start !important;
}

.gradient-info-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: transparent;
	transition: background 0.35s ease;
	pointer-events: none;
}

.gradient-info-card:hover::before {
	background: rgba(0, 0, 0, 0.07);
}

.gradient-info-card::after {
	content: '+';
	position: absolute;
	bottom: 8px;
	right: 12px;
	font-family: var(--wp--preset--font-family--aileron);
	font-size: 72px;
	font-weight: 600;
	line-height: 1;
	color: rgba(255, 255, 255, 1);
	pointer-events: none;
}

/* =============================================
   Icon Heading Card pattern
   ============================================= */

.wp-block-outermost-icon-block svg,
.wp-block-outermost-icon-block .icon-container {
	transition: color 0.2s ease, fill 0.2s ease;
}

/* Headings inside the icon heading card */
.talteam-icon-heading-card h4,
.talteam-icon-heading-card h5 {
	transition: color 0.2s ease;
}

.talteam-icon-heading-card:hover .wp-block-outermost-icon-block svg {
	color: var(--wp--preset--color--secondary) !important;
	fill: var(--wp--preset--color--secondary) !important;
}

.talteam-icon-heading-card:hover h4,
.talteam-icon-heading-card:hover h5 {
	color: var(--wp--preset--color--secondary) !important;
}

/* =============================================
   Industry Card pattern
   ============================================= */

.wp-block-group.has-secondary-background-color {
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-layout-grid .wp-block-group.has-secondary-background-color:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}


.is-layout-grid .wp-block-group.has-secondary-background-color .wp-block-outermost-icon-block svg,
.is-layout-grid .wp-block-group.has-secondary-background-color .wp-block-outermost-icon-block .icon-container {
	transition: color 0.25s ease, fill 0.25s ease;
}

.is-layout-grid .wp-block-group.has-secondary-background-color:hover .wp-block-outermost-icon-block svg {
	color: var(--wp--preset--color--primary) !important;
	fill: var(--wp--preset--color--primary) !important;
}

/* =============================================
   Our Thinking Content Card pattern
   ============================================= */

.our-thinking-card {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.our-thinking-card .wp-block-image {
	display: block;
	overflow: hidden;
	border-radius: 6px;
}

.our-thinking-card .wp-block-image > a {
	display: block;
	line-height: 0;
}

/* Stretch the card's link over the whole card so any part of it is clickable.
   Note: the image/anchor can no longer use overflow/clip-path to contain the
   hover-zoom below, since that would also clip this pseudo-element down to
   just the thumbnail — corner rounding + zoom containment moved to the img
   itself instead. */
.our-thinking-card .wp-block-image > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.our-thinking-card .wp-block-image img {
	border-radius: 6px;
	transition: transform 0.4s ease;
	display: block;
}

.our-thinking-card:hover .wp-block-image img {
	transform: scale(1.06);
}

/* =============================================
   Remove gap between header and first block
   ============================================= */

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

/* =============================================
   Remove gap between last block and footer
   ============================================= */

.wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

/* =============================================
   Case Study — disable text selection
   ============================================= */

.single-case_study * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* =============================================
   WPForms
   ============================================= */

.wpforms-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.wpforms-form .wpforms-field:first-child {
	padding-top: 0 !important;
}

/* =============================================
   Before & After Comparison Table
   ============================================= */

.tt-comparison-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 20px;
	border: 2px solid var(--wp--preset--color--secondary);
	border-radius: 6px;
	overflow: hidden;
}

.tt-comparison-table thead tr {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.tt-comparison-table thead th {
	padding: 14px 20px;
	text-align: left;
	font-family: var(--wp--preset--font-family--aileron);
	font-weight: 700;
	font-size: 20px;
	color: #ffffff;
	border-right: 2px solid var(--wp--preset--color--secondary);
}

.tt-comparison-table thead th:last-child {
	border-right: none;
}

.tt-comparison-table tbody tr {
	border-bottom: 2px solid var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--light-grey);
}

.tt-comparison-table tbody tr:last-child {
	border-bottom: none;
}

.tt-comparison-table tbody td {
	padding: 14px 20px;
	color: var(--wp--preset--color--primary);
	border-right: 2px solid var(--wp--preset--color--secondary);
}

.tt-comparison-table tbody td:last-child {
	border-right: none;
}

.tt-comparison-table tbody td:first-child {
	font-weight: 600;
}

/* =============================================
   Animated Counter Pattern
   ============================================= */

.tt-counter-card {
	background: #ffffff;
	border-top: 4px solid var(--wp--preset--color--secondary);
	border-radius: 6px;
	padding: 40px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.tt-counter {
	display: block;
	font-family: var(--wp--preset--font-family--aileron);
	font-size: 32px;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	line-height: 1.1;
}

.tt-counter-label {
	font-family: var(--wp--preset--font-family--aileron);
	font-size: 26px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.tt-counter-desc {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 20px;
	color: #555;
	margin: 0;
}


/* =============================================
   Responsive
   ============================================= */

@media (max-width: 781px) {
	.site-header {
		flex-wrap: wrap;
		gap: 16px;
	}
}

/* =============================================
   Header: responsive Contact Us button + nav
   ============================================= */

/* Desktop: hide "Contact Us" nav link — the button handles it */
.site-header .nav-contact-mobile-link {
	display: none;
}

/* ---- Tablet & mobile (≤1024px) ---- */
@media (max-width: 1024px) {

	/* Hide the standalone Contact Us button */
	.site-header .nav-contact-btn {
		display: none;
	}

	/* Reveal Contact Us inside the hamburger menu */
	.site-header .nav-contact-mobile-link {
		display: list-item;
	}

	/* Stretch the nav to fill remaining header space so the
	   hamburger button can be pushed to the far right */
	.site-header nav.wp-block-navigation {
		flex: 1;
		justify-content: flex-end !important;
	}

	/* Show the hamburger button */
	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	/* Hide the inline nav overlay when the menu is closed.
	   :not(.is-menu-open) means it still appears when hamburger is clicked. */
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* ---- Narrow desktop (1025px–1200px): the nav gap eases from 24px at
   1025px up to the full 64px set in the header block at ~1160px, so the
   menu items and Contact Us button don't wrap. The clamp() is a straight
   line through (1025px, 24px) and (1160px, 64px): slope = 40 / 135. ---- */
@media (min-width: 1025px) and (max-width: 1200px) {
	.site-header .wp-block-navigation__container {
		gap: clamp(24px, 29.63vw - 279.6px, 64px);
	}
}

/* =============================================
   Cybersecurity & Governance — GRC Services Grid
   7 square boxes, wrapping 4 + 3 and centered
   ============================================= */
.grc-services-grid {
	/* caps the row at 4 boxes (200px) + 3 gaps (32px) so a 5th
	   box always wraps, even on very wide viewports */
	max-width: 896px;
	margin-left: auto;
	margin-right: auto;
}

.grc-service-box {
	width: 200px;
	aspect-ratio: 1 / 1;
}

/* =============================================
   Scrolling Gallery (Public Sector — Agencies We Serve)
   Cancels the 32px root side padding so images scroll to the page edge
   ============================================= */
.is-layout-constrained > .wp-block-talteam-scrolling-gallery-block {
	/* !important + max-width reset needed to beat the constrained layout's
	   forced auto margins and content-width cap */
	margin-left: -32px !important;
	margin-right: -32px !important;
	max-width: none;
}

@media (max-width: 600px) {
	.grc-service-box {
		width: 50vw;
	}

	/* the heading's font-size is set as an inline style by the block
	   editor, so !important is needed to override it here */
	.grc-service-box h3 {
		font-size: 26px !important;
	}
}