/*
Theme Name: Jewish Advocacy Network — Beta 1.1
Theme URI: https://jewishadvocacynetwork.com/
Description: An Astra child theme for Jewish Advocacy Network. Provides the Beta 1.1 contrast-safe color system, editorial typography, accessible focus styles, and reusable presentation patterns for Elementor Free templates and native WordPress content.
Author: Jewish Advocacy Network
Template: astra
Version: 0.1.1
Text Domain: jewish-advocacy-network
Tags: custom-colors, custom-logo, editor-style, featured-images, translation-ready
*/

/*
 * Jewish Advocacy Network — Beta 1.1 design tokens
 * The theme intentionally uses system font fallbacks. In Elementor Site Settings,
 * set Source Serif 4 (headings) and Manrope or Inter (body) if preferred.
 */
:root {
	--jan-navy: #072b5c;
	--jan-blue: #1667c9;
	--jan-teal: #08777b;
	--jan-pomegranate: #a92a3a;
	--jan-parchment: #f8f7f2;
	--jan-mist: #e8f0f8;
	--jan-ink: #132238;
	--jan-muted: #52657a;
	--jan-rule: #c9d6e4;
	--jan-white: #ffffff;

	/* Explicit semantic surface pairings — do not mix light/dark tokens casually. */
	--jan-surface-light: #f8f7f2;
	--jan-on-light: #132238;
	--jan-on-light-muted: #52657a;
	--jan-link-on-light: #145aa9;
	--jan-surface-dark: #072b5c;
	--jan-on-dark: #ffffff;
	--jan-on-dark-muted: #dcecff;
	--jan-link-on-dark: #ffffff;
	--jan-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--jan-sans: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--jan-radius-sm: 4px;
	--jan-radius-md: 10px;
	--jan-radius-lg: 18px;
	--jan-shadow: 0 18px 45px rgba(7, 43, 92, 0.10);
	--jan-content-width: 760px;
}

html {
	scroll-behavior: smooth;
}

body.jan-site,
.jan-site {
	background: var(--jan-parchment);
	color: var(--jan-ink);
	font-family: var(--jan-sans);
}

body.jan-site p,
.jan-site p {
	line-height: 1.75;
}

body.jan-site h1,
body.jan-site h2,
body.jan-site h3,
body.jan-site h4,
body.jan-site h5,
body.jan-site h6,
.jan-site h1,
.jan-site h2,
.jan-site h3,
.jan-site h4,
.jan-site h5,
.jan-site h6 {
	color: var(--jan-navy);
	font-family: var(--jan-serif);
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.12;
}

body.jan-site a,
.jan-site a {
	color: var(--jan-link-on-light);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

body.jan-site a:hover,
body.jan-site a:hover {
	color: var(--jan-navy);
}

/* Link color remains readable on dark surfaces by design. */
.jan-site .jan-surface-navy a,
.jan-site .jan-hero a,
.jan-site .site-footer a,
.jan-site .site-primary-footer-wrap a,
.jan-site .site-below-footer-wrap a {
	color: var(--jan-link-on-dark);
	text-decoration-color: currentColor;
}

body.jan-site :focus-visible,
.jan-site :focus-visible {
	outline: 3px solid var(--jan-teal);
	outline-offset: 3px;
}

/* Astra navigation baseline */
.jan-site .ast-primary-header-bar,
.jan-site .site-header {
	background-color: var(--jan-parchment);
	border-bottom: 1px solid var(--jan-rule);
}

.jan-site .main-header-menu .menu-link,
.jan-site .ast-header-account-wrap .ast-header-account-link {
	color: var(--jan-navy);
	font-family: var(--jan-sans);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.jan-site .main-header-menu .menu-link:hover,
.jan-site .main-header-menu .current-menu-item > .menu-link {
	color: var(--jan-blue);
}

.jan-site .ast-button,
.jan-site .elementor-button,
.jan-site input[type="submit"],
.jan-site button[type="submit"] {
	background: var(--jan-blue);
	border: 1px solid var(--jan-blue);
	border-radius: var(--jan-radius-sm);
	box-shadow: none;
	color: var(--jan-white);
	font-family: var(--jan-sans);
	font-weight: 800;
	letter-spacing: 0.01em;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.jan-site .ast-button:hover,
.jan-site .elementor-button:hover,
.jan-site input[type="submit"]:hover,
.jan-site button[type="submit"]:hover {
	background: var(--jan-navy);
	border-color: var(--jan-navy);
	color: var(--jan-white);
	transform: translateY(-1px);
}

/* Use .jan-button-secondary on an Elementor button widget or link wrapper. */
.jan-site .jan-button-secondary .elementor-button,
.jan-site .jan-button-secondary.elementor-button {
	background: transparent;
	border-color: var(--jan-blue);
	color: var(--jan-blue);
}

.jan-site .jan-button-secondary .elementor-button:hover,
.jan-site .jan-button-secondary.elementor-button:hover {
	background: var(--jan-mist);
	border-color: var(--jan-navy);
	color: var(--jan-navy);
}

/* On a navy hero, a white secondary action is easier to read than blue text. */
.jan-site .jan-hero .jan-button-secondary .elementor-button,
.jan-site .jan-hero .jan-button-secondary.elementor-button {
	background: transparent;
	border-color: var(--jan-white);
	color: var(--jan-white);
}

.jan-site .jan-hero .jan-button-secondary .elementor-button:hover,
.jan-site .jan-hero .jan-button-secondary.elementor-button:hover {
	background: var(--jan-white);
	border-color: var(--jan-white);
	color: var(--jan-navy);
}

/* Editorial utility classes usable in Elementor Advanced → CSS Classes. */
.jan-site .jan-eyebrow {
	color: var(--jan-teal);
	font-family: var(--jan-sans);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.jan-site .jan-lede {
	color: var(--jan-muted);
	font-family: var(--jan-serif);
	font-size: clamp(1.22rem, 1.1rem + 0.5vw, 1.55rem);
	line-height: 1.5;
}

.jan-site .jan-hero {
	background:
		radial-gradient(circle at 82% 18%, rgba(27, 138, 143, 0.25), transparent 29rem),
		linear-gradient(125deg, #072b5c 0%, #0e427f 52%, #1667c9 100%);
	color: var(--jan-white);
	overflow: hidden;
	position: relative;
}

.jan-site .jan-hero::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
	background-size: 46px 46px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.85), transparent 62%);
	pointer-events: none;
	position: absolute;
}

.jan-site .jan-hero > .elementor-container,
.jan-site .jan-hero > .e-con-inner {
	position: relative;
	z-index: 1;
}

.jan-site .jan-hero h1,
.jan-site .jan-hero h2,
.jan-site .jan-hero h3,
.jan-site .jan-hero .elementor-heading-title {
	color: var(--jan-white);
}

.jan-site .jan-hero .jan-eyebrow,
.jan-site .jan-hero .elementor-widget-text-editor,
.jan-site .jan-hero p {
	color: #dcecff;
}

.jan-site .jan-pillar-card,
.jan-site .jan-resource-card,
.jan-site .jan-voice-card,
.jan-site .jan-feature-card {
	background: var(--jan-white);
	border: 1px solid var(--jan-rule);
	border-radius: var(--jan-radius-md);
	box-shadow: 0 5px 18px rgba(7, 43, 92, 0.05);
	height: 100%;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.jan-site .jan-pillar-card:hover,
.jan-site .jan-resource-card:hover,
.jan-site .jan-voice-card:hover,
.jan-site .jan-feature-card:hover {
	border-color: var(--jan-blue);
	box-shadow: var(--jan-shadow);
	transform: translateY(-3px);
}

.jan-site .jan-pillar-card .elementor-widget-wrap,
.jan-site .jan-resource-card .elementor-widget-wrap,
.jan-site .jan-voice-card .elementor-widget-wrap,
.jan-site .jan-feature-card .elementor-widget-wrap {
	height: 100%;
}

.jan-site .jan-surface-mist {
	background: var(--jan-mist);
}

.jan-site .jan-surface-navy {
	background: var(--jan-navy);
	color: var(--jan-white);
}

.jan-site .jan-surface-navy h1,
.jan-site .jan-surface-navy h2,
.jan-site .jan-surface-navy h3,
.jan-site .jan-surface-navy h4,
.jan-site .jan-surface-navy .elementor-heading-title {
	color: var(--jan-on-dark);
}

.jan-site .jan-surface-navy p,
.jan-site .jan-surface-navy .elementor-widget-text-editor,
.jan-site .jan-surface-navy .jan-lede {
	color: var(--jan-on-dark-muted);
}

.jan-site .jan-surface-navy .jan-eyebrow {
	color: var(--jan-on-dark-muted);
}

.jan-site .jan-source-note {
	background: var(--jan-mist);
	border-left: 4px solid var(--jan-teal);
	border-radius: 0 var(--jan-radius-sm) var(--jan-radius-sm) 0;
	color: var(--jan-ink);
	font-size: 0.94rem;
	margin: 2rem 0;
	padding: 1.25rem 1.4rem;
}

.jan-site .jan-source-note strong {
	color: var(--jan-navy);
}

.jan-site .jan-article-meta,
.jan-site .jan-card-meta {
	color: var(--jan-muted);
	font-family: var(--jan-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jan-site .jan-timeline-entry {
	border-left: 2px solid var(--jan-blue);
	padding: 0.25rem 0 1.5rem 1.4rem;
	position: relative;
}

.jan-site .jan-timeline-entry::before {
	background: var(--jan-parchment);
	border: 4px solid var(--jan-teal);
	border-radius: 50%;
	content: "";
	height: 14px;
	left: -8px;
	position: absolute;
	top: 0.4rem;
	width: 14px;
}

.jan-site .entry-content > *,
.jan-site .single-post .entry-content > * {
	max-width: var(--jan-content-width);
}

.jan-site .entry-content > .alignwide,
.jan-site .entry-content > .alignfull {
	max-width: none;
}

.jan-site .entry-content blockquote {
	border-left: 4px solid var(--jan-teal);
	color: var(--jan-navy);
	font-family: var(--jan-serif);
	font-size: 1.35rem;
	font-style: normal;
	line-height: 1.45;
	margin: 2.5rem 0;
	padding: 0.2rem 0 0.2rem 1.4rem;
}

.jan-site .entry-content table {
	border: 1px solid var(--jan-rule);
	border-collapse: collapse;
	font-size: 0.95rem;
	width: 100%;
}

.jan-site .entry-content th {
	background: var(--jan-navy);
	color: var(--jan-white);
}

.jan-site .entry-content td,
.jan-site .entry-content th {
	border: 1px solid var(--jan-rule);
	padding: 0.8rem;
	text-align: left;
	vertical-align: top;
}

.jan-site .entry-content tr:nth-child(even) td {
	background: var(--jan-mist);
}

.jan-site .site-footer,
.jan-site .site-primary-footer-wrap,
.jan-site .site-below-footer-wrap {
	background: var(--jan-surface-dark);
	color: var(--jan-on-dark-muted);
}

.jan-site .site-footer a,
.jan-site .site-primary-footer-wrap a,
.jan-site .site-below-footer-wrap a {
	color: var(--jan-white);
}

@media (max-width: 921px) {
	.jan-site .jan-hero::after {
		mask-image: none;
		opacity: 0.42;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.jan-site *,
	.jan-site *::before,
	.jan-site *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}