.p-3 {
  padding: 1rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

@media (min-width: 768px) {
  .p-md-5 {
    padding: 3rem !important;
  }
}

/* Compact carousel styling for homepage right-column preview */
#bestWorkCarousel .carousel-item img {
  height: 260px; /* smaller preview height */
  object-fit: cover;
}

@media (max-width: 767px) {
  #bestWorkCarousel .carousel-item img {
    height: 180px;
  }
}

/* Fine-tune intro alignment and navbar spacing */
.block-intro .col-md-7 p { margin-top: 0.4rem; }
.block-intro .col-md-7 img { display: block; margin-bottom: 0.5rem; }
.block-intro .col-md-5 { text-align: center; }
.navbar-brand.logo img { margin-right: 0.6rem; }

/* Prevent page-to-page horizontal shift caused by scrollbar appearing/disappearing */
html { overflow-y: scroll; }

/* Normalize navbar collapse area and override inline styles that caused inconsistent offsets */
.navbar .collapse.navbar-collapse, #navbarNav-1 {
  width: auto !important;
  padding-left: 0 !important;
}

/* Ensure navbar logo uses the same sizing and spacing on all pages */
.navbar-brand.logo img {
  height: 28px !important;
  width: auto !important;
  margin: 8px !important;
  object-fit: cover !important;
  border-radius: 3px !important;
}

/* Give the carousel some breathing room on small screens (stacked layout) */
@media (max-width: 767px) {
  .block-intro .col-md-5 {
    margin-top: 1.25rem !important;
  }
}

/* Navbar theme: dark translucent (professional photography style)
   - Keeps focus on images, works across pages, and preserves contrast for accessibility.
*/
.navbar {
  /* match the page/body background so the navbar appears the same black as the site background */
  background-color: inherit !important;
  backdrop-filter: blur(6px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: #ffffff !important;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  /* neutral grey hover/focus instead of light blue */
  color: #d0d6da !important;
}
.navbar .nav-link.active {
  /* active state uses a subtle cool-grey to replace blue */
  color: #9aa0a6 !important;
  font-weight: 600 !important;
}

/* Ensure the toggler icon remains visible on small screens */
.navbar-dark .navbar-toggler-icon {
  filter: invert(1) !important;
}

/* Modern professional navbar variant (.navbar-modern)
   - Slightly taller, more spacing, clearer hover/active states, and accessible focus ring.
   - Use this markup in pages by replacing the existing <nav> block with the snippet in navbar-modern.html
*/
.navbar-modern {
  /* use the page background (usually the project's black) to ensure exact match */
  background-color: inherit !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.navbar-modern .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar-modern .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff !important;
}
.navbar-modern .navbar-brand img,
.navbar-modern .navbar-logo {
  height: 32px !important;
  width: 32px !important;
  max-height: 36px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  display: inline-block !important;
}
.navbar-modern .navbar-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-modern .nav-link {
  color: rgba(255,255,255,0.92) !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 6px !important;
  transition: background-color 180ms ease, color 180ms ease, transform 120ms ease;
}
.navbar-modern .nav-link:hover {
  background-color: rgba(255,255,255,0.04) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.navbar-modern .nav-link.active {
  /* replace blue accent with neutral grey accent */
  background-color: rgba(154,160,166,0.14) !important;
  color: #9aa0a6 !important;
  box-shadow: 0 1px 0 rgba(154,160,166,0.08) inset;
  font-weight: 600 !important;
}
.navbar-modern .btn-cta {
  margin-left: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  border-radius: 6px;
}
.navbar-modern .btn-cta,
.navbar .btn-cta {
  /* neutral grey CTA that matches the navbar greys */
  background-color: #9aa0a6 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.navbar-modern .btn-cta:hover,
.navbar .btn-cta:hover {
  background-color: #8a9096 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.navbar-modern .btn-cta:focus,
.navbar .btn-cta:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(154,160,166,0.14) !important;
}
.navbar-modern a:focus, .navbar-modern button:focus {
  /* neutral grey focus ring */
  outline: 3px solid rgba(154,160,166,0.18) !important;
  outline-offset: 2px !important;
}

/* Emergency override: ensure navbar text remains light on dark backgrounds
   This forces links and brand text to be visible even if other CSS loads later
   or inline styles accidentally set a dark color. Keep minimal and highly specific. */
.navbar, .navbar-modern {
  color: #f8fbfc !important;
}
.navbar, .navbar-modern, .navbar *, .navbar-modern * {
  /* Ensure descendant text defaults to light; important to beat other rules */
  color: #f8fbfc !important;
}
.navbar a, .navbar .nav-link, .navbar .navbar-brand,
.navbar-modern a, .navbar-modern .nav-link, .navbar-modern .navbar-brand {
  color: #f8fbfc !important;
}
.navbar a:visited, .navbar .nav-link:visited,
.navbar-modern a:visited, .navbar-modern .nav-link:visited {
  color: #f8fbfc !important;
}
.navbar a:hover, .navbar a:focus, .navbar-modern a:hover, .navbar-modern a:focus,
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar-modern .nav-link:hover, .navbar-modern .nav-link:focus {
  color: #e6eef2 !important;
}

/* Mobile: align collapsed navbar items to the right and make toggler (three lines) white
   Only apply flex layout when the collapse is OPEN (.collapse.show) so Bootstrap's
   toggler/transition behavior still works. Aligns Home/Portfolio and the Hire me CTA
   to the right edge when the menu is opened on small screens. */
@media (max-width: 991.98px) {
  /* Only when the collapse is shown — avoid forcing display when hidden */
  .navbar-modern .collapse.show,
  .navbar-modern .navbar-collapse.collapse.show {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* right align items */
    gap: 0.25rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background: transparent !important;
    width: 100% !important;
    text-align: right !important;
  }

  .navbar-modern .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .navbar-modern .nav-link {
    width: auto !important;
    text-align: right !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Keep the CTA visually aligned to the right when collapsed */
  .navbar-modern .btn-cta {
    align-self: flex-end !important;
    margin: 0.4rem 0 0 0 !important;
    width: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Make the hamburger icon visible (white) */
  .navbar-modern .navbar-toggler-icon,
  .navbar .navbar-toggler-icon {
    filter: invert(1) !important;
    -webkit-filter: invert(1) !important;
    background-size: 1.6rem 1.6rem !important;
  }

  .navbar-modern .navbar-toggler {
    border: none !important;
  }

  .navbar-modern .collapse.show {
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Stabilize collapse animation: ensure alignment doesn't jump during Bootstrap's
   collapsing transition by applying the same right-aligned layout to the
   .collapsing state. Also give the CTA a small min-width so it doesn't shrink
   and reflow during the animation. */
.navbar-modern .collapsing,
.navbar-modern .collapse.show {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.navbar-modern .btn-cta {
  min-width: 96px !important; /* keeps CTA width stable during animation */
  transition: none !important; /* avoid layout-changing transitions while collapsing */
}

/* Paragraph/font consistency: use the site's primary display font for authored text */
p, .page p, .card-text, .block-intro p, .lead {
  font-family: 'Lato', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #e6eef2 !important; /* ensure readable light text on dark background */
}

/* Global font reset: enforce the same font-family everywhere as a single source of truth */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, ul, ol,
button, input, textarea, select, label, small, strong, em {
  font-family: 'Lato', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}