/*
 * Jibek Jolu — theme overlay.
 *
 * Adds utility classes that the compiled v4 Kimi Tailwind bundle was tree-shaken
 * out of. The compiled `kimi.css` only contains classes the original React app
 * used; any class we introduce in our PHP templates that wasn't in that React
 * source needs to be defined here. Loaded after kimi.css so it can override.
 */

/* ─── Browser/WP resets (these were defaults in the React design but WP/Twenty-* themes
 *      restore underlined links and other UA styles, so we strip them back. ─── */
a, a:hover, a:focus, a:visited { text-decoration: none; color: inherit; }
button { background: transparent; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ─── Animation hook classes (initial states for JS-driven reveals) ─── */
.hero-stagger,
.advisory-hero-stagger,
.advisory-stagger,
.concepts-hero-stagger,
.about-hero-stagger,
.press-hero-stagger,
.membership-animate,
.cta-animate,
.footer-animate,
.careers-animate,
.media-animate,
.team-animate,
.partners-animate,
.services-animate,
.benefit-card,
.featured-card,
.award-card,
.faq-item,
.concept-card,
.press-card,
.team-card,
.partner,
.service-card,
.approach-item,
.announcement-row { opacity: 0; transform: translateY(40px); }
html.no-js .hero-stagger, html.no-js .advisory-hero-stagger, html.no-js .advisory-stagger, html.no-js .concepts-hero-stagger, html.no-js .about-hero-stagger, html.no-js .press-hero-stagger, html.no-js .membership-animate, html.no-js .cta-animate, html.no-js .footer-animate, html.no-js .careers-animate, html.no-js .media-animate, html.no-js .team-animate, html.no-js .partners-animate, html.no-js .services-animate, html.no-js .benefit-card, html.no-js .featured-card, html.no-js .award-card, html.no-js .faq-item, html.no-js .concept-card, html.no-js .press-card, html.no-js .team-card, html.no-js .partner, html.no-js .service-card, html.no-js .approach-item, html.no-js .announcement-row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hero-stagger,.advisory-hero-stagger,.advisory-stagger,.concepts-hero-stagger,.about-hero-stagger,.press-hero-stagger,.membership-animate,.cta-animate,.footer-animate,.careers-animate,.media-animate,.team-animate,.partners-animate,.services-animate,.benefit-card,.featured-card,.award-card,.faq-item,.concept-card,.press-card,.team-card,.partner,.service-card,.approach-item,.announcement-row { opacity: 1; transform: none; }
}
.kinetic-char { display: inline-block; }

/* Mission/Vision slide-in initial state — GSAP overrides on scroll trigger. */
.mv-left  { opacity: 0; transform: translateX(-80px); }
.mv-right { opacity: 0; transform: translateX(80px); }
@media (prefers-reduced-motion: reduce) {
	.mv-left, .mv-right { opacity: 1; transform: none; }
}

/* ─── Glass card surface ─── */
.glass-card { background-color: rgb(255 255 255 / 0.03); border: 1px solid rgb(255 255 255 / 0.06); border-radius: 4px; }
.glass-card:hover { background-color: rgb(255 255 255 / 0.05); }
/* kimi.css has a `.glass-card:hover` rule that puts a 32px terracotta glow (box-shadow)
 * + orange border on every glass card hover. The glow bleeds onto neighbouring cards
 * (visible on the Press → Awards row). Kill both with !important — keep only the
 * subtle background tint above. */
.glass-card:hover { box-shadow: none !important; border-color: rgb(255 255 255 / 0.06) !important; }
/* Award cards sit on solid bg-obsidian — backdrop-filter blur(24px) here produces
 * visible vertical ghost bands on dark sections. The blur isn't doing anything
 * useful for these cards. Disable just for awards + a couple of other cards on
 * pure-dark sections to kill the artefact. */
.award-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ─── Layout & sizing ─── */
.h-3 { height: 0.75rem; }
.h-\[130\%\] { height: 130%; }
.-mt-\[15\%\] { margin-top: -15%; }
.-left-\[7px\] { left: -7px; }

.max-w-3xl     { max-width: 48rem; }
.max-w-\[360px\] { max-width: 360px; }
.max-w-\[440px\] { max-width: 440px; }
.max-w-\[500px\] { max-width: 500px; }
.max-w-\[520px\] { max-width: 520px; }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[700px\] { max-width: 700px; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[1100px\]{ max-width: 1100px; }
.max-w-\[1320px\]{ max-width: 1320px; }

.min-h-\[50vh\] { min-height: 50vh; }
.min-h-\[60vh\] { min-height: 60vh; }
.min-h-\[70vh\] { min-height: 70vh; }
.min-h-\[80vh\] { min-height: 80vh; }
.min-w-\[220px\] { min-width: 220px; }
.w-\[100vw\] { width: 100vw; }
.h-\[100dvh\] { height: 100dvh; height: 100vh; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }
.aspect-\[4\/5\] { aspect-ratio: 4/5; }

.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-12 { grid-column: span 12 / span 12; }

.divide-y > * + * { border-top-width: 1px; }
.divide-white\/10 > * + * { border-color: rgb(255 255 255 / 0.1); }

.space-y-5  > * + * { margin-top: 1.25rem; }
.space-y-6  > * + * { margin-top: 1.5rem; }
.space-y-20 > * + * { margin-top: 5rem; }

/* ─── Spacing utilities ─── */
.mb-16 { margin-bottom: 4rem; }
.ml-3  { margin-left: 0.75rem; }
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.p-5   { padding: 1.25rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-\[80px\]  { padding-bottom: 80px; }
.pb-\[100px\] { padding-bottom: 100px; }
.pl-10 { padding-left: 2.5rem; }
.pl-\[10vw\] { padding-left: 10vw; }
.pr-\[15vw\] { padding-right: 15vw; }
.pt-2  { padding-top: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-32 { padding-top: 8rem; }
.pt-\[120px\] { padding-top: 120px; }
.pt-\[140px\] { padding-top: 140px; }
.pt-\[160px\] { padding-top: 160px; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }

/* ─── Type ─── */
.font-bold { font-weight: 700; }
.leading-relaxed { line-height: 1.625; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
.text-\[20vw\] { font-size: 20vw; line-height: 0.9; }
.text-\[12vw\] { font-size: 12vw; line-height: 0.9; }
.text-\[10vw\] { font-size: 10vw; line-height: 0.9; }
.text-white\/\[0\.04\] { color: rgb(255 255 255 / 0.04); }
.text-display-m { font-family: 'Playfair Display SC', serif; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.text-heading-s { font-family: 'Playfair Display SC', serif; font-size: 1.5rem; line-height: 1.2; }
.text-right { text-align: right; }
.text-white\/\[0\.025\] { color: rgb(255 255 255 / 0.025); }

/* ─── Background & gradient bits ─── */
.bg-white\/\[0\.04\] { background-color: rgb(255 255 255 / 0.04); }
.border-white\/15 { border-color: rgb(255 255 255 / 0.15); }
.from-obsidian\/30 { --tw-gradient-from: rgb(10 10 10 / 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-obsidian\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgb(10 10 10 / 0.7), var(--tw-gradient-to, transparent); }

/* ─── States ─── */
.hover\:bg-\[\#E07853\]:hover { background-color: #E07853; }
.hover\:bg-white\/\[0\.02\]:hover { background-color: rgb(255 255 255 / 0.02); }
.focus\:border-terracotta:focus { border-color: #D46843; }
.duration-\[400ms\] { transition-duration: 400ms; }

details.group[open] .group-open\:rotate-45 { transform: rotate(45deg); }

/* ─── Prose for the default page.php template ─── */
.prose-jjg p   { margin: 0 0 1.5em; }
.prose-jjg h2  { font-family: 'Playfair Display SC', serif; font-size: 2rem; margin: 2em 0 0.6em; color: #f5efe6; }
.prose-jjg h3  { font-family: 'Playfair Display SC', serif; font-size: 1.4rem; margin: 1.6em 0 0.4em; color: #f5efe6; }
.prose-jjg a   { color: #D46843; text-decoration: underline; text-underline-offset: 4px; }
.prose-jjg ul, .prose-jjg ol { margin: 0 0 1.5em 1.5em; }
.prose-jjg li  { margin-bottom: 0.4em; }

/* ─── sm: (640+) ─── */
@media (min-width: 640px) {
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── md: (768+) — most were tree-shaken from compiled bundle ─── */
@media (min-width: 768px) {
	.md\:hidden { display: none !important; }
	.md\:col-span-1 { grid-column: span 1 / span 1; }
	.md\:col-span-2 { grid-column: span 2 / span 2; }
	.md\:col-span-3 { grid-column: span 3 / span 3; }
	.md\:col-span-6 { grid-column: span 6 / span 6; }
	.md\:gap-4  { gap: 1rem; }
	.md\:gap-16 { gap: 4rem; }
	.md\:gap-20 { gap: 5rem; }
	.md\:mb-20  { margin-bottom: 5rem; }
	.md\:pb-32  { padding-bottom: 8rem; }
	.md\:pl-8   { padding-left: 2rem; }
	.md\:pr-8   { padding-right: 2rem; }
	.md\:space-y-28 > * + * { margin-top: 7rem; }
	.md\:text-\[18vw\] { font-size: 18vw; }
	.md\:text-right { text-align: right; }
}

/* ─── lg: (1024+) ─── */
@media (min-width: 1024px) {
	.lg\:hidden { display: none !important; }
	.lg\:flex { display: flex; }
	.lg\:w-\[34vw\] { width: 34vw; }
	.lg\:w-\[45\%\] { width: 45%; }
	.lg\:w-\[55\%\] { width: 55%; }
	.lg\:px-24 { padding-left: 6rem; padding-right: 6rem; }
}

/* ─── xl: (1280+) ─── */
@media (min-width: 1280px) {
	.xl\:px-24 { padding-left: 6rem; padding-right: 6rem; }
}

/* ─── Admin-bar offset for fixed header ─── */
body.admin-bar #jjg-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar #jjg-header { top: 46px; }
}

/* ─── Active nav link — ensure terracotta paints reliably (the kimi.css rule uses
 *     `rgb(212 104 67 / var(--tw-text-opacity, 1))` which getComputedStyle reports
 *     correctly but doesn't paint visibly in this build — forcing an explicit hex
 *     with !important fixes it). Weight stays at .text-nav default (400). ─── */
#jjg-header nav a.text-terracotta { color: #D46843 !important; }