/*
Theme Name: Sure Surveys
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Sure Surveys emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suresurveys
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

@import url('assets/css/fontello.css?09072025');
@import url('assets/css/projects-cards.css?09072025');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap');

body {
	font-family: 'Roboto', sans-serif !important;
}

/* ==========================================================================
   CORE OVERRIDES
   ========================================================================== */
/* Reset body margin */
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root :where(.is-layout-flow) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

h2,
p,
li {
	margin-block-start: 1rem !important;
}

footer {
	margin: 0 !important;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration: none !important;
}

a:focus {
	outline: none !important;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation
	.wp-block-navigation-submenu
	.wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation
	.wp-block-navigation-item
	.wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation
	.wp-block-navigation-item
	ul.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */
.title-tip {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--secondary);
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	width: fit-content;
	text-align: center;
	font-weight: 600;
}

.title-tip.centre {
	margin: 0 auto;
}

.title-tip.text-white {
	color: white !important;
}

.contact-list li::before,
.services-list li::before {
	font-family: 'fontello';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.1rem;
	color: var(--wp--preset--color--secondary);
}

.wp-block-button {
	position: relative;
	transition: all 0.3s ease;
}

.wp-block-button .wp-element-button {
	border-radius: 1rem !important;
}

.wp-block-button .wp-element-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.2);
	opacity: 0;
	transition: opacity 0.2s ease;
	border-radius: 1rem;
}

.wp-block-button:hover .wp-element-button::before {
	opacity: 1;
}

/* ==========================================================================
   HEADER / NAVIGATION STYLES
   ========================================================================== */
header .logo img {
	width: 120px !important;
	height: auto;
}

header > :first-child {
	padding: 1rem 0 !important;
}

@media (min-width: 600px) {
	header .logo img {
		width: 140px !important;
	}
}

@media (min-width: 900px) {
	header .logo img {
		width: 180px !important;
	}
}

/* Hide the default SVG icon */
.wp-block-navigation__responsive-container-open svg {
	display: none !important;
}

/* Add custom icon using ::before pseudo-element */
.wp-block-navigation__responsive-container-open::before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 50px;
	background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%3Cg%20id%3D%22Menu%20%2F%20Hamburger_LG%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M3%2017H21M3%2012H21M3%207H21%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.wp-block-navigation__responsive-container-open svg {
	width: 40px !important;
}

.wp-block-navigation__responsive-container-open svg rect {
	height: 3px !important;
	width: 40px !important;
}

.wp-block-navigation-item a:focus {
	outline: none !important;
}

.has-modal-open.is-menu-open {
	background-color: var(--wp--preset--color--primary) !important;
}

.has-modal-open.is-menu-open .wp-block-navigation-item a {
	color: white !important;
	font-size: 1.6rem !important;
}

.has-modal-open.is-menu-open .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--secondary) !important;
}

.has-modal-open.is-menu-open .wp-block-navigation__container {
	width: 100% !important;
	align-items: flex-start !important;
}

.has-modal-open.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	display: block !important;
}

header .wp-block-navigation-item a {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600;
}

.wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--secondary) !important;
}

.wp-block-navigation-item a:focus {
	color: var(--wp--preset--color--secondary) !important;
	outline: none !important;
}

.wp-block-navigation__responsive-container-close {
	color: white !important;
}

.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container-open:focus {
	outline: none !important;
}

/* ==========================================================================
   HOME PAGE STYLES
   ========================================================================== */
.home-banner h1 {
	font-size: 2.5rem !important;
	line-height: 1.2;
	margin-bottom: 1rem;
}

.home-banner p {
	font-size: 1.25rem !important;
	line-height: 1.5;
	margin-bottom: 2rem;
}
.home-banner .wp-block-button,
.footer-actions .wp-block-button {
	width: 250px;
}

@media (min-width: 600px) {
	.home-banner h1 {
		font-size: 3rem !important;
	}

	.home-banner p {
		font-size: 1.5rem !important;
	}
}

@media (min-width: 900px) {
	.home-banner h1 {
		max-width: 70%;
	}

	.home-banner p {
		max-width: 70%;
	}
}

@media (min-width: 1300px) {
	.home-banner h1 {
		font-size: 3.5rem !important;
		max-width: 50%;
	}

	.home-banner p {
		font-size: 1.75rem !important;
		max-width: 50%;
	}
}

.why-us .wp-block-column {
	background: white;
	border-radius: 0.5rem;
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
	text-align: center;
}

.why-us .wp-block-column:hover {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.why-us .wp-block-column {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.services-list {
	list-style: none !important;
	padding: 0;
}

.services-list li {
	padding-left: 30px;
	position: relative;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.services-list li::before {
	content: '\e812';
}

.icon-container {
	width: 4rem;
	height: 4rem;
	background-color: var(--wp--preset--color--primary-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

.icon-container .wp-block-image img {
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--primary);
}

/* Featured projects */

.featured-projects .wp-block-column {
	background-color: white;
	border: 1px solid #374151;
	border-radius: 0.5rem;
	padding: 1rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.featured-projects .wp-block-column:hover {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.featured-projects .wp-block-column .wp-block-image img {
	width: 100%;
	height: 200px;
	border-radius: 0.5rem;
}

.featured-projects .project-title {
	font-size: 1.25rem;
	margin-top: 1.2rem;
}

.featured-projects .project-subtitle {
	color: var(--wp--preset--color--primary);
	font-size: 0.875rem;
	padding: 0;
	margin-top: 0.2rem !important;
}

.featured-projects .project-description {
	color: oklch(55.1% 0.027 264.364);
	font-size: 0.875rem;
	margin-bottom: 1rem;
	flex-grow: 1;
}

.featured-projects .project-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: var(--wp--preset--color--primary) 1px solid;
	color: var(--wp--preset--color--primary);
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 500;
	background-color: transparent;
	width: fit-content;
}

.clients-gallery {
	margin-top: 2rem !important;
}

.clients-gallery .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.clients-gallery .wp-block-image img {
	width: auto;
	height: 100px !important;
	object-fit: contain;
	object-position: center;
}

/* ==========================================================================
   ABOUT PAGE STYLES
   ========================================================================== */
.services-details {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 1.4rem !important;
}

.services-details .service {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0.5rem;
	padding: 1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
	color: white;
}

.services-details .service:hover {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.services-details .service h3 {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

.services-details .service p {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

@media (min-width: 600px) {
	.services-details {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-details .service {
		padding: 1.2rem;
	}
}

@media (min-width: 900px) {
	.services-details {
		grid-template-columns: repeat(3, 1fr);
	}

	.services-details .service {
		padding: 1.5rem;
	}

	.services-details .service h3 {
		font-size: 1.5rem;
	}

	.services-details .service p {
		font-size: 1.1rem;
	}
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

footer li a {
	color: white !important;
}

footer ul {
	list-style: none;
	gap: 0 !important;
}

.footer-actions h2 {
	margin: 0 !important;
	font-size: 2rem !important;
}

.footer-actions p {
	font-size: 1.25rem !important;
	line-height: 1.5;
	margin-bottom: 2rem;
}

@media (min-width: 600px) {
	.footer-actions h2 {
		font-size: 2.5rem !important;
	}

	.footer-actions p {
		font-size: 1.5rem !important;
	}
}

@media (min-width: 900px) {
	.footer-actions h2 {
		font-size: 3rem !important;
	}

	.footer-actions p {
		font-size: 1.75rem !important;
	}
}

@media (min-width: 1300px) {
	.footer-actions h2 {
		font-size: 3.5rem !important;
	}

	.footer-actions p {
		font-size: 2rem !important;
	}
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.fluentform input:focus,
.fluentform textarea:focus {
	border: 1px solid var(--wp--preset--color--primary) !important;
}

.ff-btn {
	background-color: var(--wp--preset--color--primary) !important;
}

.fluentform label {
	color: var(--wp--preset--color--primary) !important;
	font-size: 1rem !important;
}

.contact-list {
	list-style: none !important;
	margin-left: -4px !important;
	padding: 0;
}

.contact-list li {
	padding-left: 30px;
	position: relative;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.contact-list .address {
	display: block !important;
}

.contact-list li a {
	text-decoration: none;
}

.contact-list .phone::before {
	content: '\e06f';
}

.contact-list .email::before {
	content: '\e80f';
}

.contact-list .address::before {
	content: '\e800';
}