/*
 * Keiron's Construction - Custom CSS
 * Additional styles that complement Tailwind CSS
 * @package Keirons_Construction
 */

/* ======== Mobile Menu Transitions ======== */
.mobile-menu-overlay {
  transition: opacity 0.4s ease;
}

/* ======== Service Hover Buttons ======== */
.service-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  border-top: 1px solid #000;
  overflow: hidden;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  color: #1a1c1c;
  font-family: 'Hanken Grotesk', sans-serif;
}

.service-cta-btn .btn-bg {
  position: absolute;
  inset: 0;
  background: #1a1c1c;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.service-cta-btn:hover .btn-bg {
  transform: translateY(0);
}

.service-cta-btn:hover span,
.service-cta-btn:hover .material-symbols-outlined {
  color: #ffffff;
  position: relative;
  z-index: 10;
}

.service-cta-btn span,
.service-cta-btn .material-symbols-outlined {
  position: relative;
  z-index: 10;
  transition: color 0.3s ease;
}

/* ======== Dark Variant CTA ======== */
.service-cta-btn.dark-variant {
  border-top-color: #ffffff;
  color: #ffffff;
}

.service-cta-btn.dark-variant .btn-bg {
  background: #ffffff;
}

.service-cta-btn.dark-variant:hover span,
.service-cta-btn.dark-variant:hover .material-symbols-outlined {
  color: #000000;
}

/* ======== Grayscale Image Effect ======== */
.img-grayscale {
  filter: grayscale(100%);
  transition: filter 1s ease, transform 1s ease;
}

.img-grayscale:hover {
  filter: grayscale(0%);
  transform: scale(1.02);
}

/* ======== Discipline Card Overlay ======== */
.discipline-card .card-image {
  transition: transform 0.7s ease;
}

.discipline-card:hover .card-image {
  transform: scale(1.05);
}

/* ======== Bento Card Hover ======== */
.bento-card {
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* ======== Vertical Text ======== */
.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ======== Hero Parallax-like ======== */
.hero-bg-fixed {
  background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
  /* Disable fixed background on iOS */
  .hero-bg-fixed {
    background-attachment: scroll;
  }
}

/* ======== Process Step Cards ======== */
.process-step {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.process-step:hover {
  background-color: #1a1c1c;
  color: #ffffff;
}

.process-step:hover p {
  opacity: 1 !important;
}

/* ======== Blog Card Hover ======== */
.blog-card {
  transition: border-color 0.3s ease;
}

.blog-card:hover {
  border-color: #1a1c1c;
}

.blog-card:hover .blog-card-image {
  transform: scale(1.05);
}

/* ======== Team Member Hover ======== */
.team-member .member-photo-wrapper {
  transition: border-color 0.3s ease;
}

.team-member:hover .member-photo-wrapper {
  border-color: #1a1c1c;
}

/* ======== Form Focus States ======== */
.form-group label {
  transition: color 0.3s ease;
}

.form-group:focus-within label {
  color: #ED1C24;
}

.form-group input,
.form-group textarea,
.form-group select {
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-bottom-color: #ED1C24;
}

/* ======== Social Link Hover ======== */
.social-link {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ======== Sub-service page hero ======== */
.service-hero {
  min-height: 85vh;
}

@media (max-width: 768px) {
  .service-hero {
    min-height: 70vh;
  }
}

/* ======== Scrollbar (Firefox) ======== */
* {
  scrollbar-width: none;
}

/* ======== Selection Color ======== */
::selection {
  background: #000;
  color: #fff;
}

/* ======== Print Styles ======== */
@media print {
  header, footer, .mobile-menu-overlay {
    display: none !important;
  }
  main {
    padding-top: 0 !important;
  }
  .opacity-0 {
    opacity: 1 !important;
    transform: none !important;
  }
}