/* ==========================================================================
   IP Shastra - site-wide presentation fixes
   Loaded after the theme stylesheet (priority 100) so equal-specificity
   rules win. Selectors are kept only as specific as they need to be.
   ========================================================================== */

:root {
	--ips-maroon: #800000;
	--ips-maroon-dark: #5c0000;
	--ips-gold: #f5b301;
	--ips-ink: #14181d;
	--ips-body: #4a5560;
}

/* --------------------------------------------------------------- header height
   Theme ships max-height:160px on the logo plus 18px navbar padding, giving a
   ~196px header. That is far taller than the nav needs and pushes every hero
   down the page. Cap the logo and tighten the bar. */

body.wp-custom-logo .custom-logo-link img {
	max-height: 72px;
	width: auto;
}

/* Scrolled ("headroom--not-top") state: slightly smaller again. */
body.wp-custom-logo .headroom--not-top .custom-logo-link img {
	max-height: 50px;
}

/* The 200px variant only applies when the site title is hidden; cap it too so
   the rule cannot reintroduce a tall header if that option is ever switched on. */
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
	max-height: 72px;
	max-width: 100%;
}

.navbar {
	padding: 12px 0;
}

.headroom--not-top .navbar {
	padding: 8px 0;
}

.custom-logo-link {
	line-height: 0;          /* kill the inline-block descender gap under the logo */
}

@media (max-width: 767px) {
	body.wp-custom-logo .custom-logo-link img {
		max-height: 52px;
	}
	.navbar {
		padding: 10px 0;
	}
}

/* --------------------------------------------------------------- team page
   Two member cards of very different bio lengths sat top-aligned in a row,
   leaving a large void beside the shorter one. Make them equal-height cards
   with readable measure and rhythm. */

.page-id-708 .elementor-widget-text-editor p {
	margin: 0 0 1rem;
	line-height: 1.75;
}

.page-id-708 .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.page-id-708 .elementor-widget-image img {
	border-radius: 50%;
}

/* --------------------------------------------------------------- a11y
   Visible focus ring anywhere the theme removed it. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ips-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.navbar,
	body.wp-custom-logo .custom-logo-link img {
		transition: none !important;
	}
}

/* --------------------------------------------------------------- typography
   The site already self-hosts Inter and Montserrat (wp-content/fonts/, 57
   @font-face rules, weights 200-700). Elementor's generated CSS instead asks
   for Roboto / Roboto Slab / Poppins, whose stylesheets 404 -- so every
   Elementor-styled string was falling back to the browser's default sans.
   Point everything at the two families that are actually present.

   Component styles under .ipsx- / .ipst- / .ipsp- / .ips-blog set their own
   sizes; only the family is inherited from here. */

:root {
	--ips-font-head: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ips-font-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--ips-font-body);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.page-title,
.site-title {
	font-family: var(--ips-font-head);
}

/* Elementor writes literal font-family:"Roboto" / "Poppins" into its generated
   per-post CSS. Those families do not exist here, so reclaim the elements. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-button {
	font-family: var(--ips-font-body);
}

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ips-font-head);
}

/* Readable defaults for long-form copy. */
body {
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 { line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
h2 { line-height: 1.2;  letter-spacing: -.015em; font-weight: 700; }
h3 { line-height: 1.3;  font-weight: 700; }
h4, h5, h6 { line-height: 1.35; font-weight: 700; }

/* Cap the measure on prose so lines stay readable on wide screens. */
.entry-content > p,
.elementor-widget-text-editor p {
	max-width: 68ch;
}

.elementor-widget-text-editor[data-widget_type="text-editor.default"] {
	max-width: none;
}

/* --------------------------------------------------------------- footer size
   The footer ran very tall: 24px menu-item padding, large heading margins and
   a full-width newsletter block stacked into a 4-column grid. Tighten the
   rhythm without removing anything. */

footer .elementor-widget-navigation-menu .menu-item a.hfe-menu-item {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: .93rem;
}

footer .elementor-widget-heading .elementor-heading-title {
	margin-bottom: .35rem;
	font-size: 1rem;
	letter-spacing: .02em;
}

footer .elementor-widget-text-editor p {
	margin-bottom: .4rem;
	line-height: 1.55;
	font-size: .9rem;
}

footer .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

footer .e-con-inner,
footer .e-con {
	--padding-block-start: 0px;
	--padding-block-end: 0px;
}

/* Trim the outer breathing room of the whole footer block. */
footer .elementor-element.e-con.e-parent {
	padding-top: clamp(1.75rem, 3vw, 2.75rem);
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

footer .elementor-widget-copyright {
	margin-top: .25rem;
	font-size: .82rem;
}

footer .news-letter-form {
	margin-top: .35rem;
}

/* --------------------------------------------------------------- latest posts
   [ips_latest_posts] section on the homepage. */

.ipsl {
	background: #ffffff;
	padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}

.ipsl__inner { max-width: 1180px; margin: 0 auto; }

.ipsl__head { text-align: center; max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }

.ipsl__eyebrow {
	margin: 0 0 .7rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ips-maroon);
}

.ipsl__title {
	margin: 0 0 .75rem;
	color: var(--ips-ink);
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
}

.ipsl__sub { margin: 0; color: var(--ips-body); line-height: 1.65; }

.ipsl__grid {
	display: grid;
	/* Cap the track so a single post does not stretch into one giant card. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 23rem));
	justify-content: center;
	gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.ipsl__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e4e7ea;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 24, 29, .06), 0 8px 24px rgba(20, 24, 29, .06);
	transition: transform .22s ease, box-shadow .22s ease;
}

.ipsl__card:hover,
.ipsl__card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(20, 24, 29, .08), 0 18px 40px rgba(20, 24, 29, .12);
}

.ipsl__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #e9ecef;
	overflow: hidden;
}

.ipsl__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ipsl__monogram {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 800;
	color: rgba(255, 255, 255, .9);
}

.ipsl__body { padding: 1.3rem 1.35rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; }

.ipsl__chip {
	align-self: flex-start;
	margin: 0 0 .6rem;
	padding: .26rem .6rem;
	border-radius: 999px;
	background: rgba(128, 0, 0, .08);
	color: var(--ips-maroon);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.ipsl .ipsl__card-title { margin: 0 0 .5rem; font-size: 1.12rem; line-height: 1.35; font-weight: 700; }
.ipsl .ipsl__card-title a { color: var(--ips-ink); text-decoration: none; }
.ipsl .ipsl__card-title a:hover { color: var(--ips-maroon); }

.ipsl__excerpt { margin: 0 0 .9rem; font-size: .93rem; line-height: 1.6; color: var(--ips-body); }
.ipsl__meta { margin: auto 0 0; font-size: .78rem; color: #7a848e; }

.ipsl__more { text-align: center; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }

.ipsl .ipsl__btn {
	display: inline-block;
	padding: .8rem 1.7rem;
	border-radius: 999px;
	background: var(--ips-maroon);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.ipsl .ipsl__btn:hover { background: var(--ips-maroon-dark); color: #fff; transform: translateY(-2px); }

.ipsl__empty { text-align: center; color: var(--ips-body); }

@media (prefers-reduced-motion: reduce) {
	.ipsl__card, .ipsl .ipsl__btn { transition: none; }
}

/* --------------------------------------------------------------- practice cards
   The five "Our Practices" tiles all reused the SAME patent illustration with the
   label printed across it. Five copies of one piece of clip-art reads as filler,
   so the artwork is dropped and each tile becomes a typographic plate in the
   brand palette. No content is lost - the label and link are the real data. */

.elementor-element-fbfc00d {
	gap: clamp(.9rem, 1.6vw, 1.4rem);
}

.elementor-element-fbfc00d > .e-con {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	padding: 1.25rem 1.15rem 1.2rem;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(150deg, #6d0000 0%, #3a0000 55%, #1b0000 100%);
	box-shadow: 0 1px 2px rgba(20, 24, 29, .1), 0 14px 34px rgba(20, 24, 29, .18);
	transition: transform .25s ease, box-shadow .25s ease;
}

/* hairline gold rule across the top of each tile */
.elementor-element-fbfc00d > .e-con::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.15rem;
	right: 1.15rem;
	height: 2px;
	background: linear-gradient(90deg, var(--ips-gold), rgba(245, 179, 1, 0));
	opacity: .9;
}

.elementor-element-fbfc00d > .e-con:hover {
	transform: translateY(-5px);
	box-shadow: 0 3px 6px rgba(20, 24, 29, .12), 0 24px 52px rgba(20, 24, 29, .28);
}

/* the repeated illustration is decorative only - remove it */
.elementor-element-fbfc00d .elementor-widget-image {
	display: none;
}

.elementor-element-fbfc00d > .e-con > .e-con {
	position: static;
	padding: 0;
	background: none;
	width: 100%;
	/* Elementor pulled this caption up over the artwork with --margin-top:-140%.
	   With the artwork hidden that shoved it outside the tile, where overflow
	   clipped it. Reset the margin custom properties Elementor actually reads. */
	--margin-top: 0%;
	--margin-bottom: 0%;
	--margin-left: 0%;
	--margin-right: 0%;
	margin: 0;
	align-self: flex-end;   /* caption sits on the base of the tile */
}

/* Elementor also emits `font-size:0px` on the label widget at a breakpoint, which
   the heading inherits. Restore a real size on the widget itself. */
.elementor-element-fbfc00d .elementor-element.elementor-widget-text-editor {
	font-size: 1rem;
}

.elementor-element-fbfc00d .elementor-widget-text-editor {
	margin: 0;
}

/* The labels are <h3 class="has-black-color"> and the link is a <p>/<a>, both
   coming from pasted block markup - hence the explicit element list and the
   need to beat WordPress's has-black-color preset on a dark tile. */
.elementor-element-fbfc00d .elementor-widget-text-editor:first-child :is(h1,h2,h3,h4,h5,h6,p) {
	margin: 0 0 .5rem;
	color: #fff;
	font-family: var(--ips-font-head);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: none;
}

.elementor-element-fbfc00d .elementor-widget-text-editor:last-child :is(h1,h2,h3,h4,h5,h6,p),
.elementor-element-fbfc00d .elementor-widget-text-editor:last-child a {
	margin: 0;
	color: var(--ips-gold);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-decoration: none;
}

/* WordPress preset colour classes would otherwise repaint these black. */
.elementor-element-fbfc00d .has-black-color,
.elementor-element-fbfc00d .has-text-color {
	color: inherit;
}

/* --------------------------------------------------------------- luxury polish
   Restrained, not decorative: consistent rhythm, a gold hairline under section
   headings, and buttons that read as buttons. */

.elementor-widget-divider .elementor-divider-separator {
	border-top-color: var(--ips-gold) !important;
	border-top-width: 3px !important;
	max-width: 3rem;
}

/* Section eyebrow/heading pairs on the homepage */
.elementor-widget-heading .elementor-heading-title {
	letter-spacing: -.01em;
}

/* The plain black pill buttons the page uses for More Details / Read More. */
.elementor-button,
.wp-block-button__link {
	border-radius: 999px;
	font-family: var(--ips-font-head);
	font-weight: 700;
	letter-spacing: .01em;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.elementor-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 24, 29, .18);
}

/* Team portraits: give them a subtle gold ring instead of a bare circle. */
.page-id-708 .elementor-widget-image img,
.elementor-element .elementor-widget-image img[src*="swapnil"],
.elementor-element .elementor-widget-image img[src*="shubhangi"] {
	box-shadow: 0 0 0 3px rgba(245, 179, 1, .55), 0 14px 30px rgba(20, 24, 29, .18);
}

/* Images with baked-in text (mission/vision monitors) read better framed. */
.elementor-widget-image img[src*="mission"],
.elementor-widget-image img[src*="vision"],
.elementor-widget-image img[src*="ourhistory"] {
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-fbfc00d > .e-con,
	.elementor-element-fbfc00d .elementor-widget-image img,
	.elementor-button,
	.wp-block-button__link {
		transition: none;
	}
}