/* Saturdays with Santa - TEST - /santa-is-coming-to-vances/indextest.cfm */

/* Script font for "with Santa" - file lives next to this stylesheet */
@font-face {
	font-family: "Sacramento";
	src: url("Sacramento-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

body {
	background-color: #ffffff !important;
}

#Santa {
	--white: #ffffff;
	--santa-green: #1f4a2b;
	--santa-green-dark: #163820;
	--santa-yellow: #f6c823;
	--santa-red: #c8202f;
	--santa-cream: #fffaf0;
	/* polished gold, shared by the date tags and the photo box */
	--santa-gold-rim: linear-gradient(150deg, #fff3c4 0%, #d9b45c 18%, #8f6a22 40%, #f0d68a 58%, #a7802f 78%, #e8cb78 100%);
	/* metallic gold lettering - brighter than the rim so it reads on the green */
	--santa-gold-text: linear-gradient(180deg, #fff4c2 0%, #f2d27a 30%, #d4a646 55%, #f6dc8f 78%, #c9973a 100%);
	overflow: hidden;
	/* green plaid behind the whole page */
	color: var(--santa-cream);
	background-color: var(--santa-green);
	background-image:
		repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 2px, transparent 2px 64px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 64px),
		repeating-linear-gradient(0deg,  rgba(0,0,0,.10) 0 32px, transparent 32px 64px),
		repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 32px, transparent 32px 64px);
}

/* ---------- String of lights (C9-style bulbs on a drooping wire) ---------- */
.santa-lights {
	position: relative;
	display: flex;
	height: 70px;
	overflow: hidden;
	white-space: nowrap;
	/* drooping wire: one scallop every 80px, low point in the middle where each bulb hangs */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='30'%3E%3Cpath d='M0 6 Q40 26 80 6' fill='none' stroke='%230b1d10' stroke-width='2.5'/%3E%3Cpath d='M0 5 Q40 25 80 5' fill='none' stroke='%23315c3c' stroke-width='1'/%3E%3C/svg%3E") repeat-x 0 0;
}
.santa-lights span {
	/* the glass bulb */
	--bulb-light: color-mix(in srgb, var(--bulb), #ffffff 55%);
	--bulb-dark:  color-mix(in srgb, var(--bulb), #000000 30%);
	position: relative;
	flex: none;
	top: 27px;
	width: 17px;
	height: 30px;
	margin: 0 31.5px;	/* 17 + 63 = 80px, matches the wire scallops */
	border-radius: 50% 50% 50% 50% / 32% 32% 68% 68%;	/* C9 taper to a point */
	background:
		radial-gradient(ellipse 3px 8px at 33% 38%, rgba(255,255,255,.85), transparent),	/* glass shine */
		radial-gradient(ellipse at 50% 60%, var(--bulb-light), var(--bulb) 55%, var(--bulb-dark));
	box-shadow:
		0 0 10px 3px color-mix(in srgb, var(--bulb), transparent 35%),
		0 0 28px 10px color-mix(in srgb, var(--bulb), transparent 70%);
	transform: rotate(var(--tilt, 0deg));
	transform-origin: 50% -10px;	/* swing from the socket */
	animation: santa-flicker 3.2s ease-in-out infinite;
}
.santa-lights span::before {
	/* green ridged socket */
	content: "";
	position: absolute;
	top: -11px;
	left: 2.5px;
	width: 12px;
	height: 13px;
	border-radius: 3px 3px 2px 2px;
	background:
		repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
		linear-gradient(90deg, #0d2414, #3b6b47 40%, #1c3d25 70%, #0d2414);
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* colours and a little swing, like a real strand */
.santa-lights span:nth-child(5n+1) { --bulb: #e8303a; --tilt: -14deg; }
.santa-lights span:nth-child(5n+2) { --bulb: #23b04a; --tilt: 10deg;  animation-delay: .7s; }
.santa-lights span:nth-child(5n+3) { --bulb: #ffc21a; --tilt: -6deg;  animation-delay: 1.4s; }
.santa-lights span:nth-child(5n+4) { --bulb: #2f7dff; --tilt: 16deg;  animation-delay: 2.1s; }
.santa-lights span:nth-child(5n+5) { --bulb: #ff7a1a; --tilt: -10deg; animation-delay: 2.8s; }

@keyframes santa-flicker {
	/* real bulbs don't blink off, they glow a bit brighter and dimmer */
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.25) saturate(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.santa-lights span { animation: none; }
}

/* ---------- Hero ---------- */
.santa-hero {
	padding: 40px 0 20px;
	color: #ffffff;
}

.santa-photo {
	margin: 0 auto 30px;
}

.santa-hero-text {
	text-align: center;
}

.santa-title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	text-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.santa-title span {
	display: block;
	margin-top: 4px;
	font-family: "Sacramento", "cortado", cursive;
	font-size: 104px;
	font-weight: 400;
	padding: 5px .15em .1em 0;	/* room so script swashes aren't clipped by the gold fill */
}

/* metallic gold lettering */
.santa-title span,
.santa-details-title {
	color: #e3bd5e;	/* fallback */
	background: var(--santa-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

.santa-tagline {
	margin: 18px 0 28px;
	font-size: 26px;
	color: var(--santa-cream);
}

/* ---------- Gold medal date tags ---------- */
.santa-tags .col-xs-12 {
	margin-bottom: 20px;
}

.santa-tag {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 290px;
	aspect-ratio: 1.3 / 1;	/* true oval, like the flyer */
	margin: 0 auto;
	padding: 10px 12px 2px;
	border: 12px solid transparent;
	border-radius: 50%;
	overflow: hidden;
	color: #3a2806;
	/* medal finish:
	   - pebbled texture + antique gold in the recessed center (padding-box)
	   - polished, bevelled gold rim (border-box) */
	background:
		radial-gradient(circle at 50% 6px, var(--santa-green) 0 4px, #4a3409 4.5px, rgba(255,240,190,.7) 5.5px, transparent 6.5px) border-box,	/* hole punch in the rim */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .17 0 0 0 0 .02 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,
		radial-gradient(ellipse at 35% 28%, #f3dc8e, #d4ad55 45%, #a98232 80%, #8a6624) padding-box,
		var(--santa-gold-rim) border-box;
	box-shadow:
		0 10px 20px rgba(0,0,0,.4),
		0 0 0 1px #6e5115,
		inset 0 4px 8px rgba(60,40,5,.55),	/* center sits below the rim */
		inset 0 -2px 4px rgba(255,240,190,.35);
}
.santa-tag::after {
	/* shimmer: a band of light that sweeps across */
	content: "";
	position: absolute;
	top: -20%;
	left: -60%;
	width: 40%;
	height: 140%;
	background: linear-gradient(100deg, transparent, rgba(255,248,220,.55), transparent);
	transform: skewX(-20deg);
	animation: santa-shimmer 4.5s ease-in-out infinite;
	pointer-events: none;
}
.santa-tag-right::after { animation-delay: 2.25s; }

.santa-tag-left  { transform: rotate(-3deg); }
.santa-tag-right { transform: rotate(3deg); }

/* twinkling star sparkles */
.santa-sparkle {
	position: absolute;
	width: 14px;
	height: 14px;
	background: #ffffff;
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	filter: drop-shadow(0 0 3px #fff);
	animation: santa-sparkle 2.2s ease-in-out infinite;
	pointer-events: none;
}
.santa-sparkle:nth-of-type(1) { top: 22%; left: 16%; }
.santa-sparkle:nth-of-type(2) { top: 30%; right: 14%; width: 10px; height: 10px; animation-delay: .8s; }
.santa-sparkle:nth-of-type(3) { bottom: 14%; right: 22%; width: 9px; height: 9px; animation-delay: 1.5s; }

@keyframes santa-shimmer {
	0%       { left: -60%; }
	45%, 100%{ left: 130%; }
}
@keyframes santa-sparkle {
	0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
	50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
	.santa-tag::after { animation: none; display: none; }
	.santa-sparkle    { animation: none; opacity: .8; }
}

.santa-tag p {
	margin: 0;
	/* stamped-into-metal lettering */
	text-shadow: 0 1px 0 rgba(255,238,180,.75), 0 -1px 0 rgba(60,40,5,.35);
}
.santa-tag-day {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.santa-tag-date {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
}
.santa-tag-date sup {
	font-size: 18px;
	top: -.9em;
}
.santa-tag-time {
	font-size: 20px;
	font-weight: 700;
}
.santa-tag-stores {
	margin-top: 6px !important;
	font-size: 17px;
}
.santa-tag-stores svg {
	width: 16px;
	height: 16px;
	vertical-align: -2px;
	fill: #3a2806;
}
.santa-tag-stores a {
	color: #3a2806;
	font-weight: 700;
	text-decoration: underline;
}
.santa-tag-stores a:hover,
.santa-tag-stores a:focus {
	color: var(--santa-red);
}

/* ---------- Details ---------- */
.santa-details {
	padding: 20px 0 60px;
}

.santa-details-title {
	margin: 0 0 14px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	font-weight: 700;
}

/* Divider: a second full-width strand, flipped so the bulbs point up */
.santa-lights-divider {
	margin: 10px 0 0;
	transform: scaleY(-1);
}
.santa-intro {
	font-size: 24px;
	line-height: 1.5;
	color: var(--santa-cream);
}

/* Photo info box: red panel with the same gold rim as the date tags */
.santa-photos {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: none;
	margin: 30px auto 0;
	padding: 26px 30px;
	border: 6px solid transparent;
	border-radius: 10px;
	color: #ffffff;
	text-align: left;
	background:
		radial-gradient(ellipse at 30% 20%, #e33a46, var(--santa-red) 55%, #a8161f) padding-box,
		var(--santa-gold-rim) border-box;
	box-shadow:
		0 10px 22px rgba(0,0,0,.22),
		0 0 0 1px #6e5115;
}
.santa-photos svg {
	flex: none;
	width: 96px;
	height: 96px;
	padding: 22px;
	border-radius: 50%;
	background: #111111;
	fill: #ffffff;
	box-shadow: 0 0 0 3px rgba(255,255,255,.85);
}
.santa-photos h3 {
	margin: 0 0 8px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	font-weight: 700;
	color: #ffffff;
}
.santa-photos p {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.45;
}
.santa-photos p:last-child {
	margin-bottom: 0;
}
.santa-photos a {
	color: #ffffff;
	font-weight: 700;
	text-decoration: underline;
}
.santa-photos a:hover,
.santa-photos a:focus {
	color: #ffe58a;
}

/* ---------- Big screens: let the page grow instead of leaving wide side margins ---------- */
@media (min-width: 1400px) {
	#Santa .container {
		width: 90%;
		max-width: 1600px;
	}
	.santa-title      { font-size: 104px; }
	.santa-title span { font-size: 122px; }
	.santa-tagline    { font-size: 30px; }
	.santa-tag        { max-width: 340px; }
	.santa-tag-day    { font-size: 16px; }
	.santa-tag-date   { font-size: 48px; }
	.santa-tag-time   { font-size: 23px; }
	.santa-tag-stores { font-size: 19px; }
	.santa-details-title { font-size: 54px; }
	.santa-intro      { font-size: 27px; }
	.santa-photos h3  { font-size: 38px; }
	.santa-photos p   { font-size: 23px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.santa-hero      { padding: 30px 0 30px; }
	.santa-title     { font-size: 60px; }
	.santa-title span{ font-size: 72px; }
	.santa-tagline   { font-size: 21px; }
	.santa-details-title { font-size: 34px; }
	.santa-intro     { font-size: 21px; }
	.santa-photos p  { font-size: 19px; }
	.santa-photos svg{ width: 80px; height: 80px; padding: 18px; }
	.santa-photos    { flex-direction: column; text-align: center; gap: 16px; padding: 24px 20px; }
	.santa-photos h3 { font-size: 28px; }
}