/* ============================================================
   SINCERE SYNDICATION — RESPONSIVE & UI FIX PACK  (v2)
   ------------------------------------------------------------
   Load LAST inside <head>, AFTER style.css and the inline
   <style> block in header.php:

       <link href="assets/css/style.css" rel="stylesheet">
       ...existing inline <style> in header.php...
       <link href="assets/css/responsive-fixes.css" rel="stylesheet">  <-- add

   Template note: FlexStart's mobile menu kicks in at <=1200px,
   so all mobile rules below use that breakpoint.
   Each block is tagged with the bug number(s) it resolves.
   ============================================================ */

:root { --ss-header-h: 82px; }

/* ------------------------------------------------------------
   [#9][#10][#12][#13]  Global horizontal-overflow guard.
   Kills the sideways scroll on Advisory / About / PMS /
   Personal Investment without hiding real content.
   ------------------------------------------------------------ */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }
.img-responsive { max-width: 100%; height: auto; }   /* dead BS3 class -> make it work */

/* ------------------------------------------------------------
   [#2]  Fixed header no longer swallows sections when you
   jump to an anchor or scroll to one.
   ------------------------------------------------------------ */
html { scroll-padding-top: var(--ss-header-h); }
section[id], [id^="panel-"], [id^="tab-"], :target {
  scroll-margin-top: var(--ss-header-h);
}

/* ------------------------------------------------------------
   [#7]  Hamburger icon vertical alignment on mobile.
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  #navbar:not(.navbar-mobile) {
    display: flex; align-items: center; justify-content: flex-end;
  }
  #navbar .mobile-nav-toggle { margin: 0; }
}

/* ------------------------------------------------------------
   [#1][#5][#8]  Navigation dropdowns - responsive, no overlap.
   ------------------------------------------------------------ */

/* Desktop: stop the hard pixel widths overlapping each other */
@media (min-width: 1201px) {
  .navbar .strategies-dropdown { width: auto !important; min-width: 240px; }
  .navbar .strategies-dropdown > li {
    flex: 1 1 auto !important; min-width: 150px !important; max-width: none !important;
  }
  .navbar .dropdown ul[style*="width: 700px"] { width: auto !important; min-width: 260px; }
}

/* Mobile menu: every sub-list stacks full-width and opens on tap.
   (Beats the inline display:flex + fixed widths, which are not
   !important, so these !important rules win.) */
@media (max-width: 1200px) {
  #navbar.navbar-mobile .dropdown ul,
  #navbar.navbar-mobile .dropdown1 ul,
  #navbar.navbar-mobile .strategies-dropdown {
    display: none !important;
    position: static !important;
    left: auto !important; right: auto !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    margin: 6px 0 6px 14px !important;
    box-shadow: none !important;
  }
  #navbar.navbar-mobile .dropdown ul.dropdown-active,
  #navbar.navbar-mobile .dropdown1 ul.dropdown-active,
  #navbar.navbar-mobile .strategies-dropdown.dropdown-active {
    display: block !important;
  }
  #navbar.navbar-mobile .strategies-dropdown > li {
    flex: none !important; width: 100% !important;
    min-width: 0 !important; max-width: 100% !important;
  }
  #navbar.navbar-mobile .strategies-dropdown > li > a { text-align: left !important; }
}

/* ------------------------------------------------------------
   [#4]  AIF button + tooltip - elegant, restrained, responsive.
   ------------------------------------------------------------ */
/* Calm the 6 stacked animations down to something professional */
.af-btn-wrapper,
.af-btn-wrapper.wiggle .af-button,
.af-button { animation: none !important; }
.af-button::before { animation: none !important; display: none; }   /* shine sweep off  */
.af-button::after  { content: none !important; }                     /* broken sparkle off */
.af-btn-wrapper::before {                                             /* soften pulse ring */
  animation: none !important;
  opacity: .3 !important;
  border-color: rgba(46,125,50,.30) !important;
}

/* Refined brand-green pill */
.af-button {
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
  box-shadow: 0 4px 14px rgba(27,94,32,.28) !important;
  transform: none !important;
  padding: 10px 20px !important;
}
.af-button:hover {
  background: linear-gradient(135deg, #338838 0%, #205e24 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(27,94,32,.35) !important;
}
.af-button-text { transform: none !important; }

/* The .af-live-dot had NO base style (invisible) - give it one */
.af-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #b9f6ca; display: inline-block; flex-shrink: 0;
  animation: ss-af-dot 2s ease-out infinite !important;
}
@keyframes ss-af-dot {
  0%   { box-shadow: 0 0 0 0 rgba(185,246,202,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(185,246,202,0); }
  100% { box-shadow: 0 0 0 0 rgba(185,246,202,0); }
}

/* Tooltip: show on hover/focus only (no auto-pop), contained on mobile */
.af-tooltip { animation: none !important; opacity: 0; transition: opacity .25s ease; }
.af-btn-wrapper:hover  .af-tooltip,
.af-btn-wrapper:focus-within .af-tooltip { opacity: 1; }
@media (max-width: 1200px) {
  .af-btn-wrapper { margin-left: 0; }
  .af-tooltip {
    left: 0 !important; right: auto !important;
    transform: none !important;
    white-space: normal !important; max-width: 220px;
  }
  .af-tooltip::before { left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .af-live-dot, .af-btn-wrapper::before { animation: none !important; }
}

/* ------------------------------------------------------------
   [#6]  Careers heading visible + elegant banner scrim.
   A soft dark gradient over inner-page banners keeps the white
   headings readable, and the opacity guard makes sure the
   Careers <h1> shows even if AOS never fires.
   ------------------------------------------------------------ */
.about-image-container { position: relative; }
.about-image-container::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
}
.careers .atitle { opacity: 1 !important; }        /* never leave it hidden */
.careers .carousel-caption { z-index: 12; }

/* ------------------------------------------------------------
   [#9]  Investment Advisory - fixed-width content images fluid.
   (Banner lives in .advisory-header, so this only touches body
   images like the 600px/700px ones.)
   ------------------------------------------------------------ */
.advisory_cnt img { max-width: 100% !important; height: auto !important; }

/* ------------------------------------------------------------
   [#11][#12]  PMS - tidy tab cards (no overlap) + tame padding.
   ------------------------------------------------------------ */
.pms-service .row[role="tablist"] { row-gap: 16px; }
.pms-service .plancnt {
  padding: 18px 12px; border-radius: 12px;
  transition: background .25s ease, box-shadow .25s ease;
}
.pms-service .plancnt:hover { background: #d8f5db; }
.pms-service .plancnt.planactive { background: #fff; box-shadow: 0 6px 20px rgba(46,125,50,.12); }
.pms-service .plancnt img { max-height: 84px; width: auto; margin: 0 auto 6px; display: block; }

/* ------------------------------------------------------------
   [#12][#13] + general: heavy p-5 / p-3 padding overflows phones.
   ------------------------------------------------------------ */
@media (max-width: 575px) {
  .p-5 { padding: 1.5rem !important; }
  .p-3 { padding: 1rem !important; }
}


/* ------------------------------------------------------------
   Social follow cards - long handle was clipping the
   Follow / Subscribe button. Let the handle wrap so the
   button stays fully visible inside the card.
   ------------------------------------------------------------ */
.social-follow-card .social-card-content { min-width: 0 !important; }
.social-follow-card .social-details { min-width: 0 !important; flex: 1 1 auto !important; }
.social-follow-card .social-handle {
  font-size: 0.85rem !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  margin: 0 !important;
}
.social-follow-card .follow-btn-wrapper { flex-shrink: 0 !important; }
.social-follow-card .follow-btn {
  padding: 12px 20px !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
}