/* Ported from Code Snippets: "JD: Footer" (id 57), pulled fresh from production 2026-08-24.
   The Google Fonts <link>/<preconnect> tags this snippet also output are registered instead
   via wp_enqueue_style() in class-jd-core.php (see CHANGELOG - avoids a raw <link> tag needing
   its own ad-hoc output mechanism). Per the brief's standing rules, the snippet's own font tags
   should be removed when this footer module is cut over in Phase 3 to avoid double-loading. */

/* ===== epigraph band (sits between page content and the navy footer) ===== */
.jd-epigraph{
	background:var(--jd-ground);
	padding:56px 24px 52px;
	border-top:1px solid var(--jd-rule);
	border-bottom:1px solid var(--jd-rule);
	text-align:center;
}
.jd-epigraph-body{ max-width:620px; margin:0 auto; }
.jd-epigraph-flourish{ color:var(--jd-accent); font-size:20px; margin:0 0 14px; }
.jd-epigraph-body blockquote{
	font-family:var(--jd-font-serif);
	font-style:italic;
	font-size:22px;
	line-height:1.5;
	color:var(--jd-navy);
	margin:0 0 14px;
}
.jd-epigraph-body cite{
	font-style:normal;
	font-size:var(--jd-fs-meta);
	letter-spacing:var(--jd-ls-label);
	text-transform:uppercase;
	color:var(--jd-text-muted);
}

/* ===== main footer band ===== */
.jd-footer{ position:relative; overflow:hidden; isolation:isolate; }

/* decorative background watermark — an 8-petal flower motif echoing the masthead mark,
   nearly invisible (3.5% white) and slowly rotating. Sits behind the masthead column;
   the near-transparency means exact paint order versus the flex columns doesn't matter. */
.jd-watermark{
	position:absolute;
	left:-120px; top:50%;
	width:560px; height:560px;
	transform:translateY(-50%);
	color:rgba(255,255,255,0.035);
	z-index:0;
	pointer-events:none;
	animation:jd-spin 200s linear infinite;
}
@keyframes jd-spin{ to{ transform:translateY(-50%) rotate(360deg); } }
@media (max-width:620px){ .jd-watermark{ display:none; } }

/* masthead logo mark — real site logo, sized down and recoloured (white) for legibility on navy */
.jd-footer-mast{ display:flex; flex-direction:column; align-items:flex-start; }
.jd-footer-mast .elementor-element-845def7{
	margin:0 0 14px 0 !important;
	float:none !important;
	width:auto !important;
}
.jd-footer-mast .elementor-element-845def7 img{
	width:52px !important;
	height:auto !important;
	max-width:52px !important;
	filter:brightness(0) invert(1);
	opacity:.95;
}

/* masthead wordmark — bold uppercase serif "JUNGIAN" over italic accent ".directory", per the approved design */
.jd-footer-word{
	font-family:var(--jd-font-serif) !important;
	font-weight:700 !important;
	font-size:26px !important;
	letter-spacing:.005em !important;
	line-height:1.05 !important;
	text-transform:uppercase !important;
}
.jd-footer-tld{
	font-family:var(--jd-font-serif) !important;
	font-style:italic !important;
	font-weight:400 !important;
	text-transform:none !important;
	font-size:17px !important;
	line-height:1 !important;
	margin-top:2px !important;
}

/* masthead accent rule + "Est." meta line, between the wordmark and the tagline.
   align-self:stretch overrides the masthead column's align-items:flex-start (which
   otherwise shrinks content-less elements like this rule to zero width). */
.jd-footer-mast .elementor-element-jd-mast-rule{ align-self:stretch !important; width:100% !important; }
.jd-masthead-rule{
	position:relative;
	height:2px;
	background:var(--jd-accent);
	margin:16px 0 6px;
	width:100%;
}
.jd-masthead-rule::after{
	content:"";
	position:absolute; left:0; right:0; top:4px;
	border-top:1px solid var(--jd-on-navy-rule);
}
.jd-masthead-meta{
	margin:10px 0 0;
	font-family:var(--jd-font-serif);
	font-style:italic;
	font-size:12px;
	color:var(--jd-on-navy-faint);
}

.jd-footer-tag{ font-size:13.5px; line-height:1.65; color:var(--jd-on-navy-muted); max-width:30ch; margin-top:16px; }
.jd-footer-tag p{ margin:0; }
.jd-footer-iaap{
	display:inline-flex; align-items:center; gap:7px;
	margin-top:20px;
	font-size:var(--jd-fs-micro);
	text-transform:uppercase; letter-spacing:var(--jd-ls-label);
	color:var(--jd-on-navy-faint);
	border:1px solid var(--jd-on-navy-rule);
	border-radius:var(--jd-r-pill);
	padding:7px 13px;
}

/* index column head rows (Explore / Participate) — big faint serif numeral + label + italic descriptor */
.jd-index-head-row{
	display:flex;
	align-items:flex-end;
	gap:12px;
	margin-bottom:20px;
}
.jd-index-numeral{
	font-family:var(--jd-font-serif);
	font-style:italic;
	font-weight:700;
	font-size:38px;
	line-height:0.75;
	color:rgba(224,130,47,0.38);
}
.jd-index-desc{
	display:block;
	margin-top:3px;
	font-family:var(--jd-font-serif);
	font-style:italic;
	font-size:11.5px;
	color:var(--jd-on-navy-faint);
}

/* index column labels (Explore / Participate / Subscriber Card heading) */
.jd-index-label,
.jd-index-label .elementor-heading-title{
	font-size:var(--jd-fs-meta) !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	letter-spacing:var(--jd-ls-label) !important;
	color:var(--jd-accent) !important;
}

/* leader-dot link lists (Explore / Participate) */
.jd-leader-list{ list-style:none; margin:0; padding:0; }
.jd-leader-list li{ margin-bottom:12px; }
.jd-footer .jd-leader-list a{
	display:flex; align-items:baseline; gap:6px;
	font-size:var(--jd-fs-body);
	color:var(--jd-on-navy);
	text-decoration:none;
	line-height:1.3;
}
.jd-leader-list a .jd-leader-rule{
	flex:1;
	border-bottom:1px dotted var(--jd-on-navy-faint);
	transform:translateY(-3px);
}
.jd-leader-list a .jd-leader-arrow{
	color:var(--jd-on-navy-faint);
	font-size:12px;
	transition:transform .15s ease, color .15s ease;
}
.jd-footer .jd-leader-list a:hover{ color:var(--jd-accent); }
.jd-leader-list a:hover .jd-leader-rule{ border-bottom-color:var(--jd-accent); }
.jd-leader-list a:hover .jd-leader-arrow{ color:var(--jd-accent); transform:translateX(2px); }

/* catalogue-card newsletter column - wraps the real MailerLite embed */
.jd-catalog-card{
	position:relative;
	background:var(--jd-surface) !important;
	border:1px solid var(--jd-rule);
	border-radius:var(--jd-r-sm);
	padding:20px 20px 18px !important;
	box-shadow:0 18px 36px rgba(0,0,0,.28);
	transform:rotate(-1.2deg);
	max-width:300px;
	margin-top:6px;
	overflow:visible;
}
.jd-catalog-title{
	font-size:13px !important; font-weight:700 !important;
	letter-spacing:.04em !important; text-transform:uppercase !important;
	margin:0 0 14px !important;
	padding-bottom:10px;
	border-bottom:1px solid var(--jd-rule);
}

/* "Every Friday" stamp — a gentle starburst seal in the card's top-right corner instead of a
   flat outlined pill, so it reads as a stamped mark rather than a form label. Pulled out of
   normal flow (absolute) so it overlaps the corner like a real seal. Uses a shallow 8-point
   burst (inner radius 40% of outer) rather than a sharp 5-point star specifically so the
   inscribed "safe" area is large enough to hold two lines of text without the points/valleys
   clipping through the letters — a sharper star was tried first and clipped the top line. */
.jd-catalog-freq{
	position:absolute;
	top:-18px;
	right:-16px;
	width:84px;
	height:84px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:var(--jd-accent) !important;
	color:#fff !important;
	font-size:9.5px !important;
	font-weight:700 !important;
	letter-spacing:.04em;
	text-transform:uppercase;
	line-height:1.35;
	clip-path:polygon(50% 0%, 65.3% 13%, 85.4% 14.6%, 87% 34.7%, 100% 50%, 87% 65.3%, 85.4% 85.4%, 65.3% 87%, 50% 100%, 34.7% 87%, 14.6% 85.4%, 13% 65.3%, 0% 50%, 13% 34.7%, 14.6% 14.6%, 34.7% 13%);
	transform:rotate(-6deg);
	filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
	z-index:2;
}
/* Elementor's own widget-container wrapper (auto-inserted inside every widget root) stretches
   to fill its flex parent's full height by default, which left the outer flex centering with
   nothing to center — the two text lines sat flush against the top of the 84px box and got
   clipped by the shape's pointed top edge. Making the wrapper itself a centering flex box
   fixes the actual vertical position of the text, independent of that stretch behaviour. */
.jd-catalog-freq .elementor-widget-container{
	height:auto !important;
	width:100% !important;
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
}
.jd-catalog-embed{ margin-bottom:4px; }

/* subscriber-card intro copy — this line lives inside MailerLite's own rendered embed
   (.ml-form-embedContent), not an Elementor widget, so its wording comes from the
   MailerLite dashboard config and its default styling is a plain muted caption. The
   accompanying script overwrites the text to our copy; this rule elevates it to an
   editorial serif-italic lede (matching the epigraph's voice) so it reads as a statement
   rather than form boilerplate. The empty <h4> MailerLite renders alongside it is hidden. */
.jd-catalog-card .ml-form-embedContent{ margin-bottom:14px; }
.jd-catalog-card .ml-form-embedContent h4{ display:none; }
.jd-catalog-card .ml-form-embedContent p{
	font-family:var(--jd-font-serif) !important;
	font-style:italic !important;
	font-weight:400 !important;
	font-size:15.5px !important;
	line-height:1.5 !important;
	color:var(--jd-navy) !important;
	margin:0 !important;
}

/* real MailerLite form fields, restyled to match the card's editorial voice */
.jd-catalog-card .form-control{
	display:block !important;
	width:100% !important;
	background:transparent !important;
	border:none !important;
	border-bottom:1px dashed var(--jd-rule) !important;
	border-radius:0 !important;
	box-shadow:none !important;
	font-family:var(--jd-font) !important;
	font-size:13.5px !important;
	line-height:1.4 !important;
	color:var(--jd-text) !important;
	padding:6px 2px 8px !important;
	margin:0 0 10px 0 !important;
	height:auto !important;
	box-sizing:border-box !important;
}
.jd-catalog-card .form-control::placeholder{ color:#a7a196; font-style:italic; opacity:1; }
.jd-catalog-card .form-control:focus{ outline:none !important; border-bottom-color:var(--jd-accent) !important; }
.jd-catalog-card button.primary,
.jd-catalog-card input.primary{
	background:var(--jd-accent) !important;
	color:#fff !important;
	border:none !important;
	border-radius:var(--jd-r-sm) !important;
	font-family:var(--jd-font) !important;
	font-size:12.5px !important;
	font-weight:700 !important;
	letter-spacing:.05em !important;
	text-transform:uppercase !important;
	padding:9px 16px !important;
	height:auto !important;
	box-shadow:none !important;
	box-sizing:border-box !important;
	cursor:pointer;
}
.jd-catalog-card button.primary:hover,
.jd-catalog-card input.primary:hover{ background:#c96f22 !important; }

/* MailerLite's own local plugin CSS scopes styles to this embed's container id with !important,
   which otherwise wins the specificity fight against class-only selectors above. Matching
   its exact selector chain (plus one extra class) guarantees our rule wins regardless of
   stylesheet load order. NOTE: #mlb2-3103834 is this specific embedded form's container id
   (form_id "2") — if the MailerLite widget is ever deleted and re-embedded as a new form,
   this id may change and these two rules will need updating to match. */
#mlb2-3103834.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control{
	background:transparent !important;
	color:var(--jd-text) !important;
	border-style:none !important;
	border-width:0 !important;
	border-bottom:1px dashed var(--jd-rule) !important;
	border-radius:0 !important;
	box-shadow:none !important;
	font-family:var(--jd-font) !important;
	font-size:13.5px !important;
	line-height:1.4 !important;
	padding:6px 2px 8px !important;
}
#mlb2-3103834.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary{
	background-color:var(--jd-accent) !important;
	color:#fff !important;
	border-style:none !important;
	border-radius:var(--jd-r-sm) !important;
	box-shadow:none !important;
	font-family:var(--jd-font) !important;
	font-size:12.5px !important;
	font-weight:700 !important;
	letter-spacing:.05em !important;
	text-transform:uppercase !important;
	padding:9px 16px !important;
}
#mlb2-3103834.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover{
	background-color:#c96f22 !important;
}

.jd-catalog-filed{
	margin-top:14px;
	padding-top:10px;
	border-top:1px dotted var(--jd-rule);
	font-family:var(--jd-font-serif) !important;
	font-style:italic;
	font-size:10.5px !important;
	color:var(--jd-text-muted) !important;
}

/* ===== colophon ===== */
.jd-colophon{ background:var(--jd-navy); }
.jd-colophon-body{
	max-width:640px; margin:0 auto;
	padding:40px 24px 32px;
	text-align:center;
	border-top:1px solid var(--jd-on-navy-rule);
}
.jd-colophon-flourish{ color:var(--jd-accent); font-size:16px; margin:0 0 14px; }
.jd-colophon-line{
	font-family:var(--jd-font-serif);
	font-style:italic;
	font-size:13.5px;
	line-height:1.6;
	color:var(--jd-on-navy-muted);
	margin:0 0 14px;
}
.jd-colophon-line a{ color:var(--jd-on-navy); text-decoration:underline; }
.jd-colophon-line a:hover{ color:var(--jd-accent); }
.jd-footnote{ font-size:11px; line-height:1.6; color:var(--jd-on-navy-faint); margin:0; }

/* ===== sub-footer bar (copyright + language switcher) =====
   Legacy Elementor section/column elements (15d422de / 01ba774 / 1ea9e03a) predate the
   container system and can't be edited via the settings API on this install — a write
   attempt returned "widget_type 'section'/'column' not registered with Elementor on this
   site", so css_classes couldn't be added there directly. Targeted here via the
   auto-rendered .elementor-element-<id> classes instead, which Elementor always emits
   regardless of editor-API support. */
.elementor-element-15d422de{
	background:var(--jd-navy-dark) !important;
	border-top:1px solid var(--jd-on-navy-rule);
}
.elementor-element-15d422de .elementor-container{
	display:flex !important;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:16px;
	max-width:var(--jd-max);
	margin:0 auto;
	padding:18px 24px;
}
.elementor-element-15d422de .elementor-column{ width:auto !important; flex:0 1 auto !important; }
.elementor-element-01ba774{ order:2; }
.elementor-element-1ea9e03a{ order:1; }
.jd-footer-copyright,
.jd-footer-copyright p{
	font-size:12px !important;
	color:var(--jd-on-navy-faint) !important;
	margin:0 !important;
}
.jd-footer-copyright a{ color:var(--jd-on-navy-muted) !important; text-decoration:none !important; border-bottom:1px solid rgba(255,255,255,0.22); }
.jd-footer-copyright a:hover{ color:#fff !important; border-color:#fff; }

/* the real translate-plugin trigger (#glt-translate-trigger, a fixed viewport-bottom-left
   button injected on <body> by the GTranslate plugin, unrelated to this Elementor template)
   is relocated into .jd-lang-slot by the script below and restyled here as an inline pill
   instead of its default fixed position, so it renders inside the footer flow like the
   approved design rather than floating over page content. */
#glt-translate-trigger.jd-lang-relocated{
	position:static !important;
	display:inline-flex !important;
	align-items:center !important;
	bottom:auto !important; left:auto !important; right:auto !important; top:auto !important;
	font-size:12px !important;
	color:var(--jd-on-navy-muted) !important;
	background:transparent !important;
	border:1px solid var(--jd-on-navy-rule) !important;
	border-radius:var(--jd-r-pill) !important;
	padding:6px 12px !important;
	cursor:pointer;
	z-index:1 !important;
}
#glt-translate-trigger.jd-lang-relocated:hover{ color:#fff !important; border-color:rgba(255,255,255,0.35) !important; }