/* =====================================================================
   vision-fixups.css  —  template-scoped overrides for the Vision template
   Loaded AFTER bs2-bs5-bridge.css. Deliberately kept OUT of the bridge copy
   so that bridge copy stays byte-identical to canonical and future canonical
   syncs remain a clean diff (Gotchas: "Bridge copy drifts from canonical").

   Created 2026-08-06 during the Skill 33 / Skill 29 J6-native run.
   ===================================================================== */


/* ---------------------------------------------------------------------
   CS-PATCH: vision-container-width          ⭐ THE WIDTH KNOB ⭐
   ---------------------------------------------------------------------
   Vision's donor is a BS2 *default* 940 grid (its own stock bootstrap.css +
   responsive.css both cap .container at 940 @>=1200), NOT the 1170 variant the
   canonical bridge's `container-1170-cap` assumes. With the donor BS2 stripped,
   the bridge widened the boxed layout 940 -> 1170, which breaks Phase 13 parity
   against the pinned live donor.

   PASS 1               = 940  -> dimensional parity with the live donor.
   PASS 2  (this value) = 1440 -> Tim's modern-width target (2026-08-06).
   Change the ONE value below to switch passes; everything else is percentage
   based and rescales with it.

   Below 1200 the bridge's own cascade already matches live exactly
   (940 @980-1199, 724 @768-979, fluid <768), so only >=1200 is overridden.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container:not(.container-fluid) { max-width: 1440px !important; }
}


/* ---------------------------------------------------------------------
   CS-PATCH: vision-readmore-btn-reset
   ---------------------------------------------------------------------
   Joomla core blog layouts emit  <a class="btn btn-secondary">  for Read more.
   The live donor never loads BS5, so template.css's `p.readmore a {font-weight:bold}`
   plus the generic link colour render it as a plain 12px bold ORANGE TEXT LINK.
   Once BS5 CSS is loaded (Phase 5), `.btn-secondary` paints a solid grey pill
   (rgb(108,117,125), white text, 16px, 6px radius) — measured on stage.

   NOTE this is NOT the `bs2-btn-base` gradient emulation from the Gotchas: that
   restores BS2's grey-gradient default button, which is right for donors that
   showed one. Vision's donor shows a bare text link, so the correct fix is to
   strip BS5's button chrome and let the donor's own rules paint.

   Measured live target: bg transparent · colour rgb(161,53,0) · 12px · 700 ·
   padding 0 · radius 0 · no border · no text-shadow.
   --------------------------------------------------------------------- */
.blog .readmore a.btn,
.blog-featured .readmore a.btn,
.item-page .readmore a.btn,
p.readmore a.btn,
p.readmore a.btn-secondary {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  color: #a13500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  vertical-align: baseline !important;
}
p.readmore a.btn:hover,
p.readmore a.btn-secondary:hover {
  background-color: transparent !important;
  color: #a13500 !important;
  text-decoration: underline;
}


/* ---------------------------------------------------------------------
   CS-PATCH: vision-mobile-body-gutter
   ---------------------------------------------------------------------
   The canonical bridge ships `bs2-mobile-body-padding` as
   `@media(max-width:767px){ :where(body){padding-left:20px;padding-right:20px} }`.
   `:where()` has ZERO specificity by design (so template rules can win) — but
   Vision's reset.css zeroes padding on a huge element list INCLUDING body, so
   the bridge rule always loses and the phone layout goes full-bleed:
   measured stage {w:375,x:0} vs live {w:335,x:20}.

   Re-assert it at real specificity for this template only.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body { padding-left: 20px !important; padding-right: 20px !important; }
}


/* ---------------------------------------------------------------------
   CS-PATCH: vision-fa6-social-sizing
   ---------------------------------------------------------------------
   Phase 10 converted #social-links from the fixed 225x50 sprite
   (images/social-sprite.png) to Font Awesome 6 <i> glyphs, because a
   baked sprite cannot represent the 13-network modern set.

   The canonical bridge's `fa6-social-reset` already neutralises
   text-indent:-9999px and the sprite background via
   `#social-links li a:has(i)`. nav.css does NOT use !important, and the
   bridge selector is more specific (id+2 type+:has(type)) AND loads
   later, so the reset wins on its own -- verified on stage.

   What the bridge canNOT know is this donor's box metrics: nav.css sizes
   each anchor 25x25 with negative side margins for the sprite cells, and
   the bridge's generic `line-height:38px` overshoots a 25px-tall box, so
   the glyph baseline falls outside the anchor. Re-assert donor-correct
   metrics here, per template.
   --------------------------------------------------------------------- */
#social-links li a:has(i) {
  width: 25px;
  height: 25px;
  margin-left: 0;
  margin-right: 2px;
  line-height: 25px;
  color: #2f2f2f;
}
#social-links li a:has(i) i {
  font-size: 15px;
  line-height: 25px;
  display: inline-block;
  width: 25px;
  text-align: center;
}

/* =====================================================================
   CS-PATCH: vision-mobile-header-ux
   ---------------------------------------------------------------------
   Skill 33 ⛔ Mobile-header UX standard (Master Checklist, locked 2026-07-15),
   composed from scratch for Vision 2026-08-06. The donor ships NONE of it —
   no hamburger, no drawer, no secondary toggle, no search control; at <=600
   it merely swapped the nav for a selectnav <select>. Pattern ported from
   Energize (2026-08-04), the closest precedent in this brand.

   Chrome is injected by js/cs-mobile.js as BODY-LEVEL children: a panel
   nested inside the donor header would inherit that header's stacking
   context and land UNDER the scrim (Skill 33 item 8 — Novel / Omega).

   EVERYTHING here is hidden by default and re-enabled only inside
   @media (max-width: 767px), then re-killed with !important at >=768.
   The base hides carry !important on purpose: the chip is a <span> inside
   a menu anchor and donor descendant selectors outrank a bare class on
   element count (recorded desktop chip leak, Novel 2026-08-03).
   ===================================================================== */

#cs-mobile-header, #cs-utility-row, #cs-scrim, #cs-drawer,
#cs-search-panel, #cs-mobile-menu2, #cs-social-panel,
.cs-ham, .mobile-menu-indicator, .cs-search-submit { display: none !important; }

.cs-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Desktop dropdown affordance (Skill 33 "Desktop dropdown affordance").
   A parent item gets a CARET, never the mobile +. Top level points DOWN
   (the panel drops below); second level and deeper point RIGHT, because
   these superfish submenus fly out sideways — a down arrow there misleads.
   pointer-events:none so it can never be mistaken for a control.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  #menu ul.menu-nav li.parent > a { padding-right: 24px; }
  #menu ul.menu-nav li.parent > a::after {
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    content: "\f107";                       /* fa-angle-down  — top level  */
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; line-height: 1; opacity: .75;
    pointer-events: none;
  }
  #menu ul.menu-nav ul li.parent > a::after {
    content: "\f105";                       /* fa-angle-right — 2nd+ level */
    right: 10px;
  }
  /* the donor rewrites padding on hover/active — keep the caret's gutter */
  #menu .menu-nav li.parent.active > a,
  #menu .menu-nav li.parent:hover > a,
  #menu .menu-nav li.parent.sfHover > a { padding-right: 23px; }
  #menu .menu-nav li li.parent.active > a,
  #menu .menu-nav li li.parent:hover > a,
  #menu .menu-nav li li.parent.sfHover > a { padding-right: 24px; }
}

/* =====================================================================
   MOBILE  (<= 767)
   ===================================================================== */
@media (max-width: 767px) {

  /* -- donor mobile chrome the standard replaces ---------------------- */
  select.selectnav, .selectnav { display: none !important; }
  #log-panel { display: none !important; }
  #top-nav-handler { padding-top: 0 !important; }
  #top { height: auto !important; }

  /* -- logo row: real logo left, BIG hamburger right ------------------ */
  /* The donor's own #site-name-handler already IS the logo band — the PRESET
     paints it (`#site-name-handler {background-color:#a13500}` in style1..6) and
     the wordmark png is white type designed for it. So keep that element and hang
     the hamburger off it, rather than rebuilding a bar the logo cannot be read on.
     (First pass moved only #sn-position out and the white wordmark landed on the
     #f0f0f0 body — visible in the 375px screenshot, which is why one was taken.) */
  #cs-mobile-header { position: relative; display: block !important; z-index: 1046; }
  #cs-logo-slot { display: block; }
  #cs-logo-slot #site-name-handler {
    display: block !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
  }
  #cs-logo-slot #sn-position { padding-right: 60px !important; }
  #cs-logo-slot #sn-position img { max-width: 100%; height: auto; }

  #cs-menu-toggle {
    display: flex !important;
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; align-items: center; justify-content: center;
    background: transparent !important; background-image: none !important;
    border: 0; padding: 0; cursor: pointer; z-index: 1060;
  }
  .cs-burger-bars { display: block; width: 38px; height: 30px; position: relative; }
  .cs-burger-bars > span {
    display: block; position: absolute; left: 0; width: 100%; height: 5px;
    border-radius: 3px; background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: transform .2s ease, opacity .2s ease;
  }
  .cs-burger-bars > span:nth-child(1) { top: 0; }
  .cs-burger-bars > span:nth-child(2) { top: 12px; }
  .cs-burger-bars > span:nth-child(3) { top: 24px; }
  body.cs-menu-open #cs-menu-toggle .cs-burger-bars > span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  body.cs-menu-open #cs-menu-toggle .cs-burger-bars > span:nth-child(2) { opacity: 0; }
  body.cs-menu-open #cs-menu-toggle .cs-burger-bars > span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

  /* -- ONE centred utility row ---------------------------------------
     order: [section menu][account][register][search][social]
     Every control is the SAME 44x44 box on the SAME midline, so the
     harness's spread<=3 / centre+-12 / touch>=40 assertions hold by
     construction rather than by luck.                                  */
  #cs-utility-row {
    display: flex !important; align-items: center; justify-content: center;
    gap: 10px; padding: 8px 0; margin-bottom: 4px;
    border-top: 1px solid rgba(0,0,0,.10);
    border-bottom: 1px solid rgba(0,0,0,.10);
    position: relative; z-index: 1046; background: transparent;
  }
  /* both stay ABOVE the scrim so the controls that opened a panel can also
     close it (Novel 2026-08-03: only the big hamburger stayed reachable) */
  body.cs-panel-open #cs-mobile-header,
  body.cs-panel-open #cs-utility-row { background: #ffffff; }
  /* body carries the donor's 20px mobile gutter, so an opaque row would still
     show the scrim in the two side channels. Paint them with offset shadows —
     shadows do not affect layout, so the CLOSED header keeps its donor inset. */
  body.cs-panel-open #cs-utility-row { box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff; }
  #cs-utility-row > a, #cs-utility-row > button {
    display: flex !important; align-items: center; justify-content: center;
    box-sizing: border-box;
    width: 44px; height: 44px; flex: 0 0 44px; padding: 0; margin: 0;
    border: 1px solid rgba(0,0,0,.18); border-radius: 8px;
    /* CS-FIXUP-REMOVED 2026-08-18 (canonical .64): `background: #fff !important`
       was deleted from this declaration. At specificity (0,1,1) and loaded AFTER
       the bridge it outranked canonical's `#cs-register { background:
       var(--cs-accent) !important }` (0,1,0) and painted the register chip white
       on white - measured 1.00:1 at 375px, a blank chip. Canonical's own
       NON-important `#cs-utility-row > button, #cs-utility-row > a
       { background: #fff }` still paints the four non-accent chips white, so
       removing this changes ONLY the chips canonical deliberately accents.
       Result matches Acceler8, which carries no fixups file. */
    background-image: none !important;
    /* CS-FIXUP-REMOVED 2026-08-18 (canonical .65): `color: #444 !important`
       was deleted from this declaration, for the same reason .64 deleted
       `background: #fff !important` from it. At (0,1,1) and loaded after the
       bridge it outranked canonical's `#cs-register { color: #fff !important }`
       (0,1,0). That was harmless only because the glyph was held by
       `#cs-register > i`; the next single-id accent rule canonical added would
       have re-broken it. Canonical .65 now owns chip ink outright - a #333
       floor for the plain chips and a luminance-derived --cs-accent-ink for the
       accented ones - so this layer must stop reaching into the property.
       This is not a retreat from the fixups layer, which legitimately loads
       after the bridge (Skill 26); it is this RULE giving up a declaration that
       was never its business. Everything else here - geometry, border, radius,
       cursor - is genuinely Creativa/Vision-specific and stays. */
    cursor: pointer;
    text-decoration: none !important;
  }
  #cs-utility-row i { font-size: 20px; line-height: 1; }
  #cs-menu2-toggle .cs-burger-small { display: block; width: 22px; height: 16px; position: relative; }
  #cs-menu2-toggle .cs-burger-small > span {
    display: block; position: absolute; left: 0; width: 100%; height: 3px;
    border-radius: 2px; background: #444;
  }
  #cs-menu2-toggle .cs-burger-small > span:nth-child(1) { top: 0; }
  #cs-menu2-toggle .cs-burger-small > span:nth-child(2) { top: 6.5px; }
  #cs-menu2-toggle .cs-burger-small > span:nth-child(3) { top: 13px; }
  body.cs-secondary-open #cs-menu2-toggle,
  body.cs-search-open    #cs-search-toggle,
  body.cs-social-open    #cs-social-toggle {
    background: #e4e4e4 !important; border-color: rgba(0,0,0,.45);
  }

  /* -- scrim ---------------------------------------------------------- */
  body.cs-panel-open #cs-scrim {
    display: block !important; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.45); z-index: 1044;
  }

  /* -- drawer --------------------------------------------------------- */
  #cs-drawer {
    display: block !important; position: fixed;
    top: var(--cs-drawer-top, 130px); left: 0; right: 0; bottom: auto;
    max-height: calc(100vh - var(--cs-drawer-top, 130px));
    background: #fff; z-index: 1050; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
    transform: translateX(-100%); transition: transform .25s ease;
    padding: 0 0 8px; visibility: hidden;
  }
  body.cs-menu-open #cs-drawer { transform: none; visibility: visible; }

  /* the donor's <=600 rule kills the whole nav — the drawer needs it back */
  #cs-drawer #menu, #cs-drawer #menu-handler,
  #cs-drawer #nav, #cs-drawer .menu-nav { display: block !important; }

  /* Release superfish geometry. `.menu-nav ul {position:absolute; top:-999em}`
     SURVIVES display:block, so the revealed panel paints outside the drawer
     and reads as "the chip does nothing" (Presence 2026-07-30). Force every
     nested ul back into flow. NOTE the span selector deliberately excludes
     .mobile-menu-indicator — a blanket `a span` (0-1-2 + an id) outranks the
     chip's own rule and would flatten the chip (Novel 2026-08-03). */
  #cs-drawer #menu, #cs-drawer #menu-handler,
  #cs-drawer .menu-nav, #cs-drawer .menu-nav ul,
  #cs-drawer .menu-nav li, #cs-drawer .menu-nav a,
  #cs-drawer .menu-nav a > span.link-no-image {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    bottom: auto !important;
    float: none !important; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; height: auto !important; min-height: 0 !important;
    margin: 0 !important; line-height: 1.45 !important;
    background-image: none !important; box-shadow: none !important;
    opacity: 1 !important; text-align: left !important; overflow: visible !important;
    text-indent: 0 !important; border: 0 !important; text-shadow: none !important;
  }
  #cs-drawer #menu, #cs-drawer #menu-handler { padding: 0 !important; background: #fff !important; }
  #cs-drawer .menu-nav, #cs-drawer .menu-nav ul { list-style: none; padding: 0 !important; }
  /* the li is the row; the ANCHOR is the chip's positioning context (a chip
     hung off the li would sit at 50% of the whole EXPANDED branch) */
  #cs-drawer .menu-nav li {
    position: relative !important; padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  #cs-drawer .menu-nav li.clear { display: none !important; }
  /* .columns-N hard-codes li widths for the desktop mega panel */
  #cs-drawer .menu-nav ul.columns-2 > li,
  #cs-drawer .menu-nav ul.columns-3 > li,
  #cs-drawer .menu-nav ul.columns-4 > li,
  #cs-drawer .menu-nav ul.columns-5 > li { width: 100% !important; }
  #cs-drawer .menu-nav a {
    position: relative !important;
    display: block !important;
    padding: 14px 60px 14px 20px !important;   /* room for the 34px chip */
    color: #333 !important; font-size: 16px; font-weight: 600;
    text-decoration: none !important; background: transparent !important;
  }
  #cs-drawer .menu-nav ul { display: none; background: #f7f7f7 !important; }
  #cs-drawer .menu-nav li.expanded > ul { display: block !important; }
  #cs-drawer .menu-nav ul a { padding-left: 36px !important; font-size: 15px; font-weight: 400; }
  #cs-drawer .menu-nav ul ul a { padding-left: 52px !important; }
  #cs-drawer .menu-nav ul ul ul a { padding-left: 68px !important; }
  /* The ACTIVE item's anchor is forced to #ffffff !important by the donor
     (measured rgb(255,255,255) on the drawer's "Home" row) — white on white,
     the exact Omega "drawer showed empty rows" defect. Beat it on element
     count, not by hoping !important is enough, and cover the inner span too. */
  #cs-drawer #menu .menu-nav li.active > a,
  #cs-drawer #menu .menu-nav li.active > a > span,
  #cs-drawer #menu .menu-nav li.current > a,
  #cs-drawer #menu .menu-nav li.current > a > span,
  #cs-drawer #menu .menu-nav li > a.active,
  #cs-drawer #menu .menu-nav li > a.active > span { color: #333333 !important; }
  #cs-drawer .menu-nav li.active > a { font-weight: 800; }

  /* the donor's OWN responsive-menu markup (a#menupanel + .rm-line spans +
     div.panel1 > div.menupanel) rides inside #menu-handler and rendered as a
     stray 17px row with a lone "x" glyph at the foot of the drawer */
  #cs-drawer #menupanel, #cs-drawer .panel1,
  #cs-drawer .menupanel, #cs-drawer .rm-line { display: none !important; }

  /* -- the codified Phase 5m indicator chip ---------------------------- */
  #cs-drawer .menu-nav a > .mobile-menu-indicator,
  #cs-mobile-menu2 a > .mobile-menu-indicator {
    display: flex !important; align-items: center; justify-content: center;
    position: absolute !important; right: 15px !important;
    top: 50% !important; left: auto !important; bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 34px !important; height: 34px !important; max-width: 34px !important;
    padding: 0 !important; margin: 0 !important;
    border: 1.5px solid #cccccc !important; border-radius: 50% !important;
    background: rgba(255,255,255,.85) !important; color: #666666 !important;
    font-size: 14px; line-height: 1 !important; cursor: pointer; z-index: 2;
    text-indent: 0 !important; overflow: visible !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  #cs-drawer li.expanded > a > .mobile-menu-indicator,
  #cs-mobile-menu2 li.expanded > a > .mobile-menu-indicator {
    border-color: #333333 !important; color: #333333 !important;
    background: rgba(255,255,255,.98) !important;
  }
  .mobile-menu-indicator > i.fas { font-size: 14px; line-height: 1; color: inherit; }

  /* -- full-width panels directly under the header --------------------- */
  #cs-search-panel, #cs-mobile-menu2, #cs-social-panel {
    position: fixed; top: var(--cs-drawer-top, 130px); left: 0; right: 0;
    max-height: 70vh; overflow-y: auto;
    background: #fff; z-index: 1055; padding: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,.2);
  }
  body.cs-search-open    #cs-search-panel { display: block !important; }
  body.cs-secondary-open #cs-mobile-menu2 { display: block !important; }
  body.cs-social-open    #cs-social-panel { display: block !important; }

  /* search: field fills the row, compact 44px magnifier submit inline right.
     The submit is MOBILE-ONLY (Tim, 2026-08-03 — desktop has Enter). */
  #cs-search-panel #search-position { padding: 0 !important; text-align: left !important; }
  #cs-search-panel form { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
  #cs-search-panel form > .awesomplete,
  #cs-search-panel form > input[type="text"],
  #cs-search-panel form > input[type="search"] { flex: 1 1 auto; min-width: 0; }
  #cs-search-panel input[type="text"], #cs-search-panel input[type="search"] {
    box-sizing: border-box; width: 100% !important; max-width: none !important;
    height: 44px; font-size: 16px; padding: 0 12px; margin: 0;
    border: 1px solid rgba(0,0,0,.25); border-radius: 6px;
  }
  .cs-search-submit {
    display: flex !important; flex: 0 0 44px; width: 44px; height: 44px;
    align-items: center; justify-content: center; padding: 0;
    border: 0; border-radius: 6px; background-image: none; cursor: pointer;
  }
  .cs-search-submit i { font-size: 16px; }

  /* secondary panel: the REAL sidebar module, full width, same accordion */
  #cs-mobile-menu2 .moduletable_menu { padding: 0 !important; }
  /* the donor paints .moduletable_menu h3 as a dark slab; keep the slab, fix
     the type colour so it is not grey-on-charcoal */
  #cs-mobile-menu2 h3 {
    margin: 0 0 8px; padding: 8px 10px; font-size: 13px;
    text-transform: uppercase; color: #ffffff !important;
  }
  #cs-mobile-menu2 ul { list-style: none; margin: 0; padding: 0; }
  #cs-mobile-menu2 li {
    position: relative !important; float: none !important; width: auto !important;
    padding: 0 !important; border-bottom: 1px solid rgba(0,0,0,.07) !important;
    background: none !important;
  }
  #cs-mobile-menu2 li a {
    position: relative !important;
    display: block !important; padding: 13px 60px 13px 4px !important;
    margin: 0 !important; color: #333 !important; font-size: 16px;
    text-decoration: none !important; background: none !important;
  }
  #cs-mobile-menu2 li a > span.link-no-image { background: none !important; padding-left: 0 !important; }
  #cs-mobile-menu2 ul ul { display: none; background: #f7f7f7 !important; }
  #cs-mobile-menu2 li.expanded > ul { display: block !important; }
  #cs-mobile-menu2 ul ul a { padding-left: 24px !important; font-size: 15px; }
  #cs-mobile-menu2 ul ul ul a { padding-left: 40px !important; }

  /* social panel: the donor's 25px sprite anchors at touch size */
  #cs-social-panel #social { float: none !important; padding: 0 !important; }
  #cs-social-panel #social-links {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    height: auto !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important;
  }
  #cs-social-panel #social-links li { display: block !important; }
  #cs-social-panel #social-links li a,
  #cs-social-panel #social-links li a:has(i) {
    display: flex !important; align-items: center; justify-content: center;
    box-sizing: border-box;
    width: 44px !important; height: 44px !important; line-height: 1 !important;
    margin: 0 !important; border-radius: 50%; opacity: 1 !important;
    background-color: #444 !important; background-image: none !important;
    color: #fff !important; text-indent: 0 !important; float: none !important;
  }
  #cs-social-panel #social-links li a i {
    font-size: 20px !important; width: auto !important; line-height: 1 !important;
    color: #fff !important;
  }

  /* item 6: hover-only slideshow arrows are dead on touch */
  .camera_prev, .camera_next { opacity: 1 !important; }
}

/* =====================================================================
   DESKTOP re-kill. Belt and braces: the base rules above already carry
   !important; this makes the intent explicit and survives a future
   reordering of this file. The chip hide is repeated at several
   specificities because donor `#menu ... a span` selectors outrank a
   bare `.mobile-menu-indicator` on element count.
   ===================================================================== */
@media (min-width: 768px) {
  #cs-mobile-header, #cs-utility-row, #cs-scrim, #cs-drawer,
  #cs-search-panel, #cs-mobile-menu2, #cs-social-panel,
  .cs-ham, .cs-search-submit { display: none !important; }
  #menu ul.menu-nav li a > span.mobile-menu-indicator,
  #menu .mobile-menu-indicator,
  #nav .mobile-menu-indicator,
  .moduletable_menu .mobile-menu-indicator,
  .mobile-menu-indicator { display: none !important; }
}
/* /CS-PATCH: vision-mobile-header-ux */





/* ---------------------------------------------------------------------
   CS-PATCH: vision-logpanel-content-box
   ---------------------------------------------------------------------
   BS2 sized most boxes as CONTENT-box, so layout.css's
       #log-panel { height:16px; padding:10px 0 0; overflow:hidden }
   rendered a 26px box (16 content + 10 padding) on the live donor.
   Bootstrap 5 applies `box-sizing:border-box` to *, *::before, *::after
   universally, which makes that SAME rule a 16px TOTAL box - the padded
   content then falls outside and `overflow:hidden` clips it.

   Measured: live #log-panel h=26 (Login Form / Register legible) vs
   stage h=16 with both anchors at y=40..56 against a box ending at y=46,
   i.e. the header's Login/Register links rendered as an illegible sliver.

   General class of bug: any legacy rule combining an explicit px height
   WITH padding AND overflow:hidden. A scan of this template's CSS found
   exactly one other candidate (#currency input.button) and it has
   padding:0, so it is unaffected.
   --------------------------------------------------------------------- */
#log-panel { box-sizing: content-box; }


/* ---------------------------------------------------------------------
   CS-PATCH: vision-container-no-padding
   ---------------------------------------------------------------------
   BS2's .container had NO horizontal padding; BS5 gives it 12px each side
   (--bs-gutter-x/2). Vision nests   .container > #text-background(7px pad)
   > .row > #theme-width > ... , so those 24px are stolen from EVERY
   descendant of the boxed layout.

   Measured at 375 (mobile context) BEFORE this patch:
       stage  .container 335 -> #text-background 311 -> slideshow 297
       live   .container 335 -> #text-background 335 -> slideshow 321
   i.e. the whole content column was 24px narrower than the donor on every
   phone, and proportionally short at desktop too.

   This is the documented BS2/BS5 pair fix. The mobile side gutter is NOT
   provided by container padding here -- it comes from body{padding:0 20px}
   (CS-PATCH: vision-mobile-body-gutter above), which is the real BS2
   mechanism, so zeroing container padding does not lose the phone gutter.
   The harness's mobile-container check measures the container's border-box
   width (335) and is unaffected.
   --------------------------------------------------------------------- */
.container:not(.container-fluid) { padding-left: 0; padding-right: 0; }


/* ---------------------------------------------------------------------
   CS-PATCH: vision-logo-white-border          (Tim, 2026-08-06)
   ---------------------------------------------------------------------
   The logo block sits immediately left of the menu bar, and the active
   menu item paints a solid accent-coloured tab. With both in the same
   accent colour the logo box visually runs into that tab when Home (or
   any first item) is current. A white rule separates them.

   IMPLEMENTATION NOTE: every preset (style1-6) ALREADY declares this
   border -- it is just painted the same colour as the background, so it
   is invisible:
       style1 #a13500 · style2 #709a00 · style3 #00629a
       style4 #00919a · style5 #b06800 · style6 #9e0056
   So only the border COLOUR is overridden here. Deliberately NOT setting
   background-color: hardcoding style1's #a13500 (as in the original
   snippet) would paint the logo box orange under all six themes and
   break the Theme param.

   Desktop only: at <=767 the Phase 9 mobile chrome relocates
   #site-name-handler into #cs-mobile-header, where the band is
   full-bleed and a border would read as a stray hairline.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* !important is required, not lazy: presets/style<N>.css is linked AFTER
     vision-fixups.css in <head> (deliberately, so template overrides can never
     clobber the customer's chosen Theme colours), and it sets
     `border: 1px solid <accent>` with no !important of its own. An earlier
     sheet cannot win on order, and raising specificity here would be the
     fragile fix the Gotchas warn about. Scoped to one declaration. */
  #site-name-handler { border-color: #ffffff !important; }
}