/* ════════════════════════════════════════════════════════════
   A Coast Roof LLC — Global Stylesheet
   Fonts   : Rubik (Google Fonts)
   Palette : Orange #eb6607 · Teal #03a89e · Navy #272e67
             Body text #646363 · Muted #6B7280
             Sections: white / #f8f9fa
════════════════════════════════════════════════════════════ */

/* ── Base Typography ───────────────────────────────────── */
body {
  font-family: "Rubik", sans-serif;
  color: #646363;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

h1 {
  font-size: 3.25rem;
  line-height: 3.875rem;
}

h1,
h2,
h3,
h4 {
  font-family: "Rubik", sans-serif;
  color: #272e67;
  font-weight: 500;
}

/* ── Layout Utilities ──────────────────────────────────── */
.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.clip-diagonal-rev {
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
}

/* ── Navigation ────────────────────────────────────────── */
.hover-line {
  position: relative;
}
.hover-line::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #eb6607;
  transition: width 0.3s ease;
}
.hover-line:hover::after {
  width: 100%;
}

.nav-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: block;
}

/* ── Cards ─────────────────────────────────────────────── */
.card-lift {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ── Animations ────────────────────────────────────────── */
@keyframes badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(235, 102, 7, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(235, 102, 7, 0);
  }
}
.badge-pulse {
  animation: badge-pulse 2.5s infinite;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp 0.7s ease forwards;
}

/* ── Process Step Connector ─────────────────────────────── */
.step-line {
  position: relative;
}
.step-line:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.5rem;
  left: calc(50% + 2.5rem);
  width: calc(100% - 5rem);
  height: 2px;
  background: linear-gradient(90deg, #eb6607, transparent);
}

/* ── Stars ─────────────────────────────────────────────── */
.star {
  color: #f59e0b;
}

/* ── FAQ Accordion ─────────────────────────────────────── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease;
}
.faq-answer.open {
  max-height: 600px;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
}
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-item {
  transition: border-color 0.3s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}
.faq-item.open {
  border-color: rgba(235, 102, 7, 0.4);
}

/* ── Buttons ────────────────────────────────────────────── */
.button--default {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 1.0625rem 2.5rem 0.875rem;
  color: #fff;
  background-color: #eb6607;
  border: 0.0625rem solid #eb6607;
  border-radius: 6.25rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  transition:
    background-color 0.25s,
    border-color 0.25s;
}
.button--default:hover {
  background-color: #03a89e;
  border-color: #03a89e;
}

.button--secondary {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 1.0625rem 2.5rem 0.875rem;
  color: #03a89e;
  background-color: #fff;
  border: 0.0625rem solid #03a89e;
  border-radius: 6.25rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.button--secondary:hover {
  background-color: #03a89e;
  color: #fff;
}

/* ════════════════════════════════════════════════════════════
   LIGHT MODE — Section Color System
   Primary : #ffffff   Alt : #f8f9fa
   Heading : #272e67   Body : #646363   Muted : #6B7280
════════════════════════════════════════════════════════════ */

/* Navbar */
#site-header,
header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid #e5e7eb;
}
header .text-gray-300 {
  color: #646363 !important;
}
header .hover\:text-white:hover {
  color: #272e67 !important;
}
#mobile-menu {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
#mobile-menu a.text-gray-300 {
  color: #646363 !important;
}

/* Section backgrounds */
.ls {
  background: #ffffff !important;
}
.ls-a {
  background: #f8f9fa !important;
}
.ls-w {
  background: #ffffff !important;
}

/* Headings in light sections */
.ls h1,
.ls h2,
.ls h3,
.ls h4,
.ls-a h1,
.ls-a h2,
.ls-a h3,
.ls-a h4,
.ls-w h1,
.ls-w h2,
.ls-w h3,
.ls-w h4 {
  color: #272e67 !important;
}

/* Heading spans (accent spans keep their color) */
.ls h1 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls h2 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls h3 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls-a h1 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls-a h2 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls-a h3 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls-w h1 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls-w h2 span:not(.text-brand-orange):not([class*="text-brand"]),
.ls-w h3 span:not(.text-brand-orange):not([class*="text-brand"]) {
  color: #272e67 !important;
}

/* Body text in light sections */
.ls p,
.ls li,
.ls label,
.ls-a p,
.ls-a li,
.ls-a label,
.ls-w p,
.ls-w li,
.ls-w label {
  color: #646363 !important;
}

.ls .text-gray-300,
.ls .text-gray-400,
.ls .text-gray-500,
.ls-a .text-gray-300,
.ls-a .text-gray-400,
.ls-a .text-gray-500,
.ls-w .text-gray-300,
.ls-w .text-gray-400,
.ls-w .text-gray-500 {
  color: #6b7280 !important;
}

/* Decorative watermark */
.ls [class*="text-white/"],
.ls-a [class*="text-white/"] {
  color: rgba(39, 46, 103, 0.05) !important;
}

/* Cards */
.ls .bg-brand-navy,
.ls .bg-brand-navyMid,
.ls-a .bg-brand-navy,
.ls-a .bg-brand-navyMid,
.ls-w .bg-brand-navy,
.ls-w .bg-brand-navyMid {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
}

.ls .bg-brand-navy h3,
.ls .bg-brand-navy h4,
.ls .bg-brand-navyMid h3,
.ls .bg-brand-navyMid h4,
.ls-a .bg-brand-navy h3,
.ls-a .bg-brand-navy h4,
.ls-a .bg-brand-navyMid h3,
.ls-a .bg-brand-navyMid h4 {
  color: #272e67 !important;
}

.ls .bg-brand-navy p,
.ls .bg-brand-navyMid p,
.ls-a .bg-brand-navy p,
.ls-a .bg-brand-navyMid p {
  color: #646363 !important;
}

/* Borders */
.ls .border-white\/10,
.ls-a .border-white\/10,
.ls-w .border-white\/10 {
  border-color: #e5e7eb !important;
}
.ls .border-t.border-white\/10,
.ls-a .border-t.border-white\/10 {
  border-color: #e5e7eb !important;
}

/* Icon backgrounds */
.ls .bg-brand-orange\/20,
.ls-a .bg-brand-orange\/20,
.ls-w .bg-brand-orange\/20 {
  background: #fff0e8 !important;
}
.ls .bg-brand-orange\/5,
.ls-a .bg-brand-orange\/5 {
  background: #fff7f2 !important;
}

/* Step circles */
.ls .border-2.border-brand-orange {
  background: #ffffff !important;
}

/* Placeholder image blocks */
.ls .bg-gray-700,
.ls-a .bg-gray-700,
.ls-w .bg-gray-700,
.ls .bg-gray-600,
.ls-a .bg-gray-600,
.ls .bg-gray-800,
.ls-a .bg-gray-800 {
  background: #d1d9e6 !important;
}

/* Floating stat cards */
.ls .bg-brand-navyMid.border,
.ls-a .bg-brand-navyMid.border {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Service area tags */
.ls .bg-brand-navyMid.border.border-white\/10,
.ls-a .bg-brand-navyMid.border.border-white\/10 {
  background: #f8f9fa !important;
  border-color: #e5e7eb !important;
  color: #646363 !important;
}

/* Footer */
footer {
  background: #eb660726 !important;
}

/* Form inputs */
.ls-a .form-input,
.ls .form-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #646363 !important;
}
.ls-a .form-input:focus,
.ls .form-input:focus {
  border-color: #eb6607 !important;
  box-shadow: 0 0 0 3px rgba(235, 102, 7, 0.15) !important;
}
.ls-a .form-input::placeholder,
.ls .form-input::placeholder {
  color: #9ca3af !important;
}
.ls-a select.form-input option {
  background: #ffffff !important;
  color: #646363 !important;
}

/* Trust badges */
.ls .bg-brand-navyMid.rounded-xl {
  background: #f8f9fa !important;
}
.ls-a .bg-brand-navyMid.rounded-xl {
  background: #f8f9fa !important;
}
.ls .bg-brand-navyMid.rounded-xl .text-brand-orange {
  color: #eb6607 !important;
}
.ls .bg-brand-navyMid.rounded-xl .text-gray-400 {
  color: #6b7280 !important;
}

/* Project grid cards */
.ls .bg-gray-700.project-card,
.ls-a .bg-gray-700.project-card,
.ls .bg-gray-600.project-card,
.ls-a .bg-gray-600.project-card,
.ls .bg-gray-800.project-card,
.ls-a .bg-gray-800.project-card {
  background: #c8d3e4 !important;
}

/* FAQ items */
.ls-a .faq-item {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
.ls-a .faq-item h1,
.ls-a .faq-item h2,
.ls-a .faq-item h3,
.ls-a .faq-item h4,
.ls-a .faq-item span {
  color: #272e67 !important;
}
.ls-a .faq-answer {
  color: #646363 !important;
}
.ls-a .faq-item.open {
  border-color: rgba(235, 102, 7, 0.4) !important;
}

/* Filter buttons (projects page) */
.ls-a .filter-btn:not(.active) {
  border-color: #d1d5db !important;
  color: #6b7280 !important;
  background: #ffffff !important;
}
.ls-a .filter-btn:not(.active):hover {
  border-color: #eb6607 !important;
  color: #eb6607 !important;
}

/* Category buttons (FAQ page) */
.ls-a .cat-btn:not(.active) {
  color: #6b7280 !important;
}
.ls-a .cat-btn:not(.active):hover {
  background: #f8f9fa !important;
  color: #272e67 !important;
}

/* Social area */
.ls-w .bg-brand-navyMid {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Map placeholder */
.ls .bg-gray-700.rounded-2xl,
.ls-a .bg-gray-700.rounded-2xl {
  background: #d1d9e6 !important;
}

/* No-results text */
.ls-a #no-results p {
  color: #6b7280 !important;
}

/* Orange CTA sidebar */
.ls-a .bg-brand-orange {
  background: #eb6607 !important;
}
.ls-a .bg-brand-orange * {
  color: #ffffff !important;
}
.ls-a .bg-brand-orange h3,
.ls-a .bg-brand-orange h4 {
  color: #ffffff !important;
}

.ls-a .bg-brand-orange .bg-white,
.ls .bg-brand-orange .bg-white {
  background: #ffffff !important;
}
.ls-a .bg-brand-orange .bg-white * {
  color: initial !important;
}
.ls-a .bg-brand-orange .bg-white .text-brand-navy {
  color: #272e67 !important;
}
.ls-a .bg-brand-orange .bg-white .text-brand-orange {
  color: #eb6607 !important;
}
.ls-a .bg-brand-orange .bg-white .font-display {
  color: #272e67 !important;
}
.ls-a .bg-brand-orange .bg-white p {
  color: #6b7280 !important;
}

/* Process connector (light bg) */
.ls .step-line:not(:last-child)::after {
  background: linear-gradient(90deg, #eb6607, transparent) !important;
}

/* Card hover (light bg) */
.ls .card-lift:hover,
.ls-a .card-lift:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE — Form Styles
════════════════════════════════════════════════════════════ */
.form-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-family: "Rubik", sans-serif;
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.form-input:focus {
  border-color: #eb6607;
  box-shadow: 0 0 0 3px rgba(235, 102, 7, 0.15);
}
.form-input::placeholder {
  color: #9ca3af;
}

.form-label {
  font-family: "Rubik", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.4rem;
}

select.form-input option {
  background: #ffffff;
  color: #374151;
}

/* ════════════════════════════════════════════════════════════
   PROJECTS PAGE — Grid & Lightbox
════════════════════════════════════════════════════════════ */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
}

.project-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 27, 58, 0.92) 0%,
    rgba(12, 26, 46, 0.45) 50%,
    transparent 100%
  );
  opacity: 1;
  transition: opacity 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.project-card .placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}
.project-card:hover .placeholder-img {
  transform: scale(1.05);
}

.filter-btn.active {
  background: #eb6607;
  color: #fff;
  border-color: #eb6607;
}

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}
#lightbox.open {
  display: flex;
}

/* ════════════════════════════════════════════════════════════
   WHITE-SECTION TEXT OVERRIDES
   (sections/cards changed from dark to white background)
════════════════════════════════════════════════════════════ */

/* Section headings */
section.bg-brand-navy h1,
section.bg-brand-navy h2,
section.bg-brand-navy h3,
section.bg-brand-navy h4,
section.bg-brand-navyMid h1,
section.bg-brand-navyMid h2,
section.bg-brand-navyMid h3,
section.bg-brand-navyMid h4,
section.bg-brand-slate h1,
section.bg-brand-slate h2,
section.bg-brand-slate h3,
section.bg-brand-slate h4 {
  color: #111111 !important;
}

/* Card headings (service, review, FAQ cards) */
.card-lift h3,
.card-lift h4 {
  color: #111111 !important;
}

/* Inline text-white elements inside white-bg divs */
div.bg-brand-navyMid .text-white,
div.bg-brand-navy .text-white,
div.bg-brand-slate .text-white {
  color: #111111 !important;
}

/* FAQ accordion headings */
.faq-item .text-white {
  color: #111111 !important;
}

/* Preserve white text on orange backgrounds */
.bg-brand-orange h1,
.bg-brand-orange h2,
.bg-brand-orange h3,
.bg-brand-orange h4,
.bg-brand-orange .text-white,
.bg-brand-orange span,
.bg-brand-orange p {
  color: #ffffff !important;
}
a.bg-brand-orange,
button.bg-brand-orange {
  color: #ffffff !important;
}