/*
Theme Name: Acini Builder Child
Theme URI: https://indx.co.il
Author: R2K
Author URI: https://r2k.co.il
Description: The INDX site (iNDEX Research & Development of Indices Ltd.): its components, brand tokens, index post type and data import, on top of the Acini Builder framework.
Template: acini-builder
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acini-builder
*/

/* ==========================================================================
   INDX brand
   Loaded after the parent's style.css (reset, accessibility, layout helpers,
   scroll reveal and neutral default tokens), so this :root replaces the
   parent's token values with the INDX design's.
   ========================================================================== */

/* Fonts. Rubik is the Hebrew face (and the Latin fallback); it is the only
   family the design exports actually embed, and it is a variable font, so one
   file per script covers every weight. Subsets mirror Google's, so a page only
   downloads the ranges it uses.
   Inter and Neulis Sans are Adobe Fonts, served by the client's web project
   (kit hrw3lol, enqueued in functions.php), which declares them as "inter-18pt"
   and "neulis-sans" — the names the tokens below use. If the kit fails to load,
   the browser skips them and Rubik is used.
   "Rubik Hebrew" is the same Hebrew file under a name of its own, listed first in
   the stacks so Hebrew letters never reach Inter / Neulis: those have no Hebrew,
   and Inter shapes a slash with the letter after it ("ו/או") into one
   missing-glyph box instead of letting the letter fall back to Rubik. */
@font-face {
	font-family: "Rubik Hebrew";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/rubik-hebrew.woff2") format("woff2");
	unicode-range: U+307-308, U+590-5FF, U+FB1D-FB4F;
}

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/rubik-hebrew.woff2") format("woff2");
	unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/rubik-latin-ext.woff2") format("woff2");
	unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/rubik-latin.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colour — surfaces. The site is light with dark bands; there is no dark
	   colour scheme in the design, so none is applied automatically. */
	--acini-bg: #ffffff;
	--acini-bg-subtle: #f5f5f5;
	--acini-bg-tint: #eefcfc;              /* pale-cyan band */
	--acini-bg-accent-subtle: #f3f0fe;     /* lavender fill, e.g. active TOC row */
	--acini-bg-inverse: #000000;           /* hero, footer */
	--acini-bg-inverse-raised: #191f21;    /* dark button, dark panel */
	--acini-bg-hero: #091315;              /* Home hero base, under the purple glow */

	/* Colour — text */
	--acini-text: #091315;
	--acini-text-soft: #2c2b2d;
	--acini-text-muted: #646868;
	--acini-text-inverse: #ffffff;
	--acini-text-inverse-muted: #c7c7c7;
	--acini-text-inverse-accent: #f1ecff;  /* light-violet label on a dark band */
	--acini-icon-accent: #bfb1ff;          /* lilac icon on a dark band: the index sheet button */

	/* Colour — lines */
	--acini-border: #dfdfdf;
	--acini-border-inverse: rgb(255 255 255 / 0.12);
	--acini-border-inverse-strong: rgb(255 255 255 / 0.3);

	/* Scrollbars (design: ::-webkit-scrollbar 4px, no track, #2a2a2a thumb, 2px radius) */
	--acini-scrollbar-size: 0.4rem;
	--acini-scrollbar-thumb: #2a2a2a;
	--acini-scrollbar-thumb-inverse: rgb(255 255 255 / 0.3); /* on a dark panel (search results) */

	/* Colour — accent (violet) */
	--acini-accent: #8052ff;
	--acini-accent-hover: #5218bf;
	--acini-accent-soft: #d6c7ff;          /* pill hover fill */
	--acini-accent-deep: #290b6a;          /* hero gradient start */
	--acini-accent-band: #e0dfff;          /* about-band gradient end */
	--acini-accent-contrast: #ffffff;
	--acini-accent-text: #631ee3;          /* violet text on light: chips, quote caption (6.8:1 on #f5f5f5) */
	--acini-mesh-violet: #631ee3;          /* Home hero moving background: base fill + violet blobs */
	--acini-mesh-lilac: #ac79ff;           /* Home hero moving background: light blobs */
	--acini-focus: #8052ff;

	/* Colour — data. Design values; see docs/design-tokens.md for contrast. */
	--acini-positive: #22b573;
	--acini-negative: #ff5858;

	/* Gradients */
	--acini-gradient-hero: linear-gradient(to left bottom, var(--acini-accent-deep) 0%, var(--acini-accent-deep) 50%, var(--acini-bg-inverse) 100%);
	--acini-gradient-band: linear-gradient(var(--acini-bg), var(--acini-accent-band));

	/* Typography */
	--acini-font-body: "Rubik Hebrew", "inter-18pt", "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--acini-font-heading: "Rubik Hebrew", "neulis-sans", "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--acini-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--acini-text-xs: 1.2rem;
	--acini-text-13: 1.3rem;           /* 13px: footer links, in the design */
	--acini-text-sm: 1.4rem;
	--acini-text-18: 1.8rem;           /* 18px: the careers card's paragraph, in the design */
	--acini-text-base: 1.6rem;
	--acini-text-lg: 2rem;
	--acini-text-xl: 2.4rem;
	--acini-text-2xl: 2.8rem;
	--acini-text-3xl: 3.2rem;
	--acini-text-4xl: 5.2rem;
	--acini-text-5xl: 8rem;

	/* Display sizes: the headline and numeral steps the pages use (one per
	   breakpoint step); px in the name, as with --acini-text-13. */
	--acini-text-40: 4rem;
	--acini-text-48: 4.8rem;           /* 48px: the post title from 1280px */
	--acini-text-64: 6.4rem;
	--acini-text-96: 9.6rem;
	--acini-text-97: 9.7rem;
	--acini-text-160: 16rem;
	--acini-text-200: 20rem;
	--acini-text-232: 23.2rem;

	--acini-weight-regular: 400;
	--acini-weight-medium: 500;
	--acini-weight-semibold: 600;
	--acini-weight-bold: 700;

	--acini-leading-tight: 1.2;
	--acini-leading-normal: 1.5;

	/* Spacing scale */
	--acini-space-2xs: 0.4rem;
	--acini-space-xs: 0.8rem;
	--acini-space-sm: 1.2rem;
	--acini-space-md: 1.6rem;
	--acini-space-lg: 2.4rem;
	--acini-space-2lg: 3.2rem;
	--acini-space-xl: 4rem;
	--acini-space-2xl: 6.4rem;
	--acini-space-3xl: 9.6rem;
	--acini-space-4xl: 12.8rem;

	/* Layout */
	--acini-container: 118.4rem;
	--acini-container-wide: 129.6rem;
	--acini-container-narrow: 70.4rem;
	--acini-container-xl: 140.8rem;        /* Home bands */
	--acini-container-max: 166.4rem;       /* the widest a band's content grows */
	--acini-gutter: var(--acini-space-md);
	/* Side padding of a full-width band (24 / 48 / 128px): stepped at 768 and 1024, not fluid. */
	--acini-gutter-section: var(--acini-space-lg);
	/* Side margins, measured from the design (Tailwind px-[clamp(...)]). The header and the
	   footer use DIFFERENT clamps, and neither has a max-width: the content runs edge to edge
	   inside the gutter at any viewport. Header 19.5 / 38 / 72 / 96px at 390 / 768 / 1440 / 1920;
	   footer 24 / 38 / 64 / 64px. */
	--acini-gutter-header: clamp(1.6rem, 5vw, 12.8rem);
	--acini-gutter-footer: clamp(2.4rem, 5vw, 6.4rem);
	--acini-gutter-page: var(--acini-gutter-header);
	/* Home bands: a fluid side margin with a 24px floor (24 / 38 / 72 / 96px at 390 / 768 / 1440 / 1920). */
	--acini-gutter-home: clamp(2.4rem, 5vw, 12.8rem);
	/* Space a dark hero leaves for the fixed header (design: an 86px spacer). */
	--acini-header-clearance: 8.6rem;

	/* Radius */
	--acini-radius: 0.4rem;
	--acini-radius-md: 0.8rem;
	--acini-radius-lg: 1rem;
	--acini-radius-xl: 1.6rem;
	--acini-radius-2xl: 2.4rem;
	--acini-radius-32: 3.2rem;          /* 32px: the post hero's media frame */
	--acini-radius-3xl: 4rem;
	--acini-radius-pill: 999.9rem;

	/* Elevation */
	--acini-shadow-soft: -0.7rem 0.2rem 0.5rem rgb(50 60 73 / 0.05), 0.5rem 0.5rem 2rem rgb(50 60 73 / 0.15), 0.2rem 0.2rem 0.5rem rgb(50 60 73 / 0.1); /* performance cards */
	--acini-shadow-card: 0 1.8rem 4.8rem rgb(9 19 21 / 0.18);

	/* Motion */
	--acini-transition: 180ms ease;
	--acini-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--acini-ease-slide: cubic-bezier(0.16, 1, 0.3, 1);
	--acini-duration-reveal: 0.7s;
}

@media (min-width: 48em) {
	:root {
		--acini-gutter-section: calc(var(--acini-space-xl) + var(--acini-space-xs)); /* 48px */
	}
}

@media (min-width: 64em) {
	:root {
		--acini-gutter-section: var(--acini-space-4xl); /* 128px */
	}
}

/* ==========================================================================
   Index quick-jump results (assets/js/index-search.js)
   ========================================================================== */

/* The list under the header and footer search fields. The form is its positioning box.
   Dark by default, like the header's search bar; --light under a white field (footer). */
.acini-search-panel {
	position: absolute;
	inset-block-start: calc(100% + var(--acini-space-xs));
	inset-inline: 0;
	z-index: 5;
	max-block-size: min(32rem, 60vh);
	padding: var(--acini-space-xs);
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: start;
	color: var(--acini-text-inverse);
	background: var(--acini-bg-inverse-raised);
	border: 1px solid var(--acini-border-inverse);
	border-radius: var(--acini-radius-lg);
	box-shadow: var(--acini-shadow-card);
	--acini-scrollbar: var(--acini-scrollbar-thumb-inverse);
}

.acini-search-panel[hidden] {
	display: none;
}

.acini-search-panel--light {
	color: var(--acini-text);
	background: var(--acini-bg);
	border-color: var(--acini-border);
	--acini-scrollbar: var(--acini-scrollbar-thumb);
}

.acini-search-panel__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.acini-search-panel__results a {
	display: block;
	padding: var(--acini-space-xs) var(--acini-space-sm);
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	color: inherit;
	text-decoration: none;
	border-radius: var(--acini-radius-md);
}

.acini-search-panel__results [aria-selected="true"] a {
	background: var(--acini-border-inverse);
	outline: 2px solid var(--acini-accent-soft);
	outline-offset: -2px;
}

.acini-search-panel--light .acini-search-panel__results [aria-selected="true"] a {
	background: var(--acini-bg-accent-subtle);
	outline-color: var(--acini-accent);
}

.acini-search-panel__empty {
	margin: 0;
	padding: var(--acini-space-xs) var(--acini-space-sm);
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	color: var(--acini-text-inverse-muted);
}

.acini-search-panel--light .acini-search-panel__empty {
	color: var(--acini-text-muted);
}

.acini-search-panel__empty:empty {
	display: none;
}

@media (hover: hover) {
	.acini-search-panel__results a:hover {
		background: var(--acini-border-inverse);
	}

	.acini-search-panel--light .acini-search-panel__results a:hover {
		background: var(--acini-bg-accent-subtle);
	}
}

/* ==========================================================================
   UI primitives: buttons, chip, tag.
   Sizes are the design's own (they do not sit on the spacing scale), so the
   padding lives in two local properties on the modifier that needs it.
   ========================================================================== */

.acini-btn {
	--acini-btn-py: 0.8rem;
	--acini-btn-px: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--acini-space-xs);
	padding: var(--acini-btn-py) var(--acini-btn-px);
	font-family: var(--acini-font-heading);
	font-size: var(--acini-text-xs);
	font-weight: var(--acini-weight-medium);
	line-height: 1.33;
	text-decoration: none;
	text-underline-offset: 0.25em;
	color: var(--acini-text);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--acini-radius-pill);
	cursor: pointer;
	transition:
		background-color var(--acini-transition),
		color var(--acini-transition),
		border-color var(--acini-transition);
}

.acini-btn--primary {
	color: var(--acini-accent-contrast);
	background: var(--acini-accent);
	border-color: var(--acini-accent);
}

.acini-btn--secondary {
	color: var(--acini-accent);
	background: var(--acini-bg);
	border-color: var(--acini-accent);
}

/* The roomier pill: "למשרות הפתוחות", "למדו עוד". */
.acini-btn--pill {
	--acini-btn-py: 1.4rem;
	--acini-btn-px: 4.2rem;
	font-family: var(--acini-font-body);
	font-size: var(--acini-text-sm);
	font-weight: var(--acini-weight-semibold);
	line-height: 1.5;
}

/* The small pill: jump links. */
.acini-btn--compact {
	font-family: var(--acini-font-body);
	line-height: 1.5;
}

.acini-btn--dark {
	--acini-btn-py: 1.1rem;
	font-family: var(--acini-font-body);
	font-size: var(--acini-text-sm);
	font-weight: var(--acini-weight-regular);
	line-height: 1.5;
	color: var(--acini-text-inverse);
	background: var(--acini-bg-inverse-raised);
	border-color: var(--acini-border-inverse);
}

@media (hover: hover) {
	.acini-btn:hover {
		text-decoration: underline;
	}

	.acini-btn--primary:hover {
		background: var(--acini-accent-hover);
		border-color: var(--acini-accent-hover);
	}

	.acini-btn--secondary:hover {
		color: var(--acini-accent-hover);
		background: var(--acini-accent-soft);
		border-color: var(--acini-accent-hover);
	}

	.acini-btn--dark:hover {
		color: var(--acini-text);
		background: var(--acini-bg);
		border-color: var(--acini-bg);
	}
}

/* A label above a heading: "ניתוחים מעמיקים, נתונים ומתודולוגיה…". */
.acini-chip {
	display: inline-block;
	padding: 0.5rem 1.4rem;
	font-family: var(--acini-font-body);
	font-size: var(--acini-text-xs);
	line-height: 1.5;
	color: var(--acini-accent-text);
	background: var(--acini-bg);
	border-radius: var(--acini-radius-pill);
}

/* A post's tag on a card: grey pill, label, then an accent dot. The dot is the first
   thing in the box, so it lands on the inline-start side (the right in Hebrew), as in
   the design. */
.acini-token {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 0.3rem;
	padding-inline: 1rem 0.8rem;
	font-family: var(--acini-font-heading);
	font-size: var(--acini-text-xs);
	font-weight: var(--acini-weight-medium);
	line-height: 1.5;
	color: var(--acini-text);
	background: var(--acini-bg-subtle);
	border-radius: var(--acini-radius-3xl);
}

.acini-token::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	background: var(--acini-accent);
	border-radius: 50%;
}

/* A small white label on a card: a person's role. */
.acini-tag {
	display: inline-block;
	padding: 0.1rem 1.2rem;
	font-family: var(--acini-font-heading);
	font-size: var(--acini-text-xs);
	font-weight: var(--acini-weight-medium);
	line-height: 1.33;
	color: var(--acini-text);
	background: var(--acini-bg);
	border-radius: var(--acini-radius-2xl);
}