@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Playfair+Display+SC:wght@400;700&family=Bodoni+Moda:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,500;0,700;1,400&family=Alice&family=Cookie&display=swap');

/* === FONT STYLES FOR TWENTY SEVENTEEN === */

/* Page Titles, Site Title, Major Headings */
h1, .entry-title, .page-title, .site-title {
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Subtitles or secondary title lines */
.subtitle, .section-title, .page-subtitle {
  font-family: 'Playfair Display SC', serif !important;
  letter-spacing: 1px;
}

/* Section Headers / Menu Titles / Major Headings (H2, H3) */
h2, h3, .widget-title, .site-description {
  font-family: 'Playfair Display', serif !important;
}

/* Subheadings (used within content or smaller headers) */
h4, h5, h6, .subheading {
  font-family: 'Bodoni Moda', serif !important;
}

/* Body text */
body, p, li, .entry-content, .textwidget {
  font-family: 'Lora', serif !important;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* Blockquotes and quote sections */
blockquote, q, .wp-block-quote p {
  font-family: 'Alice', serif !important;
  font-style: italic;
  font-size: 12px;
  line-height: 1.6;
  color: #555;
}

/* Image captions or figure captions */
figcaption, .wp-caption-text, .gallery-caption, .wp-block-image figcaption {
  font-family: 'Cookie', cursive !important;
  font-size: 14px;
	font-weight: normal;
  text-shadow: 0.3px 0.3px 0 #00000033;
  color: #000000;
  letter-spacing: 0.5px;
}

/* Site title & tagline (header area) */
.site-title {
  font-family: 'Cinzel', serif !important;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.site-description {
  font-family: 'Playfair Display', serif !important;
  font-size: 16px;
  font-style: italic;
  color: #777;
}

/* === END FONT STYLES FOR TWENTY SEVENTEEN === */


/* HEADER FIX- Add a subtle gradient band only behind the site title area */
.custom-header {
  position: relative;
  overflow: hidden;
}

/* Creates a dark gradient behind only the title area */
.custom-header::after {
  content: "";
  position: absolute;
  bottom: 0; /* Start from bottom of image upward */
  left: 0;
  width: 100%;
  height: 45%; /* adjust how tall the band is: 35% = shorter, 50% = taller */
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

/* Ensure title and tagline are above the gradient */
.site-branding, .site-title, .site-description {
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6); /* optional but improves contrast */
}

/* Optional: keep text color bright and consistent */
.site-title a, .site-description {
  color: #fff !important;
}