/*
Theme Name: NISSU
Theme URI: https://nissu.org/
Template: hello-elementor
Author: KasiryeLabs
Author URI: https://kasiryelabs.com
Description: Network for Infrastructure Social Scientists Uganda (NISSU) — a professional network for social scientists working in the planning, implementation, monitoring and evaluation of infrastructure development projects.
Tags: professional-network, membership, directory, elementor
Version: 3.3.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nissu
*/

/* --------------------------------------------------------------------------
 * Brand palette
 *
 * Sampled directly from the NISSU logo. The orange chevron gives the anchor
 * colour; the six interlocking rings above it give the accent set.
 *
 * Two things to know before editing:
 *
 * 1. `--nissu-orange` is the true logo orange. It has a 2:1 contrast ratio
 *    against white, so it fills shapes and carries dark text — it never sets
 *    light text. `--nissu-primary` is the deepened version that is safe for
 *    links and body-weight text on a white ground.
 * 2. The four cluster colours are not decoration. NISSU groups its experts by
 *    infrastructure type, and each cluster owns one ring colour so a profile
 *    card reads as its cluster at a glance.
 *
 * `--nissu-*` is the canonical name; the `--ast-global-color-*` aliases below
 * keep CSS written against the old Astra variables working unchanged.
 * ----------------------------------------------------------------------- */

:root {
	--nissu-orange: #f3941e;        /* logo orange — accents, CTAs, rules, cluster chips */
	--nissu-primary-deep: #08323f;        /* deepest petrol — dark panels and full-bleed bands */
	--nissu-primary: #0e5a73;        /* petrol from the logo's cyan ring — headings (6.8:1 on white) */
	--nissu-secondary: #b86608;        /* deepened orange — links and body-weight text on white (4.6:1) */
	--nissu-heading: #14202b;        /* heading ink */
	--nissu-text: #3d4855;        /* body copy */
	--nissu-surface-alt: #f4f6f7;        /* neutral panel ground — the orange stays the only warm note */
	--nissu-surface: #ffffff;        /* cards, page background */
	--nissu-border: #dde3e7;        /* neutral hairlines and card borders */
	--nissu-ink: #111111;        /* maximum-contrast text */

	/* Expert clusters — one logo ring each. See inc/class-nissu-team.php. */
	--nissu-cluster-physical: #e5162a;      /* red    — roads, rail, ports, energy, mining */
	--nissu-cluster-digital: #2dbdef;       /* cyan   — broadband, data and digital public infra */
	--nissu-cluster-social: #c9a70b;        /* yellow — water, health, education, community */
	--nissu-cluster-environmental: #27a752; /* green  — climate, ecosystems, waste, resilience */

	/* Self-hosted variable font, declared in assets/css/fonts.css. */
	--nissu-font: 'Google Sans Flex', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

	--nissu-radius: 12px;
	--nissu-content-width: 1200px;

	/* Back-compat aliases for the Astra-era variable names. */
	--ast-global-color-0: var( --nissu-primary );
	--ast-global-color-1: var( --nissu-secondary );
	--ast-global-color-2: var( --nissu-heading );
	--ast-global-color-3: var( --nissu-text );
	--ast-global-color-4: var( --nissu-surface-alt );
	--ast-global-color-5: var( --nissu-surface );
	--ast-global-color-6: var( --nissu-border );
	--ast-global-color-7: var( --nissu-ink );
	--ast-global-color-8: var( --nissu-ink );
}

/* --------------------------------------------------------------------------
 * Design tokens
 *
 * One shared vocabulary for surfaces, edges, depth and motion, so the Team
 * directory (theme) and the Trainee directory (plugin) read as one system
 * rather than two components that happen to share a colour.
 *
 * The plugin references these with hex fallbacks, so it still renders correctly
 * under a different theme.
 * ----------------------------------------------------------------------- */

:root {
	/*
	 * Surfaces — a soft neutral ramp rather than flat white on grey. Biased
	 * warm, toward the logo orange, so the page ground and the accent belong to
	 * the same family. (This ramp was cool-biased under the old blue palette.)
	 */
	--rw-surface: #ffffff;
	--rw-surface-sunken: #eef1f3;
	--rw-surface-tint: #f4f6f7;

	/* Hairlines. Lighter than --nissu-border, which reads as heavy at card size. */
	--rw-border: #eee7dd;
	--rw-border-strong: #dbd0c1;

	/* Ink — kept very slightly cool so it sits well on the petrol chrome. */
	--rw-ink: #14202b;
	--rw-ink-muted: #5a6472;
	--rw-ink-subtle: #8b9099;

	/* Radii */
	--rw-radius-xs: 8px;
	--rw-radius-sm: 12px;
	--rw-radius: 16px;
	--rw-radius-lg: 22px;
	--rw-radius-pill: 999px;

	/*
	 * Depth. Two-layer shadows — a tight contact shadow plus a wide ambient one —
	 * read as real elevation; a single large blur just looks like grey fog.
	 * Tinted with the petrol ink rather than pure black so it sits on the palette.
	 */
	--rw-shadow-xs: 0 1px 2px rgba( 20, 32, 43, 0.06 );
	--rw-shadow-sm: 0 1px 2px rgba( 20, 32, 43, 0.06 ), 0 2px 6px -1px rgba( 20, 32, 43, 0.07 );
	--rw-shadow-md: 0 2px 4px -1px rgba( 20, 32, 43, 0.07 ), 0 10px 22px -6px rgba( 20, 32, 43, 0.14 );
	--rw-shadow-lg: 0 4px 8px -2px rgba( 20, 32, 43, 0.08 ), 0 24px 48px -12px rgba( 20, 32, 43, 0.24 );
	--rw-ring: 0 0 0 3px rgba( 4, 92, 180, 0.30 );

	/* Motion */
	--rw-ease: cubic-bezier( 0.2, 0.7, 0.3, 1 );
	--rw-duration: 0.26s;

	/* Spacing rhythm */
	--rw-space-1: 0.25rem;
	--rw-space-2: 0.5rem;
	--rw-space-3: 0.75rem;
	--rw-space-4: 1rem;
	--rw-space-5: 1.5rem;
	--rw-space-6: 2rem;
	--rw-space-7: 3rem;
	--rw-space-8: 4rem;
}

/* --------------------------------------------------------------------------
 * Base typography
 *
 * Hello Elementor deliberately ships almost no styling, so the defaults Astra
 * used to provide are restated here. Elementor's global fonts (Outfit) still
 * drive anything built in the editor; this covers plain WordPress content.
 * ----------------------------------------------------------------------- */

body {
	color: var( --nissu-text );
	background-color: var( --nissu-surface );
	font-family: var( --nissu-font );
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	color: var( --nissu-heading );
	font-family: var( --nissu-font );
	font-weight: 600;
	line-height: 1.18;
	/* Large type set at default tracking looks loose; tighten as it grows. */
	letter-spacing: -0.021em;
	/* Even out ragged line lengths in headings, ignored where unsupported. */
	text-wrap: balance;
}

h1 { font-size: clamp( 2.1rem, 1.4rem + 2.4vw, 3.15rem ); }
h2 { font-size: clamp( 1.65rem, 1.2rem + 1.6vw, 2.35rem ); }
h3 { font-size: clamp( 1.3rem, 1.1rem + 0.85vw, 1.65rem ); }
h4 { font-size: clamp( 1.1rem, 1rem + 0.5vw, 1.3rem ); letter-spacing: -0.012em; }
h5, h6 { letter-spacing: -0.006em; }

p, li {
	text-wrap: pretty; /* avoids single-word last lines */
}

a {
	color: var( --nissu-secondary );
	text-decoration: none;
	/* Underline that sits clear of descenders instead of striking through them. */
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	transition: color var( --rw-duration ) var( --rw-ease );
}

/*
 * No underline, anywhere — a deliberate choice by the site owner.
 *
 * The visible problem it solves: cards whose whole body is a single link (blog,
 * team, trainees) underlined their heading, excerpt and date all at once on
 * hover. Links are now distinguished by colour, and shift colour on hover.
 *
 * Trade-off worth knowing: colour alone as the sole cue is weak for readers who
 * cannot distinguish it, so if underlines are ever wanted back, scope them to
 * prose only — `.rw-single__content p a` — never to bare `a`, or the card
 * problem returns.
 */
a:hover,
a:focus {
	color: var( --nissu-primary );
	text-decoration: none;
}

/*
 * One focus treatment everywhere: a solid ring in brand azure with a small
 * offset, so it stays visible on both light panels and photography.
 */
:focus-visible {
	outline: 2px solid var( --nissu-secondary );
	outline-offset: 2px;
	border-radius: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Give plain WordPress content a readable measure — but never Elementor-built
 * pages. Elementor manages its own container widths, and constraining
 * `.page-content` there would box in full-bleed hero sections. Elementor adds
 * `elementor-page` to the body only on pages it renders, so that is the switch.
 */
body:not( .elementor-page ) .site-main > .page-content,
body:not( .elementor-page ) .entry-content {
	max-width: var( --nissu-content-width );
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Buttons
 *
 * Deliberately opt-in. An earlier version styled every `button` that wasn't
 * Elementor's, which then had to be un-styled for each UI control the theme and
 * plugins add — and silently painted the team cards solid blue when they became
 * buttons. Only real submit/content buttons are styled here; anything that is a
 * button for accessibility reasons (cards, toggles, close controls) is left to
 * its own component styles.
 * ----------------------------------------------------------------------- */

.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.entry-content .wp-block-search__button {
	background-color: var( --nissu-primary );
	color: var( --nissu-surface );
	border: 0;
	border-radius: var( --rw-radius-xs );
	padding: 0.72em 1.5em;
	font-weight: 600;
	letter-spacing: 0.005em;
	cursor: pointer;
	box-shadow: var( --rw-shadow-sm );
	transition: background-color var( --rw-duration ) var( --rw-ease ),
		box-shadow var( --rw-duration ) var( --rw-ease ),
		transform var( --rw-duration ) var( --rw-ease );
}

.wp-block-button__link:active,
input[type="submit"]:active,
button[type="submit"]:active {
	transform: translateY( 1px );
	box-shadow: var( --rw-shadow-xs );
}

.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.entry-content .wp-block-search__button:hover {
	background-color: var( --nissu-secondary );
	color: var( --nissu-surface );
}

/* --------------------------------------------------------------------------
 * Forms
 * ----------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	color: var( --nissu-text );
	background-color: var( --rw-surface );
	border: 1px solid var( --rw-border-strong );
	border-radius: var( --rw-radius-xs );
	padding: 0.62em 0.85em;
	max-width: 100%;
	box-shadow: var( --rw-shadow-xs ) inset;
	transition: border-color var( --rw-duration ) var( --rw-ease ),
		box-shadow var( --rw-duration ) var( --rw-ease );
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var( --nissu-secondary );
	box-shadow: var( --rw-ring );
	outline: none;
}

::placeholder {
	color: var( --rw-ink-subtle );
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Small niceties Hello Elementor leaves out
 * ----------------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

blockquote {
	margin-inline: 0;
	padding: var( --rw-space-4 ) var( --rw-space-5 );
	border-left: 3px solid var( --nissu-secondary );
	background: var( --rw-surface-tint );
	border-radius: 0 var( --rw-radius-sm ) var( --rw-radius-sm ) 0;
	color: var( --rw-ink );
}

/* Tables scroll rather than force the page sideways on small screens. */
.entry-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var( --rw-border );
	border-radius: var( --rw-radius-sm );
	overflow: hidden;
}

th, td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var( --rw-border );
	text-align: left;
}

tr:last-child td {
	border-bottom: 0;
}

th {
	background: var( --rw-surface-sunken );
	color: var( --nissu-heading );
	font-weight: 600;
	letter-spacing: 0.01em;
}