/* ==========================================================================
   Header + footer (navigation standardisation). Design System tokens only.
   Header: [logo] [Home | About Us | Services v | Contact] [CTA]; mobile: [logo] [Menu].
   Footer: four columns, copyright, disclaimer.
   ========================================================================== */

/* ---------- Header ---------- */
.cp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bc-primary);
  color: var(--bc-primary-contrast);
  border-bottom: 3px solid var(--bc-accent);
}
.cp-header :focus-visible { outline-color: #7ec1f2; }

.cp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-4);
  min-height: 64px;
}

.cp-logo { display: flex; align-items: center; flex: none; }
.cp-logo img { display: block; height: 40px; width: auto; }

/* Menu button (mobile) */
.cp-nav-toggle {
  display: none;
  align-items: center;
  gap: var(--bc-space-2);
  min-height: 48px;
  padding: 0 var(--bc-space-3);
  background: transparent;
  color: var(--bc-primary-contrast);
  border: 2px solid #fff;
  border-radius: var(--bc-radius);
  font-family: var(--bc-font-display);
  font-weight: 700;
  font-size: var(--bc-text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.cp-nav-toggle__bars,
.cp-nav-toggle__bars::before,
.cp-nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  content: "";
  transition: transform 0.2s ease-out;
}
.cp-nav-toggle__bars { position: relative; }
.cp-nav-toggle__bars::before { position: absolute; top: -6px; }
.cp-nav-toggle__bars::after { position: absolute; top: 6px; }
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bars { background: transparent; }
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Navigation (mobile: panel under the header) */
.cp-nav { background: var(--bc-primary-dark); }
.cp-nav__list, .cp-nav__sub { margin: 0; padding: 0; list-style: none; }
.cp-nav a,
.cp-nav__sub-toggle {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--bc-space-4);
  background: transparent;
  border: 0;
  color: var(--bc-primary-contrast);
  font-family: var(--bc-font-display);
  font-weight: 600;
  font-size: var(--bc-text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.cp-nav a:hover, .cp-nav__sub-toggle:hover { color: var(--bc-accent-on-dark); }
.cp-nav a[aria-current] { color: var(--bc-accent-on-dark); }
.cp-nav__chev { flex: none; transition: transform 0.2s ease-out; }
.cp-nav__sub-toggle[aria-expanded="true"] .cp-nav__chev { transform: rotate(180deg); }
.cp-nav__sub a { padding-left: var(--bc-space-6); font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--bc-font-body); font-size: var(--bc-text-base); min-height: 48px; }
.cp-nav .bc-btn { min-height: 56px; margin: var(--bc-space-3) var(--bc-space-4) 0; width: calc(100% - 2 * var(--bc-space-4)); justify-content: center; border-radius: var(--bc-radius); letter-spacing: 0.04em; }
.cp-nav .cp-nav__call { margin-bottom: var(--bc-space-4); }
.cp-nav .bc-btn--ghost { border-color: #fff; }

/* With JavaScript: collapsed panel on mobile. Without JavaScript the full menu simply shows. */
.js .cp-nav-toggle { display: inline-flex; }
.js .cp-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  box-shadow: var(--bc-shadow-lg);
}
.js .cp-nav.is-open { display: block; }
.js .cp-nav__sub { display: none; }
.js .cp-nav__sub.is-open { display: block; }

/* ---------- Desktop ---------- */
@media (min-width: 960px) {
  .cp-header__bar { min-height: 80px; }
  .cp-logo img { height: 48px; }
  .js .cp-nav-toggle { display: none; }
  .cp-nav, .js .cp-nav {
    display: flex;
    position: static;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    gap: var(--bc-space-5);
    max-height: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
  .cp-nav__list { display: flex; align-items: center; gap: var(--bc-space-2); margin-inline: auto; }
  .cp-nav a, .cp-nav__sub-toggle { width: auto; min-height: 48px; padding: 0 var(--bc-space-3); font-size: var(--bc-text-base); }
  .cp-nav__item--menu { position: relative; }
  .cp-nav__sub, .js .cp-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    padding: var(--bc-space-2) 0;
    background: var(--bc-primary-dark);
    border-radius: 0 0 var(--bc-radius-lg) var(--bc-radius-lg);
    box-shadow: var(--bc-shadow);
  }
  .cp-nav__sub a { padding-left: var(--bc-space-4); }
  .cp-nav__item--menu:focus-within .cp-nav__sub,
  .js .cp-nav__sub.is-open { display: block; }
  .cp-nav .bc-btn { width: auto; margin: 0; padding: 0 24px; min-height: 48px; font-size: var(--bc-text-lg); }
  .cp-nav .cp-nav__call { display: none; }
}
@media (min-width: 960px) and (hover: hover) {
  .cp-nav__item--menu:hover .cp-nav__sub { display: block; }
}

/* ---------- Footer ---------- */
.cp-footer {
  background: var(--bc-primary-dark);
  color: var(--bc-primary-contrast);
  padding-block: var(--bc-space-7) var(--bc-space-5);
}
.cp-footer :focus-visible { outline-color: #7ec1f2; }
.cp-footer a { color: var(--bc-primary-contrast); text-decoration: underline; text-underline-offset: 3px; }
.cp-footer a:hover { color: var(--bc-accent-on-dark); }
.cp-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-6); }
.cp-footer__heading {
  margin: 0 0 var(--bc-space-3);
  font-family: var(--bc-font-display);
  font-weight: 700;
  font-size: var(--bc-text-xl);
  line-height: 1.2;
  color: var(--bc-accent-on-dark);
}
.cp-footer p { margin: 0 0 var(--bc-space-3); color: var(--bc-primary-contrast); }
.cp-footer__list { margin: 0; padding: 0; list-style: none; }
.cp-footer__list li a { display: inline-flex; align-items: center; min-height: 44px; }
.cp-footer__phone a { font-weight: 700; font-size: var(--bc-text-lg); }
.cp-footer__bottom {
  margin-top: var(--bc-space-7);
  padding-top: var(--bc-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.cp-footer__copy { font-size: var(--bc-text-sm); color: #b9bec3; }
.cp-footer__disclaimer { margin: 0; font-size: var(--bc-text-sm); line-height: 1.5; color: #b9bec3; max-width: 90ch; }
@media (min-width: 640px) { .cp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .cp-footer { padding-block: var(--bc-space-8) var(--bc-space-5); }
  .cp-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--bc-space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-nav-toggle__bars, .cp-nav-toggle__bars::before, .cp-nav-toggle__bars::after, .cp-nav__chev { transition: none; }
}

/* ---------- Buttons inside the nav keep their button styling (beats the generic nav link rule) ---------- */
.cp-nav a.bc-btn { justify-content: center; text-align: center; border: 2px solid transparent; border-radius: var(--bc-radius); padding: 0 24px; }
.cp-nav a.bc-btn--primary { background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-accent-contrast); }
.cp-nav a.bc-btn--primary:hover { background: var(--bc-accent-dark); border-color: var(--bc-accent-dark); color: #fff; }
.cp-nav a.bc-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.cp-nav a.bc-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* Social profile icons (coloured brand tiles) */
.cp-social { margin: var(--bc-space-4) 0 0; }
.cp-social__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cp-social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: #fff !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,.35); transition: transform .15s ease, filter .15s ease; }
.cp-social__link:hover { transform: translateY(-2px); filter: brightness(1.12); }
.cp-social__link--facebook { background: #0866ff; }
.cp-social__link--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.cp-social__link--linkedin { background: #0a66c2; }
.cp-social__link--youtube { background: #ff0000; }
.cp-social__link--pinterest { background: #e60023; }
.cp-social__link--x { background: #000; }
.cp-social__link--myspace { background: #1c1c1c; }
.cp-social-wrap .cp-social__list { justify-content: center; }
.cp-social-wrap { margin-top: var(--bc-space-4); }
a[href$="#content"]:focus { left: var(--bc-space-3) !important; top: var(--bc-space-3) !important; z-index: 100; background: #fff; padding: 8px 12px; }