/*
Theme Name: Roam Play Repeat
Theme URI: https://roamplayrepeat.com
Author: Roam Play Repeat
Description: A clean off-white, black, and muted-red block theme for Roam Play Repeat. Built for travel, gaming, reading/manhwa, affiliate content, and future merch.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: roam-play-repeat
*/

:root {
  --rpr-paper: #F7F5F2;
  --rpr-ink: #111111;
  --rpr-red: #B2433C;
  --rpr-line: #DED9D3;
  --rpr-muted: #6F6B67;
  --rpr-white: #FFFFFF;
  --rpr-radius: 2px;
  --rpr-shadow: 0 14px 38px rgba(17, 17, 17, 0.07);
}

html { scroll-behavior: smooth; }

body {
  background: var(--rpr-paper);
  color: var(--rpr-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  text-underline-offset: 0.18em;
}

.rpr-header {
  background: rgba(247,245,242,.96);
  border-bottom: 1px solid rgba(17,17,17,.08);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
}

.admin-bar .rpr-header { top: 32px; }

.rpr-header__inner {
  min-height: 88px;
  gap: 28px;
}

.rpr-header .wp-block-site-logo img {
  max-height: 58px;
  width: auto;
  object-fit: contain;
}

.rpr-header .wp-block-site-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 1.25rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  margin: 0;
}

.rpr-header .wp-block-navigation-item__content {
  color: var(--rpr-ink);
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
}

.rpr-header .wp-block-navigation-item__content:hover {
  color: var(--rpr-red);
}

.rpr-hero {
  overflow: hidden;
  border-bottom: 1px solid var(--rpr-line);
}

.rpr-hero__inner {
  min-height: 640px;
  align-items: stretch !important;
}

.rpr-eyebrow {
  color: var(--rpr-red);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.rpr-display {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .88;
  text-transform: uppercase;
}

.rpr-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 600px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.rpr-hero__title {
  font-size: clamp(4rem, 8vw, 7.5rem);
  margin: 18px 0 26px;
  max-width: 760px;
}

.rpr-hero__lede {
  color: #393633;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  max-width: 610px;
}

.rpr-hero-art {
  min-height: 600px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, transparent 0 48%, rgba(178,67,60,.94) 48% 52%, transparent 52%),
    radial-gradient(circle at 76% 28%, rgba(178,67,60,.98) 0 16%, transparent 16.2%),
    linear-gradient(150deg, #2d2a27 0 31%, #111111 31% 47%, #6a615a 47% 58%, #e8e1da 58% 100%);
}

.rpr-hero-art::before,
.rpr-hero-art::after {
  content: "";
  position: absolute;
  background: var(--rpr-paper);
  transform: rotate(-33deg);
  opacity: .98;
}

.rpr-hero-art::before {
  width: 44%;
  height: 200%;
  right: -22%;
  top: -45%;
}

.rpr-hero-art::after {
  width: 9px;
  height: 74%;
  right: 23%;
  top: 13%;
  background: var(--rpr-red);
}

.rpr-button .wp-block-button__link {
  border-radius: 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 16px 24px;
  text-transform: uppercase;
}

.rpr-button--outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--rpr-ink);
  color: var(--rpr-ink);
}

.rpr-section {
  padding-top: clamp(64px, 8vw, 108px);
  padding-bottom: clamp(64px, 8vw, 108px);
}

.rpr-section--compact {
  padding-top: 52px;
  padding-bottom: 52px;
}

.rpr-section-heading {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 34px;
}

.rpr-section-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  letter-spacing: -.015em;
  line-height: .95;
  margin: 0;
  text-transform: uppercase;
}

.rpr-red-rule {
  width: 54px;
  height: 3px;
  background: var(--rpr-red);
  margin-bottom: 16px;
}

.rpr-category-grid {
  gap: 18px !important;
}

.rpr-category-card {
  min-height: 330px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--rpr-shadow);
  border: 1px solid rgba(17,17,17,.07);
}

.rpr-category-card::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -56px;
  width: 160px;
  height: 160px;
  border: 24px solid var(--rpr-red);
  transform: rotate(42deg);
  opacity: .9;
}

.rpr-category-card--travel {
  background:
    linear-gradient(180deg, transparent 0 35%, rgba(17,17,17,.9) 100%),
    linear-gradient(135deg, #9aa6a0 0 28%, #d9d4cd 28% 44%, #6b7775 44% 68%, #2f3838 68% 100%);
}
.rpr-category-card--play {
  background:
    linear-gradient(180deg, transparent 0 35%, rgba(17,17,17,.94) 100%),
    radial-gradient(circle at 70% 38%, rgba(178,67,60,.95), transparent 31%),
    linear-gradient(145deg, #111111 0 52%, #47312f 52% 100%);
}
.rpr-category-card--read {
  background:
    linear-gradient(180deg, transparent 0 35%, rgba(17,17,17,.92) 100%),
    repeating-linear-gradient(0deg, #67524a 0 23px, #d7c3ad 23px 31px, #38302d 31px 54px);
}

.rpr-category-card__content {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 2;
}

.rpr-category-card h3,
.rpr-category-card p,
.rpr-category-card a {
  color: white;
}

.rpr-category-card h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 2.6rem;
  line-height: .92;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.rpr-category-card p {
  font-size: .68rem;
  letter-spacing: .18em;
  margin: 0;
  text-transform: uppercase;
}

.rpr-post-grid .wp-block-post {
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 8px 24px rgba(17,17,17,.045);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.rpr-post-grid .wp-block-post-featured-image {
  aspect-ratio: 16/10;
  margin: 0;
  overflow: hidden;
}

.rpr-post-grid .wp-block-post-featured-image img {
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.rpr-post-grid .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.025);
}

.rpr-post-grid .wp-block-post-title,
.rpr-post-grid .wp-block-post-excerpt,
.rpr-post-grid .wp-block-post-date,
.rpr-post-grid .wp-block-post-terms {
  padding-left: 22px;
  padding-right: 22px;
}

.rpr-post-grid .wp-block-post-terms {
  color: var(--rpr-red);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-top: 20px;
  text-transform: uppercase;
}

.rpr-post-grid .wp-block-post-title {
  font-size: 1.22rem;
  line-height: 1.15;
  margin-top: 8px;
}

.rpr-post-grid .wp-block-post-title a {
  text-decoration: none;
}

.rpr-post-grid .wp-block-post-excerpt {
  color: #595450;
  font-size: .9rem;
  line-height: 1.5;
}

.rpr-post-grid .wp-block-post-date {
  color: #8B8580;
  font-size: .68rem;
  letter-spacing: .08em;
  margin-top: auto;
  padding-bottom: 22px;
  text-transform: uppercase;
}

.rpr-merch {
  background: #EFE9E2;
  border-top: 1px solid var(--rpr-line);
  border-bottom: 1px solid var(--rpr-line);
  overflow: hidden;
  position: relative;
}

.rpr-merch::after {
  content: "RPR";
  color: rgba(17,17,17,.035);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: min(28vw, 360px);
  line-height: .75;
  position: absolute;
  right: -14px;
  bottom: -32px;
  pointer-events: none;
}

.rpr-footer {
  background: var(--rpr-paper);
  border-top: 1px solid var(--rpr-line);
  padding-top: 34px;
  padding-bottom: 34px;
}

.rpr-footer .wp-block-site-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
}

.rpr-article-shell {
  padding-top: 72px;
  padding-bottom: 96px;
}

.rpr-article-shell .wp-block-post-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .94;
  text-transform: uppercase;
}

.rpr-article-shell .wp-block-post-content {
  font-size: 1.08rem;
  line-height: 1.75;
}

.rpr-article-shell .wp-block-post-content h2,
.rpr-article-shell .wp-block-post-content h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .admin-bar .rpr-header { top: 46px; }
  .rpr-header__inner { min-height: 72px; }
  .rpr-hero__inner { min-height: 0; }
  .rpr-hero__copy { min-height: auto; padding-top: 46px; padding-bottom: 46px; }
  .rpr-hero-art { min-height: 360px; }
  .rpr-category-card { min-height: 270px; }
}

@media (max-width: 782px) {
  .rpr-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
}


/* ---------- V1.1: Shop Soon + entrance screen ---------- */
.rpr-nav-soon > a,
.rpr-nav-soon .wp-block-navigation-item__content {
  opacity: .58;
  cursor: default;
  pointer-events: none;
  white-space: nowrap;
}

.rpr-nav-soon .wp-block-navigation-item__label::after {
  content: "";
}

body.rpr-loader-open {
  overflow: hidden;
}

.rpr-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background: #111111;
  color: #F7F5F2;
  opacity: 1;
  visibility: visible;
  transition: opacity .72s ease, visibility .72s ease;
}

.rpr-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rpr-loader__inner {
  width: min(760px, 88vw);
  text-align: center;
}

.rpr-loader__logo {
  display: block;
  width: min(650px, 88vw);
  height: auto;
  margin: 0 auto 28px;
  mix-blend-mode: normal;
}

.rpr-loader__kicker {
  margin: 0 0 18px;
  color: rgba(247,245,242,.62);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.rpr-loader__track {
  width: min(360px, 72vw);
  height: 2px;
  margin: 0 auto 28px;
  overflow: hidden;
  background: rgba(247,245,242,.12);
}

.rpr-loader__bar {
  width: 42%;
  height: 100%;
  background: #B2433C;
  transform: translateX(-110%);
  animation: rpr-loader-bar 1.15s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes rpr-loader-bar {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(115%); }
  100% { transform: translateX(250%); }
}

.rpr-loader__choices {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

.rpr-loader.is-ready .rpr-loader__choices {
  opacity: 1;
  transform: translateY(0);
}

.rpr-loader__button {
  appearance: none;
  min-width: 158px;
  padding: 13px 18px;
  border-radius: 0;
  border: 1px solid rgba(247,245,242,.38);
  background: transparent;
  color: #F7F5F2;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.rpr-loader__button--sound {
  border-color: #B2433C;
  background: #B2433C;
}

.rpr-loader__button:hover,
.rpr-loader__button:focus-visible {
  border-color: #F7F5F2;
  outline: none;
}

.rpr-loader__button--sound:hover,
.rpr-loader__button--sound:focus-visible {
  background: #9f3731;
}

.rpr-loader__note {
  margin: 14px auto 0;
  max-width: 500px;
  color: rgba(247,245,242,.42);
  font-size: .72rem;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .rpr-loader,
  .rpr-loader__choices { transition: none; }
  .rpr-loader__bar { animation: none; width: 100%; }
}