/*
Theme Name: Lanternglow
Theme URI: https://www.tamiveldura.com
Author: Tami Veldura
Description: Custom dark fantasy standalone FSE block theme for tamiveldura.com. Personal use.
Version: 1.5.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lanternglow
*/

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wp--preset--color--bg-darkest);
  color: var(--wp--preset--color--text-main);
  font-family: var(--wp--preset--font-family--homenaje);
  font-size: 1rem;
  line-height: 1.6;
}

a {
  color: var(--wp--preset--color--accent-tami);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--wp--preset--color--text-bright);
}

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

/* ============================================
   CSS VARIABLE BRIDGES
   Short aliases that match the homepage design system,
   mapped to WP preset vars so they work site-wide.
   ============================================ */
:root {
  --teal:        var(--wp--preset--color--accent-tami);
  --teal-dim:    #3aabbc;
  --teal-glow:   rgba(87,222,239,0.18);
  --teal-trace:  rgba(87,222,239,0.08);
  --pink:        var(--wp--preset--color--accent-london);
  --bg-darkest:  var(--wp--preset--color--bg-darkest);
  --bg-dark:     var(--wp--preset--color--bg-dark);
  --bg-mid:      var(--wp--preset--color--bg-mid);
  --brand:       var(--wp--preset--color--brand);
  --brand-light: var(--wp--preset--color--brand-light);
  --mid-purple:  var(--wp--preset--color--mid-purple);
  --text-bright: var(--wp--preset--color--text-bright);
  --text-main:   var(--wp--preset--color--text-main);
  --text-dim:    var(--wp--preset--color--text-dim);
  --text-muted:  var(--wp--preset--color--text-muted);
  --font-display: var(--wp--preset--font-family--voltaire);
  --font-heading: var(--wp--preset--font-family--voltaire);
  --font-body:    var(--wp--preset--font-family--homenaje);
  --radius: var(--wp--custom--radius);
  --ease:   0.3s cubic-bezier(0.4,0,0.2,1);
  --max:    1200px;
}

/* ============================================
   UTILITY / DESIGN-SYSTEM CLASSES
   Ported from the homepage so they work everywhere.
   ============================================ */

/* Kicker label */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.75rem;
}
.kicker-dot {
  width: 5px;
  height: 5px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
  animation: kicker-blink 2s ease-in-out infinite;
}
@keyframes kicker-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* Tag pills */
.tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border: 1px solid rgba(87,222,239,0.28);
  border-radius: 2px;
  color: var(--text-dim);
}
.tag-group { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* World/genre tags */
.world-tag {
  background: rgba(87,222,239,0.07);
  border: 1px solid rgba(87,222,239,0.22);
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.26rem 0.7rem;
  border-radius: 2px;
}
.world-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.9rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary { background: var(--teal); color: #06001a; border-color: var(--teal); }
.btn-primary:hover { background: transparent; color: var(--teal); box-shadow: 0 0 24px var(--teal-glow); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal-trace); color: #fff; box-shadow: 0 0 20px var(--teal-glow); }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: rgba(87,222,239,0.25); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

/* Pull quote */
.pull {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-bright);
  border-left: 2px solid var(--teal);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  line-height: 1.65;
}

/* Colour helpers */
.teal  { color: var(--teal); }
.dim   { color: var(--text-dim); }
.muted { color: var(--text-muted); }

/* Section divider (feather / skull ornament) */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.section-divider::before { background: linear-gradient(to right, transparent, rgba(87,222,239,0.3)); }
.section-divider::after  { background: linear-gradient(to left,  transparent, rgba(87,222,239,0.3)); }
.divider-img {
  width: 150px;
  opacity: 0.75;
  filter: drop-shadow(0 0 10px rgba(87,222,239,0.7)) drop-shadow(0 0 22px rgba(87,222,239,0.3));
  transform: rotate(-32deg);
  animation: float 7s ease-in-out infinite;
}

/* Float animation (shared with floating elements) */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(4deg); }
}

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   SITE HEADER (fixed nav)
   ============================================ */
.site-header {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 200;
  background: linear-gradient(to bottom, rgba(5,0,10,.92) 0%, transparent 100%);
  transition: background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
  outline: none;
}

/* Kill any black border WordPress core or browser UA might add to the header element */
.wp-site-blocks > header,
header.wp-block-template-part,
.wp-block-template-part > header {
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.site-header.pinned {
  background: rgba(5,0,10,.97) !important;
  border-bottom-color: rgba(87,222,239,.1);
  backdrop-filter: blur(8px);
}

/* Site title */
.site-header .wp-block-site-title,
.site-header .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--voltaire);
  font-size: 1.45rem !important;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-dim);
  text-decoration: none;
  white-space: nowrap;
}

.site-header .wp-block-site-title a:hover {
  color: var(--wp--preset--color--accent-tami);
}

/* Nav block wrapper — override WordPress default font-size on the block itself */
.site-header .wp-block-navigation {
  font-size: 1.05rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  gap: 2.2rem !important;
}

/* Nav links */
.site-header .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--voltaire);
  font-size: 1.05rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--text-dim);
  text-decoration: none;
  transition: color 0.2s;
  padding: 0;
}

/* More generous header height to match visual weight of old design */
.site-header.wp-block-group {
  padding-top: 1.35rem !important;
  padding-bottom: 1.35rem !important;
}

/* Breathing room between header and page content */
header.wp-block-template-part {
  margin-bottom: 2rem;
}

/* Admin bar breathing room (logged-in only) */
.admin-bar header.wp-block-template-part {
  padding-top: 0.5rem;
}

.site-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-tami);
}

/* Dropdown container */
.site-header .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--bg-dark) !important;
  border: 1px solid var(--wp--preset--color--brand-light);
  border-radius: var(--wp--custom--radius);
  padding: 0.75rem 0 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 200px;
  top: 100%;
  left: 0;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.55rem 1.1rem;
  color: var(--wp--preset--color--text-main);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: none;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-tami);
  background: rgba(255,255,255,.05);
}

/* Dropdown arrow */
.site-header .wp-block-navigation__submenu-icon {
  color: var(--wp--preset--color--text-muted);
}

.site-header .wp-block-navigation__submenu-icon svg path {
  stroke: var(--wp--preset--color--text-muted);
}

/* Nav CTA button */
.nav-cta-btn .wp-block-button__link {
  background: var(--wp--preset--color--accent-tami) !important;
  color: #06001a !important;
  font-family: var(--wp--preset--font-family--voltaire);
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--wp--preset--color--accent-tami);
  transition: all 0.25s ease;
  text-decoration: none;
}

.nav-cta-btn .wp-block-button__link:hover {
  background: transparent !important;
  color: var(--wp--preset--color--accent-tami) !important;
  box-shadow: 0 0 24px rgba(87,222,239,.18);
}

/* Mobile overlay */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(5,0,10,.98) !important;
  backdrop-filter: blur(12px);
  z-index: 199;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--voltaire);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-main);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-tami);
}

/* Hamburger & close buttons */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--text-bright);
  background: none;
  border: none;
  cursor: pointer;
}

.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
  fill: var(--wp--preset--color--text-bright);
}

/* Hide CTA on mobile */
@media (max-width: 768px) {
  .site-header .nav-cta {
    display: none;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--wp--preset--color--bg-darkest);
  border-top: 1px solid var(--wp--preset--color--brand);
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer-links li {
  margin-bottom: 0.4rem;
}

.site-footer .footer-links a {
  color: var(--wp--preset--color--text-dim);
  font-size: 1rem;
}

.site-footer .footer-links a:hover {
  color: var(--wp--preset--color--accent-tami);
}

.site-footer .wp-block-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.footer-bottom {
  color: var(--wp--preset--color--text-muted);
  font-size: 1rem;
  border-top: 1px solid var(--wp--preset--color--brand);
  padding-top: 1rem;
  margin-top: 2rem;
}

/* ============================================
   PENNAME ACCENT OVERRIDES
   Applied via body class from functions.php
   ============================================ */
.penname-tami   { --penname-accent: var(--wp--preset--color--accent-tami);   --penname-dim: var(--wp--preset--color--accent-tami-dim);   }
.penname-london { --penname-accent: var(--wp--preset--color--accent-london); --penname-dim: var(--wp--preset--color--accent-london-dim); }
.penname-anna   { --penname-accent: var(--wp--preset--color--accent-anna);   --penname-dim: var(--wp--preset--color--accent-anna-dim);   }
.penname-stlynn { --penname-accent: var(--wp--preset--color--accent-stlynn); --penname-dim: var(--wp--preset--color--accent-stlynn-dim); }

/* ============================================
   GLOBAL BLOCK OVERRIDES
   ============================================ */

/* Buttons */
.wp-element-button,
.wp-block-button__link {
  transition: all 0.25s ease !important;
}

/* Lists */
.wp-block-list {
  padding-left: 1.5rem;
}

/* Post content — clear fixed nav */
.has-global-padding > .alignfull {
  margin-inline: 0;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:where(.wp-site-blocks *:focus) {
  outline: 2px solid var(--wp--preset--color--accent-tami);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   LIBRARY & STORY CPT
   ============================================ */

/* Story cards in archive grid */
.story-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.story-card .wp-block-post-featured-image img {
  aspect-ratio: 2/3;
  object-fit: cover;
  width: 100%;
}
.card-penname a,
.meta-penname a {
  color: var(--wp--preset--color--accent-tami);
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.meta-rating a,
.card-rating a {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 0.15em 0.5em;
  font-size: 0.75rem;
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
}

/* Story meta row (single story / chapter) */
.story-meta {
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.story-meta a { text-decoration: none; }

/* Chapter prev/next links */
.story-navigation a {
  color: var(--wp--preset--color--accent-tami);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--voltaire, sans-serif);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.story-navigation a:hover { text-decoration: underline; }

/* Chapter list shortcode ([chapter_list]) */
.chapter-list {
  margin: 1.5rem 0 2rem;
  padding-left: 1.5rem;
}
.chapter-list__item {
  margin-bottom: 0.5rem;
}
.chapter-list__link {
  color: var(--wp--preset--color--text-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}
.chapter-list__link:hover {
  color: var(--wp--preset--color--accent-tami);
  text-decoration: underline;
}
.chapter-list-empty {
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

/* Book single layout */
.book-header-columns {
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.book-cover img {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.book-meta {
  gap: 0.5rem;
  margin-bottom: 1rem;
}