/*
 * Site header and footer.
 *
 * Replaces the Elementor header and footer templates, matching what they
 * rendered so switching over is not a visual change.
 */

:root {
  --rcc-c-deep: #0f5c88;
  --rcc-c-blue: #1D91D4;
  --rcc-c-pink: #FFD1EA;
  --rcc-c-cream: #FDF6EB;
  --rcc-c-link: #0960B9;
  --rcc-c-muted: #888888;
}

.rcc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #fff;
  color: var(--rcc-c-deep);
  font-weight: 700;
}

.rcc-skip:focus { left: 0; }

/* ------------------------------------------------------------- Header */

/*
 * The parent theme styles its own header, and those rules reach ours
 * through the shared markup: list bullets on the menu, a white bar
 * behind it, a capped logo. Reset them here so the header looks the
 * same whatever the parent decides to do with headers and lists.
 */

.rcc-header,
.rcc-header * {
  box-sizing: border-box;
}

.rcc-header ul,
.rcc-mobile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rcc-header ul li,
.rcc-mobile ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

.rcc-header ul li::before,
.rcc-header ul li::marker,
.rcc-mobile ul li::before,
.rcc-mobile ul li::marker {
  content: none;
}

/*
 * Our templates are full-bleed and open with a hero the header lays
 * over. The parent theme pads and centres these wrappers for its blog
 * layout, which on those pages is white space above the fold -- and the
 * header ends up sitting over the white space rather than the hero.
 */

.rcc-header-overlaid #content,
.rcc-header-overlaid .col-fluid,
.rcc-header-overlaid .site-content-page {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  border: 0;
  background: none;
}

/*
 * Height and logo size come from the settings page, printed on the
 * element as custom properties. These are the fallbacks.
 */
.rcc-header {
  --rcc-logo-height: 84px;
  --rcc-header-pad: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease;
}

.rcc-header-solid .rcc-header {
  position: relative;
  background: var(--rcc-c-deep);
}

/* Set once the page has scrolled, so the header stays legible over content. */
.rcc-header.is-stuck {
  position: fixed;
  background: rgba(6, 32, 49, .94);
  box-shadow: 0 2px 18px rgba(6, 32, 49, .18);
}

.rcc-header /* The shade behind an overlaid header, on its own layer so it can fade. */
.rcc-header__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease;
}

.rcc-header.is-stuck .rcc-header__scrim { opacity: 0; }

.rcc-header .rcc-header__inner { position: relative; z-index: 1; }

.rcc-header__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1760px;
  margin: 0 auto;
  padding: var(--rcc-header-pad) 40px;
}

.rcc-header .rcc-header__brand {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* The nav takes all the free space so its centre is the bar's centre,
   near enough -- the logo and the button are rarely the same width, and
   matching them exactly would mean fixing the logo's, which is a
   setting. */
.rcc-header__nav { min-width: 0; }

.rcc-header .rcc-header__brand a {
  display: block;
  line-height: 0;
}

.rcc-header .rcc-header__brand img {
  display: block;
  width: auto;
  height: auto;
  max-width: 340px;
  max-height: var(--rcc-logo-height);
}

.rcc-header__nav { flex: 1 1 auto; }

/* Centred between the logo and the call button rather than pushed up
   against the button. With the logo on one side and a single button on
   the other, a right-aligned menu left a gap in the middle of the bar
   and crowded the button. */
.rcc-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rcc-menu li { position: relative; }

.rcc-menu a {
  display: block;
  padding: 8px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color .25s ease;
}

.rcc-menu a:hover,
.rcc-menu .current-menu-item > a,
.rcc-menu .current-menu-parent > a,
.rcc-menu .current-menu-ancestor > a { color: var(--rcc-c-pink); }

/* Sub-menus */

.rcc-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 220px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 92, 136, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* The last item's drop-down would otherwise run off the right edge. */
.rcc-menu > li:last-child > .sub-menu {
  left: auto;
  right: 0;
}

.rcc-menu li:hover > .sub-menu,
.rcc-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rcc-menu .sub-menu a {
  padding: 9px 20px;
  color: var(--rcc-c-deep);
  font-size: 15px;
  font-weight: 500;
}

.rcc-menu .sub-menu a:hover { color: var(--rcc-c-blue); }

.rcc-menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.rcc-header__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 100px;
  background: var(--rcc-c-pink);
  color: var(--rcc-c-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}

.rcc-header__cta:hover { background: var(--rcc-c-cream); color: #098DD3; }

/* Mobile toggle */

.rcc-header__toggle {
  display: none;
  flex: 0 0 auto;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}

.rcc-header__bars { display: block; width: 26px; }

.rcc-header__bars span {
  display: block;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #fff;
  transition: background .25s ease;
}

.rcc-header__toggle:hover .rcc-header__bars span { background: var(--rcc-c-pink); }

/* ------------------------------------------------------- Mobile menu */

.rcc-mobile { position: fixed; inset: 0; z-index: 100000; }
.rcc-mobile[hidden] { display: none; }

.rcc-mobile__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 32, 49, .55);
  opacity: 0;
  transition: opacity .3s ease;
}

.rcc-mobile.is-open .rcc-mobile__backdrop { opacity: 1; }

.rcc-mobile__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: min(340px, 86vw);
  padding: 76px 28px 28px;
  overflow-y: auto;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .3s ease;
}

.rcc-mobile.is-open .rcc-mobile__panel { transform: translateX(0); }

.rcc-mobile__close {
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--rcc-c-deep);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.rcc-mobile__menu,
.rcc-mobile__menu .sub-menu { margin: 0; padding: 0; list-style: none; }

.rcc-mobile__menu a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid #eef2f5;
  color: var(--rcc-c-deep);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.rcc-mobile__menu .sub-menu a {
  padding-left: 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--rcc-c-link);
}

.rcc-mobile__cta { margin-top: 24px; width: 100%; }

/* ------------------------------------------------------------- Footer */

.rcc-footer { background: var(--rcc-c-cream); }

/* The parent theme bullets and indents lists; ours are already links. */
.rcc-footer ul,
.rcc-footer ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

.rcc-footer ul li::before,
.rcc-footer ul li::marker { content: none; }

/*
 * Four columns: the mark and a line about the company, then links,
 * services and contact. Three left the right-hand third of the footer
 * empty and pushed the seven services into one very long list.
 */
.rcc-footer__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.1fr;
  gap: 48px;
  align-items: start;
  max-width: 1290px;
  margin: 0 auto;
  padding: 78px 30px 46px;
}

.rcc-footer__brand img {
  display: block;
  max-width: 200px;
  height: auto;
  margin: 0;
}

.rcc-footer__blurb {
  max-width: 290px;
  margin: 22px 0 0;
  color: #5d6b76;
  font-size: 15px;
  line-height: 1.7;
}

/* The sister company, named once in the footer so it is reachable from
   every page without competing with the brand blurb above it. */
.rcc-footer__sister {
  max-width: 290px;
  margin: 14px 0 0;
  color: #5d6b76;
  font-size: 14px;
  line-height: 1.6;
}

.rcc-footer__sister a {
  color: var(--rcc-blue, #1D91D4);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.rcc-footer__sister a:hover,
.rcc-footer__sister a:focus {
  border-bottom-color: currentColor;
}

/* The same treatment where the name appears mid-sentence in body copy.

   An explicit colour rather than inherit: the homepage's services note is
   rendered inside an Elementor HTML widget, where inherit resolved to a
   cream almost exactly the colour of the ground behind it and the link
   disappeared. Every place this link appears -- that note, the services
   overview note, the About copy -- is a light ground, so the deep blue is
   right in all three: 6.73:1 on the cream, 7.22:1 on white.

   Typed as a.rcc-sister-link so it outranks a plain "a" rule from a
   plugin or the parent theme without resorting to !important. */
/* Also every plain link inside the notes that mention the other company.
   That copy is editable, and a link pasted into it by hand carries no
   class -- the homepage's note is exactly that. Relying on the class
   meant the styling only reached links this theme wrote itself, which is
   the smaller half of the cases. */
body .rct-svc-note a,
body .rcc-note a,
body .rcc-standards__copy a,
body .rcc-intro__copy a,
a.rcc-sister-link {
  color: #0f5c88;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--rcc-pink, #FFD1EA);
}

body .rct-svc-note a:hover,
body .rct-svc-note a:focus,
body .rcc-note a:hover,
body .rcc-note a:focus,
body .rcc-standards__copy a:hover,
body .rcc-standards__copy a:focus,
body .rcc-intro__copy a:hover,
body .rcc-intro__copy a:focus,
a.rcc-sister-link:hover,
a.rcc-sister-link:focus {
  color: #1D91D4;
  border-bottom-color: currentColor;
}

.rcc-footer__heading {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 12px;
  color: var(--rcc-c-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rcc-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--rcc-c-pink);
}

.rcc-footer__menu li { padding: 0 0 12px; }

.rcc-footer__menu a {
  color: #3f5566;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s ease;
}

.rcc-footer__menu a:hover { color: var(--rcc-c-blue); }

.rcc-footer__contact li { padding: 0 0 14px; }

.rcc-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--rcc-c-deep);
  font-size: 16px;
  text-decoration: none;
  transition: color .3s ease;
  word-break: break-word;
}

.rcc-footer__contact a:hover { color: var(--rcc-c-blue); }

.rcc-footer__phone { align-items: flex-start; }

.rcc-footer__words {
  display: block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
}

.rcc-footer__digits {
  display: block;
  color: #5d6b76;
  font-size: 15px;
  letter-spacing: .04em;
}

.rcc-footer__icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--rcc-c-blue);
}

.rcc-footer__social { display: flex; gap: 8px; margin-top: 26px; }

.rcc-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(15, 92, 136, .14);
  color: var(--rcc-c-deep);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.rcc-footer__social a:hover {
  background: var(--rcc-c-deep);
  border-color: var(--rcc-c-deep);
  color: #fff;
}

.rcc-footer__bar { border-top: 1px solid rgba(15, 92, 136, .12); }

.rcc-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1290px;
  margin: 0 auto;
  padding: 30px;
}

.rcc-footer__copyright { margin: 0; color: var(--rcc-c-muted); font-size: 14px; }

.rcc-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }

.rcc-footer__legal a {
  color: var(--rcc-c-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .3s ease;
}

.rcc-footer__legal a:hover { color: var(--rcc-c-blue); }

/* ------------------------------------------------------- Back to top */

.rcc-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 92, 136, .55);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background .25s ease;
}

.rcc-totop.is-visible { opacity: 1; pointer-events: auto; }
.rcc-totop:hover { background: var(--rcc-c-blue); }

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

/* Enough items to run out of bar before the menu collapses. */
@media (max-width: 1400px) {
  .rcc-menu { gap: 22px; }
  .rcc-menu a { font-size: 15px; }
}

@media (max-width: 1180px) {
  .rcc-header .rcc-header__inner { gap: 20px; padding: var(--rcc-header-pad) 20px; }
  .rcc-menu { gap: 16px; }
}

@media (max-width: 1024px) {
  .rcc-header__nav { display: none; }
  .rcc-header__toggle { display: block; }
  .rcc-header .rcc-header__inner { justify-content: space-between; gap: 16px; }
  .rcc-header .rcc-header__brand img { max-height: calc(var(--rcc-logo-height) * .78); }
}

@media (max-width: 1180px) {
  .rcc-footer__inner { grid-template-columns: 1fr 1fr; gap: 44px; padding: 60px 30px 36px; }
}

@media (max-width: 767px) {
  .rcc-header .rcc-header__inner { padding: 16px; }
  .rcc-header .rcc-header__brand img { max-height: calc(var(--rcc-logo-height) * .62); }
  .rcc-header__cta { display: none; }
  .rcc-footer__inner { grid-template-columns: 1fr; gap: 34px; padding: 50px 20px 30px; text-align: center; }
  .rcc-footer__brand img { margin: 0 auto; }
  .rcc-footer__blurb { max-width: none; }
  .rcc-footer__heading::after { left: 50%; transform: translateX(-50%); }
  .rcc-footer__social { justify-content: center; }
  .rcc-footer__contact a { justify-content: center; }
  .rcc-footer__bar-inner { flex-direction: column; text-align: center; padding: 24px 20px; }
  .rcc-footer__legal { justify-content: center; }
  .rcc-totop { bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .rcc-header,
  .rcc-mobile__panel,
  .rcc-mobile__backdrop,
  .rcc-menu .sub-menu { transition: none; }
}

/* Hero slider arrows.
   The dots in the middle of the slide already move between slides, so the
   circular prev and next buttons on the right are redundant. They are gone
   from the theme's own hero, and this hides the pair that an older Elementor
   copy of the hero still prints on the front page. */
.rct-hero-arrows { display: none !important; }