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

/* --- FONTS --- */
body {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.75;
}

p,
li {
  line-height: 1.75;
}

body .small {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
}

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

.navbar-brand,
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
}

.navbar-nav {
  align-items: center;
  gap: 0.35rem;
}

.navbar-nav .nav-link {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1rem, 0.25vw + 1rem, 1.1rem);
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-weight: 400;
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  color: var(--bs-body-color);
  background-color: transparent;
  border: 1px solid transparent;
}

.navbar-brand {
  line-height: 1.3;
  gap: 0.5rem;
  white-space: nowrap;
}

[data-bs-theme="light"] .navbar-nav .nav-link:hover,
[data-bs-theme="light"] .navbar-nav .nav-link:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar-nav .nav-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
}

.navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

[data-bs-theme="light"] .navbar-nav .nav-link.active,
[data-bs-theme="light"] .navbar-nav .nav-link.show,
[data-bs-theme="light"] .navbar-nav .nav-link[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-nav .nav-link.show,
[data-bs-theme="dark"] .navbar-nav .nav-link[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff !important;
}

/* --- 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.35rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* --- HERO --- */
.hero-section {
  background-image: url('../assets/arc_tech_background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  /* Consider adding background-color as fallback if image fails */
  background-color: #000;
  /* Increased height and centered content for stronger hero */
  min-height: clamp(320px, 55vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2.5rem;  /* keep some breathing room */
  padding-bottom: 2.5rem;
  gap: 0.5rem; /* consistent spacing between hero children */
}


/* Remove default margins from immediate children to ensure true centering */
.hero-section > * {
  margin: 0;
}

/* Responsive hero typography: scale with viewport, with sensible bounds */
.hero-section .display-2,
.hero-section h1.display-2,
.hero-section h1 {
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  line-height: 1.1;
  text-wrap: balance;
}
.hero-section .display-6,
.hero-section p.display-6,
.hero-section p {
  font-size: clamp(1.25rem, 2.75vw, 2.125rem);
  line-height: 1.3;
}

/* Mobile boost: larger minimums and scaling for small screens */
@media (max-width: 575.98px) {
  .hero-section .display-2,
  .hero-section h1.display-2,
  .hero-section h1 {
    font-size: clamp(2.75rem, 9vw, 3.5rem);
  }
  .hero-section .display-6,
  .hero-section p.display-6,
  .hero-section p {
    font-size: clamp(1.25rem, 4.2vw, 1.625rem);
  }
}

/* --- 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;
}

/* --- PAGE SPECIFIC: About pronunciation line icon alignment --- */
.about-pronunciation {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.about-pronunciation i.bi-chat-left-text-fill {
  font-size: 0.9em; /* Slightly smaller to match text cap height */
  line-height: 1;
  position: relative;
  top: 0.05em; /* Gentle downward nudge for baseline alignment */
}

.profile-photo {
  width: clamp(12rem, 45vw, 16.5rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.5rem;
  border: 0.375rem solid var(--bs-body-bg);
  box-shadow: 0 0.625rem 1.5rem rgba(0,0,0,0.18);
}

.profile-content {
  flex: 1 1 20rem;
  min-width: 0;
}

#profile-reto .profile-section-title {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

@media (max-width: 62rem) {
  .profile-card-layout {
    text-align: center;
  }
  .profile-card-layout .profile-content {
    text-align: left;
  }
  .profile-card-layout .profile-photo {
    margin-inline: auto;
    width: clamp(12rem, 55vw, 15.5rem);
  }
  #profile-reto .profile-section-title {
    font-size: 1rem;
  }
}


/* 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 {
    /* Base mobile offcanvas width for tablets/small desktops */
    width: 35vw;
    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;
  }
  /* Left-align nav entries and align icon toggle with text */
  .offcanvas.offcanvas-end#offcanvasMenu .navbar-nav {
    align-items: stretch;
  }
  .offcanvas.offcanvas-end#offcanvasMenu .navbar-nav .nav-link {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
  }
  .offcanvas.offcanvas-end#offcanvasMenu .dropdown-menu {
    right: auto !important;
    left: 0 !important;
  }
  /* Ensure the theme dropdown toggle (icon-only) aligns with other nav links despite px-0 utility */
  .offcanvas.offcanvas-end#offcanvasMenu .navbar-nav .nav-link.px-0.dropdown-toggle {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  /* Increase mobile nav link readability and tap targets */
  .offcanvas.offcanvas-end#offcanvasMenu .navbar-nav .nav-link {
    font-size: 1.25rem; /* ~20px */
    font-family: 'Roboto', sans-serif; /* more legible on small screens */
    font-weight: 500;
    line-height: 1.6;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    min-height: 44px; /* recommended touch target */
  }
  .offcanvas.offcanvas-end#offcanvasMenu .dropdown-menu .dropdown-item {
    font-size: 1.125rem; /* ~18px */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    min-height: 44px;
  }
  /* 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. */
}
/* Narrower devices: gradually increase usable width for comfort */
@media (max-width: 767.98px) { /* Bootstrap md breakpoint */
  .offcanvas.offcanvas-end#offcanvasMenu {
    width: 40vw; /* slightly wider on mid-sized phones */
  }
}
@media (max-width: 575.98px) { /* Bootstrap sm breakpoint */
  .offcanvas.offcanvas-end#offcanvasMenu {
    width: 50vw; /* increase width on standard phones */
  }
}
@media (max-width: 359.98px) { /* very small devices */
  .offcanvas.offcanvas-end#offcanvasMenu {
    width: 60vw; /* near-full for readability */
  }
}

/* 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;
}