/*
 * Minimal custom CSS for arc-tech.ch
 * Contains only styles not replaceable by Bootstrap 5 utilities.
 */

/* --- FONTS --- */
body {
  font-family: 'Roboto', sans-serif;
}

.navbar-logo-font,
.font-michroma-branded,
.navbar-nav .nav-link {
  font-family: 'Michroma', sans-serif;
}

/* --- NAVBAR --- */
/* Transparent navbar effect */
.navbar-transparent {
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
}
/* Add text shadow only in dark mode for readability against the hero image */
[data-bs-theme="dark"] .navbar-transparent:not(.navbar-scrolled) .navbar-brand,
[data-bs-theme="dark"] .navbar-transparent:not(.navbar-scrolled) .nav-link,
[data-bs-theme="dark"] .navbar-transparent:not(.navbar-scrolled) .navbar-toggler i {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

[data-bs-theme="light"] .navbar-transparent.navbar-scrolled {
  background-color: var(--bs-tertiary-bg) !important;
  border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .navbar-transparent.navbar-scrolled {
    background-color: #121212 !important;
}
[data-bs-theme="dark"] .navbar:not(.navbar-transparent) {
  background-color: #121212 !important;
}

/* Logo alignment */
.navbar-brand-logo {
  height: 1.2em;
  position: relative;
  top: -2px;
}

/* --- HERO --- */
.hero-section {
  background-image: url('../assets/future_digitalization_technology_3d-small.webp');
  background-size: cover;
  background-position: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
  .hero-section {
    background-image: url('../assets/future_digitalization_technology_3d-medium.webp');
  }
}
@media (min-width: 1200px) {
  .hero-section {
    background-image: url('../assets/future_digitalization_technology_3d-large.webp');
  }
}

/* --- LAYOUT & SCROLL --- */
main#main-content {
  margin-top: 3.5rem;
}
#services, #expertise, #about, #contact {
  scroll-margin-top: 4rem;
}

/* --- COMPONENTS --- */
/* Custom footer background to match navbar */
.footer-bg {
  background-color: #212529; /* Fallback for light mode, matches Bootstrap's .bg-dark */
}
[data-bs-theme="dark"] .footer-bg {
  background-color: #121212 !important; /* Specific dark color for dark mode */
}

/* Card hover effect */
.card-lift-hover:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease-out;
}

/* Custom button for theme switching */
.btn-theme-switch {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
[data-bs-theme="light"] .btn-theme-switch {
  background-color: #212529;
  color: #fff;
  border-color: #212529;
}
[data-bs-theme="dark"] .btn-theme-switch {
  background-color: #f8f9fa;
  color: #000;
  border-color: #f8f9fa;
}
.btn-theme-switch:hover {
  transform: translateY(-2px);
}

/* Card header height */
.card-header-custom-height {
  min-height: 3.5rem;
}

/* Back to top button visibility */
.back-to-top {
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* --- UTILITIES --- */
.mw-150 {
  max-width: 150px !important;
}

/* --- ANIMATIONS --- */
.fade-in-section {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transform: translateY(20px);
  opacity: 0;
}
.fade-in-section.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile menu overlay fix
   Ensure the collapsed mobile menu does not push the navbar/brand down when opened.
   This makes the mobile menu overlay the page and positions it directly under the navbar. */
@media (max-width: 991.98px) {
  /* Offcanvas styles for mobile menu to visually match previous dropdown appearance */
  .offcanvas.offcanvas-end#offcanvasMenu {
    /* Fit to longest navigation entry but cap at a comfortable width */
    width: -moz-max-content;
    width: max-content;
    max-width: 320px; /* fallback cap */
    background-color: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    overflow: hidden;
    /* Position slightly below the navbar and limit vertical coverage */
    top: calc(56px + 0.5rem) !important;
    bottom: auto !important; /* don't force to bottom: let height be determined by content/max-height */
    height: auto !important;
    max-height: calc(80vh - 0.5rem);
    margin-top: 0.5rem;
  }
  .offcanvas.offcanvas-end#offcanvasMenu .offcanvas-body {
    overflow: auto; /* make content scrollable if it exceeds max-height */
    padding-bottom: 0.25rem; /* reduce bottom whitespace */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /* Make navbar container the positioning context so the absolute mobile menu sits under the navbar
     and does not cause any layout shift of the brand/logo. */
  .navbar > .container-fluid {
    position: relative;
    display: flex;
    align-items: center; /* vertically center brand and toggler */
    gap: 0.5rem;
  }

  /* Lock navbar height to avoid visual reflow on Chrome when the mobile menu toggles. */
  .navbar {
    min-height: 56px; /* match typical bootstrap navbar height */
    height: 56px; /* lock exact height to avoid any rounding/jump */
    overflow: visible; /* allow absolute menu to overflow without affecting layout */
  }

  /* Promote brand/logo to its own layer to prevent Chrome from repainting/moving it during reflow */
  .navbar-brand {
    will-change: transform;
    transform: translateZ(0);
    top: 0; /* reset any vertical offset that could cause movement */
  }

  /* Make the toggler absolute so its activated state and any focus outlines don't change layout */
  .navbar-toggler {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    z-index: 1060; /* above the mobile menu so it's clickable */
  }

  /* Keep previous collapse overrides removed since offcanvas is used. */
}

/* Defensive: hide any navbar that wasn't injected by our script to avoid visual duplicates.
   This keeps the injected navbar with id="arc-tech-navbar" visible while hiding others. */
/* Defensive rules removed: offcanvas is injected into the body separately. */

/* Ensure offcanvas is off-screen/hidden by default and only visible when .show is added by Bootstrap */
#offcanvasMenu {
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  visibility: hidden;
  opacity: 0;
  transition: transform 220ms cubic-bezier(.4,0,.2,1), opacity 160ms ease-in-out;
  z-index: 1055; /* above navbar backdrop */
}
#offcanvasMenu.show {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

/* Screen-reader-only utility: visually hidden but accessible to assistive tech */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}