/* css/raf-mode.css */
/* RAF review: black panel + white type (scoped, safe) */

body.is-raf .review{
  max-width: 70ch;
  margin: 0 auto;
  padding: 16px 16px 18px;
  border-radius: 16px;
  background: #000;
  /*border: 1px solid rgba(255,255,255,1);*/
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.88);
}

/* Head */
/* ---------- RAF: REVIEW kicker color ---------- */
/*Review for...*/
body.is-raf .review__kicker{
  color: #E8FAEA; /* deep red */
  font-size: 28px;
}
/* Book Title */
body.is-raf .review__title{
  color: rgba(255,255,255,1);
}
/*  If you...*/
body.is-raf .review__sub{
   color: rgba(232,250,234,.5);
}

/* Success banner */
body.is-raf .review__success{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(58,166,107,0.18);
  color: rgba(255,255,255,0.86);
}

/* Labels */
body.is-raf .review__label{
    font-size: 14px;
    font-weight: 400;
  color: rgba(232,250,234,1);
}

body.is-raf .review__optional{
    font-weight: 400;
  color: rgba(232,250,234,.5);
}

/* Inputs */
body.is-raf .review__input,
body.is-raf .review__textarea{
  border: 1px solid rgba(232,250,234,1);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,0.92);
}

body.is-raf .review__input::placeholder,
body.is-raf .review__textarea::placeholder{
  color: rgba(232,250,234,1);
}

body.is-raf .review__input:focus,
body.is-raf .review__textarea:focus{
  outline: none;
  border-color: rgba(232,250,234,1);
  background: rgba(232,250,234,1);
  box-shadow: 0 0 0 3px rgba(230,230,250,0.18);
}

/* ---------- RAF: review action buttons should match top nav ---------- */

body.is-raf .review__actions{
  display:flex;
  gap: 14px;             /* match nav spacing */
  flex-wrap: wrap;
  align-items: center;
}

/* Make both the <button> and <a> look like .nav__link */
body.is-raf .review__actions .port-link{
  position: relative;

  /* match nav typography */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI,
               Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;

  /* match nav shape */
  padding: 6px 8px;
  border-radius: 10px;

  /* match nav color */
  color: rgba(232,250,234,1);
  background: transparent;
  border: 0;

  text-decoration: none;
  cursor: pointer;
}

/* underline (same mechanism as .nav__link::after) */
body.is-raf .review__actions .port-link::after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2px;
  background: rgba(173,235,179,1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s ease;
}

body.is-raf .review__actions .port-link:hover::after{
  transform: scaleX(1);
}

/* keyboard focus (same vibe as nav) */
body.is-raf .review__actions .port-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(173,235,179,0.20);
}

/* Mobile */
@media (max-width: 720px){
  body.is-raf .review{ padding: 14px; }
}
/* ---------- RAF: darken panel behind review ---------- */

/* Remove the warm sun glow just for RAF pages */
body.is-raf .frame__inner{
  background: #111; /* deep charcoal, not pure black */
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* Optional: soften rail separation so it doesn’t fight the dark panel */
body.is-raf .rail{
  border-right-color: rgba(255,255,255,0.08);
}

/* Ensure panel column itself stays transparent */
body.is-raf .panel{
  background: transparent;
}
/* ---------- RAF: left rail readability ---------- */

body.is-raf .rail__label{
  color: rgba(255,255,255,0.55);
}

body.is-raf .photo__caption{
  color: rgba(255,255,255,0.55);
}

body.is-raf .rail__card{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.78);
}

body.is-raf .rail__card strong{
  color: rgba(255,255,255,0.92);
}

body.is-raf .rail__link{
  color: rgba(255,255,255,0.78);
  text-decoration-color: rgba(255,255,255,0.40);
}

body.is-raf .rail__link:hover{
  color: rgba(230,230,250,1);
  text-decoration-color: rgba(230,230,250,1);
}
/* RAF rail: make cards quieter */
body.is-raf .rail__card{
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.10);
}
/* ---------- RAF: dark top nav (RAF pages only) ---------- */

body.is-raf .nav{
  background-color: #000 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

body.is-raf .brand{
  color: rgba(232,250,234,1);
}

body.is-raf .brand__dot{
  /* keep your green but make the halo subtle on black */
  box-shadow: 0 0 0 3px rgba(232,250,234,1);
}

/* ---------- RAF: nav link color ---------- */

body.is-raf .nav__link{
  color: rgba(232,250,234,1); /* RAF green */
}

/* hover: slightly brighter but same hue */
body.is-raf .nav__link:hover{
  color: rgba(173,235,179,0.95);
}

/* active page */
body.is-raf .nav__link.is-active{
  color: rgba(173,235,179,1);
  background: rgba(173,235,179,0.12);
  border: 1px solid rgba(173,235,179,0.30);
}

/* underline (keeps consistency with your nav style) */
body.is-raf .nav__link::after{
  background: rgba(173,235,179,1);
}

/* focus ring readable on black */
body.is-raf .nav__link:focus-visible{
  box-shadow: 0 0 0 3px rgba(230,0,0,1);
}
/* ---------- RAF: kill remaining white page background ---------- */

body.is-raf{
  background: radial-gradient(
    90% 80% at 50% 12%,
    #111 0%,
    #050505 45%,
    #000 80%
  );
}
/* ---------- RAF: top nav red → black gradient (no seam) ---------- */

body.is-raf .nav{
  /* hard-kill any line coming from anywhere */
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* force the gradient to end on pure black (extra stop avoids red pixel seam) */
  background-image:
    linear-gradient(
      to bottom,
      #7a0f0f 0%,
      #3a0606 35%,
      #120202 65%,
      #000000 98%,
      #000000 100%
    ) !important;

  background-color: #000000 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
/* ---------- RAF: footer forest floor → fog → black ---------- */

body.is-raf .footer{
  /* kill any inherited light styling */
  background-image:
    linear-gradient(
      to top,
      #0b1a0f 0%,     /* forest floor (deep green) */
      #1a2a1e 25%,    /* moss / damp earth */
      #3a3f3c 55%,    /* fog rising */
      #0e0e0e 80%,    /* thinning light */
      #000000 100%   /* night */
    ) !important;

  background-color: #000000 !important;
  border-top: none !important;
}

/* Footer text readability on dark */
body.is-raf .footer__inner,
body.is-raf .footer__tagline,
body.is-raf .footer__datetime,
body.is-raf .footer__legal{
  color: rgba(230,230,230,0.70);
}

/* Footer links */
body.is-raf .footer__link{
  color: rgba(230,230,230,0.75);
}
body.is-raf .footer__link:hover{
  color: rgba(180,220,180,0.95); /* misty green highlight */
}
/* ---------- RAF: brand treatment ---------- */

/* RUSS text = silver */
body.is-raf .brand{
  color: rgba(192,192,192,1); /* silver */
  
}

/* Dot = red */
body.is-raf .brand__dot{
  background: #ADEBB3; /* deep blood red */
  box-shadow: 0 0 0 3px rgba(173,235,179,1);
}
/* ---------- RAF: brand text swap ---------- */
/* Requires nav.php to have:
   <span class="brand__text brand__text--default">Russ</span>
   <span class="brand__text brand__text--raf">Rafeal</span>
*/

.brand__text--raf{
  display: none;
}

body.is-raf .brand__text--default{
  display: none;
}

body.is-raf .brand__text--raf{
  display: inline;
    /* typography */
  font-size: 14px;
  font-weight: 600;      /* try 500–700 */
  font-style: italic;    /* or italic */
  letter-spacing: 0.12em; /* optional, gives gravitas */
  /*text-transform: uppercase; */
}
/* RAF rail: obvious test change */
body.is-raf .rail__card{
  background: transparent !important;
  border-color: rgba(255,255,255,0.04) !important;
}