/* ============================================================
   HBC Timberframe — Custom Styles
   Supplements Tailwind utilities with animations, transitions,
   and anything that's cleaner in raw CSS.
============================================================ */

/* ---- Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Scroll animation base states ---- */
/*
  Elements with [data-animate] begin invisible + slightly below.
  JS adds .animated once they enter the viewport.
  data-delay sets the stagger.
*/
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Delay variants — applied via data-delay attribute in JS */
[data-animate][data-delay="0"]   { transition-delay: 0ms; }
[data-animate][data-delay="100"] { transition-delay: 100ms; }
[data-animate][data-delay="150"] { transition-delay: 150ms; }
[data-animate][data-delay="200"] { transition-delay: 200ms; }
[data-animate][data-delay="300"] { transition-delay: 300ms; }
[data-animate][data-delay="400"] { transition-delay: 400ms; }

/* ---- Navigation ---- */
#nav {
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

#nav.nav-scrolled {
  background-color: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Logo color swap on scroll */
#nav .nav-logo {
  transition: color 0.4s ease;
}
#nav.nav-scrolled .nav-logo {
  color: #1C1C1E;
}

/* Nav links color swap */
#nav .nav-link {
  transition: color 0.3s ease;
}
#nav.nav-scrolled .nav-link {
  color: rgba(107, 114, 128, 0.9);
}
#nav.nav-scrolled .nav-link:hover {
  color: #1C1C1E;
}

/* Hamburger lines color swap */
#nav.nav-scrolled .hamburger-line {
  background-color: #1C1C1E;
}

/* Hamburger open state */
#menu-btn.open .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#menu-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#menu-btn.open .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  width: 1.5rem;
  margin-left: 0;
}

/* ---- Hero scroll indicator ---- */
@keyframes scrollFill {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.scroll-fill {
  animation: scrollFill 2s ease-in-out infinite;
}

/* ---- Portfolio grid hover ---- */
.portfolio-card {
  cursor: pointer;
}

.portfolio-overlay {
  transition: opacity 0.45s ease;
}

/* ---- Process steps ---- */
.process-step {
  position: relative;
  transition: background-color 0.3s ease;
}
.process-step:hover {
  background-color: #1e2a1c;
}

/* ---- Testimonial cards ---- */
.testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ---- Plan cards ---- */
.plan-card {
  transition: box-shadow 0.3s ease;
}
.plan-card:hover {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
}

/* ---- Form inputs ---- */
input:focus,
textarea:focus {
  outline: none;
  border-color: #8B6914;
  background-color: #ffffff;
}

/* ---- Buttons: remove outline on click, keep on keyboard ---- */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #8B6914;
  outline-offset: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Mobile menu slide ---- */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

#mobile-menu.open {
  max-height: 500px;
  opacity: 1;
}

/* Override display:hidden for animation to work */
#mobile-menu {
  display: block !important;
}

/* ---- Decorative divider utility ---- */
.divider-bronze {
  width: 40px;
  height: 1px;
  background-color: #8B6914;
  margin-bottom: 1.5rem;
}

/* ---- Image hover utility ---- */
.img-zoom-wrap {
  overflow: hidden;
}
.img-zoom-wrap img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-zoom-wrap:hover img {
  transform: scale(1.05);
}

/* ---- Smooth scrolling offset for fixed nav ---- */
section[id],
div[id="contact"] {
  scroll-margin-top: 80px;
}

/* ---- Typography refinements ---- */
.font-serif em {
  font-style: italic;
  font-weight: 300;
}

/* ---- Selection color ---- */
::selection {
  background-color: rgba(139, 105, 20, 0.2);
  color: #1C1C1E;
}

/* ---- Scrollbar (WebKit) ---- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F9F7F4;
}
::-webkit-scrollbar-thumb {
  background: rgba(139, 105, 20, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 105, 20, 0.5);
}

/* ---- Nav top bar collapse on scroll ---- */
#nav-topbar {
  transition: max-height 0.4s ease, opacity 0.4s ease;
  overflow: hidden;
  max-height: 60px;
}
#nav.nav-scrolled #nav-topbar {
  max-height: 0;
  opacity: 0;
}

/* ---- What We Do dropdown ---- */
#dropdown-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: top left;
  opacity: 0;
  transform: translateY(-6px);
}
#dropdown-menu.open {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Benefit bar items hover ---- */
.benefit-item {
  transition: background-color 0.3s ease;
}
.benefit-item:hover {
  background-color: #1e2a1c;
}

/* ---- Pathway panels image zoom ---- */
.pathway-panel .img-zoom-wrap img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.pathway-panel:hover .img-zoom-wrap img {
  transform: scale(1.06);
}

/* ---- Accreditation badge hover ---- */
.accreditation-badge {
  transition: background-color 0.25s ease;
}
.accreditation-badge:hover {
  background-color: #EDE9E2;
}

/* ---- FAQ items ---- */
section[id="faqs"] h3 {
  transition: color 0.2s ease;
}
section[id="faqs"] h3:hover {
  color: #8B6914;
}

/* ---- Print ---- */
@media print {
  #nav, .scroll-line, [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-fill {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}