/**
 * YeOlde Theme - Main Stylesheet
 *
 * Medieval parchment/manuscript themed styles.
 *
 * @package YeOlde
 * @since 1.0.0
 */

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

::selection {
	background-color: var(--wp--preset--color--blood-red);
	color: var(--wp--preset--color--parchment);
}

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

/* ==========================================================================
   Parchment Background Texture
   ========================================================================== */

body {
	background-color: var(--wp--preset--color--parchment);
	background-image:
		radial-gradient(ellipse at 15% 15%, rgba(139, 115, 72, 0.07) 0%, transparent 50%),
		radial-gradient(ellipse at 85% 25%, rgba(139, 115, 72, 0.05) 0%, transparent 40%),
		radial-gradient(ellipse at 50% 80%, rgba(139, 115, 72, 0.06) 0%, transparent 45%),
		radial-gradient(ellipse at 20% 70%, rgba(100, 80, 50, 0.04) 0%, transparent 30%),
		radial-gradient(ellipse at 75% 60%, rgba(160, 130, 80, 0.03) 0%, transparent 35%);
	background-attachment: fixed;
}

/* Enhanced parchment with real texture image */
body.yeolde-textured {
	background-image: url('../images/parchment-bg.jpg');
	background-repeat: repeat;
	background-size: 400px;
	background-blend-mode: multiply;
}

/* ==========================================================================
   Scrollbar (subtle parchment style)
   ========================================================================== */

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--wp--preset--color--parchment-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--dark-leather);
	border: 1px solid var(--wp--preset--color--aged-gold);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--aged-gold);
}

/* ==========================================================================
   Drop Cap - Illuminated Initial
   ========================================================================== */

.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--decorative);
	color: var(--wp--preset--color--blood-red);
	font-size: 4.5em;
	line-height: 0.75;
	margin-right: 0.08em;
	text-shadow: 1px 1px 0 var(--wp--preset--color--aged-gold);
	float: left;
}

/* ==========================================================================
   Block Style: Parchment Group
   ========================================================================== */

.wp-block-group.is-style-parchment {
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
	background-image:
		radial-gradient(ellipse at 20% 50%, rgba(139, 115, 72, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(139, 115, 72, 0.05) 0%, transparent 40%);
	border: 2px solid var(--wp--preset--color--aged-gold);
	box-shadow:
		inset 0 0 40px rgba(139, 115, 72, 0.12),
		0 2px 10px rgba(0, 0, 0, 0.08);
	padding: var(--wp--preset--spacing--40);
	position: relative;
}

.wp-block-group.is-style-parchment::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	border: 1px solid rgba(196, 169, 106, 0.3);
	pointer-events: none;
}

/* ==========================================================================
   Block Style: Stone Wall Group
   ========================================================================== */

.wp-block-group.is-style-stone-wall {
	background-color: #e8dcc8;
	background-image:
		linear-gradient(45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.03) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.03) 75%);
	background-size: 20px 20px;
	border: 3px solid #b8a88a;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.08);
	padding: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   Block Style: Wooden Frame Group
   ========================================================================== */

.wp-block-group.is-style-wooden-frame {
	background-color: var(--wp--preset--color--ivory);
	border: 4px solid #8b7348;
	box-shadow:
		inset 0 0 0 2px #a68a5b,
		inset 0 0 0 4px #8b7348,
		0 3px 10px rgba(0, 0, 0, 0.1);
	padding: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   Block Style: Ornate Image Frame
   ========================================================================== */

.wp-block-image.is-style-ornate-frame img {
	border: 4px double var(--wp--preset--color--aged-gold);
	box-shadow:
		0 0 0 2px var(--wp--preset--color--ivory),
		0 0 0 5px var(--wp--preset--color--aged-gold),
		0 4px 15px rgba(0, 0, 0, 0.15);
	padding: 4px;
	background: var(--wp--preset--color--ivory);
}

/* ==========================================================================
   Block Style: Torn Edges Image
   ========================================================================== */

.wp-block-image.is-style-torn-edges img {
	filter: sepia(15%);
	clip-path: polygon(
		0% 2%, 5% 0%, 12% 3%, 20% 0%, 28% 2%, 35% 0%, 42% 1%, 50% 0%,
		58% 2%, 65% 0%, 72% 3%, 80% 0%, 88% 2%, 95% 0%, 100% 3%,
		100% 97%, 95% 100%, 88% 98%, 80% 100%, 72% 97%, 65% 100%,
		58% 98%, 50% 100%, 42% 99%, 35% 100%, 28% 98%, 20% 100%,
		12% 97%, 5% 100%, 0% 98%
	);
}

/* ==========================================================================
   Block Style: Ornamental Separator
   ========================================================================== */

.wp-block-separator.is-style-ornamental {
	border: none !important;
	background: none !important;
	text-align: center;
	overflow: visible;
	height: auto;
	line-height: 1;
}

.wp-block-separator.is-style-ornamental::before {
	content: "\2694  \2726  \2694";
	display: block;
	font-size: 1.2em;
	color: var(--wp--preset--color--aged-gold);
	letter-spacing: 0.5em;
}

/* ==========================================================================
   Block Style: Sword Divider
   ========================================================================== */

.wp-block-separator.is-style-sword-divider {
	border: none !important;
	background: none !important;
	text-align: center;
	overflow: visible;
	height: auto;
	position: relative;
}

.wp-block-separator.is-style-sword-divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--wp--preset--color--aged-gold) 20%,
		var(--wp--preset--color--aged-gold) 80%,
		transparent
	);
}

.wp-block-separator.is-style-sword-divider::after {
	content: "\2694";
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--parchment);
	padding: 0 1em;
	color: var(--wp--preset--color--aged-gold);
	font-size: 1.4em;
}

/* ==========================================================================
   Block Style: Scroll Quote
   ========================================================================== */

.wp-block-quote.is-style-scroll-quote {
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
	border: none;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	position: relative;
	font-style: italic;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.wp-block-quote.is-style-scroll-quote::before,
.wp-block-quote.is-style-scroll-quote::after {
	content: "";
	display: block;
	height: 20px;
	background: linear-gradient(
		180deg,
		#c4a96a,
		#8b7348 40%,
		#c4a96a 50%,
		#8b7348 60%,
		#c4a96a
	);
	border-radius: 10px;
	margin-left: calc(-1 * var(--wp--preset--spacing--50));
	margin-right: calc(-1 * var(--wp--preset--spacing--50));
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.wp-block-quote.is-style-scroll-quote::before {
	margin-bottom: var(--wp--preset--spacing--30);
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
}

.wp-block-quote.is-style-scroll-quote::after {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: calc(-1 * var(--wp--preset--spacing--40));
}

.wp-block-quote.is-style-scroll-quote cite {
	color: var(--wp--preset--color--dark-leather);
	font-family: var(--wp--preset--font-family--heading);
}

/* ==========================================================================
   Block Style: Shield Markers List
   ========================================================================== */

.wp-block-list.is-style-shield-markers {
	list-style: none;
	padding-left: 1.5em;
}

.wp-block-list.is-style-shield-markers li {
	position: relative;
	padding-left: 0.5em;
	margin-bottom: 0.5em;
}

.wp-block-list.is-style-shield-markers li::before {
	content: "\2726";
	position: absolute;
	left: -1.5em;
	color: var(--wp--preset--color--blood-red);
	font-size: 0.8em;
}

/* ==========================================================================
   Block Style: Royal Button
   ========================================================================== */

.wp-block-button.is-style-royal .wp-block-button__link {
	background: linear-gradient(180deg, #8B1A1A 0%, #5a1010 100%);
	border: 2px solid var(--wp--preset--color--aged-gold);
	box-shadow:
		inset 0 1px 0 rgba(255, 215, 0, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.15);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	padding: 0.8em 2em;
	color: var(--wp--preset--color--parchment);
}

.wp-block-button.is-style-royal .wp-block-button__link:hover {
	background: linear-gradient(180deg, #a52020 0%, #8B1A1A 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 215, 0, 0.3),
		0 4px 15px rgba(139, 26, 26, 0.3);
	transform: translateY(-1px);
}

/* ==========================================================================
   Block Style: Wax Seal Button
   ========================================================================== */

.wp-block-button.is-style-wax-seal .wp-block-button__link {
	background: radial-gradient(circle at 40% 40%, #b02020, #6a0e0e);
	border: none;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.2),
		inset 0 -2px 5px rgba(0, 0, 0, 0.3),
		inset 0 2px 5px rgba(255, 255, 255, 0.1);
	font-size: 0.7em;
	color: var(--wp--preset--color--parchment);
	text-align: center;
	line-height: 1.2;
	transition: transform 0.3s ease;
}

.wp-block-button.is-style-wax-seal .wp-block-button__link:hover {
	transform: scale(1.05) rotate(-3deg);
}

/* ==========================================================================
   Block Style: Banner Ribbon Heading
   ========================================================================== */

.wp-block-heading.is-style-banner-ribbon {
	text-align: center;
	position: relative;
	display: inline-block;
	background: var(--wp--preset--color--blood-red);
	color: var(--wp--preset--color--parchment);
	padding: 0.4em 2em;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-heading.is-style-banner-ribbon::before,
.wp-block-heading.is-style-banner-ribbon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 1.5em;
	height: 100%;
	background: var(--wp--preset--color--blood-red);
}

.wp-block-heading.is-style-banner-ribbon::before {
	left: -1em;
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.wp-block-heading.is-style-banner-ribbon::after {
	right: -1em;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* ==========================================================================
   Block Style: Medieval Ledger Table
   ========================================================================== */

.wp-block-table.is-style-medieval-ledger table {
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
	border: 2px solid #8b7348;
}

.wp-block-table.is-style-medieval-ledger th {
	background: var(--wp--preset--color--dark-leather);
	color: var(--wp--preset--color--aged-gold);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.8em 1em;
	border-bottom: 2px solid var(--wp--preset--color--aged-gold);
}

.wp-block-table.is-style-medieval-ledger td {
	padding: 0.6em 1em;
	border-bottom: 1px solid rgba(139, 115, 72, 0.2);
}

.wp-block-table.is-style-medieval-ledger tr:nth-child(even) td {
	background: rgba(139, 115, 72, 0.05);
}

/* ==========================================================================
   Block Style: Battle Formation Columns
   ========================================================================== */

.wp-block-columns.is-style-battle-formation > .wp-block-column {
	border: 1px solid var(--wp--preset--color--aged-gold);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--ivory);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-columns.is-style-battle-formation > .wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	border-color: var(--wp--preset--color--blood-red);
}

/* ==========================================================================
   Post Cards on parchment
   ========================================================================== */

.wp-block-group.has-border-color.has-dark-leather-border-color {
	border-width: 1px;
	border-style: solid;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes yeolde-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.yeolde-animate {
	animation: yeolde-fade-in-up 0.6s ease-out both;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 781px) {
	.wp-block-button.is-style-wax-seal .wp-block-button__link {
		width: 80px;
		height: 80px;
		font-size: 0.6em;
	}
}

@media (max-width: 600px) {
	.wp-block-heading.is-style-banner-ribbon {
		padding: 0.3em 1.2em;
	}

	.wp-block-heading.is-style-banner-ribbon::before,
	.wp-block-heading.is-style-banner-ribbon::after {
		width: 1em;
	}

	.wp-block-heading.is-style-banner-ribbon::before {
		left: -0.6em;
	}

	.wp-block-heading.is-style-banner-ribbon::after {
		right: -0.6em;
	}
}

/* ==========================================================================
   SVG Decorative Elements - Header & Footer Ornaments
   ========================================================================== */

/* Fleur-de-lis decoration on header */
.yeolde-header-ornament {
	display: block;
	text-align: center;
	margin-top: -1px;
	line-height: 0;
	background: var(--wp--preset--color--parchment);
	padding: 0;
}

.yeolde-header-ornament img,
.yeolde-footer-ornament img {
	height: 28px;
	width: auto;
	opacity: 0.7;
}

/* Ornament divider between sections */
.yeolde-ornament-divider {
	display: block;
	text-align: center;
	padding: 1rem 0;
}

.yeolde-ornament-divider img {
	height: 20px;
	width: auto;
	max-width: 300px;
	opacity: 0.6;
}

/* ==========================================================================
   SVG Corner Ornaments on Parchment Groups
   ========================================================================== */

.wp-block-group.is-style-parchment {
	position: relative;
}

.wp-block-group.is-style-parchment::before,
.wp-block-group.is-style-parchment::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	background-image: url('../images/icons/corner-ornament.svg');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.6;
}

.wp-block-group.is-style-parchment::before {
	top: 8px;
	left: 8px;
}

.wp-block-group.is-style-parchment::after {
	bottom: 8px;
	right: 8px;
	transform: rotate(180deg);
}

/* ==========================================================================
   Shield list markers using SVG
   ========================================================================== */

.wp-block-list.is-style-shield-markers li::before {
	content: "";
	position: absolute;
	left: -1.8em;
	top: 0.15em;
	width: 14px;
	height: 17px;
	background-image: url('../images/icons/shield-icon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	color: transparent;
	font-size: inherit;
}

/* ==========================================================================
   Sword Divider using SVG
   ========================================================================== */

.wp-block-separator.is-style-sword-divider::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url('../images/icons/sword-crossed.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background: var(--wp--preset--color--parchment) url('../images/icons/sword-crossed.svg') center / 24px no-repeat;
	padding: 0 0.5em;
	color: transparent;
}

/* ==========================================================================
   Vintage Divider decoration
   ========================================================================== */

.yeolde-vintage-divider {
	display: block;
	text-align: center;
	padding: 0.5rem 0;
}

.yeolde-vintage-divider img {
	height: 24px;
	width: auto;
	max-width: 250px;
	filter: sepia(40%) brightness(0.8);
}

/* ==========================================================================
   Fleur-de-lis accent for headings
   ========================================================================== */

.yeolde-fleur-heading {
	text-align: center;
	position: relative;
	padding-bottom: 1.5rem;
}

.yeolde-fleur-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 28px;
	background-image: url('../images/icons/fleur-de-lis.svg');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
}

/* ==========================================================================
   Post cards - border enforcement
   ========================================================================== */

.wp-block-group.has-border-color.has-aged-gold-border-color {
	border-width: 1px;
	border-style: solid;
}