/* =====================================================================
   TeamKids Careers module: tokens, careers type scale and blob masks.
   Version: see TK_CAREERS_VERSION in
   tk-careers.php.

   Tokens are global CSS vars. Typography is scoped to .tk-careers, so
   existing pages don't change. The header (utility bar, main nav incl. the
   Careers item and its dropdown) and the footer are the live
   site's own components and are deliberately left unstyled here.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
	/* Brand */
	--tk-orange: #FF8500;
	--tk-orange-hover: #E36F00;
	--tk-orange-tint: #FFF4E8;
	--tk-blue: #005DB8;
	--tk-light-blue: #449FD8;
	--tk-green: #62B846;
	--tk-yellow: #FAD604;
	--tk-yellow-ink: #8A7000;
	/* Neutrals */
	--tk-ink: #1D1D1D;
	--tk-ink-2: #3D3D3D;
	--tk-grey-text: #4A4A4A;
	--tk-grey-text-2: #555555;
	--tk-muted: #6E6E6E;
	--tk-muted-2: #8A8A8A;
	--tk-surface: #F5F5F5;
	--tk-border: #E4E4E4;
	--tk-border-2: #ECECEC;
	--tk-border-3: #DCDCDC;
	--tk-white: #FFFFFF;

	/* Role colour map */
	--tk-role-educator: #62B846;
	--tk-role-permanent-educator: #449FD8;
	--tk-role-2ic: #005DB8;
	--tk-role-director: #FF8500;
	--tk-role-regional-manager: #1D1D1D;
	--tk-role-holiday-inclusion: #FAD604;
	--tk-role-holiday-inclusion-ink: #8A7000;
	--tk-role-support-office: #449FD8;

	/* Type */
	--tk-font-fallback: Futura, 'Century Gothic', sans-serif;
	--tk-font-display: 'Barlow Condensed', var(--tk-font-fallback);
	--tk-font-body: 'Jost', var(--tk-font-fallback);
	--tk-fs-h1: clamp(52px, 6.6vw, 94px);
	--tk-fs-h2: clamp(38px, 4.6vw, 56px);
	--tk-fs-h2-guide: clamp(34px, 3.6vw, 46px);
	--tk-fs-h3: 24px;
	--tk-fs-eyebrow: 15px;
	--tk-fs-nav: 15px;
	--tk-fs-body: 17px;
	--tk-fs-lead: 20px;
	--tk-fs-button: 17px;
	--tk-fs-chip: 12.5px;
	--tk-fs-caption: 14px;

	/* Layout — 4px base grid */
	--tk-grid: 4px;
	--tk-content-max: 1240px;
	--tk-header-max: 1300px;
	--tk-side-pad: 32px;
	--tk-section-pad: 96px;

	/* Radii */
	--tk-radius-hero: 28px;
	--tk-radius-card: 22px;
	--tk-radius-card-sm: 18px;
	--tk-radius-card-lg: 24px;
	--tk-radius-role: 22px;
	--tk-radius-pill: 100px;
	--tk-radius-input: 12px;
	--tk-radius-dropdown: 16px;
	--tk-radius-nav-btn: 6px;
	--tk-radius-icon: 16px;

	/* Shadows */
	--tk-shadow-card: 0 8px 24px rgba(29, 29, 29, .05);
	--tk-shadow-card-2: 0 10px 30px rgba(29, 29, 29, .06);
	--tk-shadow-card-hover: 0 18px 44px rgba(29, 29, 29, .12);
	--tk-shadow-float: 0 24px 70px rgba(29, 29, 29, .14);
	--tk-shadow-dropdown: 0 20px 50px rgba(29, 29, 29, .16);
	--tk-shadow-persona: 0 12px 28px rgba(255, 133, 0, .18);

	/* Motion */
	--tk-ease: ease;
	--tk-dur: 180ms;
	--tk-dur-dropdown: 160ms;
}

/* ---------- Careers scope: base type + type scale ---------- */
.tk-careers {
	font-family: var(--tk-font-body);
	font-size: var(--tk-fs-body);
	line-height: 1.6;
	font-weight: 400;
	color: var(--tk-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.tk-careers p { text-wrap: pretty; }
.tk-careers a { color: var(--tk-blue); text-decoration: none; }
.tk-container { max-width: calc(var(--tk-content-max) + 2 * var(--tk-side-pad)); margin: 0 auto; padding: 0 var(--tk-side-pad); box-sizing: border-box; }

.tk-h1, .tk-h2, .tk-h2-guide, .tk-h3, .tk-eyebrow {
	font-family: var(--tk-font-display);
	text-transform: uppercase;
	margin: 0;
}
.tk-h1 { font-size: var(--tk-fs-h1); font-weight: 800; letter-spacing: .03em; line-height: .86; }
.tk-h2 { font-size: var(--tk-fs-h2); font-weight: 800; letter-spacing: .03em; line-height: .9; }
.tk-h2-guide { font-size: var(--tk-fs-h2-guide); font-weight: 800; letter-spacing: .03em; line-height: .9; }
.tk-h3 { font-size: var(--tk-fs-h3); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.tk-eyebrow { font-size: var(--tk-fs-eyebrow); font-weight: 700; letter-spacing: .16em; }
.tk-nav-link { font-family: var(--tk-font-display); font-size: var(--tk-fs-nav); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.tk-body { font-family: var(--tk-font-body); font-size: var(--tk-fs-body); font-weight: 400; line-height: 1.6; }
.tk-lead { font-family: var(--tk-font-body); font-size: var(--tk-fs-lead); font-weight: 300; line-height: 1.5; }
.tk-button-text { font-family: var(--tk-font-body); font-size: var(--tk-fs-button); font-weight: 600; }
.tk-chip { font-family: var(--tk-font-body); font-size: var(--tk-fs-chip); font-weight: 500; border-radius: var(--tk-radius-pill); }
.tk-caption { font-family: var(--tk-font-body); font-size: var(--tk-fs-caption); font-weight: 400; }

/* ---------- Blob image masks (paths inlined site-wide in the footer) ---------- */
.tk-blob-04 { clip-path: url(#tk-blob-04); }
.tk-blob-09 { clip-path: url(#tk-blob-09); }
.tk-blob-14 { clip-path: url(#tk-blob-14); }

/* ---------- Careers nav item ----------
   Careers (menu item 8792, class tk-careers-tab) is styled and behaves
   exactly like the other live nav items: native Impreza dropdown (same as
   Programs) and the live current-page highlight. No custom tab styling. */

/* Current-page blob on Careers: always the green one, as on the live
   /careers/ page. The header's dropdown rules otherwise pick the colour by
   which child is current (orange / blue / yellow / green), so each careers
   sub-page got a different blob. Geometry matches the live centred blob.
   Desktop only: the header hides these blobs at <=1180px. */
@media (min-width: 1181px) {
	html body .main-menu #menu-item-8792.current-menu-item::before,
	html body .main-menu #menu-item-8792.current-menu-ancestor::before,
	html body .main-menu #menu-item-8792.current_page_parent::before {
		content: url(/wp-content/uploads/2022/08/Group-8-v2.svg) !important;
		position: absolute !important;
		transform: translate(-50%, -50%) !important;
		left: 50% !important;
		top: 84% !important;
		right: auto;
		bottom: auto;
		width: 114px !important;
		z-index: auto;
	}
	/* White label on the blob, as on live (the header greys every item
	   that isn't .current-menu-item, which includes current ancestors). */
	html body .w-nav:first-child #menu-item-8792.current-menu-item > a .w-nav-title,
	html body .w-nav:first-child #menu-item-8792.current-menu-ancestor > a .w-nav-title,
	html body .w-nav:first-child #menu-item-8792.current_page_parent > a .w-nav-title {
		color: #fff !important;
	}
}