/* ROOF-EX Blog Pro Theme v2
   - Big layout refresh (hero + two-column reading layout)
   - Keeps existing menu/footer/links in place
   - Adds: hero imagery, sidebar TOC slot, richer typography, progress + back-to-top
*/

:root{
  --re-maxw: 80rem;
  --re-prose: 72ch;
  --re-radius: 1.25rem;
  --re-border: rgba(15, 23, 42, 0.10);
  --re-muted: rgba(15, 23, 42, 0.62);
  --re-shadow: 0 18px 45px rgba(2, 6, 23, 0.12);
  --re-shadow-strong: 0 24px 65px rgba(2, 6, 23, 0.22);
  --re-glass: rgba(255,255,255,0.86);
}

body{
  scroll-padding-top: 110px;
}

/* ---------- Hero (image + glow) ---------- */
.re-hero{
  position: relative;
  background: radial-gradient(1200px 700px at 15% 10%, rgba(255,255,255,0.12), transparent 55%),
              radial-gradient(900px 550px at 85% 15%, rgba(249, 115, 22, 0.22), transparent 55%),
              linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.85));
}

.re-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.92)),
    var(--heroimg);
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  transform: scale(1.03);
  filter: saturate(1.1) contrast(1.05);
  pointer-events:none;
}

.re-hero-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .14;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.re-hero-glow{
  position:absolute;
  width: 720px;
  height: 720px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .25;
  pointer-events:none;
  background: radial-gradient(circle, rgba(249,115,22,0.65), transparent 60%);
}
.re-hero-glow--1{ top:-420px; left:-260px; }
.re-hero-glow--2{ top:-340px; right:-320px; opacity:.18; background: radial-gradient(circle, rgba(56,189,248,0.70), transparent 62%); }

.re-hero-card{
  position: relative;
  z-index: 1;
  max-width: 60rem;
  padding: 2rem 1.75rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(2,6,23,0.35);
}
@media (min-width: 768px){
  .re-hero-card{ padding: 2.5rem 2.25rem; }
}

.re-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(249,115,22,0.16);
}

/* ---------- Main background polish ---------- */
main.re-main{
  position: relative;
}
main.re-main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 650px at 10% 10%, rgba(15, 23, 42, 0.06), transparent 55%),
    radial-gradient(900px 550px at 90% 18%, rgba(249, 115, 22, 0.08), transparent 60%),
    radial-gradient(900px 550px at 50% 92%, rgba(56, 189, 248, 0.06), transparent 60%);
  z-index:0;
}
main.re-main > *{
  position: relative;
  z-index: 1;
}

/* Breadcrumb */
.re-breadcrumb{
  color: rgba(15, 23, 42, 0.62);
  margin-bottom: 1rem;
}
.re-breadcrumb a{
  color: rgba(15, 23, 42, 0.72);
}
.re-breadcrumb a:hover{
  opacity: .9;
}

/* Cards */
.re-article-card{
  box-shadow: var(--re-shadow) !important;
}
.re-side-card{
  border-radius: var(--re-radius);
  border: 1px solid var(--re-border);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.10);
  padding: 1.15rem;
}

.re-side-card--toc{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.re-side-link{
  display:flex;
  align-items:center;
  gap: .7rem;
  padding: .8rem .9rem;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: white;
  text-decoration: none !important;
}
.re-side-link:hover{
  border-color: rgba(249,115,22,0.35);
  box-shadow: 0 10px 25px rgba(2,6,23,0.10);
  transform: translateY(-1px);
}
.re-side-link i{
  width: 18px;
  text-align: center;
  opacity: .85;
}

/* ---------- Rich typography (works without Tailwind typography plugin) ---------- */
.re-article-body{
  margin-top: 1.75rem;
}
.re-article-body :is(p, li, dd){
  max-width: var(--re-prose);
  line-height: 1.8;
  font-size: 1.06rem;
  color: rgba(15, 23, 42, 0.88);
}
.re-article-body :is(p, ul, ol, dl){
  margin-top: 0.95rem;
}
.re-article-body :is(h2, h3, h4){
  letter-spacing: -0.02em;
  color: rgba(2, 6, 23, 0.95);
}
.re-article-body h2{
  margin-top: 2.4rem;
  font-size: 1.65rem;
  line-height: 1.25;
}
.re-article-body h3{
  margin-top: 1.8rem;
  font-size: 1.25rem;
}
.re-article-body a{
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.re-article-body a:hover{ opacity: .9; }

.re-article-body ul, .re-article-body ol{
  padding-left: 1.25rem;
}
.re-article-body li{
  margin-top: .45rem;
}

.re-article-body blockquote{
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid rgba(249,115,22,0.55);
  background: rgba(249,115,22,0.06);
  border-radius: .9rem;
}

.re-article-body hr{
  border-color: rgba(15,23,42,0.08);
  margin: 2.25rem 0;
}

.re-article-body img{
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,0.10);
}

/* ---------- TOC polish (in sidebar slot) ---------- */
.pro-toc-slot .pro-toc{
  margin: 0;
}
.pro-toc{
  border: 1px solid var(--re-border);
  border-radius: var(--re-radius);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
}
.pro-toc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: 1rem 1.1rem;
}
.pro-toc-title{
  font-weight: 900;
  font-size: 1rem;
}
.pro-toc-subtitle{
  color: var(--re-muted);
  font-size: .9rem;
  margin-top: .1rem;
}
.pro-toc-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border: 1px solid var(--re-border);
  border-radius: 999px;
  padding: .55rem .85rem;
  font-weight: 900;
  font-size: .9rem;
  background: white;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pro-toc-toggle:active{ transform: scale(0.98); }
.pro-toc-body{ padding: 0 1.1rem 1.1rem 1.1rem; }
.pro-toc-list{ display:grid; grid-template-columns: 1fr; gap: .35rem; }
@media (min-width: 768px){
  .pro-toc-list{ grid-template-columns: 1fr; }
}
.pro-toc-link{
  display:flex;
  align-items:flex-start;
  gap: .6rem;
  padding: .55rem .65rem;
  border-radius: .95rem;
  border: 1px solid transparent;
  text-decoration: none !important;
}
.pro-toc-link:hover{
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.06);
}
.pro-toc-bullet{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  margin-top:.45rem;
  background: rgba(56, 189, 248, 0.70);
  flex: 0 0 auto;
}
.pro-toc-link.is-active{
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.22);
}
.pro-toc-link.is-active .pro-toc-bullet{ background: rgba(56, 189, 248, 1); }
.pro-toc-h3{ padding-left: 1.25rem; opacity: 0.95; }

/* ---------- Reading progress bar ---------- */
.pro-progress{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: rgba(255,255,255,0.0);
}
.pro-progress > span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(249,115,22,1));
}

/* ---------- Back to top FAB ---------- */
.pro-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display:none;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--re-border);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pro-fab:hover{ transform: translateY(-1px); }
.pro-fab svg{ width: 20px; height: 20px; }

/* ---------- Active nav link highlight ---------- */
.pro-active-nav{
  position: relative;
  font-weight: 900;
}
.pro-active-nav::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
}
header:not(.bg-brandNavy) .pro-active-nav::after{
  background: rgba(249,115,22,0.95);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pro-progress > span{ transition:none !important; }
  .pro-fab{ transition:none !important; }
  .re-side-link{ transition:none !important; }
  .re-hero::before{ transition:none !important; }
}