/* ============================================
   HALLOWEEN THEME OVERRIDES
   Load this after your main CSS
   ============================================ */

/* ============================================
   BODY & PAGE BACKGROUND
   ============================================ */

body {
	background-color: #000000 !important;
	background-image: url("https://cache.e-cards.com/images/backgrounds/spooky-bg-01.jpg") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	color: #ffa500;
}

#page {
	background: linear-gradient(to bottom, 
		rgba(0, 0, 0, 0.9) 0%, 
		rgba(36, 36, 36, 0.9) 100%) !important;
	border: 3px solid rgb(255, 86, 0);
}

/* ============================================
   TYPOGRAPHY & TEXT EFFECTS
   ============================================ */

/* Headings - vibrant orange-red with pulsing glow */
h1, h2, h3, h4, h5, h6 {
	color: #ff8a00;
	text-shadow: 0 0 10px rgba(255, 69, 0, 0.389);
}

h1 {
	animation: spooky_pulse 3s ease-in-out infinite;
}

@keyframes spooky_pulse {
	0%, 100% { text-shadow: 0 0 10px rgba(255, 69, 0, 0.5); }
	50% { text-shadow: 0 0 20px rgba(255, 69, 0, 0.8); }
}

/* Body text - lighter orange for readability with glow */
p {
	color: #ffb347;
	text-shadow: 0 0 5px rgba(255, 179, 71, 0.4);
}

/* List items with subtle glow */
li {
	text-shadow: 0 0 4px rgba(255, 165, 0, 0.35);
}

/* General text elements with glow */
div, span, a {
	text-shadow: 0 0 3px rgba(255, 165, 0, 0.25);
}

/* ============================================
   LEFT NAVIGATION WITH PUMPKINS
   ============================================ */

#left_nav ul,
#left_nav li {
   list-style: none; /* ✅ removes default bullets */
   margin: 0;
   padding: 0;
   position: relative;
}
   
#left_nav li {
	padding-left: 1.5em;
}

/* Pumpkin bullets with glow animation */
#left_nav li::before {
	content: "🎃";
	position: absolute;
	left: 0;
	font-size: 1em;
	animation: pumpkin_glow 2s ease-in-out infinite;
}

@keyframes pumpkin_glow {
	0%, 100% { 
		filter: brightness(1);
		transform: scale(1);
	}
	50% { 
		filter: brightness(1.3);
		transform: scale(1.1);
	}
}

/* Active page - pumpkin pulses faster */
#left_nav a[href*="halloween/"] li::before,
#left_nav a.active li::before {
	filter: brightness(1.5);
	animation: pumpkin_pulse 1s ease-in-out infinite;
}

@keyframes pumpkin_pulse {
	0%, 100% { 
		transform: scale(1);
		filter: brightness(1.5);
	}
	50% { 
		transform: scale(1.2);
		filter: brightness(2);
	}
}

/* Navigation link colors */
#left_nav a {
	color: #ffa500;
	transition: all 0.3s ease;
}

#left_nav a:hover li {
	color: #ffcc00;
}

/* ============================================
   LINK STYLES - Halloween Orange/Purple
   ============================================ */

a {
	color: #ff8c00;
	text-decoration-color: rgba(255, 140, 0, 0.4);
	transition: all 0.3s ease;
}

a:hover {
	color: #ffa500;
}

a:visited {
	color: #9370db;
}

a:visited:hover {
	color: #ba55d3;
}

a:active {
	color: #ff4500;
}

/* Orange glow background on hover */
a::before {
	background: linear-gradient(to right, 
		rgba(255, 69, 0, 0.3),
		rgba(255, 69, 0, 0.1)
	);
}

/* Bright orange underline on hover */
a::after {
	background-color: rgba(255, 69, 0, 0.7);
}

/* ============================================
   CONTENT BOX - Dark with Orange Accents
   ============================================ */

.content_box {
	background-color: #2b2b2b;
	border-color: #ff6600;
	box-shadow: 0 0 15px rgba(255, 102, 0, 0.2);
	transition: all 0.3s ease;
}

.content_box_title {
	background-color: rgba(255, 104, 0, 0.11);
	color: #ffa500;
	border-bottom-color: #ff6600;
	text-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
}

.content_box_content {
	color: #ffb347;
}

/* ============================================
   CONTENT BOX AS LINK
   ============================================ */

.content_box_link {
	color: #ffb347 !important;
}

.content_box_link:hover,
.content_box_link:visited,
.content_box_link:active,
.content_box_link:focus {
	color: #ffb347 !important;
}

.content_box_link .content_box {
	border-color: #ff6600;
}

.content_box_link .content_box_title {
	border-bottom-color: #ff6600;
	color: #ffa500;
}

.content_box_link:hover .content_box {
	border-color: #ff4500;
	box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
	transform: translateY(-2px);
}

.content_box_link:hover .content_box_title {
	background-color: #3d2410;
	border-bottom-color: #ff4500;
	color: #ffcc00;
	font-weight: bold;
}

.content_box_link .content_box_title::after {
	color: #ff8c00;
	transition: all 0.3s ease;
}

.content_box_link:hover .content_box_title::after {
	color: #ffcc00;
}

/* ============================================
   FUN HALLOWEEN EFFECTS
   ============================================ */

/* Card images - spooky lift on hover */
.card_styled_image {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card_styled_image:hover {
	transform: translateY(-8px) rotate(2deg);
	box-shadow: 
		0 4px 8px rgba(0, 0, 0, 0.2),
		0 8px 20px rgba(255, 69, 0, 0.3);
}

/* Show More Cards button - wobble effect */
#show_more_thumbs {
	transition: all 0.3s ease;
}

#show_more_thumbs:hover {
	animation: wobble 0.5s ease;
	color: #ffcc00;
}

@keyframes wobble {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-3deg); }
	75% { transform: rotate(3deg); }
}

/* Floating bat decoration */
#page::before {
	content: "🦇";
	position: fixed;
	top: 20px;
	right: 100px;
	font-size: 2em;
	opacity: 0.3;
	animation: bat_fly 6s ease-in-out infinite;
	z-index: 1;
}

@keyframes bat_fly {
	0%, 100% { transform: translateY(0px) rotate(-5deg); }
	50% { transform: translateY(-20px) rotate(5deg); }
}

/* Spiderweb corner decoration */
#header_section::after {
	content: "🕸️";
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 3em;
	opacity: 0.2;
}


/* ============================================
   IMAGE STYLES
   ============================================ */

   .thumb_cell {
	   background-color: rgba(255, 138, 0, 1)
   }

/* ============================================
   IMAGE STYLES
   ============================================ */

.img_border_orange {
	border-color: #ff6600 !important;
}

/* ============================================
   FOOTER
   ============================================ */

#footer_section {
	margin-top: 1em;
	border-top: 3px solid transparent;
	border-image: linear-gradient(to right, 
		rgba(255, 102, 0, 0),
		rgba(255, 102, 0, 0.45),
		rgba(255, 102, 0, 0)
	) 1;
}





#site_logo {
	background-image: url('https://cache.e-cards.com/images/logos/ecards-logo-halloween-02.png');
	margin: 5px 0px 0px 18px;
	background-size: contain;
 }
 
 
 #haunted_house {
	margin: 0px auto 0px auto;
}


/* ---------- Theme Tokens ---------- */
:root {
  --pumpkin: #cc7b00;
  --pumpkin-light: #e08900;
  --cream: #ffebcc;
  --beige: #e4ded5;
  --green-ink: #ccf1c8;
  --green-link: #75b06e;
  --brown-700: rgba(64, 36, 3, 0.734);
  --gray-900: #121212;
  --gray-800: #313131;
  --brown-600: #6b4526;

  --radius-lg: 15px;
  --radius-md: 10px;
}

/* ---------- Blocks ---------- */

.text_block {
  text-align: left;
  color: var(--pumpkin);
  padding: 10px 30px;
  margin: 10px 30px;
  background: linear-gradient(180deg, var(--brown-700) 50%, var(--gray-900) 100%);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

p {
	margin-bottom: 1em;
}

.green_block {
  color: var(--green-ink);
}

.green_block a {
  color: var(--green-link);
  text-decoration: none;
}
.green_block a:hover,
.green_block a:focus-visible {
  text-decoration: underline;
}

/* ---------- Coloring book table ---------- */

#coloring_book {
  margin: 0 auto;
}
#coloring_book td {
  text-align: center;
  vertical-align: middle; /* align-content doesn't apply to <td> */
  padding: 20px;
}

/* ---------- Poems ---------- */

#halloween_poems {
  padding: 0 5px;
  width: 95%;
  overflow-wrap: anywhere; /* replaces word-wrap */
}

#halloween_poems .poem {
  border: 1px solid var(--brown-600);
  background-color: var(--gray-800);
  margin: 10px 0 20px;
  padding: 10px;
  border-radius: var(--radius-md);
}

#halloween_poems .poem .title {
  text-transform: uppercase;
  color: var(--cream);
}

#halloween_poems .poem .attribute {
  color: var(--beige);
}
#halloween_poems .poem .attribute::before {
  content: "-- ";
}

/* ---------- Overrides / Utilities ---------- */

.thumb_img {
  border: 4px solid var(--pumpkin-light);
  /* softer, modern shadow */
  box-shadow: 0 2px 12px rgba(255, 168, 0, 0.35);
}

.error {
  background-color: rgb(255 217 186);
}

#settings_block,
#card_block,
#card_front {
  background-color: rgb(255 255 255 / 0.91);
}

#recipient_list {
  background-color: rgb(255 0 0 / 0.178);
}