/* =========================================================
   bs5-compat.css  (for Bootstrap 5.3.8)
   Purpose: keep Bootstrap 4 markup pixel-perfect in BS5
   - Lock container width to BS4 at >= 1400px (prevents layout widening)
   - Restore BS4 utility classes removed/renamed in BS5 (text-left/right, pl-0, ml-2, sr-only, etc.)
   - Make BS4-style <ol><li> carousel indicators look/behave like BS4 (no 1/2/3 numbers)
   NOTE: Pair with assets/js/bs5-compat.js (already in assets一次性正確.zip)
   ========================================================= */

/* === 0) Match Bootstrap 4 gutter system (pixel-perfect grid spacing) ===
   BS4 default: 30px total gutter (15px left + 15px right per column)
   BS5 default: 1.5rem (24px) which makes grids look tighter.
*/
:root{ --bs-gutter-x: 30px; }

/* === 1) Prevent BS5 container from widening on very large screens (match BS4) === */
@media (min-width: 1400px){
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
    max-width: 1140px !important; /* BS4 xl container width */
  }
}

/* === 2) BS4 utility class compatibility === */
.text-left{ text-align: left !important; }
.text-right{ text-align: right !important; }
.text-justify{ text-align: justify !important; }

.float-left{ float: left !important; }
.float-right{ float: right !important; }

.pl-0{ padding-left: 0 !important; }
.pr-0{ padding-right: 0 !important; }
.pt-0{ padding-top: 0 !important; }
.pb-0{ padding-bottom: 0 !important; }

.ml-0{ margin-left: 0 !important; }
.ml-1{ margin-left: .25rem !important; }
.ml-2{ margin-left: .5rem !important; }
.ml-3{ margin-left: 1rem !important; }

.mr-0{ margin-right: 0 !important; }
.mr-1{ margin-right: .25rem !important; }
.mr-2{ margin-right: .5rem !important; }
.mr-3{ margin-right: 1rem !important; }

/* BS4 screen-reader-only utility */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only-focusable:active, .sr-only-focusable:focus{
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}


/* === 2.5) BS4 .btn-block compatibility (removed in BS5) === */
.btn-block{
  display: block !important;
  width: 100% !important;
}
.btn-block + .btn-block{
  margin-top: .5rem !important;
}

/* === 3) Carousel indicators (BS4 <ol><li>) pixel-perfect patch for BS5 ===
   Goal: match Bootstrap 4 indicator bar geometry (size/position) 100%.
   Uses BS4's ::before/::after hit-area method (does NOT change element box height).
   Supports markup:
   <ol class="carousel-indicators">
     <li data-target="#mycarousel" data-slide-to="0" class="active ptop"></li>
     ...
   </ol>
*/
.carousel ol.carousel-indicators,
ol.carousel-indicators{
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 10px !important;      /* BS4 default */
  z-index: 15 !important;

  margin-left: 15% !important;  /* BS4 default */
  margin-right: 15% !important; /* BS4 default */

  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important; /* neutralize BS5 align-items:center */
}

/* Hard kill for markers (prevents 1/2/3 in some browsers) */
ol.carousel-indicators::marker,
ol.carousel-indicators li::marker{
  content: "" !important;
}

.carousel ol.carousel-indicators li,
ol.carousel-indicators li{
  position: relative !important;      /* BS4 */
  flex: 0 1 auto !important;

  width: 30px !important;             /* BS4 bar width */
  height: 3px !important;             /* BS4 bar height */

  margin-left: 3px !important;
  margin-right: 3px !important;

  text-indent: -999px !important;
  cursor: pointer !important;

  background-color: rgba(255,255,255,.5) !important;
  background-clip: padding-box !important;

  opacity: .5 !important;
  transition: opacity .6s ease !important;

  /* keep padding controlled by your .ptop class if present */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/* BS4 hit area without changing box height */
.carousel ol.carousel-indicators li::before,
ol.carousel-indicators li::before{
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  display: inline-block !important;
  width: 100% !important;
  height: 10px !important;
  content: "" !important;
}
.carousel ol.carousel-indicators li::after,
ol.carousel-indicators li::after{
  position: absolute !important;
  bottom: -10px !important;
  left: 0 !important;
  display: inline-block !important;
  width: 100% !important;
  height: 10px !important;
  content: "" !important;
}

.carousel ol.carousel-indicators li.active,
ol.carousel-indicators li.active{
  background-color: #fff !important;
  opacity: 1 !important;
}

/* Your original thickness booster class (from s4.css) */
ol.carousel-indicators li.ptop{
  padding-top: .2rem !important;
}

/* =========================================================
   BS4 spacing utility compatibility (missing in BS5)
   Adds legacy: pl-*/pr-*/ml-*/mr-* that BS4 used heavily.
   ========================================================= */

   BS4 spacing utility compatibility (missing in BS5)
   Adds legacy: pl-*/pr-*/ml-*/mr-* that BS4 used heavily.
   ========================================================= */
.pl-0{padding-left:0!important;}
.pl-1{padding-left:.25rem!important;}
.pl-2{padding-left:.5rem!important;}
.pl-3{padding-left:1rem!important;}
.pl-4{padding-left:1.5rem!important;}
.pl-5{padding-left:3rem!important;}

.pr-0{padding-right:0!important;}
.pr-1{padding-right:.25rem!important;}
.pr-2{padding-right:.5rem!important;}
.pr-3{padding-right:1rem!important;}
.pr-4{padding-right:1.5rem!important;}
.pr-5{padding-right:3rem!important;}

.ml-0{margin-left:0!important;}
.ml-1{margin-left:.25rem!important;}
.ml-2{margin-left:.5rem!important;}
.ml-3{margin-left:1rem!important;}
.ml-4{margin-left:1.5rem!important;}
.ml-5{margin-left:3rem!important;}

.mr-0{margin-right:0!important;}
.mr-1{margin-right:.25rem!important;}
.mr-2{margin-right:.5rem!important;}
.mr-3{margin-right:1rem!important;}
.mr-4{margin-right:1.5rem!important;}
.mr-5{margin-right:3rem!important;}

/* =========================================================
   BS4 embed-responsive compatibility (Bootstrap 5 removed it)
   Used by: <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item"></iframe></div>
   ========================================================= */
.embed-responsive{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.embed-responsive::before{
  display: block !important;
  content: "" !important;
}
.embed-responsive-21by9::before{ padding-top: 42.857143% !important; }
.embed-responsive-16by9::before{ padding-top: 56.25% !important; }
.embed-responsive-4by3::before{ padding-top: 75% !important; }
.embed-responsive-1by1::before{ padding-top: 100% !important; }

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}


/* === 9) Bootstrap 4 card-deck compatibility (BS5 removed card-deck) ===
   Many legacy pages (contactus/download) use .card-deck.
   IMPORTANT: Some pages also add grid width classes (e.g., col-md-6/3/3) and m-0/p-0.
   So we MUST NOT force equal-width flex on every card, and we MUST allow .m-0 to override margins.
*/
.card-deck{
  display:flex;
  flex-flow:row wrap;
  margin-right:-15px;
  margin-left:-15px;
}
.card-deck > .card{
  /* Keep BS4-like gutters, but allow .m-0 to override (so no !important) */
  margin-right:15px;
  margin-left:15px;
  margin-bottom:30px;
  display:flex;
  flex-direction:column;
}
/* Equal-width cards only when no grid width class is present */
@media (min-width: 576px){
  .card-deck > .card:not([class*="col-"]){
    flex: 1 0 0%;
    max-width: 100%;
  }
  .card-deck > .card[class*="col-"]{
    flex: 0 0 auto;
  }
}
@media (max-width: 575.98px){
  .card-deck > .card{
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* === 10) Bootstrap 3/4 legacy col-xs-12 helper (some pages still include it) === */
.col-xs-12{ flex:0 0 auto !important; width:100% !important; }

/* === 11) Legacy form helpers (optional, keeps BS3 class names harmless) === */
.control-label{ margin-bottom:0.5rem; }


/* =========================================================
   Footer "相關推薦" icon grid: restore tile background + border
   (BS4 visual parity / prevent border/background disappearing)
   Scope: footer related-recommendation table cells only
   ========================================================= */
footer .foot-txt ~ .row table.table.p-0 td.p-1{
  background-color: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(201,233,255,.22) !important;
}

/* === Legacy floating dropdown-content should be clickable above overlays === */
.dropdown .dropdown-content{ z-index: 1056; }


/* =========================================================
   FAQ accordion link style: keep Q text black & no underline
   (BS4 visual parity)
   Applies to <a class="accordion-toggle"> wrappers used in faq.html
   ========================================================= */
.accordion .card > a.accordion-toggle,
.accordion .card > a.accordion-toggle:hover,
.accordion .card > a.accordion-toggle:focus,
.accordion .card > a.accordion-toggle:active{
  color: inherit !important;
  text-decoration: none !important;
}
.accordion .card > a.accordion-toggle *{
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================================
   main.html - 南亞經營理念（文字 + YouTube）pixel-perfect patch
   Reason: legacy markup uses <p class="col-md-7 embed-responsive ..."> float:right;
   Ensure BS4-like wrap, width and video box sizing under BS5.
   ========================================================= */
.w-100.myheader .sub-content > p.embed-responsive{
  float: right !important;
  width: 58.33333333% !important;     /* col-md-7 */
  max-width: 58.33333333% !important;
  margin: 0 !important;
}
@media (max-width: 767.98px){
  .w-100.myheader .sub-content > p.embed-responsive{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Keep the legacy inner padding that the original BS4 page shows */
.w-100.myheader .sub-content > p.embed-responsive > iframe.embed-responsive-item.p-4{
  padding: 1.5rem !important; /* BS4/BS5 p-4 */
}

/* =========================================================
   Navbar dropdown positioning fix (BS4 hover behavior)
   Problem: In Bootstrap 5, .dropdown-menu has NO top/left unless [data-bs-popper] is present.
   Your legacy CSS (s4.css) shows menus on :hover via display:block (without JS), so menus can "jump up".
   Fix: restore BS4-like top:100%/left:0 for navbar dropdown menus (desktop expand-md and up),
   without affecting Popper-based positioning when JS is used.
   ========================================================= */
@media (min-width: 768px){
  /* Only for the main navbar dropdown menus */
  .navbar-expand-md .navbar-nav > .dropdown > .dropdown-menu{
    top: 100%;
    left: 0;
  }
}