/* Ranger Buddies chrome skin for the Thrifty-rendered C.O.U.R.A.G.E. Hub.
   ---------------------------------------------------------------------------
   /courage-hub renders through the marketplace Thrifty theme, so it CANNOT use
   the global header/footer partials the rest of the site uses. This sheet
   restyles Thrifty's OWN header and footer markup to match the global chrome as
   closely as the different DOM allows. Attach it to that page only
   (page settings -> Advanced -> Attached CSS files).

   Deliberately NOT a copy of chrome.css: the markup is completely different
   (HubSpot menu modules and dnd rows rather than our .nav-shell / .footer-main),
   so these are targeted overrides, not the same rules.

   Scoped to `header.header` and `footer.footer` throughout, so nothing here can
   leak into the article listing between them.

   KNOWN LIMITS - this cannot be a 100% match:
   - The dropdown's show/hide is Thrifty's own JS/CSS. Only its APPEARANCE is
     restyled; the open/close mechanics are left alone on purpose, because
     fighting them is how you get a menu that will not close.
   - Footer column titles are rich-text spans, not headings, so they are sized to
     match our .footer h2 rather than being semantically equivalent.
   - The footer's column widths come from Thrifty's dnd grid (span4/span3), not
     our 1.4fr/1fr/1.1fr/.8fr, so proportions differ slightly.
   - Logo dimensions are set by INLINE style attributes on the img, which beat
     any stylesheet rule - hence the !important on those two declarations.
   - TWO properties cannot be reached from CSS at all, because HubSpot emits
     module-level style settings as ID selectors carrying !important:
         #hs_cos_wrapper_widget_<id> p            => font-size: 18px  !important
         #hs_cos_wrapper_footer-module-7 a:link   => font-weight: bold !important
     They keep the footer column titles at 18px and the footer links bold.
     Nothing short of hardcoding those generated IDs beats an ID + !important,
     and those IDs change if the modules are rebuilt. The correct fix is to
     change the font size / weight in the MODULE SETTINGS in the page editor,
     not here. Left alone on purpose. */

:root {
  --rb-forest: #177432;
  --rb-cream:  #faf7ec;
  --rb-ink:    #173e2a;
  --rb-muted:  #576451;
  --rb-line:   #d7dbc8;
  --rb-yellow: #ffc907;
  --rb-footer-bg:     #e9e6d5;
  --rb-footer-line:   #dcdac7;
  --rb-footer-rule:   #ccd0b9;
}

/* ============================================================ HEADER ===== */

header.header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Thrifty sets this with `[data-global-resource-path*="header.html"] .header`,
     specificity (0,2,1). This sheet is attached per-page and its load order
     relative to the theme CSS is not guaranteed, so the decisive properties use
     !important rather than a specificity arms race. */
  background: rgba(250, 247, 236, .97) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rb-line);
  box-shadow: none;                 /* Thrifty ships a drop shadow; ours is a hairline */
}

/* Our .nav-shell is min(1360px, 100% - 72px) at 94px tall. Thrifty's equivalent
   row is #header-row-2, which is 1680px wide and ~97px tall. */
header.header #header-row-2 {
  width: min(1360px, calc(100vw - 72px));
  max-width: none;
  height: 94px;
  margin-inline: auto;
  gap: 32px;
}

/* Logo: ours is 115x74, object-fit contain. Thrifty's is 150x90 stretched.
   The img carries inline width/height, so these two need !important. */
header.header .header__logo img {
  width: 115px !important;
  height: 74px !important;
  object-fit: contain;
}

/* Nav links: ours are 14.4px/800 ink, hover forest. Thrifty's are 16px/600 in
   the ranger green. */
header.header .navigation-primary > ul.submenu.level-1 > li > a {
  font-family: Nunito, Arial, sans-serif;
  font-size: 14.4px !important;
  font-weight: 800 !important;
  line-height: 1.3;
  color: var(--rb-ink) !important;
  text-decoration: none;
  letter-spacing: normal;
  padding: 12px 0;
  transition: color .18s ease;
}
header.header .navigation-primary a:hover,
header.header .navigation-primary a:focus-visible {
  color: var(--rb-forest) !important;
}

/* Top-level spacing: ours sits at gap 29px, pushed to the right of the logo. */
header.header .navigation-primary > ul.submenu.level-1 {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-left: auto;
  list-style: none;
  padding: 0;
}

/* Item spacing. The GAP was never the problem - both lists already sit at 29px.
   Thrifty pads each <li> with `35px 20px`, so every item is 40px wider than its
   label and the visual distance between labels becomes ~69px against our 29px.
   Only the horizontal padding is removed: the 35px vertical is what makes the
   <li> span the full header height, which is the hover target that opens the
   dropdown. Zeroing that too would leave a dead gap between the item and the
   panel, and the menu would close while you were reaching for it. */
header.header .navigation-primary > ul.submenu.level-1 > li {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dropdown APPEARANCE only - not its show/hide behaviour. Ours is a cream panel
   with a hairline border, 14px radius and a soft shadow. */
header.header .navigation-primary ul.submenu.level-2 {
  background: var(--rb-cream);
  border: 1px solid var(--rb-line);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(0, 68, 31, .14);
  padding: 20px 26px;
  list-style: none;
  min-width: 212px;
  z-index: 60;
}
/* Thrifty fills every submenu row with a tan block (#ded3b5) and colours the
   text brown. Ours is a plain cream panel: no per-item fill, ink text, and the
   only hover feedback is the text going forest green. The earlier version of
   this file set a hover background, which was wrong - our real dropdown has
   none. */
header.header .navigation-primary ul.submenu.level-2 li,
header.header .navigation-primary ul.submenu.level-2 a {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
header.header .navigation-primary ul.submenu.level-2 li {
  padding: 0 !important;
  margin: 0 !important;
}
header.header .navigation-primary ul.submenu.level-2 a {
  display: block;
  padding: 8px 0 !important;
  font-size: 13.6px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  color: var(--rb-ink) !important;
  white-space: nowrap;
  border-radius: 0;
}
header.header .navigation-primary ul.submenu.level-2 a:hover,
header.header .navigation-primary ul.submenu.level-2 a:focus-visible {
  background: transparent !important;
  color: var(--rb-forest) !important;
}

/* The header CTA ("Join Our Community") styled as our .button.primary pill. */
header.header a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-left: 12px;
  padding: 12px 19px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--rb-yellow);
  color: #00441f;
  box-shadow: 0 3px 0 #d9a905;
  font-family: Nunito, Arial, sans-serif;
  font-size: 13.6px;
  font-weight: 900;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
header.header a.button:hover {
  transform: translateY(-1px);
  color: #00441f;
}

/* Our CTA carries a compass-arrow icon after the label; Thrifty's button has
   none, and a stylesheet cannot add markup. The glyph is redrawn as a masked
   pseudo-element.

   The shape is the COMPASS NEEDLE, not the plain arrow in the module source.
   script.js rewrites every .compass-arrow at runtime, swapping the shipped
   `M4 12h15M13 5l7 7-7 7` for a two-path needle. /courage-hub never loads
   script.js, so it never gets that swap and the needle has to come from here -
   an earlier version of this rule masked the pre-swap arrow and did not match.

   A MASK is used rather than a background-image so the paint comes from
   `currentColor` and tracks the button's text colour, exactly as the real
   `stroke="currentColor"` does, including on hover. Measured against ours:
   23x23, 14px gap, stroke-width 1.5, #00441f. */
header.header a.button::after {
  content: "";
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  background-color: currentColor;
  -webkit-mask: url("https://rangerbuddies.com/hs-fs/hubfs/CDRevamp/compass-arrow.svg") center / contain no-repeat;
  mask: url("https://rangerbuddies.com/hs-fs/hubfs/CDRevamp/compass-arrow.svg") center / contain no-repeat;
}

/* ============================================================ FOOTER ===== */

footer.footer {
  background: var(--rb-footer-bg);
  border-top: 1px solid var(--rb-footer-line);
  padding-top: 53px;
  color: var(--rb-ink);
  font-family: Nunito, Arial, sans-serif;
}

/* Thrifty's footer text is brown (#532f09). Ours is ink/muted throughout. */
footer.footer,
footer.footer p,
footer.footer span,
footer.footer li {
  color: var(--rb-ink);
}

/* Column titles are rich-text spans here, not headings. Match .footer h2:
   900 13.76px/1.4, 12px above / 17px below. */
footer.footer span.hs_cos_wrapper_type_text,
footer.footer .hs_cos_wrapper_type_rich_text h1,
footer.footer .hs_cos_wrapper_type_rich_text h2,
footer.footer .hs_cos_wrapper_type_rich_text h3,
footer.footer .hs_cos_wrapper_type_rich_text h4 {
  font-family: Nunito, Arial, sans-serif;
  font-size: 13.76px !important;
  font-weight: 900 !important;
  line-height: 1.4;
  color: var(--rb-ink) !important;
  margin: 12px 0 17px;
  display: block;
}

/* Menu links: ours are 12.48px blocks with 5px vertical padding and a small
   hover nudge. */
footer.footer .hs-menu-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.footer .hs-menu-wrapper ul li a {
  display: block;
  padding: 3px 0;
  font-family: Nunito, Arial, sans-serif;
  font-size: 12.48px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: var(--rb-ink) !important;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
/* Everything else in the footer keeps its own flow - only colour and family are
   normalised, so inline contexts (copyright line, social row) are not broken. */
footer.footer a {
  font-family: Nunito, Arial, sans-serif;
  color: var(--rb-ink);
  text-decoration: none;
}
footer.footer a:hover {
  color: var(--rb-forest);
  transform: translateX(4px);
}

/* The brand blurb under the footer logo - ours is 13.12px, muted, max 260px. */
footer.footer .hs_cos_wrapper_type_rich_text p {
  font-size: 13.12px;
  line-height: 1.6;
  color: var(--rb-muted);
  margin-bottom: 11px;
}

/* Footer logo, same treatment as the header's. */
footer.footer .hs_cos_wrapper_type_logo img {
  width: 118px !important;
  height: 78px !important;
  object-fit: contain;
}

/* Bottom bar: ours is a hairline rule, 21px padding, 11.68px muted text. */
footer.footer .dnd-section:last-child {
  border-top: 1px solid var(--rb-footer-rule);
  padding: 21px 0;
  margin-top: 8px;
}
footer.footer .dnd-section:last-child,
footer.footer .dnd-section:last-child p,
footer.footer .dnd-section:last-child span,
footer.footer .dnd-section:last-child a {
  font-size: 11.68px;
  color: var(--rb-muted);
}

/* ============================================================ MOBILE ===== */
/* Thrifty owns its own mobile menu. Only the shell metrics are nudged toward
   ours (76px bar, 32px side gutter); the toggle behaviour is left untouched. */
@media (max-width: 700px) {
  /* Thrifty's mobile bar is 120px tall against our 77px. The extra comes from
     .header__column's 20px padding (top+bottom) plus the row's own 16px side
     margins, which together also push the bar 36px in from the edge instead of
     our 16px. Dropping the column padding and letting the row's margin define
     the gutter lands on our 16px inset and ~76px bar. */
  header.header .header__column {
    padding: 0 !important;
  }
  header.header #header-row-2 {
    width: auto;
    margin: 0 16px;
    height: 76px;
    gap: 13px;
  }
  header.header .header__logo img {
    width: 101px !important;
    height: 65px !important;
  }

  /* The desktop rule above makes the top-level list a flex ROW with a 29px gap.
     In the mobile drawer that row keeps going: measured scrollWidth 507px in a
     390px viewport, so Watch and Shop sat off-screen. The drawer has to stack.
     Ours renders 342x51 full-width rows with a hairline divider, 16px text and
     a 48px minimum touch target - matched here. */
  header.header .navigation-primary > ul.submenu.level-1 {
    display: block;
    gap: 0;
    margin-left: 0;
    width: 100%;
    /* Ours pads the open panel 20px/24px/25px, so rows are 342 wide starting at
       x=24. Without this the rows ran edge to edge at x=0. */
    padding: 20px 24px 25px !important;
    box-sizing: border-box;
  }
  header.header .navigation-primary > ul.submenu.level-1 > li {
    display: block;
    width: 100%;
    padding: 0 !important;
  }
  header.header .navigation-primary > ul.submenu.level-1 > li > a {
    display: block;
    width: 100%;
    padding: 14px 0 !important;
    min-height: 48px;
    font-size: 16px !important;
    text-align: left;
    border-bottom: 1px solid var(--rb-line);
  }
  /* Thrifty's burger is a 30x30 div - under the 44px minimum touch target, and
     smaller than our 38x44. The box is grown to 38x44 while the icon is pinned
     to the original 30x30 content box, so the artwork is not stretched. */
  /* Thrifty's burger is a filled rgb(90,136,69) green tile with an icon image
     on top. Ours is two bare bars on the cream bar, no tile at all - which is
     why the green block reads as wrong here. The tile and its icon are dropped
     and the two bars are redrawn as pseudo-elements: 22x2, 6px apart, in our
     --green (#00441f), matching .menu-toggle span exactly. Also brings the hit
     area up to 38x44 from Thrifty's 30x30, which was under the 44px minimum. */
  header.header #header-navigation-toggle {
    box-sizing: content-box;
    width: 30px;
    height: 30px;
    padding: 7px 4px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
  /* `display` is set ONLY while the burger is not hidden. When the drawer opens
     Thrifty adds `.hide.open` and hides it with `.header__navigation--toggle
     .hide.open {display:none}` - specificity (0,3,0). An ID selector here is
     (1,1,1) and beat it, so the burger and the X were on screen together. */
  header.header #header-navigation-toggle:not(.hide) {
    display: flex;
  }
  header.header #header-navigation-toggle::before,
  header.header #header-navigation-toggle::after {
    content: "";
    display: block;
    /* Thrifty already draws its burger with these two pseudo-elements and
       positions them ABSOLUTELY. Overriding only content and colour left them
       on Thrifty's coordinates - one bar flew to the top-right corner and was
       clipped by the viewport. Every positioning property has to be reset so
       they lay out as flex children of the toggle. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px;
    background: #00441f !important;
    background-image: none !important;
  }
  /* The close control is a separate element in Thrifty (ours transforms the
     bars into an X). Strip its tile and colour the glyph to match our green X.
     If Thrifty draws it as an image rather than a glyph the colour is inert,
     but the tile removal still applies. */
  /* The close control is a separate element in Thrifty and its X is a
     BACKGROUND IMAGE, so `color` could never change it - it rendered black
     against our green. The image is dropped and the X is redrawn as two
     rotated bars in our green, matching the burger it replaces. */
  header.header #header-close-toggle {
    position: relative;
    box-sizing: content-box;
    width: 30px;
    height: 30px;
    padding: 7px 4px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  header.header #header-close-toggle::before,
  header.header #header-close-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    margin: -1px 0 0 -11px;
    border-radius: 2px;
    background: #00441f !important;
    background-image: none !important;
  }
  header.header #header-close-toggle::before { transform: rotate(45deg); }
  header.header #header-close-toggle::after  { transform: rotate(-45deg); }

  /* The open drawer sits on Thrifty's sand; ours is cream. */
  header.header .header__navigation,
  header.header .navigation-primary,
  header.header .navigation-primary > ul.submenu.level-1 {
    background: var(--rb-cream) !important;
  }

  /* Thrifty separates rows with DOTTED borders on the <li>, including one above
     the first item. Ours is a single solid hairline under each row, so the li
     borders are removed and the divider lives on the <a>. */
  header.header .navigation-primary > ul.submenu.level-1 > li {
    border: 0 !important;
  }
  header.header a.button {
    margin-left: auto;
    padding: 10px 15px;
    min-height: 40px;
    font-size: 11.52px;
    gap: 8px;
  }
  /* Ours drops the compass arrow below 700px - measured 0x0 on the mobile CTA.
     Without this the 23px glyph sits in a 40px button and crowds the label. */
  header.header a.button::after {
    display: none;
  }
  footer.footer {
    padding-top: 34px;
  }
}