/*
Theme Name: Clexperus
Theme URI: https://www.clexperus.com
Author: Clexperus
Description: Custom theme for Clexperus Capital & Wealth Advisory. Migrated from FMG 2026-09-01.
Version: 1.6.24
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: clexperus
*/

/* Base layout. Page-specific cx- styles load from assets/clexperus-styles.css */

/* Gold, cream and navy-mid match the values the imported FMG page styles expect.
   The theme chrome used to define its own gold and cream, so headers, buttons and
   footer accents drifted away from the page content sitting next to them. */
:root {
  --cx-navy: #1a2744;
  --cx-navy-light: #243656;
  --cx-navy-mid: #334e75;
  --cx-gold: #c4a962;
  --cx-cream: #faf8f4;
  --cx-text: #43506b;
  --cx-border: #e5e8ee;
  --cx-max: 1200px;
  /* The old site ran its top bar and header on a 1700px container while page
     copy stayed in the 1170px column, so the logo sat far left and the social
     icons hard right. Matching --cx-max at 1200px pulled both inward: on a
     1920px screen the logo started 380px in instead of 151px. Header chrome
     gets its own width so page content keeps the narrower measure. */
  --cx-shell: 1700px;
  --cx-body-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cx-heading-font: "Playfair Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cx-body-font);
  font-size: 18px;
  color: var(--cx-navy);
  background: #fff;
  line-height: 1.6;
  /* FMG sets this sitewide. Mac subpixel ("auto") is what made Playfair and
     Open Sans look heavier and less clean than the old site. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 100vw full-bleed bands plus a vertical scrollbar make the page a few pixels
   too wide and the whole site wobbles sideways. Clip, not hidden, so the
   sticky header still sticks. Bands themselves must use width: 100%, not 100vw
   (1.6.17), or clip slices them. */
html { overflow-x: clip; }

h1, h2, h3, h4, h5, h6 { font-family: var(--cx-heading-font); }

img { max-width: 100%; height: auto; }

a { color: var(--cx-navy); }
a:hover { color: var(--cx-gold); }

/* 40px light bar, logo right-aligned inside the same 1170px column the old site
   used. Values taken from the rendered FMG site. */
.cx-brokercheck {
  background: #f6f6f6;
  border-bottom: 1px solid #e4e4e4;
  height: 40px;
}

.cx-brokercheck-inner {
  max-width: 1170px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cx-brokercheck img { display: block; width: 150px; height: 21px; }

@media (max-width: 900px) {
  .cx-brokercheck-inner { justify-content: center; }
}

.cx-topbar {
  background: var(--cx-navy);
  color: #fff;
  font-size: 14px;
  padding: 0;
}

/* Contact details left, social icons hard right, matching the FMG top bar:
   1700px container, 40px tall, 14px text. */
.cx-topbar-inner {
  max-width: var(--cx-shell);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}

.cx-topbar-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 6px 0;
  min-width: 0;
}

.cx-topbar-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.cx-topbar-phone,
.cx-topbar-email { white-space: nowrap !important; }

.cx-topbar a { color: #fff; text-decoration: none; }
.cx-topbar a:hover { color: var(--cx-gold); }
.cx-topbar-sep { opacity: 0.5; margin: 0 8px; }

.cx-header {
  background: #fff;
  border-bottom: 1px solid var(--cx-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.cx-header-inner {
  max-width: var(--cx-shell);
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* 32px, the old site's height. At 48px the wordmark competed with the nav
   instead of anchoring the corner. */
.cx-logo img { height: 32px; width: auto; display: block; }

.cx-nav { display: flex; align-items: center; gap: 28px; }

.cx-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

/* Regular weight and no tracking, as on the old site. Medium plus letter
   spacing is what made the nav look heavier than the page it sits above. */
.cx-menu a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
}

.cx-menu .sub-menu {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid var(--cx-border);
  padding: 12px 0;
  min-width: 220px;
  list-style: none;
  box-shadow: 0 8px 24px rgba(26,39,68,0.08);
}

.cx-menu li { position: relative; }
.cx-menu li:hover > .sub-menu { display: block; }
.cx-menu .sub-menu a { display: block; padding: 8px 18px; }

.cx-btn-schedule {
  display: inline-block;
  padding: 10px 22px;
  background: var(--cx-navy);
  color: #fff !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cx-btn-schedule:hover {
  background: var(--cx-navy-light);
  color: #fff !important;
}

.cx-main { min-height: 50vh; }

.cx-page-content {
  max-width: var(--cx-max);
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* FMG-imported pages often ship full-width sections */
.cx-page-content .section,
.cx-page-content section { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
.cx-page-content .o-container { max-width: var(--cx-max); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

.cx-footer {
  background: var(--cx-navy);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  padding: 48px 20px 32px;
}

.cx-footer-inner {
  max-width: var(--cx-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  margin-bottom: 32px;
}

/* logo-white.png is actually the navy wordmark, so it vanishes on the navy
   footer. brightness(0) flattens it to black, invert(1) lifts it to white,
   and the alpha channel is untouched. Drop the filter if a true white asset
   ever replaces the file. */
.cx-footer-brand img { margin-bottom: 16px; filter: brightness(0) invert(1); }

.cx-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}

.c-footer__disclosure {
  max-width: var(--cx-max);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
}

#cx-disc-bar {
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  text-align: left;
}

#cx-disc-bar p { margin: 0 0 10px; }
#cx-disc-bar a { color: rgba(255,255,255,0.75); }

#cx-disc-bar .cx-disc-copy {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* Every imported FMG page carries an inline <style> that forces this bar to
   dark-on-white with !important, which renders the required FINRA, SIPC and
   certification-mark disclosures invisible against the navy footer. The
   .cx-footer prefix raises specificity above that inline rule. */
.cx-footer #cx-disc-bar,
.cx-footer #cx-disc-bar p { color: rgba(255,255,255,0.65) !important; text-align: left !important; font-family: var(--cx-body-font) !important; }
.cx-footer #cx-disc-bar a { color: rgba(255,255,255,0.75) !important; }
.cx-footer #cx-disc-bar a:hover { color: var(--cx-gold) !important; }

/* Footer icons: monochrome on navy. Brand-colored Facebook/LinkedIn/Instagram
   chips read retail. Hover lifts to gold, same as the top bar. */
.cx-social { display: flex; gap: 8px; margin-top: 18px; }

.cx-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 5px;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cx-social a:hover {
  opacity: 1;
  color: var(--cx-navy);
  background: var(--cx-gold);
  border-color: var(--cx-gold);
}
.cx-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.cx-social-fb,
.cx-social-li,
.cx-social-ig { background: rgba(255,255,255,0.14); }

/* In the top bar the icons sit on navy already, so they read better as flat
   translucent squares than as brand-coloured chips. Sized 45x40 to fill the
   full height of the 40px bar, as on the old site: the 24px chips left a band
   of dead navy above and below and read as an afterthought. */
.cx-social--topbar { margin-top: 0; gap: 6px; flex-shrink: 0; align-self: stretch; }
.cx-social--topbar a { width: 45px; height: 40px; border-radius: 0; border: 0; background: rgba(255,255,255,0.15); }
.cx-social--topbar a:hover { background: var(--cx-gold); color: var(--cx-navy); opacity: 1; }
.cx-social--topbar svg { width: 15px; height: 15px; }

/* Phone / tablet: stack address, then phone · email, then centered socials.
   1100px so iPad and a few “desktop site” phones still get the compact bar.
   nowrap + hidden pipes so “(728)” cannot split from the rest of the number. */
@media (max-width: 1100px) {
  .cx-brokercheck { height: 32px; }
  .cx-brokercheck-inner { padding: 0 16px; justify-content: center; }
  .cx-brokercheck img { width: 128px; height: 18px; }

  .cx-topbar { font-size: 12px; line-height: 1.4; }
  .cx-topbar-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 0;
  }
  .cx-topbar-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .cx-topbar-addr {
    display: block;
    width: 100%;
    text-align: center;
  }
  .cx-topbar-links {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .cx-topbar-sep { display: none !important; }
  .cx-topbar-phone::after {
    content: " · ";
    opacity: 0.75;
  }
  .cx-social--topbar {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    gap: 6px;
  }
  .cx-social--topbar a { width: 32px; height: 28px; }

  .cx-header-inner { padding: 10px 16px; }
}

@media (max-width: 768px) {
  .cx-footer-inner { grid-template-columns: 1fr; }
}

.cx-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}

.cx-footer h4 {
  color: #fff;
  font-size: 14px;
  margin: 0 0 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cx-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.cx-footer a:hover { color: var(--cx-gold); }

.cx-footer-links { list-style: none; margin: 0; padding: 0; }
.cx-footer-links li { margin-bottom: 8px; }

.cx-disclosure {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
}

.cx-disclosure a { color: rgba(255,255,255,0.75); }

.cx-nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: var(--cx-navy);
}

@media (max-width: 900px) {
  .cx-nav-toggle { display: block; }
  .cx-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--cx-border);
    box-shadow: 0 8px 24px rgba(26,39,68,0.08);
    z-index: 1002;
    max-height: min(70vh, calc(100dvh - 180px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cx-nav.is-open { display: flex; }
  .cx-menu { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 0; }
  .cx-menu > li { width: 100%; }
  .cx-menu > li > a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
  .cx-btn-schedule { align-self: flex-start; margin-top: 12px; }
  .cx-header { position: relative; }
  .cx-header-inner { position: relative; }

  /* Kill the desktop hover flyout. On a phone that overlay sat on top of
     About Us / Research and mixed the two layers. Accordion instead. */
  .cx-menu li:hover > .sub-menu { display: none; }
  .cx-menu .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    width: 100%;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 12px;
    background: transparent;
  }
  .cx-menu .sub-menu a { padding: 8px 0; font-size: 15px; }
  .cx-menu li.is-open > .sub-menu { display: block; }

  .cx-menu li:has(> .sub-menu) > a::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-right: 2px solid var(--cx-navy);
    border-bottom: 2px solid var(--cx-navy);
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  .cx-menu li.is-open:has(> .sub-menu) > a::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
}

/* Branded 404. Same measure and type as Contact / Founder Note. */
.cx-404 {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.cx-404-kicker {
  margin: 0 0 10px;
  font-family: var(--cx-body-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-navy-mid);
}

.cx-404 h1 {
  margin: 0 0 16px;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cx-navy);
}

.cx-404 h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--cx-gold);
  margin-top: 16px;
}

.cx-404-lead {
  margin: 0 0 28px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--cx-text);
}

.cx-404-links {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--cx-border);
}

.cx-404-links a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--cx-border);
  font-weight: 600;
  text-decoration: none;
  color: var(--cx-navy);
}

.cx-404-links a:hover { color: var(--cx-gold); }

.cx-404-home { margin: 0; font-size: 0.95rem; }
.cx-404-home a { color: var(--cx-text); }