/* ──────────────────────────────────────────────────────────────
   Royal Concrete — main.css
   Custom styles that complement Tailwind
────────────────────────────────────────────────────────────── */

/* ── HAZARD STRIPE ── */
.hazard-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    #FFB800,
    #FFB800 20px,
    #000 20px,
    #000 40px
  );
  animation: hazard-scroll 0.8s linear infinite;
}

@keyframes hazard-scroll {
  to { background-position: 56.57px 0; }
}

/* ── TEXT OUTLINE ── */
.text-outline-white {
  -webkit-text-stroke: 1px white;
  color: transparent;
}

/* ── SMOOTH SCROLL ── */
html { scroll-behavior: smooth; }

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 60;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #FFB800;
  transition: .3s cubic-bezier(.4,0,.2,1);
  border-radius: 2px;
}
.hamburger.active { transform: scale(1.3); }
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: #121414;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.77,0,.175,1);
  border-bottom: 6px solid #FFB800;
}
.mobile-menu-overlay.active { transform: translateY(0); }
.mobile-menu-overlay a {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  color: #e3e2e2;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mobile-menu-overlay a:hover { color: #FFB800; }
.mobile-menu-overlay .mobile-menu-call {
  margin-top: 16px;
  display: inline-block;
  background: #FFB800;
  color: #000;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  padding: 14px 32px;
  text-decoration: none;
  text-transform: uppercase;
}

/* ── MOBILE STICKY CTA ── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 20, 20, 0.97);
  border-top: 2px solid #FFB800;
  padding: 10px 16px;
  z-index: 50;
  text-align: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,.6);
}
.mobile-sticky-cta a {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: #FFB800;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 2px solid #FFB800;
  padding: 10px 16px;
}

/* ── CUSTOM LOGO SIZING ── */
.custom-logo { width: auto; height: 64px; object-fit: contain; }

/* ══════════════════════════════════════════
   MOBILE OVERRIDES — everything < 768px
══════════════════════════════════════════ */
@media (max-width: 767px) {
  .hamburger { display: flex; }
  .mobile-sticky-cta { display: block; }
  body { padding-bottom: 60px; }

  /* NAV */
  nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* HERO */
  #hero {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    border-bottom-width: 6px !important;
  }
  #hero-bg-shape { display: none !important; }
  #hero-content { max-width: 100% !important; }
  #hero-content > .flex.items-center { margin-bottom: 14px !important; }
  #hero-content > .flex.items-center span { font-size: 10px !important; letter-spacing: 0.08em !important; }
  #hero-content h1 { font-size: 52px !important; line-height: .95 !important; margin-bottom: 18px !important; }
  #hero-content > p { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 10px !important; max-width: 100% !important; }
  #hero-content > p:last-of-type { font-size: 15px !important; margin-bottom: 24px !important; }
  #hero-content > .flex.flex-wrap { gap: 10px !important; margin-bottom: 28px !important; }
  #hero-content > .flex.flex-wrap a {
    font-size: 18px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  #hero-content > .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding-top: 20px !important;
  }
  #hero-content > .grid span.text-xs { font-size: 11px !important; }

  /* STATS */
  #stats-section { padding: 24px 16px !important; }
  #stats-section .grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 0 !important; }
  #stats-section .grid > div { padding: 0 !important; }
  .stat-number { font-size: 32px !important; }
  .stat-label { font-size: 10px !important; margin-top: 4px !important; }

  /* ABOUT */
  #about { padding-top: 56px !important; padding-bottom: 56px !important; }
  #about h2 { font-size: 38px !important; line-height: 1.05 !important; margin-bottom: 20px !important; }
  #about a.inline-block {
    font-size: 18px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* SERVICES */
  #services { padding-top: 48px !important; padding-bottom: 48px !important; }
  #services h2 { font-size: 38px !important; }
  #services > div:last-child { grid-template-columns: 1fr !important; gap: 12px !important; }
  #services > div:last-child > div { padding: 20px !important; }

  /* EGRESS */
  #egress > div:nth-child(2) { padding: 40px 16px !important; }
  #egress > div:nth-child(3) { padding: 40px 16px !important; }
  #egress h2 { font-size: 36px !important; line-height: 1.05 !important; margin-bottom: 16px !important; }
  #egress li span { font-size: 22px !important; }

  /* QUOTE */
  #quote { padding-top: 48px !important; padding-bottom: 80px !important; }
  #quote h2 { font-size: 36px !important; }
  #quote .bg-\[\#1A1A1A\] { padding: 20px 16px !important; }
  #quote form.ml-4 { margin-left: 0 !important; }

  /* SERVICE AREA */
  #service-area { padding-top: 48px !important; padding-bottom: 48px !important; }
  #service-area h2 { font-size: 38px !important; line-height: 1.05 !important; }
  #service-area > div > div { padding-left: 0 !important; padding-right: 0 !important; }
  #service-area .grid.grid-cols-2 { gap: 8px !important; }
  #service-area .grid.grid-cols-2 > div { padding: 10px 12px !important; }
  #service-area a.inline-block {
    width: 100% !important;
    text-align: center !important;
    font-size: 18px !important;
    padding: 12px 20px !important;
    box-sizing: border-box !important;
  }

  /* TESTIMONIALS */
  #testimonials { padding-top: 48px !important; padding-bottom: 48px !important; }
  #testimonials h2 { font-size: 38px !important; }
  #testimonials .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  #testimonials .grid > div { padding: 20px !important; }

  /* OUR WORK (homepage) */
  #our-work { padding-top: 48px !important; padding-bottom: 48px !important; }
  #our-work h2 { font-size: 38px !important; }
  #our-work .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  #our-work .flex.items-end { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  /* Services — image card content area */
  #services > div:last-child > div > div.p-8 { padding: 16px !important; }

  /* FOOTER */
  footer { padding: 28px 16px !important; }
  footer .footer-links-row { display: none !important; }
  footer .footer-call-row { display: flex !important; }
}

@media (min-width: 768px) {
  .footer-call-row { display: none !important; }
}