/*
Theme Name: Finobazaar
Author: Finobazaar
Description: Location-aware property, finance and banking information platform. Presentation only: calculators, loans, property, verification, banking and AI come from Finobazaar plugins through documented hooks, shortcodes and the finobazaar/v1 REST API.
Version: 2.0.1
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: finobazaar
Tags: finance, property, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, rtl-language-support
*/

/* =====================================================================
   1. Fonts — IBM Plex Sans (Latin) + IBM Plex Sans Devanagari, one family.
   The Devanagari files download only when a page contains Devanagari.
   ===================================================================== */
@font-face {
	font-family: "Finobazaar Sans";
	src: url("assets/fonts/plex-sans-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Finobazaar Sans";
	src: url("assets/fonts/plex-sans-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Finobazaar Sans";
	src: url("assets/fonts/plex-sans-devanagari-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
	font-family: "Finobazaar Sans";
	src: url("assets/fonts/plex-sans-devanagari-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* =====================================================================
   2. Tokens
   ===================================================================== */
:root {
	/* ------------------------------------------------------------------
	   Finobazaar brand colours: the logo is the only reference.
	   Blue for action, black for weight, white for space. Change the
	   brand here; every component reads these tokens.
	   ------------------------------------------------------------------ */
	--fb-brand-blue: #105de1;          /* primary, buttons, links, active */
	--fb-brand-blue-dark: #0848b8;     /* hover, pressed, blue text on white */
	--fb-brand-blue-deep: #063a94;     /* rare: darkest blue surface */
	--fb-brand-blue-light: #eaf2ff;    /* selected, soft highlight */
	--fb-brand-blue-surface: #f3f7ff;  /* information blocks, soft sections */
	--fb-brand-blue-line: #c4d8fb;     /* blue-tinted borders */
	--fb-brand-blue-on-dark: #8db4f7;  /* blue text on black (7.9:1) */
	--fb-brand-black: #111111;         /* headings, dark surfaces, footer */
	--fb-text: #202020;                /* body text */
	--fb-text-2: #5f6368;              /* secondary text */
	--fb-bg: #f7f9fc;                  /* light background */
	--fb-border: #e3e8f0;              /* borders */

	/* Semantic names used by the components (kept from 2.0 so nothing else
	   changes). "green" and "gold" are historical names; they now resolve
	   to the brand blue system. */
	--fb-green: var(--fb-brand-blue);
	--fb-green-800: var(--fb-brand-blue-dark);
	--fb-green-900: var(--fb-brand-blue-dark);
	--fb-green-100: var(--fb-brand-blue-line);
	--fb-green-50: var(--fb-brand-blue-light);
	--fb-blue: var(--fb-brand-black);
	--fb-blue-800: #000;
	--fb-blue-50: var(--fb-brand-blue-light);
	--fb-gold: var(--fb-brand-blue);
	--fb-gold-ink: var(--fb-brand-blue-dark);
	--fb-gold-50: var(--fb-brand-blue-light);

	/* Neutrals */
	--fb-white: #fff;
	--fb-ivory: var(--fb-bg);
	--fb-beige: var(--fb-brand-blue-surface);
	--fb-gray: #eef2f7;
	--fb-line: var(--fb-border);
	--fb-line-strong: #c5cfdd;
	--fb-ink: var(--fb-text);
	--fb-heading: var(--fb-brand-black);
	--fb-muted: var(--fb-text-2);
	--fb-placeholder: #80868b;

	/* Status (data labels). Functional only, never brand colours. */
	--fb-ok: #1e6b3f;
	--fb-ok-bg: #e9f5ee;
	--fb-user: #3d4f66;
	--fb-user-bg: #eef2f7;
	--fb-warn: #7f5200;
	--fb-warn-bg: #fdf0d2;
	--fb-warn-dot: #b97800;
	--fb-na: #5f6368;
	--fb-na-bg: #f1f3f5;
	--fb-error: #a12a2a;
	--fb-error-bg: #fbeaea;
	--fb-focus: var(--fb-brand-blue-dark);

	/* Back-compat aliases used by plugins built for theme 1.x */
	--fb-teal-950: var(--fb-brand-black);
	--fb-teal-900: var(--fb-brand-blue-dark);
	--fb-teal-800: var(--fb-brand-blue-dark);
	--fb-teal-700: var(--fb-brand-blue);
	--fb-teal-600: var(--fb-brand-blue);
	--fb-teal-100: var(--fb-brand-blue-line);
	--fb-teal-50: var(--fb-brand-blue-light);
	--fb-gold-100: var(--fb-brand-blue-light);
	--fb-gold-hover: var(--fb-brand-blue-dark);
	--fb-paper: var(--fb-bg);
	--fb-ok-line: #bfe0cc;
	--fb-user-line: #cdd6e2;
	--fb-warn-line: #ecd08a;
	--fb-na-line: #c5cfdd;

	/* Type */
	--fb-font: "Finobazaar Sans", "IBM Plex Sans", "IBM Plex Sans Devanagari", system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Devanagari", sans-serif;
	--fb-font-body: var(--fb-font);
	--fb-font-display: var(--fb-font);
	--fb-fs-xs: 0.8125rem;
	--fb-fs-sm: 0.875rem;
	--fb-fs-base: 1rem;
	--fb-fs-md: 1.125rem;
	--fb-fs-lg: 1.375rem;
	--fb-fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	--fb-fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
	--fb-fs-3xl: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);
	--fb-lh-body: 1.6;
	--fb-lh-head: 1.15;
	--fb-track-head: -0.015em;

	/* Shape and depth (shadows tinted with a cool navy, never flat grey) */
	--fb-r-xs: 4px;
	--fb-r-sm: 6px;
	--fb-r-btn: 10px;
	--fb-r-md: 12px;
	--fb-r-lg: 18px;
	--fb-r-xl: 28px;
	--fb-r-pill: 999px;
	--fb-sh-1: 0 1px 2px rgba(17, 34, 68, 0.06), 0 1px 1px rgba(17, 34, 68, 0.04);
	--fb-sh-2: 0 10px 24px -14px rgba(17, 34, 68, 0.26);
	--fb-sh-3: 0 30px 60px -30px rgba(17, 34, 68, 0.34);

	/* Layout */
	--fb-container: 76rem;
	--fb-container-narrow: 46rem;
	--fb-gutter: clamp(1rem, 4vw, 2rem);
	--fb-space-section: clamp(3.5rem, 7vw, 6rem);
	--fb-header-h: 4.25rem;

	/* Motion */
	--fb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--fb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--fb-dur-1: 160ms;
	--fb-dur-2: 280ms;
	--fb-dur-3: 560ms;
}

/* Devanagari needs taller lines for matras; headings loosen a little more. */
:lang(hi),
:lang(mr) {
	--fb-lh-body: 1.75;
	--fb-lh-head: 1.35;
	--fb-track-head: 0;
}

/* =====================================================================
   3. Reset and base
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--fb-header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--fb-white);
	color: var(--fb-ink);
	font: 400 var(--fb-fs-base) / var(--fb-lh-body) var(--fb-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.fb-locked { overflow: hidden; }

img,
svg,
video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--fb-heading);
	font-family: var(--fb-font-display);
	font-weight: 600;
	line-height: var(--fb-lh-head);
	letter-spacing: var(--fb-track-head);
	text-wrap: balance;
}

h1 { font-size: var(--fb-fs-3xl); }
h2 { font-size: var(--fb-fs-2xl); }
h3 { font-size: var(--fb-fs-lg); }
h4 { font-size: var(--fb-fs-md); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
	color: var(--fb-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--fb-dur-1) var(--fb-ease);
}
a:hover { color: var(--fb-green-900); }

:focus-visible {
	outline: 3px solid var(--fb-focus);
	outline-offset: 2px;
	border-radius: var(--fb-r-xs);
}

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

::selection { background: var(--fb-green-100); color: var(--fb-green-900); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--fb-white);
	color: var(--fb-ink);
	font-weight: 600;
	border-radius: var(--fb-r-sm);
	box-shadow: var(--fb-sh-2);
}

/* =====================================================================
   4. Layout primitives
   ===================================================================== */
.fb-container {
	width: 100%;
	max-width: calc(var(--fb-container) + var(--fb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fb-gutter);
}
.fb-container--narrow { max-width: calc(var(--fb-container-narrow) + var(--fb-gutter) * 2); }

.fb-main { display: block; outline: 0; }

.fb-section { padding-block: var(--fb-space-section); }
.fb-section--tint { background: var(--fb-ivory); }
.fb-section--alt { background: var(--fb-ivory); }
.fb-section--first { padding-block-start: clamp(2rem, 5vw, 3.5rem); }

.fb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.fb-section__head > div { max-width: 44rem; }
.fb-section__title { margin: 0; font-size: var(--fb-fs-2xl); }
.fb-section__desc { margin: 0.6rem 0 0; color: var(--fb-muted); font-size: var(--fb-fs-md); }
.fb-section__link { font-weight: 600; white-space: nowrap; }

.fb-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .fb-grid--2, .fb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fb-muted { color: var(--fb-muted); }

/* =====================================================================
   5. Buttons
   ===================================================================== */
.fb-btn {
	--fb-btn-bg: var(--fb-green);
	--fb-btn-fg: var(--fb-white);
	--fb-btn-bd: var(--fb-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.7rem 1.25rem;
	border: 1.5px solid var(--fb-btn-bd);
	border-radius: var(--fb-r-btn);
	background: var(--fb-btn-bg);
	color: var(--fb-btn-fg);
	font: 600 var(--fb-fs-base) / 1.2 var(--fb-font);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--fb-dur-1) var(--fb-ease), border-color var(--fb-dur-1) var(--fb-ease), color var(--fb-dur-1) var(--fb-ease), box-shadow var(--fb-dur-2) var(--fb-ease), transform var(--fb-dur-1) var(--fb-ease);
}
.fb-btn:hover { --fb-btn-bg: var(--fb-green-800); --fb-btn-bd: var(--fb-green-800); color: var(--fb-btn-fg); box-shadow: var(--fb-sh-2); }
.fb-btn:active { transform: translateY(1px); box-shadow: none; }
.fb-btn .fb-icon { width: 1.15em; height: 1.15em; }
.fb-btn__arrow { transition: transform var(--fb-dur-2) var(--fb-ease); }
.fb-btn:hover .fb-btn__arrow { transform: translateX(3px); }
[dir="rtl"] .fb-btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .fb-btn:hover .fb-btn__arrow { transform: scaleX(-1) translateX(3px); }

.fb-btn--primary {}
.fb-btn--secondary { --fb-btn-bg: var(--fb-brand-blue-light); --fb-btn-fg: var(--fb-brand-blue-dark); --fb-btn-bd: var(--fb-brand-blue-line); }
.fb-btn--secondary:hover { --fb-btn-bg: var(--fb-white); --fb-btn-fg: var(--fb-brand-blue-dark); --fb-btn-bd: var(--fb-brand-blue); box-shadow: none; }
.fb-btn--outline { --fb-btn-bg: var(--fb-white); --fb-btn-fg: var(--fb-brand-blue); --fb-btn-bd: var(--fb-brand-blue-line); }
.fb-btn--outline:hover { --fb-btn-bg: var(--fb-green-50); --fb-btn-fg: var(--fb-green-900); --fb-btn-bd: var(--fb-green); box-shadow: none; }
/* 'gold' is the historical name of the accent button; it is brand blue now. */
.fb-btn--gold { --fb-btn-bg: var(--fb-brand-blue); --fb-btn-fg: var(--fb-white); --fb-btn-bd: var(--fb-brand-blue); }
.fb-btn--gold:hover { --fb-btn-bg: var(--fb-brand-blue-dark); --fb-btn-bd: var(--fb-brand-blue-dark); --fb-btn-fg: var(--fb-white); }
.fb-btn--light { --fb-btn-bg: var(--fb-white); --fb-btn-fg: var(--fb-green-900); --fb-btn-bd: var(--fb-white); }
.fb-btn--light:hover { --fb-btn-bg: var(--fb-green-50); --fb-btn-bd: var(--fb-green-50); --fb-btn-fg: var(--fb-green-900); }
.fb-btn--ghost-light { --fb-btn-bg: transparent; --fb-btn-fg: var(--fb-white); --fb-btn-bd: rgba(255, 255, 255, 0.45); }
.fb-btn--ghost-light:hover { --fb-btn-bg: rgba(255, 255, 255, 0.1); --fb-btn-bd: var(--fb-white); --fb-btn-fg: var(--fb-white); box-shadow: none; }
.fb-btn--text { --fb-btn-bg: transparent; --fb-btn-fg: var(--fb-green); --fb-btn-bd: transparent; min-height: 2.75rem; padding-inline: 0.25rem; }
.fb-btn--text:hover { --fb-btn-bg: transparent; --fb-btn-bd: transparent; --fb-btn-fg: var(--fb-green-900); box-shadow: none; text-decoration: underline; }
.fb-btn--icon { width: 2.75rem; min-height: 2.75rem; padding: 0; --fb-btn-bg: transparent; --fb-btn-fg: var(--fb-ink); --fb-btn-bd: transparent; }
.fb-btn--icon:hover { --fb-btn-bg: var(--fb-gray); --fb-btn-bd: var(--fb-gray); --fb-btn-fg: var(--fb-ink); box-shadow: none; }
.fb-btn--sm { min-height: 2.5rem; padding: 0.45rem 0.9rem; font-size: var(--fb-fs-sm); }
.fb-btn--lg { min-height: 3.5rem; padding-inline: 1.6rem; font-size: var(--fb-fs-md); }
.fb-btn--block { width: 100%; }
.fb-btn[disabled],
.fb-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* =====================================================================
   6. Form controls
   ===================================================================== */
.fb-field { display: grid; gap: 0.35rem; }
.fb-field__label { font-size: var(--fb-fs-sm); font-weight: 600; color: var(--fb-ink); }
.fb-field__hint { font-size: var(--fb-fs-xs); color: var(--fb-muted); }

.fb-input,
.fb-select,
.fb-textarea,
.fb-search__input {
	width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.95rem;
	border: 1.5px solid var(--fb-line-strong);
	border-radius: var(--fb-r-btn);
	background: var(--fb-white);
	color: var(--fb-ink);
	transition: border-color var(--fb-dur-1) var(--fb-ease), box-shadow var(--fb-dur-1) var(--fb-ease);
}
.fb-input:hover,
.fb-select:hover,
.fb-textarea:hover { border-color: var(--fb-muted); }
.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus,
.fb-search__input:focus { outline: 0; border-color: var(--fb-green); box-shadow: 0 0 0 4px rgba(16, 93, 225, 0.16); }
.fb-input[aria-invalid="true"] { border-color: var(--fb-error); }
.fb-input::placeholder,
.fb-search__input::placeholder { color: var(--fb-placeholder); }

/* =====================================================================
   7. Motion system
   One orchestrated load sequence in the hero (home.css), a quiet reveal
   for sections, and motion that answers what the person did. Everything
   is off when the visitor prefers reduced motion.
   ===================================================================== */
@keyframes fb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fb-pulse { 0% { transform: scale(0.6); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fb-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--fb-dur-3) var(--fb-ease), transform var(--fb-dur-3) var(--fb-ease); transition-delay: calc(var(--fb-i, 0) * 70ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

.fb-skeleton {
	border-radius: var(--fb-r-sm);
	background: linear-gradient(90deg, var(--fb-gray) 0%, #e4e9f1 40%, var(--fb-gray) 80%);
	background-size: 200% 100%;
	animation: fb-shimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	html.js [data-reveal] { opacity: 1; transform: none; }
}