/*
 * HRR Portfolio — Typography layer (v2.1.0)
 * ------------------------------------------------------------------
 * Title      -> 'Space Grotesk'
 * Subtitle / baki shob text -> 'Inter'
 * Bangla     -> 'Hind Siliguri' (age jemon chilo, .bengali-font class-e)
 *
 * main.css (Tailwind build) untouched — oi build-e --font-sans:"Montserrat"
 * hardcoded, tai ekhane variable-tai override kora hoyeche.
 */

:root,
:host {
	--font-sans: "Inter", system-ui, sans-serif;
	--hrr-font-title: "Space Grotesk", "Inter", system-ui, sans-serif;
	--hrr-font-body: "Inter", system-ui, sans-serif;
}

html,
body {
	font-family: var(--hrr-font-body);
	font-optical-sizing: auto;
}

/* ---------- Titles: shob heading + boro display text ---------- */
h1, h2, h3, h4, h5, h6,
.hrr-title {
	font-family: var(--hrr-font-title);
	letter-spacing: -.02em;
}

/*
 * Site-er onek "title" asole <span>/<div> with font-black + boro size.
 * Tailwind-er font-weight 800/900 + text-2xl+ combination gulo title dhora hoy.
 */
.font-black.text-4xl,
.font-black.text-5xl,
.font-black.text-6xl,
.font-black.text-7xl,
.font-black.text-3xl,
.font-black.text-2xl,
.font-extrabold.text-4xl,
.font-extrabold.text-5xl,
.font-extrabold.text-3xl,
.text-gradient-secondary {
	font-family: var(--hrr-font-title);
	letter-spacing: -.02em;
}

/* ---------- Body / subtitle / UI: Inter ---------- */
p, span, a, li, td, th, label, small, strong, em,
button, input, select, textarea, optgroup,
.hrr-body-font {
	font-family: var(--hrr-font-body);
}

/* Heading-er bhitorer span/em jeno title font-i rakhe */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 em, h2 em, h3 em, h4 em,
.hrr-title span,
.text-gradient-secondary span {
	font-family: inherit;
}

/* ---------- Bangla: Hind Siliguri (ager motoi) ---------- */
.bengali-font,
.bengali-font h1, .bengali-font h2, .bengali-font h3,
.bengali-font h4, .bengali-font h5, .bengali-font h6,
.bengali-font span, .bengali-font p, .bengali-font a {
	font-family: "Hind Siliguri", sans-serif !important;
}

/* Icon font gulo kokhonoi override hobe na */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*=" fa-"], [class^="fa-"] {
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* -------------------------------------------------------------------------
 * Footer "Created by Naeem Nahiyan" credit badge (v2.1.0 fix)
 * -------------------------------------------------------------------------
 * Age Tailwind-er `pl-1 pr-2.5` use kora hoto, kintu compiled build-e
 * `pr-2.5` class-tai chilo na (static build, purge kora) — tai daan pashe
 * kono padding-i apply hoto na ebong "Nahiyan"-er "N" border-e lege jeto.
 * Ekhon padding real CSS diye deya holo: dui pashe HUBOHU shoman (10px).
 */
.hrr-credit-badge {
	padding: 4px 10px;          /* top/bottom 4px — left & right ekdom shoman */
	gap: 7px;
	background-color: #ffffff0a;
	line-height: 1;
}

.hrr-credit-name {
	white-space: nowrap;        /* naam kokhono bhangbe na */
	padding-right: 1px;         /* letter-spacing-er sesh gap-er optical fix */
}

/* -------------------------------------------------------------------------
 * v2.1.2 — Space Grotesk BOLD fix (v2.1.1-er incomplete fix-er replacement)
 * -------------------------------------------------------------------------
 * v2.1.1-e ekta hate-lekha selector list chilo jeta `text-7xl` porjonto-i
 * thamto. Fole ei title gulo Inter-ei rehe gechilo:
 *     .font-black.text-8xl  (96px  "HRR" watermark — home)
 *     .font-black.text-9xl  (128px "HRR" watermark — about)
 *     .font-black.text-xl / .text-2xl (stat number: 100+, 500+, 4.5x)
 *     .font-extrabold.text-lg (card-er naam title)
 * Ekhon list-ta COMPLETE kora holo — text-lg (18px) theke text-9xl (128px)
 * porjonto shob size class, responsive prefix (sm:/md:/lg:) shoho.
 *
 * NOTE: Space Grotesk-er weight axis 300..700 — 800/900 NEI. Google Fonts
 * API-te `wght@800` / `wght@900` cha-ile HTTP 400 dey (test kore dekha).
 * Tai 700-i er ASOL Bold; font-synthesis-weight:none diye browser-er
 * "fake bold" bondho rakha hoyeche jate shape porishkar thake.
 * ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hrr-title,
.text-gradient-secondary,
/* --- font-black (900) title, shob size --- */
.font-black.text-lg,   .font-black.text-xl,   .font-black.text-2xl,
.font-black.text-3xl,  .font-black.text-4xl,  .font-black.text-5xl,
.font-black.text-6xl,  .font-black.text-7xl,  .font-black.text-8xl,
.font-black.text-9xl,
/* --- font-extrabold (800) title, shob size --- */
.font-extrabold.text-lg,  .font-extrabold.text-xl,  .font-extrabold.text-2xl,
.font-extrabold.text-3xl, .font-extrabold.text-4xl, .font-extrabold.text-5xl,
.font-extrabold.text-6xl, .font-extrabold.text-7xl, .font-extrabold.text-8xl,
.font-extrabold.text-9xl,
/* --- responsive size class (md:text-2xl ityadi).
       SHUDHU boro size — ":text-xs"/":text-sm"/":text-base" ICCHA kore
       bad deya hoyeche, karon oi gulo choto uppercase badge/label,
       title noy. Tader Inter-i thakbe (ager design-er motoi). --- */
.font-black[class*=":text-xl"],  .font-black[class*=":text-2xl"],
.font-black[class*=":text-3xl"], .font-black[class*=":text-4xl"],
.font-black[class*=":text-5xl"], .font-black[class*=":text-6xl"],
.font-black[class*=":text-7xl"], .font-black[class*=":text-8xl"],
.font-black[class*=":text-9xl"],
.font-extrabold[class*=":text-xl"],  .font-extrabold[class*=":text-2xl"],
.font-extrabold[class*=":text-3xl"], .font-extrabold[class*=":text-4xl"],
.font-extrabold[class*=":text-5xl"], .font-extrabold[class*=":text-6xl"],
.font-extrabold[class*=":text-7xl"], .font-extrabold[class*=":text-8xl"],
.font-extrabold[class*=":text-9xl"] {
	font-family: var(--hrr-font-title);
	font-weight: 700;
	font-synthesis-weight: none;   /* fake-bold off — asol Bold master use hobe */
	letter-spacing: -.02em;
}

/* Heading-er bhitorer nested span/gradient text-o same Bold */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.text-gradient-secondary span,
.hrr-title span {
	font-weight: inherit;
}

/* -------------------------------------------------------------------------
 * v2.1.2 — Comments section styling
 * -------------------------------------------------------------------------
 * main.css ekta PURGED/static Tailwind build — comment UI-te byabohar kora
 * onek utility class oi build-e NEI (gap-3.5, gap-x-2.5, items-baseline,
 * resize-y, text-red-400, disabled:*, ityadi). Tai oi gulo ekhane ASOL CSS
 * hisebe likha holo, class name-er upor bhorosa na kore.
 * (Ei bug-tai screenshot-e "Sadia RahmanAugust 18, 2026" — naam ar date
 *  ek shathe lege gechilo, karon gap-x-2.5 apply-i hoy ni.)
 * ---------------------------------------------------------------------- */

#hrr-comments .hrr-comment-item {
	display: flex;
	gap: 14px;                 /* gap-3.5 */
	align-items: flex-start;
}

#hrr-comments .hrr-comment-item > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Naam + date ek line-e, kintu majhe SHOMAN faka */
#hrr-comments .hrr-comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;     /* items-baseline */
	column-gap: 10px;          /* gap-x-2.5 */
	row-gap: 2px;              /* gap-y-0.5 */
}

#hrr-comments .hrr-comment-body > p {
	margin: 0 0 .5em;
}
#hrr-comments .hrr-comment-body > p:last-child {
	margin-bottom: 0;
}

/* Form field gulo */
#hrr-comments .hrr-cm-input {
	display: block;
	width: 100%;
}
#hrr-comments textarea.hrr-cm-input {
	resize: vertical;          /* resize-y */
	min-height: 120px;
}
#hrr-comments .hrr-cm-input.is-invalid {
	border-color: rgba(239, 68, 68, .7);
}

/* Error text — text-red-400 build-e nei */
#hrr-comments .hrr-cm-error {
	color: #f87171;
	font-size: 11px;
	font-weight: 600;
	margin: 0;
}

/* Status message — green/red variant */
#hrr-comments .hrr-cm-msg {
	font-size: 14px;
	font-weight: 600;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid transparent;
	margin: 0;
}
#hrr-comments .hrr-cm-msg.is-ok {
	color: #4ade80;
	background: rgba(74, 222, 128, .1);
	border-color: rgba(74, 222, 128, .3);
}
#hrr-comments .hrr-cm-msg.is-error {
	color: #f87171;
	background: rgba(248, 113, 113, .1);
	border-color: rgba(248, 113, 113, .3);
}

/* Submit button disabled state */
#hrr-comments #hrr-cm-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Avatar kokhono chapa hobe na */
#hrr-comments .hrr-comment-item > img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: cover;
}

/* Submit button — px-7 / bg-[#f79421] / text-[#110e10] main.css-e nei,
   tai site-er onnano CTA button-er motoi ASOL CSS diye deya holo. */
#hrr-comments #hrr-cm-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;               /* px-7 py-3 */
	border: 0;
	border-radius: 9999px;
	background-color: #f79421;
	color: #110e10;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1;
	white-space: nowrap;              /* text kokhono bahire jabe na */
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}
#hrr-comments #hrr-cm-submit:hover:not(:disabled) {
	background-color: #ffb660;
}

/* =========================================================================
 * v2.1.3 — Sticky header: scroll korle top bar ta gradually GHONO hoy
 * -------------------------------------------------------------------------
 * JS (hrr_sticky_header_boot) `--hrr-sp` variable-ta 0 theke 1 e nie jay
 * (0–160px scroll). CSS shudhu oi value ta use kore — tai transition ekdom
 * mosrin, kono "jump" nei. JS off thakle purono chehara-i thake (safe).
 * ========================================================================= */
html.hrr-scroll-shade header.glass-panel {
	background-color: rgba(12, 10, 11, calc(.16 + .82 * var(--hrr-sp, 0)));
	-webkit-backdrop-filter: blur(calc(14px + 8px * var(--hrr-sp, 0))) saturate(140%);
	backdrop-filter: blur(calc(14px + 8px * var(--hrr-sp, 0))) saturate(140%);
	border-bottom-color: rgba(247, 148, 33, calc(.15 + .25 * var(--hrr-sp, 0)));
	box-shadow: 0 calc(6px * var(--hrr-sp, 0)) calc(24px * var(--hrr-sp, 0)) rgba(0, 0, 0, calc(.45 * var(--hrr-sp, 0)));
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
	will-change: background-color;
}

/* Bar jotoi ghono hok, menu-r lekha totoi porishkar thakbe.
 * Active tab-er orange (#f79421) rong ta ekhane bad deya hoyeche. */
html.hrr-scroll-shade:not(.hrr-light) #desktop-navbar a:not(.text-\[\#f79421\]),
html.hrr-scroll-shade:not(.hrr-light) header #logo-container span:first-child {
	color: #fbf7f8;
}
html.hrr-scroll-shade:not(.hrr-light) header #logo-container span:last-child {
	color: rgba(251, 247, 248, .72);
}

/* Scroll kora obosthay header-er shob text-e halka contrast shadow —
 * chobi ba uj-jol background-er upore o poRa jabe. */
html.hrr-scroll-shade:not(.hrr-light) header.glass-panel {
	text-shadow: 0 1px 2px rgba(0, 0, 0, calc(.35 * var(--hrr-sp, 0)));
}

/* Reduced motion pochondo korle transition off */
@media (prefers-reduced-motion: reduce) {
	html.hrr-scroll-shade header.glass-panel { transition: none; }
}

/* =========================================================================
 * v2.1.3 — Home page: blog banner-er niche shesh 3-ta post + "See All"
 * main.css purge kora Tailwind build, tai ekhane purota nijer CSS.
 * ========================================================================= */
.hrr-home-latest {
	max-width: 64rem;                 /* blog grid-er motoi width */
	margin: 40px auto 0;
	padding: 0 4px;
}
.hrr-hl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
/* Post jodi 3-tar kom hoy, card gulo majhkhane center thakbe (faka column noy) */
.hrr-hl-grid:has(.hrr-hl-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 20rem));
	justify-content: center;
}
.hrr-hl-grid:has(.hrr-hl-card:only-child) {
	grid-template-columns: minmax(0, 22rem);
	justify-content: center;
}
.hrr-hl-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .10);
	text-align: left;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform .4s cubic-bezier(.175,.885,.32,1.275), border-color .3s ease, box-shadow .4s ease;
}
.hrr-hl-card:hover {
	transform: translateY(-8px);
	border-color: rgba(247, 148, 33, .30);
	box-shadow: 0 20px 30px -10px rgba(17, 14, 16, .70), 0 0 40px -5px rgba(247, 148, 33, .15);
}
.hrr-hl-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #161215;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}
.hrr-hl-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.hrr-hl-card:hover .hrr-hl-thumb img { transform: scale(1.05); }
.hrr-hl-thumb > i {                   /* chobi na thakle placeholder icon */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: rgba(247, 148, 33, .35);
}
.hrr-hl-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex-grow: 1;
}
.hrr-hl-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.hrr-hl-cat {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(247, 148, 33, .15);
	color: #f79421;
	font-size: 9px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.4;
}
.hrr-hl-date {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .40);
	white-space: nowrap;
}
.hrr-hl-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--hrr-font-title);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: #fff;
	transition: color .3s ease;
}
.hrr-hl-card:hover .hrr-hl-title { color: #f79421; }
.hrr-hl-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.7;
	font-weight: 300;
	color: rgba(251, 247, 248, .60);
}
.hrr-hl-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .05);
	font-size: 12px;
	font-weight: 700;
	color: #f79421;
	transition: color .3s ease;
}
.hrr-hl-more i { font-size: 9px; transition: transform .3s ease; }
.hrr-hl-card:hover .hrr-hl-more { color: #ffb660; }
.hrr-hl-card:hover .hrr-hl-more i { transform: translateX(4px); }

/* ---------- "See All" button ---------- */
.hrr-hl-all-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}
.hrr-hl-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 32px;
	border-radius: 9999px;
	border: 1px solid rgba(247, 148, 33, .35);
	background: rgba(247, 148, 33, .08);
	color: #f79421;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.hrr-hl-all:hover {
	background: #f79421;
	border-color: #f79421;
	color: #110e10;
	transform: translateY(-2px);
}
.hrr-hl-all i { font-size: 11px; transition: transform .3s ease; }
.hrr-hl-all:hover i { transform: translateX(4px); }
.hrr-hl-all.bengali-font { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 900px) {
	.hrr-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 640px) {
	.hrr-home-latest { margin-top: 28px; }
	.hrr-hl-grid { grid-template-columns: 1fr; gap: 16px; }
	.hrr-hl-title { font-size: 16px; }
	.hrr-hl-all { width: 100%; justify-content: center; }
}