/* RPmain.css build 2026-09-13.1 — verify in DevTools > Sources if a change is not visible (1-year cache: Ctrl+F5) */
/* ==========================================================
   1) VARIABLES + GLOBAL DESIGN SYSTEM
========================================================== */

:root{
  --rp-navh: 96px;
  --rp-mobile-navh: 64px;

  --rp-green: #73825f;
  --rp-charcoal: #414042;
  --rp-brown: #96785f;
  --rp-slate: #465f6e;

  --rp-light: #f5f5f5;
  --rp-text: var(--rp-charcoal);
  --rp-muted: rgba(65,64,66,.78);

  --rp-container: 1280px;
}

html, body{
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body{
  color: var(--rp-text);
  font-size: 18px;
  line-height: 1.85;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

p{
  margin: 0 0 16px 0;
  color: var(--rp-muted);
}

h1,h2,h3,h4{
  color: var(--rp-charcoal);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}

h1{ font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
h2{ font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
h3{ font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
h4{ font-size: 1.1rem; letter-spacing:.04em; }

a{
  color: var(--rp-green);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

.rp-btn,
a.rp-btn{
  display:inline-block;
  padding: 14px 38px;
  border: 2px solid var(--rp-green);
  color: var(--rp-green) !important;
  background: transparent;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, opacity .2s ease, border-color .2s ease;
}
.rp-btn:hover{
  background: rgba(115,130,95,.10);
  opacity: 1;
}

.rp-btn--inverse,
a.rp-btn--inverse{
  border-color: rgba(255,255,255,.65);
  color:#fff !important;
  background: rgba(0,0,0,.12);
}
.rp-btn--inverse:hover{
  border-color:#fff;
  background: rgba(0,0,0,.24);
}

.rp-container{
  max-width: var(--rp-container);
  margin: 0 auto;
  padding: 0 28px;
}

.rp-section{
  padding: 80px 0;
}
@media (max-width:991px){
  .rp-section{ padding: 56px 0; }
}


/* ==========================================================
   2) HERO + NAV/LOGIN OVERLAY
========================================================== */

body.modal-open header,
body.modal-open .site-header,
body.modal-open .navbar,
body.modal-open .main-header,
body.modal-open .page-menu,
body.modal-open .nav.navbar-nav,
body.modal-open .dropdown-menu {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.modal-open .block-instance.outline,
body.modal-open .zone-instance.outline {
    pointer-events: none !important;
}

body.modal-open .block-instance.outline::after,
body.modal-open .zone-instance.outline::after,
body.modal-open .block-configuration,
body.modal-open .zone-configuration,
body.modal-open .block-configuration-bar,
body.modal-open .zone-configuration-bar,
body.modal-open .config-bar {
    display: none !important;
    pointer-events: none !important;
}

body.modal-open .modal,
body.modal-open .modal-dialog,
body.modal-open .modal-content,
body.modal-open .modal-header,
body.modal-open .modal-body,
body.modal-open .modal-footer,
body.modal-open .modal .close {
    pointer-events: auto !important;
}

/* ----------------------------------------------------------
   HERO WRAPPER
---------------------------------------------------------- */
#zone-feature, .zone-feature,
#zone-feature .zone-content, .zone-feature .zone-content,
#zone-feature .block-content, .zone-feature .block-content{
  overflow: visible !important;
  padding-top: 0 !important;
}

.rp-hero{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 55vh;
  min-height: 380px;
  max-height: 720px;
  overflow: hidden;
  background:#000;
  z-index: 1;
}

.rp-hero__media{ position:absolute; inset:0; z-index:1; }

.rp-hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.rp-hero__img{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 2026-09-10 (Mike): NO grey overlay on any hero - matches the WordPress site. Text stays legible
   via the text-shadows on the title / centred copy. Restore by setting display:block + background. */
.rp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: rgba(0,0,0,.45);
  pointer-events:none;
  display:none;
}

.rp-hero__content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:flex-end;
  padding: calc(var(--rp-navh) + 18px) 5vw 54px;
  color:#fff;
}

.rp-hero__bar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.rp-hero__leftTitle{
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.08;
  font-size: clamp(1.5rem, 1.2vw, 4.2rem);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* ----------------------------------------------------------
   SHARE BUTTON STYLES
---------------------------------------------------------- */
.rp-hero__share{
  display:flex;
  align-items:center;
  gap:12px;
}

.rp-hero__shareLabel{
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

.rp-hero__icon,
a.rp-hero__icon,
a.rp-hero__icon:link,
a.rp-hero__icon:visited{
  width:44px;
  height:44px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.35);
  color:#fff !important;
  text-decoration:none !important;
  font-size:20px;
  transition: all 0.3s ease;
}

.rp-hero__icon:hover,
a.rp-hero__icon:hover,
.rp-hero__icon:focus,
a.rp-hero__icon:focus{
  border-color:#fff;
  background: rgba(255,255,255,0.1);
  transform: scale(1.05);
  text-decoration:none !important;
  color:#fff !important;
}

.rp-hero__icon i,
.rp-hero__icon svg {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* =========================
   DESKTOP NAV FIXED
========================= */
@media (min-width: 992px){

  nav.navbar.navbar-static-top,
  nav.navbar,
  .navbar,
  .navbar-default,
  .navbar-inverse{
    position: relative !important;
    z-index: 9600 !important;
    background: #73825f !important;
    background-color: #73825f !important;
    border: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
  }

  body:has(.rp-hero) nav.navbar.navbar-static-top,
  body:has(.rp-hero) nav.navbar,
  body:has(.rp-hero) .navbar,
  body:has(.rp-hero) .navbar-default,
  body:has(.rp-hero) .navbar-inverse{
    position:absolute !important;
    top:0;
    left:0;
    right:0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow:none !important;
    overflow: visible !important;
  }

  .rp-hero{
    margin-top: calc(var(--rp-navh) * -1);
  }

  .navbar-header,
  .navbar-brand{
    position: relative;
    z-index: 9700 !important;
  }

  nav.navbar .navbar-collapse.collapse,
  nav.navbar .navbar-collapse,
  header nav.navbar .navbar-collapse.collapse,
  header nav.navbar .navbar-collapse,
  .navbar-collapse.collapse,
  .navbar-collapse{
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  nav.navbar .navbar-nav,
  header nav.navbar .navbar-nav,
  .navbar-nav{
    float: left !important;
    margin: 0 !important;
    display: block !important;
  }

  nav.navbar .navbar-nav > li,
  header nav.navbar .navbar-nav > li,
  .navbar-nav > li{
    float: left !important;
    display: list-item !important;
    position: relative !important;
  }

  nav.navbar .pull-right,
  header nav.navbar .pull-right,
  .navbar .pull-right{
    float: right !important;
    white-space: nowrap !important;
  }

  .navbar-default .navbar-nav > li > a,
  .navbar-inverse .navbar-nav > li > a,
  .navbar-nav > li > a{
    color:#fff !important;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
    background:transparent !important;
    background-color: transparent !important;
    padding: 28px 14px !important;
    line-height: 1 !important;
    font-size:14px !important;
  }

  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-inverse .navbar-nav > li > a:hover,
  .navbar-inverse .navbar-nav > li > a:focus,
  .navbar-nav > li > a:hover,
  .navbar-nav > li > a:focus{
    color: var(--rp-green) !important;
    text-decoration:none !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-inverse .navbar-nav > .active > a,
  .navbar-inverse .navbar-nav > .active > a:hover,
  .navbar-inverse .navbar-nav > .active > a:focus,
  .navbar-nav > .active > a,
  .navbar-nav > .active > a:hover,
  .navbar-nav > .active > a:focus{
    color: var(--rp-green) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .navbar-default .navbar-nav > li > a::before,
  .navbar-default .navbar-nav > li > a::after,
  .navbar-inverse .navbar-nav > li > a::before,
  .navbar-inverse .navbar-nav > li > a::after,
  .navbar-nav > li > a::before,
  .navbar-nav > li > a::after{
    content: none !important;
    display: none !important;
  }

  .navbar-nav > li:not(.dropdown) > a .caret{
    display: none !important;
  }

  .navbar-nav > li.dropdown > a .caret{
    display: inline-block !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
  }

  .navbar-nav > li.dropdown{
    position: relative !important;
  }

  .navbar-nav > li.dropdown > .dropdown-menu{
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    margin-top: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(20,20,20,.98) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
    z-index: 99999 !important;
    overflow: visible !important;
  }

  .navbar-nav > li.dropdown:hover > .dropdown-menu,
  .navbar-nav > li.dropdown.open > .dropdown-menu{
    display: block !important;
  }

  .navbar-nav > li.dropdown > .dropdown-menu > li{
    display: block !important;
    width: 100% !important;
  }

  .navbar-nav > li.dropdown > .dropdown-menu > li > a{
    display: block !important;
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    white-space: nowrap !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .navbar-nav > li.dropdown > .dropdown-menu > li > a:hover,
  .navbar-nav > li.dropdown > .dropdown-menu > li > a:focus,
  .navbar-nav > li.dropdown > .dropdown-menu > li.active > a{
    color: var(--rp-green) !important;
    background: rgba(255,255,255,.04) !important;
    background-color: rgba(255,255,255,.04) !important;
  }
}

/* =========================
   MOBILE NAV FIXED
========================= */
@media (max-width: 991px){

  .rp-hero{
    margin-top: 0 !important;
    height: 46vh;
    min-height: 280px;
    max-height: 520px;
  }

  nav.navbar.navbar-static-top,
  nav.navbar,
  .navbar,
  .navbar-default,
  .navbar-inverse{
    position: relative !important;
    z-index: 9600 !important;
    background: #73825f !important;
    background-color: #73825f !important;
    border: 0 !important;
  }

  body:has(.rp-hero) nav.navbar.navbar-static-top,
  body:has(.rp-hero) nav.navbar,
  body:has(.rp-hero) .navbar,
  body:has(.rp-hero) .navbar-default,
  body:has(.rp-hero) .navbar-inverse{
    background: #73825f !important;
    background-color: #73825f !important;
  }

  .navbar{
    min-height: var(--rp-mobile-navh) !important;
  }

  .navbar-header{
    min-height: var(--rp-mobile-navh) !important;
    position: relative !important;
    z-index: 10000 !important;
  }

  .navbar-toggle{
    margin-top: 10px !important;
    margin-right: 12px !important;
    padding: 8px 10px !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  .navbar-collapse,
  .navbar-collapse.collapse{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .navbar-collapse.collapsing,
  .navbar-collapse.collapse.in,
  .navbar-collapse.in{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    padding: 82px 7vw 28px !important;
    background: rgba(15,17,12,.97) !important;
    z-index: 9998 !important;
    transition: none !important;
  }

  .navbar-toggle .icon-bar{
    transition: transform .2s ease, opacity .2s ease;
  }

  .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2){
    transform: translateY(6px) rotate(45deg);
  }

  .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3){
    opacity: 0;
  }

  .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4){
    transform: translateY(-6px) rotate(-45deg);
  }

  .navbar-collapse.in .navbar-nav,
  .navbar-collapse.collapsing .navbar-nav{
    float:none !important;
    margin:0 !important;
  }

  .navbar-collapse.in .navbar-nav > li,
  .navbar-collapse.collapsing .navbar-nav > li{
    margin: 0 0 6px 0 !important;
    position: relative !important;
  }

  .navbar-collapse.in .navbar-nav > li > a::before,
  .navbar-collapse.in .navbar-nav > li > a::after,
  .navbar-collapse.collapsing .navbar-nav > li > a::before,
  .navbar-collapse.collapsing .navbar-nav > li > a::after{
    content: none !important;
    display: none !important;
  }

  .navbar-collapse.in .navbar-nav > li > a,
  .navbar-collapse.collapsing .navbar-nav > li > a{
    display:block !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    letter-spacing: .05em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color:#fff !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .navbar-collapse.in .navbar-nav > li > a:hover,
  .navbar-collapse.in .navbar-nav > li > a:focus,
  .navbar-collapse.collapsing .navbar-nav > li > a:hover,
  .navbar-collapse.collapsing .navbar-nav > li > a:focus{
    color: var(--rp-green) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .navbar-collapse.in .navbar-nav > li:not(.dropdown) > a .caret,
  .navbar-collapse.collapsing .navbar-nav > li:not(.dropdown) > a .caret{
    display: none !important;
  }

  .navbar-collapse.in .navbar-nav > li.dropdown > a .caret,
  .navbar-collapse.collapsing .navbar-nav > li.dropdown > a .caret{
    display: inline-block !important;
    margin-left: 6px !important;
  }

  .navbar-collapse.in .dropdown-menu,
  .navbar-collapse.collapsing .dropdown-menu{
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 4px 0 10px 0 !important;
    padding: 0 0 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .navbar-collapse.in .dropdown-menu > li > a,
  .navbar-collapse.collapsing .dropdown-menu > li > a{
    padding: 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.84) !important;
    background: transparent !important;
    white-space: normal !important;
  }

  .navbar-collapse.in .dropdown-menu > li > a:hover,
  .navbar-collapse.collapsing .dropdown-menu > li > a:hover{
    color: var(--rp-green) !important;
    background: transparent !important;
  }

  .navbar-collapse.in .navbar-nav > .active > a,
  .navbar-collapse.in .navbar-nav > .active > a:hover,
  .navbar-collapse.in .navbar-nav > .active > a:focus,
  .navbar-collapse.collapsing .navbar-nav > .active > a,
  .navbar-collapse.collapsing .navbar-nav > .active > a:hover,
  .navbar-collapse.collapsing .navbar-nav > .active > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-inverse .navbar-nav > .active > a,
  .navbar-inverse .navbar-nav > .active > a:hover,
  .navbar-inverse .navbar-nav > .active > a:focus,
  .navbar-nav > .active > a,
  .navbar-nav > .active > a:hover,
  .navbar-nav > .active > a:focus{
    color: var(--rp-green) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .rp-hero__bar{
    flex-direction: column;
    align-items:flex-start;
    gap:14px;
  }

  .rp-hero__leftTitle{
    font-size: clamp(1.6rem, 7vw, 2.6rem);
  }

  body:has(.rp-hero) #page-header,
  body:has(.rp-hero) .page-title-header,
  body:has(.rp-hero) .pageheader,
  body:has(.rp-hero) header.page-header,
  body:has(.rp-hero) .page-header{
    display:none !important;
  }

  body:has(.rp-hero) main.container h1:first-of-type,
  body:has(.rp-hero) #zone-content .zone-content > h1:first-child,
  body:has(.rp-hero) #zone-content .zone-content header:first-child h1{
    display:none !important;
  }
}

@media (max-width: 991px){
  .rp-hero ~ * .page-title,
  .rp-hero ~ * h1.page-title{
    display:none !important;
  }
}


/* ==========================================================
   3) FOOTER
========================================================== */

.rockypeak-footer-wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background-color: #2a2a2a !important;
  overflow: hidden !important;
}

footer,
footer .container,
footer .zone-content {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

footer,
.rockypeak-footer-wrapper,
.rockypeak-footer {
  margin-bottom: 0 !important;
}

#page-wrapper,
.page-wrapper,
.main-content,
.zone-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.rockypeak-footer {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  padding: 60px 20px 40px 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.rp-footer-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1.2fr !important;
  gap: 30px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.rp-footer-logo-section {
  display: flex;
  flex-direction: column;
}

.rp-footer-logo {
  margin-bottom: 30px;
}

.rp-footer-logo img {
  height: 70px;
  width: auto;
}

.rp-footer-contact p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  font-size: 14px;
  color: #ffffff !important;
}

.rp-footer-contact strong {
  font-weight: 600;
}

.rp-footer-contact a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.rp-footer-contact a:hover {
  color: #6f7f4b;
}

.rp-footer-services h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff !important;
}

.rp-footer-services p {
  margin: 0 0 6px 0;
  line-height: 1.7;
  font-size: 14px;
  color: #ffffff !important;
}

.rp-footer-services .rp-service-category {
  margin-bottom: 20px;
}

.rp-service-label {
  font-weight: 600;
  margin-bottom: 5px;
}

.rp-footer-links h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff !important;
}

.rp-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rp-footer-links li {
  margin-bottom: 10px;
}

.rp-footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
  display: inline-block;
}

.rp-footer-links a:hover {
  color: #6f7f4b;
}

.rp-footer-social {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.rp-social-media h3,
.rp-app-downloads h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff !important;
}

.rp-social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rp-social-icons a {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.rp-social-icons a:hover {
  opacity: 0.7;
}

.rp-social-icons svg {
  width: 40px;
  height: 40px;
  fill: #ffffff;
}

.rp-app-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rp-app-buttons a {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.rp-app-buttons a:hover {
  opacity: 0.8;
}

.rp-app-buttons img {
  height: 50px;
  width: 150px;
  object-fit: contain;
}

@media (max-width: 1400px) {
  .rockypeak-footer {
    padding: 60px 60px 40px 60px !important;
    max-width: 1280px !important;
  }
  .rp-footer-content {
    gap: 30px !important;
  }
}

@media (max-width: 1200px) {
  .rockypeak-footer {
    padding: 50px 40px 35px 40px !important;
  }
  .rp-footer-content {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 25px !important;
  }
}

@media (max-width: 992px) {
  .rockypeak-footer {
    padding: 40px 30px 30px 30px !important;
  }
  .rp-footer-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
  .rp-footer-logo-section {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .rockypeak-footer {
    padding: 40px 20px 30px 20px !important;
  }
  .rp-footer-content {
    grid-template-columns: 1fr !important;
    gap: 35px !important;
  }
  .rp-footer-logo img {
    height: 60px;
  }
  .rp-social-icons {
    justify-content: flex-start;
  }
  .rp-app-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .rockypeak-footer {
    padding: 30px 15px 25px 15px !important;
  }
  .rp-footer-content {
    gap: 30px !important;
  }
  .rp-footer-logo img {
    height: 50px;
  }
  .rp-footer-contact p,
  .rp-footer-services p,
  .rp-footer-links a {
    font-size: 13px;
  }
  .rp-social-icons svg {
    width: 35px;
    height: 35px;
  }
  .rp-app-buttons img {
    height: 45px;
  }
  .rp-social-icons {
    gap: 10px;
  }
}


/* ==========================================================
   4) HERO PAGES — TITLE/BREADCRUMB + NAV ALIGNMENT
   2026-09-10 (ClickUp 86e35n370 "Header image breaks header-bar alignment")
   The hero is a site-level block in the Feature zone. Every layout except
   Homepage renders that zone *below* the page <h1> and breadcrumbs, so those
   elements pushed the hero down: the transparent absolute navbar then sat on
   a white gap (white links invisible) and breadcrumb text showed through the
   logo. The hero already carries the page title, so on hero pages hide the
   layout's title/icon/breadcrumbs and let the hero start flush under the nav.
========================================================== */
body:has(.rp-hero) main.container > h1.pagetitle,
body:has(.rp-hero) main.container > .page-icon,
body:has(.rp-hero) main.container > ol.breadcrumb,
body:has(.rp-hero) main.container > .breadcrumb{
  display: none !important;
}

/* Breathing room between the hero and the content on the sidebar layouts
   (Left/Right Sidebar = the support pages: My Account, Manage Giving, ...),
   where plain Rock blocks follow the hero. Full Width pages are left flush:
   their designed sections (homepage grid, Weekends band, Give panel) carry
   their own spacing. */
body:has(.rp-hero) main.container > .row:has(.rp-hero) + .row:has(> .col-md-3),
body:has(.rp-hero) main.container > .row:has(.rp-hero) + .row:has(> .col-md-9){
  padding-top: 48px;
}
@media (max-width: 991px){
  body:has(.rp-hero) main.container > .row:has(.rp-hero) + .row:has(> .col-md-3),
  body:has(.rp-hero) main.container > .row:has(.rp-hero) + .row:has(> .col-md-9){
    padding-top: 32px;
  }
}

/* ==========================================================
   5) NO-HERO PAGES — NAV HOVER
   Migrated 2026-09-10 from Site.PageHeaderContent (was injected via SQL on
   2026-08-11 when theme files were not reachable). Navbar bg is solid
   #73825f and the green hover (--rp-green) disappears into it; keep top-level
   links white with an underline cue. Hero pages keep the green hover.
========================================================== */
@media (min-width: 992px){
  body:not(:has(.rp-hero)) .navbar-default .navbar-nav > li > a:hover,
  body:not(:has(.rp-hero)) .navbar-default .navbar-nav > li > a:focus,
  body:not(:has(.rp-hero)) .navbar-inverse .navbar-nav > li > a:hover,
  body:not(:has(.rp-hero)) .navbar-inverse .navbar-nav > li > a:focus,
  body:not(:has(.rp-hero)) .navbar-nav > li > a:hover,
  body:not(:has(.rp-hero)) .navbar-nav > li > a:focus,
  body:not(:has(.rp-hero)) .navbar-default .navbar-nav > .active > a,
  body:not(:has(.rp-hero)) .navbar-default .navbar-nav > .active > a:hover,
  body:not(:has(.rp-hero)) .navbar-default .navbar-nav > .active > a:focus,
  body:not(:has(.rp-hero)) .navbar-inverse .navbar-nav > .active > a,
  body:not(:has(.rp-hero)) .navbar-inverse .navbar-nav > .active > a:hover,
  body:not(:has(.rp-hero)) .navbar-inverse .navbar-nav > .active > a:focus,
  body:not(:has(.rp-hero)) .navbar-nav > .active > a,
  body:not(:has(.rp-hero)) .navbar-nav > .active > a:hover,
  body:not(:has(.rp-hero)) .navbar-nav > .active > a:focus{
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
  }
}


/* ==========================================================
   6) DESKTOP NAV — KEEP LOGO / MENU / LOGIN ON ONE ROW
   2026-09-10. Below 1200px Bootstrap's .container is 970px wide but the
   logo + 6 menu items + login need ~1000px, so the menu wrapped under the
   logo. (a) 992–1199px: let the top bar use the full viewport width and
   tighten the items a little. (b) All desktop widths: lay the menu and the
   login out as one non-wrapping flex row so they squeeze instead of dropping
   (e.g. when a logged-in name widens the corner, or a menu item is added).
   Large screens (>=1200px) keep their current 1170px container.
========================================================== */
@media (min-width: 992px) and (max-width: 1199px){
  header nav.navbar > .container{
    width: auto !important;
    max-width: none !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  header nav.navbar .navbar-collapse{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* theme.css (loaded after this file) sets .navbar-brand > img 45px !important;
     out-rank it by specificity */
  header nav.navbar .navbar-header .navbar-brand > img{
    max-height: 36px !important;
  }
  header nav.navbar .navbar-collapse > .zone-instance{
    margin-left: 14px !important;
  }
  .navbar-default .navbar-nav > li > a,
  .navbar-inverse .navbar-nav > li > a,
  .navbar-nav > li > a{
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    letter-spacing: .06em;
  }
}
@media (min-width: 1200px){
  /* Bootstrap caps .container at 1170px, which left ~7px of slack once a
     logged-in name ("Hi Michael!" + photo + caret) replaced "Log In" — the
     menu then cleared below the logo at EVERY width >=1200.
     Let the bar grow to the site's content width (--rp-container, 1280px). */
  header nav.navbar > .container{
    width: auto !important;
    max-width: var(--rp-container) !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  /* Logged-in corner is ~120px wider than "Log In": tighten the menu items */
  header nav.navbar .navbar-collapse:has(.loginstatus > li.dropdown) #zone-navigation .navbar-nav > li > a{
    padding-left: 10px !important;
    padding-right: 10px !important;
    letter-spacing: .08em;
  }
}
@media (min-width: 992px){
  /* Header row as flex: logo | menu ... login. A flex item can never be
     pushed below a float, so the menu cannot drop under the logo. */
  header nav.navbar > .container{
    display: flex !important;
    align-items: flex-start;
  }
  header nav.navbar > .container::before,
  header nav.navbar > .container::after{
    display: none !important;
  }
  header nav.navbar .navbar-header{
    float: none !important;
    flex: 0 0 auto;
  }
  header nav.navbar .navbar-header::before,
  header nav.navbar .navbar-header::after{
    display: none !important;
  }
  header nav.navbar .navbar-collapse,
  header nav.navbar .navbar-collapse.collapse{
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
  }
  /* Menu + login + search sit together at the right edge (theme.less floats
     the .page-menu block right — that is the original design); any leftover
     width goes between the logo and the first menu item, never between the
     last menu item and the login corner. (Was space-between + margin-left:auto
     until 2026-09-10, which opened a ~130px hole before "Log In"/the name.) */
  header nav.navbar .navbar-collapse,
  header nav.navbar .navbar-collapse.collapse{
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
  }
  header nav.navbar .navbar-collapse > .pull-right{
    order: 2;
    float: none !important;
    margin-left: 0;
    flex: 0 0 auto;
  }
  /* 2026-09-10 (Mike): theme.css boxes the login item to min-width:160px with
     text-align:right, so "Log In" (64px) / the logged-in name (~97px) sat at
     the right edge of an empty 160px box — a hole between the last menu item
     and the name. Size the item to its content at every desktop width. */
  header nav.navbar .loginstatus > li{
    min-width: 0 !important;
  }
  header nav.navbar .navbar-collapse > .zone-instance{
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  header nav.navbar .navbar-nav{
    display: flex !important;
    flex-wrap: nowrap;
  }
  header nav.navbar .navbar-nav > li{
    float: none !important;
    flex: 0 0 auto;
  }
  .navbar-nav > li > a{ white-space: nowrap; }
}


@media (min-width: 992px) and (max-width: 1099px){
  /* Logged in on a small laptop: show the avatar instead of "Hi Name!" */
  header nav.navbar .loginstatus > li.dropdown .loginstatus-wrapper{
    font-size: 0 !important;
    line-height: 0 !important;
  }
  /* keep the bar at 80px: 30px avatar + 25px padding top/bottom */
  header nav.navbar .loginstatus > li.dropdown > a{
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  header nav.navbar .loginstatus > li.dropdown .profile-photo{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,.25);
  }
}

/* ==========================================================
   7) TABLET (768–991px) — SHOW THE HAMBURGER
   2026-09-10. Bootstrap hides .navbar-toggle from 768px up, but this theme
   treats everything below 992px as mobile (menu collapsed), so tablets in
   landscape had no menu at all. Force the toggle on in that band.
========================================================== */
@media (min-width: 768px) and (max-width: 991px){
  /* Bootstrap floats .navbar-header at >=768 and the toggle sits before the
     brand in the DOM, so a floated toggle lands above the logo. Lay the
     header out as one row: logo left, hamburger right. */
  header nav.navbar .navbar-header{
    float: none !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  header nav.navbar .navbar-header > .navbar-toggle{
    display: block !important;
    order: 2;
    float: none !important;
    margin: 0 !important;
  }
  header nav.navbar .navbar-header > .zone-instance{
    order: 1;
  }
  /* Bootstrap's clearfix ::before/::after would become flex items and push
     the logo to the middle */
  header nav.navbar .navbar-header::before,
  header nav.navbar .navbar-header::after{
    display: none !important;
  }
  /* Bootstrap (loaded after this file) forces .navbar-collapse.collapse to
     display:block at >=768px, so the theme's mobile "hide" lost and the
     floated menu added ~100px of empty bar. Out-rank it; the open state
     (.in / .collapsing) is handled by the mobile rules above. */
  header nav.navbar .navbar-collapse:not(.in):not(.collapsing){
    display: none !important;
  }
  /* Open overlay: Bootstrap's >=768px float rules would lay the items out
     horizontally; force the same vertical list phones get. */
  header nav.navbar .navbar-collapse.in,
  header nav.navbar .navbar-collapse.collapsing{
    display: block !important;
  }
  header nav.navbar .navbar-collapse.in .pull-right,
  header nav.navbar .navbar-collapse.in .navbar-nav,
  header nav.navbar .navbar-collapse.in .navbar-nav > li,
  header nav.navbar .navbar-collapse.collapsing .pull-right,
  header nav.navbar .navbar-collapse.collapsing .navbar-nav,
  header nav.navbar .navbar-collapse.collapsing .navbar-nav > li{
    float: none !important;
    display: block !important;
    width: 100% !important;
  }
  header nav.navbar .navbar-collapse.in .navbar-nav > li > .dropdown-menu,
  header nav.navbar .navbar-collapse.collapsing .navbar-nav > li > .dropdown-menu{
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}


/* ==========================================================
   8) HEADER SEARCH ICON  (Site.Master .rp-search-link → Search page 1565)
   2026-09-10, ClickUp 86e37det4
========================================================== */
@media (min-width: 992px){
  header nav.navbar .navbar-collapse > .pull-right{
    display: flex;
    align-items: flex-start;
  }
  header nav.navbar .rp-search-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 26px 10px 26px 8px;
    color: #fff !important;
    font-size: 16px;
    line-height: 1;
    text-decoration: none !important;
    transition: opacity .2s ease;
  }
  header nav.navbar .rp-search-link:hover,
  header nav.navbar .rp-search-link:focus{ opacity: .75; }
  header nav.navbar .rp-search-link__label{ display: none; }
}
@media (max-width: 991px){
  /* phones: .pull-right is a shrink-to-fit float in the overlay, which gave the
     search link zero width — make it a full-width block (login stays right-aligned) */
  header nav.navbar .navbar-collapse.in > .pull-right,
  header nav.navbar .navbar-collapse.collapsing > .pull-right{
    float: none !important;
    display: block !important;
    width: 100% !important;
  }
  header nav.navbar .navbar-collapse .rp-search-link{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 0;
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 15px;
    line-height: 1.15;
    text-decoration: none !important;
  }
}


/* ==========================================================
   9) HOMEPAGE "UPCOMING" EVENTS SLIDER
   2026-09-10, ClickUp #29 (86e37gma1). Markup + JS: Assets/Lava/Events/UpcomingSlider.lava
   (HTML Content block on the homepage, Public calendar via Lava Sql).
   Cards styled after the mobile app: image on top, sage footer, date pill, time,
   title, summary. 2 cards visible from 768px, 1 (with a peek) below. The viewport
   is a scroll-snap scroller: arrows scroll ONE card, swipe works on touch, no
   auto-advance. Title "Upcoming" dark on white.
========================================================== */
.rp-upcoming{
  background: #fff;
  padding: 56px 0 64px;
  /* phones / tablets: title + arrows share the top row, cards below */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title nav" "viewport viewport";
  align-items: center;
  column-gap: 16px;
  row-gap: 24px;
}
.rp-upcoming__title{
  grid-area: title;
  margin: 0;
  color: var(--rp-charcoal);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.rp-upcoming__nav{
  grid-area: nav;
  display: flex;
  gap: 10px;
}
.rp-upcoming__viewport{ grid-area: viewport; }
.rp-upcoming--static .rp-upcoming__nav{ display: none; }
@media (min-width: 992px){
  /* desktop (Mike 2026-09-10): arrows sit left and right of the card row, half
     overlapping the outer card edges, vertically centred on the cards */
  .rp-upcoming{
    grid-template-columns: 1fr;
    grid-template-areas: "title" "stage";
  }
  .rp-upcoming__viewport{ grid-area: stage; }
  .rp-upcoming__nav{
    grid-area: stage;
    align-self: center;
    justify-content: space-between;
    margin: 0 -22px;          /* 44px buttons -> half outside the cards */
    position: relative;
    z-index: 2;
    pointer-events: none;     /* only the buttons take clicks, not the strip between them */
  }
  .rp-upcoming__nav .rp-upcoming__arrow{
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .rp-upcoming__nav .rp-upcoming__arrow:disabled{
    opacity: .45;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
  }
}
.rp-upcoming__arrow{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--rp-charcoal);
  background: #fff;
  color: var(--rp-charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.rp-upcoming__arrow:hover,
.rp-upcoming__arrow:focus-visible{
  background: var(--rp-charcoal);
  color: #fff;
  outline: none;
}
.rp-upcoming__arrow:disabled,
.rp-upcoming__arrow:disabled:hover{
  opacity: .3;
  cursor: default;
  background: #fff;
  color: var(--rp-charcoal);
}
.rp-upcoming__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 2026-09-10: the viewport must clip vertically for horizontal scrolling, so give the hover
     lift (-3px) and the 24px shadow room INSIDE the clip box; negative margins keep the layout. */
  padding: 12px 0 44px;
  margin: -12px 0 -44px;
}
.rp-upcoming__viewport::-webkit-scrollbar{ display: none; }
.rp-upcoming__track{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rp-upcoming__slide{
  flex: 0 0 calc(100% - 40px);
  scroll-snap-align: start;
  display: flex;
}
@media (min-width: 768px){
  .rp-upcoming__slide{ flex-basis: calc((100% - 24px) / 2); }
}
.rp-upcoming__card{
  display: block;
  width: 100%;
  background: #e9ece3;
  border-radius: 14px;
  overflow: hidden;
  color: var(--rp-charcoal);
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rp-upcoming__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.rp-upcoming__media{
  aspect-ratio: 16 / 9;
  background: #c9cfbd;
}
.rp-upcoming__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rp-upcoming__placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: rgba(255,255,255,.85);
  background: linear-gradient(135deg, var(--rp-green), var(--rp-slate));
}
.rp-upcoming__body{ padding: 18px 20px 22px; }
.rp-upcoming__meta{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rp-charcoal);
}
.rp-upcoming__date{
  display: inline-block;
  background: var(--rp-green);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
}
.rp-upcoming__time i{ margin-right: 4px; opacity: .75; }
.rp-upcoming__name{
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rp-charcoal);
}
.rp-upcoming__summary{
  margin: 0;
  color: var(--rp-muted);
  font-size: 15px;
  line-height: 1.5;
}


/* ==========================================================
   9) MENU 3RD LEVEL — HOVER FLYOUT  (.dropdown-submenu, e.g. About > Growth Path > ...)
   2026-09-10, ClickUp 86e37f0am. Desktop: the parent entry is a non-clickable label
   with a chevron; its children open in a second panel to the right on hover/focus.
   Overlay (<992px): children listed underneath, indented; chevron hidden.
========================================================== */
@media (min-width: 992px){
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu{
    position: relative !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > a.dropdown-submenu-toggle{
    cursor: default !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > a .dropdown-submenu-chevron{
    font-size: 10px !important;
    opacity: 1;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > .dropdown-menu{
    display: none !important;
    position: absolute !important;
    top: -10px !important;          /* first child aligns with the parent row (menu padding 10px) */
    left: 100% !important;
    margin: 0 !important;
    min-width: 230px !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(20,20,20,.98) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
    z-index: 100000 !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu:hover > .dropdown-menu,
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu:focus-within > .dropdown-menu{
    display: block !important;
  }
  /* the label stays white in every state (rest, hover, active child) — Mike 2026-09-10;
     background transparent at rest like every other item, highlight only on hover */
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > a.dropdown-submenu-toggle,
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu.active > a.dropdown-submenu-toggle{
    color: #fff !important;
    background: transparent !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu:hover > a.dropdown-submenu-toggle,
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > a.dropdown-submenu-toggle:hover,
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > a.dropdown-submenu-toggle:focus{
    color: #fff !important;
    background: rgba(255,255,255,.04) !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > .dropdown-menu > li{
    display: block !important;
    width: 100% !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > .dropdown-menu > li > a{
    display: block !important;
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    white-space: nowrap !important;
    background: transparent !important;
    text-decoration: none !important;
  }
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > .dropdown-menu > li > a:hover,
  .navbar-nav > li.dropdown > .dropdown-menu > li.dropdown-submenu > .dropdown-menu > li.active > a{
    color: var(--rp-green) !important;
    background: rgba(255,255,255,.04) !important;
  }
}
@media (max-width: 991px){
  header nav.navbar .navbar-collapse.in li.dropdown-submenu > a .dropdown-submenu-chevron,
  header nav.navbar .navbar-collapse.collapsing li.dropdown-submenu > a .dropdown-submenu-chevron{
    display: none !important;
  }
  header nav.navbar .navbar-collapse.in li.dropdown-submenu > a.dropdown-submenu-toggle,
  header nav.navbar .navbar-collapse.collapsing li.dropdown-submenu > a.dropdown-submenu-toggle{
    cursor: default !important;
    opacity: 1 !important;                    /* same as sibling items (Mike 2026-09-10) */
    color: rgba(255,255,255,.84) !important;
  }
  header nav.navbar .navbar-collapse.in li.dropdown-submenu > .dropdown-menu,
  header nav.navbar .navbar-collapse.collapsing li.dropdown-submenu > .dropdown-menu{
    position: static !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 2px 0 6px 0 !important;
    padding: 0 0 0 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  header nav.navbar .navbar-collapse.in li.dropdown-submenu > .dropdown-menu > li > a,
  header nav.navbar .navbar-collapse.collapsing li.dropdown-submenu > .dropdown-menu > li > a{
    padding: 7px 0 !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.84) !important;   /* same as sibling items */
  }
}


/* ==========================================================
   11) WORLDVIEW - SEMINAR REPLAYS (ClickUp #7)
   Markup: Assets/Lava/Worldview/ReplayYears.lava (year cards on /worldview) and
   ReplayDetail.lava (gated detail page: sessions with video embeds, or a lock panel).
   NOTE 2026-09-10: two sessions edited this file the same afternoon (menu 3rd-level
   flyout + this). Always re-read the live file before appending.
========================================================== */
.rp-btn--ghost,
a.rp-btn--ghost{
  border-color: rgba(65,64,66,.35);
  color: var(--rp-charcoal) !important;
}
.rp-btn--ghost:hover{ background: rgba(65,64,66,.06); }

/* ---- year cards ---- */
.rp-wv-years{ padding: 40px 0 64px; } /* card grid kept per Mike (hero-card variant tried and removed 2026-09-10) */
.rp-wv-years__title{
  text-align: center;
  margin: 0 0 32px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.rp-wv-years__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.rp-wv-year{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #e9ece3;
  border-radius: 14px;
  padding: 28px 28px 26px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.rp-wv-year--unlocked{ background: #fff; border: 2px solid var(--rp-green); }
.rp-wv-year__badge{
  display: inline-block;
  align-self: flex-start;
  background: var(--rp-green);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .08em;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.rp-wv-year__title{
  margin: 0 0 10px;
  font-size: 1.3rem;
  letter-spacing: .03em;
}
.rp-wv-year__blurb{ flex: 1 1 auto; font-size: 16px; line-height: 1.6; }
.rp-wv-year__blurb p{ margin: 0 0 10px; color: var(--rp-muted); }
.rp-wv-year__actions{ margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rp-wv-year__btn{ padding: 12px 26px; }
.rp-wv-year__btn i{ margin-right: 6px; }
.rp-wv-year__note{ font-size: 14px; color: var(--rp-muted); line-height: 1.5; }
.rp-wv-year__note--soon{ font-weight: 700; color: var(--rp-charcoal); }

/* ---- detail page ---- */
.rp-wv-detail{ padding: 32px 0 72px; }
.rp-wv-detail__back{
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.rp-wv-detail__back i{ margin-right: 4px; font-size: 11px; }
.rp-wv-detail__badge{
  display: inline-block;
  background: var(--rp-green);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  margin: 0 0 12px 18px;
}
.rp-wv-detail__title{ margin: 0 0 18px; }
.rp-wv-detail__lead{ max-width: 860px; font-size: 18px; margin-bottom: 40px; }
.rp-wv-detail__lead p{ color: var(--rp-muted); }
.rp-wv-detail__empty{ padding: 40px; text-align: center; background: #e9ece3; border-radius: 14px; }

.rp-wv-sessions{ display: grid; gap: 40px; }
.rp-wv-session{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 32px;
  background: #fff;
  border: 1px solid rgba(65,64,66,.12);
  border-radius: 14px;
  padding: 22px;
}
@media (min-width: 900px){
  .rp-wv-session{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.rp-wv-session__media{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1f1f1f;
  border-radius: 10px;
  overflow: hidden;
}
.rp-wv-session__media iframe,
.rp-wv-session__media video,
.rp-wv-session__media img{ width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.rp-wv-session__placeholder{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: rgba(255,255,255,.6);
  background: linear-gradient(135deg, var(--rp-green), var(--rp-slate));
}
.rp-wv-session__meta{ display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.rp-wv-session__date{ color: var(--rp-green); text-transform: uppercase; letter-spacing: .08em; }
.rp-wv-session__speaker{ color: var(--rp-charcoal); }
.rp-wv-session__title{ margin: 0 0 12px; font-size: 1.35rem; letter-spacing: .03em; }
.rp-wv-session__notes{ font-size: 16px; line-height: 1.65; }
.rp-wv-session__notes p{ color: var(--rp-muted); margin: 0 0 10px; }

/* ---- lock panel ---- */
.rp-wv-lock{
  max-width: 720px;
  margin: 12px auto 0;
  text-align: center;
  background: #e9ece3;
  border-radius: 14px;
  padding: 44px 32px 40px;
}
.rp-wv-lock__icon{ font-size: 40px; color: var(--rp-green); margin-bottom: 14px; }
.rp-wv-lock__title{ margin: 0 0 12px; font-size: 1.4rem; }
.rp-wv-lock p{ font-size: 16px; line-height: 1.65; }
.rp-wv-lock__actions{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }


/* ==========================================================
   10) "THE VIEW" SIGN-UP BAND  (SiteFooter.lava .rp-view-band → /the-view)
   2026-09-10, ClickUp 86e0bkxfy. Full-bleed band above the footer, like the
   WordPress site. Hidden by Lava for logged-in list members.
========================================================== */
.rp-view-band{
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: #4a4f47;
  color: #fff;
}
.rp-view-band__inner{
  max-width: var(--rp-container);
  margin: 0 auto;
  padding: 28px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rp-view-band__brand{
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-right: 12px;
  min-width: 190px;
}
.rp-view-band__title{
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: lowercase;
}
.rp-view-band__sub{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: lowercase;
  margin-top: 4px;
}
.rp-view-band__input{
  flex: 1 1 180px;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: var(--rp-charcoal);
  font-size: 16px;
}
.rp-view-band__input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(115,130,95,.55);
}
.rp-view-band__btn{
  flex: 0 0 auto;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 2px;
  background: var(--rp-green);
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.rp-view-band__btn:hover{ opacity: .85; }
.rp-view-band__msg{ flex: 1 1 100%; font-size: 14px; color: #ffd9d0; min-height: 0; }
.rp-view-band__msg:empty{ display: none; }
@media (max-width: 991px){
  .rp-view-band__inner{ padding: 24px 20px; }
  .rp-view-band__brand{ width: 100%; min-width: 0; margin: 0 0 4px; }
  .rp-view-band__input{ flex: 1 1 100%; }
  .rp-view-band__btn{ width: 100%; }
}


/* ==========================================================
   12) HOMEPAGE HERO - WORDPRESS HEIGHT + CENTRED TEXT/BUTTONS (ClickUp #30, 2026-09-10)
   PageHeaderHero.lava adds .rp-hero--tall + .rp-hero__center when the page has Header Text
   (HTML) and/or Header Buttons (Key Value List). Measured on rockypeak.org: hero 630px at
   1400 wide (= 45vw, fixed regardless of viewport height), ~100vh on phones; h2 32px/600
   uppercase, p 16px/32px in a 720px column; buttons 16px 700 uppercase, 2px green border,
   transparent, radius 3px, 20px apart, stacked on phones.
========================================================== */
.rp-hero.rp-hero--tall{
  /* WP shows a full 45vw of video; on desktop our hero is pulled up under the nav by
     --rp-navh, so add it back to keep the VISIBLE height at 45vw (Mike 2026-09-10: "taller"). No cap. */
  height: 45vw;              /* = WordPress; the hero no longer sits under the nav (see §13) */
  min-height: 600px;
  max-height: none;
}
@media (max-width: 991px){
  .rp-hero.rp-hero--tall{
    height: calc(100vh - var(--rp-mobile-navh));
    min-height: 560px;
    max-height: 900px;
  }
}
.rp-hero__center{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--rp-navh) + 12px) 24px 90px;   /* keep clear of the nav and the bottom share bar */
  pointer-events: none;                             /* let the bar links stay clickable; buttons re-enable below */
}
.rp-hero__centerInner{
  max-width: 720px;
  width: 100%;
  color: #fff;
  pointer-events: auto;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.rp-hero__centerInner h1,
.rp-hero__centerInner h2,
.rp-hero__centerInner h3{
  color: #fff;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.rp-hero__centerInner p{
  color: #fff;
  font-size: 16px;
  line-height: 2;
  margin: 0 0 14px;
}
.rp-hero__centerInner p strong{ font-weight: 700; }
.rp-hero__btns{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 20px;
  margin-top: 26px;
}
.rp-hero__btn,
a.rp-hero__btn{
  border: 2px solid var(--rp-green);
  background: rgba(0,0,0,.10);
  color: #fff !important;
  border-radius: 3px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  min-width: 200px;
  text-align: center;
  text-shadow: none;
}
.rp-hero__btn:hover,
a.rp-hero__btn:hover{ background: var(--rp-green); border-color: var(--rp-green); }
@media (max-width: 767px){
  .rp-hero__center{ padding: calc(var(--rp-mobile-navh) + 24px) 20px 80px; }
  .rp-hero__centerInner p{ font-size: 15px; line-height: 1.8; }
  .rp-hero__btns{ flex-direction: column; align-items: center; gap: 12px; }
  .rp-hero__btn, a.rp-hero__btn{ width: min(100%, 260px); }
}
/* clickability (2026-09-10): .rp-hero__content (title + share bar) is a full-height layer that
   comes after .rp-hero__center in the DOM, so it swallowed the button clicks. Put the centred
   layer above it and let clicks fall through the wrapper except on the bar's links. */
.rp-hero--tall .rp-hero__center{ z-index: 5; }
.rp-hero--tall .rp-hero__content{ pointer-events: none; }
.rp-hero--tall .rp-hero__content a,
.rp-hero--tall .rp-hero__content button{ pointer-events: auto; }


/* ==========================================================
   13) HERO SIZE — SMALL  (page attribute "Hero Size"; Medium = default rules in §2, Large = §12 .rp-hero--tall)
   2026-09-10, ClickUp 86e37nf9y. Desktop hero sits under the 96px nav, so add it back to keep ~300px visible.
========================================================== */
.rp-hero.rp-hero--small{
  height: calc(300px + var(--rp-navh));
  min-height: 0;
  max-height: none;
}
.rp-hero.rp-hero--small .rp-hero__content{ padding-bottom: 34px; }
.rp-hero.rp-hero--small .rp-hero__leftTitle{ font-size: clamp(1.3rem, 1.1vw, 2.4rem); }
@media (max-width: 991px){
  .rp-hero.rp-hero--small{
    height: 240px;
    min-height: 0;
    max-height: none;
  }
}


/* ==========================================================
   13) HERO POSITION FIX + LIFE GROUPS FORM (Mali punch list M6 / M9, 2026-09-11)
   M6: on desktop §2 pulled every hero up by --rp-navh (96px) although the nav is position:absolute
   and takes no space, so the top 96px of each header image scrolled off above the page (faces cut
   off on Next Step Dessert, Give...). The hero now starts at the top of the page and the nav
   overlays it, like WordPress. Measured: Dessert hero visible 399px -> 495px, WP banner = 490px.
   M9: Life Groups page workflow form - "I Am A" radio buttons on the same line as the label.
========================================================== */
@media (min-width: 992px){
  .rp-hero{ margin-top: 0 !important; }
}
/* The Obsidian workflow form is a wrapping flex row of unclassed ~213px field boxes; the radio
   field gets the full row so "I Am A (Member / Leader)" and the options sit on one line. */
#bid_2727 form > div:has(> .rock-radio-button-list),
#bid_2822 form > div:has(> .rock-radio-button-list){
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
}
#bid_2727 .rock-radio-button-list,
#bid_2822 .rock-radio-button-list{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
#bid_2727 .rock-radio-button-list > .control-label,
#bid_2822 .rock-radio-button-list > .control-label{ margin: 0 !important; display: inline-block !important; width: auto !important; }
#bid_2727 .rock-radio-button-list > .control-wrapper,
#bid_2822 .rock-radio-button-list > .control-wrapper{ display: inline-block !important; width: auto !important; flex: 1 1 auto; }
#bid_2727 .rock-radio-button-list .rockradiobuttonlist-horizontal,
#bid_2822 .rock-radio-button-list .rockradiobuttonlist-horizontal,
#bid_2727 .rock-radio-button-list .rockradiobuttonlist-horizontal > span,
#bid_2822 .rock-radio-button-list .rockradiobuttonlist-horizontal > span{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}
#bid_2727 .rock-radio-button-list .radio-inline,
#bid_2822 .rock-radio-button-list .radio-inline{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding-left: 0 !important;
  white-space: nowrap;
  width: auto !important;          /* Rock gives the labels width:100%, which stacked them */
  flex: 0 0 auto !important;
}
#bid_2727 .rock-radio-button-list .radio-inline > input[type=radio],
#bid_2822 .rock-radio-button-list .radio-inline > input[type=radio]{ position: static !important; margin: 0 !important; }
/* hide the blank "None" choice (its input id ends with "-") - leaving both unticked already means none */
#bid_2727 .rock-radio-button-list .radio-inline:has(> input[id$="-"]),
#bid_2822 .rock-radio-button-list .radio-inline:has(> input[id$="-"]){ display: none !important; }


/* ==========================================================
   14) COOKIE NOTICE + VIDEO GATE  (Mali punch list M11, 2026-09-13; markup + JS in Site/SiteFooter.lava)
========================================================== */
.rp-cookie{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9800;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.rp-cookie[hidden]{ display: none !important; }
.rp-cookie__inner{
  pointer-events: auto;
  max-width: 980px;
  width: 100%;
  background: #2f3530;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.rp-cookie__text{ flex: 1 1 420px; margin: 0; font-size: 15px; line-height: 1.55; color: #fff; }
.rp-cookie__text a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rp-cookie__actions{ display: flex; gap: 10px; flex: 0 0 auto; }
.rp-cookie__btn{
  border: 2px solid var(--rp-green);
  border-radius: 3px;
  padding: 11px 20px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--rp-green);
  color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.rp-cookie__btn--accept:hover{ background: #5f6b4c; border-color: #5f6b4c; }
.rp-cookie__btn--ghost{ background: transparent; border-color: rgba(255,255,255,.55); }
.rp-cookie__btn--ghost:hover{ border-color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 600px){
  .rp-cookie{ left: 8px; right: 8px; bottom: 8px; }
  .rp-cookie__actions{ width: 100%; }
  .rp-cookie__btn{ flex: 1 1 0; }
}

/* click-to-load gate over an unloaded iframe[data-src] (its wrapper must be position:relative or an aspect-ratio box) */
.rp-video-gate{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #1c3540, #2f3530);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.rp-video-gate__icon{
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #2f3530;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px;
}
.rp-video-gate__text{ font-size: 14px; opacity: .85; max-width: 420px; line-height: 1.5; }
.rp-video-gate__cta{ font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; border: 2px solid rgba(255,255,255,.6); border-radius: 3px; padding: 8px 16px; }
.rp-video-gate:hover .rp-video-gate__cta{ background: rgba(255,255,255,.12); border-color: #fff; }