/* Miami Parking Lot Paving - Stylesheet */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1E2124;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 70px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #8A6400; text-decoration: underline; }
a:hover { color: #1E2124; }

h1, h2, h3, h4 {
  color: #1E2124;
  line-height: 1.25;
  margin: 0 0 16px 0;
  font-weight: 700;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; margin-top: 0; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 16px 0; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* HEADER */
header {
  background: #1E2124;
  border-bottom: 2px solid #2E3236;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.phone-cta {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #ffffff;
  line-height: 1.1;
}
.phone-cta strong { font-size: 1.25rem; font-weight: 700; }
.phone-cta span { font-size: 0.75rem; color: #C4C8CD; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 4px;
}
nav a:hover { background: #2E3236; color: #FFC51A; }

.cta-button {
  background: #FFC51A;
  color: #1E2124;
  text-decoration: none;
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 4px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.cta-button:hover { background: #E6AE00; color: #1E2124; }

.menu-toggle {
  display: none;
  background: none;
  border: 2px solid #FFC51A;
  font-size: 1.5rem;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  color: #FFC51A;
  font-weight: 700;
}

/* HERO */
.hero {
  background: #F4F4F2;
  padding: 40px 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.hero h1 {
  font-size: 2.25rem;
  margin-bottom: 12px;
}
.hero .subhead {
  font-size: 1.125rem;
  color: #4A4F55;
  margin-bottom: 24px;
}
.trust-strip {
  margin-top: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1E2124;
}

/* FORM CARD */
.form-card {
  background: #ffffff;
  border: 2px solid #1E2124;
  border-radius: 8px;
  padding: 24px;
}
.form-card h2 {
  margin-top: 0;
  font-size: 1.375rem;
  color: #1E2124;
}
.form-card label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #767B80;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 12px;
  font-family: inherit;
}
.form-card textarea { min-height: 80px; resize: vertical; }
.form-card button {
  width: 100%;
  background: #FFC51A;
  color: #1E2124;
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  min-height: 48px;
}
.form-card button:hover { background: #E6AE00; color: #1E2124; }
.form-card .or-call {
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
}
.form-card .or-call a { color: #8A6400; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* SECTIONS */
section {
  padding: 40px 0;
}
section.alt { background: #F4F4F2; }

/* GRID */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* CARDS */
.card {
  background: #ffffff;
  border: 1px solid #DCDDD9;
  border-radius: 6px;
  padding: 20px;
}
.card h3 { margin-top: 12px; }
.card img { border-radius: 4px; }
.card a.learn-more {
  font-weight: 700;
  color: #8A6400;
  text-decoration: none;
}
.card a.learn-more:hover { color: #1E2124; }

/* USPs */
.usp {
  background: #ffffff;
  border: 1px solid #DCDDD9;
  border-radius: 6px;
  padding: 24px;
}
.usp .icon { font-size: 2rem; margin-bottom: 8px; }

/* TESTIMONIALS */
.testimonial {
  background: #ffffff;
  border-left: 4px solid #FFC51A;
  padding: 20px;
  border-radius: 4px;
  border-top: 1px solid #DCDDD9;
  border-right: 1px solid #DCDDD9;
  border-bottom: 1px solid #DCDDD9;
}
.testimonial cite {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  font-style: normal;
  color: #1E2124;
}

/* PROCESS STEPS */
.process-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
.process-step .num {
  background: #1E2124;
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.process-step h3 { margin-top: 8px; }

/* SERVICE AREA LIST */
.area-list { list-style: none; padding: 0; }
.area-list li { padding: 8px 0; border-bottom: 1px solid #DCDDD9; }
.area-list a {
  text-decoration: none;
  color: #8A6400;
  font-weight: 600;
}
.area-list a:hover { color: #1E2124; }

.map-embed iframe {
  width: 100%;
  height: 400px;
  border: 1px solid #DCDDD9;
  border-radius: 6px;
}

/* FAQ ACCORDION */
.faq-item {
  border: 1px solid #DCDDD9;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #ffffff;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  color: #1E2124;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: inherit;
}
.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  color: #8A6400;
  font-weight: 700;
}
.faq-question[aria-expanded="true"]::after {
  content: "−";
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 20px;
}
.faq-answer[aria-hidden="false"] {
  max-height: 800px;
  padding: 0 20px 18px 20px;
}

/* FINAL CTA */
.final-cta {
  background: #1E2124;
  color: #ffffff;
  padding: 50px 0;
  text-align: center;
}
.final-cta h2 { color: #ffffff; }
.final-cta a { color: #FFC51A; }
.final-cta .cta-button { font-size: 1.125rem; padding: 16px 28px; color: #1E2124; }
.final-cta .cta-button:hover { background: #E6AE00; color: #1E2124; }

/* DISCLOSURE */
.disclosure {
  background: #F4F4F2;
  padding: 16px 0;
  font-size: 0.8125rem;
  color: #4A4F55;
  text-align: center;
  border-top: 1px solid #DCDDD9;
}

/* FOOTER */
footer {
  background: #1E2124;
  color: #C4C8CD;
  padding: 40px 0 24px 0;
  font-size: 0.95rem;
}
footer h4 {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
footer a {
  color: #FFC51A;
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.footer-disclosure {
  border-top: 1px solid #4A4F55;
  margin-top: 32px;
  padding-top: 20px;
  font-size: 0.8125rem;
  text-align: center;
}
.footer-bottom-links {
  margin: 12px 0;
  text-align: center;
}
.footer-bottom-links a { margin: 0 8px; }

/* MOBILE STICKY CALL BAR */
.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFC51A;
  color: #1E2124;
  text-align: center;
  padding: 14px;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  z-index: 99;
  display: block;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

/* BREADCRUMBS */
.breadcrumbs {
  padding: 12px 0;
  font-size: 0.875rem;
  color: #4A4F55;
}
.breadcrumbs a { color: #8A6400; }

/* TABLES */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
th, td {
  border: 1px solid #DCDDD9;
  padding: 10px 12px;
  text-align: left;
}
th { background: #F4F4F2; color: #1E2124; }

/* LISTS */
ul.benefit-list {
  list-style: none;
  padding: 0;
}
ul.benefit-list li {
  padding: 8px 0 8px 28px;
  position: relative;
}
ul.benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #8A6400;
  font-weight: 700;
  font-size: 1.125rem;
}

/* DESKTOP LAYOUT */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .mobile-call-bar { display: none; }
  .hero-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .form-card.sticky-form { position: sticky; top: 90px; }
  .hero h1 { font-size: 2.625rem; }
  h2 { font-size: 2rem; }
  section { padding: 60px 0; }
  .map-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
}

/* MOBILE NAV */
@media (max-width: 1023px) {
  .menu-toggle { display: block; order: 3; }
  nav {
    display: none;
    width: 100%;
    flex-direction: column;
    order: 4;
    padding-top: 12px;
    border-top: 1px solid #2E3236;
    margin-top: 8px;
  }
  nav.open { display: flex; }
  nav a {
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #2E3236;
  }
  .cta-button.header-cta { display: none; }
}

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  h1 { font-size: 1.625rem; }
  .hero h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  .header-inner { padding: 10px 16px; }
  .phone-cta strong { font-size: 1.0625rem; }
  .container { padding: 0 16px; }
}

/* ===== Miami Parking Lot Paving additions (appended per spec 0.5; nothing above this line changed except color values and the title comment) ===== */

/* Safety-yellow top stripe (spec 0.6) */
header { border-top: 4px solid #FFC51A; }

/* Language switch link in the header nav */
nav a.lang-switch { color: #FFC51A; }
nav a.lang-switch:hover { color: #1E2124; background: #FFC51A; }

/* Quote form status messages, rendered by site.js */
.form-status {
  border-radius: 6px;
  padding: 16px 18px;
  margin: 0 0 12px 0;
  font-weight: 600;
  line-height: 1.5;
  background: #F4F4F2;
  color: #1E2124;
}
.form-status.success { border: 2px solid #1E2124; }
.form-status.error { border: 2px solid #8A6400; }
.form-status a { color: #8A6400; }
.form-card button[disabled] { opacity: 0.7; cursor: wait; }

/* Grid robustness while image files are pending (Phase 5): a missing image otherwise expands
   its grid track to the declared width attribute. No effect once real images load, because
   img { max-width: 100% } already keeps them inside the column. */
.hero-grid > *, .grid > *, .map-grid > * { min-width: 0; }

/* ===== ADA parking calculator (spec 2.9). Shared markup on the tool page, the ADA service page
   and the Spanish tool page; logic lives in site.js. ===== */
[hidden] { display: none !important; }

.ada-calculator {
  background: #ffffff;
  border: 2px solid #1E2124;
  border-radius: 8px;
  padding: 24px;
  margin: 0 0 24px 0;
}
.ada-calculator h3 { margin-top: 0; }
.ada-calc-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.ada-calc-form input[type="number"],
.ada-calc-form select {
  width: 100%;
  padding: 12px;
  border: 1px solid #767B80;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 8px;
  font-family: inherit;
}
.ada-hint {
  font-size: 0.875rem;
  color: #4A4F55;
  margin: 0 0 16px 0;
}
.ada-calc-form button { width: 100%; }
.ada-error {
  border: 2px solid #8A6400;
  background: #F4F4F2;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0 0 0;
  font-weight: 600;
  color: #1E2124;
}
.ada-calc-results {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #DCDDD9;
}
.ada-calc-results h3 { font-size: 1.375rem; }
.ada-calc-results h4 { font-size: 1.0625rem; margin-bottom: 8px; }
.ada-result-basis { color: #4A4F55; font-size: 0.9375rem; }
.ada-result-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 20px 0;
}
.ada-result-figures > div {
  background: #F4F4F2;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.ada-figure {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #1E2124;
}
.ada-figure-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4A4F55;
  margin-top: 6px;
}
.ada-note { font-size: 0.9375rem; color: #4A4F55; }
@media (min-width: 600px) {
  .ada-result-figures { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 768px) {
  .ada-calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .ada-calc-form button { width: auto; min-width: 240px; }
}

/* ===== Two-tier quote forms. The hero card asks the short set of questions and the long form
   lower down asks everything; these two lines keep them from being mistaken for each other. ===== */
.form-card .form-lede {
  margin: -6px 0 18px 0;
  color: #4A4F55;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.form-card .form-switch {
  margin: 12px 0 0 0;
  font-size: 0.9375rem;
  text-align: center;
  line-height: 1.5;
}
.form-card .form-switch a { color: #8A6400; font-weight: 600; }
.form-card h3 { margin-top: 0; font-size: 1.25rem; color: #1E2124; }
/* Links to #quote and #estimate scroll the card to just below the sticky header, so its heading
   is not hidden under it. 90px matches the sticky hero card's offset. */
.form-card[id] { scroll-margin-top: 90px; }

/* ===== Hero columns. On desktop the quote card sets the height of the hero row and the image
   takes whatever height the copy column has left, between 260px and 420px, so the two columns
   finish level. The zero flex basis keeps the photo's own height out of the row height, so the
   image can shrink as well as grow; cover crops it instead of stretching it. Phones are
   untouched: stacked order and the photo's own aspect ratio. ===== */
@media (min-width: 1024px) {
  .hero .hero-grid { align-items: stretch; }
  .hero .hero-grid > div:first-child { display: flex; flex-direction: column; }
  .hero .hero-grid > div:first-child > img {
    flex: 1 1 0;
    width: 100%;
    min-height: 260px;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
  }
  .hero .hero-grid > div:first-child > :last-child { margin-bottom: 0; }
  .hero .hero-grid > .form-card { align-self: start; }
}

/* Decorative mark above the last footer column. No text, not a link, hidden from screen readers. */
.footer-mark { display: block; margin: 0 0 10px 0; }

/* Rows of call and quote buttons, in the hero and in the page content: 12px apart, including
   when they wrap onto two lines on a phone. The hero row also sits one paragraph space (16px)
   below the hero photo. */
.hero-actions, .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions { margin-top: 16px; }

/* ===== Content tables. The generator wraps each one in .table-scroll, so a table wider than a
   phone scrolls sideways inside its own box and the page itself never scrolls sideways. The
   wrapper takes over the table's vertical margin. ===== */
.table-scroll { overflow-x: auto; margin: 16px 0; }
.table-scroll > table { margin: 0; }