/**
 * Franklin Hudson - site styles that Elementor's kit cannot express.
 *
 * 1. Section themes: the 7 Squarespace section colour themes in use (audit/tokens.json),
 *    applied by adding a CSS class to a container (Advanced > CSS Classes):
 *      fh-theme-white | fh-theme-light | fh-theme-bright | fh-theme-bright-inverse
 *      fh-theme-dark  | fh-theme-black | fh-theme-black-bold
 *    Colours come from the kit globals (--e-global-color-*), so changing a global colour in
 *    Site Settings updates every section. A colour set directly on a widget still wins.
 * 2. Display text (Bebas Neue) helper class.
 * 3. Header overlay + navigation, footer details.
 */

/* ------------------------------------------------------------------ 1. section themes */
.fh-theme-white,
.fh-theme-light,
.fh-theme-bright,
.fh-theme-bright-inverse,
.fh-theme-dark,
.fh-theme-black,
.fh-theme-black-bold {
	background-color: var(--fh-bg);
	color: var(--fh-text);
}
.fh-theme-white          { --fh-bg: var(--e-global-color-fhwhite);   --fh-text: var(--e-global-color-text);    --fh-heading: var(--e-global-color-primary);    --fh-btn-bg: var(--e-global-color-primary);   --fh-btn-text: var(--e-global-color-fhwhite); }
.fh-theme-light          { --fh-bg: var(--e-global-color-secondary); --fh-text: var(--e-global-color-text);    --fh-heading: var(--e-global-color-text);    --fh-btn-bg: var(--e-global-color-fhwhite);   --fh-btn-text: var(--e-global-color-text); }
.fh-theme-bright         { --fh-bg: var(--e-global-color-primary);   --fh-text: var(--e-global-color-fhwhite); --fh-heading: var(--e-global-color-fhwhite); --fh-btn-bg: var(--e-global-color-fhwhite);   --fh-btn-text: var(--e-global-color-primary); }
.fh-theme-bright-inverse { --fh-bg: var(--e-global-color-fhwhite);   --fh-text: var(--e-global-color-primary); --fh-heading: var(--e-global-color-primary); --fh-btn-bg: var(--e-global-color-primary);   --fh-btn-text: var(--e-global-color-fhwhite); }
.fh-theme-dark           { --fh-bg: var(--e-global-color-accent);    --fh-text: var(--e-global-color-fhwhite); --fh-heading: var(--e-global-color-fhwhite); --fh-btn-bg: var(--e-global-color-fhwhite);   --fh-btn-text: var(--e-global-color-text); }
.fh-theme-black          { --fh-bg: var(--e-global-color-text);      --fh-text: var(--e-global-color-fhwhite); --fh-heading: var(--e-global-color-fhwhite); --fh-btn-bg: var(--e-global-color-fhwhite);   --fh-btn-text: var(--e-global-color-text); }
/* Darkest 2 as customised on Squarespace: white text over an image background */
.fh-theme-black-bold     { --fh-bg: transparent;                     --fh-text: var(--e-global-color-fhwhite); --fh-heading: var(--e-global-color-fhwhite); --fh-btn-bg: var(--e-global-color-fhwhite);   --fh-btn-text: var(--e-global-color-text); }

.e-con[class*="fh-theme-"] :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--fh-heading); }
.e-con[class*="fh-theme-"] :is(.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-icon-list-text) { color: var(--fh-text); }
.e-con[class*="fh-theme-"] .elementor-widget-text-editor a { color: var(--fh-heading); text-decoration: none; }
.e-con[class*="fh-theme-"] .elementor-widget-text-editor a:hover { text-decoration: underline; }
.e-con[class*="fh-theme-"] .elementor-button { background-color: var(--fh-btn-bg); color: var(--fh-btn-text); fill: var(--fh-btn-text); }
.e-con[class*="fh-theme-"] .elementor-social-icon { background-color: transparent; }
.e-con[class*="fh-theme-"] .elementor-social-icon i { color: var(--fh-heading); }
.e-con[class*="fh-theme-"] .elementor-social-icon svg { fill: var(--fh-heading); }

/* ------------------------------------------------------------------ 2. display text */
.fh-display .elementor-heading-title { font-family: var(--e-global-typography-secondary-font-family), sans-serif; text-transform: uppercase; }

/* ------------------------------------------------------------------ 3. header */
/* Transparent header laid over the first section of every page (as on Squarespace). */
.elementor-location-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .elementor-location-header { top: 46px; } }

.fh-header .elementor-nav-menu--main .elementor-item { white-space: nowrap; }
.fh-header .elementor-nav-menu--main .sub-menu { min-width: 260px; }

/* Full-screen menu (popup) */
.fh-fullmenu .elementor-nav-menu--main .elementor-item { padding: 6px 0; }

/* ------------------------------------------------------------------ 4. footer */
.fh-footer .elementor-nav-menu--main .elementor-item { padding: 2px 0; }
.fh-footer .fh-legal strong { font-weight: 600; }
.e-con.fh-footer .elementor-widget-text-editor a { text-decoration: underline; text-underline-offset: 2px; } /* as on Squarespace */

/* ------------------------------------------------------------------ 5. accordions follow the section theme */
/* --fh-heading / --fh-text are inherited from the NEAREST fh-theme-* ancestor, so a white card inside a navy
   section gets dark titles and a navy section gets white ones. Widget-level colours set in Elementor still win. */
[class*="fh-theme-"] .elementor-widget-n-accordion {
	--n-accordion-title-normal-color: var(--fh-text);
	--n-accordion-title-hover-color: var(--fh-text);
	--n-accordion-title-active-color: var(--fh-text);
	--n-accordion-icon-normal-color: var(--fh-text);
	--n-accordion-icon-hover-color: var(--fh-text);
	--n-accordion-icon-active-color: var(--fh-text);
	--n-accordion-border-color: var(--fh-text);
}
/* Squarespace dividers: a 1px line above the first item and below every item (under the open content), in the
   text colour. No line between a title and its content, and no box around the open content (Elementor's default
   content border is reset here). Applies to every accordion with the fh-accordion class. */
.fh-accordion .e-n-accordion-item > .e-con { border: 0; }
.fh-accordion .e-n-accordion { border-top: 1px solid var(--n-accordion-border-color, currentColor); }
.fh-accordion .e-n-accordion-item { border-bottom: 1px solid var(--n-accordion-border-color, currentColor); }
[class*="fh-theme-"] .elementor-widget-n-accordion .e-n-accordion-item-title-icon svg { fill: var(--fh-text); }
/* Squarespace "centred" accordions: title text centred, icon at the far right */
.elementor-widget-n-accordion.fh-acc-center .e-n-accordion-item-title-header { flex-grow: 1; justify-content: center; text-align: center; }
/* Right-aligned titles stay right-aligned when they wrap (mobile) */
.elementor-widget-n-accordion.fh-acc-right .e-n-accordion-item-title-header { flex-grow: 1; justify-content: flex-end; text-align: right; }

/* Selectors carry .elementor-widget-n-accordion so they beat Elementor's widget CSS whatever the load order. */
/* Thin icons, drawn like Squarespace's (classes set by scripts/phase4/acc_style.py from the live measurements).
   The Font Awesome glyph is hidden and replaced by 1px lines (2px / 3px with fh-acc-s2 / fh-acc-s3):
   plus = two lines (one when open); chevron = a square with a right + bottom border rotated 45deg (down),
   -135deg when open. Size = the widget's "Icon size" (--n-accordion-icon-size), colour = the section theme. */
.elementor-widget-n-accordion.fh-acc-thin { --fh-acc-stroke: 1px; }
.elementor-widget-n-accordion.fh-acc-thin.fh-acc-s2 { --fh-acc-stroke: 2px; }
.elementor-widget-n-accordion.fh-acc-thin.fh-acc-s3 { --fh-acc-stroke: 3px; }
/* the icon keeps its size when the title grows (right-aligned / centred titles) */
.elementor-widget-n-accordion.fh-acc-thin .e-n-accordion-item-title-icon { flex-shrink: 0; }
.elementor-widget-n-accordion.fh-acc-thin .e-n-accordion-item-title-icon > span > svg,
.elementor-widget-n-accordion.fh-acc-thin .e-n-accordion-item-title-icon > span > i { display: none; }
.elementor-widget-n-accordion.fh-acc-thin .e-n-accordion-item-title-icon > span {
	position: relative;
	width: var(--n-accordion-icon-size, 14px);
	height: var(--n-accordion-icon-size, 14px);
	color: var(--n-accordion-icon-normal-color, currentColor);
}
.elementor-widget-n-accordion.fh-acc-thin .e-n-accordion-item-title-icon > span::before,
.elementor-widget-n-accordion.fh-acc-plus .e-n-accordion-item-title-icon > .e-closed::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
}
.elementor-widget-n-accordion.fh-acc-plus .e-n-accordion-item-title-icon > span::before {
	width: 100%; height: var(--fh-acc-stroke); background: currentColor; transform: translate(-50%, -50%);
}
.elementor-widget-n-accordion.fh-acc-plus .e-n-accordion-item-title-icon > .e-closed::after {
	width: var(--fh-acc-stroke); height: 100%; background: currentColor; transform: translate(-50%, -50%);
}
.elementor-widget-n-accordion.fh-acc-chevron .e-n-accordion-item-title-icon > span::before {
	width: 70.71%; height: 70.71%;
	border-right: var(--fh-acc-stroke) solid currentColor;
	border-bottom: var(--fh-acc-stroke) solid currentColor;
}
.elementor-widget-n-accordion.fh-acc-chevron .e-n-accordion-item-title-icon > .e-closed::before { transform: translate(-50%, -75%) rotate(45deg); }
.elementor-widget-n-accordion.fh-acc-chevron .e-n-accordion-item-title-icon > .e-opened::before { transform: translate(-50%, -25%) rotate(-135deg); }

/* ------------------------------------------------------------------ 6. FH Chart */
.fh-chart { position: relative; margin: 0; --fh-chart-axis: #666666; --fh-chart-grid: rgba(0, 0, 0, 0.12); }
.fh-chart__plot { height: 300px; }
.fh-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fh-chart--donut .fh-chart__svg path { stroke: #ffffff; stroke-width: 2; }
.fh-chart__grid { stroke: var(--fh-chart-grid); stroke-width: 1; }
.fh-chart__axis { fill: var(--fh-chart-axis); font-family: Poppins, sans-serif; font-size: 16px; font-weight: 300; }
.fh-chart__value { fill: var(--fh-chart-legend, var(--fh-text, currentColor)); font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; }
.fh-chart--donut .fh-chart__value { fill: #ffffff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; stroke-linejoin: round; } /* legible on light and dark slices */
.fh-chart__legend {
	position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0; list-style: none;
	font-family: Poppins, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.8;
	color: var(--fh-chart-legend, var(--fh-text, currentColor));
}
.fh-chart__legend li { display: flex; align-items: center; gap: 8px; }
.fh-chart__legend span { display: inline-block; width: 14px; height: 14px; }
.fh-chart__legend em { font-style: normal; opacity: .75; }
/* Value labels: hidden on mouse devices (tooltip on hover) unless the widget's "Value labels" switch is on;
   always printed on touch devices, where hover does not exist. */
.fh-chart__value, .fh-chart__legend-value { display: none; }
.fh-chart--values .fh-chart__value, .fh-chart--values .fh-chart__legend-value { display: inline; }
@media (hover: none) {
	.fh-chart__value, .fh-chart__legend-value { display: inline; }
}
/* Text alternative for screen readers */
.fh-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) {
	.fh-chart__plot { height: 240px; }
	.fh-chart--donut .fh-chart__legend { position: static; margin-bottom: 12px; }
	.fh-chart__axis, .fh-chart--bar .fh-chart__value { font-size: 22px; } /* SVG scales down on small screens: keep labels legible */
}

/* ------------------------------------------------------------------ 7. shape dividers (Squarespace section edges) */
.elementor-shape .fh-shape-stroke { stroke: var(--fh-heading, #143344); stroke-width: 3px; }
.fh-divider-stroke-light .elementor-shape .fh-shape-stroke { stroke: #ffffff; }
.fh-divider-stroke-dark .elementor-shape .fh-shape-stroke { stroke: var(--e-global-color-primary); }

/* 8. Captioned gallery tiles (alumni spotlights): caption follows the section theme */
.fh-caption-tile .widget-image-caption{color:var(--fh-text);font-style:normal;margin-bottom:0}

/* No self-link: the Accreditation block's "Learn more" is hidden on Accreditations & Rankings itself (P12-1) */
.fh-page-accreditations-rankings .fh-no-self-link { display: none; }