/*-----------------------------------*\
  #style.css
\*-----------------------------------*/



/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  /* gradient */

  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(240, 1%, 25%) 3%,
    hsl(0, 0%, 19%) 97%
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right,
    hsla(240, 1%, 18%, 0.251) 0%,
    hsla(240, 2%, 11%, 0) 100%
  ), hsl(240, 2%, 13%);

  --bg-gradient-jet-reversed: linear-gradient(
    to bottom left,
    hsla(240, 1%, 18%, 0.251) 0%,
    hsla(240, 2%, 11%, 0) 100%
  ), hsl(240, 2%, 13%);
  --bg-gradient-yellow-1: linear-gradient(
    to bottom right,
    hsl(45, 100%, 71%) 0%,
    hsla(36, 100%, 69%, 0) 50%
  );
  --bg-gradient-yellow-2: linear-gradient(
    135deg,
    hsla(45, 100%, 71%, 0.251) 0%,
    hsla(35, 100%, 68%, 0) 59.86%/[lan ]
  ), hsl(240, 2%, 13%);
  --border-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(0, 0%, 25%) 0%,
    hsla(0, 0%, 25%, 0) 50%
  );

  --border-gradient-onyx-reversed: linear-gradient(
    to bottom left,
    hsl(0, 0%, 25%) 0%,
    hsla(0, 0%, 25%, 0) 50%
  );
  --text-gradient-yellow: linear-gradient(
    to right,
    hsl(45, 100%, 72%),
    hwb(35 36% 0%)
  );

  /* solid */

  --jet: hsl(0, 0%, 22%);
  --card-bg: hsl(0, 0%, 15%);
  --onyx: hsl(240, 1%, 17%);
  --eerie-black-1: hsl(240, 2%, 13%);
  --eerie-black-2: hsl(240, 2%, 12%);
  --smoky-black: hsl(0, 0%, 7%);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 0%, 98%);
  --orange-yellow-crayola: hsl(45, 100%, 72%);
  --vegas-gold: hsl(45, 54%, 58%);
  --light-gray: hsl(0, 0%, 84%);
  --light-gray-70: hsla(0, 0%, 84%, 0.7);
  --bittersweet-shimmer: hsl(0, 43%, 51%);

  /**
   * typography
   */

  /* font-family */
  --ff-poppins: 'Poppins', sans-serif;

  /* font-size */
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;

  /* font-weight */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;

  /**
   * shadow
   */

  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;

}


/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a { text-decoration: none; }

li { list-style: none; }

img, ion-icon, a, button, time, span { display: block; }

button {
  font: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

input, textarea {
  display: block;
  width: 100%;
  background: none;
  font: inherit;
}

::selection {
  background: var(--orange-yellow-crayola);
  color: var(--smoky-black);
}

:focus { outline-color: var(--orange-yellow-crayola); }

html { font-family: var(--ff-poppins); }

body { background: var(--smoky-black); }


/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.sidebar,
article {
  background: var(--eerie-black-2);
  border: 1px solid var(--jet);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.separator {
  width: 100%;
  height: 1px;
  background: var(--jet);
  margin: 16px 0;
}

.icon-box {
  position: relative;
  background: var(--border-gradient-onyx);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--orange-yellow-crayola);
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--eerie-black-1);
  border-radius: inherit;
  z-index: -1;
}

.icon-box ion-icon { --ionicon-stroke-width: 35px; }

.icon-box ion-icon.checkmark-active { font-size: calc(1em + 2px); }

article { display: none; }

article.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--white-2);
  text-transform: capitalize;
}

.h2 { font-size: var(--fs-1); }

.h3 { font-size: var(--fs-2); }

.h4 { font-size: var(--fs-4); }

.h5 {
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
}

.article-title {
  position: relative;
  padding-bottom: 7px;
}


/* ======================================== */
/* Highlighted section/page titles          */
/* ======================================== */

.highlighted-title {
  color: var(--orange-yellow-crayola);
  background: var(--onyx);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  width: max-content;
  font-size: var(--fs-2);
  font-weight: var(--fw-500);
  padding: 5px 12px;
  margin-top: 15px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
}

/* Override .article-title media-query styles (font-weight, padding-bottom)
   so h2 highlighted titles match h3 section titles visually.
   Specificity 0,2,0 beats the single-class .article-title rules. */
.article-title.highlighted-title {
  font-weight: var(--fw-500);
  padding-bottom: 5px;
  margin-bottom: 15px !important;
}

.highlighted-title ion-icon {
  color: var(--orange-yellow-crayola);
  font-size: 18px;
}

.has-scrollbar::-webkit-scrollbar {
  width: 5px; /* for vertical scrollbar */
  height: 5px; /* for horizontal scrollbar */
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--orange-yellow-crayola);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button { width: 20px; }

.content-card {
  position: relative;
  background: var(--jet);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}

.content-card::before,
.about-card::before,
.service-item::before,
.clients-item::before,
.timeline-card::before,
.blog-post-item > a::before,
.project-item > a::before {
  box-shadow: 0 0 0 1px var(--jet);
  transition: filter var(--transition-1), box-shadow var(--transition-1);
}

.content-card:hover::before,
.about-card:hover::before,
.service-item:hover::before,
.clients-item:hover::before,
.timeline-card:hover::before,
.blog-post-item > a:hover::before,
.project-item > a:hover::before {
  box-shadow: 0 0 0 2px var(--jet);
  filter: brightness(1.1);
}

/* General Modal Styles — <dialog> with native ::backdrop scrim */
.modal-container {
  /* Reset <dialog> UA defaults; fill the viewport and center content */
  position: fixed;
  inset: 0;
  margin: 0;
  border: none;
  padding: 20px; /* Base padding for modals */
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  overflow: hidden;
  /* display is controlled by [open] / :not([open]) below */
}

/* Hidden when not open (beats UA dialog { display: none } AND our own
   base rule's potential display value) */
.modal-container:not([open]) {
  display: none;
}

/* When open, use flex to center content (beats UA dialog[open] { display: block }) */
.modal-container[open] {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container::-webkit-scrollbar { display: none; }

/* ::backdrop — the scrim: covers the viewport, dims + blurs the page,
   and intercepts pointer events outside the dialog */
.modal-container::backdrop {
  background: hsl(0, 0%, 5%);
  backdrop-filter: blur(15px);
  opacity: 0;
  transition: opacity var(--transition-1);
}

/* Backdrop fades in when .show is applied after showModal() */
.modal-container.show::backdrop {
  opacity: 0.8;
}

/* Base style for modal boxes — hidden until .show is applied */
.testimonials-modal,
.software-modal,
.video-modal,
.blog-modal {
  background: var(--eerie-black-2);
  position: relative;
  padding: 15px;
  margin: 15px 12px; /* For small screens */
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  transform: scale(1.2);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 1;
  width: 100%; /* Ensure it takes up available space within max-width */
}

/* Modal content fades in together with the backdrop */
.modal-container.show .testimonials-modal,
.modal-container.show .software-modal,
.modal-container.show .video-modal,
.modal-container.show .blog-modal {
  transform: scale(1);
  opacity: 1;
}

/* Reversible fade-out: remove .show then call close() after transition */
.modal-container:not(.show)::backdrop { opacity: 0; }
.modal-container:not(.show) .testimonials-modal,
.modal-container:not(.show) .software-modal,
.modal-container:not(.show) .video-modal,
.modal-container:not(.show) .blog-modal {
  transform: scale(1.2);
  opacity: 0;
}

/* Base style for modal close buttons */
.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--onyx);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-2);
  font-size: 18px;
  opacity: 0.7;
  transition: var(--transition-1);
}

/* Project video modal close button: 15px from the modal's inner upper edge
   (inherited from the base .modal-close-btn), with 15px of breathing room
   above the video (padding-top = 15 + 32 + 15 = 62px). z-index: 2 beats
   .video-modal-content, which follows it in the DOM and would otherwise
   paint on top. Scoped so testimonial/blog modals are unaffected. */
.video-modal-close-btn {
  z-index: 2;
}

.modal-close-btn:hover,
.modal-close-btn:focus { opacity: 1; }

.modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }

/*-----------------------------------*\
  #VIDEO MODAL TAGS
\*-----------------------------------*/
/* Project tags rendered at the bottom of the video modal only (never on
   the projects grid). Populated by renderVideoModalTags() in script.js. */
.video-modal-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  width: 100%;
}

.video-modal-tag {
  background: var(--jet);
  border: 1px solid var(--jet);
  border-radius: 8px;
  color: var(--light-gray-70);
  padding: 4px 12px;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.6;
  transition: var(--transition-1);
}

.video-modal-tag:hover,
.video-modal-tag:focus {
  background: var(--card-bg);
  border-color: var(--orange-yellow-crayola);
  color: var(--white-2);
}


/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

main {
  margin: 15px 25px;
  margin-bottom: 75px;
  min-width: 259px;
}


/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
  margin-bottom: 15px;
  overflow: visible; /* Changed from hidden to visible for potential content overflow */
}

.sidebar.active .sidebar-info_more { /* Control visibility of more info */
  max-height: 300px; /* Adjust as needed */
  opacity: 1;
  visibility: visible;
}

.sidebar-info {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}

.avatar-box {
  background: var(--bg-gradient-onyx);
  border-radius: 20px;
}

.avatar-box img {
  border-radius: 20px;
}

.avatar-box img {
  border-radius: 20px;
}

.info-content .name {
  color: var(--white-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-500);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
}

.info-content .title {
  color: var(--white-1);
  background: var(--onyx);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
  width: max-content;
  padding: 3px 12px;
  border-radius: 8px;
}

.info-content .title:not(:last-child) {
  margin-bottom: 6px;
}

.info_more-btn { /* Sidebar toggle button */
  background: var(--bg-gradient-jet);
  position: absolute;
  top: -15px;
  right: -15px;
  border-radius: 0 15px;
  font-size: 13px;
  color: var(--orange-yellow-crayola);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  box-shadow: var(--shadow-1);
  transition: var(--transition-1);
  z-index: 1;
}

.info_more-btn:hover,
.info_more-btn:focus {
  background: var(--bg-gradient-yellow-1);
  color: var(--smoky-black);
}

.info_more-btn span { display: none; } /* Hide text on small screens */
.info_more-btn ion-icon { transform: rotate(0); transition: transform var(--transition-1); }
.sidebar.active .info_more-btn ion-icon { transform: rotate(0.5turn); }


.sidebar-info_more {
  opacity: 0; /* Initially hidden */
  visibility: hidden;
  max-height: 0; /* Initially hidden */
  overflow: hidden;
  transition: opacity var(--transition-2), max-height var(--transition-2), visibility var(--transition-2);
}


.contacts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-item {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-info {
  max-width: calc(100% - 46px);
  width: calc(100% - 46px);
}

.contact-title {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-info :is(.contact-link, time, address) {
  color: var(--white-2);
  font-size: var(--fs-7);
}

.contact-info .contact-link {
  font-style: italic;
  text-decoration: underline;
}

.contact-info address { font-style: normal; }

/* Make .contact-link buttons look like the existing links */
.contact-info button.contact-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-weight: var(--fw-300);
  font-size: var(--fs-7);
  cursor: pointer;
  text-align: left;
}

.contact-info button.contact-link:hover,
.contact-info a.contact-link:hover {
  color: var(--orange-yellow-crayola);
}

/* Copy-toast notification */
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--jet);
  color: var(--white-2);
  padding: 12px 24px;
  border-radius: 14px;
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
  box-shadow: var(--shadow-2);
}

.copy-toast.show {
  opacity: 1;
}

.social-list {
  margin-top: 16px; /* Add space between the line and the icons */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-bottom: 4px;
  padding-left: 7px;
}

.social-item .social-link {
  color: var(--light-gray-70);
  font-size: 18px;
}


.social-item .social-link:hover { color: var(--light-gray); }


/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: hsla(240, 1%, 17%, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--jet);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-2);
  z-index: 5;
}

.navbar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.navbar-link {
  color: var(--light-gray);
  font-size: var(--fs-8);
  padding: 20px 7px;
  transition: color var(--transition-1);
  cursor: pointer;
}

.navbar-link:hover,
.navbar-link:focus { color: var(--light-gray-70); }

.navbar-link.active { color: var(--orange-yellow-crayola); }

.navbar-link.highlight {
  background: var(--jet);
  border-radius: 8px;
  padding: 10px 12px;
}


/*-----------------------------------*\
  #HOME
\*-----------------------------------*/

.home .article-title { margin-bottom: 15px; }

.home-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

.home-text p { margin-bottom: 15px; }

.home-text .about-card {
  position: relative;
  background: var(--jet);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  max-width: 1000px;
  margin: 25px auto 0;
  z-index: 1;
}

.home-text .about-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}


/**
 * #service
 */

.service { margin-bottom: 35px; }

.service-title { margin-bottom: 20px; }

.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service-item {
  position: relative;
  background: var(--jet);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  z-index: 1;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}

.service-icon-box { margin-bottom: 10px; }

.service-icon-box img { margin: auto; }

.service-content-box { text-align: center; }

.service-item-title { margin-bottom: 7px; }

.service-item-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-3);
  line-height: 1.6;
}


/**
 * #testimonials
 */

.testimonials {
  margin-bottom: 30px;
}

.testimonials-title {
  margin-bottom: 20px;
}

.testimonials-carousel {
  position: relative;
}

/* Hide native scrollbar but keep the track scrollable */
.carousel-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 13.5px;

  margin: 0;
  padding: 25px 15px;
  padding-bottom: 10px;
  list-style: none;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Fade dissolve at left/right edges so clipped peeking card edges blend softly */
  mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-slide {
  scroll-snap-align: center;
  flex: 0 0 539px;
  width: 539px;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.carousel-slide .content-card {
  padding: 15px;
  cursor: pointer;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  height: 192.5px;
  min-height: 192.5px;

  box-sizing: border-box;

  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* Active (centered) card: 5% bigger, sharp, full opacity */
.carousel-slide--active .content-card {
  transform: scale(1.05);
  opacity: 1;
  filter: blur(0);
  position: relative;
  z-index: 2;
}

/* Non-active cards: faded + blurred */
.carousel-slide:not(.carousel-slide--active) .content-card {
  opacity: 0.26;
  filter: blur(2px);
}

.testimonials-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.testimonials-avatar-box {
  position: static;
  transform: none;
  width: 48px;
  height: 48px;
  margin: 0;

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

.testimonials-avatar-box img {
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--light-gray-70);
}

.testimonials-item-title {
  margin-bottom: 4px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonials-item-position {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonials-quote {
  font-style: italic;
  font-weight: 300;
  color: var(--light-gray);
  font-size: var(--fs-7);
  line-height: 1.4;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;
}

.carousel-slide .testimonials-text {
  display: none;
}

/* Carousel controls */

.carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}


.carousel-dots {
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: var(--jet);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.carousel-dot.active {
  width: 20px;
  background: var(--orange-yellow-crayola);
}


/**
 * #testimonials-modal
 */

.testimonials-modal {
  /* Specific styles if different from base .modal */
  max-width: 500px; /* Example max-width */
}

.modal-avatar-box {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;

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

.modal-avatar-box img {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--light-gray-70);
}

.modal-img-wrapper > img { display: none; } /* Testimonial specific quote icon */

.modal-title { margin-bottom: 4px; }

.modal-content time {
  font-size: var(--fs-6);
  color: var(--light-gray-70);
  font-weight: var(--fw-300);
  margin-bottom: 10px;
}

.modal-content p {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}


/**
 * #video-modal
 */
.video-modal {
  max-width: 800px; /* Wider for video content */
  padding: 62px 62px 30px; /* top/sides 62px (top holds close button + 15px gap to video); bottom 30px so the tags don't over-stretch the modal */
  position: relative; /* Required for absolute positioning of close button */
}

.video-modal-content {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: #000; /* Black background for the video area */
  border-radius: 8px; /* Optional: rounded corners for video area */
}

.video-modal-content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/**
 * #faqs
 */

.faqs { margin-bottom: 15px; }

.faqs-title { margin-bottom: 20px; }

.faqs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faqs-item {
  position: relative;
  background: var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  z-index: 1;
}

.faqs-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}

.faqs-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}

.faqs-question:hover,
.faqs-question:focus {
  color: var(--orange-yellow-crayola);
}

.faqs-icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--white-2);
  transition: transform var(--transition-1), color var(--transition-1);
}

.faqs-question:hover .faqs-icon,
.faqs-question:focus .faqs-icon {
  color: var(--orange-yellow-crayola);
}

.faqs-question[aria-expanded="true"] .faqs-icon {
  transform: rotate(180deg);
  color: var(--orange-yellow-crayola);
}

.faqs-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  opacity: 0;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.faqs-answer.show {
  padding: 15px 20px;
  opacity: 1;
}

.faqs-answer p {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

.faqs-answer p:last-child {
  margin-bottom: 0;
}

/**
 * #clients (Softwares)
 */

.clients { margin-bottom: 15px; } /* Section title is "Softwares" in HTML */
.clients-title { margin-bottom: 20px; }


.clients-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 15px;
}

.clients-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--jet);
  padding: 10px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  cursor: default;
  transition: var(--transition-1);
  z-index: 1;
  aspect-ratio: 1 / 1;
}

.clients-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}

.clients-item img {
  max-width: 50px; /* Fixed icon size, independent of box size */
  max-height: 50px;
  width: 50px;
  height: 50px;
  object-fit: contain; /* Ensure logos fit well */
  filter: grayscale(1);
  transition: var(--transition-1);
}

.clients-item:hover img { filter: grayscale(0); }

@media (max-width: 767px) {
  .clients-list { grid-template-columns: repeat(4, 1fr); }
  .clients-item {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    aspect-ratio: unset;
  }
  .clients-item::before { background: none; box-shadow: none; }
  .clients-item img { filter: none; }
}


/*-----------------------------------*\
   #RESUME (redesigned: centered alternating timeline)
\*-----------------------------------*/

.article-title { margin-bottom: 30px; }


/* === Resume: centered alternating timeline (redesigned per screenshot ref) === */

.resume-timeline-section {
  margin-bottom: 40px;
}

/* Old title-wrapper structure replaced by highlighted-title badges; preserved for reference. */


.resume-timeline-section .highlighted-title {
  margin: 15px auto 25px;
}

/* Centered vertical line */

.resume-timeline-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.resume-timeline-list::before {
  content: "";
  position: absolute;
  top: -15px;
  bottom: -15px;
  left: 50%;
  width: 1px;
  background: var(--jet);
  transform: translateX(-50%);
}

/* Alternating left/right rows — even rows flip so text/card swap sides */

.timeline-row {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  justify-content: center;
  align-items: stretch;
  gap: 45px;
}

.timeline-row:nth-child(even) {
  flex-direction: row-reverse;
}

/* Content blocks are 30% width. The 15px gap between center line and box is
   achieved via gap: 30px on .timeline-row (15px on each side of center).
   Padding on the block provides internal content breathing room.
   align-items: stretch on parent ensures left/right blocks share equal height. */

.timeline-block {
  width: 36%;
  flex-shrink: 0;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Yellow dot on the center line */

.timeline-row::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-gradient-yellow);
  box-shadow: 0 0 0 4px var(--jet);
  transform: translateX(-50%);
  z-index: 2;
}

/* Text block: date + role, aligned toward the center line */

.timeline-text-block {
  display: flex;
  flex-direction: column;
}

/* Text spans never shrink — they keep their natural height */
.timeline-text-block .timeline-date,
.timeline-text-block .timeline-role,
.timeline-text-block .timeline-meta {
  flex-shrink: 0;
}

/* Timeline placeholder images fill the dead space below the text content.
   flex: 1 1 0 grows the image to fill all remaining vertical space.
   min-height sets the floor so the image "rules" the row height.
   object-fit: cover crops the source to whatever height is allocated. */
.timeline-text-block img {
  width: 100%;
  flex: 1 1 0;
  min-height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  filter: grayscale(1);
  transition: var(--transition-1);
}

/* Reveal full color + slight zoom when hovering the image itself */
.timeline-text-block img:hover {
  filter: grayscale(0);
  transform: scale(1.02);
}

.timeline-row:nth-child(odd) .timeline-text-block {
  align-items: flex-end;
}

.timeline-row:nth-child(even) .timeline-text-block {
  align-items: flex-start;
}

/* Experience: swap left/right — text on right for odd rows, left for even rows */

.experience .timeline-row {
  flex-direction: row-reverse;
}

.experience .timeline-row:nth-child(even) {
  flex-direction: row;
}

.experience .timeline-row:nth-child(odd) .timeline-text-block {
  align-items: flex-start;
}

.experience .timeline-row:nth-child(even) .timeline-text-block {
  align-items: flex-end;
}

/* Education: swap left/right to continue flow from experience (last experience card is on right) */

.education .timeline-row {
  flex-direction: row-reverse;
}

.education .timeline-row:nth-child(even) {
  flex-direction: row;
}

.education .timeline-row:nth-child(odd) .timeline-text-block {
  align-items: flex-start;
}

.education .timeline-row:nth-child(even) .timeline-text-block {
  align-items: flex-end;
}

.timeline-date {
  color: var(--light-gray);
  font-weight: var(--fw-400);
  font-size: var(--fs-7);
  line-height: 1.6;
}

.timeline-role {
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  line-height: 1.3;
  margin-top: 4px;
}

.timeline-meta {
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-400);
  line-height: 1.6;
  margin-top: 2px;
}

/* Card block: dark rounded card with icon + title + description + link */

.timeline-card {
  position: relative;
  background: var(--jet);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  z-index: 1;
}

.timeline-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}

/* Left-side cards — edge is now solid var(--jet), same as all other cards */
.education .timeline-row:nth-child(odd) .timeline-card,
.experience .timeline-row:nth-child(odd) .timeline-card {
  background: var(--jet);
}

/* Left-side cards use same solid background as right-side cards */
.education .timeline-row:nth-child(odd) .timeline-card::before,
.experience .timeline-row:nth-child(odd) .timeline-card::before {
  background: var(--card-bg);
}

/* Card icons removed — content blocks kept minimal */


.timeline-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-card-title {
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  line-height: 1.3;
  margin: 0;
}

.timeline-card-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
  margin: 0;
}

/* Learn More links removed — keeping cards minimal */


/* Responsive: collapse centered timeline to single column on mobile */

@media (max-width: 767px) {

  .resume-timeline-list::before {
    left: 20px;
  }

  .timeline-row {
    flex-direction: column !important;
    gap: 0;
  }

   .timeline-block {
    width: 100%;
    padding: 0 0 0 40px;
    box-sizing: border-box;
  }

  .timeline-row::after {
    left: 20px;
  }

  .timeline-text-block {
    align-items: flex-start !important;
  }

  .timeline-date,
  .timeline-role,
  .timeline-card {
    width: 100%;
  }

  .timeline-card {
    padding: 20px;
  }

  /* Mobile: row is flex-direction: column (stacked), so flex-grow collapses.
     Give the image a fixed max-height instead of stretching. */
  .timeline-text-block img {
    min-height: 0;
    flex: none;
    height: auto;
    max-height: 200px;
    width: 100%;
  }

}

/**
 * skills
 */

.skills-title { margin-bottom: 20px; }

.skills-list { padding: 20px; }


.skills-item:not(:last-child) { margin-bottom: 15px; }

.skill .title-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.skill .title-wrapper data {
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-300);
}

.skill-progress-bg {
  background: var(--jet);
  width: 100%;
  height: 8px;
  border-radius: 10px;
}

.skill-progress-fill {
  background: var(--text-gradient-yellow);
  height: 100%;
  border-radius: inherit;
}


/*-----------------------------------*\
  #PROJECTS
\*-----------------------------------*/

.projects .article-title {
  margin-bottom: 15px; /* Adds space below the projects title */
}

@media (min-width: 580px) {
  .projects .article-title {
    margin-bottom: 20px; /* Increases space on larger screens */
  }
}


.filter-list { display: none; } /* Hidden on small screens, shown on larger */

.filter-select-box {
  position: relative;
  margin-bottom: 25px;
}

.filter-select {
  background: var(--eerie-black-2);
  color: var(--light-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.filter-select-box.active .filter-select .select-icon { /* Corrected selector for icon rotation */
  transform: rotate(0.5turn);
}

.select-list {
  background: var(--eerie-black-2);
  position: absolute;
  top: calc(100% + 6px);
  width: 100%;
  padding: 6px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.15s ease-in-out;
}

.filter-select-box.active .select-list { /* Corrected selector for dropdown visibility */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.select-item button {
  background: var(--onyx); /* Changed to match title badge background */
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  text-transform: capitalize;
  width: 100%;
  padding: 8px 10px; /* Kept original padding for mobile layout */
  margin-bottom: 5px; /* Extra space between filters in the mobile dropdown */
  border-radius: 8px;
  transition: background var(--transition-1), color var(--transition-1); /* Added transition */
}

.select-item button:hover {
  background: hsl(240, 2%, 20%); /* Darken background on hover */
}

.select-item button.active { /* Style for active item in mobile dropdown */
  background: var(--orange-yellow-crayola); /* Yellow background for active */
  color: var(--smoky-black); /* Dark text for contrast on yellow */
  font-weight: var(--fw-500); /* Make active item slightly bolder */
}


.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 10px;
  /* Masonry-style layout */
  align-items: start;
}

/* Additional masonry support */
.project-item {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Project item container with absolute positioning for text */
.project-item-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.project-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.project-item:not(.active) {
  display: none !important;
}

.project-item.active {
  display: block;
  animation: scaleUp 0.25s ease forwards;
}

@keyframes scaleUp {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.project-item > a {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Box treatment that mirrors the blog card (.blog-post-item > a) so project
     cards read as a visible box with an inset ring and edge highlight. */
  position: relative;
  height: 100%;
  background: var(--jet);
  box-shadow: var(--shadow-4);
  border-radius: 16px;
  z-index: 1;
}

.project-item > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--eerie-black-1);   /* matches .blog-post-item > a::before */
  z-index: -1;
}

.project-img {
  position: relative;
  width: 100%;
  border-radius: 12px;       /* match .blog-banner-box so the card reads like a blog card */
  overflow: hidden;
  margin-bottom: 0;          /* text now lives in a box below the image, not overlaid */
  /* Default aspect ratio */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  /* This will make the grid items flow better */
  contain: layout style;
}

.project-img.vertical {
  /* Vertical videos - 9:16 aspect ratio */
  aspect-ratio: 9 / 16;
}

.project-img.horizontal {
  /* Horizontal videos - 16:9 aspect ratio */
  aspect-ratio: 16 / 9;
}

/* Ensure proper spacing and alignment for all project items */
.project-item {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0; /* This helps with grid layout */
}

/* Title + category + play icon sit below the image in a content box (mirroring
   the blog card's .blog-content). The play icon sits to the right of the text. */
.project-item-text {
  padding: 15px;                       /* mirror .blog-content (style.css #BLOG) */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Stack category + title on the left so the play icon can sit to their right */
.project-text-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Blurred low-res thumbnail behind the text on HORIZONTAL cards only.
   The image URL is exposed as --project-img-url on the <a> link (set in JS).
   The adjacent-sibling combinator scopes this to horizontal cards whose
   .project-item-text follows .project-img horizontally (vertical cards
   position text absolutely over the image and are excluded). */
.project-img.horizontal + .project-item-text {
  --blur-amount: 40px;
  --bg-opacity: 0.3;
  position: relative;
  z-index: 2;          /* text stays above the blurred bg */
  overflow: hidden;     /* contain the blurred ::before within the card bounds */
}

.project-img.horizontal + .project-item-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--project-img-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--blur-amount));
  opacity: var(--bg-opacity);
  border-radius: 12px;  /* match .project-img radius */
  z-index: -1;
}

@media (min-width: 1024px) {
  .project-item-text { padding: 25px; }
}

/* Vertical videos overlay title+category + play icon on a full-width gradient
   bar at the very bottom of the video (the gradient spans left-to-right of the
   image even where there's no text). The text group sits bottom-left and the
   play icon bottom-right. Scoped to a descendant of .project-img so it never
   affects horizontal cards. */
.project-img .project-item-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;      /* text group bottom-left, play icon bottom-right */
  gap: 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 12px 16px;
  z-index: 2;            /* above the .project-img::before hover overlay */
  box-sizing: border-box;
}

/* Additional styling to support masonry-like appearance */
.project-item {
  break-inside: avoid;
  margin-bottom: 20px;
}

.project-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  transition: var(--transition-1);
}


.project-item-icon-box {
  font-size: 32px;
  color: var(--white-2);
  flex-shrink: 0;
  opacity: 1;            /* always shown (relocated beside the title) */
  transition: var(--transition-1);
  pointer-events: none; /* don't block clicks on the project link */
}

.project-item > a:hover .project-item-icon-box {
  color: var(--orange-yellow-crayola);
}

.project-item > a:hover .project-img img {
  transform: scale(1.02);
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
  display: block;
}

/* Ensure that the aspect ratio is maintained properly */
.project-item {
  display: flex;
  flex-direction: column;
}


/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog-posts { margin-bottom: 10px; }

.blog-posts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.blog-post-item > a {
  position: relative;
  background: var(--jet);
  height: 100%;
  box-shadow: var(--shadow-4);
  border-radius: 16px;
  z-index: 1;
}

.blog-post-item > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--eerie-black-1);
  z-index: -1;
}

.blog-banner-box {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

.blog-banner-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.05); }

.blog-content { padding: 15px; }

.blog-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.blog-meta :is(.blog-category, time) {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.blog-category {
  background: var(--onyx);
  width: max-content;
  padding: 3px 12px;
  border-radius: 8px;
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

/* Project tags — first 2 tags shown per card in the projects grid instead
   of the old category badge. The full tag list also renders in the video modal. */
.project-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 6px;
}

.project-item-tag {
  background: var(--onyx);
  padding: 2px 10px;
  border-radius: 8px;
  color: var(--light-gray-70);
  font-size: var(--fs-7, 0.69rem);
  font-weight: var(--fw-300);
  line-height: 1.6;
  white-space: nowrap;
}

.blog-meta .dot {
  background: var(--light-gray-70);
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

.blog-item-title,
.project-title {
  margin-bottom: 10px;
  line-height: 1.3;
  color: var(--white-2);          /* match .h3 / .blog-item-title */
  font-size: var(--fs-2);
  text-transform: capitalize;
  transition: var(--transition-1);
}

.blog-post-item > a:hover .blog-item-title,
.project-item > a:hover .project-title { color: var(--orange-yellow-crayola); }

.blog-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}


/*-----------------------------------*\
  #BLOG MODAL
\*-----------------------------------*/

.blog-modal {
  background: var(--eerie-black-2);
  position: relative;
  padding: 0;
  margin: 0;
  border: 1px solid var(--jet);
  border-radius: 20px;
  box-shadow: var(--shadow-5);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow-y: visible;
}

/* Scroll container for banner + content (keeps close/share buttons outside scroll area) */
.blog-modal-scroll {
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-modal-banner {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-modal-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay title + meta at bottom-left of the banner image */
.blog-modal-banner-text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 15px;
  background: linear-gradient(to top, hsla(0, 0%, 5%, 0.85), transparent);
}

/* Meta now renders above the title — add a gap before the title */
.blog-modal .blog-modal-banner-text .blog-modal-meta.blog-modal-meta {
  margin-bottom: 10px;
}

.blog-modal .modal-content {
  padding: 25px;
  overflow-y: visible;
  flex-grow: 1;
  flex-shrink: 0;
}

/* Blog modal scrollbar — match the site's .has-scrollbar design */
.blog-modal-scroll::-webkit-scrollbar {
  width: 5px;
  padding: 15px 0; /* inset 15px from top and bottom */
}

.blog-modal-scroll::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.blog-modal-scroll::-webkit-scrollbar-thumb {
  background: var(--orange-yellow-crayola);
  border-radius: 5px;
}

.blog-modal .h3.modal-title.blog-modal-title {
  color: var(--white-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-500);
  margin-bottom: 0;
  line-height: 1.3;
}

.blog-modal .blog-meta.blog-modal-meta {
  margin-bottom: 20px;
}

.blog-modal .blog-meta :is(.blog-category, time) {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.blog-modal .blog-category {
  background: var(--onyx);
  width: max-content;
  padding: 3px 12px;
  border-radius: 8px;
}

.blog-modal .blog-meta .dot {
  background: var(--light-gray-70);
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

/* Rendered markdown content in the blog modal */
.blog-detail {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.8;
  word-wrap: break-word;
}

.blog-detail h1,
.blog-detail h2,
.blog-detail h3,
.blog-detail h4,
.blog-detail h5,
.blog-detail h6 {
  color: var(--white-2);
  margin-top: 25px;
  margin-bottom: 12px;
  line-height: 1.3;
  font-weight: var(--fw-500);
}

.blog-detail h1 { font-size: var(--fs-1); }
.blog-detail h2 { font-size: 22px; margin-top: 30px; }
.blog-detail h3 { font-size: var(--fs-2); }
.blog-detail h4 { font-size: var(--fs-3); }
.blog-detail h5 { font-size: var(--fs-4); }
.blog-detail h6 { font-size: var(--fs-5); }

.blog-detail p {
  margin-bottom: 16px;
}

.blog-detail ul,
.blog-detail ol {
  margin-left: 24px;
  margin-bottom: 16px;
}

.blog-detail li {
  margin-bottom: 6px;
}

.blog-detail a {
  color: var(--orange-yellow-crayola);
  text-decoration: underline;
}

.blog-detail a:hover {
  color: var(--light-gray);
}

.blog-detail img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 16px 0;
  display: block;
  object-fit: cover;
}

.blog-detail blockquote {
  border-left: 3px solid var(--orange-yellow-crayola);
  padding: 4px 20px;
  margin: 20px 0;
  background: var(--border-gradient-onyx);
  border-radius: 0 8px 8px 0;
}

.blog-detail blockquote p {
  font-style: italic;
  color: var(--light-gray-70);
  margin-bottom: 0;
}

.blog-detail code {
  background: var(--onyx);
  color: var(--orange-yellow-crayola);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.blog-detail pre {
  background: var(--jet);
  border-radius: 10px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}

.blog-detail pre code {
  background: none;
  color: var(--white-1);
  padding: 0;
  font-size: var(--fs-7);
}

.blog-detail table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.blog-detail th,
.blog-detail td {
  border: 1px solid var(--jet);
  padding: 8px 12px;
  text-align: left;
}

.blog-detail th {
  color: var(--white-2);
  font-weight: var(--fw-500);
}

.blog-detail hr {
  border: none;
  height: 1px;
  background: var(--jet);
  margin: 24px 0;
}


/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.mapbox {
  position: relative;
  height: 250px;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 30px;
  border: 1px solid var(--jet);
  overflow: hidden;
}

.mapbox figure { height: 100%; }

.mapbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  /* filter: grayscale(1) invert(1); */
}

.contact-form { margin-bottom: 10px; }

.form-title { margin-bottom: 20px; }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.input-wrapper {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

.form-input {
  width: 100%;
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-400);
  padding: 13px 20px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  outline: none;
}

.form-input::placeholder { font-weight: var(--fw-500); }

.form-input:focus { border-color: var(--orange-yellow-crayola); }

textarea.form-input {
  grid-column: 2;
  grid-row: 1;
  min-height: 120px;
  max-height: 200px;
  resize: vertical;
  margin-bottom: 0;
}

textarea.form-input::-webkit-resizer { display: none; }

.h-captcha {
  grid-column: 1;
  align-self: start;
}

.form-error {
  grid-column: 1 / -1;
  color: var(--bittersweet-shimmer);
  font-size: var(--fs-7);
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-1), visibility var(--transition-1);
}

.form-error.active {
  opacity: 1;
  visibility: visible;
}

.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }

.form-btn {
  grid-column: 2;
  align-self: start;
  position: relative;
  width: 100%;
  background: var(--border-gradient-onyx);
  color: var(--orange-yellow-crayola);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: var(--fs-6);
  text-transform: capitalize;
  box-shadow: var(--shadow-3);
  z-index: 1;
  transition: var(--transition-1);
}

.form-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  transition: var(--transition-1);
  z-index: -1;
}

.form-btn ion-icon { font-size: 16px; }

.form-btn:hover { background: var(--bg-gradient-yellow-1); }

.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }

.form-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-btn:disabled:hover { background: var(--border-gradient-onyx); }

.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }


/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/**
 * responsive smaller than 450px screen
 */

@media (max-width: 449px) {

  .form {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .input-wrapper { grid-column: 1 / -1; }

  textarea.form-input {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .h-captcha { grid-column: 1 / -1; }

  .form-btn { grid-column: 1 / -1; }

}

/**
 * responsive larger than 450px screen
 */

@media (min-width: 450px) {

  /**
   * #PROJECTS, BLOG
   */

  .project-img,
  .blog-banner-box { height: auto; } /* If blog is added */

}


/**
 * responsive larger than 580px screen
 */

@media (min-width: 580px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (min-width: 768px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (min-width: 1024px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

@media (min-width: 1250px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}


  /**
   * #REUSED STYLE
   */


  /* This rule is overridden by 1250px media query for flex layout,
     but might be useful if that layout is conditional */

  .article-title {
    font-weight: var(--fw-600);
    padding-bottom: 15px;
  }


  .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 18px;
  }


  /**
   * #MAIN
   */

  main {
    margin-top: 60px;
    margin-bottom: 100px;
  }


  /**
   * #SIDEBAR
   */
  .sidebar {
    padding: 30px; /* Consistent padding */
  }

  .info_more-btn span { display: inline; } /* Show text on larger screens */
  .info_more-btn { padding: 12px 15px; }


  /**
   * #NAVBAR
   */

  .navbar { border-radius: 20px 20px 0 0; } /* Consistent radius */

  .navbar-list { gap: 20px; }

  .navbar-link { --fs-8: 14px; }


  /**
   * #HOME
   */

  .home .article-title { margin-bottom: 20px; }

  .home-text { margin-bottom: 40px; }

  /* service */

  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
  }

  .service-icon-box {
    margin-bottom: 0;
    margin-top: 5px;
  }

  .service-content-box { text-align: left; }

  /* testimonials */

  .testimonials-title { margin-bottom: 25px; }

  .carousel-track {
    gap: 35px;
    padding: 25px 15px;
  }

  .carousel-slide {
    flex: 0 0 385px;
    min-width: 0;
  }

  .carousel-slide .content-card {
    padding: 25px;
    display: flex;
    flex-direction: column;
  }

  .testimonials-avatar-box {
    width: 60px;
    height: 60px;
    margin: 0;
  }

  .testimonials-item-title {
    margin-bottom: 10px;
  }

  /* testimonials modal */
  .testimonials-modal {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
    max-width: 680px; /* Consistent max-width */
  }

  .modal-img-wrapper { /* For testimonials */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .testimonials-modal .modal-avatar-box { /* Specific to testimonials */
    width: 65px;
    height: 65px;
    margin-bottom: 0;
  }

  .testimonials-modal .modal-img-wrapper > img { /* Quote icon */
    display: block;
    flex-grow: 1;
    width: 35px;
  }


  /* video modal */
  .video-modal {
    border-radius: 20px; /* padding (62px all sides) inherited from base */
  }


  /* clients (Softwares) — 1 row of 8 on wide desktop */

  .clients-list {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    margin: 0;
    padding: 15px;
  }

  .clients-item img { max-height: 60px; }


  /**
   * #RESUME
   */


  .skills-item:not(:last-child) { margin-bottom: 25px; }


  /**
   * #PROJECTS, BLOG
   */

  .project-img, .blog-banner-box { border-radius: 16px; } /* If blog is added */

  .blog-posts-list { gap: 30px; }

  .blog-content { padding: 25px; }

  /* blog modal */
  .blog-modal {
    padding: 0;
    border-radius: 20px;
    max-width: 680px;
  }

  .blog-modal-banner { height: 250px; }

  .blog-modal .modal-content { padding: 30px; }


  /**
   * #CONTACT (Styles for contact form if added)
   */

/**
 * responsive larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE
   */

   /* Handled by 1250px for flex */

  .has-scrollbar::-webkit-scrollbar-button { width: 100px; }


  /**
   * SIDEBAR
   */

  .contacts-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 15px;
  }


  /**
   * NAVBAR
   */

  .navbar-link { --fs-8: 15px; }


  /**
   * HOME
   */

  /* testimonials modal */

  .testimonials-modal .modal-avatar-box { width: 80px; height: 80px; }


  /**
   * PROJECTS
   */

  .article-title { padding-bottom: 20px; } /* For projects page title */

  .filter-select-box { display: none; } /* Hide mobile select */

  .filter-list { /* Show desktop filter list */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    padding-left: 5px;
    margin-bottom: 30px;
  }

  .filter-item button {
    color: var(--light-gray);
    font-size: var(--fs-5);
    transition: var(--transition-1);
    background: var(--onyx); /* Added title badge background */
    border: none; /* Ensure no border */
    padding: 3px 12px; /* Adjusted padding to match title badge */
    text-transform: capitalize; /* Match select items */
    border-radius: 8px; /* Added border-radius to match title badge */
  }

  .filter-item button:hover { color: var(--light-gray-70); }

  .filter-item button.active { /* Active state for desktop filter buttons */
    background: var(--orange-yellow-crayola); /* Yellow background for active */
    color: var(--smoky-black); /* Dark text for contrast on yellow */
    font-weight: var(--fw-500); /* Make active item bolder */
  }

  /* projects and blog grid */

  .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }


  /**
   * #CONTACT
   */


  .form-btn {
    width: max-content;
    margin-left: auto;
  }

}


/**
 * responsive larger than 1024px screen
 */

@media (min-width: 1024px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
    * shadow
    */

    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);

  }


  /**
   * REUSED STYLE
   */

   /* Handled by 1250px for flex */


  /**
   * MAIN
   */

   /* Handled by 1250px for flex */

  .main-content { /* This is the container for articles */
    position: relative;
    /* width: max-content; */ /* Let it grow with flex */
    /* margin: auto; */ /* Centering handled by main flex */
  }

  /* At ≥1024px the navbar moves to the top of .main-content (position: absolute; top: 0).
     Give articles extra top padding so body text clears the navbar. */
  article { padding-top: 75px; }


  /**
   * SIDEBAR
   */

  .navbar {
    position: absolute;
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: max-content;
    border-radius: 0 20px;
    padding: 0 20px;
    box-shadow: none;
  }

  .navbar-list {
    gap: 30px;
    padding: 0 20px;
  }

  .navbar-link { font-weight: var(--fw-500); }


  /**
   * HOME
   */

  /* service */

  .service-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
  }

  /* testimonials */

  .carousel-slide {
    flex: 0 0 385px;
    min-width: 0;
  }

  /* clients (Softwares) — 2 rows of 4 on desktop; grid comes from base .clients-list */

  .clients-item img { max-height: 70px; }


  /**
   * PROJECTS
   */
  /* Removed .active-filter rules as .active is now standard */

  /* Projects grid layout with consistent spacing */
  .project-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* Ensure project items don't add extra spacing */
  .project-item {
    margin: 0;
    padding: 0;
  }

  /* Clear any potential grid item spacing */
  .project-img {
    margin: 0;
    padding: 0;
  }


  /**
   * #BLOG
   */

  .blog-banner-box { height: 230px; }

}


/**
 * responsive larger than 1250px screen
 */

@media (min-width: 1250px) {

  /**
   * RESET
   */

  body::-webkit-scrollbar { width: 20px; }

  body::-webkit-scrollbar-track { background: var(--smoky-black); }

  body::-webkit-scrollbar-thumb {
    border: 5px solid var(--smoky-black);
    background: hsla(0, 0%, 100%, 0.1);
    border-radius: 20px;
    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
                inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
  }

  body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }

  body::-webkit-scrollbar-button { height: 60px; }


  /**
   * REUSED STYLE
   */

  .sidebar, article { width: auto; } /* Allow flex to determine width */

  article { min-height: 100%; }


  /**
   * MAIN
   */

  main {
    max-width: 1400px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    gap: 40px;
  }

  .main-content {
    flex-grow: 2; /* Allow main content to take up more space */
    min-width: 0; /* Prevent overflow issues with flex items */
    margin: 0;
  }


  /**
   * SIDEBAR
   */

  .sidebar {
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 120px); /* Max height considering top and bottom margin */
    height: auto; /* Let content determine height up to max-height */
    margin-bottom: 0;
    padding-top: 60px; /* Space for fixed navbar if it were above */
    z-index: 1;
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    width: 290px; /* Slightly wider sidebar */
    overflow-y: auto; /* Allow scrolling within sidebar if content exceeds max-height */
  }

  .sidebar-info { flex-direction: column; }

  .avatar-box img { width: 150px; }

  .info-content .name {
    white-space: nowrap;
    text-align: center;
  }

  .info-content .title { margin: auto; }

  .info_more-btn { display: none; } /* Hide toggle button on large screens */

  .sidebar-info_more { /* Ensure it's always visible on large screens */
    opacity: 1;
    visibility: visible;
    max-height: none; /* Remove max-height restriction */
  }

  .contacts-list { grid-template-columns: 1fr; }

  .contact-info :is(.contact-link) {
    white-space: normal;
    overflow: visible;
  }

  .contact-info :is(.contact-link, time, address) {
    --fs-7: 14px;
    font-weight: var(--fw-300);
  }

  .separator:last-of-type { /* This was for resume, can be removed or repurposed */
    margin: 15px 0;
    /* opacity: 0; */ /* Keep visible if used */
  }

  .social-list { justify-content: center; }


  /* testimonials */

  .carousel-slide {
    flex: 0 0 385px;
    min-width: 0;
  }

  /**
	 * #RESUME
	 */


}


/* Project item hover effects */
/* Special styles for selected filter arrangement */
.project-list.selected .project-img {
  margin-bottom: 10px;
}

/*-----------------------------------*\
  #PROJECTS MASONRY LAYOUT
  JS builds N .masonry-column divs inside .project-list and
  distributes items into whichever column is shortest, so
  horizontal videos stack together to fill the same height as
  a vertical video instead of leaving empty space in a row.
  This block is placed last so it overrides every earlier
  .project-list / .project-item grid rule at all breakpoints.
\*-----------------------------------*/

.project-list {
  display: flex !important;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 10px;
  width: 100%;
}

.masonry-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1 1 0;
  min-width: 0;
}

.masonry-column .project-item {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 579px) {
  .project-list {
    gap: 16px;
  }
  .masonry-column {
    gap: 16px;
  }
}

/*-----------------------------------*\
  #LOADING STATES
  Skeleton + spinner indicators for
  async data regions
\*-----------------------------------*/

/* Projects skeleton: while aria-busy="true" on .project-list, switch
   from the persistent flex layout (masonry block, declared with
   !important above) back to a responsive grid so placeholder cards
   tile naturally. Specificity 0,2,0 beats .project-list (0,1,0). */
.project-list[aria-busy="true"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.project-skeleton {
  width: 100%;
  margin: 0;
  padding: 0;
}

.skeleton-img {
  display: block;
  width: 100%;
  /* All real items use horizontal (16:9); skeleton matches */
  aspect-ratio: 16 / 9;
  border-radius: 12px; /* match .project-img (now 12px) */
  background: linear-gradient(90deg, var(--jet) 25%, var(--eerie-black-1) 50%, var(--jet) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton text placeholder — mirrors the below-image content box on real cards */
.skeleton-text {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--jet) 25%, var(--eerie-black-1) 50%, var(--jet) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  animation-delay: -0.25s;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Blog skeleton: placeholder cards matching .blog-banner-box dimensions */
.blog-skeleton {
  width: 100%;
  margin: 0;
  padding: 0;
}

.blog-skeleton-img {
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--jet) 25%, var(--eerie-black-1) 50%, var(--jet) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@media (min-width: 450px) {
  .blog-skeleton-img { height: 230px; }
}

.blog-skeleton-title {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 15px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--jet) 25%, var(--eerie-black-1) 50%, var(--jet) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  animation-delay: -0.25s;
}

.blog-skeleton-text {
  display: block;
  width: 100%;
  height: 16px;
  margin-top: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--jet) 25%, var(--eerie-black-1) 50%, var(--jet) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  animation-delay: -0.5s;
}

/* Inline spinner for regions where the content shape isn't predictable */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  pointer-events: none;
}

.spinner-circle {
  width: 32px;
  height: 32px;
  border: 3px solid var(--jet);
  border-top-color: var(--orange-yellow-crayola);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/*-----------------------------------*\
  #ERROR (404)
\*-----------------------------------*/

.error-code {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: var(--fw-600);
  color: var(--orange-yellow-crayola);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  line-height: 1;
}

.error-code ion-icon {
  font-size: clamp(2.5rem, 10vw, 5rem);
  color: var(--orange-yellow-crayola);
  --ionicon-stroke-width: 40px;
}

.error-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  width: 100%;
}

.error-card {
  position: relative;
  background: var(--jet);
  padding: 40px;
  border-radius: 20px;
  box-shadow: var(--shadow-3);
  text-align: center;
  max-width: 520px;
  width: 100%;
  z-index: 1;
}

.error-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--card-bg);
  border-radius: inherit;
  z-index: -1;
}

.error-heading {
  color: var(--white-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-500);
  margin-bottom: 12px;
}

.error-message {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
  margin-bottom: 25px;
}

.error-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  background: var(--border-gradient-onyx);
  color: var(--orange-yellow-crayola);
  padding: 13px 28px;
  border-radius: 14px;
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  text-transform: capitalize;
  box-shadow: var(--shadow-3);
  z-index: 1;
  transition: var(--transition-1);
}

.error-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
  transition: var(--transition-1);
}

.error-btn:hover {
  background: var(--bg-gradient-yellow-1);
  color: var(--smoky-black);
}

.error-btn:hover::before {
  background: var(--bg-gradient-yellow-2);
}

.error-btn ion-icon {
  font-size: 18px;
}

/*================================*/
/* #SOFTWARE TOOLTIP               */
/*================================*/

.software-tooltip {
  position: fixed;
  background: var(--bg-gradient-jet);
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  padding: 10px 12px;
  max-width: 260px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-1), visibility var(--transition-1);
  font-size: var(--fs-7);
  line-height: 1.5;
}

.software-tooltip.show {
  opacity: 1;
  visibility: visible;
}


.software-tooltip .tooltip-name,
.software-tooltip .tooltip-purpose {
  display: inline;
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
}

.software-tooltip .tooltip-name {
  color: var(--white-2);
  margin-right: 4px;
}

.software-tooltip .tooltip-purpose {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
}

.software-tooltip .tooltip-divider {
  height: 1px;
  background: var(--jet);
  margin: 4px 0;
  border: none;
}

.software-tooltip .tooltip-description {
  display: block;
  color: var(--light-gray);
  font-weight: var(--fw-300);
  line-height: 1.4;
  margin-top: 4px;
}

/*-----------------------------------*\
  #BLOG POST PAGE
\*-----------------------------------*/

.blog-post-actions {
  max-width: 720px;
  margin: 0 auto 15px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-post .blog-banner-box {
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 0 15px;
  border-radius: 12px;
  overflow: hidden;
}

.blog-back-link,
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--jet);
  border: 1px solid var(--border-gradient-onyx);
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-1);
  flex-shrink: 0;
  text-decoration: none;
}

.blog-back-link:hover,
.blog-share-btn:hover {
  background: var(--orange-yellow-crayola);
  color: var(--eerie-black-1);
}

.blog-back-link ion-icon,
.blog-share-btn ion-icon {
  font-size: 16px;
}

.blog-post .blog-post-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 15px;
}

.blog-post .blog-post-title {
  color: var(--white-2);
  font-size: var(--fs-1);
  font-weight: var(--fw-500);
  line-height: 1.2;
  margin: 10px 0 0;
}

.blog-post .blog-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 25px 15px;
}

/* CTA card — appears at the bottom of every blog post */
.blog-cta-card {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 25px;
  background: var(--jet);
  border-radius: 16px;
  box-shadow: var(--shadow-4);
  border: 1px solid var(--border-gradient-onyx);
}

.blog-cta-card .h3 {
  color: var(--white-2);
  margin-top: 0;
  margin-bottom: 12px;
}

.blog-cta-card p {
  color: var(--light-gray);
  line-height: 1.6;
  margin-bottom: 16px;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange-yellow-crayola);
  font-weight: var(--fw-500);
  text-decoration: none;
}

.cta-link:hover {
  color: var(--light-gray);
}

/*-----------------------------------*\
  #MOBILE & TABLET SIDEBAR TOGGLE ("Show More")
  On mobile and tablet the sidebar is NOT sticky, so a fixed viewport
  button would float above content while the contacts panel it toggles
  scrolls away at the top. Instead, pin the button to the bottom center
  of .sidebar (its positioned parent on mobile/tablet) — it stays on
  the bottom line of the card and follows the sidebar down as it grows
  tall when the contacts panel is expanded.
  On desktop (>= 1250px) the sidebar is sticky and always expanded, so
  the toggle is hidden there (see the 1250px rule).
\*-----------------------------------*/
@media (max-width: 1249px) {

  .sidebar { position: relative; }       /* positioning context for the toggle */
  .sidebar-info { position: static; }  /* release the toggle up to .sidebar */

  .info_more-btn {
    position: absolute;
    top: auto;
    right: auto;
    bottom: -22px;            /* center on the sidebar card's bottom edge */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;               /* icon-only toggle */
    background: transparent; /* no black/gray background */
    box-shadow: none;         /* remove dark shadow halo */
    border-radius: 50%;       /* circular hit area */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Keep the toggle background-free on hover/tap (no gradient) */
  .info_more-btn:hover,
  .info_more-btn:focus {
    background: transparent;
    color: var(--orange-yellow-crayola);
  }

  .info_more-btn ion-icon {
    font-size: 26px;
    color: var(--orange-yellow-crayola);
  }
}

@media (max-width: 767px) {
  .clients-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 15px;
    margin: 0;
  }
  .clients-item {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    aspect-ratio: unset;
  }
  .clients-item::before { background: none; box-shadow: none; }
  .clients-item img { filter: none; }
}

@media (max-width: 767px) {
  .carousel-track {
    mask-image: none;
    -webkit-mask-image: none;
    padding: 25px 0 10px;
  }

  .carousel-slide {
    flex: 0 0 calc(100vw - 96px);
    width: calc(100vw - 96px);
  }

  .carousel-slide .content-card {
    transition: transform 0.5s ease;
    height: 210px;
    min-height: 210px;
  }

  .carousel-slide:not(.carousel-slide--active) .content-card {
    opacity: 0;
    filter: none;
  }
}

/* Mobile: strip the outer card box (edge) from main-content articles only.
   The shared ".sidebar, article" base rule gives articles a border, background,
   border-radius, padding and box-shadow on all screen sizes. On mobile that edge
   is removed from the main content while the sidebar (<aside>) keeps its card. */
@media (max-width: 767px) {
  article {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* Mobile navbar: force all links onto a single row.
   flex-wrap: wrap stacks the 5 links into 2 rows, which makes the fixed
   bottom navbar ~2x tall and pushes it past main's bottom margin — covering
   the last line(s) of page content. nowrap + tight gap + horizontal scroll
   keeps one row and lets main's bottom margin clear the bar. */
@media (max-width: 767px) {
  .navbar-list {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure no trailing content is hidden behind the fixed bottom navbar. */
  .main-content { padding-bottom: 50px; }
}