/* onepen-core.css — Phase 2 variables & tiny baseline (safe, non-destructive) */

:root{
  /* Colors (from Phase 2.1) */
  --bg-900: #0a121c;
  --panel-800: #0d1a25;
  --accent-gold: #d6b36c;
  --accent-gold-2: #f2d58b;
  --muted-500: #7da0a8;
  --text-100: #f2f2f2;
  --link-100: var(--accent-gold);

  /* Safe zones */
  --safe-desktop: 64px;
  --safe-tablet: 32px;
  --safe-mobile: 18px;

  /* Typography */
  --fs-hero: 46px;
  --fs-h1: 36px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-body: 18px;
  --fs-small: 14px;
  --line-ratio: 1.55;

  /* Transitions */
  --fast: 180ms;
  --med: 300ms;

  /* Breakpoints */
  --bp-desktop: 1200px;
  --bp-laptop: 992px;
  --bp-tablet: 768px;
  --bp-mobile: 480px;

  /* Shadows & glow tokens (Phase 2.2) */
  --shadow-panel: 0 8px 18px rgba(0,0,0,0.28);
  --shadow-container: 0 12px 32px rgba(0,0,0,0.35);
  --glow-gold: 0 0 6px var(--accent-gold-2);
  --overlay-soft: linear-gradient(rgba(2,6,10,0.10), rgba(2,6,10,0.18));
  --divider-gold-opacity: 0.45;
}

/* --- Typographic application rules (Phase 2) --- */
/* -----------------------
   Background System (Phase 2)
   - Desktop: fixed background
   - Mobile / tablet: scroll fallback
   - Soft overlay token used for readability
   - Add body classes like .bg-main, .bg-books, .bg-blog, .bg-account for Phase 3 binding
   ----------------------- */

.site-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed; /* desktop default */
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

/* Mobile / tablet fallback: remove fixed attachment for better performance */
@media (max-width: var(--bp-tablet)) {
  .site-bg { background-attachment: scroll; }
}

/* Overlay layer to increase contrast on busy backgrounds */
.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--overlay-soft); /* token from :root */
  mix-blend-mode: normal;
  opacity: 1;
}

/* Content sits above overlay */
.site-bg > .onepen-container,
.site-bg main {
  position: relative;
  z-index: 2;
  padding-top: var(--safe-desktop);   /* default safe-top - may be overridden per template */
  padding-bottom: var(--safe-desktop);/* default safe-bottom */
}

/* Utility background classes — replace URLs with your actual file names in Phase 3 */
.bg-main { background-image: url('/wp-content/uploads/background-main.webp'); }
.bg-books { background-image: url('/wp-content/uploads/background-books.webp'); }
.bg-blog  { background-image: url('/wp-content/uploads/background-blog.webp'); }
.bg-account{ background-image: url('/wp-content/uploads/background-account.webp'); }

/* If you prefer to load via theme assets rather than uploads, use:
   url('/wp-content/themes/onepen-2027/assets/img/background-main.webp') 
   — keep the final source consistent in Phase 3
*/

/* Safe zone adjustments (desktop / tablet / mobile) */
@media (min-width: var(--bp-desktop)) {
  .onepen-container, body.home main { padding-top: var(--safe-desktop); padding-bottom: var(--safe-desktop); }
}
@media (max-width: calc(var(--bp-desktop) - 1px)) and (min-width: var(--bp-tablet)) {
  .onepen-container, body.home main { padding-top: var(--safe-tablet); padding-bottom: var(--safe-tablet); }
}
@media (max-width: calc(var(--bp-tablet) - 1px)) {
  .onepen-container, body.home main { padding-top: var(--safe-mobile); padding-bottom: var(--safe-mobile); }
}

/* Readable column rules */
.onepen-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}


/* Body uses Source Sans 3 light for readable UI and paragraphs */
body{
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--line-ratio);
  color: var(--text-100);
  margin: 0;
  background: var(--bg-900);
}

/* Headings use Cinzel Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: "Cinzel", "Cinzel Decorative", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-100);
  margin-top: 0.9em;
  margin-bottom: 0.6em;
}

/* Heading sizes (use your scale from 2.1) */
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

/* Navigation, footer and signature accents use Tangerine */
header nav a,
.site-footer a,
.nav-tangerine,
.signature,
.small-accent {
  font-family: "Tangerine", cursive;
  color: var(--accent-gold);
  transition: color var(--fast) ease, text-shadow var(--fast) ease;
}

/* Ensure Tangerine accents are readable and not used for long paragraphs */
.signature { font-size: 1.25rem; }

/* Gold hover behaviour for nav/footer accents (non-invasive) */
header nav a:hover,
.site-footer a:hover,
.nav-tangerine:hover {
  color: var(--accent-gold-2);
  text-shadow: var(--glow-gold);
}
/* --- 1pen Gold Shimmer (Strong Glow + Subtle Underline) --- */

header nav a,
.site-footer a {
  position: relative;
  text-decoration: none;
  padding-bottom: 1px; /* reduced underline spacing */
}

/* Ultra thin underline — barely visible until hover */
header nav a::after,
.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 0.5px; /* thinner underline */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(214,179,108,0.15),
    rgba(242,213,139,0.25),
    rgba(214,179,108,0.15),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: center;
  transition:
    opacity var(--fast) ease,
    transform var(--fast) ease;
}

/* Hover activates line */
header nav a:hover::after,
.site-footer a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* STRONG shimmering glow for header */
header nav a:hover {
  animation: goldShimmer 1.6s linear infinite;
}

/* LIGHT shimmer for footer — gentler tone */
.site-footer a:hover {
  animation: goldShimmerSoft 1.8s ease-in-out infinite;
}

/* Strong shimmer (header) */
@keyframes goldShimmer {
  0% {
    text-shadow: 0 0 4px var(--accent-gold);
  }
  50% {
    text-shadow: 0 0 9px var(--accent-gold-2), 0 0 14px var(--accent-gold);
  }
  100% {
    text-shadow: 0 0 4px var(--accent-gold);
  }
}

/* Soft shimmer (footer) */
@keyframes goldShimmerSoft {
  0% {
    text-shadow: 0 0 2px rgba(242,213,139,0.35);
  }
  50% {
    text-shadow: 0 0 5px rgba(242,213,139,0.45), 0 0 8px rgba(214,179,108,0.35);
  }
  100% {
    text-shadow: 0 0 2px rgba(242,213,139,0.35);
  }
}

/* Fallback safety — if webfonts fail, keep readable fallback */
@media (prefers-reduced-motion: reduce){
  header nav a, .site-footer a { transition: none; text-shadow: none; }
}