:root{--td_theme_color:#7f2d91}
body{color:#111827}
.td-post-category, .td_module_wrap .td-module-title a:hover, .td-header-wrap .td-header-menu-wrap{--td_theme_color:#7f2d91}
.td-module-thumb .td-post-category, .td-category, .td-cat-name{background:#7f2d91}
.td-post-content h2{border-left:4px solid #bc7b16;padding-left:12px}


body, .td-page-wrap, .td-main-content, body.article {
  }
/* keep content/cards readable */
/* ensure the custom home template content reads on beige */
body .wm-pillar, body .wm-social, body .wm-post{ background:#fff; }


/* ============ WithMagnum small header ============ */
.td-header-wrap .td-header-main-menu, .td-header-menu-wrap, .td-header-style-*.td-header-top-menu-full{
  min-height:0 !important;
}
.td-header-wrap, .td-header-menu-wrap, .td-header-top-menu-full, .td-header-main-menu,
.td-header-logo, .td-header-menu-wrap-full, .td-affix,
.td-header-style-1 .td-header-main-menu, .td-header-style-1 .td-logo-wrap, .td-logo {
  background:#ffffff !important;
  min-height:0 !important;
  height:auto !important;
  line-height:1 !important;
}
/* shrink padding */
.td-header-wrap .td-header-main-menu .td-main-menu-logo, .td-header-wrap .td-logo,
.td-header-wrap .td-header-sp-logo a { padding:0 !important; }
.td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu { padding:8px 24px !important; }

/* hide the "Home" nav item on the homepage */
body.home .td-main-menu li a[href*="/"]:first-child, .menu-item a { }
/* Newspaper nav hides Home via menu; we'll hide item with text Home */
.td-header-wrap .td-header-menu li.menu-item a{
  font-size:14px; color:#111827;
}
/* divider line */
.td-header-wrap .td-header-menu-wrap{ border-bottom:1px solid #e5e7eb !important; }

/* logo text: With (black) + Magnum (purple) - rely on site title render, style via text */
.td-logo a, .td-header-logo a, .td-main-menu-logo a, .td-logo-text-wrap{
  color:#111827 !important;
}


/* With/ Magnum logo - Magnum in purple gradient */
.td-header-wrap .td-logo a, .td-header-wrap .td-main-menu-logo a, .td-logo-text-wrap .td-logo-text,
body .td-header-wrap .td-logo-text a, .td-header-logo a{
  color:transparent !important;
  background: linear-gradient(90deg,#111827 0 30%, #7f2d91 55%, #bc7b16 100%);
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  font-weight:800;
}


/* ============ Pass 2 cleanup (2026-10-20) ============ */

/* Header logo.
   The Newspaper theme has TWO logo slots:
     .td-header-sp-logo  - the big logo row (header-style-1), holds logo-h1.php
     .td-main-menu-logo  - the small logo inside the menu bar, holds logo.php
   The theme CSS gives .td-header-sp-logo an explicit height (90px desktop /
   60px phone) and positions its image absolutely inside that box. An
   earlier version of this file added .td-header-sp-logo to a
   "height:auto !important" reset, which collapsed the row to 0px and left
   the absolutely-positioned image with no containing block, so the logo
   rendered 0x0. That selector is now removed from the reset above. Only
   the image size is adjusted here. */
.td-header-style-1 .td-header-sp-logo img{
  max-height:64px !important;
  width:auto;
}
@media (max-width:767px){
  .td-header-style-1 .td-header-sp-logo img{
    max-height:46px !important;
  }
}

/* Mobile header.
   The theme's phone breakpoint hides BOTH header slots: the big logo row
   (.td-header-sp-logo) and the in-menu logo (.td-main-menu-logo, collapsed
   to width:0; height:0 with the image absolutely positioned inside).
   It also hides #td-top-mobile-toggle, the hamburger. Net result: on a
   phone the site renders with NO logo and NO way to open the menu.
   (td-mobile-plugin is active but renders no mobile header of its own,
   and the page has zero "tdm-" classes, so it is not supplying one.)

   Rebuild the phone header from the markup that IS present: show the
   hamburger, show the in-menu logo with a real box, and keep the desktop
   menu list hidden. */
@media (max-width:767px){
  /* The theme hides the whole menu bar on phone
     (.td-header-top-menu-full { display:none }) because the Newspaper
     mobile plugin is supposed to render a separate mobile header
     (.tdm-header). That plugin is active but renders nothing here: the
     page contains zero "tdm-" classes and no .tdm-header element. So on a
     phone the site has no header bar at all, no logo and no hamburger.
     Un-hide the bar that IS in the DOM and use it as the phone header. */
  .td-header-style-1 .td-header-top-menu-full,
  .td-header-style-1 .td-header-menu-wrap-full{
    display:block !important;
  }
  .td-header-style-1 .td-header-menu-wrap{
    height:auto !important;
    min-height:0 !important;
  }
  /* Show ONE logo on phone. The theme has two rows: the big logo row
     (.td-banner-wrap-full / .td-header-sp-logo) and the menu bar
     (.td-header-menu-wrap-full) which carries the hamburger and the
     in-menu logo. Showing both renders the wordmark twice, so keep the
     menu-bar row (hamburger + logo) and drop the big logo row. */
  .td-header-style-1 .td-banner-wrap-full{
    display:none !important;
  }

  /* Hamburger back on. */
  #td-top-mobile-toggle{
    display:inline-block !important;
    position:relative !important;
    float:left !important;
    margin-right:2px !important;
  }
  #td-top-mobile-toggle a{
    display:inline-block !important;
  }
  #td-top-mobile-toggle i{
    display:inline-block !important;
    font-size:26px !important;
    width:44px !important;
    height:44px !important;
    line-height:44px !important;
    color:#111827 !important;
  }

  /* The in-menu logo: real box, image in normal flow. */
  .td-header-style-1 .td-main-menu-logo{
    display:block !important;
    float:left !important;
    width:auto !important;
    height:44px !important;
    margin:0 10px 0 0 !important;
    padding:0 !important;
  }
  .td-header-style-1 .td-main-menu-logo a{
    display:inline-block !important;
    line-height:44px !important;
    height:44px !important;
  }
  .td-header-style-1 .td-main-menu-logo img{
    position:relative !important;
    display:block !important;
    top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    margin:0 !important;
    max-height:30px !important;
    max-width:140px !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    vertical-align:middle;
  }

  /* The desktop menu list stays hidden on phone; the slide-in panel
     (#td-mobile-nav) is the navigation. */
  .td-header-style-1 .menu-main-menu-container{
    display:none !important;
  }
}

/* Tap targets. WCAG 2.5.8 wants 24x24 minimum; 40x40 is the comfortable
   target on touch. The theme's footer links and card links render at
   16-17px tall, which is too small to hit reliably. */
.wm-footer-legal a,
.wm-footer li a{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:2px 0;
}
.wm-footer-social a{
  min-height:40px;
}
@media (max-width:767px){
  .wm-footer-legal a,
  .wm-footer li a{
    min-height:40px;
  }
}

/* Footer logo: give it a sane box so it never renders as a broken image. */
.footer-logo-wrap a,
.footer-logo-wrap img{
  display:inline-block;
  max-width:200px;
  height:auto;
  line-height:0;
}

/* The theme's demo footer blocks (EDITOR PICKS / POPULAR POSTS /
   POPULAR CATEGORY) are replaced by WithMagnum's own footer columns, so
   keep the stock block titles from shouting over our own footer. */
.td-footer-bottom-full .footer-text-wrap,
.td-footer-bottom-full .footer-social-wrap{
  font-size:14px;
  line-height:1.6;
}

/* Comment count removed; keep the byline row from collapsing. */
.td-module-meta-info .td-post-author-name a{
  font-weight:700;
  color:#7f2d91;
}
.td-module-meta-info .td-post-author-name .td-author-by,
.td-module-meta-info .td-post-author-name .td-author-line{
  color:#4b5563;
}

/* Author box: bigger avatar, real name, comfortable tap target. */
.author-box-wrap{
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}
.author-box-wrap .avatar{
  width:64px;
  height:64px;
  min-width:64px;
  padding:0;
  border-radius:50%;
  object-fit:cover;
}
.author-box-wrap a[aria-label="author-photo"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  min-height:64px;
}
.author-box-wrap .td-author-name a{
  font-weight:700;
  color:#111827;
}

/* Minimum 40x40 tap target on the small meta links. */
.td-module-meta-info a,
.td-post-comments a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
}

/* Pillar cards: give the empty-state and the card grid consistent rhythm. */
.wm-post .thumb{
  background:linear-gradient(135deg,#7f2d91,#bc7b16);
}
.wm-post .cat{
  color:#7f2d91;
}

/* Legal + content pages: comfortable measure and line height. */
.td-post-content,
.td-post-content p,
.td-post-content li{
  line-height:1.75;
}
.td-post-content p{
  font-size:17px;
  margin:0 0 18px;
}
.td-post-content h2{
  font-size:26px;
  line-height:1.25;
  margin:34px 0 12px;
  scroll-margin-top:80px;
}
.td-post-content h2:first-child{
  margin-top:0;
}
.td-post-content ul,
.td-post-content ol{
  margin:0 0 20px;
  padding-left:24px;
}
.td-post-content li{
  margin-bottom:8px;
}
.td-post-content img{
  max-width:100%;
  height:auto;
  border-radius:10px;
}
.td-post-content table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 22px;
  font-size:15px;
}
.td-post-content th,
.td-post-content td{
  border:1px solid #e5e7eb;
  padding:10px 12px;
  text-align:left;
}
.td-post-content th{
  background:#f9fafb;
  font-weight:700;
}

/* Affiliate disclosure note. */
.wm-aff-note{
  margin-top:26px;
  padding:14px 16px;
  border-left:4px solid #bc7b16;
  background:#fbfaf7;
  border-radius:0 10px 10px 0;
  font-size:14px;
  line-height:1.6;
  color:#4b5563;
}

/* 404 page: the theme's 404 has no H1 at all. */
.td-404-title{
  font-size:34px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}
.td-404-sub-title{
  font-size:18px;
  color:#4b5563;
}