/* =========================================================
   Raleigh Junk Pros – Custom Styles (cleaned + hero fixes + site background)
   ========================================================= */

/* -------------------------
   Base typography + rhythm
-------------------------- */
main h1{ letter-spacing:-0.6px; }
main h2{ letter-spacing:-0.3px; }
main p{ color:#334155; }

.wp-site-blocks > main{ line-height:1.5; }

/* Force light scheme (avoid browser dark-mode overrides) */
:root{ color-scheme: light; }


/* Prevent any accidental horizontal scroll from full-bleed bands */
html, body { overflow-x: hidden; }

/* Full-bleed section band wrapper */
.rjp-band{
  position: relative;
  padding: 44px 0;              /* vertical breathing room */
}

/* The full-width background layer */
.rjp-band::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index:-1;
}

/* Light band (misty, subtle motion) */
.rjp-band--mist::before{
  background:
    radial-gradient(1200px 520px at 15% 20%, rgba(29,78,137,.10), transparent 60%),
    radial-gradient(1000px 520px at 85% 30%, rgba(230,126,34,.12), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 55%, #f8fafc 100%);
}

/* Strong dark band (competitor “purple/black” vibe but slate/navy) */
.rjp-band--slate::before{
  background:
    radial-gradient(1200px 520px at 20% 20%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(1200px 520px at 90% 30%, rgba(230,126,34,.16), transparent 62%),
    linear-gradient(180deg, #0b1224 0%, #0f172a 100%);
}

/* Make text readable if you put content inside dark bands */
.rjp-band--slate,
.rjp-band--slate h2,
.rjp-band--slate h3,
.rjp-band--slate p{
  color:#fff;
}
.rjp-band--slate p{ color: rgba(255,255,255,.86); }

/* Optional: tighten card contrast when inside dark band */
.rjp-band--slate .rjp-card{
  border-color: rgba(226,232,240,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

/* Warm/light orange band (nice for bottom sections) */
.rjp-band--warm::before{
  background:
    radial-gradient(1200px 520px at 15% 30%, rgba(230,126,34,.14), transparent 60%),
    radial-gradient(1100px 520px at 85% 20%, rgba(29,78,137,.08), transparent 62%),
    linear-gradient(180deg, #fff 0%, #f8fafc 55%, #fff 100%);
}


/* SERVICES band: tighten layout, consistent card sizing */
.rjp-band--slate h2{
  margin: 0 0 14px;
}

/* Make columns spacing consistent */
.rjp-band--slate .wp-block-columns{
  gap: 16px;
  margin-top: 12px;
  margin-bottom: 0;
  align-items: stretch;
}

/* Ensure each column/card stretches evenly */
.rjp-band--slate .wp-block-column{
  display: flex;
}

.rjp-band--slate .wp-block-column > a.rjp-card{
  width: 100%;
  height: 100%;
  padding: 18px !important; /* keep consistent */
}

/* Responsive: stack services cards cleanly */
@media (max-width: 900px){
  .rjp-band--slate .wp-block-columns{
    flex-direction: column;
  }
}


/* Full-width band wrapper */
.rjp-band{
  position: relative;
  padding: 44px 0;            /* creates breathing room above/below the band */
}

.rjp-band::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;                /* full viewport width */
  top:0; bottom:0;
  z-index:-1;
}

/* IMPORTANT: when multiple blocks are inside one band, space them out */
.rjp-band > * + *{
  margin-top: 26px;           /* this prevents the “squished together” look */
}

/* Optional: slightly more space on desktop */
@media (min-width: 900px){
  .rjp-band{ padding: 56px 0; }
  .rjp-band > * + *{ margin-top: 30px; }
}



/*input, textarea, select, button{ color-scheme: light; }*/

/* Buttons text safety */
.wp-block-button__link{ color:#0f172a; }
.wp-block-button__link.has-background{ color:#fff; }
.wp-block-button__link.has-white-background-color{ color:#0f172a !important; }
.has-action-orange-background-color,
.has-blue-background-color{ color:#fff !important; }

/* -------------------------
   Hero
-------------------------- */
.rjp-hero{
  position:relative;          /* needed for overlay */
  overflow:hidden;            /* keeps overlay and bg tidy */
  border-radius:22px;

  /* Background image + subtle brand gradients */
  background:
    url('/wp-content/uploads/truck-loading.png') center/cover no-repeat,
    radial-gradient(1200px 600px at 20% 10%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(1200px 600px at 90% 50%, rgba(30,64,175,.12), transparent 60%),
    #0b1224;

  color:#fff;
}

/* Overlay for consistent readability */
.rjp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(2,6,23,.82) 0%,
    rgba(2,6,23,.58) 55%,
    rgba(2,6,23,.40) 100%
  );
  pointer-events:none;
}

@media (max-width: 768px){
  .rjp-hero::before{
    background: linear-gradient(
      180deg,
      rgba(2,6,23,.55) 0%,
      rgba(2,6,23,.45) 55%,
      rgba(2,6,23,.35) 100%
    );
  }

  /* optional: help the image read better on mobile */
  .rjp-hero{
    background-position: 70% center; /* shifts focal point slightly */
  }
}

.rjp-hero, .rjp-hero *{ color:#fff; position:relative; } /* keep text above overlay */
.rjp-hero p{ color: rgba(255,255,255,.88) !important; }
.rjp-hero .rjp-badge{ color: rgba(255,255,255,.92) !important; }
.rjp-hero .wp-block-group{ max-width:680px; }
.rjp-hero h1{ text-shadow:0 2px 4px rgba(0,0,0,0.3); }

.rjp-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:14px;
}

/* HERO button row fix (desktop + general) */
.rjp-hero .wp-block-buttons{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center;
}

/* Some themes add margins that cause weird wrap/overlap */
.rjp-hero .wp-block-button{ margin:0 !important; }

.rjp-hero .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;         /* prevents label wrapping inside the button */
  padding:12px 16px;
  border-radius:14px;
}

/* Desktop hero spacing */
@media (min-width: 900px){
  .rjp-hero{ padding:44px 40px !important; }
  .rjp-hero h1{ line-height:1.05 !important; margin-bottom:14px !important; }
  .rjp-hero p{ line-height:1.6 !important; max-width:62ch; }
  .rjp-hero .wp-block-buttons{ margin-top:18px !important; margin-bottom:14px !important; }
}

/* Mobile hero */
@media (max-width: 768px){
  .rjp-hero{ padding:26px 16px !important; }
  .rjp-hero h1{
    font-size:34px !important;
    letter-spacing:-0.6px;
    line-height:1.05 !important;
  }
  .rjp-hero p{ font-size:16px !important; }

  /* stack buttons on mobile */
  .rjp-hero .wp-block-buttons{
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }
  .rjp-hero .wp-block-buttons .wp-block-button{ width: 100%; }
  .rjp-hero .wp-block-buttons .wp-block-button__link{
    width:100%;
    text-align:center;
  }
}

/* -------------------------
   Cards
-------------------------- */
.rjp-card{
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 25px rgba(2,6,23,.08);
  border:1px solid #e2e8f0;
  padding:16px !important; /* mobile first */
}
@media (min-width: 900px){
  .rjp-card{ padding:22px !important; }
}

.rjp-card h2,
.rjp-card h3{
  margin:0 0 10px !important;
  line-height:1.2;
}
.rjp-card p{
  margin:0 !important;
  color:#334155;
}
.rjp-card ul,
.rjp-card ol{
  margin:10px 0 0 18px;
  color:#334155;
}

/* Any CTA buttons inside cards: full width on mobile */
@media (max-width: 768px){
  .rjp-card .wp-block-buttons{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .rjp-card .wp-block-buttons .wp-block-button{ width:100%; }
  .rjp-card .wp-block-buttons .wp-block-button__link{
    display:block;
    width:100%;
    text-align:center;
  }
}

/* -------------------------
   Header layout + brand
-------------------------- */
.rjp-header{ background:#fff; }

.rjp-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rjp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0f172a;
  min-width:0;
}

.rjp-brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}

.rjp-brand__name{
  font-size:20px;
  font-weight:800;
  letter-spacing:0.2px;
  color:#0b1224;
  position:relative;
}

.rjp-brand__name::after{
  content:"";
  display:block;
  position:absolute;
  left:0;
  bottom:-6px;
  width:38px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,#2563eb,#f97316);
}

.rjp-brand__tag{
  font-size:11px;
  color:#64748b;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:42vw;
}

@media (max-width: 600px){
  .rjp-brand__tag{ display:none; }
}

/* -------------------------
   Desktop top nav
-------------------------- */
.rjp-topnav{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.rjp-topnav a{
  color:#0f172a;
  text-decoration:none;
  font-weight:650;
  font-size:14px;
  padding:8px 8px;
  border-radius:10px;
}
.rjp-topnav a:hover{ background:#f1f5f9; }

/* -------------------------
   Desktop dropdown (Services)
   This fixes the "closes when moving mouse"
-------------------------- */
.rjp-nav-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.rjp-nav-parent{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* submenu panel */
.rjp-nav-submenu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width: 260px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(2,6,23,.12);
  padding:10px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index: 9999;
}

/* Hover bridge so it doesn’t collapse when you move cursor down */
.rjp-nav-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}

/* show submenu on hover or keyboard focus */
.rjp-nav-dropdown:hover .rjp-nav-submenu,
.rjp-nav-dropdown:focus-within .rjp-nav-submenu{
  display:flex;
}

/* submenu links */
.rjp-nav-submenu a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#0f172a;
  font-weight:650;
  font-size:14px;
  line-height:1.1;
}
.rjp-nav-submenu a:hover{
  background:#f1f5f9;
}

/* Divider + section label inside submenu (Services / Pricing sections) */
.rjp-nav-submenu .rjp-nav-divider{
  height:1px;
  background:#e2e8f0;
  margin:8px 6px;
}
.rjp-nav-submenu .rjp-nav-section{
  padding:6px 10px 4px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#64748b;
}

/* -------------------------
   Header actions
-------------------------- */
.rjp-header__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.rjp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:#f97316;
  font-weight:800;
  box-shadow:0 10px 20px rgba(249,115,22,.22);
}
.rjp-cta:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  transition: all .15s ease;
}

/* Orange CTA hover for Gutenberg buttons (optional) */
.has-action-orange-background-color:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  transition:all 0.2s ease;
  box-shadow:0 4px 12px rgba(230,126,34,.3);
}

/* -------------------------
   Mobile menu + burger
-------------------------- */
.rjp-burger{
  display:none;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  border-radius:12px;
  padding:10px 12px;
  line-height:1;
  cursor:pointer;
}
.rjp-burger-icon{ display:block; }

.rjp-mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.45);
  z-index:9999;
}
.rjp-mobile-menu__inner{
  background:#fff;
  margin:12px;
  border-radius:16px;
  padding:14px;
  box-shadow:0 12px 40px rgba(2,6,23,0.18);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rjp-mobile-menu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:6px;
  border-bottom:1px solid #e2e8f0;
  margin-bottom:6px;
}
.rjp-mobile-close{
  border:0;
  background:transparent;
  cursor:pointer;
}
.rjp-mobile-menu a{
  text-decoration:none;
  color:#0f172a;
  font-weight:650;
  padding:10px 10px;
  border-radius:12px;
}
.rjp-mobile-menu a:hover{ background:#f1f5f9; }
.rjp-mobile-cta{
  background:#2563eb;
  color:#fff !important;
  text-align:center;
  font-weight:800;
  border-radius:999px;
}

.rjp-no-scroll{ overflow:hidden; }

/* Mobile divider + section label (for Pricing grouping) */
.rjp-mobile-divider{
  height:1px;
  background:#e2e8f0;
  margin:6px 4px;
}
.rjp-mobile-section{
  padding:6px 10px 2px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#64748b;
}

/* Responsive: hide desktop nav, show burger */
@media (max-width: 900px){
  .rjp-topnav{ display:none; }
  .rjp-burger{ display:inline-flex; }
  .rjp-brand__name, .rjp-brand__tag{ max-width:46vw; }
  .rjp-cta{ padding:10px 12px; font-size:14px; }
}

@media (max-width: 420px){
  .rjp-cta{ padding:9px 10px; font-size:13px; }
  .rjp-brand__name, .rjp-brand__tag{ max-width:58vw; }
}

/* =========================
   Nested flyout (Pricing)
   ========================= */

/* container inside the first submenu */
.rjp-nav-flyout{
  position:relative;
}

/* parent row inside submenu */
.rjp-nav-flyout-parent{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* the flyout panel */
.rjp-nav-flyout-menu{
  position:absolute;
  top:-10px;               /* aligns with parent */
  left: calc(100% + 10px); /* space between panels */
  min-width: 260px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(2,6,23,.12);
  padding:10px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index: 10000;
}

/* Hover bridge between the two panels */
.rjp-nav-flyout-menu::before{
  content:"";
  position:absolute;
  left:-12px;
  top:0;
  width:12px;
  height:100%;
}

/* show flyout on hover/focus */
.rjp-nav-flyout:hover .rjp-nav-flyout-menu,
.rjp-nav-flyout:focus-within .rjp-nav-flyout-menu{
  display:flex;
}

/* reuse submenu link styling */
.rjp-nav-flyout-menu a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#0f172a;
  font-weight:650;
  font-size:14px;
  line-height:1.1;
}
.rjp-nav-flyout-menu a:hover{
  background:#f1f5f9;
}

/* Mobile: disable desktop flyout behavior (accordion handles it) */
@media (max-width: 900px){
  .rjp-nav-flyout-menu{ display:none !important; }
}

/* Mobile accordion in drawer */
.rjp-mobile-accordion{
  border-radius:12px;
  border:1px solid #e2e8f0;
  padding:6px 8px;
}
.rjp-mobile-accordion > summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  padding:8px 8px;
  border-radius:10px;
}
.rjp-mobile-accordion[open] > summary{
  background:#f1f5f9;
}
.rjp-mobile-accordion__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 6px 10px;
}
.rjp-mobile-accordion summary::-webkit-details-marker{ display:none; }

/* Prelaunch header - remove when launched!! */
.rjp-prelaunch-bar{
  background:#0b1224;
  color:#e5e7eb;
  font-size:13px;
  font-weight:600;
  text-align:center;
  padding:6px 10px;
  letter-spacing:.2px;
}

@media (max-width: 600px){
  .rjp-prelaunch-bar{
    font-size:12px;
    padding:6px 8px;
  }
}

/* Mobile accordion (Services/Pricing) */
.rjp-mobile-accordion { width: 100%; }

.rjp-mobile-acc-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rjp-mobile-acc-caret{
  transition: transform .18s ease;
  display: inline-flex;
}

.rjp-mobile-acc-btn[aria-expanded="true"] .rjp-mobile-acc-caret{
  transform: rotate(180deg);
}

.rjp-mobile-acc-panel{
  padding: 0 0 8px 0;
}

.rjp-mobile-acc-panel a{
  display: block;
  padding: 10px 0;
  opacity: .95;
}

/* Blog formatting */
/* Blog cards match site style */
.rjp-post-card{
  background: #fff;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}
.rjp-post-card a{ text-decoration: none; }
.rjp-post-card a:hover{ text-decoration: underline; }

/* Header call button */
.rjp-call{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Keep header clean on smaller screens (show phone mainly on mobile menu + hero) */
@media (max-width: 900px){
  .rjp-call{ display:none; }
}

.rjp-footer a,
.rjp-footer a:visited{
  color:#2563eb;
}