/* ==========================================================================
   custom.css - small site-wide tweaks to Diego template components.
   Loaded last, after main.css, on every page that needs them.
   Keep rules short and scoped to an existing template class.
   ========================================================================== */

/* Project card thumbnails (home page "Selected work").
   main.css only sets `img { max-width: 100% }`, so images with width/height
   attributes keep their attribute height when the card is narrower than the
   image and get squashed on phones/tablets. Let the height follow the width
   and reserve the 490x260 box up front to avoid layout shift. */
.tp-course-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 490 / 260;
  object-fit: cover;
}

/* Keep "View project" on one line when the note beside it is long,
   such as the Shopify store password. The note wraps in the space left. */
.tp-course-price-btn-box .tp-course-price-btn {
  flex-shrink: 0;
}

.tp-course-pirce-offer {
  min-width: 0;
}

.tp-course-pirce-offer p {
  overflow-wrap: break-word;
}

/* Mobile nav drawer (template offcanvas style 2).
   The menu styles assume a full-screen panel, so tighten them for the
   slide-in drawer and give the hamburger a 44px tap target. */
html.hg-nav-open,
html.hg-nav-open body {
  overflow: hidden;
}

.tp-header-hamburger {
  height: auto;
  line-height: 1;
  margin-left: 8px;
}

.tp-header-hamburger .tp-hamburger-btn {
  width: 44px;
  height: 44px;
  transform: none;
}

.tp-header-hamburger .tp-hamburger-btn span {
  left: 11px;
  top: 21px;
}

.tp-offcanvas-close-btn-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.tp-header-hamburger .tp-hamburger-btn:focus-visible,
.tp-offcanvas-close-btn-2:focus-visible,
.tp-offcanvas-area-2 a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.tp-offcanvas-area-2 .tp-offcanvas-top-2 {
  margin-bottom: 28px;
}

.tp-offcanvas-area-2 .tp-main-menu-mobile {
  height: auto;
  padding: 0 0 12px;
  overflow: visible;
}

.tp-offcanvas-area-2 .tp-main-menu-mobile > nav > ul > li > a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.tp-offcanvas-area-2 .tp-offcanvas-social-2 ul li a {
  width: 44px;
  height: 44px;
  line-height: 42px;
}

@media (max-width: 767px) {
  .tp-offcanvas-area-2 {
    padding: 20px 20px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-offcanvas-area-2 {
    transition: none;
  }
}

/* Scroll performance.
   Project card logo badges have a solid white background, so their
   backdrop blur never shows but still costs a blur pass per card. */
.tp-course-logo {
  backdrop-filter: none;
}

/* Touch devices: same query as GSAP's ScrollTrigger.isTouch, which main.js
   and tp-cursor.js use to skip smooth scrolling and the magic cursor.
   The background glows are 400-600px circles under filter: blur(150-300px),
   which iOS Safari is slow to paint while scrolling. Fade them with a
   radial mask instead so they keep their color and theme rules.
   !important because the light-theme rules set filter with higher
   specificity. */
@media (hover: none), (pointer: coarse) {
  .tp-hero-shape-2,
  .tp-hero-thumb-shape-3,
  .tp-skill-shape-1,
  .tp-skill-shape-2,
  .tp-footer-circle-1 span,
  .tp-footer-circle-2 span,
  .tp-offcanvas-circle-1 span,
  .tp-offcanvas-circle-2 span {
    -webkit-filter: none !important;
    filter: none !important;
    -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 50%, transparent);
    mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 50%, transparent);
  }

  body.tp-magic-cursor #magic-cursor {
    display: none;
  }
}

/* The template's 50px gutter makes .row 13px wider than its container on each
   side on phones. ScrollSmoother's fixed wrapper used to clip that; with native
   scrolling on touch devices it would scroll sideways. Bootstrap's default
   gutter keeps the column content in the same place. */
@media (max-width: 575.98px) {
  .gx-50 {
    --bs-gutter-x: 1.5rem;
  }
}