/*
 Theme Name:   Hola Grace
 Description:  Hola Grace
 Author:       Tianming
 Author URI:   https://daulma.com
 Version:      1.0.0
*/

/* =========================
   Tech Doc Primary Blue
   Used by h3 / alert / emphasis
   ========================= */

/* Light mode */
[data-bs-theme="light"] .post h3,
[data-bs-theme="light"] .alert-tech strong {
  color: #2d5aa0;
}

/* Dark mode */
[data-bs-theme="dark"] .post h3,
[data-bs-theme="dark"] .alert-tech strong {
  color: #6b8fd6;
}


/* =========================
   Headings (Post)
   ========================= */

/* H2 = section heading */
.post h2{
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  padding-bottom: 0.45rem;
  background:
    linear-gradient(
      to right,
      rgba(var(--bs-warning-rgb), 0.9),
      rgba(var(--bs-warning-rgb), 0.9)
    )
    left bottom / 100% 2px no-repeat;
}

.post h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(var(--bs-warning-rgb), 0.18),
    rgba(var(--bs-warning-rgb), 0)
  );
  pointer-events: none;
}

/* Desktop & Tablet */
@media screen and (min-width: 640px){
  .post h2{
    font-size: 1.6rem;
    margin: 1.8rem 0 0.8rem;
  }
  .post h3{
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.4rem 0 0.8rem;
  }
}

/* Mobile */
@media screen and (max-width: 639.98px){
  .post h2{
    font-size: 1.4rem;
    margin: 1rem 0;
    padding-bottom: 0.5rem;
  }
  .post h3{
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.2rem 0 0.8rem;
  }
}


/* =========================
   Typography & Lists (Post)
   ========================= */

@media screen and (min-width: 640px){
  .post p{
    line-height: 1.75;
    max-width: 850px;
  }

  .post ul,
  .post ol{
    margin-left: 1.25rem;
    margin-bottom: 0.6rem;
  }

  .post ul li,
  .post ol li{
    margin-bottom: 0.7rem;
    line-height: 1.5;
  }

  .post ul li::marker,
  .post ol li::marker{
    color: currentColor;
  }
}

@media screen and (max-width: 639.98px){
  .post p{
    line-height: 1.65;
  }

  .post ul,
  .post ol{
    margin-left: 1.1rem;
    margin-bottom: 0.9rem;
  }

  .post ul li,
  .post ol li{
    margin-bottom: 0.45rem;
    line-height: 1.55;
  }

  .post ul li::marker,
  .post ol li::marker{
    color: currentColor;
  }
}


/* =========================
   Shortline Heading Utility
   ========================= */

:root{
  --heading-line-color: #6c757d;
}
:root[data-bs-theme="dark"]{
  --heading-line-color: rgba(255,255,255,0.35);
}

.heading-shortline{
  margin-top: 20px;
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--heading-line-color);
  position: relative;
}

.heading-shortline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 3px;
  background-color: #005bac;
  border-radius: 2px;
}


/* =========================
   Category Hero Image Wrapper
   ========================= */

.cat-hero-img-wrapper{
  overflow: hidden;
}

.cat-hero-img-wrapper img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 768px){
  .cat-hero-img-wrapper{
    height: 360px;
    padding: 1rem 0 !important;
  }
  .cat-hero-img-wrapper img{
    height: 100%;
    object-fit: cover;
  }
}


/* =========================
   Theme-based image swap
   ========================= */

.d-td-none{ display: inline-block; }
.d-tl-none{ display: none; }

html[data-bs-theme="dark"] .d-td-none{ display: none !important; }
html[data-bs-theme="dark"] .d-tl-none{ display: inline-block !important; }


/* =========================
   Sidebar list-group
   ========================= */

.widget-area .list-group-item a{
  color: var(--bs-secondary-color);
}
.widget-area .list-group-item a:hover{
  color: var(--bs-primary);
  text-decoration: none;
}
.widget-area .list-group-item{
  color: var(--bs-body-color);
  background-color: transparent;
  border-color: var(--bs-border-color);
}
.widget-area .list-group-item.active{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-primary-bg-subtle);
}
.widget-area .list-group-item.active a{
  color: inherit;
}


/* =========================
   Updates section UI
   ========================= */

.updates-resources-section{ position: relative; }

.hover-lift{
  transition: all 0.3s ease;
}
.hover-lift:hover{
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.list-item-hover{
  transition: background-color 0.2s ease;
  border-radius: 6px;
  margin: 0 -0.5rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.list-item-hover:hover{
  background-color: rgba(0, 0, 0, 0.02);
}

.hover-link{
  position: relative;
  transition: color 0.2s ease;
}
.hover-link:hover{
  color: var(--bs-primary) !important;
}

.icon-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

@media (max-width: 575.98px){
  .icon-box{
    width: 48px;
    height: 48px;
    padding: 0.75rem !important;
  }
  .icon-box i{
    font-size: 1rem;
  }
}


/* =========================
   Bootscore base helpers
   ========================= */

.wp-post-image{ width: 100%; }
body{
  word-break: break-word;
  overflow-x: hidden;
}
img{ height: auto; max-width: 100%; }
iframe{ max-width: 100%; }

.alignleft{ display: inline; float: left; margin-right: 1.5em; }
.alignright{ display: inline; float: right; margin-left: 1.5em; }
.aligncenter{ clear: both; display: block; margin-left: auto; margin-right: auto; }

.wp-caption{ margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"]{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text{ margin: 0.8075em 0; }
.wp-caption-text{ text-align: center; }

@media (max-width: 680px){
  .navbar img{ height: 40px; }
  .card-title{ font-size: 0.9rem !important; }
  .card-text{ display: none !important; }
  .card-body{ padding: 0.65rem 0.75rem !important; }
}

@media (min-width: 992px){
  .hero-40vh-lg{ min-height: 40vh; }
  .hero-30vh-lg{ min-height: 30vh; }
  .hero-25vh-lg{ min-height: 25vh; }
  .news-thumb{ width: 180px; height: 180px; }
}


/* =========================
   Layout tweaks
   ========================= */

.pro-post{ --bs-gutter-x: 6px; }

#product-toc ul{ font-size: .875rem; line-height: 1.4; }
#product-toc li{ margin-bottom: .35rem; }

/* Mobile: disable sticky for non-TOC sticky elements */
@media (max-width: 991.98px){
  .position-sticky:not(#product-toc){
    position: static !important;
    top: auto !important;
  }
}


/* =========================
   Alert (Tech Doc)
   ========================= */

.alert-tech{
  background: rgba(var(--bs-info-rgb), 0.12);
  border: 0;
  border-left: 4px solid rgba(var(--bs-primary-rgb), 0.85);
  border-radius: 0.5rem;
  margin-right: 10px;
  color: var(--bs-body-color);
}
.alert-tech strong{
  font-weight: 600;
}


/* =========================
   TOC – Clean Background Highlight
   Structure based on .ms-3
   ========================= */

#productTocList{
  list-style: none;
  margin: 0;
  padding: 0;
}

#productTocList li{ margin: .3rem 0; }

#productTocList a{
  display: inline-block;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
  padding: .1rem .25rem;
  border-radius: .25rem;
  color: var(--bs-secondary-color);
  font-weight: 400;
  transition: background .15s ease, color .15s ease;
}

#productTocList li:not(.ms-3) > a{
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

#productTocList li.ms-3 > a{
  font-weight: 400;
  color: var(--bs-secondary-color);
}

#productTocList a:hover{
  color: var(--bs-emphasis-color);
  background: rgba(var(--bs-primary-rgb), 0.05);
}

#productTocList a.is-active{
  color: var(--bs-emphasis-color);
  background: rgba(var(--bs-primary-rgb), 0.10);
}


/* =========================
   Tables – Tech Doc (Final)
   Scope: .post table
   - Light blue header
   - Solid separators in header
   - Compact cells + grid borders in body
   - Hover always wins over striping
   - Mobile: horizontal scroll when overflow
   ========================= */

.post table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden;
}

/* Header: light blue + solid separators */
.post table thead th{
  background: rgba(var(--bs-info-rgb), 0.35);
  color: var(--bs-emphasis-color);
  padding: .6rem .6rem;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--bs-border-color);

  /* Solid grid for header */
  border: 1px solid var(--bs-tertiary-color);
}

/* Header column separators rule (per your requirement) */
.post table thead th:first-child,
.post table thead th:last-child{
  border-right: none;
}

/* Dark mode header */
html[data-bs-theme="dark"] .post table thead th{
  background: rgba(var(--bs-info-rgb), 0.25);
  border-right: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* Body cells: compact grid */
.post table tbody td{
  padding: .3rem .4rem;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  vertical-align: top;
}

/* Zebra first, hover later so hover always works */
.post table tbody tr:nth-child(even){
  background: rgba(var(--bs-secondary-rgb), .03);
}

.post table tbody tr:hover{
  background: rgba(var(--bs-primary-rgb), .08);
}

/* Links in table */
.post table a{
  color: rgba(var(--bs-primary-rgb), .9);
  text-decoration: none;
}
.post table a:hover{
  text-decoration: underline;
}

/* =========================
   Mobile: horizontal scroll when table overflows
   No wrapper needed
   ========================= */
@media (max-width: 767.98px){

  .post table{
    display: block;                    /* allow overflow scrolling */
    width: 100%;
    max-width: 100%;

    overflow-x: auto;                  /* show horizontal scroll only when needed */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* smooth on iOS */

    white-space: nowrap;               /* prevent columns from wrapping and squeezing */
  }

  .post table th,
  .post table td{
    white-space: nowrap;
  }
}




.top-button{
  right: 5%;
  bottom: 30px;
  z-index: 2000;

  /* bootscore-like shape */
  width: 48px;
  height: 48px;
  border-radius: .5rem !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: visibility 0s linear .3s, opacity .3s;
}

.top-button.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: visibility 0s linear 0s, opacity .3s;
}



/* =========================
   Ultra-Compact Accordion Header
   ========================= */

#ctConfigAccordion .accordion-button{
    padding: .5rem;
    align-items: center;
    line-height: .8rem;
}

/* 展开状态不鼓包 */
#ctConfigAccordion .accordion-button:not(.collapsed){
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  box-shadow: none;
}

/* 去掉 focus 厚边 */
#ctConfigAccordion .accordion-button:focus{
  box-shadow: none;
}

/* 箭头缩小 */
#ctConfigAccordion .accordion-button::after{
  transform: scale(.85);
}
/* =========================
   Inline H3 (neutral style)
   ========================= */

.post h3.inline-title{
  display: inline;                     /* 不再占一整行 */
  font-size: 1rem;                     /* 和正文一致 */
  font-weight: 600;                    /* 仅加粗，不强调颜色 */
  color: var(--bs-body-color);         /* 跟普通文字一样 */
  margin: 0;
}



/* =========================
   Tech Doc Alerts (Bootstrap-based)
   - Use Bootstrap .alert for layout
   - Tech skins control color semantics
   - Dark mode uses unified text color
   ========================= */


/* =========================
   Common structure (left bar only)
   ========================= */

.alert.alert-tech-info,
.alert.alert-tech-note,
.alert.alert-tech-danger{
  border: 0;
  border-left-width: 4px;
  border-left-style: solid;
}


/* =========================
   Dark mode – common text color
   ========================= */

html[data-bs-theme="dark"] .alert.alert-tech-info,
html[data-bs-theme="dark"] .alert.alert-tech-note,
html[data-bs-theme="dark"] .alert.alert-tech-danger{
  color: rgb(161 161 161);
}

html[data-bs-theme="dark"] .alert.alert-tech-info strong,
html[data-bs-theme="dark"] .alert.alert-tech-note strong,
html[data-bs-theme="dark"] .alert.alert-tech-danger strong{
  color: rgb(211,211,211);
}


/* =========================
   Info / Compliance (Blue)
   ========================= */

/* Light */
.alert.alert-tech-info{
  background: rgba(var(--bs-info-rgb), 0.14);
  border-left-color: #2d5aa0;
  color: #1a365d;
}

.alert.alert-tech-info strong{
  color: #1a365d;
  font-weight: 700;
}

/* Dark (background + bar only) */
html[data-bs-theme="dark"] .alert.alert-tech-info{
  background: rgba(var(--bs-info-rgb), 0.10);
  border-left-color: rgba(var(--bs-info-rgb), 0.75);
}


/* =========================
   Engineering Note (Orange)
   ========================= */

/* Light */
.alert.alert-tech-note{
  background: rgba(var(--bs-warning-rgb), 0.14);
  border-left-color: rgba(var(--bs-warning-rgb), 0.9);
  color: #7a4a00;
}

.alert.alert-tech-note strong{
  color: #7a4a00;
  font-weight: 700;
}

/* Dark */
html[data-bs-theme="dark"] .alert.alert-tech-note{
  background: rgba(var(--bs-warning-rgb), 0.12);
  border-left-color: rgba(var(--bs-warning-rgb), 0.8);
}


/* =========================
   Safety Warning (Red / Danger)
   ========================= */

/* Light */
.alert.alert-tech-danger{
  background: rgba(var(--bs-danger-rgb), 0.12);
  border-left-color: rgba(var(--bs-danger-rgb), 0.9);
  color: #7a1f1f;
}

.alert.alert-tech-danger strong{
  color: #7a1f1f;
  font-weight: 700;
}

/* Dark */
html[data-bs-theme="dark"] .alert.alert-tech-danger{
  background: rgba(var(--bs-danger-rgb), 0.14);
  border-left-color: rgba(var(--bs-danger-rgb), 0.85);
}