/* =========================================================
   CROSS KNETCHEL — SITE STYLES
   Paste this entire file into:
   Appearance > Customize > Additional CSS
   (or Appearance > Editor > Styles > Additional CSS)

   This REPLACES all previous snippets — don't keep old ones
   alongside this, just swap your whole Additional CSS box
   for what's below.
   ========================================================= */

/* ---------------------------------------------------------
   1. FONTS — imported from Google Fonts
   --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=MedievalSharp&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------------------------------------------------------
   2. BASE PAGE — background color, text color, body font,
      and the global subtle gold crosshatch pattern
   --------------------------------------------------------- */
body {
  background-color: #2a2018;
  color: #D8CBB0;
  font-family: 'EB Garamond', serif;
  background-image: url('https://crossknetchel.com/wp-content/uploads/2026/08/dark-brown-creased-leather-textured-background.jpg');
  background-repeat: repeat;
  background-blend-mode: multiply;
}

/* ---------------------------------------------------------
   3. HEADINGS — name, section titles
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: 'Cinzel', serif;
  color: #D4AF37;
}

/* ---------------------------------------------------------
   4. LINKS
   --------------------------------------------------------- */
a {
  color: #D4AF37;
}

/* ---------------------------------------------------------
   5. DIVIDERS (Separator block)
   --------------------------------------------------------- */
.wp-block-separator {
  border-top: 2px solid #7A1F2B;
  max-width: 300px;
  margin: 40px auto;
  opacity: 1;
}

/* ---------------------------------------------------------
   6. PROFESSIONAL PHOTO — gold border
   (Skip this if you've already set a border via the Image
   block's own Border setting in the sidebar — don't do both.)
   --------------------------------------------------------- */
.wp-block-image img {
  border: 4px double #D4AF37;
  border-radius: 2px;
}

/* ---------------------------------------------------------
   7. VOICE REEL PLAYERS
   Use ONE of the two blocks below depending on which type
   of audio block you ended up using:
   --------------------------------------------------------- */

/* 7a. If using the default WordPress Audio block: */
.wp-block-audio {
  background-color: #1E1712;
  border: 1px solid #D4AF37;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
  padding: 12px;
  margin-bottom: 16px;
}

/* 7b. If using a SoundCloud embed (Embed block or Custom HTML iframe): */
iframe[src*='soundcloud'] {
  border: 1px solid #D4AF37;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
  margin-bottom: 16px;
}

/* ---------------------------------------------------------
   8. SLOGAN — only needed if you used the Custom HTML
   version instead of styling it via a normal block
   --------------------------------------------------------- */
.slogan-text {
  font-family: 'MedievalSharp', cursive;
  font-size: 22px;
  color: #D4AF37;
  text-align: center;
}

/* ---------------------------------------------------------
   9. ABOUT SECTION — stone texture background + heading/text
   overrides (this section has the .about-parchment class
   added to it via the block's Advanced settings)
   --------------------------------------------------------- */
.about-parchment {
  background-color: #EDE0C8;
  padding: 62px;
}

/* ---------------------------------------------------------
   13. SCROLL UNROLL ANIMATION — About section unrolls into
   view like a scroll when scrolled to (needs matching JS,
   see build guide)
   --------------------------------------------------------- */
.about-parchment {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}

.about-parchment.unrolled {
  transform: scaleY(1);
  opacity: 1;
}

.about-parchment h2,
.about-parchment h3,
.about-parchment h4 {
  color: #241B10;
  font-family: 'MedievalSharp', cursive;
}

/* ---------------------------------------------------------
   10. PLAY CUE — the pulsing "press play below" text above
   the reels (Custom HTML block, class="play-cue")
   --------------------------------------------------------- */
.play-cue {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---------------------------------------------------------
   11. DROP CAP — About paragraph's first letter
   (hand-coded via <span class="drop-cap"> since this theme
   doesn't support the block editor's Drop Cap toggle)
   --------------------------------------------------------- */
.drop-cap {
  float: left;
  font-size: 4em;
  line-height: 0.8;
  font-family: 'Cinzel', serif;
  color: #2A2018;
  padding-right: 8px;
  padding-top: 4px;
}

/* ---------------------------------------------------------
   12. HOVER STATES — links and buttons shift to moss green
   --------------------------------------------------------- */
a:hover {
  color: #5C6E3F;
  transition: color 0.3s ease;
}

.wp-block-button__link:hover {
  background-color: #5C6E3F !important;
  transition: background-color 0.3s ease;
}

/* ---------------------------------------------------------
   14. REEL DESCRIPTIONS — italic manuscript-style text
   (add class "reel-description" to each description
   paragraph under Reel 1 / Reel 2)
   --------------------------------------------------------- */
.reel-description {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.3px;
  color: #E0D3B0;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   15. DICE RATING WIDGET — roll a die to reveal a review
   --------------------------------------------------------- */
.dice-rating-widget {
  text-align: center;
  padding: 40px 20px;
}

.dice-display {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #3B2A1A, #1E1712);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border: 3px solid #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.35);
  transition: transform 0.1s ease, box-shadow 0.3s ease;
}

.dice-display.rolling {
  animation: diceSpin 0.1s linear infinite;
}

.dice-display.critical {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
  border-color: #EDE0C8;
}

@keyframes diceSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(12deg); }
}

.dice-number {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 44px;
  color: #D4AF37;
}

.dice-critical-text {
  font-family: 'MedievalSharp', cursive;
  color: #7A1F2B;
  font-size: 18px;
  margin-bottom: 8px;
  display: none;
}

.dice-roll-btn {
  font-family: 'Cinzel', serif;
  background-color: #7A1F2B;
  color: #EDE0C8;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dice-roll-btn:hover {
  background-color: #5C6E3F;
}

.dice-quote-box {
  margin-top: 30px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.dice-stars {
  color: #D4AF37;
  font-size: 24px;
  margin-bottom: 10px;
}

.dice-quote-text {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: #E8DFC9;
}

.dice-quote-author {
  font-family: 'Cinzel', serif;
  color: #D4AF37;
  margin-top: 10px;
}