/*
Theme Name: Dhaara Blog
Theme URI: https://blog.dhaara.com/
Author: Kritsnam Technologies
Author URI: https://dhaara.com/
Description: The blog theme for blog.dhaara.com. A direct port of the dhaara.com design system — pure-black canvas, teal accent, self-hosted Diodrum, and the marketing site's navbar and footer verbatim, so readers arriving from dhaara.com never feel handed off to a different site. Posts-only: there are no page templates to configure.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 7.1
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: dhaara-blog
Tags: blog, one-column, dark, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Fonts

   Diodrum, self-hosted, six weights — the same faces and the same subset
   dhaara.com ships. Light 300 and the Regular italic are used sparingly
   (pull quotes, captions); Medium 500 carries every heading.

   `font-display: swap` on all six: the fallback stack renders immediately
   and is replaced when the face arrives. Regular and Medium are preloaded
   from functions.php so that swap almost never becomes visible.
   ========================================================================== */

@font-face {
	font-family: 'Diodrum';
	src: url('assets/fonts/Diodrum-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Diodrum';
	src: url('assets/fonts/Diodrum-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Diodrum';
	src: url('assets/fonts/Diodrum-RegularItalic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Diodrum';
	src: url('assets/fonts/Diodrum-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Diodrum';
	src: url('assets/fonts/Diodrum-Semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Diodrum';
	src: url('assets/fonts/Diodrum-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens

   One-for-one with the `@theme` block in dhaara.com's app/globals.css.
   Never hard-code a hex below this block — if a colour is missing, add a
   token rather than inlining it, so the two codebases stay comparable.

   Note there is deliberately no near-black. dhaara.com's rule is that
   #0A0A0A must never reappear: the marketing site's video and radial
   gradients all bottom out at pure #000, and an almost-black surface next
   to them shows a visible seam. Contrast here comes from borders and the
   accent, never from a second background shade.
   ========================================================================== */

:root {
	--dh-bg: #000000;
	--dh-bg-card: #141414;
	--dh-bg-elev: #1a1a1a;

	--dh-accent: #22c9bd;
	--dh-accent-400: #5be0d6;
	--dh-accent-600: #1aa89c;
	--dh-accent-700: #1b3f3d;
	--dh-accent-ink: #004f4a;

	--dh-warn: #c9785a;
	--dh-warn-soft: #e89a6e;

	--dh-cream: #f0eee9;
	--dh-cream-dim: #e6e1d8;
	--dh-muted: #929096;

	/* Derived surfaces. `card-surface` on dhaara.com is a gradient plus a
	   cream-tinted hairline; both halves are tokenised here so a card, a
	   quote block, and an input can share one definition. */
	--dh-card-bg: linear-gradient(180deg, rgba(240, 238, 233, 0.03) 0%, rgba(240, 238, 233, 0.01) 100%);
	--dh-hairline: rgba(240, 238, 233, 0.08);
	--dh-hairline-strong: rgba(240, 238, 233, 0.16);

	/* Both container tokens are 1120px on dhaara.com on purpose — `wide`
	   used to be 1200 and made banners taller than the viewport liked. */
	--dh-container: 1120px;
	--dh-measure: 720px;

	--dh-radius-card: 16px;
	--dh-radius-panel: 24px;

	--dh-header-h: 64px;

	color-scheme: dark;
}

@media (min-width: 768px) {
	:root {
		--dh-header-h: 80px;
	}
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	/* Anchor jumps land flush under the fixed navbar instead of beneath it. */
	scroll-padding-top: calc(var(--dh-header-h) + 16px);
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: var(--dh-bg);
	color: var(--dh-cream);
	font-family: 'Diodrum', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Horizontal overflow guard. `clip` rather than `hidden` so no scroll
	   container is established — `hidden` would break `position: sticky`
	   on any descendant. Set on BOTH elements because iOS Safari only
	   honours it when html and body agree; with it on one, a too-wide
	   child widens the initial viewport and the whole site renders
	   narrower than the phone screen with a dead gutter on the right. */
	overflow-x: clip;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--dh-accent-400);
	text-decoration: none;
}

a:hover {
	color: var(--dh-cream);
}

/* Tailwind's preflight used to force this and v4 dropped it; the browser
   default for a <button> is the arrow cursor, which reads as disabled. */
button:not(:disabled),
[role='button']:not(:disabled) {
	cursor: pointer;
}

::selection {
	background-color: rgba(34, 201, 189, 0.4);
	color: var(--dh-cream);
}

:focus-visible {
	outline: 2px solid var(--dh-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   4. Accessibility helpers
   ========================================================================== */

.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;
}

.dhaara-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--dh-accent);
	color: var(--dh-bg);
	font-size: 14px;
	font-weight: 500;
	transition: top 0.2s ease;
}

.dhaara-skip-link:focus {
	top: 16px;
	color: var(--dh-bg);
}

/* ==========================================================================
   5. Layout

   The section wrapper mirrors <Section> on dhaara.com: horizontal padding
   on the OUTER element and the max-width on a separate inner element.
   Putting both on one element makes the max-width include the padding, so
   the content column ends up 80px narrower than everything around it.
   ========================================================================== */

.dhaara-main {
	/* Clears the fixed header. Hero sections on dhaara.com carry their own
	   `pt-24 md:pt-28` for this; here it is hoisted to <main> so every
	   template gets it without repeating the value. */
	padding-top: calc(var(--dh-header-h) + 24px);

	/* The teal wash at the top of the page. It used to live on
	   `.dhaara-hero`, but the blog home no longer has a hero and would
	   have opened on flat black; moving it here gives every template the
	   same top-of-page glow, including single posts.

	   The ellipse is given an EXPLICIT size (`90% 420px`) rather than a
	   keyword. A sized-by-keyword radial scales to its box, and <main> is
	   the full height of the page — the gradient would have stretched to
	   thousands of pixels and washed the whole site teal. */
	background-image: radial-gradient(ellipse 90% 420px at 50% 0%, rgba(34, 201, 189, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
	background-repeat: no-repeat;
}

.dhaara-section,
.dhaara-hero,
.dhaara-article,
.dhaara-header,
.dhaara-footer__top,
.dhaara-footer__bottom {
	padding-left: 24px;
	padding-right: 24px;
}

@media (min-width: 768px) {
	.dhaara-section,
	.dhaara-hero,
	.dhaara-article,
	.dhaara-header,
	.dhaara-footer__top,
	.dhaara-footer__bottom {
		padding-left: 40px;
		padding-right: 40px;
	}
}

.dhaara-section {
	padding-top: 32px;
	padding-bottom: 32px;
}

@media (min-width: 768px) {
	.dhaara-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.dhaara-hero__inner,
.dhaara-final-cta__inner,
.dhaara-footer__top,
.dhaara-footer__bottom,
.dhaara-grid,
.dhaara-pagination,
.dhaara-quick-links {
	max-width: var(--dh-container);
	margin-inline: auto;
}

/* ==========================================================================
   6. Header

   A near-verbatim port of components/Header.tsx. Transparent over the
   hero, then a translucent black fill with a blur and a hairline border
   once the page scrolls past 16px.
   ========================================================================== */

/* The horizontal padding lives HERE, on the outer <header>, and the
   1120px max-width lives on `.dhaara-header__row` inside it.

   Splitting them across two elements is load-bearing, not tidiness. When
   one element carries both, the max-width caps the BORDER box, so the
   40px of padding is subtracted from the 1120 and the content area is
   only 1040 — 80px narrower than every section below it. The logo then
   sits 40px inside the page's left edge instead of flush with it, and
   the row's three flex groups need 1090px of the 1040 available, so they
   overflow to the right and `space-between` has no free space left to
   distribute: both gaps collapse from ~55px to the bare 8px `gap`.

   Measured against dhaara.com at 1280/1440/1516/1680, this restores
   logo-inset 0, CTA-inset 0, and real breathing room around the nav. */
.dhaara-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	background-color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.dhaara-header.is-scrolled,
.dhaara-header.is-menu-open {
	border-bottom-color: rgba(255, 255, 255, 0.06);
	background-color: rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* The WordPress admin bar is itself fixed at the top of the viewport, so
   a fixed header at `top: 0` renders underneath it for logged-in users.
   Both of the admin bar's own heights have to be matched — it is 46px on
   phones and 32px from 783px up, which is WordPress's breakpoint, not one
   of ours. */
body.admin-bar .dhaara-header {
	top: 46px;
}

@media (min-width: 783px) {
	body.admin-bar .dhaara-header {
		top: 32px;
	}
}

.dhaara-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	max-width: var(--dh-container);
	margin-inline: auto;
	height: var(--dh-header-h);
}

/* Below 360px the row (logo + CTA pill + hamburger) measures almost
   exactly what 24px gutters leave, and the logo ends up touching the
   pill. 16px a side restores a comfortable gap; 24px gutters were
   disproportionate at that width anyway. */
@media (max-width: 359px) {
	.dhaara-header {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.dhaara-header__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.dhaara-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* `flex-shrink: 0` on the image AND on its anchor is load-bearing, not
   defensive. An <img> is shrinkable by default with `object-fit: fill`,
   so in a tight flex row the browser squeezes it horizontally and
   silently distorts the wordmark rather than overflowing. The parent
   anchor is where the squeeze originates, so shrink-proofing the image
   alone does not fix it. */
.dhaara-logo--navbar {
	height: 16px;
	width: auto;
	flex-shrink: 0;
	user-select: none;
}

@media (min-width: 360px) {
	.dhaara-logo--navbar {
		height: 24px;
	}
}

/* 29px is a measured ceiling, not a round number. The wordmark is ~3.9x
   as wide as it is tall, so height costs width fast, and the row also
   carries the CTA pill, the hamburger, and — from 1024px up — six nav
   labels. 29px is the tallest value that still clears every breakpoint
   including the 1024px pinch. If it ever grows past ~31px the nav labels
   wrap to two lines at exactly 1024px. */
@media (min-width: 390px) {
	.dhaara-logo--navbar {
		height: 29px;
	}
}

/* The "you are here" marker — last item in the nav, after "Our story", so
   the row reads as five dhaara.com destinations then the page you are on.
   Styled as an active nav pill: same shape and padding as its neighbours,
   with the teal border and tint an active item would carry.

   Hidden below 1280px, and that is a fit constraint rather than a taste
   call. Between 1024 and 1279 the row is already as tight as dhaara.com's
   own — six labels need ~630px in their compact form against ~660px of
   room — so there is no space for a seventh element. Above 1280 the full
   nav needs ~718px of an available ~834px, which leaves this pill room to
   spare. Below 1024 the drawer carries a "Blog" row instead, so the
   marker is only ever absent in that one band. */
.dhaara-header__blog-pill {
	display: none;
	border-radius: 999px;
	border: 1px solid rgba(34, 201, 189, 0.5);
	background-color: rgba(34, 201, 189, 0.08);
	/* Matches the nav links' own 1280px padding step exactly, so the pill
	   sits on the same baseline box as the labels beside it. */
	padding: 6px 12px;
	font-size: 14px;
	color: var(--dh-accent-400);
}

@media (min-width: 1280px) {
	.dhaara-header__blog-pill {
		display: inline-flex;
		align-items: center;
		/* A touch more than the nav's 4px gap, so it reads as a separate
		   group rather than a seventh destination. */
		margin-left: 6px;
	}
}

.dhaara-header__blog-pill:hover {
	border-color: var(--dh-accent);
	color: var(--dh-accent-400);
}

.dhaara-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---- Desktop nav ---- */

.dhaara-nav {
	display: none;
	align-items: center;
	gap: 4px;
}

@media (min-width: 1024px) {
	.dhaara-nav {
		display: flex;
	}
}

.dhaara-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every item carries the same pill padding whether or not it is active,
   so an active box appears in place without nudging its neighbours. The
   gap is tight (4px) because the padding already supplies the visual
   spacing between labels. */
.dhaara-nav__link,
.dhaara-nav__list a {
	display: inline-block;
	border-radius: 999px;
	border: 1px solid transparent;
	padding: 6px 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* The 1280px step is a fit constraint too. Six labels need ~718px on one
   line but the row only offers ~641px at 1024 and ~717px at 1100 — so at
   1024–1279 they wrapped to two lines. Dropping to 8px padding and 13px
   type buys back ~88px, which clears it. Re-measure if a label is ever
   renamed: the margin here is genuinely thin. */
@media (min-width: 1280px) {
	.dhaara-nav__link,
	.dhaara-nav__list a {
		padding: 6px 12px;
		font-size: 14px;
	}
}

.dhaara-nav__link:hover,
.dhaara-nav__list a:hover {
	color: #ffffff;
}

.dhaara-nav__link.is-current,
.dhaara-nav__list .current-menu-item > a {
	border-color: rgba(34, 201, 189, 0.5);
	background-color: rgba(34, 201, 189, 0.08);
	color: var(--dh-accent-400);
}

/* ---- Hamburger ---- */

.dhaara-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background-color: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.dhaara-burger:hover {
	border-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

@media (min-width: 1024px) {
	.dhaara-burger {
		display: none;
	}
}

.dhaara-burger__close {
	display: none;
}

.dhaara-header.is-menu-open .dhaara-burger__open {
	display: none;
}

.dhaara-header.is-menu-open .dhaara-burger__close {
	display: block;
}

/* ---- Mobile drawer ----

   Collapsed with `grid-template-rows: 0fr` rather than `display: none`
   so the open/close height has something to animate. That means the
   links stay in the DOM while hidden, which is why `inert` (set from
   nav.js) is the actual off-switch for focus and the accessibility tree.

   Deliberately no `aria-hidden` alongside `inert`: inert already implies
   it, and a bare `aria-hidden` element containing links is exactly what
   the axe `aria-hidden-focus` rule flags. */
.dhaara-drawer {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background-color: rgba(0, 0, 0, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
}

.dhaara-drawer.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

@media (min-width: 1024px) {
	.dhaara-drawer {
		display: none;
	}
}

.dhaara-drawer__inner {
	min-height: 0;
}

/* Vertical padding only — the horizontal gutters come from the parent
   <header>, same as the row above. */
.dhaara-drawer__nav {
	display: flex;
	flex-direction: column;
	max-width: var(--dh-container);
	margin-inline: auto;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* When a WordPress menu is assigned to the `primary` location, both the
   bar and the drawer render it through wp_nav_menu() — so the drawer's
   copy needs the stacked treatment applied to the generated <ul> as well
   as to the hard-coded links. Without this the drawer inherits the
   desktop pill styling and renders as a cramped horizontal row. */
.dhaara-nav__list--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.dhaara-nav__link--mobile,
.dhaara-nav__list--mobile a {
	display: block;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0;
	padding: 12px 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
}

.dhaara-nav__link--mobile:last-child,
.dhaara-nav__list--mobile li:last-child a {
	border-bottom: 0;
}

.dhaara-nav__link--mobile:hover,
.dhaara-nav__list--mobile a:hover {
	color: var(--dh-accent-400);
}

.dhaara-nav__link--mobile.is-current {
	border: 1px solid rgba(34, 201, 189, 0.5);
	border-radius: 999px;
	background-color: rgba(34, 201, 189, 0.08);
	padding-inline: 12px;
	color: var(--dh-accent-400);
}

/* ==========================================================================
   7. CTA pill

   `<Button variant="primary">` on dhaara.com: teal fill, black text, a
   soft teal shadow. Navigates in the same tab — no target="_blank" — which
   is a site-wide convention, not an oversight.
   ========================================================================== */

.dhaara-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	background-color: var(--dh-accent);
	padding: 10px 20px;
	font-family: inherit;
	font-size: 15px;
	/* Explicit, NOT inherited. The pill's height is padding + line box, so
	   inheriting the body's 1.6 made it 2.4px taller than the same button
	   on dhaara.com, which inherits Tailwind's `line-height: 1.5` from
	   preflight. Pinning it here keeps the button a fixed, known height
	   regardless of what body line-height is set to. */
	line-height: 1.5;
	font-weight: 500;
	color: var(--dh-bg);
	white-space: nowrap;
	box-shadow: 0 10px 30px -10px rgba(34, 201, 189, 0.55);
	transition: background-color 0.2s ease;
}

.dhaara-cta:hover {
	background-color: var(--dh-accent-400);
	color: var(--dh-bg);
}

.dhaara-cta:active {
	background-color: var(--dh-accent-600);
}

/* The navbar pill. Measured against dhaara.com's own navbar CTA: 35.5px
   tall below 640 (8+8 padding + a 19.5px line box at 13px) and exactly
   40px from 640 up (10+10 + a 20px line box at 14px). The 20px value is
   Tailwind's `text-sm` pairing, which is why it is not simply 14 x 1.5. */
.dhaara-cta--sm {
	padding: 8px 16px;
	font-size: 13px;
	line-height: 19.5px;
}

@media (min-width: 640px) {
	.dhaara-cta--sm {
		padding: 10px 20px;
		font-size: 14px;
		line-height: 20px;
	}
}

.dhaara-cta--lg {
	padding: 14px 28px;
	font-size: 16px;
}

.dhaara-cta--block {
	display: flex;
	width: 100%;
	margin-bottom: 12px;
	padding: 14px 24px;
	font-size: 15px;
}

/* The one non-teal button variant, for "back to..." links where a primary
   teal pill would compete with the section's real CTA. */
.dhaara-cta--secondary {
	border: 1px solid rgba(240, 238, 233, 0.15);
	background-color: rgba(240, 238, 233, 0.04);
	color: var(--dh-cream);
	box-shadow: none;
}

.dhaara-cta--secondary:hover {
	border-color: rgba(34, 201, 189, 0.5);
	background-color: rgba(240, 238, 233, 0.07);
	color: var(--dh-cream);
}

/* ==========================================================================
   8. Eyebrow

   The small all-caps pill above every section title. Uppercasing is done
   in CSS so the PHP passes natural-case copy and screen readers announce
   words rather than letters.
   ========================================================================== */

.dhaara-eyebrow {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	border: 1px solid;
	padding: 6px 16px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.dhaara-eyebrow {
		font-size: 12px;
	}
}

.dhaara-eyebrow--accent {
	border-color: rgba(34, 201, 189, 0.3);
	background-color: rgba(34, 201, 189, 0.08);
	color: var(--dh-accent-400);
}

.dhaara-eyebrow--warn {
	border-color: rgba(201, 120, 90, 0.3);
	background-color: rgba(201, 120, 90, 0.06);
	color: var(--dh-warn);
}

.dhaara-eyebrow--link:hover {
	border-color: var(--dh-accent);
	color: var(--dh-accent-400);
}

/* ==========================================================================
   9. Section titles + hero

   The canonical title scale: 36 → 44 → 52 → 60px across breakpoints,
   Medium 500, leading 1.05, tight tracking. Applied to every top-of-page
   H1 and every section H2 site-wide. Don't introduce alternative sizes —
   the visual rhythm across dhaara.com and this blog depends on the two
   using one scale.
   ========================================================================== */

.dhaara-section-title {
	margin: 0;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: balance;
}

@media (min-width: 640px) {
	.dhaara-section-title {
		font-size: 44px;
	}
}

@media (min-width: 768px) {
	.dhaara-section-title {
		font-size: 52px;
	}
}

@media (min-width: 1024px) {
	.dhaara-section-title {
		font-size: 60px;
	}
}

/* The accent half of every two-tone headline. The rule on dhaara.com is
   that no section title is ever a single colour — one part is the base
   colour, the other a contrasting accent. On the black canvas that pair
   is white over the lighter teal. */
.dhaara-accent {
	color: var(--dh-accent-400);
}

.dhaara-hero {
	padding-top: 24px;
	padding-bottom: 24px;
}

@media (min-width: 768px) {
	.dhaara-hero {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

.dhaara-hero--compact .dhaara-section-title {
	font-size: 32px;
}

@media (min-width: 768px) {
	.dhaara-hero--compact .dhaara-section-title {
		font-size: 44px;
	}
}

.dhaara-hero__title {
	margin-top: 16px;
}

.dhaara-hero__body {
	max-width: 640px;
	margin: 20px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
	.dhaara-hero__body {
		font-size: 17px;
	}
}

.dhaara-hero__search {
	margin-top: 24px;
	max-width: 520px;
}

/* ==========================================================================
   10. Post grid + cards
   ========================================================================== */

.dhaara-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* A blog listing stays a plain stacked grid on mobile rather than taking
   dhaara.com's horizontal snap-scroll treatment. That pattern exists to
   hint "there is more sideways" for a fixed set of 3–4 cards; an archive
   is an open-ended list, and hiding most of it off-screen would bury the
   posts rather than tease them. */
@media (min-width: 700px) {
	.dhaara-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dhaara-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

.dhaara-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--dh-radius-card);
	border: 1px solid var(--dh-hairline);
	background: var(--dh-card-bg);
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.dhaara-card:hover {
	border-color: rgba(34, 201, 189, 0.4);
	transform: translateY(-2px);
}

.dhaara-card__media {
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background-color: var(--dh-bg-card);
}

.dhaara-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dhaara-card:hover .dhaara-card__img {
	transform: scale(1.03);
}

/* Posts with no featured image get a typed teal panel at the same aspect
   ratio. A grid where some tiles have media and others start at the title
   reads as broken, so the placeholder holds the shape. */
.dhaara-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(140deg, rgba(34, 201, 189, 0.14) 0%, rgba(0, 0, 0, 0) 65%);
}

.dhaara-card__img--placeholder span {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(34, 201, 189, 0.45);
}

.dhaara-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
}

@media (min-width: 768px) {
	.dhaara-card__body {
		padding: 24px;
	}
}

.dhaara-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #ffffff;
	text-wrap: pretty;
}

.dhaara-card__link {
	color: inherit;
}

/* Makes the whole card clickable without wrapping it in an <a>. Wrapping
   would nest the category link inside the card link — invalid markup, and
   the inner link stops being reachable. The overlay sits under the
   category pill's own stacking position, so that link still wins. */
.dhaara-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.dhaara-card__link:hover {
	color: var(--dh-accent-400);
}

.dhaara-card .dhaara-eyebrow--link {
	position: relative;
	z-index: 1;
}

.dhaara-card__excerpt {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.65);
}

.dhaara-meta {
	margin: auto 0 0;
	padding-top: 4px;
	font-size: 12.5px;
	color: var(--dh-muted);
}

.dhaara-meta__dot {
	color: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.dhaara-pagination {
	margin-top: 40px;
}

.dhaara-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.dhaara-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--dh-hairline);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dhaara-pagination .page-numbers:hover {
	border-color: rgba(34, 201, 189, 0.5);
	color: #ffffff;
}

.dhaara-pagination .page-numbers.current {
	border-color: rgba(34, 201, 189, 0.5);
	background-color: rgba(34, 201, 189, 0.08);
	color: var(--dh-accent-400);
}

.dhaara-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
   12. Empty states + quick links
   ========================================================================== */

.dhaara-empty {
	max-width: var(--dh-measure);
	margin-inline: auto;
	padding: 48px 24px;
	border-radius: var(--dh-radius-panel);
	border: 1px solid var(--dh-hairline);
	background: var(--dh-card-bg);
	text-align: center;
}

.dhaara-empty__title {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	color: #ffffff;
}

.dhaara-empty__body {
	margin: 12px auto 24px;
	max-width: 42ch;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.65);
}

.dhaara-quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.dhaara-quick-links__item {
	border-radius: 999px;
	border: 1px solid var(--dh-hairline);
	padding: 10px 18px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dhaara-quick-links__item:hover {
	border-color: rgba(34, 201, 189, 0.5);
	color: var(--dh-accent-400);
}

/* ==========================================================================
   13. Article
   ========================================================================== */

.dhaara-article {
	padding-top: 24px;
	padding-bottom: 32px;
}

@media (min-width: 768px) {
	.dhaara-article {
		padding-top: 40px;
		padding-bottom: 48px;
	}
}

.dhaara-article__header-inner,
.dhaara-article__body,
.dhaara-article__tags,
.dhaara-post-nav,
.dhaara-comments,
.dhaara-page-links {
	max-width: var(--dh-measure);
	margin-inline: auto;
}

.dhaara-article__header-inner > .dhaara-eyebrow {
	margin-bottom: 16px;
}

.dhaara-article__title {
	/* One step below the canonical scale at the top end. A 60px headline
	   over a 720px reading measure runs to five or six words a line and
	   reads as a poster rather than an article; the marketing site's H1s
	   sit over a much wider column. The lower breakpoints are unchanged,
	   so the two sites match everywhere the measure is comparable. */
	font-size: 32px;
}

@media (min-width: 640px) {
	.dhaara-article__title {
		font-size: 40px;
	}
}

@media (min-width: 768px) {
	.dhaara-article__title {
		font-size: 48px;
	}
}

.dhaara-article__title + .dhaara-meta {
	margin-top: 20px;
	font-size: 13.5px;
}

.dhaara-article__media {
	max-width: var(--dh-container);
	margin: 32px auto 0;
}

.dhaara-article__img {
	width: 100%;
	border-radius: var(--dh-radius-panel);
	/* No glow halo behind images. Earlier iterations of the marketing site
	   wrapped every render in a blurred teal div; all of them were pulled
	   because the halo flashes teal before the section's fade-in lands. */
}

.dhaara-article__caption {
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
	color: var(--dh-muted);
}

.dhaara-article__body {
	margin-top: 40px;
}

.dhaara-article__tags {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dhaara-article__tags a {
	border-radius: 999px;
	border: 1px solid var(--dh-hairline);
	padding: 6px 14px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.7);
}

.dhaara-article__tags a:hover {
	border-color: rgba(34, 201, 189, 0.5);
	color: var(--dh-accent-400);
}

/* ---- Prose ----

   Styles the raw block/classic output the editor produces. Kept as
   descendant selectors on a single wrapper class, the same shape as the
   `.legal-content` block on dhaara.com. */

.dhaara-prose {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 768px) {
	.dhaara-prose {
		font-size: 17px;
	}
}

.dhaara-prose > * + * {
	margin-top: 1.15em;
}

.dhaara-prose h2,
.dhaara-prose h3,
.dhaara-prose h4 {
	color: #ffffff;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-top: 1.9em;
	margin-bottom: 0.5em;
}

.dhaara-prose h2 {
	font-size: 26px;
}

.dhaara-prose h3 {
	font-size: 21px;
}

.dhaara-prose h4 {
	font-size: 18px;
}

@media (min-width: 768px) {
	.dhaara-prose h2 {
		font-size: 30px;
	}

	.dhaara-prose h3 {
		font-size: 23px;
	}
}

.dhaara-prose p {
	margin: 0;
}

.dhaara-prose a {
	color: var(--dh-accent-400);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(91, 224, 214, 0.4);
}

.dhaara-prose a:hover {
	color: #ffffff;
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.dhaara-prose strong,
.dhaara-prose b {
	color: #ffffff;
	font-weight: 600;
}

.dhaara-prose ul,
.dhaara-prose ol {
	margin-left: 1.25em;
	padding-left: 0.25em;
}

.dhaara-prose ul {
	list-style: disc;
}

.dhaara-prose ol {
	list-style: decimal;
}

.dhaara-prose li + li {
	margin-top: 0.4em;
}

.dhaara-prose li::marker {
	color: var(--dh-accent);
}

.dhaara-prose blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--dh-accent);
	font-size: 1.1em;
	font-style: italic;
	color: rgba(255, 255, 255, 0.88);
}

.dhaara-prose blockquote cite {
	display: block;
	margin-top: 0.8em;
	font-size: 0.8em;
	font-style: normal;
	color: var(--dh-muted);
}

.dhaara-prose img,
.dhaara-prose figure img {
	border-radius: var(--dh-radius-card);
}

.dhaara-prose figure {
	margin: 1.8em 0;
}

.dhaara-prose figcaption,
.dhaara-prose .wp-caption-text {
	margin-top: 10px;
	font-size: 13px;
	text-align: center;
	color: var(--dh-muted);
}

.dhaara-prose code {
	border-radius: 5px;
	border: 1px solid var(--dh-hairline);
	background-color: rgba(240, 238, 233, 0.05);
	padding: 2px 6px;
	font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
	font-size: 0.88em;
	color: var(--dh-accent-400);
}

.dhaara-prose pre {
	overflow-x: auto;
	border-radius: var(--dh-radius-card);
	border: 1px solid var(--dh-hairline);
	background-color: var(--dh-bg-card);
	padding: 20px;
	font-size: 14px;
	line-height: 1.6;
}

.dhaara-prose pre code {
	border: 0;
	background: none;
	padding: 0;
	color: var(--dh-cream);
}

.dhaara-prose hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--dh-hairline);
}

/* Tables scroll inside their own container rather than widening the page.
   `display: block` on the table is what makes `overflow-x` apply to it —
   a table element ignores overflow in its default display mode. */
.dhaara-prose table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.dhaara-prose th,
.dhaara-prose td {
	border: 1px solid var(--dh-hairline);
	padding: 10px 14px;
	text-align: left;
}

.dhaara-prose th {
	background-color: rgba(240, 238, 233, 0.04);
	color: #ffffff;
	font-weight: 600;
}

/* The base wrapper only rounds the corners. The 16:9 cage is a separate
   modifier that functions.php adds for video providers only — forcing it
   on every oEmbed would letterbox the ones that size themselves, like a
   tweet or a Spotify player. */
.dhaara-embed {
	margin: 1.8em 0;
	border-radius: var(--dh-radius-card);
	overflow: hidden;
}

.dhaara-embed--video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.dhaara-embed--video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Wide + full alignment ----

   `alignwide` breaks out to the container width and `alignfull` to the
   viewport. Both are computed from the 720px measure with negative
   margins rather than by changing the wrapper's width, so only the
   aligned element moves and the paragraphs around it stay put. */
.dhaara-prose .alignwide {
	width: min(var(--dh-container), calc(100vw - 48px));
	margin-inline: calc(50% - min(var(--dh-container), calc(100vw - 48px)) / 2);
	max-width: none;
}

.dhaara-prose .alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: none;
}

.dhaara-prose .alignfull img {
	border-radius: 0;
	width: 100%;
}

.dhaara-prose .alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
	max-width: 50%;
}

.dhaara-prose .alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
	max-width: 50%;
}

.dhaara-prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.dhaara-page-links {
	margin-top: 32px;
	font-size: 14px;
	color: var(--dh-muted);
}

/* ==========================================================================
   14. Post navigation
   ========================================================================== */

.dhaara-post-nav {
	display: grid;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--dh-hairline);
}

@media (min-width: 640px) {
	.dhaara-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dhaara-post-nav__link {
	display: block;
	border-radius: var(--dh-radius-card);
	border: 1px solid var(--dh-hairline);
	background: var(--dh-card-bg);
	padding: 18px 20px;
	transition: border-color 0.2s ease;
}

.dhaara-post-nav__link:hover {
	border-color: rgba(34, 201, 189, 0.4);
}

/* When there is no previous post the next link is the only child, and a
   two-column grid would leave it hanging on the left. Pushing it to the
   last column keeps "next" on the right where the arrow points. */
/* Only from the two-column breakpoint up. When there is no previous post
   the next link is the grid's only child and would otherwise sit on the
   left, so it is pushed to the last column — but in the single-column
   stack below 640px there is no column to push it to, and right-aligning
   a full-width card there just looks like a mistake. */
@media (min-width: 640px) {
	.dhaara-post-nav__link--next {
		grid-column: -2;
		text-align: right;
	}
}

.dhaara-post-nav__label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dh-accent-400);
}

.dhaara-post-nav__title {
	display: block;
	margin-top: 8px;
	font-size: 15.5px;
	line-height: 1.35;
	color: #ffffff;
}

/* ==========================================================================
   15. Comments
   ========================================================================== */

.dhaara-comments {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--dh-hairline);
}

.dhaara-comments__title {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 500;
	color: #ffffff;
}

.dhaara-comments__list,
.dhaara-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dhaara-comments__list .children {
	margin-top: 20px;
	padding-left: 20px;
	border-left: 1px solid var(--dh-hairline);
}

.dhaara-comments__list li.comment {
	margin-bottom: 24px;
}

.dhaara-comments .comment-body {
	border-radius: var(--dh-radius-card);
	border: 1px solid var(--dh-hairline);
	background: var(--dh-card-bg);
	padding: 20px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
}

.dhaara-comments .comment-author img {
	border-radius: 999px;
	vertical-align: middle;
	margin-right: 10px;
}

.dhaara-comments .comment-author .fn {
	color: #ffffff;
	font-style: normal;
	font-weight: 600;
}

.dhaara-comments .comment-metadata,
.dhaara-comments .comment-metadata a {
	font-size: 12.5px;
	color: var(--dh-muted);
}

.dhaara-comments .comment-reply-link {
	font-size: 13px;
}

.dhaara-comments .comment-respond {
	margin-top: 40px;
}

.dhaara-comments label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.dhaara-comments input[type='text'],
.dhaara-comments input[type='email'],
.dhaara-comments input[type='url'],
.dhaara-comments textarea {
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--dh-hairline-strong);
	background-color: rgba(240, 238, 233, 0.04);
	padding: 12px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--dh-cream);
}

.dhaara-comments input:focus,
.dhaara-comments textarea:focus {
	outline: none;
	border-color: var(--dh-accent);
}

.dhaara-comments .comment-form-comment,
.dhaara-comments .comment-form-author,
.dhaara-comments .comment-form-email,
.dhaara-comments .comment-form-url {
	margin-bottom: 16px;
}

.dhaara-comments .comment-notes,
.dhaara-comments .comment-form-cookies-consent label {
	font-size: 13px;
	color: var(--dh-muted);
}

.dhaara-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
}

.dhaara-comments .comment-form-cookies-consent label {
	margin: 0;
}

.dhaara-comments__closed {
	font-size: 14px;
	color: var(--dh-muted);
}

/* ==========================================================================
   16. Search form
   ========================================================================== */

.dhaara-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	border: 1px solid var(--dh-hairline-strong);
	background-color: rgba(240, 238, 233, 0.04);
	padding: 6px 6px 6px 18px;
	transition: border-color 0.2s ease;
}

.dhaara-search:focus-within {
	border-color: var(--dh-accent);
}

.dhaara-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 8px 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--dh-cream);
}

.dhaara-search__input:focus {
	outline: none;
}

.dhaara-search__input::placeholder {
	color: var(--dh-muted);
}

.dhaara-search__submit {
	flex-shrink: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--dh-accent);
	padding: 10px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--dh-bg);
	transition: background-color 0.2s ease;
}

.dhaara-search__submit:hover {
	background-color: var(--dh-accent-400);
}

/* Section 17 was the closing "Stop guessing / Start metering" CTA band.
   It was removed: on a blog every page ended with the same pitch, which
   read as an ad break after each post rather than as a finale. The navbar
   CTA is on screen at all times and does that job. The `.dhaara-cta`
   button styles in section 7 are still in use by the drawer, the empty
   states, and the comment form. */

/* ==========================================================================
   18. Footer
   ========================================================================== */

.dhaara-footer {
	border-top: 1px solid var(--dh-hairline);
	background-color: var(--dh-bg);
}

.dhaara-footer__top {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-top: 48px;
	padding-bottom: 48px;
	text-align: center;
}

@media (min-width: 768px) {
	.dhaara-footer__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 48px;
		padding-top: 64px;
		padding-bottom: 64px;
		text-align: left;
	}
}

.dhaara-logo--footer {
	height: 36px;
	width: auto;
}

.dhaara-footer__brand {
	max-width: 24rem;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.dhaara-footer__brand {
		margin-inline: 0;
	}
}

.dhaara-footer__tagline {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
	.dhaara-footer__tagline {
		font-size: 15px;
	}
}

.dhaara-footer__contact {
	max-width: 28rem;
}

.dhaara-footer__label {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dh-accent-400);
}

.dhaara-footer__list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.dhaara-footer__list > li + li {
	margin-top: 12px;
}

.dhaara-footer__list {
	font-size: 13.5px;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.dhaara-footer__list {
		font-size: 14.5px;
	}
}

.dhaara-footer__list a {
	color: #ffffff;
}

.dhaara-footer__list a:hover {
	color: var(--dh-accent-400);
}

/* `rgba(255,255,255,0.6)` and not `0.45`: at this size 0.45 measures about
   4.4:1 on black, just under the 4.5:1 AA floor. 0.6 clears it at ~7:1 and
   still reads as a muted label beside the brighter value. */
.dhaara-footer__key {
	margin-right: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.dhaara-footer__sub {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

.dhaara-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 20px;
	padding-bottom: 20px;
}

.dhaara-footer__policies {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
}

.dhaara-footer__policies a {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.7);
}

.dhaara-footer__policies a:hover {
	color: var(--dh-accent-400);
}

.dhaara-footer__divider {
	color: rgba(255, 255, 255, 0.25);
}

.dhaara-footer__copy {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--dh-muted);
}

/* ==========================================================================
   19. Sticky contact widget

   Two 56px circles pinned bottom-right — WhatsApp above, phone below.
   56px meets the WCAG 2.5.5 target-size guidance. z-index sits above page
   content but below any modal.
   ========================================================================== */

.dhaara-sticky {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 768px) {
	.dhaara-sticky {
		right: 24px;
		bottom: 24px;
	}
}

.dhaara-sticky__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	color: #ffffff;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8);
	transition: transform 0.2s ease;
}

.dhaara-sticky__btn:hover {
	transform: scale(1.05);
	color: #ffffff;
}

/* Official WhatsApp brand green — not a site token, and deliberately so:
   the button is recognised by its colour, and swapping it for the site
   teal would lose that. */
.dhaara-sticky__btn--whatsapp {
	background-color: #25d366;
}

.dhaara-sticky__btn--phone {
	background-color: var(--dh-accent);
	color: var(--dh-bg);
}

.dhaara-sticky__btn--phone:hover {
	color: var(--dh-bg);
}

/* A slow expanding ring behind the WhatsApp button. It draws the eye
   without moving the button itself, so nothing under the thumb shifts. */
.dhaara-sticky__ping {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background-color: rgba(37, 211, 102, 0.55);
	animation: dhaara-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
	z-index: -1;
}

@keyframes dhaara-ping {
	75%,
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

/* ==========================================================================
   20. Hosted widgets (Jetpack / WordPress.com)

   WordPress.com injects two widgets into single posts that this theme does
   not control: the "Like this:" button and the comment form. Both render
   inside an iframe served from another host, so their INTERIOR cannot be
   styled from here at all — no selector in this file reaches across that
   boundary. On a black page each one arrived as a white rectangle.

   What can be done from CSS is the outside: hide the one that is not
   wanted, and stop the other from reserving empty white space. The real
   fix for the comment form is a setting — see the note on it below.
   ========================================================================== */

/* Jetpack Likes, hidden. The "Like" button only works for signed-in
   WordPress.com account holders, which is close to none of a B2B water-
   metering audience, and it renders as a fixed-height white panel with a
   single small button floating in it.

   This is the belt to functions.php's braces: the `wpl_is_likes_visible`
   filter there should stop the widget being emitted at all, but it is a
   Jetpack filter and may not run on WordPress.com's hosted stack, in which
   case this rule catches it. Delete both to bring Likes back — and note
   that hiding it here still downloads the iframe, so the tidier off-switch
   is Settings -> Sharing in the dashboard. */
.sharedaddy.sd-like,
.jetpack-likes-widget-wrapper,
.post-likes-widget-placeholder,
#likes-other-gravatars {
	display: none !important;
}

/* The comment form iframe.

   Its background comes from the colour scheme chosen in the dashboard, NOT
   from this stylesheet — set that to Transparent (or Dark) under
   Jetpack -> Settings -> Comments, which on WordPress.com appears as the
   Comments section of Settings -> Discussion. Until that is changed the
   form stays white however this file is written.

   These rules do the part that is actually reachable: give the frame the
   site's corner radius, put it on the card surface so a transparent scheme
   has something dark behind it, and drop the fixed height WordPress.com
   reserves for a signed-out form. */
.dhaara-comments iframe[id*='jetpack'],
.dhaara-comments iframe.jetpack_remote_comment,
#respond iframe[id*='jetpack'] {
	width: 100%;
	border: 0;
	border-radius: var(--dh-radius-card);
	background-color: transparent;
	color-scheme: dark;
}

.dhaara-comments #respond,
.dhaara-comments .comment-respond {
	border-radius: var(--dh-radius-card);
	background: var(--dh-card-bg);
	border: 1px solid var(--dh-hairline);
	padding: 20px;
}

@media (min-width: 768px) {
	.dhaara-comments #respond,
	.dhaara-comments .comment-respond {
		padding: 24px;
	}
}

/* ==========================================================================
   21. WordPress core classes
   ========================================================================== */

.wp-caption {
	max-width: 100%;
}

.wp-block-image img {
	border-radius: var(--dh-radius-card);
}

.wp-block-quote {
	margin: 1.8em 0;
	padding-left: 20px;
	border-left: 2px solid var(--dh-accent);
	font-style: italic;
}

.wp-block-pullquote {
	border-top: 1px solid var(--dh-hairline);
	border-bottom: 1px solid var(--dh-hairline);
	padding: 2em 0;
	text-align: center;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--dh-hairline);
}

.wp-block-button__link {
	border-radius: 999px;
	background-color: var(--dh-accent);
	padding: 12px 24px;
	font-weight: 500;
	color: var(--dh-bg);
}

.wp-block-code {
	border-radius: var(--dh-radius-card);
	border: 1px solid var(--dh-hairline);
	background-color: var(--dh-bg-card);
	padding: 20px;
}

.has-accent-color { color: var(--dh-accent); }
.has-accent-400-color { color: var(--dh-accent-400); }
.has-cream-color { color: var(--dh-cream); }
.has-muted-color { color: var(--dh-muted); }
.has-warn-color { color: var(--dh-warn); }
.has-bg-color { color: var(--dh-bg); }

.has-accent-background-color { background-color: var(--dh-accent); }
.has-accent-400-background-color { background-color: var(--dh-accent-400); }
.has-cream-background-color { background-color: var(--dh-cream); }
.has-muted-background-color { background-color: var(--dh-muted); }
.has-warn-background-color { background-color: var(--dh-warn); }
.has-bg-background-color { background-color: var(--dh-bg); }

/* ==========================================================================
   22. Reduced motion

   Everything that moves here is decorative — the card lift, the image
   zoom, the WhatsApp ring, the drawer height. All of it collapses to its
   end state rather than being animated.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.dhaara-card:hover {
		transform: none;
	}

	.dhaara-card:hover .dhaara-card__img {
		transform: none;
	}

	.dhaara-sticky__ping {
		display: none;
	}
}