/*
Theme Name:   Counselor Divi Child
Theme URI:    https://counselormagazine.com
Description:  Divi 5 child theme for Counselor Magazine. Carries the sitewide design system (navy/blue editorial language derived from the member login page), the ported login-page CSS (previously in Mag Plus Customizer Additional CSS, which does NOT transfer between themes), and utility classes used by Divi Theme Builder templates.
Author:       Counselor Magazine
Template:     Divi
Version:      2.6.0
*/

/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */
:root {
  --cm-navy: #16283a;
  --cm-navy-deep: #0a1624;
  --cm-ink: #17293b;
  --cm-blue: #2371b1;
  --cm-blue-light: #3390d6;
  --cm-blue-dark: #17527f;
  --cm-slate: #46586b;
  --cm-muted: #5a6b7d;
  --cm-body: #33465a;
  --cm-bg: #f7f9fc;
  --cm-card: #ffffff;
  --cm-line: #d5dde6;
  --cm-line-soft: #e6ecf3;
  --cm-warm: #d97544;
  --cm-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --cm-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cm-r-lg: 18px;
  --cm-r-md: 12px;
  --cm-r-sm: 10px;
  --cm-shadow-lg: 0 30px 70px rgba(6,18,32,.16), 0 4px 14px rgba(6,18,32,.08);
  --cm-shadow-md: 0 14px 34px rgba(6,18,32,.10), 0 2px 8px rgba(6,18,32,.06);
  --cm-shadow-sm: 0 4px 14px rgba(6,18,32,.07);
  --cm-focus-ring: 0 0 0 4px rgba(35,113,177,.16);
}

/* =====================================================
   2. BASE EDITORIAL STYLES
   ===================================================== */
body { background: var(--cm-bg); }

h1, h2, h3, .cm-serif {
  font-family: var(--cm-serif);
  color: var(--cm-navy);
  letter-spacing: -.2px;
}

/* Focus visibility site-wide */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: var(--cm-focus-ring);
  border-radius: 4px;
}

/* =====================================================
   3. UTILITY CLASSES (apply via Divi module CSS Class field)
   ===================================================== */
.cm-kicker {
  display: inline-block;
  font-family: var(--cm-sans);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e6f0f9;
  color: var(--cm-blue-dark);
}
.cm-kicker--warm  { background: #fbeee6; color: #b25a33; }
.cm-kicker--green { background: #e4f2ea; color: #2e6d4d; }
.cm-kicker--glass {
  background: rgba(255,255,255,.16);
  color: #dcebf7;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22);
}

.cm-card {
  background: var(--cm-card);
  border: 1px solid var(--cm-line-soft);
  border-radius: var(--cm-r-lg);
  box-shadow: var(--cm-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cm-card:hover { transform: translateY(-4px); box-shadow: var(--cm-shadow-md); }

.cm-btn,
.cm-btn.et_pb_button {
  display: inline-block;
  padding: 12px 22px !important;
  border-radius: var(--cm-r-sm) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: .02em;
  color: #fff !important;
  background: linear-gradient(180deg, var(--cm-blue-light) 0%, var(--cm-blue) 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(35,113,177,.38);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cm-btn:hover,
.cm-btn.et_pb_button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(35,113,177,.45);
}
.cm-btn--ghost,
.cm-btn--ghost.et_pb_button {
  color: var(--cm-blue) !important;
  background: transparent !important;
  border: 1.5px solid var(--cm-line) !important;
  box-shadow: none;
}
.cm-btn--ghost:hover { border-color: var(--cm-blue) !important; background: #fff !important; }

.cm-panel-navy {
  background: linear-gradient(135deg, var(--cm-navy-deep) 0%, var(--cm-navy) 55%, #1d3a55 100%);
  border-radius: var(--cm-r-lg);
  color: #fff;
  box-shadow: var(--cm-shadow-md);
}
.cm-panel-navy h2, .cm-panel-navy h3 { color: #fff; }
.cm-panel-navy p { color: #b7cadc; }

.cm-ad-slot {
  border: 1.5px dashed var(--cm-line);
  border-radius: var(--cm-r-md);
  background: #fbfcfe;
}

.cm-rise { animation: cmRiseIn .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes cmRiseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Uppercase micro-label (form labels, section eyebrows) */
.cm-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cm-slate);
}

/* Editorial inputs */
.cm-input,
.cm-scope input[type="text"],
.cm-scope input[type="email"],
.cm-scope input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 15px;
  font-size: 15px;
  color: var(--cm-ink);
  background: #f7f9fc;
  border: 1.5px solid var(--cm-line);
  border-radius: var(--cm-r-sm);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cm-input:focus,
.cm-scope input:focus {
  border-color: var(--cm-blue);
  background: #fff;
  box-shadow: var(--cm-focus-ring);
}

/* =====================================================
   3b. GLOBAL HEADER (Theme Builder header layout)
   -----------------------------------------------------
   Structure (Divi Theme Builder, header area .et-l--header):
     Row 1: .cm-utility-bar  → Top Menu + social icons
     Row 2: masthead         → logo + Main Menu (sibling of utility row)
   ===================================================== */

/* V2 "navy monolith" header.
   Structure: Row1 .cm-utility-bar | Row2 masthead (logo + subscribe)
   | Row3 nav bar (Main Menu).
   The header pins at top:0 and SHRINKS on scroll (utility bar collapses,
   logo + CTA scale down) — a negative top offset instead sliced the
   masthead in half and clipped the logo and buttons. */
/* The header is FIXED, not sticky, and a spacer of its full expanded
   height holds its place in the document flow.

   Why: a sticky header stays in flow, so collapsing it on scroll made the
   document ~85px shorter mid-scroll. Chrome's scroll anchoring then yanked
   the reader backwards by exactly that much, every time the threshold was
   crossed, in both directions — the "page jumps on scroll" bug. Taking the
   header out of flow means shrinking it can no longer change page height,
   so there is nothing left to jump. The spacer's height is measured once
   (expanded) by the child theme and never changes on scroll. */
.et-l--header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
}
body.admin-bar .et-l--header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .et-l--header { top: 46px; }
}

/* The spacer holds the header's FULL height in the document, but the header
   itself shrinks on scroll — so for the first couple of hundred pixels of
   scrolling the leftover part of the spacer was visible under the collapsed
   header as a white void. It must keep its height (changing it would move
   the page under the reader again), so instead it carries the header's own
   colour and simply reads as more header. */
.cm-header-spacer {
  height: var(--cm-header-h, 0px);
  flex: none;
  pointer-events: none;
  background: var(--cm-navy-deep, #0d1a2a);
}

/* Anchor links must not land underneath the fixed header. */
html { scroll-padding-top: calc(var(--cm-header-cur, 140px) + 16px); }

/* Used for a single frame while the header is measured — suppresses the
   collapse transition so reading the expanded height never paints it. */
body.cm-measuring .et-l--header,
body.cm-measuring .et-l--header * { transition: none !important; }
.et-l--header .et_pb_section {
  background:
    radial-gradient(90% 140% at 85% -20%, rgba(51,144,214,.28) 0%, transparent 55%),
    radial-gradient(70% 120% at 8% 110%, rgba(232,164,95,.12) 0%, transparent 60%),
    linear-gradient(175deg, #060e18 0%, var(--cm-navy-deep) 45%, var(--cm-navy) 100%);
  box-shadow: 0 20px 50px rgba(2,8,16,.35);
  padding: 0;
}

/* --- Utility bar (transparent over the section gradient) --- */
.et-l--header .cm-utility-bar {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4px 4vw;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  min-height: 40px;
}
.et-l--header .cm-utility-bar .et_pb_menu,
.et-l--header .cm-utility-bar .et_pb_menu__wrap { background: transparent; }
/* Divi regenerates per-page module CSS (menu modules default to a WHITE
   background) with instance-specific selectors on some page types —
   force every header menu transparent so the navy always wins. */
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu__menu,
.et-l--header .et_pb_menu .et_pb_menu_inner_container { background: transparent !important; }
.et-l--header .cm-utility-bar .et_pb_menu li a {
  color: #a8bccf;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 6px 10px;
  transition: color .15s ease;
}
.et-l--header .cm-utility-bar .et_pb_menu li a:hover { color: #fff; opacity: 1; }
.et-l--header .cm-utility-bar .et_pb_social_media_follow { margin-bottom: 0; text-align: right; }
.et-l--header .cm-utility-bar .et_pb_social_media_follow li a.icon {
  width: 26px; height: 26px;
  background: transparent !important;
}
.et-l--header .cm-utility-bar .et_pb_social_media_follow li a.icon::before {
  width: 26px; height: 26px; line-height: 26px; font-size: 13px;
  color: #a8bccf; transition: color .15s ease;
}
.et-l--header .cm-utility-bar .et_pb_social_media_follow li a.icon:hover::before { color: #fff; }

/* --- Masthead row (logo left, Subscribe CTA right) --- */
.et-l--header .cm-utility-bar + .et_pb_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  padding: 26px 32px 20px;
  margin: 0 auto;
}
.et-l--header .cm-utility-bar + .et_pb_row .et_pb_image { margin-bottom: 0; }

/* Real Counselor logo (transparent PNG) on the navy masthead */
.et-l--header .cm-utility-bar + .et_pb_row .et_pb_image img {
  max-width: 380px;
  height: auto;
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 4px 18px rgba(2,8,16,.45));
}

/* ---- SHRINK-ON-SCROLL ----
   body.cm-scrolled is toggled by a tiny listener in the child theme.
   Everything animates to a compact bar: utility strip collapses to
   nothing, the logo scales down, the CTA tightens. Nothing is ever
   clipped, so the logo and buttons stay whole at any scroll position. */
.et-l--header .cm-utility-bar,
.et-l--header .cm-utility-bar + .et_pb_row,
.et-l--header .cm-utility-bar + .et_pb_row .et_pb_image img,
.et-l--header .et_pb_button,
.et-l--header .cm-login-link {
  transition: max-height .3s ease, min-height .3s ease, padding .3s ease,
              opacity .25s ease, max-width .3s ease, font-size .3s ease;
}
/* min-height must be forced: Divi's per-page module CSS sets a 40px
   min-height on this row, and min-height beats max-height, so without
   !important the bar collapsed visually but kept occupying its space. */
body.cm-scrolled .et-l--header .cm-utility-bar {
  min-height: 0 !important;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-color: transparent;
  pointer-events: none;
}
body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row {
  padding-top: 10px;
  padding-bottom: 8px;
}
/* Scaling the contents down rather than squeezing the padding: closing the
   flex gap already gave back the height, so the row can keep real breathing
   room above and below as long as the logo and buttons shrink to match. */
body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row .et_pb_image img {
  max-width: 168px;
}
body.cm-scrolled .et-l--header .et_pb_button {
  padding: 7px 15px !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
}
body.cm-scrolled .et-l--header .cm-login-link { font-size: 12px; }
/* tighter nav strip once compact */
body.cm-scrolled .et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type { padding-top: 2px; padding-bottom: 2px; }
/* a hair more shadow when floating over content */
body.cm-scrolled .et-l--header .et_pb_section { box-shadow: 0 14px 40px rgba(2,8,16,.5); }

/* Divi 5 lays the header section out as a flex column with a 60px row gap.
   That gap is what makes the masthead breathe at the top of the page, but
   it survived the collapse — two gaps kept 120px of empty navy on screen
   while scrolling, which dwarfed the row it was padding. Close it up once
   compact; the expanded state keeps its full spacing. */
.et-l--header .et_pb_section { transition: gap .3s ease, row-gap .3s ease; }
body.cm-scrolled .et-l--header .et_pb_section {
  gap: 0 !important;
  row-gap: 0 !important;
}
body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
@media (prefers-reduced-motion: reduce) {
  .et-l--header .cm-utility-bar,
  .et-l--header .cm-utility-bar + .et_pb_row,
  .et-l--header .cm-utility-bar + .et_pb_row .et_pb_image img,
  .et-l--header .et_pb_button { transition: none; }
}

/* --- Dropdown panels: never scroll, never run off the screen ---
   The Magazine menu has enough children that on a short window its last
   items sat below the viewport with no way to reach them. Long menus lay
   out in two columns instead, which halves their height so they fit on
   their own. :has() counts the items, so this applies itself. */
.et-l--header .et_pb_menu ul.sub-menu:has(> li:nth-child(6)) {
  columns: 2;
  column-gap: 0;
  width: 460px !important;
  max-width: 92vw !important;
}
.et-l--header .et_pb_menu ul.sub-menu:has(> li:nth-child(6)) > li {
  break-inside: avoid;
  width: 100% !important;
}

/* Nine or more items go to three columns, which puts the longest menu at
   four rows.

   There is deliberately no max-height and no overflow on these panels. A
   dropdown should never scroll, and clamping the height while CSS columns
   are in play is actively worse than plain overflow: the columns size
   themselves to the clamped height and then spill sideways, which is what
   left large empty gaps inside the panel. */
.et-l--header .et_pb_menu ul.sub-menu:has(> li:nth-child(9)) {
  columns: 3;
  width: 690px !important;
  max-width: 94vw !important;
}

/* A wide panel hanging off one of the right-hand nav items would run past
   the edge of the screen, so those open right-aligned instead. */
.et-l--header .et_pb_menu .nav > li:nth-last-child(-n+3) > ul.sub-menu {
  left: auto !important;
  right: 0 !important;
}

/* Tighter rows keep the multi-column panel compact. */
.et-l--header .et_pb_menu ul.sub-menu > li > a {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* Divi keeps menu labels on one line, so any item whose text is wider than
   the panel simply ran outside it ("Advertise in the Weekly Digest"). Let
   labels wrap instead of escaping their box. */
.et-l--header .et_pb_menu ul.sub-menu li a {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Third-level flyouts size to their own content rather than inheriting the
   parent panel's width or its column layout. */
.et-l--header .et_pb_menu ul.sub-menu ul.sub-menu {
  columns: auto !important;
  column-count: auto !important;
  width: max-content !important;
  min-width: 210px !important;
  max-width: 300px !important;
}

/* A third level hanging off a right-hand nav item would leave the screen,
   so it opens back towards the middle instead. */
.et-l--header .et_pb_menu .nav > li:nth-last-child(-n+3) ul.sub-menu ul.sub-menu {
  left: auto !important;
  right: 100% !important;
}

/* Reaching a third-level flyout meant crossing a bare gap between the two
   panels. The pointer left the parent item on the way across, the menu
   closed, and the flyout could never be clicked. Two things keep it open:
   the flyout now overlaps its parent slightly, and an invisible bridge
   spans the remaining gap so hover is never interrupted. */
.et-l--header .et_pb_menu ul.sub-menu > li { position: relative; }

.et-l--header .et_pb_menu ul.sub-menu ul.sub-menu { margin-left: -6px; }
.et-l--header .et_pb_menu .nav > li:nth-last-child(-n+3) ul.sub-menu ul.sub-menu {
  margin-left: 0;
  margin-right: -6px;
}

.et-l--header .et_pb_menu ul.sub-menu > li:has(> ul.sub-menu)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 28px;
  height: 100%;
  background: transparent;
}
.et-l--header .et_pb_menu .nav > li:nth-last-child(-n+3) ul.sub-menu > li:has(> ul.sub-menu)::after {
  left: auto;
  right: 100%;
}

/* Divi slides an arrow glyph into every button on hover and widens the
   padding to make room for it, so the Subscribe button grew and shifted
   under the cursor. Neither is wanted here — the button is already a clear
   call to action. Padding is pinned to the same value in both states so
   nothing moves on hover. */
.et-l--header .et_pb_button::after,
.et-l--header .et_pb_button:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}
.et-l--header .et_pb_button,
.et-l--header .et_pb_button:hover {
  padding: 13px 26px !important;
}
body.cm-scrolled .et-l--header .et_pb_button,
body.cm-scrolled .et-l--header .et_pb_button:hover {
  padding: 7px 15px !important;
}

/* A brief grace period on the way out, so a slightly imprecise diagonal
   move towards the flyout doesn't dismiss it either. */
.et-l--header .et_pb_menu ul.sub-menu ul.sub-menu {
  transition: opacity .2s ease, visibility 0s linear .25s;
}
.et-l--header .et_pb_menu ul.sub-menu > li:hover > ul.sub-menu {
  transition: opacity .2s ease, visibility 0s linear 0s;
}

/* Divi's mobile flyout has the same problem on short screens. */
.et-l--header .et_mobile_menu {
  max-height: calc(100vh - var(--cm-header-cur, 140px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------
   MOBILE: collapse to a single compact bar on scroll.
   At rest the phone gets the full masthead. Once the reader starts
   scrolling, the header folds into one line — small logo on the left,
   hamburger on the right — instead of keeping a large logo plus the
   Subscribe and Log In buttons, which together ate most of a phone
   screen. Both actions still live inside the menu, so nothing is lost.
   --------------------------------------------------------------- */
/* !important throughout is not laziness: Divi prefixes much of its row and
   column CSS with #page-container, and a single ID outranks any number of
   classes, so the unprefixed rules below silently lost. */
@media (max-width: 980px) {
  /* The masthead row is the positioning context for the nav row. */
  .et-l--header .cm-utility-bar + .et_pb_row { position: relative; }

  /* Utility bar and its own mobile toggle fold away completely — without
     hiding the columns too, its hamburger kept painting outside the
     collapsed row. */
  body.cm-scrolled .et-l--header .cm-utility-bar,
  body.cm-scrolled .et-l--header .cm-utility-bar > .et_pb_column {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row {
    padding: 8px 4vw !important;
    min-height: 0 !important;
  }

  /* Small logo, left, on one compact line. */
  body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row .et_pb_image img {
    max-width: 130px !important;
    width: 130px !important;
    height: auto !important;
  }
  body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row .et_pb_image,
  body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row .et_pb_image .et_pb_image_wrap {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }
  body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row > .et_pb_column:first-child {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  /* Subscribe / Log In step aside; both remain inside the menu. */
  body.cm-scrolled .et-l--header .cm-utility-bar + .et_pb_row > .et_pb_column:last-child {
    display: none !important;
  }

  /* Lift the nav row onto the masthead line so the hamburger sits beside
     the logo instead of occupying a second bar of its own. */
  body.cm-scrolled .et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type {
    position: absolute !important;
    top: 50% !important;
    right: 4vw !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3;
  }
  body.cm-scrolled .et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.cm-scrolled .et-l--header .mobile_menu_bar { padding-bottom: 0 !important; }
  body.cm-scrolled .et-l--header .mobile_menu_bar::before { font-size: 30px; }

  /* The flyout hangs off the nav row, which is now only as wide as the
     hamburger — pin it back across the full screen. */
  body.cm-scrolled .et-l--header .et_mobile_nav_menu .et_mobile_menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}


/* Masthead right side: login link + subscribe button on one line */
.et-l--header .cm-utility-bar + .et_pb_row > .et_pb_column:last-child {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.et-l--header .cm-utility-bar + .et_pb_row > .et_pb_column:last-child > * {
  width: auto;
  flex: 0 0 auto;
  margin-bottom: 0;
}
.et-l--header .cm-utility-bar + .et_pb_row .et_pb_code { margin-bottom: 0; order: -1; }
.et-l--header .cm-login-link {
  color: #b9cde0;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.et-l--header .cm-login-link:hover {
  color: #fff;
  border-color: var(--cm-blue-light);
}

/* Subscribe button — glow gradient */
.et-l--header .et_pb_button,
.et-l--header .et_pb_button_module_wrapper .et_pb_button {
  display: inline-block;
  padding: 13px 26px !important;
  border-radius: 11px !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  letter-spacing: .02em;
  color: #fff !important;
  background: linear-gradient(180deg, var(--cm-blue-light) 0%, var(--cm-blue) 100%) !important;
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(51,144,214,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.et-l--header .et_pb_button:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 16px 36px rgba(51,144,214,.55);
  background-image: linear-gradient(180deg, var(--cm-blue-light) 0%, var(--cm-blue) 100%) !important;
}

/* --- Nav bar row (Main Menu on its own dark glass line) --- */
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 4vw;
  background: rgba(6,14,24,.86);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu { background: transparent; }
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu > * li a { white-space: nowrap; }
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu li a {
  position: relative;
  font-size: 14.5px;
  font-weight: 650;
  color: #c3d4e4;
  padding: 19px 16px;
  transition: color .15s ease;
}
/* Underline animation lives on the <li> so the <a>'s ::after stays
   free for Divi's dropdown arrow / our HOT badge. */
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu > * > nav > ul > li {
  position: relative;
}
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu > * > nav > ul > li::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--cm-blue-light), #8fc3e8);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu li a:hover {
  color: #fff;
  opacity: 1;
}
.et-l--header .cm-utility-bar ~ .et_pb_row:last-of-type .et_pb_menu > * > nav > ul > li:hover::after {
  transform: scaleX(1);
}

/* Dropdown arrows: replace Divi's absolutely-positioned ETmodules
   glyph with the draft's inline triangle. */
.et-l--header .et_pb_menu li.menu-item-has-children > a::after {
  content: '\25BE' !important;
  font-family: var(--cm-sans) !important;
  position: static !important;
  display: inline-block !important;
  font-size: 10px;
  line-height: 1;
  margin-left: 6px;
  opacity: .55;
  vertical-align: 2px;
  transform: none !important;
  transition: opacity .15s ease;
}
.et-l--header .et_pb_menu li.menu-item-has-children > a:hover::after { opacity: .9; }

/* HOT badge on Job Board — matches the draft chip.
   Targeted by destination URL so it works on any environment
   (menu item IDs differ between staging and live). */
.et-l--header .cm-utility-bar ~ .et_pb_row .et_pb_menu li > a[href*="jobs.counselormagazine"]::after {
  content: 'HOT';
  display: inline-block;
  font-family: var(--cm-sans);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #1a0e04;
  background: linear-gradient(180deg, #f2c078, var(--cm-warm));
  border-radius: 4px;
  padding: 2.5px 6px;
  margin-left: 7px;
  vertical-align: 2px;
}

/* --- Dropdown panels — dark editorial cards --- */
.et-l--header .et_pb_menu li ul,
.et-l--header .et_pb_menu .sub-menu {
  background: linear-gradient(180deg, #0d1a2a 0%, #111f31 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 40px 80px rgba(2,8,16,.55);
  padding: 12px 10px;
  min-width: 240px;
}
.et-l--header .et_pb_menu li ul li a {
  font-size: 13.5px;
  font-weight: 550;
  color: #c3d4e4;
  padding: 10px 14px;
  border-radius: 9px;
  width: 100%;
  transition: all .15s ease;
}
.et-l--header .et_pb_menu li ul li a:hover {
  background: rgba(51,144,214,.14);
  color: #fff;
  padding-left: 20px;
}

/* Hide global header entirely on the member login page
   (login keeps its full-bleed branded backdrop) */
.cm-login .et-l--header { display: none; }

/* Divi renders the TB body layout as a flex child of #main-content;
   without this it shrinks to content width and the backdrop only
   covers part of the viewport. */
.cm-login #main-content > .et-l--body { width: 100%; flex: 1 1 100%; }

/* --- Responsive: header --- */
@media (max-width: 980px) {
  .et-l--header { top: 0; }
  .et-l--header .cm-utility-bar { padding: 4px 16px; }
  .et-l--header .cm-utility-bar ~ .et_pb_row { padding: 10px 16px; flex-wrap: wrap; }
  .et-l--header .cm-utility-bar ~ .et_pb_row .et_pb_image img { max-width: 210px; }
}
@media (max-width: 640px) {
  /* keep utility bar to a single tidy line; menu handles its own
     mobile hamburger via Divi */
  .et-l--header .cm-utility-bar .et_pb_menu li a { padding: 4px 6px; font-size: 11.5px; }
}

/* =====================================================
   4. MEMBER LOGIN PAGE (ported from Mag Plus Customizer CSS)
   -----------------------------------------------------
   NOTE: Customizer "Additional CSS" (wp_custom_css) is stored
   PER-THEME and does not follow you to Divi. This section is the
   permanent home of the login page design. Page ID 2753 matches
   both live and staging (staging is a clone).
   Mag Plus-specific selectors (.tt-*) removed; Divi templates
   handle chrome visibility instead.
   ===================================================== */
.cm-login #main-content,
.cm-login .cm-login-backdrop {
  min-height: 100vh;
  background: var(--cm-navy) var(--cm-login-bg-image, none) center / cover no-repeat;
  display: flex;
  align-items: center;
  position: relative;
}
.cm-login #main-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10,22,36,.6) 0%, rgba(10,22,36,.2) 45%, rgba(10,22,36,0) 75%);
  pointer-events: none;
}
.cm-login .cm-login-card,
.cm-login .accessally-login-form-container {
  position: relative;
  width: 100%;
  max-width: 432px;
  margin-left: 5vw;
  padding: 40px 38px 28px;
  background: rgba(255,255,255,.97);
  border-radius: var(--cm-r-lg);
  box-shadow: 0 30px 70px rgba(6,18,32,.4), 0 4px 14px rgba(6,18,32,.2);
  backdrop-filter: blur(6px);
  animation: cmRiseIn .5s cubic-bezier(.2,.7,.3,1) both;
}

/* Labels */
.cm-login .accessally-login-form label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cm-slate);
}

/* Inputs */
.cm-login #accessally-login-form-username-1,
.cm-login #accessally-login-form-password-1,
.cm-login .accessally-login-reset-login-input,
.cm-login .accessally-login-one-use-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 12px 15px;
  font-size: 15px;
  color: var(--cm-ink);
  background: #f7f9fc;
  border: 1.5px solid var(--cm-line);
  border-radius: var(--cm-r-sm);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cm-login #accessally-login-form-username-1:focus,
.cm-login #accessally-login-form-password-1:focus,
.cm-login .accessally-login-reset-login-input:focus,
.cm-login .accessally-login-one-use-input:focus {
  border-color: var(--cm-blue);
  background: #fff;
  box-shadow: var(--cm-focus-ring);
}

/* Remember me */
.cm-login #accessally-login-form-rememberme-1 {
  width: auto;
  display: inline-block;
  margin: 0 8px 0 0;
  accent-color: var(--cm-blue);
  vertical-align: middle;
}
.cm-login #accessally-login-form-rememberme-1 + label {
  display: inline;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cm-muted);
  vertical-align: middle;
}

/* Buttons */
body.cm-login .accessally-login-form-submit-button,
body.cm-login .accessally-login-reset-login-submit,
body.cm-login .accessally-login-one-use-submit {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  margin: 6px 0 18px;
  padding: 13px 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;
  background: linear-gradient(180deg, var(--cm-blue-light) 0%, var(--cm-blue) 100%) !important;
  border: 0 !important;
  border-radius: var(--cm-r-sm) !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(35,113,177,.38);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body.cm-login .accessally-login-form-submit-button:hover,
body.cm-login .accessally-login-reset-login-submit:hover,
body.cm-login .accessally-login-one-use-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(35,113,177,.45);
}
body.cm-login .accessally-login-form-submit-button:active { transform: none; filter: brightness(.98); }

/* Links */
body.cm-login .accessally-login-form a,
body.cm-login .accessally-login-reset-container a,
body.cm-login .accessally-login-one-use-container a {
  color: var(--cm-blue) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .15s ease;
}
body.cm-login .accessally-login-form a:hover,
body.cm-login .accessally-login-reset-container a:hover,
body.cm-login .accessally-login-one-use-container a:hover {
  color: var(--cm-blue-dark) !important;
  text-decoration: underline !important;
}

/* Helper copy in reset + snappy panels */
.cm-login .accessally-login-reset-container,
.cm-login .accessally-login-one-use-container {
  font-size: 14.5px;
  line-height: 1.65;
  color: #4d5f70;
}

/* Bottom links row: side by side */
body.cm-login .accessally-login-form tr:last-child {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.cm-login .accessally-login-form tr:last-child td { width: auto !important; }

/* Centered, clickable logo */
.cm-login .cm-login-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 52px;
  margin: 0 auto 24px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Mobile */
@media (max-width: 640px) {
  .cm-login .cm-login-card,
  .cm-login .accessally-login-form-container {
    max-width: none;
    margin: 0 16px;
    padding: 30px 22px 20px;
  }
}

/* =====================================================
   5. LOGIN PAGE EXTRAS — password eye + register button
   ===================================================== */
.cm-login .cm-eye {
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #8fa0b1;
  transition: color .15s ease;
}
.cm-login .cm-eye:hover,
.cm-login .cm-eye.is-on { color: var(--cm-blue); }

body.cm-login a.cm-register-btn,
.cm-login .cm-register-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 12px 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-blue) !important;
  background: transparent;
  border: 1.5px solid var(--cm-line);
  border-radius: var(--cm-r-sm);
  text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.cm-login .cm-register-btn:hover {
  border-color: var(--cm-blue);
  background: #f2f7fc;
}


/* =====================================================
   6. LOGIN PAGE LAYOUT — match live counselormagazine.com/login
   (branded photo backdrop, white card) + current-cover panel
   ===================================================== */
/* spacer section from template: hide */
.cm-login .et-l--body .et_pb_section:first-child:not(:only-child) { display: none; }

/* full-bleed branded backdrop */
.cm-login .et-l--body .et_pb_section:last-child {
  min-height: 100vh;
  /* custom-painted navy watercolor backdrop — ships inside the theme */
  background: #16283a url('assets/login-bg.jpg') center / cover no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  padding: 48px 0;
}
.cm-login .et-l--body .et_pb_section:last-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10,22,36,.6) 0%, rgba(10,22,36,.2) 45%, rgba(10,22,36,0) 75%);
  pointer-events: none;
}

/* Divi 5 renders section > row > columns, and the row defaults to
   display:block (columns stack). Turn the row into a centered flex
   band so the card and the cover sit SIDE BY SIDE. */
.cm-login .et-l--body .et_pb_section:last-child > .et_pb_row {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6vw;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  background: transparent !important;
  position: relative;
}

/* the column holding logo + form becomes the white card */
.cm-login .et-l--body .et_pb_section:last-child .et_pb_column:first-child {
  position: relative;
  width: 100%;
  max-width: 432px;
  flex: 0 0 auto;
  padding: 40px 38px 28px;
  background: rgba(255,255,255,.97);
  border-radius: var(--cm-r-lg);
  box-shadow: 0 30px 70px rgba(6,18,32,.4), 0 4px 14px rgba(6,18,32,.2);
  backdrop-filter: blur(6px);
  animation: cmRiseIn .5s cubic-bezier(.2,.7,.3,1) both;
}
/* logo centered, welcome headline hidden (live has no headline) */
.cm-login .et-l--body .et_pb_image_0_tb_body { text-align: center; margin: 0 0 24px; }
.cm-login .et-l--body .et_pb_image_0_tb_body img { max-width: 300px; height: auto; }
.cm-login .et-l--body .et_pb_text_0_tb_body { display: none; }

/* current-cover panel on the right, floating on the backdrop */
.cm-login .et-l--body .et_pb_section:last-child .et_pb_column:last-child:not(:first-child) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 360px;
  width: auto;
}
.cm-login .et-l--body .et_pb_section:last-child .et_pb_column:last-child:not(:first-child) .et_pb_code,
.cm-login .et-l--body .et_pb_section:last-child .et_pb_column:last-child:not(:first-child) .et_pb_code_inner {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.cm-current-cover { display: block; line-height: 0; }
.cm-current-cover .issuem_widget_issue_name { display: none; }
.cm-hide { display: none; }
.cm-current-cover img,
.cm-login .et-l--body .et_pb_image_1_tb_body img {
  width: 300px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(2,8,16,.55);
  transform: rotate(1.5deg);
  transition: transform .3s ease, box-shadow .3s ease;
  animation: cmCoverFloat 6s ease-in-out infinite; /* same gentle float as the homepage hero */
}
.cm-current-cover img:hover,
.cm-login .et-l--body .et_pb_image_1_tb_body img:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 40px 90px rgba(2,8,16,.6);
}
@media (prefers-reduced-motion: reduce) {
  .cm-current-cover img { animation: none; }
}

@media (max-width: 900px) {
  .cm-login .et-l--body .et_pb_section:last-child > .et_pb_row { flex-direction: column; gap: 24px; }
  .cm-login .et-l--body .et_pb_section:last-child .et_pb_column:first-child { margin: 24px 0; }
  .cm-login .et-l--body .et_pb_image_1_tb_body,
  .cm-login .cm-current-cover { display: none; }
}


/* login card: flatten the template's inner rows AND inner columns into
   one clean card — Divi 5 gives the inner columns their own white
   background, width and offsets, which reads as a second "ghost" card. */
.cm-login .et-l--body .et_pb_column:first-child .et_pb_row_inner,
.cm-login .et-l--body .et_pb_column:first-child .et_pb_column_inner {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  position: static !important;
  display: block !important;
}
.cm-login .et-l--body .et_pb_column:first-child .et_pb_module {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* the empty row that held the hidden welcome headline */
.cm-login .et-l--body .et_pb_row_inner:has(.et_pb_text_0_tb_body) { display: none !important; }

/* =====================================================
   7. HOMEPAGE — V2 hero band, cards, ads (matches prototype)
   ===================================================== */
.cm-kicker--amber {
  background: linear-gradient(180deg, rgba(232,164,95,.25), rgba(217,117,68,.2));
  color: #f2c078;
  border: 1px solid rgba(232,164,95,.35);
}

/* hero band fuses with the navy header */
.cm-hero-band {
  background:
    radial-gradient(90% 120% at 80% -10%, rgba(51,144,214,.25) 0%, transparent 55%),
    linear-gradient(180deg, var(--cm-navy) 0%, #1d3a55 100%);
  color: #fff;
  padding: 48px 0 64px;
  margin-top: 0;
}
.cm-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: end;
}
.cm-hero-kickers { display: flex; gap: 10px; margin-bottom: 20px; }
.cm-hero-copy h1 {
  font-family: var(--cm-serif);
  font-size: 62px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}
.cm-hero-copy h1 a { color: #fff; }
.cm-hero-copy h1 a:hover { color: #cfe4f5; }
.cm-hero-deck {
  font-family: var(--cm-serif);
  font-style: italic;
  font-size: 18.5px;
  line-height: 1.6;
  color: #b9cde0;
  max-width: 540px;
}
.cm-hero-byline { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font-size: 14px; }
.cm-hero-byline b { color: #fff; }
.cm-hero-byline span { color: #7f97ac; font-size: 12.5px; }
.cm-hero-read {
  margin-left: auto;
  color: #fff !important;
  font-weight: 700;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 10px 20px;
  transition: background .2s ease, gap .2s ease;
}
.cm-hero-read:hover { background: rgba(255,255,255,.18); }

/* the animated current cover */
.cm-hero-cover { position: relative; padding-bottom: 0; }
.cm-hero-cover .cm-current-cover { display: block; }
.cm-hero-cover .cm-current-cover img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 50px 100px rgba(2,8,16,.55);
  transform: rotate(1.5deg);
  transition: transform .3s ease, box-shadow .3s ease;
  animation: cmCoverFloat 6s ease-in-out infinite;
}
.cm-hero-cover .cm-current-cover:hover img {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 60px 110px rgba(2,8,16,.65);
}
@keyframes cmCoverFloat { 50% { translate: 0 -8px; } }
.cm-hero-badge {
  position: absolute;
  left: -18px;
  bottom: 26px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  color: var(--cm-ink);
  border-radius: 16px;
  padding: 13px 17px;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 24px 60px rgba(6,18,32,.35);
  animation: cmBadgeFloat 5s ease-in-out infinite;
}
.cm-hero-badge b { font-size: 13px; }
@keyframes cmBadgeFloat { 50% { translate: 0 -7px; } }
.cm-hero-badge__ce {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #f2c078, var(--cm-warm));
  font-weight: 900; color: #2a1608;
}

/* content sections */
.cm-home-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.cm-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 64px 0 24px; }
.cm-section-head h2 { font-family: var(--cm-serif); font-size: 34px; color: var(--cm-navy); letter-spacing: -.5px; margin: 0; }
.cm-section-head h2 em { font-style: normal; color: var(--cm-blue); }
.cm-section-head a { font-size: 13.5px; font-weight: 800; color: var(--cm-blue); }
.cm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cm-section-sub {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--cm-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cm-muted);
}

/* ---- HERO CAROUSEL (rotates the current issue's 4 features) ---- */
.cm-hero-slides { display: grid; }
.cm-hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
.cm-hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.cm-hero-nav { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.cm-hero-dots { display: flex; align-items: center; gap: 9px; }
.cm-hero-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,.28);
  transition: background .2s ease, transform .2s ease, width .2s ease;
}
.cm-hero-dot:hover { background: rgba(255,255,255,.55); }
.cm-hero-dot.is-active { background: var(--cm-blue-light); width: 26px; }
.cm-hero-arrow {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  color: #cfe0ef;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cm-hero-arrow:hover { background: var(--cm-blue); border-color: var(--cm-blue); color: #fff; }

/* ---- COLUMNS SCROLLER (horizontal, scroll-snap) ---- */
.cm-colrow { position: relative; }
.cm-colrow__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cm-colrow__track::-webkit-scrollbar { display: none; }
.cm-colrow .cm-card--col { flex: 0 0 348px; scroll-snap-align: start; }
.cm-colrow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--cm-line);
  background: rgba(255,255,255,.95);
  color: var(--cm-navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(6,18,32,.18);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cm-colrow__arrow:hover { background: var(--cm-blue); color: #fff; transform: translateY(-50%) scale(1.06); }
.cm-colrow__arrow--prev { left: -18px; }
.cm-colrow__arrow--next { right: -18px; }

.cm-card { background: #fff; border: 1px solid var(--cm-line-soft); border-radius: 20px; overflow: hidden; box-shadow: var(--cm-shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }
.cm-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(6,18,32,.14); }
.cm-card__thumb { display: block; height: 185px; position: relative; background: linear-gradient(150deg, #2a4a68, #764e6b); background-size: cover; background-position: center; }
.cm-card__thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,22,36,.45)); }
.cm-card__cat { position: absolute; z-index: 2; top: 14px; left: 14px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: rgba(10,22,36,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); padding: 6px 12px; border-radius: 999px; }

/* ---- MAGAZINE HEADER-BAR COLORS (per Counselor Header Bar Color SOP 2026) ----
   Column chips take each column's print header-bar color; feature cards
   take the positional Feature 1-4 colors. Unlisted categories keep the
   default glass chip above. */
/* Same frosted-glass treatment as the default chip (translucent color
   over a blurred backdrop) — the base .cm-card__cat supplies the
   backdrop-filter; these only tint the glass with each bar color. */
.cm-card__cat--letter-from-the-publisher { background: rgba(157,199,59,.62); color: #fff; }
.cm-card__cat--ccapp                     { background: rgba(95,36,159,.62);  color: #fff; }
.cm-card__cat--recovery-capital-peer-support { background: rgba(237,27,47,.62); color: #fff; }
.cm-card__cat--industry-insider          { background: rgba(244,154,193,.62); color: #fff; }
.cm-card__cat--counselor-concerns        { background: rgba(132,41,144,.62); color: #fff; }
.cm-card__cat--nlrc                      { background: rgba(0,174,239,.62);  color: #fff; }
.cm-card__cat--topics-in-behavioral-health-care { background: rgba(53,188,168,.62); color: #fff; }
.cm-card__cat--wellness                  { background: rgba(217,23,109,.62); color: #fff; }
.cm-card--f1 .cm-card__cat { background: rgba(233,193,2,.62);  color: #fff; }
.cm-card--f2 .cm-card__cat { background: rgba(250,157,27,.62); color: #fff; }
.cm-card--f3 .cm-card__cat { background: rgba(230,87,95,.62);  color: #fff; }
.cm-card--f4 .cm-card__cat { background: rgba(0,160,220,.62);  color: #fff; }
.cm-card__cat[class*="cm-card__cat--"],
.cm-card--f1 .cm-card__cat, .cm-card--f2 .cm-card__cat,
.cm-card--f3 .cm-card__cat, .cm-card--f4 .cm-card__cat {
  text-shadow: 0 1px 4px rgba(6,18,32,.45);
}
/* hero kickers carry the same positional feature colors (glass keeps
   its blur from .cm-kicker--glass) */
.cm-hero-slide .cm-kicker--f1 { background: rgba(233,193,2,.4); }
.cm-hero-slide .cm-kicker--f2 { background: rgba(250,157,27,.4); }
.cm-hero-slide .cm-kicker--f3 { background: rgba(230,87,95,.4); }
.cm-hero-slide .cm-kicker--f4 { background: rgba(0,160,220,.4); }
.cm-hero-slide .cm-kicker--f1, .cm-hero-slide .cm-kicker--f2,
.cm-hero-slide .cm-kicker--f3, .cm-hero-slide .cm-kicker--f4 { color: #fff; }
.cm-card__body { padding: 20px 22px 22px; }
.cm-card__body h3 { font-family: var(--cm-serif); font-size: 20px; line-height: 1.3; margin: 0 0 10px; }
.cm-card__body h3 a { color: var(--cm-ink); }
.cm-card__body h3 a:hover { color: var(--cm-blue-dark); }
.cm-card__body p { font-size: 14px; line-height: 1.65; color: var(--cm-muted); margin: 0; }
.cm-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #8195a8; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--cm-line-soft); }
.cm-card__meta b { color: var(--cm-slate); }
.cm-card__mins { margin-left: auto; color: var(--cm-blue); font-weight: 700; }

/* ad slots — centered, capped to natural banner proportions.
   Creatives are uploaded huge (1900px+); constrain every creative to
   billboard scale (max 970 wide / 250 tall, aspect preserved) so ads
   read as ads, not page takeovers. */
.cm-home-ad { max-width: 1240px; margin: 0 auto; padding: 26px 32px; text-align: center; }
.cm-home-ad--top { padding-top: 0; background: transparent; }
.cm-home-ad--bottom { padding: 44px 32px 56px; }
.cm-home-ad img {
  max-width: min(970px, 100%) !important;
  max-height: 250px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 10px;
}
.cm-home-ad iframe,
.cm-home-ad video {
  max-width: min(970px, 100%) !important;
  max-height: 250px !important;
}
.cm-hero-band + .cm-home-inner { margin-top: 8px; }

/* The archive grid started at the exact pixel the hero band ended, so the
   first row of cards read as though it were overlapping the band rather
   than sitting below it. Give the grid room to breathe. */
.cm-archivepg .cm-band-page + .cm-home-inner { padding-top: 56px; padding-bottom: 24px; }
@media (max-width: 767px) {
  .cm-archivepg .cm-band-page + .cm-home-inner { padding-top: 32px; }
}

/* top ad sits on navy (header runs into hero) — give it a navy stage */
.cm-home-ad--top { background: var(--cm-navy); margin: 0; max-width: none; padding: 16px 32px 4px; }

@media (max-width: 1280px) {
  .cm-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1020px) {
  .cm-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .cm-hero-copy h1 { font-size: 40px; }
  .cm-grid-3 { grid-template-columns: 1fr; }
  .cm-hero-cover { max-width: 300px; }
  .cm-hero-badge { left: 8px; }
  .cm-colrow .cm-card--col { flex-basis: 300px; }
  .cm-colrow__arrow--prev { left: 6px; }
  .cm-colrow__arrow--next { right: 6px; }
}
@media (max-width: 640px) {
  .cm-grid-4 { grid-template-columns: 1fr; }
}

/* =====================================================
   7b. HOMEPAGE CANVAS — full-bleed, no boxed row
   The [cm_homepage] Code module lives in a Divi section/row;
   strip their width/padding so the hero band runs edge to edge,
   and paint the page canvas in the design's soft blue-gray.
   ===================================================== */
body.home,
body.home #page-container,
body.home #main-content,
body.home #et-main-area {
  background: var(--cm-bg) !important;
}
body.home .et-l--body .et_pb_section {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible;
}
body.home .et-l--body .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.home .et-l--body .et_pb_column { width: 100% !important; }
body.home .et-l--body .et_pb_code { margin-bottom: 0 !important; }
body.home .et-l--body .et_pb_code_inner { width: 100%; }

/* hero band: run flush against the header (kill the gap) */
body.home #main-content { padding-top: 0 !important; }
.cm-hero-band { margin-top: 0; }
.cm-home-ad--top { padding-top: 24px; }


/* =====================================================
   8. GLOBAL FOOTER
   ===================================================== */
.cm-footer {
  background:
    radial-gradient(70% 120% at 10% 110%, rgba(51,144,214,.12) 0%, transparent 60%),
    linear-gradient(180deg, #0a1624 0%, #060e18 100%);
  color: #8fa6ba;
  font-size: 14px;
}
.cm-footer__main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.cm-footer__brand img { max-width: 300px; height: auto; margin-bottom: 18px; filter: brightness(1.12); }
.cm-footer__brand p { line-height: 1.7; font-size: 13.5px; max-width: 340px; margin: 0; }
.cm-footer h5 {
  color: #fff;
  font-family: var(--cm-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 0 0 16px;
}
.cm-footer ul { list-style: none; margin: 0; padding: 0; }
.cm-footer li { margin-bottom: 10px; padding: 0; }
.cm-footer a { color: #8fa6ba; transition: color .15s ease; }
.cm-footer a:hover { color: #fff; }
.cm-footer__contact li { display: flex; gap: 10px; align-items: baseline; }
.cm-footer__contact .ico { color: var(--cm-blue-light); flex: none; }
.cm-footer__bar {
  border-top: 1px solid rgba(255,255,255,.08);
}
.cm-footer__bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #64798d;
}
.cm-footer__bar a { color: #8fa6ba; }
@media (max-width: 900px) {
  .cm-footer__main { grid-template-columns: 1fr; gap: 32px; }
}

/* Full-bleed footer: strip Divi's boxed section/row chrome so the navy
   footer runs edge-to-edge (inner max-widths handle the content column). */
.et-l--footer .et_pb_section {
  padding: 0 !important;
  background: none !important;
}
.et-l--footer .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et-l--footer .et_pb_code { margin-bottom: 0 !important; }

/* hide Divi's default footer bottom-credits bar (our footer replaces it) */
#main-footer #footer-bottom { display: none; }


/* =====================================================
   9. SITE PAGE TEMPLATES (issue pages, articles, archives,
      standard pages, 404) — rendered via [cm_*] shortcodes
   ===================================================== */

/* Full-bleed canvas for any Theme Builder body that contains a
   cm template — kills Divi's boxed row without touching other layouts. */
.et-l--body .et_pb_section:has(.cm-tpl) { padding: 0 !important; background: transparent; }
.et-l--body .et_pb_row:has(.cm-tpl) {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et-l--body .et_pb_code:has(.cm-tpl) { margin-bottom: 0 !important; }
.et-l--body .et_pb_code_inner:has(.cm-tpl) { width: 100%; }
#main-content:has(.cm-tpl) { padding-top: 0 !important; }

/* ---- shared navy page band ---- */
.cm-band-page {
  background:
    radial-gradient(80% 130% at 85% -10%, rgba(51,144,214,.25) 0%, transparent 55%),
    linear-gradient(180deg, var(--cm-navy-deep) 0%, var(--cm-navy) 100%);
  padding: 64px 0 56px;
  color: #fff;
}
.cm-band-page--slim { padding: 44px 0 38px; }
.cm-band-page--tall { padding: 110px 0 120px; min-height: 62vh; display: flex; align-items: center; }
.cm-band-page__inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; width: 100%; }
.cm-band-page h1 {
  font-family: var(--cm-serif);
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  margin: 14px 0 0;
  letter-spacing: -1px;
}
.cm-band-page h1 em { font-style: normal; color: var(--cm-blue-light); }
.cm-band-page p, .cm-band-page__desc { color: #b9cde0; max-width: 640px; margin: 14px 0 0; line-height: 1.7; }
.cm-page-crumb { display: block; font-size: 12.5px; color: #7f97ac; margin-bottom: 2px; }
.cm-page-crumb a { color: #a8bccf; }
.cm-page-crumb a:hover { color: #fff; }

/* ---- issue page hero ---- */
.cm-issue-hero {
  background:
    radial-gradient(80% 130% at 85% -10%, rgba(51,144,214,.28) 0%, transparent 55%),
    radial-gradient(60% 100% at 10% 110%, rgba(232,164,95,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--cm-navy-deep) 0%, var(--cm-navy) 100%);
  padding: 64px 0 72px;
  color: #fff;
}
.cm-issue-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: center;
}
.cm-issue-hero__cover img {
  width: 320px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 90px rgba(2,8,16,.6);
  transform: rotate(-1.5deg);
  transition: transform .3s ease;
  animation: cmCoverFloat 6s ease-in-out infinite;
}
.cm-issue-hero__cover img:hover { transform: rotate(0deg) scale(1.02); }
.cm-issue-hero__copy h1 {
  font-family: var(--cm-serif);
  font-size: 54px;
  line-height: 1.05;
  color: #fff;
  margin: 18px 0 0;
  letter-spacing: -1px;
}
.cm-issue-desc { color: #b9cde0; max-width: 560px; margin-top: 16px; line-height: 1.75; }
.cm-issue-desc p { color: inherit; margin: 0 0 10px; }
.cm-issue-stats { display: flex; gap: 26px; margin-top: 26px; font-size: 13.5px; color: #8fa6ba; }
.cm-issue-stats b { color: #fff; font-size: 20px; font-family: var(--cm-serif); margin-right: 6px; }
.cm-issue-nav { display: flex; gap: 22px; margin-top: 30px; font-size: 13.5px; font-weight: 700; flex-wrap: wrap; }
.cm-issue-nav a { color: #9fc3e2; }
.cm-issue-nav a:hover { color: #fff; }

/* ---- past issues grid ---- */
.cm-issues-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  padding: 56px 0 30px;
}
.cm-issue-tile { display: block; text-align: center; }
.cm-issue-tile__cover { position: relative; display: block; }
.cm-issue-tile__cover img, .cm-issue-tile__blank {
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(6,18,32,.22);
  transition: transform .22s ease, box-shadow .22s ease;
  display: inline-block;
  background: linear-gradient(150deg, #2a4a68, #764e6b);
}
.cm-issue-tile:hover .cm-issue-tile__cover img { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 28px 60px rgba(6,18,32,.32); }
.cm-issue-tile__badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #f2c078, var(--cm-warm));
  color: #1a0e04; font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(6,18,32,.3);
}
.cm-issue-tile__name { display: block; margin-top: 16px; font-family: var(--cm-serif); font-size: 19px; color: var(--cm-navy); }
.cm-issue-tile__count { display: block; margin-top: 4px; font-size: 12px; color: var(--cm-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- article page ---- */
.cm-article-hero {
  background:
    radial-gradient(80% 130% at 80% -10%, rgba(51,144,214,.25) 0%, transparent 55%),
    linear-gradient(180deg, var(--cm-navy-deep) 0%, var(--cm-navy) 100%);
  padding: 60px 0 96px;
  color: #fff;
  text-align: center;
}
.cm-article-hero__inner { max-width: 880px; margin: 0 auto; padding: 0 28px; }
.cm-article-hero .cm-hero-kickers { justify-content: center; display: flex; gap: 10px; flex-wrap: wrap; }
.cm-article-hero .cm-card__cat { position: static; }
.cm-article-hero h1 {
  font-family: var(--cm-serif);
  font-size: 46px;
  line-height: 1.12;
  color: #fff;
  margin: 22px 0 0;
  letter-spacing: -.8px;
}
.cm-article-hero__meta { display: flex; justify-content: center; gap: 18px; margin-top: 22px; font-size: 14px; color: #8fa6ba; flex-wrap: wrap; }
.cm-article-hero__meta b { color: #fff; }
.cm-article-lead { max-width: 1000px; margin: -56px auto 0; padding: 0 28px; position: relative; z-index: 2; }
.cm-article-lead img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 70px rgba(6,18,32,.28); }

.cm-article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 28px 30px;
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--cm-body);
}
.cm-article-body h2, .cm-article-body h3, .cm-article-body h4 { font-family: var(--cm-serif); color: var(--cm-navy); line-height: 1.25; margin: 1.6em 0 .6em; }
.cm-article-body h2 { font-size: 30px; }
.cm-article-body h3 { font-size: 24px; }
.cm-article-body p { margin: 0 0 1.35em; }
.cm-article-body a { color: var(--cm-blue); text-decoration: underline; text-decoration-color: rgba(35,113,177,.35); text-underline-offset: 3px; }
.cm-article-body a:hover { text-decoration-color: var(--cm-blue); }
.cm-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.cm-article-body blockquote {
  margin: 2em 0;
  padding: 8px 0 8px 26px;
  border-left: 4px solid var(--cm-blue-light);
  font-family: var(--cm-serif);
  font-size: 21px;
  line-height: 1.6;
  color: var(--cm-navy);
}
.cm-article-body ul, .cm-article-body ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.cm-article-body li { margin-bottom: .5em; }
.cm-article-body hr { border: 0; border-top: 1px solid var(--cm-line-soft); margin: 2.4em 0; }
.cm-article-related { padding-bottom: 60px; }

/* ---- pagination ---- */
.cm-pagination { display: flex; justify-content: center; gap: 6px; padding: 44px 0 70px; flex-wrap: wrap; }
.cm-pagination .page-numbers {
  min-width: 40px; height: 40px; line-height: 40px; text-align: center;
  display: inline-block; padding: 0 8px;
  border-radius: 10px; border: 1.5px solid var(--cm-line);
  color: var(--cm-slate); font-weight: 700; font-size: 14px;
  transition: all .15s ease;
}
.cm-pagination .page-numbers.current,
.cm-pagination .page-numbers:hover { background: var(--cm-blue); border-color: var(--cm-blue); color: #fff; }
.cm-pagination .dots { border: 0; }

/* ---- empty state + search forms in bands ---- */
.cm-empty { max-width: 560px; margin: 60px auto 90px; text-align: center; color: var(--cm-muted); }
.cm-empty .search-form, .cm-404__search .search-form { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.cm-empty input[type="search"], .cm-404__search input[type="search"] {
  padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--cm-line);
  font-size: 15px; min-width: 260px;
}
.cm-404__search input[type="search"] { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; }
.cm-404__search input[type="search"]::placeholder { color: #8fa6ba; }
.cm-empty input[type="submit"], .cm-404__search input[type="submit"] {
  padding: 12px 20px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--cm-blue-light), var(--cm-blue)); color: #fff; font-weight: 700;
}

/* ---- 404 ---- */
.cm-404 .cm-band-page__inner { text-align: center; max-width: 720px; }
.cm-404__code {
  font-family: var(--cm-serif);
  font-size: 120px;
  line-height: 1;
  color: rgba(255,255,255,.12);
  display: block;
  letter-spacing: -4px;
}
.cm-404 h1 { margin-top: -30px; }
.cm-404 .cm-band-page__inner p { margin-left: auto; margin-right: auto; }
.cm-404__actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cm-btn--ghost-dark, .cm-btn--ghost.cm-btn--ghost-dark {
  color: #dcebf7 !important;
  border-color: rgba(255,255,255,.3) !important;
  background: transparent !important;
}
.cm-btn--ghost-dark:hover { border-color: #fff !important; color: #fff !important; }
.cm-404__search { margin-top: 34px; }

/* ---- standard page body ----
   Two kinds of pages land here: Elementor-built layouts (keep their own
   styling, full width) and plain classic-editor pages, which arrive with
   NO typography at all (Times fallback, unconstrained lines). Give the
   plain ones a real editorial reading column; leave Elementor alone. */
.cm-page-body { max-width: 1240px; margin: 0 auto; padding: 44px 32px 80px; }
.cm-page-body > :not([class*="elementor"]) { max-width: 880px; margin-left: auto; margin-right: auto; }
.cm-page-body {
  font-family: var(--cm-sans);
  font-size: 17px;
  line-height: 1.8;
  color: var(--cm-body);
}
.cm-page-body p { margin: 0 0 1.25em; }
.cm-page-body p:empty { display: none; }
.cm-page-body h1, .cm-page-body h2, .cm-page-body h3, .cm-page-body h4 {
  font-family: var(--cm-serif);
  color: var(--cm-navy);
  line-height: 1.25;
  margin: 1.7em auto .6em;
}
.cm-page-body > h1:first-child, .cm-page-body > h2:first-child,
.cm-page-body > h3:first-child { margin-top: .2em; }
.cm-page-body h1 { font-size: 34px; }
.cm-page-body h2 { font-size: 29px; }
.cm-page-body h3 { font-size: 23px; }
.cm-page-body h4 { font-size: 19px; }
.cm-page-body a { color: var(--cm-blue); text-decoration: underline; text-decoration-color: rgba(35,113,177,.35); text-underline-offset: 3px; }
.cm-page-body a:hover { text-decoration-color: var(--cm-blue); }
.cm-page-body ul, .cm-page-body ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.cm-page-body li { margin-bottom: .45em; }
.cm-page-body img { max-width: 100%; height: auto; border-radius: 12px; }
.cm-page-body blockquote {
  margin: 1.8em auto;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--cm-blue-light);
  font-family: var(--cm-serif);
  font-size: 19px;
  color: var(--cm-navy);
}
.cm-page-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: 15px; }
.cm-page-body th, .cm-page-body td { border: 1px solid var(--cm-line); padding: 10px 14px; text-align: left; }
.cm-page-body th { background: #eef3f9; color: var(--cm-navy); }

/* Legacy content pasted from Word carries inline
   font-family:"Times New Roman" spans that beat any stylesheet —
   force them back to the page's type system. */
.cm-page-body span, .cm-page-body font,
.cm-page-body p, .cm-page-body li, .cm-page-body td {
  font-family: inherit !important;
}
.cm-page-body h1 span, .cm-page-body h2 span,
.cm-page-body h3 span, .cm-page-body h4 span { font-family: inherit !important; }

/* Long-form Elementor TEXT widgets get a comfortable reading measure;
   other Elementor widgets (TOCs, columns, forms) keep their layout. */
.cm-page-body .elementor-widget-text-editor .elementor-widget-container {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- responsive pass ---- */
@media (max-width: 1100px) {
  .cm-issues-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .cm-issue-hero__inner { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .cm-issue-hero__cover img { width: 250px; }
  .cm-issue-stats, .cm-issue-nav { justify-content: center; }
  .cm-issue-desc { margin-left: auto; margin-right: auto; }
  .cm-band-page h1 { font-size: 38px; }
  .cm-issue-hero__copy h1 { font-size: 40px; }
  .cm-article-hero h1 { font-size: 34px; }
}
@media (max-width: 700px) {
  .cm-issues-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .cm-band-page { padding: 44px 0 40px; }
  .cm-band-page__inner, .cm-home-inner, .cm-article-hero__inner { padding-left: 20px; padding-right: 20px; }
  .cm-article-body { padding: 40px 20px 20px; font-size: 16.5px; }
  .cm-article-lead { padding: 0 14px; margin-top: -40px; }
  .cm-404__code { font-size: 84px; }
  .cm-hero-copy h1 { font-size: 32px; }
  .cm-hero-nav { justify-content: center; }
}

/* admin-only marker for shortcodes whose plugin is gone (see
   cm_strip_dead_shortcodes) — invisible to visitors, obvious to editors */
.cm-dead-sc {
  display: inline-block;
  font-family: var(--cm-sans);
  font-size: 12px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff4d6;
  border: 1px dashed #e0b040;
  border-radius: 6px;
  padding: 3px 9px;
}

/* =====================================================
   10. LONG-FORM DOCUMENT PAGES (policies, guidelines, FAQ)
   Structure is produced by cm_enhance_document(): numbered
   .cm-doc-h headings, .cm-lead definition items, and a TOC.
   ===================================================== */
.cm-doc-meta {
  font-family: var(--cm-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8fa6ba !important;
  margin-top: 12px !important;
}

/* ---- Formidable forms ----
   Every contact page is a Formidable form and nothing else, so they were
   arriving with the plugin's default styling against this design. One
   treatment covers Contact Editor, Advertising, Public Relations,
   Continuing Education, Subscriber Service and Submit an Article. */
.cm-page-body .frm_forms,
.cm-doc__main .frm_forms {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(18, 42, 68, .09);
  border-radius: 20px;
  padding: 38px 38px 30px;
  box-shadow: 0 18px 48px rgba(10, 26, 45, .08);
}
.cm-page-body .frm_form_field,
.cm-doc__main .frm_form_field { margin-bottom: 20px; }

.cm-page-body .frm_forms label,
.cm-doc__main .frm_forms label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cm-blue, #2f6fa8);
  margin-bottom: 7px;
}
.cm-page-body .frm_forms input[type="text"],
.cm-page-body .frm_forms input[type="email"],
.cm-page-body .frm_forms input[type="tel"],
.cm-page-body .frm_forms input[type="url"],
.cm-page-body .frm_forms input[type="number"],
.cm-page-body .frm_forms select,
.cm-page-body .frm_forms textarea,
.cm-doc__main .frm_forms input[type="text"],
.cm-doc__main .frm_forms input[type="email"],
.cm-doc__main .frm_forms textarea {
  width: 100%;
  padding: 13px 15px;
  font-size: 15.5px;
  color: #16283a;
  background: #f7f9fc;
  border: 1px solid rgba(18, 42, 68, .14);
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cm-page-body .frm_forms input:focus,
.cm-page-body .frm_forms textarea:focus,
.cm-page-body .frm_forms select:focus,
.cm-doc__main .frm_forms input:focus,
.cm-doc__main .frm_forms textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--cm-blue, #3390d6);
  box-shadow: 0 0 0 4px rgba(51, 144, 214, .16);
}
.cm-page-body .frm_forms textarea { min-height: 150px; resize: vertical; }

.cm-page-body .frm_forms .frm_submit,
.cm-doc__main .frm_forms .frm_submit { margin-top: 26px; }
.cm-page-body .frm_forms button,
.cm-page-body .frm_forms input[type="submit"],
.cm-doc__main .frm_forms button,
.cm-doc__main .frm_forms input[type="submit"] {
  width: auto;
  padding: 14px 34px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: linear-gradient(135deg, #3390d6, #2f6fa8);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(47, 111, 168, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cm-page-body .frm_forms button:hover,
.cm-page-body .frm_forms input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(47, 111, 168, .38);
}
.cm-page-body .frm_required { color: #d9176d; }
.cm-page-body .frm_error,
.cm-page-body .frm_error_style {
  font-size: 13.5px;
  color: #b3123f;
  background: #fdf2f5;
  border-left: 3px solid #d9176d;
  padding: 10px 14px;
  border-radius: 8px;
}
.cm-page-body .frm_message,
.cm-page-body .frm_success_style {
  background: #f1f8f3;
  border-left: 3px solid #35bca8;
  padding: 16px 18px;
  border-radius: 10px;
}
@media (max-width: 600px) {
  .cm-page-body .frm_forms { padding: 24px 20px 20px; border-radius: 16px; }
}

/* ---- Images the author floated beside the text ----
   Old pages use alignleft/alignright. Give them a shape that belongs to
   this design, and let them stack cleanly on a phone. */
.cm-page-body .alignleft,
.cm-page-body img[align="left"] {
  float: left;
  margin: 6px 30px 22px 0;
  max-width: 44%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(10, 26, 45, .14);
}
.cm-page-body .alignright,
.cm-page-body img[align="right"] {
  float: right;
  margin: 6px 0 22px 30px;
  max-width: 44%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(10, 26, 45, .14);
}
.cm-page-body .aligncenter {
  display: block;
  margin: 26px auto;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(10, 26, 45, .14);
}
@media (max-width: 680px) {
  .cm-page-body .alignleft,
  .cm-page-body .alignright,
  .cm-page-body img[align="left"],
  .cm-page-body img[align="right"] {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 auto 24px;
  }
}

/* ---- Opening paragraph of a page reads as a standfirst ---- */
.cm-page-body .cm-lead-para {
  font-size: 19.5px;
  line-height: 1.62;
  color: #33475b;
  font-weight: 400;
  margin-bottom: 26px;
}
.cm-page-body .cm-lead-para::first-letter {
  font-family: var(--cm-serif, Georgia, serif);
  font-size: 3.1em;
  line-height: .84;
  float: left;
  margin: 6px 12px 0 0;
  color: var(--cm-blue, #2f6fa8);
  font-weight: 600;
}

/* ---- People grid (advisory boards, contributors, staff) ----
   Built by cm_enhance_people() from pages that were authored as one long
   column of portraits. */
.cm-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 26px;
  margin: 8px 0 44px;
}
.cm-person {
  background: #fff;
  border: 1px solid rgba(18, 42, 68, .09);
  border-radius: 18px;
  padding: 22px 16px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(10, 26, 45, .06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cm-person:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(10, 26, 45, .13);
}
/* The portrait keeps whatever wrapper the page already had — usually an
   old grid column — so reset that before shaping it. */
.cm-person__photo {
  width: 136px !important;
  height: 136px;
  max-width: 136px !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 auto 16px !important;
  float: none !important;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #e9eff5, #dbe4ee);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(18, 42, 68, .10);
}
.cm-person__photo img,
.cm-person .cm-person__photo-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0;
}
/* Any remaining column wrapper inside a card goes full width. */
.cm-person > *:not(.cm-person__photo) {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cm-person__name {
  margin: 0 !important;
  font-family: var(--cm-serif, Georgia, 'Times New Roman', serif);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--cm-navy-deep, #12293f);
  font-weight: 600;
}
@media (max-width: 600px) {
  .cm-people { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
  .cm-person__photo { width: 108px; height: 108px; }
  .cm-person__name { font-size: 15px; }
}

/* The Easy Table of Contents plugin injects its own grey box into page
   content. It predates this design, duplicates the contents rail we build
   ourselves, and on pages like Advisory Boards it was the first thing the
   reader met — a bordered list floating beside a stray headshot. Hidden
   wherever our templates are in charge; the plugin stays installed and
   keeps working anywhere else. */
.cm-tpl .ez-toc-container,
.cm-tpl #ez-toc-container,
.cm-tpl .ez-toc-title-container,
.cm-tpl div[id^="ez-toc-container"] {
  display: none !important;
}

.cm-page-body.cm-doc {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1180px;
  padding-top: 54px;
}
.cm-doc__main { min-width: 0; max-width: 780px; }
.cm-doc__main > :not([class*="elementor"]) { max-width: none; }

/* ---- sticky contents rail ---- */
.cm-doc-toc {
  position: sticky;
  top: 130px;
  border-left: 2px solid var(--cm-line);
  padding-left: 20px;
}
.cm-doc-toc__label {
  display: block;
  font-family: var(--cm-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cm-muted);
  margin-bottom: 14px;
}
.cm-doc-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cm-doc-toc li { margin: 0 0 3px; }
.cm-doc-toc a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--cm-slate);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.cm-doc-toc a span {
  flex: none;
  font-family: var(--cm-sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--cm-blue);
  min-width: 14px;
}
.cm-doc-toc a:hover { background: #eef4fa; color: var(--cm-navy); }
.cm-doc-toc a.is-active {
  background: linear-gradient(180deg, var(--cm-blue-light), var(--cm-blue));
  color: #fff;
  box-shadow: 0 6px 16px rgba(35,113,177,.28);
}
.cm-doc-toc a.is-active span { color: #cfe6fb; }

/* ---- numbered section headings ---- */
.cm-doc__main .cm-doc-h {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--cm-serif);
  font-size: 27px;
  line-height: 1.2;
  color: var(--cm-navy);
  margin: 54px 0 22px;
  padding-top: 26px;
  border-top: 1px solid var(--cm-line-soft);
  scroll-margin-top: 150px;
}
.cm-doc__main > *:first-child.cm-doc-h,
.cm-doc__main .cm-doc-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cm-doc__main .cm-doc-h::before {
  content: attr(data-num);
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cm-sans);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(160deg, var(--cm-blue-light), var(--cm-blue-dark));
  box-shadow: 0 8px 20px rgba(35,113,177,.32);
}

/* ---- definition items ("Term. Explanation…") as cards ---- */
.cm-doc__main .cm-lead {
  background: #fff;
  border: 1px solid var(--cm-line-soft);
  border-left: 4px solid var(--cm-blue-light);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 14px;
  box-shadow: var(--cm-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-left-color .16s ease;
}
.cm-doc__main .cm-lead:hover {
  transform: translateX(3px);
  box-shadow: var(--cm-shadow-md);
  border-left-color: var(--cm-warm);
}
.cm-doc__main .cm-lead__term {
  display: block;
  font-family: var(--cm-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cm-blue-dark);
  margin-bottom: 5px;
}
/* the Times spans wrapping legacy copy must not fight the card type */
.cm-doc__main .cm-lead span { font-family: inherit !important; }

@media (max-width: 1080px) {
  .cm-page-body.cm-doc { grid-template-columns: 1fr; gap: 30px; }
  .cm-doc-toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--cm-line);
    padding: 18px 0 0;
  }
  .cm-doc-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .cm-doc-toc li { margin: 0; }
  .cm-doc-toc a { background: #eef4fa; }
  .cm-doc__main { max-width: none; }
  .cm-doc__main .cm-doc-h { font-size: 23px; }
}