/* =========================================================
   plugin-overrides.css
   Safe overrides for third-party CSS
   - Magnific Popup
   - Slick Slider
   Keep vendor files untouched.
========================================================= */

:root {
  --plugin-focus-ring-color: rgba(40, 84, 245, 0.28);
  --plugin-focus-ring: 0 0 0 4px var(--plugin-focus-ring-color);
  --plugin-control-size: 44px;
  --plugin-control-radius: 12px;
  --plugin-control-bg: rgba(14, 16, 24, 0.78);
  --plugin-control-bg-hover: rgba(14, 16, 24, 0.9);
  --plugin-control-fg: #ffffff;
  --plugin-overlay-bg: rgba(11, 11, 11, 0.88);
}

/* =========================================================
   Magnific Popup
========================================================= */

/* Keep the modal feeling crisp and reduce accidental layout jank */
.mfp-bg {
  background: var(--plugin-overlay-bg);
}

.mfp-wrap {
  -webkit-overflow-scrolling: touch;
}

.mfp-container {
  padding-inline: 16px;
}

/* More stable close button hit area */
button.mfp-close,
button.mfp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--plugin-control-size);
  min-height: var(--plugin-control-size);
  border-radius: var(--plugin-control-radius);
  transition:
    background-color .18s ease,
    opacity .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* Restore accessible keyboard focus */
button.mfp-close:focus,
button.mfp-arrow:focus {
  outline: none;
}

button.mfp-close:focus-visible,
button.mfp-arrow:focus-visible {
  outline: none;
  box-shadow: var(--plugin-focus-ring);
  opacity: 1;
}

button.mfp-close:hover,
button.mfp-arrow:hover {
  background: var(--plugin-control-bg);
  opacity: 1;
}

button.mfp-close:active,
button.mfp-arrow:active {
  transform: scale(.98);
}

/* Better contrast for inline-close variant */
.mfp-close-btn-in .mfp-close {
  color: var(--plugin-control-fg);
  background: var(--plugin-control-bg);
}

.mfp-close-btn-in .mfp-close:hover,
.mfp-close-btn-in .mfp-close:focus-visible {
  background: var(--plugin-control-bg-hover);
}

/* Do not let large images overflow awkwardly */
img.mfp-img {
  border-radius: 14px;
}

/* Improve iframe/video viewport on smaller screens */
.mfp-iframe-holder {
  padding-top: 32px;
  padding-bottom: 32px;
}

.mfp-iframe-holder .mfp-content {
  max-width: min(1100px, 100%);
}

.mfp-iframe-scaler iframe {
  border-radius: 14px;
}

/* =========================================================
   Slick Slider
========================================================= */

/* Prevent subtle text clipping on transformed tracks */
.slick-slider,
.slick-list,
.slick-track {
  min-width: 0;
}

/* Restore focus visibility removed by vendor CSS */
.slick-list:focus {
  outline: none;
}

.slick-list:focus-visible {
  outline: none;
  box-shadow: var(--plugin-focus-ring);
  border-radius: 12px;
}

/* More predictable slide rendering */
.slick-slide {
  height: auto;
}

.slick-slide>div {
  height: 100%;
}

/* Improve image rendering consistency */
.slick-slide img {
  max-width: 100%;
  height: auto;
}

/* Cursor only when the slider is actually draggable */
.slick-list.dragging {
  cursor: grabbing;
}

/* Prevent accidental interaction on cloned slides when overlays exist */
.slick-slide.slick-cloned a,
.slick-slide.slick-cloned button {
  pointer-events: none;
}

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {

  .mfp-bg,
  .mfp-wrap,
  .mfp-container,
  .mfp-content,
  .mfp-close,
  .mfp-arrow,
  .slick-slider,
  .slick-list,
  .slick-track,
  .slick-slide {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ================================
MOBILE MENU SVG ICON
================================ */

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1F2C;
}

.mobile-menu-toggle .menu-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

body.dark-mode .mobile-menu-toggle,
body.dark-theme .mobile-menu-toggle {
  color: #FFFFFF;
}

body.dark-mode .mobile-menu-toggle i,
body.dark-theme .mobile-menu-toggle i {
  color: #FFFFFF;
  opacity: .9;
}

/* ================================
INDEX · WORK EXPERIENCE MOBILE FIXES
================================ */

@media (max-width: 767.98px) {
  .work-experiance-card {
    height: auto;
  }

  .work-experiance-card .work-experiance-main {
    max-height: 180px;
    gap: 8px;
  }

  .work-experiance-card .work-experiance-slider {
    animation-duration: 20s !important;
  }

  .work-experiance-card .work-experiance-slider li,
  .work-experiance-slider li {
    margin-bottom: 10px;
    gap: 8px !important;
  }

  .work-experiance-card .work-experiance-slider li+li {
    margin-top: 8px;
  }

  .work-experiance-card .work-experiance-slider li .date {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 2px !important;
    padding-right: 0;
  }

  .work-experiance-card .work-experiance-slider li .date p {
    font-size: 13px;
    line-height: 1.3;
  }

  .work-experiance-card .work-experiance-slider li .info {
    gap: 10px;
  }

  .work-experiance-card .work-experiance-slider li .info .text .title {
    font-size: 15px;
    line-height: 1.3;
  }

  .work-experiance-card .work-experiance-slider li .info .text .subtitle {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* dark mode legibility */
body.dark-mode .work-experiance-card .work-experiance-slider li .date p,
body.dark-theme .work-experiance-card .work-experiance-slider li .date p {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.dark-mode .work-experiance-card .work-experiance-slider li .info .text .title,
body.dark-theme .work-experiance-card .work-experiance-slider li .info .text .title {
  color: #ffffff !important;
}

body.dark-mode .work-experiance-card .work-experiance-slider li .info .text .subtitle,
body.dark-theme .work-experiance-card .work-experiance-slider li .info .text .subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* keep icon blocks visible on dark */
body.dark-mode .work-experiance-card .work-experiance-slider li .info .icon,
body.dark-theme .work-experiance-card .work-experiance-slider li .info .icon {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ================================
WORK EXPERIENCE · MOBILE SPACING FIX
================================ */

@media (max-width:768px) {

  .work-experiance-slider li {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }

  .work-experiance-slider li+li {
    margin-top: 6px !important;
  }

  .work-experiance-slider .info {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .work-experiance-slider .info .text {
    line-height: 1.25;
  }

  .work-experiance-slider .date {
    margin-bottom: 2px !important;
  }

}

/* ================================
INDEX · WORK EXPERIENCE MOBILE SPACING FIX · FINAL
================================ */

@media (max-width: 767.98px) {

  .work-experiance-card {
    height: auto !important;
  }

  .work-experiance-card .work-experiance-main {
    max-height: 180px !important;
    gap: 0 !important;
  }

  .work-experiance-card .work-experiance-slider {
    animation-duration: 20s !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .work-experiance-card .work-experiance-slider li,
  .work-experiance-slider li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .work-experiance-card .work-experiance-slider li+li,
  .work-experiance-slider li+li {
    margin-top: 14px !important;
  }

  .work-experiance-card .work-experiance-slider li:last-child,
  .work-experiance-slider li:last-child {
    margin-bottom: 24px !important;
    padding-bottom: 6px !important;
  }

  .work-experiance-card .work-experiance-slider li .date,
  .work-experiance-slider li .date,
  .date {
    width: 100% !important;
    flex: none !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
  }

  .work-experiance-card .work-experiance-slider li .date p,
  .work-experiance-slider li .date p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .work-experiance-card .work-experiance-slider li .info,
  .work-experiance-slider li .info,
  .info {
    width: 100% !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
  }

  .work-experiance-card .work-experiance-slider li .info .icon {
    margin: 0 !important;
    flex: 0 0 32px !important;
  }

  .work-experiance-card .work-experiance-slider li .info .text {
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .work-experiance-card .work-experiance-slider li .info .text .title {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .work-experiance-card .work-experiance-slider li .info .text .subtitle,
  .work-experiance-slider li .info .text .subtitle {
    margin: 2px 0 0 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}

/* dark mode legibility */
body.dark-mode .work-experiance-card .work-experiance-slider li .date p,
body.dark-theme .work-experiance-card .work-experiance-slider li .date p {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.dark-mode .work-experiance-card .work-experiance-slider li .info .text .title,
body.dark-theme .work-experiance-card .work-experiance-slider li .info .text .title {
  color: #ffffff !important;
}

body.dark-mode .work-experiance-card .work-experiance-slider li .info .text .subtitle,
body.dark-theme .work-experiance-card .work-experiance-slider li .info .text .subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.dark-mode .work-experiance-card .work-experiance-slider li .info .icon,
body.dark-theme .work-experiance-card .work-experiance-slider li .info .icon {
  background-color: rgba(255, 255, 255, 0.06) !important;
}