/* CG Masters static conversion: intentionally small additions to original unmodified theme.
   Uses original site colors, typography, layouts, and responsive breakpoints. */

/* Basic accessibility and stability enhancements */
:focus-visible { outline: 2px solid #00e2ff; outline-offset: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { max-width: 100%; }
#logo img { height: auto; }
#utility-title { display: inline-block; }
.mobile-menu-trigger { display: inline-flex; align-items: center; }
.mobile-social { display: inline-flex; gap: 12px; padding: 20px 12px 26px; align-items: center; justify-content: center; }
.mobile-social .social-block { display: inline-block; float: none; }
.course-written-content { line-height: 24px; }
.course-written-content img, .post-content img { max-width: 100%; height: auto; }
.course-written-content video { max-width: 100%; height: auto; }
.course-written-content figure { max-width:100%; }
.post-course-content { clear: both; }
.post-course-content::after { content: ''; display: table; clear: both; }

/* Lightweight standalone gallery replacing Smart Slider. */
.cgm-gallery { width: 100%; margin: 8px auto 32px; color: #fff; }
.cgm-gallery * { box-sizing: border-box; }
.cgm-gallery-main { position: relative; background: #101316; border-radius: 5px; border: 1px solid rgba(255,255,255,.09); overflow: hidden; }
.cgm-gallery-slide { position: relative; margin: 0; width: 100%; height: clamp(260px,48vw,596px); display: flex; align-items: center; justify-content: center; }
.cgm-gallery-slide[hidden] { display: none !important; }
.cgm-gallery-full-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.cgm-gallery-full-link img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.cgm-gallery-arrow { border: 1px solid rgba(255,255,255,.23); border-radius: 50%; position: absolute; top: calc(50% - 21px); z-index: 2; width: 42px; height: 42px; color: white; background: rgba(0,0,0,.64); cursor: pointer; font-size: 17px; transition: background .18s ease, transform .18s ease; }
.cgm-gallery-arrow:hover { background: #0073b7; transform: scale(1.04); }
.cgm-gallery-arrow.is-prev { left: 14px; }
.cgm-gallery-arrow.is-next { right: 14px; }
.cgm-gallery-enlarge { text-decoration:none; display:flex; align-items:center; justify-content:center; position:absolute; top:13px; right:13px; border:0; border-radius:6px; padding:6px 11px; background:rgba(0,0,0,.65); color:white; cursor:pointer; font-size:20px; }
.cgm-gallery-enlarge:hover { background:#007bb8; }
.cgm-gallery-counter { position:absolute; left:12px; top:13px; background:rgba(0,0,0,.65); color:#ddd; border-radius:5px; font-size:12px; padding:4px 9px; pointer-events:none; }
.cgm-gallery-thumbs { display:flex; gap:7px; overflow-x:auto; padding:10px 1px 12px; scrollbar-color:#78838c #1b1e20; scrollbar-width:thin; }
.cgm-gallery-thumb { flex:0 0 100px; width:100px; height:62px; background:#1d242c; border:2px solid transparent; padding:0; border-radius:3px; opacity:.59; cursor:pointer; transition:opacity .18s,border-color .18s; overflow:hidden; }
.cgm-gallery-thumb.is-active, .cgm-gallery-thumb:hover { border-color:#00e2ff; opacity:1; }
.cgm-gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.cgm-gallery-full-link img { transition: opacity .16s ease; }

@media (max-width:1024px) {
  /* Retain the original one-column breakpoints and menu, only improve details. */
  .cgm-gallery-slide { height: clamp(220px,55vw,520px); }
  .cgm-gallery-thumbs { gap:6px; }
  .cgm-gallery-thumb { flex-basis:86px; width:86px; height:52px; }
  #header, #header-container, #utility-bar, .content-container, #footer { box-sizing: border-box; }
  .course-written-content { text-align:left; }
  .product-gallery .training-content-title { text-align:center; }
  .post-course-content img { width:auto; }
  .post-course-content > div[style*="float"] { float:none !important; }
  .post-course-content-title { float:none; }
  .post-course-content-body { text-align:left; }
  .navbar { z-index:15; }
  body:has(.navbar) #footer { padding-bottom: 88px; }
}
@media (max-width:600px) {
  .cgm-gallery-slide { height: 61vw; min-height:185px; }
  .cgm-gallery-arrow { width:34px;height:34px;top:calc(50% - 17px);font-size:14px; }
  .cgm-gallery-arrow.is-prev { left:7px; }
  .cgm-gallery-arrow.is-next { right:7px; }
  .cgm-gallery-thumb { flex-basis:70px; width:70px; height:45px; }
  .post-info-title { font-size:clamp(16px,4.5vw,25px); line-height:1.35; }
  .cgm-gallery-enlarge { top:8px;right:8px;font-size:17px;padding:4px 8px; }
  .cgm-gallery-counter { top:8px;left:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .cgm-gallery-thumb, .cgm-gallery-arrow, .cgm-gallery-full-link img, .footer-privacy-chevron { transition:none; }
}

/* Original-theme compatible privacy dropdown (closed by default). */
#footer .footer-privacy-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 2px 0; margin: 0; vertical-align: middle; color: #686f73;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: bold; line-height: 1.5;
  /* Match the original footer link baseline; inline-flex sat 1–2px lower. */
  position: relative; top: -1px;
}
#footer .footer-privacy-trigger:hover, #footer .footer-privacy-trigger:focus-visible { color: #839097; }
#footer .footer-privacy-chevron { flex: 0 0 auto; transition: transform .2s ease; }
#footer .footer-privacy-trigger[aria-expanded="true"] .footer-privacy-chevron { transform: rotate(180deg); }
#footer .footer-privacy-panel {
  box-sizing: border-box; max-width: 920px; width: calc(100% - 40px);
  margin: 0 auto; padding: 2px 0 24px;
  color: #aeb8bf; font-size: 13px; line-height: 1.7; text-align: left;
}
#footer .footer-privacy-panel[hidden] { display: none; }
#footer .footer-privacy-copy { background: #11151a; padding: 19px 24px 17px; border: 1px solid #303840; border-radius: 6px; }
#footer .footer-privacy-copy p { margin: 0 0 10px; padding: 0; line-height: 1.65; }
#footer .footer-privacy-copy p:last-child { margin-bottom: 0; }
#footer .footer-privacy-copy a { color: #00c8ef; overflow-wrap: anywhere; }
@media (max-width:600px) {
  #footer .footer-privacy-panel { width: calc(100% - 22px); padding-bottom: 92px; }
  #footer .footer-privacy-copy { padding: 17px; }
}