/* =========================================================================
   RA Fischer: top bar, header, navigation, footer
   These parts appear on every page, so their CSS lives here rather than
   inline in the hook elements. One request, cached, no duplication.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Top bar, hooked to generate_before_header
   ---------------------------------------------------------------------- */

.raf-topbar {
  background: #00202D;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px calc(24px + 1.5vw);
  font-family: var(--raf-sans);
  font-size: 12.5px;
  line-height: 1;
}
.raf-topbar * { box-sizing: border-box; }

.raf-topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.raf-topbar-left a,
.raf-topbar-left span {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.2s;
}
.raf-topbar-left a:hover { color: #fff; }
.raf-topbar-left svg { width: 12px; height: 12px; flex-shrink: 0; }

.raf-topbar-divider {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.raf-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.raf-topbar-right a {
  color: #329EB4;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.raf-topbar-right a:hover { color: #fff; }
.raf-topbar-right svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .raf-topbar-left span { display: none; }         /* address is the first to go */
  .raf-topbar-left .raf-topbar-divider:last-of-type { display: none; }
}
@media (max-width: 640px) {
  .raf-topbar { padding: 8px 20px; gap: 12px; }
  .raf-topbar-right { gap: 12px; }
}

/* -------------------------------------------------------------------------
   Header and primary navigation

   COLOURS LIVE IN THE CUSTOMIZER, NOT HERE.
   Customizer > Colors:
     Header background        #085371
     Navigation background    #085371
     Navigation text          #FFFFFF
     Navigation hover/current background  #0A6A90   text #FFFFFF
     Sub-menu background      #063E56   text #FFFFFF
     Sub-menu hover background #052F41
   Colour rules were removed from this file because the Customizer writes its
   own inline CSS after this stylesheet and wins. Keeping colour in one place
   also means a marketing associate can change it without touching files.
   What stays here is structure: sizing, spacing, and the Contact Us button.
   ---------------------------------------------------------------------- */

.site-header { padding: 0 20px; }
/* The header bar is wider than the content container on purpose. An uppercase
   seven-item nav plus the logo needs about 1,350px; the 1,200px content width
   would force the nav to overflow and slide under the logo.
   Set Customizer > Layout > Header > Inner Header Width to Full; this caps it.

   The side padding keeps the Contact Us button off the right edge, which it
   previously sat flush against. */
.site-header .inside-header {
  padding: 11px 28px;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 68px;
}
.site-logo img,
.site-header .header-image { width: 250px; height: auto; max-width: 100%; }

/* Logo left, navigation right, one row.

   These selectors deliberately avoid GeneratePress's .nav-float-right body
   class: that class only appears with one particular Navigation Location
   setting, and the header should look the same whichever preset is chosen.

   Customizer > Layout > Header:
     Header Width        Full
     Inner Header Width  Contained
     Header Alignment    Left
   ---------------------------------------------------------------------- */
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: nowrap;
}
.site-header .inside-header .site-branding,
.site-header .inside-header .site-logo {
  flex: 0 0 auto;
  margin: 0;
  position: relative;  /* keeps the logo above the nav if anything else positions it */
  z-index: 2;
}

.site-header .inside-header .main-navigation {
  flex: 1 1 auto;
  min-width: 0;            /* lets the nav shrink instead of forcing the row wide */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.site-header .inside-header .main-navigation .inside-navigation {
  padding: 0;
  width: auto;
}
.site-header .inside-header .main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  gap: 6px;
}

/* Labels stay on one line. Without this, nowrap shrinks the items instead and
   "For Patients" breaks in two with the dropdown arrow dropping below it. */
.site-header .inside-header .main-nav > ul > li { flex: 0 0 auto; }
.site-header .inside-header .main-nav > ul > li > a {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.site-header .inside-header .main-nav > ul > li > a .dropdown-menu-toggle {
  padding: 0;
  line-height: 1;
}

/* Dropdown panels: one width for the whole panel, links filling it.
   Width on the link alone left each row a different size, so the hovered
   row looked wider than its neighbours. */
.main-navigation .main-nav ul ul {
  width: 290px;
  padding: 6px 0;
  border-radius: 0 0 8px 8px;
}
.main-navigation .main-nav ul ul li { width: 100%; }
.main-navigation .main-nav ul ul li a {
  width: 100%;
  line-height: 1.35;
}

/* Navigation: spacing and type only *//* Navigation: spacing and type only.
   Uppercase with open letter-spacing, matching the previous header. The size
   scales with the viewport so the bar fills a wide screen without crowding a
   narrow one. */
.main-navigation .main-nav ul li a {
  font-family: var(--raf-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 13px var(--raf-nav-pad, 18px);
}
/* One variable drives the padding and the underline inset, so they cannot
   drift apart when the breakpoints change the spacing. */
.main-navigation { --raf-nav-pad: 18px; }

/* Sub-menu items stay sentence case: they are longer, and uppercase would
   wrap "BD PureWick Urine Collection System" into an unreadable block. */
.main-navigation .main-nav ul ul li a {
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 1540px) {
  .main-navigation { --raf-nav-pad: 14px; }
  .main-navigation .main-nav ul li a { font-size: 14px; letter-spacing: 0.05em; }
  .site-header .inside-header { padding: 11px 24px; }
  .site-logo img, .site-header .header-image { width: 220px; }
  .site-logo img, .site-header .header-image { width: 210px; }
  .site-header .inside-header { gap: 20px; }
  .main-navigation .main-nav ul li.raf-nav-cta > a { padding: 10px 16px; margin-left: 4px; }
}
@media (max-width: 1400px) {
  .main-navigation { --raf-nav-pad: 10px; }
  .main-navigation .main-nav ul li a { font-size: 13px; letter-spacing: 0.04em; }
  .main-navigation .main-nav ul li.raf-nav-cta > a { margin-left: 12px; padding: 11px 18px; }
  .site-header .inside-header { padding: 11px 20px; gap: 20px; }
  .site-logo img, .site-header .header-image { width: 200px; }
}
/* Below 1240 the six uppercase parents plus the button stop fitting without
   crushing the gaps, so the toggle takes over.
   Set Customizer > Layout > Primary Navigation > Mobile menu breakpoint to 1240. */
.main-navigation .main-nav ul ul li a {
  font-size: 13.5px;
  font-weight: 400;
  padding: 11px 18px;
}
.main-navigation .main-nav ul ul { box-shadow: 0 10px 28px rgba(0,0,0,0.22); }

/* Hover and current state: a short underline rather than a filled block.

   The Customizer's hover background filled 43px of a 63px bar, so hovering one
   item drew a hard-edged rectangle a few pixels from its neighbours, which is
   what made six items read as crowded. The underline marks the item without
   adding a shape that competes with the ones beside it. */
.main-navigation .main-nav > ul > li:not(.raf-nav-cta) > a {
  position: relative;
  background: transparent !important;
}
.main-navigation .main-nav > ul > li:not(.raf-nav-cta) > a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 2px;
  background: #FFBB4E;
  border-radius: 2px;
  transition: left .18s ease, right .18s ease, opacity .18s ease;
  opacity: 0;
}
.main-navigation .main-nav > ul > li:not(.raf-nav-cta):hover > a::after,
.main-navigation .main-nav > ul > li:not(.raf-nav-cta).sfHover > a::after,
.main-navigation .main-nav > ul > li:not(.raf-nav-cta)[class*="current-menu"] > a::after {
  left: var(--raf-nav-pad, 18px);
  right: var(--raf-nav-pad, 18px);
  opacity: 1;
}
/* Keyboard users get the same indicator plus a visible ring */
.main-navigation .main-nav > ul > li:not(.raf-nav-cta) > a:focus-visible {
  outline: 2px solid #FFBB4E;
  outline-offset: -4px;
  border-radius: 4px;
}
.main-navigation .main-nav > ul > li:not(.raf-nav-cta) > a:focus-visible::after {
  left: var(--raf-nav-pad, 18px); right: var(--raf-nav-pad, 18px); opacity: 1;
}

/* Carets read as secondary: smaller, dimmer, and nudged off the label */
.site-header .inside-header .main-nav > ul > li > a .dropdown-menu-toggle svg {
  width: 11px; height: 11px;
  opacity: 0.55;
  transition: opacity .18s ease, transform .18s ease;
}
.main-navigation .main-nav > ul > li:hover > a .dropdown-menu-toggle svg,
.main-navigation .main-nav > ul > li.sfHover > a .dropdown-menu-toggle svg {
  opacity: 1;
  transform: translateY(1px);
}

/* Gold Contact Us button. Add the menu class raf-nav-cta to that menu item.
   This one keeps its colours: it is a brand element, not a theme colour. */
.main-navigation .main-nav ul li.raf-nav-cta > a {
  background: #FFBB4E;
  color: #143048;
  font-weight: 700;
  border-radius: 6px;
  margin: 0 0 0 18px;
  padding: 12px 24px;
  transition: background 0.2s;
}
.main-navigation .main-nav ul li.raf-nav-cta > a:hover,
.main-navigation .main-nav ul li.raf-nav-cta.current-menu-item > a {
  background: #F0A93A;
  color: #143048;
}

/* -------------------------------------------------------------------------
   Mobile header

   Most of this site's traffic is mobile, so the small-screen header is treated
   as the primary case rather than a fallback.

   Set Customizer > Layout > Primary Navigation > mobile menu breakpoint to 1240.
   ---------------------------------------------------------------------- */

.site-header { position: relative; }

@media (max-width: 1240px) {

  /* One row: logo left, toggle right. The toggle previously dropped onto its
     own line and centred, which wasted around 90px of vertical space. */
  .site-header .inside-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
  }
  /* Nothing in the header row floats or is positioned out of flow, which is
     what let the toggle sit on top of the logo. */
  .site-header .inside-header > * {
    float: none !important;
    position: static !important;
  }
  .site-logo img, .site-header .header-image { width: 180px; }

  /* The nav takes the rest of the row and pushes the toggle to its right edge.
     Written so it works whether the header container resolves to flex or block,
     since GeneratePress's own mobile CSS loads after this file and does not
     always leave it flex. */
  /* GeneratePress prints TWO .main-navigation elements on mobile: a
     .mobile-menu-control-wrapper holding the toggle button, and the real
     navigation holding the menu. Both are flex children of the header row, so
     the second one was sitting to the right of the toggle and holding it ~75px
     off the edge. The toggle wrapper is ordered last and pushed right; the menu
     element is collapsed to zero width in the row, since its panel is
     positioned absolutely when open anyway. */
  .site-header .inside-header .main-navigation {
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
  }

  .site-header .inside-header .main-navigation.mobile-menu-control-wrapper {
    order: 9;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
  }

  .site-header .inside-header .main-navigation:not(.mobile-menu-control-wrapper) {
    order: 8;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* When closed it occupies nothing at all */
  .site-header .inside-header .main-navigation:not(.mobile-menu-control-wrapper):not(.toggled) {
    width: 0 !important;
    overflow: visible;
  }
  .site-header .inside-header .site-logo,
  .site-header .inside-header .site-branding { margin-right: auto; }

  /* The toggle is a button, so it needs a real target and a visible focus ring.
     Do NOT set font-size: 0 here. GeneratePress sizes its icon in em, so a zero
     font size collapses the hamburger and leaves an empty rectangle. */
  .main-navigation .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 10px;
    margin: 0;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
  }
  .main-navigation .menu-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  /* Belt and braces: if the nav ends up wider than the button for any reason,
     this still holds the button at the right edge. */
  .main-navigation .menu-toggle { margin-left: auto; }

  /* Size the icon explicitly so it does not depend on inherited type.
     Only the SVG is sized. Setting display on .gp-icon would override the
     theme's rule that hides the close icon, showing both at once. */
  .main-navigation .menu-toggle .gp-icon svg {
    width: 24px;
    height: 24px;
  }
  .main-navigation .menu-toggle .gp-icon { line-height: 0; }
  /* Hide the word "Menu" if the theme prints one, keeping it for screen readers */
  .main-navigation .menu-toggle .mobile-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* The open menu is a full-width panel below the bar, not a wrapped grid.
     The menu is hidden until the toggle is pressed. GeneratePress hides it too,
     but only at whatever breakpoint the Customizer is set to, so this rule makes
     the header correct even if that setting is wrong or gets changed. */
  .main-navigation .inside-navigation { position: static; width: auto; padding: 0; }
  .main-navigation:not(.toggled) .inside-navigation { display: none; }
  .main-navigation.toggled .inside-navigation { display: block; }
  .main-navigation.toggled .inside-navigation,
  .main-navigation .inside-navigation.toggled {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    background: #085371;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25);
    z-index: 20;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Items stack as full-width rows. The desktop flex row is undone here. */
  .site-header .inside-header .main-navigation .main-nav > ul {
    display: block;
    width: 100%;
    max-width: none;
  }
  .main-navigation .main-nav > ul > li { width: 100%; float: none; }
  .main-navigation .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 15px 20px;
    font-size: 14px;
    letter-spacing: 0.05em;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .main-navigation .main-nav > ul > li:first-child > a { border-top: 0; }

  /* Sub-menus open inline and indented rather than as floating panels */
  .main-navigation .main-nav ul ul {
    position: static;
    width: 100% !important;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  .main-navigation .main-nav ul ul li a {
    width: 100%;
    min-height: 50px;
    padding: 13px 20px 13px 34px;
    font-size: 13.5px;
  }

  /* The dropdown arrow is its own tap target, so a parent can be opened
     without following its link */
  .main-navigation .main-nav .dropdown-menu-toggle {
    padding: 14px;
    margin: -14px -8px -14px 0;
  }

  /* Contact Us reads as a button, not another row */
  .main-navigation .main-nav ul li.raf-nav-cta > a {
    margin: 14px 20px 18px;
    width: auto;
    justify-content: center;
    border-radius: 8px;
    min-height: 52px;
    border-top: 0;
  }
}

/* Top bar on small screens: one line, nothing stacked */
@media (max-width: 760px) {
  .raf-topbar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    font-size: 12px;
  }
  .raf-topbar-left { gap: 14px; flex-wrap: nowrap; min-width: 0; }
  .raf-topbar-left a { overflow: hidden; text-overflow: ellipsis; }
  .raf-topbar-divider { display: none; }
  .raf-topbar-right { gap: 12px; }
}

/* Narrow phones: the phone number and social links are what matter here */
@media (max-width: 460px) {
  .raf-topbar-left a[href^="mailto"] { display: none; }
  .raf-topbar { padding: 8px 14px; }
  .site-logo img, .site-header .header-image { width: 155px; }
  .main-navigation .main-nav > ul > li > a { padding: 15px 16px; }
  .main-navigation .main-nav ul ul li a { padding-left: 30px; }
  .main-navigation .main-nav ul li.raf-nav-cta > a { margin: 14px 16px 18px; }
}

/* -------------------------------------------------------------------------
   Footer, hooked to generate_footer
   ---------------------------------------------------------------------- */

.raf-footer *, .raf-footer *::before, .raf-footer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.raf-footer {
  --ft-navy:        #143048;
  --ft-gold:        #C0974A;
  --ft-gold-light:  #E8C97A;
  --ft-text:        rgba(255,255,255,0.72);
  --ft-text-strong: rgba(255,255,255,0.92);
  --ft-border:      rgba(255,255,255,0.10);
  background: var(--ft-navy);
  font-family: var(--raf-sans);
  color: var(--ft-text);
  font-size: 14px;
  line-height: 1.6;
}

.raf-footer .ft-upper {
  max-width: var(--raf-wide);
  margin: 0 auto;
  padding: 52px calc(28px + 2vw) 40px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.raf-footer .ft-logo { width: 200px; height: auto; display: block; margin-bottom: 14px; }
.raf-footer .ft-tagline {
  font-size: 12px;
  line-height: 1.6;
  max-width: 240px;
  margin-bottom: 24px;
}

.raf-footer .ft-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.raf-footer .ft-contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ft-text-strong);
}
.raf-footer .ft-contact-list li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ft-gold-light);
  opacity: 0.85;
}
.raf-footer .ft-contact-list a {
  color: var(--ft-text-strong);
  text-decoration: none;
  transition: color 0.2s;
}
.raf-footer .ft-contact-list a:hover { color: #fff; }

.raf-footer .ft-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ft-gold);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background 0.2s;
}
.raf-footer .ft-cta:hover { background: var(--ft-gold-light); color: var(--ft-navy); }
.raf-footer .ft-cta svg { width: 13px; height: 13px; }

.raf-footer .ft-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ft-gold-light);
  margin-bottom: 16px;
  opacity: 0.9;
}
.raf-footer .ft-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.raf-footer .ft-nav-list a {
  font-size: 13px;
  color: var(--ft-text);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
}
.raf-footer .ft-nav-list a:hover { color: #fff; }

.raf-footer .ft-divider {
  max-width: var(--raf-wide);
  margin: 0 auto;
  padding: 0 calc(28px + 2vw);
  border-top: 1px solid var(--ft-border);
}

.raf-footer .ft-lower {
  max-width: var(--raf-wide);
  margin: 0 auto;
  padding: 18px calc(28px + 2vw) 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.raf-footer .ft-copyright { font-size: 12px; color: rgba(255,255,255,0.40); }
.raf-footer .ft-badges { display: flex; align-items: center; gap: 16px; }
.raf-footer .ft-badge {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.04em;
}
.raf-footer .ft-badge svg { width: 13px; height: 13px; opacity: 0.5; }
.raf-footer .ft-badge-div { width: 1px; height: 12px; background: rgba(255,255,255,0.15); }

.raf-footer .ft-legal {
  max-width: var(--raf-wide);
  margin: 0 auto;
  padding: 0 calc(28px + 2vw) 26px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .raf-footer .ft-upper {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 40px 24px 32px;
  }
  .raf-footer .ft-lower {
    padding: 16px 24px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .raf-footer .ft-legal { padding: 0 24px 24px; }
}
@media (max-width: 560px) {
  .raf-footer .ft-upper {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 20px 28px;
  }
  .raf-footer .ft-lower { padding: 14px 20px 20px; }
  .raf-footer .ft-badges { flex-wrap: wrap; gap: 10px; }
}

/* GP's own footer is disabled in the Customizer; this hides any remnant. */
.site-footer .site-info { display: none; }