/*
Theme Name: Pronto Garage Doors
Theme URI: https://garagepronto.com
Author: Leads Up AI
Description: Block theme for Pronto Garage Doors. Pages are editable in the block editor; the header and footer are template parts.
Version: 2.9
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: pronto
*/

/* ------------------------------------------------------------------
   Site additions layered on top of the compiled utility stylesheet.
   app.css is a purged Tailwind build, so any class the original site
   never used does not exist in it. Anything new is written here.
   ------------------------------------------------------------------ */

/* BBB Accredited Business badge in the hero trust row, with the hairline
   rule that separates it from the review count. */
.pronto-bbb-badge {
  display: block;
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

.pronto-trust-divider {
  display: block;
  width: 1px;
  height: 30px;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* On a phone the badge wraps onto its own centred line, where a divider
   hanging off the end of the row above it would read as an artefact. */
@media (max-width: 640px) {
  .pronto-bbb-badge { height: 36px; }
  .pronto-trust-divider { display: none; }
}

/* ------------------------------------------------------------------
   Mobile refinements. Scoped to phone widths — the desktop layout is
   untouched.
   ------------------------------------------------------------------ */

@media (max-width: 640px) {

  /* The Thumbtack review card was laid out as one wide row: wordmark,
     divider and the star column together are wider than a phone, so
     "163 reviews" was pushed past the right edge and the whole page
     scrolled sideways. Centre it and let it wrap instead. */
  a[href*="thumbtack.com"] {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    gap: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  a[href*="thumbtack.com"] > .w-px { display: none; }
  a[href*="thumbtack.com"] .flex-col { align-items: center; text-align: center; }
  a[href*="thumbtack.com"] .flex-col > .flex { flex-wrap: wrap; justify-content: center; }
  a[href*="thumbtack.com"] .ml-1 { margin-left: 0; }

  /* Footer links sat 16-20px tall with very little separation, which is
     an uncomfortably small target for a thumb. */
  footer.wp-block-template-part li > a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* Same for the two-column "Cities We Serve" list. */
  .bg-pronto-dark.rounded-2xl .grid.grid-cols-2 > div { min-height: 40px; }
  .bg-pronto-dark.rounded-2xl .grid.grid-cols-2 > div > a {
    display: block;
    padding: 0.375rem 0;
  }
}

/* The menu button was a 36px target; 44px is the comfortable minimum. */
@media (max-width: 1023px) {
  [data-pronto-mobile-toggle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* The quote form's toast is positioned `fixed` with no left offset, so
   it would render inset from the right edge instead of spanning. */
.wp-block-group.fixed.top-0.z-\[100\] { left: 0; right: 0; }

/* Visible breadcrumb trail, matching the BreadcrumbList JSON-LD. */
.pronto-breadcrumb {
  max-width: 80rem;
  margin: 0 auto;
  /* The header is a 60px phone bar plus an 80px nav, so the trail has to clear
     140px or it renders underneath them. */
  padding: 152px 1rem 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  position: relative;
  z-index: 30;
}

/* Dark heroes have empty space under the nav, so the trail is laid over it and
   the negative margin cancels the height it would otherwise add. */
.pronto-breadcrumb.is-on-dark { margin-bottom: -172px; }
.pronto-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
}
.pronto-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.pronto-breadcrumb li + li::before { content: "/"; color: #9ca3af; }
.pronto-breadcrumb a { color: #6b7280; text-decoration: none; }
.pronto-breadcrumb a:hover { color: #F47C20; text-decoration: underline; }
.pronto-breadcrumb [aria-current="page"] { color: #2C3038; font-weight: 600; }

/* On a dark hero the trail has to invert or it disappears. */
.pronto-breadcrumb.is-on-dark ol,
.pronto-breadcrumb.is-on-dark a { color: rgba(255,255,255,0.65); }
.pronto-breadcrumb.is-on-dark [aria-current="page"] { color: #fff; }

@media (max-width: 640px) {
  .pronto-breadcrumb { padding-top: 150px; font-size: 0.75rem; }
  .pronto-breadcrumb.is-on-dark { margin-bottom: -168px; }
}

/* Category and tag archives render through index.html, which supplies no
   heading; inc/seo-enhance.php injects one and this gives it the same
   proportions as a page hero. */
.pronto-archive-head {
  background: #080808;
  padding: 0 0 3rem;
}
/* The trail inside the archive header already clears the fixed nav. */
.pronto-archive-head .pronto-breadcrumb { margin-bottom: 1.5rem; }
.pronto-archive-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.pronto-archive-head h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.pronto-archive-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  max-width: 42rem;
  margin-top: 0.75rem;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .pronto-archive-head { padding-top: 150px; padding-bottom: 2rem; }
}

/* Archive post cards. The theme drops the core block stylesheet, so the query
   loop needs its own styling to match the hand-built cards on /blog. */
.pronto-card { display: flex; flex-direction: column; height: 100%; transition: box-shadow .3s; }
.pronto-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.pronto-card > .p-6 { display: flex; flex-direction: column; flex: 1; }

.pronto-card-media { margin: 0; }
.pronto-card-media img {
  display: block; width: 100%; height: 12rem;
  object-fit: cover; transition: transform .3s;
}
.pronto-card:hover .pronto-card-media img { transform: scale(1.05); }

.pronto-card-date {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: #F47C20; font-weight: 700; margin: 0 0 .5rem;
}
.pronto-card-title { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.pronto-card-title a { color: #080808; text-decoration: none; }
.pronto-card:hover .pronto-card-title a { color: #F47C20; }
.pronto-card-excerpt { color: #4b5563; font-size: .9rem; line-height: 1.6; margin: 0; }
.pronto-card-excerpt a { color: #F47C20; font-weight: 600; text-decoration: none; }

.pronto-pagination {
  display: flex; gap: .5rem; align-items: center; justify-content: center;
  margin-top: 3rem; flex-wrap: wrap;
}
.pronto-pagination a, .pronto-pagination span {
  padding: .5rem .9rem; border-radius: 9999px; text-decoration: none;
  font-size: .875rem; font-weight: 600; color: #2C3038; background: #fff;
  border: 1px solid #e5e7eb; min-height: 40px; display: inline-flex; align-items: center;
}
.pronto-pagination a:hover { border-color: #F47C20; color: #F47C20; }
.pronto-pagination .current { background: #F47C20; color: #fff; border-color: #F47C20; }