/*
Theme Name: jsan
Theme URI: https://example.com/jsan
Author: John
Author URI: https://example.com
Description: A bare, minimal Gutenberg block theme starter for jsan, with gradient background and fade-in utilities.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.2
Text Domain: jsan
Tags: full-site-editing, block-theme, blog

License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Global base styles
 * Most design should still live in theme.json. This file just handles
 * the gradient background and simple animation utilities.
 */

:root {
	/* Let the browser know we’re primarily light UI by default. */
	color-scheme: light;
}

body {
	margin: 0;
	min-height: 100vh;

	/* Soft, modern gradient background (light, so existing dark text still works). */
	background: linear-gradient(
		135deg,
		#f9fafb 0%,
		#e0f2fe 40%,
		#dbeafe 70%,
		#eff6ff 100%
	);

	/* Make sure background stays put behind content. */
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Optional: tweak default link feel a bit without being opinionated. */
a {
	text-decoration: none;
}
a:hover,
a:focus-visible {
	text-decoration: underline;
}

/* -----------------------------------
 * Fade-in utilities (page-load)
 * -----------------------------------
 *
 * Usage in the block editor:
 * - Select any block
 * - Advanced → Additional CSS class(es)
 * - Enter: jsan-fade-in
 *   (optionally add jsan-fade-in-delay-1, jsan-fade-in-delay-2, etc.)
 */

/* Base fade-in state: hidden until visible */
.jsan-fade-in {
	opacity: 0;
	transform: translateY(16px);
}

/* When scrolled into view */
.jsan-fade-in.jsan-visible {
	animation: jsanFadeIn 0.7s ease-out forwards;
}

/* Staggered delays – apply only once visible */
.jsan-fade-in-delay-1.jsan-visible {
	animation-delay: 0.1s;
}

.jsan-fade-in-delay-2.jsan-visible {
	animation-delay: 0.25s;
}

.jsan-fade-in-delay-3.jsan-visible {
	animation-delay: 0.4s;
}

/* Keyframes */
@keyframes jsanFadeIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* For users who prefer reduced motion, just show content normally. */
@media (prefers-reduced-motion: reduce) {
	.jsan-fade-in,
	.jsan-fade-in-delay-1,
	.jsan-fade-in-delay-2,
	.jsan-fade-in-delay-3 {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Handwritten-style font for post content */
/* Handwritten-style body for single posts */
.jsan-handwritten-body,
.jsan-handwritten-body p,
.jsan-handwritten-body li {
	font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Bible verse block (used by [jsan_verse]) */
.jsan-verse {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid rgba(15, 23, 42, 0.2);
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 0.75rem;
}

/* The verse text itself */
.jsan-verse__text {
	display: block;
}

/* The reference (e.g., John 3:16) */
.jsan-verse__reference {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* Red-letter option when jesus="yes" */
.jsan-verse--jesus .jsan-verse__text {
	color: #b91c1c; /* deep red */
}

/* Handwritten font for studies / blog notes */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');

.jsan-handwritten {
	font-family: "Caveat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.1rem;
	line-height: 1.8;
}

/* Make sure verses stay in a clean reading font */
.jsan-verse {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Optional: red text for words of Jesus, assuming your shortcode wraps like this */
.jsan-verse--jesus .jsan-verse__text {
	color: #b91c1c;
}

/* Feature cards layout */
.jsan-feature-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.jsan-feature-card {
	flex: 1 1 0;
	min-width: 240px;
}

/* Stack cards on smaller screens */
@media (max-width: 900px) {
	.jsan-feature-cards {
		flex-direction: column;
	}
}

/* Feature cards: make headings clickable but keep heading styling */
.jsan-feature-cards h3 a {
	color: inherit;
	text-decoration: none;
}

.jsan-feature-cards h3 a:hover {
	text-decoration: underline;
}

/* ===========================
   Home feature cards layout
   =========================== */

.jsan-feature-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding: 3rem 1.5rem;
}

/* Each card */
.jsan-feature-card {
	flex: 1 1 0;
	min-width: 260px;
	border-radius: 1rem;
	border: 1px solid #d0e4ff;
	background-color: #f2f7ffdd;
	padding: 1.5rem;
}

/* Keep headings looking like headings even though they are links */
.jsan-feature-card__title a {
	color: inherit;
	text-decoration: none;
}

.jsan-feature-card__title a:hover {
	text-decoration: underline;
}

/* Tiny spacer inside the card */
.jsan-feature-card__spacer {
	height: 0.5rem;
}

/* Slight spacing tweaks */
.jsan-feature-card__all {
	margin-top: 0.75rem;
}

/* Mobile: stack the cards vertically */
@media (max-width: 900px) {
	.jsan-feature-cards {
		flex-direction: column;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.jsan-feature-card {
		width: 100%;
	}
}