/*
Theme Name:   Purpose Driven Journeys (Astra child)
Theme URI:    https://example.invalid/
Description:  Child theme for Purpose Driven Journeys. "Dark library" look from the 2026 mood board: near-black and bottle-green panels, brass details, gallery-wall framing, cream reading surfaces. Holds tokens, self-hosted fonts, focus styles and the CSS skin for screens Elementor Free cannot edit (Tutor LMS, WooCommerce checkout, comments, 404/search). Page bodies are built and edited in Elementor Free.
Author:       Purpose Driven Assets Ltd
Template:     astra
Version:      0.3.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  pdj
*/

/* STATUS: draft, not yet installed or tested on staging. See README.md. */

/* =========================================================
   1. Fonts (SIL OFL 1.1 — licence files in assets/fonts/)
   ========================================================= */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("assets/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("assets/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

/* =========================================================
   2. Design tokens — contrast calculated 15 Oct 2026 (WCAG formula);
      re-measure on rendered pages, including hover/focus/disabled.
   ========================================================= */
:root {
	/* Dark "library" surfaces */
	--pdj-library:   #171B18; /* near-black panelling */
	--pdj-panel:     #1F2622; /* raised dark surface, footer */
	--pdj-green:     #24342A; /* bottle-green wall */
	--pdj-green-hover: #2E4235;

	/* Light reading surfaces */
	--pdj-parchment: #F5F0E7;
	--pdj-paper:     #FFFDF8;
	--pdj-mat:       #EFE6D4; /* picture-mat cream */

	/* Ink */
	--pdj-ink:       #242823; /* 13.2:1 on parchment */
	--pdj-ink-2:     #555A50; /* 6.2:1 on parchment, 5.7:1 on mat */
	--pdj-cream:     #EFE6D4; /* 14.0:1 on library, 10.6:1 on green */
	--pdj-cream-2:   #C9BEA8; /* 9.5:1 on library, 7.1:1 on green */

	/* Accents */
	--pdj-brass:     #B8955A; /* text OK on dark only: 6.2:1 library, 5.5:1 panel, 4.7:1 green. Decorative on light */
	--pdj-brass-light: #C9A66B; /* 7.6:1 on library */
	--pdj-cognac:    #805033; /* links on light: 5.9:1 on parchment */
	--pdj-cognac-light: #C98A5B; /* links on dark: 6.0:1 on library */
	--pdj-olive:     #263D32; /* primary button on light (parchment text 10.3:1) */
	--pdj-olive-hover: #1B2C24;

	--pdj-rule:      #D5CCBB; /* decorative hairline on light */
	--pdj-rule-dark: #3A433D; /* decorative hairline on dark */
	--pdj-field-edge:#555A50; /* form fields need >= 3:1 */
	--pdj-focus:     #1455CC; /* on light: 5.8:1 */
	--pdj-focus-dark:#8FB4FF; /* on dark */
	--pdj-error:     #A3261B;

	--pdj-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--pdj-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--pdj-s1: 4px;  --pdj-s2: 8px;  --pdj-s3: 12px; --pdj-s4: 16px;
	--pdj-s5: 24px; --pdj-s6: 32px; --pdj-s7: 48px; --pdj-s8: 64px; --pdj-s9: 96px;

	--pdj-radius-btn: 2px;
	--pdj-radius-card: 4px;
	--pdj-measure: 68ch;
	--pdj-max: 1180px;

	/* Tutor LMS reads these variables (verify names against installed version) */
	--tutor-color-primary: var(--pdj-olive);
	--tutor-color-primary-hover: var(--pdj-olive-hover);
}

/* =========================================================
   3. Base
   ========================================================= */
body {
	background-color: var(--pdj-parchment);
	color: var(--pdj-ink);
	font-family: var(--pdj-sans);
	font-size: 18px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--pdj-serif);
	font-weight: 400;
	color: inherit;
	letter-spacing: 0;
	text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.15; }
h2 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);    line-height: 1.2; }
h3 { font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem); line-height: 1.25; }
p, li { max-width: var(--pdj-measure); }

a { color: var(--pdj-cognac); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex], .elementor-button):focus-visible {
	outline: 3px solid var(--pdj-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link.screen-reader-text:focus {
	background: var(--pdj-paper); color: var(--pdj-ink);
	padding: var(--pdj-s3) var(--pdj-s4); z-index: 100000;
	clip: auto; clip-path: none; width: auto; height: auto;
	top: var(--pdj-s2); left: var(--pdj-s2);
}

/* =========================================================
   4. Dark "library" sections
   Add to an Elementor container: Advanced > CSS Classes
     pdj-library  — near-black panelling
     pdj-green    — bottle-green wall
     pdj-panelled — adds faint vertical panel lines (use on one band per page at most)
     pdj-lamp     — warm lamplight glow from the top of the section
   ========================================================= */
.pdj-library { background-color: var(--pdj-library); }
.pdj-green   { background-color: var(--pdj-green); }
.pdj-library, .pdj-green {
	color: var(--pdj-cream);
}
body .pdj-library :is(h1, h2, h3, h4, p, li, .elementor-heading-title),
body .pdj-green   :is(h1, h2, h3, h4, p, li, .elementor-heading-title) { color: var(--pdj-cream); }
.pdj-library .pdj-muted, .pdj-green .pdj-muted { color: var(--pdj-cream-2); }
.pdj-library a:not(.elementor-button), .pdj-green a:not(.elementor-button) { color: var(--pdj-cognac-light); }
.pdj-library :focus-visible, .pdj-green :focus-visible { outline-color: var(--pdj-focus-dark); }

.pdj-panelled {
	background-image: repeating-linear-gradient(90deg, transparent 0 239px, rgba(255, 255, 255, 0.025) 239px 240px);
}
.pdj-lamp {
	background-image: radial-gradient(ellipse 60% 55% at 70% 0%, rgba(201, 166, 107, 0.16), transparent 70%);
}
.pdj-panelled.pdj-lamp {
	background-image:
		radial-gradient(ellipse 60% 55% at 70% 0%, rgba(201, 166, 107, 0.16), transparent 70%),
		repeating-linear-gradient(90deg, transparent 0 239px, rgba(255, 255, 255, 0.025) 239px 240px);
}

/* =========================================================
   5. Buttons
   ========================================================= */
.elementor-button,
.ast-button, .button, button.button,
.wc-block-components-button:not(.is-link),
.tutor-btn-primary,
.forminator-ui .forminator-button-submit {
	min-height: 48px;
	padding: 14px 26px;
	border-radius: var(--pdj-radius-btn);
	background-color: var(--pdj-olive);
	color: var(--pdj-parchment);
	font-family: var(--pdj-sans);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0.01em;
	border: 1px solid var(--pdj-olive);
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-button:hover, .ast-button:hover, .button:hover,
.wc-block-components-button:not(.is-link):hover, .tutor-btn-primary:hover,
.forminator-ui .forminator-button-submit:hover {
	background-color: var(--pdj-olive-hover); color: var(--pdj-parchment);
}
/* On dark sections the primary button becomes brass on library */
.pdj-library .elementor-button, .pdj-green .elementor-button {
	background-color: var(--pdj-brass); border-color: var(--pdj-brass); color: var(--pdj-library); /* 6.2:1 */
}
.pdj-library .elementor-button:hover, .pdj-green .elementor-button:hover {
	background-color: var(--pdj-brass-light); border-color: var(--pdj-brass-light); color: var(--pdj-library);
}
/* Outline button: add class pdj-btn-secondary to the Button widget */
.pdj-btn-secondary .elementor-button { background-color: transparent; color: var(--pdj-olive); border-color: var(--pdj-olive); }
.pdj-library .pdj-btn-secondary .elementor-button,
.pdj-green .pdj-btn-secondary .elementor-button { background-color: transparent; color: var(--pdj-cream); border-color: var(--pdj-cream-2); }

/* =========================================================
   6. Type details from the board
   ========================================================= */
/* Spaced serif capitals — labels and eyebrows only, never more than ~6 words */
body .pdj-caps, body .pdj-caps .elementor-heading-title {
	font-family: var(--pdj-serif);
	font-size: 0.8125rem; /* 13px — keep short; 4.5:1 colours only */
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pdj-ink-2);
}
body .pdj-library .pdj-caps, body .pdj-green .pdj-caps,
body .pdj-library .pdj-caps .elementor-heading-title, body .pdj-green .pdj-caps .elementor-heading-title { color: var(--pdj-brass); }

.pdj-eyebrow, .pdj-eyebrow .elementor-heading-title {
	font-family: var(--pdj-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--pdj-ink-2);
}
.pdj-lede { font-size: 1.1875rem; color: var(--pdj-ink-2); }
.pdj-library .pdj-lede, .pdj-green .pdj-lede { color: var(--pdj-cream-2); }

/* Roman/italic chapter numerals */
body .pdj-chapter-num .elementor-heading-title, body .pdj-chapter-num {
	font-family: var(--pdj-serif); font-style: italic; font-size: 1.25rem; color: var(--pdj-cognac);
}
body .pdj-library .pdj-chapter-num .elementor-heading-title, body .pdj-green .pdj-chapter-num .elementor-heading-title { color: var(--pdj-brass); }

/* Brass hairline with a centred diamond — use the Divider widget + this class */
.pdj-brass-rule .elementor-divider-separator, hr.pdj-brass-rule {
	border-top-color: var(--pdj-brass) !important;
}
.pdj-ornament::before {
	content: ""; display: block; width: 72px; height: 1px; background: var(--pdj-brass); margin-bottom: var(--pdj-s4);
}

/* =========================================================
   7. Gallery-wall framing
   pdj-frame on an Image widget: dark frame, brass inner line, cream mat.
   pdj-frame-gilt: brass outer frame instead (use sparingly — one per section).
   pdj-picture-light: soft brass light falling on the top of the frame.
   ========================================================= */
.pdj-frame img, img.pdj-frame {
	display: block;
	box-sizing: border-box;
	background: var(--pdj-mat);
	padding: clamp(12px, 3%, 28px);                 /* the mat */
	border: clamp(8px, 1.4vw, 14px) solid #241C14;  /* dark wood frame */
	outline: 1px solid var(--pdj-brass);            /* brass slip */
	outline-offset: calc(-1 * clamp(8px, 1.4vw, 14px) - 1px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
}
.pdj-frame-gilt img, img.pdj-frame-gilt {
	border-color: #8C6A35;
	outline-color: #D9BD86;
}
.pdj-picture-light { position: relative; }
.pdj-picture-light::before {
	content: ""; position: absolute; left: 15%; right: 15%; top: -18px; height: 60%;
	background: radial-gradient(ellipse at 50% 0%, rgba(232, 200, 140, 0.22), transparent 70%);
	pointer-events: none; z-index: 1;
}
.pdj-frame figcaption, .pdj-frame .widget-image-caption {
	font-family: var(--pdj-serif); font-style: italic; font-size: 0.9375rem;
	color: var(--pdj-ink-2); margin-top: var(--pdj-s3); text-align: center;
}
.pdj-library .pdj-frame .widget-image-caption, .pdj-green .pdj-frame .widget-image-caption { color: var(--pdj-cream-2); }

/* Warm monochrome grade for ATMOSPHERE photos only — never jewellery, stones or finished rings */
.pdj-sepia img, img.pdj-sepia { filter: sepia(0.35) saturate(0.75) contrast(1.05) brightness(0.96); }

/* =========================================================
   8. Cards and panels
   ========================================================= */
.pdj-card { background: var(--pdj-paper); border: 1px solid var(--pdj-rule); border-radius: var(--pdj-radius-card); }
.pdj-library .pdj-card, .pdj-green .pdj-card { background: var(--pdj-panel); border-color: var(--pdj-rule-dark); }

/* Chapter card that lifts slightly on hover (no movement for reduced-motion users) */
.pdj-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pdj-lift:hover, .pdj-lift:focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }

/* "Instrument" card for decision tools — cream map paper, fine double rule */
.pdj-instrument {
	background: var(--pdj-mat);
	border: 1px solid #CDBF9F;
	box-shadow: inset 0 0 0 4px var(--pdj-mat), inset 0 0 0 5px #CDBF9F;
	border-radius: var(--pdj-radius-card);
	color: var(--pdj-ink);
}
body .pdj-instrument :is(h3, p, .elementor-heading-title) { color: var(--pdj-ink); }

.pdj-fact { background: var(--pdj-paper); border: 1px solid var(--pdj-rule); border-top: 3px solid var(--pdj-brass); border-radius: var(--pdj-radius-card); }
.pdj-source { font-size: 0.9375rem; color: var(--pdj-ink-2); }

body .pdj-quote, body .pdj-quote .elementor-heading-title {
	font-family: var(--pdj-serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.35;
}

.pdj-band-dark { background-color: var(--pdj-green); } /* v0.1 name kept for compatibility */
.pdj-band-dark, .pdj-band-dark :is(h2, p, .elementor-heading-title) { color: var(--pdj-cream); }
.pdj-rule-top { border-top: 1px solid var(--pdj-rule); }

/* Faith: cream "mat" band and the verse card (like a printed scripture card on a dark table) */
.pdj-mat { background-color: var(--pdj-mat); }
.pdj-verse-card {
	background: var(--pdj-parchment);
	border: 24px solid #241C14;
	border-radius: 4px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
	text-align: center;
}
body .pdj-verse, body .pdj-verse .elementor-heading-title {
	font-family: var(--pdj-serif);
	font-size: 1.375rem;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pdj-ink);
}

/* =========================================================
   9. Header and footer (UAE templates — add these classes to the outer container)
   ========================================================= */
.pdj-header { background-color: var(--pdj-library); border-bottom: 1px solid var(--pdj-rule-dark); }
.pdj-header, .pdj-header a:not(.elementor-button) { color: var(--pdj-cream); text-decoration: none; }
.pdj-header a:not(.elementor-button):hover { color: var(--pdj-brass-light); }
.pdj-header .hfe-nav-menu a, .pdj-header .menu-item a { color: var(--pdj-cream) !important; }
.pdj-header :focus-visible { outline-color: var(--pdj-focus-dark); }
.pdj-footer { background-color: var(--pdj-panel); color: var(--pdj-cream-2); }
.pdj-footer a { color: var(--pdj-cream); }
.pdj-footer :focus-visible { outline-color: var(--pdj-focus-dark); }

/* =========================================================
   10. Forms (Forminator, WooCommerce, comments, Tutor)
   ========================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"], select, textarea,
.forminator-ui .forminator-input, .forminator-ui .forminator-textarea,
.wc-block-components-text-input input {
	background: var(--pdj-paper); color: var(--pdj-ink);
	border: 1px solid var(--pdj-field-edge); border-radius: var(--pdj-radius-btn);
	min-height: 48px; font-size: 1rem; font-family: var(--pdj-sans);
}
label, .forminator-ui .forminator-label { color: var(--pdj-ink); font-weight: 600; }
.forminator-ui .forminator-error-message, .woocommerce-error, .wc-block-components-validation-error, .comment-form .error { color: var(--pdj-error); }

/* =========================================================
   11. Comments and Tutor lesson discussion
   ========================================================= */
.comments-area, .tutor-lesson-comment, .tutor-course-spotlight-comments { max-width: 760px; }
.comment-body, .tutor-comments-list .tutor-comment-box {
	background: var(--pdj-paper); border: 1px solid var(--pdj-rule); border-radius: var(--pdj-radius-card); padding: var(--pdj-s5);
}
.comment-awaiting-moderation { color: var(--pdj-ink-2); font-style: italic; }
.pdj-comment-privacy {
	background: var(--pdj-paper); border-left: 3px solid var(--pdj-cognac);
	padding: var(--pdj-s3) var(--pdj-s4); font-size: 1rem; margin-bottom: var(--pdj-s4);
}

/* =========================================================
   12. Click-to-load embeds ([pdj_embed])
   ========================================================= */
.pdj-embed { position: relative; aspect-ratio: 16 / 9; background: var(--pdj-library); border-radius: var(--pdj-radius-card); overflow: hidden; }
.pdj-embed img.pdj-embed__poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.pdj-embed__panel {
	position: absolute; inset: auto var(--pdj-s4) var(--pdj-s4) var(--pdj-s4);
	background: var(--pdj-paper); color: var(--pdj-ink);
	padding: var(--pdj-s4); border-radius: var(--pdj-radius-card);
	display: flex; flex-wrap: wrap; gap: var(--pdj-s3); align-items: center; justify-content: space-between;
}
.pdj-embed__panel p { margin: 0; font-size: 0.9375rem; }
.pdj-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdj-transcript { margin-top: var(--pdj-s4); }
.pdj-transcript summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* =========================================================
   12b. The Purpose Driven Journey Podcast ([pdj_podcast_latest], [pdj_podcast_list])
   ========================================================= */
.pdj-podcast-latest {
	display: flex; flex-wrap: wrap; gap: var(--pdj-s7); align-items: center;
}
.pdj-podcast-latest__player { flex: 58 1 460px; min-width: 0; position: relative; }
.pdj-badge-new {
	position: absolute; top: 24px; left: 24px; z-index: 2;
	font-family: var(--pdj-serif); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
	background: var(--pdj-brass); color: var(--pdj-library); padding: 6px 10px; /* 6.2:1 */
}
.pdj-podcast-latest__player .pdj-embed {
	border: 12px solid #241C14; outline: 1px solid var(--pdj-brass); outline-offset: -13px;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}
.pdj-podcast-latest__text { flex: 42 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--pdj-s3); }
.pdj-episode-title { font-family: var(--pdj-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 0; }
.pdj-episode-title a { color: inherit; text-decoration: none; }
.pdj-episode-title a:hover { text-decoration: underline; }
.pdj-episode-meta { font-size: 0.9375rem; color: var(--pdj-ink-2); margin: 0; }
body .pdj-library .pdj-episode-meta, body .pdj-green .pdj-episode-meta { color: var(--pdj-cream-2); }
.pdj-podcast-links { display: flex; flex-wrap: wrap; gap: var(--pdj-s5); font-weight: 600; }

.pdj-episodes {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--pdj-s6);
}
.pdj-episode { display: flex; flex-direction: column; gap: var(--pdj-s2); max-width: none; }
.pdj-episode__link { display: flex; flex-direction: column; gap: var(--pdj-s3); text-decoration: none; color: inherit; }
.pdj-episode__link .pdj-episode-title { font-size: 1.25rem; }
.pdj-episode .pdj-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pdj-episodes-more { margin-top: var(--pdj-s6); font-weight: 600; }
.pdj-editor-note { background: #FFF4D6; border: 1px dashed var(--pdj-cognac); padding: var(--pdj-s3) var(--pdj-s4); font-size: 0.9375rem; }

/* Episode pages (single pdj_episode) — calm reading column */
.single-pdj_episode .entry-content { max-width: 820px; margin-inline: auto; }
.single-pdj_episode .pdj-embed { margin-block: var(--pdj-s5) var(--pdj-s6); }

/* =========================================================
   13. WooCommerce checkout and Tutor dashboard
   ========================================================= */
.woocommerce-checkout .wp-block-woocommerce-checkout, .tutor-dashboard { font-family: var(--pdj-sans); }
.wc-block-components-checkbox label { font-weight: 400; }
.pdj-legal-note { font-size: 0.9375rem; color: var(--pdj-ink-2); }

/* =========================================================
   14. 404 / search: a quiet library page
   ========================================================= */
.error404 .site-content, .search-no-results .site-content { background: var(--pdj-library); color: var(--pdj-cream); }
.error404 .site-content :is(h1, p), .search-no-results .site-content :is(h1, p) { color: var(--pdj-cream); }
.error404 .site-content a, .search-no-results .site-content a { color: var(--pdj-cognac-light); }

/* =========================================================
   15. Motion — none unless the visitor allows it
   ========================================================= */
@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;
	}
	.pdj-lift:hover, .pdj-lift:focus-within { transform: none; }
	.elementor-invisible { visibility: visible !important; }
}

@media (max-width: 767px) {
	.pdj-embed__panel { position: static; border-radius: 0; }
	.pdj-embed { aspect-ratio: auto; }
	.pdj-embed img.pdj-embed__poster { aspect-ratio: 16 / 9; height: auto; }
	.pdj-panelled { background-image: none; }
}