/*!
Theme Name: Build It Intl
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: buildit-wm
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Build It Intl is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# WordPress Gallery
--------------------------------------------------------------*/

.gallery {
	display: grid;
	gap: 8px;
	margin: 1.5rem 0;
}

.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

.gallery-item {
	margin: 0;
	overflow: hidden;
	border-radius: 0.375rem;
}

.gallery-icon {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.gallery-icon a:hover img {
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 {
		grid-template-columns: repeat(3, 1fr);
	}
	.gallery-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.gallery {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Contact Form 7 — contact page styling
--------------------------------------------- */
.wpcf7 {
	max-width: 760px;
	margin: 0 auto;
}

.wpcf7 form > p { margin: 0; }

.wpcf7 .row { --bs-gutter-y: 1rem; }

.wpcf7 label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: #1a1a1a;
}

.wpcf7 .form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.625rem 0.85rem;
	font-size: 1rem;
	line-height: 1.4;
	color: #212529;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	transition: border-color .15s ease, box-shadow .15s ease;
	margin-top: 0.25rem;
}

.wpcf7 textarea { min-height: 140px; resize: vertical; }

.wpcf7 .form-control:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 0;
	border-color: #86b7fe;
	box-shadow: 0 0 0 0.2rem rgba(13,110,253,.15);
}

/* Checkbox groups — gap between box and label */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-acceptance,
.wpcf7 .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.25rem;
}

.wpcf7 .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.wpcf7 .wpcf7-list-item input[type="checkbox"],
.wpcf7 .wpcf7-list-item input[type="radio"] {
	width: 1.05rem;
	height: 1.05rem;
	margin-right: 0.5rem;
	accent-color: #0d6efd;
	flex-shrink: 0;
}

.wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item-label { padding-left: 0; }

/* Submit button */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	display: inline-block;
	padding: 0.65rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background-color: #0d6efd;
	border: 1px solid #0d6efd;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
	margin-top: 0.5rem;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	background-color: #0b5ed7;
	border-color: #0a58ca;
}

/* Validation / response messages */
.wpcf7 .wpcf7-not-valid-tip {
	color: #dc3545;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.wpcf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.375rem;
	font-size: 0.95rem;
}

/* Spinner alignment */
.wpcf7 .wpcf7-spinner { vertical-align: middle; margin-left: 0.5rem; }

/*--------------------------------------------------------------
# Content Sections — responsive embeds (video / image)
--------------------------------------------------------------*/

/*
 * theme.min.css ships a stray `.ratio { display:inline-block; width:10rem; ... }`
 * placeholder rule that overrides Bootstrap's responsive-embed `.ratio` utility,
 * collapsing video embeds (Full Width — Video Embed layout) to a tiny ~160px box.
 * Scope the fix to the content-section video block only, so we don't touch any
 * other `.ratio` on the site (plugins, editor content, etc.). `.content-section-video
 * .ratio` (0,2,0) also out-specifies the stray `.ratio` (0,1,0), so it wins
 * regardless of stylesheet load order — no !important needed.
 */
.content-section-video .ratio {
	display: block;
	width: 100%;
	background-color: transparent;
	border: 0;
}

/* Full-width image section: keep the figure block-level and edge-to-edge of its column */
.content-section-image .figure {
	display: block;
	width: 100%;
	margin-bottom: 0;
}

.content-section-image .figure img {
	width: 100%;
	height: auto;
}

/*
 * Captions (image + video). text-muted / figure-caption are too low-contrast on the
 * dark coloured backgrounds (Primary, Dark, Success), so lift them when the section
 * is rendered with white text.
 */
.cs-caption {
	color: var(--bs-secondary-color);
}

.text-white .cs-caption {
	color: rgba(255, 255, 255, 0.75) !important;
}

/*--------------------------------------------------------------
# Solutions cards — keep media inside the white card
--------------------------------------------------------------*/
/*
 * Card descriptions are WYSIWYG, so an editor can drop a full-size image
 * (e.g. a 300px "size-medium" upload) straight into a card. Those <img>
 * tags ship with fixed width/height attributes and no responsive class,
 * so on narrow columns they spill past the white card. Cap them to the
 * card width and let height follow. Scoped to the solutions section, and
 * the 64px icon/image thumbnails keep their own inline sizing (inline
 * styles out-rank this rule), so only oversized in-content images shrink.
 */
.solutions-section .card-body img {
	max-width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Full-width pull-quote — a single, centered quote mark
--------------------------------------------------------------*/
/*
 * theme.min.css decorates every <blockquote> with a top-left quote icon
 * (blockquote::before) and reserves left padding for it. The full-width quote
 * layout already renders its own centered quote mark, so two quotes appear.
 * Suppress the theme icon for this layout only and even out the padding so the
 * centered text/quote sit truly centered. Scoped to .content-section-quote so
 * other blockquotes (e.g. "Display as Quote" sections) are untouched.
 */
.content-section-quote blockquote::before {
	content: none;
}

.content-section-quote blockquote {
	padding-left: 24px;
}

/*--------------------------------------------------------------
# About Facts figures — big count-up number with a label beneath
--------------------------------------------------------------*/
/*
 * The Number field renders on its own line above the headline, which becomes
 * a smaller label. counters.js counts the figure up from zero when the section
 * scrolls into view; the width is locked to the final value at that point so
 * the growing digits never nudge the layout.
 */
.bit-fact-number {
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--bs-heading-color);
	font-variant-numeric: tabular-nums;
}

.bit-fact-label {
	font-size: 1.125rem;
	margin-top: 0.5rem;
}