/* =========================================================
   Clean Nav — mod_cleannav
   Inherits the host template's custom properties when they
   exist (--bc-* from Boiano Clean, --pcx-* from Padcents),
   and falls back to its own neutral values when standalone.
   ========================================================= */

.cn {
  /* Inherits Template Awesome's variables (--tpl-*) when present, then the
     older Padcents Capital names (--pcx-*), then neutral fallbacks. */
  --cn-primary:   var(--tpl-primary,   var(--pcx-primary,   #1F4A57));
  --cn-accent:    var(--tpl-accent,    var(--pcx-accent,    #A9762F));
  --cn-ink:       var(--tpl-ink,       var(--pcx-ink,       #14202A));
  --cn-line:      var(--tpl-line,      var(--pcx-line,      #D3DDDC));
  --cn-surface:   var(--tpl-surface,   var(--pcx-surface,   #FFFFFF));
  --cn-on-accent: var(--tpl-on-accent, var(--pcx-on-accent, #FFFFFF));
  --cn-body:      var(--tpl-body,      var(--pcx-body,      system-ui, sans-serif));
  --cn-mono:      var(--tpl-mono,      var(--pcx-mono,      ui-monospace, monospace));
  --cn-display:   var(--tpl-display,   var(--pcx-display,   Georgia, serif));

  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--cn-body);
}

.cn--align-center .cn-nav { margin-inline: auto; }
.cn--align-end    .cn-nav { margin-left: auto; }
.cn--align-between { justify-content: space-between; }

/* ---- brand ---- */
.cn-brand { text-decoration: none; display: inline-flex; align-items: center; }
.cn-wordmark { font-family: var(--cn-display); font-size: 1.5rem; color: var(--cn-primary); letter-spacing: -0.02em; }
.cn-wordmark em { font-style: normal; color: var(--cn-accent); }

/* ---- list ---- */
.cn-list { list-style: none; margin: 0; padding: 0; }
.cn-list--1 { display: flex; flex-wrap: wrap; gap: 0.1rem; }
.cn-item { position: relative; max-width: none; }

.cn-link {
  display: block;
  padding: 0.8rem 0.85rem;
  text-decoration: none;
  color: var(--cn-ink);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.cn--upper .cn-list--1 > .cn-item > .cn-link { text-transform: uppercase; }

.cn-link:hover,
.cn-link:focus-visible,
.cn-item.cn-active > .cn-link {
  color: var(--cn-primary);
  border-bottom-color: var(--cn-accent);
}

.cn-link--heading { cursor: default; }

/* ---- dropdown, CSS only, one level ---- */
.cn-list--2 {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 15rem;
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 0.3rem 0;
  z-index: 40;
}
.cn-has-children:hover > .cn-list--2,
.cn-has-children:focus-within > .cn-list--2 { display: block; }

.cn-list--2 .cn-link {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  border-bottom: 0;
}
.cn-list--2 .cn-link:hover { background: color-mix(in srgb, var(--cn-primary) 8%, transparent); }

.cn-list--3 { display: block; padding-left: 0.9rem; }

/* ---- actions ---- */
.cn-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }

.cn-phone {
  font-family: var(--cn-mono);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--cn-primary);
  white-space: nowrap;
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
}
.cn-phone__label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cn-phone:hover { color: var(--cn-accent); }

/* ---- CTA buttons ----
   Shape and colour fall through three levels: the module's own values if
   set to custom, then the host template's CTA variables so the nav buttons
   match the call bar automatically, then a neutral default. */
.cn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--cn-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid transparent;
  padding: var(--cn-cta-pad-y, var(--tpl-cta-pad-y, 12px))
           var(--cn-cta-pad-x, var(--tpl-cta-pad-x, 22px));
  border-radius: var(--cn-cta-radius, var(--tpl-cta-radius, 4px));
  margin: var(--cn-cta-mar-y, var(--tpl-cta-mar-y, 4px))
          var(--cn-cta-mar-x, var(--tpl-cta-mar-x, 4px));
  transition: box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}

.cn-cta--1 {
  background: var(--cn-cta1-bg, var(--tpl-cta1-bg, var(--cn-accent)));
  color: var(--cn-cta1-fg, var(--tpl-cta1-fg, var(--cn-on-accent))) !important;
  border-color: var(--cn-cta1-bg, var(--tpl-cta1-bg, var(--cn-accent)));
  box-shadow: var(--cn-cta1-glow, var(--tpl-cta1-glow, none));
}
.cn-cta--2 {
  background: var(--cn-cta2-bg, var(--tpl-cta2-bg, var(--cn-primary)));
  color: var(--cn-cta2-fg, var(--tpl-cta2-fg, #fff)) !important;
  border-color: var(--cn-cta2-bg, var(--tpl-cta2-bg, var(--cn-primary)));
  box-shadow: var(--cn-cta2-glow, var(--tpl-cta2-glow, none));
}
.cn-cta--1:hover, .cn-cta--1:focus-visible {
  box-shadow: var(--cn-cta1-glow-hover, var(--tpl-cta1-glow-hover, none));
  transform: translateY(-1px);
}
.cn-cta--2:hover, .cn-cta--2:focus-visible {
  box-shadow: var(--cn-cta2-glow-hover, var(--tpl-cta2-glow-hover, none));
  transform: translateY(-1px);
}

/* Outline: same geometry, colour moves to the border and text. */
.cn-cta--outline.cn-cta--1 { background: transparent; color: var(--cn-cta1-bg, var(--tpl-cta1-bg, var(--cn-accent))) !important; }
.cn-cta--outline.cn-cta--2 { background: transparent; color: var(--cn-cta2-bg, var(--tpl-cta2-bg, var(--cn-primary))) !important; }
.cn-cta--outline.cn-cta--1:hover { background: var(--cn-cta1-bg, var(--tpl-cta1-bg, var(--cn-accent))); color: var(--cn-cta1-fg, var(--tpl-cta1-fg, var(--cn-on-accent))) !important; }
.cn-cta--outline.cn-cta--2:hover { background: var(--cn-cta2-bg, var(--tpl-cta2-bg, var(--cn-primary))); color: var(--cn-cta2-fg, var(--tpl-cta2-fg, #fff)) !important; }
.cn--skin-dark .cn-cta--outline { border-color: currentColor; }

/* Ghost: text only until hover. */
.cn-cta--ghost { background: transparent; border-color: transparent; box-shadow: none !important; }
.cn-cta--ghost.cn-cta--1 { color: var(--cn-cta1-bg, var(--tpl-cta1-bg, var(--cn-accent))) !important; }
.cn-cta--ghost.cn-cta--2 { color: var(--cn-cta2-bg, var(--tpl-cta2-bg, var(--cn-primary))) !important; }
.cn--skin-dark .cn-cta--ghost { color: #fff !important; }
.cn-cta--ghost:hover { text-decoration: underline; transform: none; }

@media (prefers-reduced-motion: reduce) { .cn-cta:hover { transform: none; } }

/* ---- toggle ---- */
.cn-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  width: 44px;
  height: 40px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--cn-line);
  border-radius: 3px;
  cursor: pointer;
}
.cn-toggle span { display: block; height: 2px; width: 20px; margin-inline: auto; background: var(--cn-primary); }

/* ---- skins ---- */
.cn--skin-dark { background: var(--cn-primary); }
.cn--skin-dark .cn-link,
.cn--skin-dark .cn-phone,
.cn--skin-dark .cn-wordmark { color: #fff; }
.cn--skin-dark .cn-toggle { border-color: rgba(255, 255, 255, 0.35); }
.cn--skin-dark .cn-toggle span { background: #fff; }
.cn--skin-light { background: #fff; }

/* ---- floor ---- */
.cn :focus-visible { outline: 3px solid var(--cn-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cn-link { transition: none; }
}

@media print { .cn { display: none; } }

/* =========================================================
   PARENT INDICATORS
   Desktop: a chevron next to items that have children.
   Mobile:  a plus that turns into a minus, on a real button,
            because a caret that cannot be tapped is a lie.
   ========================================================= */

/* --- desktop chevron, drawn in CSS so no icon font is needed --- */
.cn--carets .cn-has-children > .cn-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cn--carets .cn-has-children > .cn-link::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  opacity: 0.65;
  transition: transform 0.18s ease, opacity 0.18s ease;
  flex: 0 0 auto;
}
.cn--carets .cn-has-children:hover > .cn-link::after,
.cn--carets .cn-has-children:focus-within > .cn-link::after {
  opacity: 1;
  transform: rotate(225deg) translateY(-0.28em);
}

/* Second-level parents point right, since their submenu opens sideways. */
.cn--carets .cn-list--2 .cn-has-children > .cn-link::after {
  transform: rotate(-45deg);
}

/* --- the expand button: hidden on desktop, shown when collapsed --- */
.cn-sub {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--cn-line);
  cursor: pointer;
  color: inherit;
}
svg.cn-sub-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  opacity: 0.72;
  transition: transform 0.22s ease, opacity 0.22s ease;
  overflow: visible;
  flex: 0 0 auto;
}
.cn-sub:hover svg.cn-sub-icon { opacity: 1; }
.cn-item.is-expanded > .cn-sub--chevron svg.cn-sub-icon,
.cn-item.is-expanded > .cn-sub--caret svg.cn-sub-icon,
.cn-item.is-expanded > .cn-sub--arrow svg.cn-sub-icon { transform: rotate(180deg); }
.cn-sub--plus svg.cn-sub-icon path:first-child { transform-origin: 50% 50%; transition: transform 0.22s ease, opacity 0.22s ease; }
.cn-item.is-expanded > .cn-sub--plus svg.cn-sub-icon path:first-child { transform: rotate(90deg); opacity: 0; }
.cn-sub:hover { background: color-mix(in srgb, var(--cn-primary) 7%, transparent); }
.cn--skin-dark .cn-sub { border-left-color: rgba(255, 255, 255, 0.25); }