/* ============================================================
   Bright Roots Wellbeing — dropdown navigation
   Adds one level of dropdown menus to the template navbar.
   ============================================================ */

.rp-nav { align-items: center; }
.rp-item { position: relative; }

/* Normalise every top-level item to the same box so they baseline-align */
.rp-nav > .rp-item { display: inline-flex; align-items: center; line-height: 1; }

.rp-nav .rp-parent {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  cursor: pointer;
  color: var(--text); font-family: var(--font-head); font-weight: 600; font-size: 14px;
}
.rp-nav .rp-parent:hover { color: var(--accent); text-decoration: none; }
.rp-caret { font-size: .7em; transition: transform .2s ease; }

.rp-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  min-width: 240px; padding: 8px; z-index: 60;
  display: none; flex-direction: column;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.rp-dropdown::before {
  /* hover bridge so the menu doesn't close in the gap */
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.rp-dropdown a {
  color: var(--text); font-family: var(--font-head); font-weight: 600; font-size: 14px;
  padding: 10px 12px; border-radius: 8px; white-space: nowrap;
}
.rp-dropdown a:hover { background: var(--band); color: var(--accent); text-decoration: none; }

/* Desktop: open on hover (only on devices that actually hover) */
@media (hover: hover) {
  .rp-has-children:hover .rp-dropdown { display: flex; }
  .rp-has-children:hover .rp-caret { transform: rotate(180deg); }
}

/* JS / keyboard / touch: open via .open class */
.rp-has-children.open .rp-dropdown { display: flex; }
.rp-has-children.open .rp-caret { transform: rotate(180deg); }

/* Mobile: stack submenus inline inside the collapsible panel */
@media (max-width: 860px) {
  .rp-nav.open { max-height: 1600px; }   /* room for expanded submenus */
  .rp-nav > .rp-item { width: 100%; }
  .rp-nav .rp-parent { justify-content: space-between; width: 100%; padding: 8px 0; font-size: 16px; }
  .rp-has-children:hover .rp-dropdown { display: none; }  /* no hover-open on touch */
  .rp-has-children.open .rp-dropdown { display: flex; }
  .rp-dropdown {
    position: static; margin: 0 0 6px 4px; min-width: 0;
    border: 0; border-left: 2px solid var(--border); border-radius: 0;
    box-shadow: none; padding: 2px 0 2px 12px;
  }
  .rp-dropdown a { font-size: 15px; padding: 8px 0; }
}

/* ============================================================
   Overrides / polish (loads after style.css)
   ============================================================ */

/* Quote on the accent (red) band must read white, not dark */
.brw-band--accent .brw-quote { color: #fff; }
.brw-band--accent .brw-quote::before { color: rgba(255, 255, 255, .7); }

/* Expertise badge SVG icons */
.brw-card .ico svg { display: block; }

/* Centre the badge icon within each card */
.brw-card .ico { margin-left: auto; margin-right: auto; }

/* Interior-page banner: shorter hero with a background image */
.brw-hero--sub { padding: 92px 24px; }
.brw-hero--sub h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .25em; }
.brw-hero--sub p.lead { font-size: clamp(1rem, 2.2vw, 1.3rem); margin-bottom: 0; }