/* ==========================================================================
   Bluesaki Locksmiths — shared enhancements
   Loaded on every page in addition to each page's own inline styles.
   Additive only: nothing here restyles the existing layout, it adds the
   conversion components (CTA buttons, sticky mobile bar, trust strip) that
   are shared site-wide.
   ========================================================================== */

:root {
  --bs-blue: #103c85;
  --bs-blue-dark: #0b346e;
  --bs-gold: #ffcc00;
  --bs-whatsapp: #25d366;
}

/* ----- Paired call / WhatsApp CTA buttons ----- */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
}

.btn-whatsapp {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 35px;
  background: var(--bs-whatsapp);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
  .cta-buttons {
    flex-direction: column;
  }
  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary,
  .cta-buttons .btn-whatsapp {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   Trust / accreditation strip
   Logos are shown at a size customers can actually read. Every logo keeps its
   natural aspect ratio (width:auto against a fixed height) so nothing is
   stretched or cropped.
   ========================================================================== */

.bs-trust {
  background: #f4f7fc;
  padding: 34px 5%;
  border-top: 1px solid #e2e8f4;
  border-bottom: 1px solid #e2e8f4;
}

.bs-trust-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.bs-trust h2,
.bs-trust h4 {
  color: var(--bs-blue);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 22px 0;
  letter-spacing: 0.01em;
}

.bs-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.bs-trust-item {
  background: #fff;
  border: 1px solid #e2e8f4;
  border-radius: 12px;
  padding: 18px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(16, 60, 133, 0.07);
}

/* The logos are very different shapes — City & Guilds is nearly square, NCFE
   is a wide wordmark. Bounding both dimensions and leaving width/height auto
   lets each one fill the box it can without being stretched or cropped, and a
   fixed-height wrapper keeps the row optically aligned. */
.bs-trust-logo {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-trust-item img {
  max-height: 62px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.bs-trust-item i {
  font-size: 46px;
  line-height: 62px;
  color: var(--bs-blue);
}

.bs-trust-item span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-blue);
  line-height: 1.35;
}

.bs-trust-note {
  margin: 20px 0 0 0;
  font-size: 0.9rem;
  color: #56617a;
}

/* Two logos per row on phones rather than shrinking them all onto one line. */
@media (max-width: 768px) {
  .bs-trust {
    padding: 26px 4%;
  }
  .bs-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .bs-trust-logo {
    height: 54px;
  }
  .bs-trust-item img {
    max-height: 54px;
    max-width: 100%;
  }
  .bs-trust-item i {
    font-size: 40px;
    line-height: 54px;
  }
  .bs-trust-item span {
    font-size: 0.88rem;
  }
}

@media (max-width: 360px) {
  .bs-trust {
    padding: 22px 12px;
  }
  .bs-trust-grid {
    gap: 10px;
  }
  .bs-trust-item {
    padding: 14px 8px 12px 8px;
    gap: 9px;
  }
  .bs-trust-logo {
    height: 46px;
  }
  .bs-trust-item img {
    max-height: 46px;
    max-width: 100%;
  }
  .bs-trust-item span {
    font-size: 0.82rem;
  }
}

/* ----- Compact trust row (location + service pages) ----- */
.bs-trust-compact {
  padding: 22px 5%;
}

.bs-trust-compact .bs-trust-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.bs-trust-compact .bs-trust-logo {
  height: 52px;
}

.bs-trust-compact .bs-trust-item img {
  max-height: 52px;
  max-width: 100%;
}

.bs-trust-compact .bs-trust-item i {
  font-size: 38px;
  line-height: 52px;
}

@media (max-width: 768px) {
  .bs-trust-compact .bs-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Google review summary block
   ========================================================================== */

/* display:flex would otherwise beat the UA stylesheet's [hidden] rule and
   leave an empty pill on the page when the rating has not loaded. */
.bs-google-summary[hidden] {
  display: none !important;
}

.bs-google-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin: 0 auto 26px auto;
  padding: 16px 22px;
  max-width: 620px;
  background: #fff;
  border: 1px solid #e2e8f4;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(16, 60, 133, 0.08);
}

.bs-google-summary .bs-g-logo {
  height: 26px;
  width: auto;
}

.bs-google-summary .bs-g-rating {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}

.bs-google-summary .bs-g-stars {
  white-space: nowrap;
  color: #fbbc04;
  font-size: 1.05rem;
  letter-spacing: 1px;
}

.bs-google-summary .bs-g-count {
  font-size: 0.92rem;
  color: #56617a;
}

.bs-review-cta {
  text-align: center;
  margin-top: 26px;
}

.btn-google-reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  background: #fff;
  color: var(--bs-blue);
  border: 2px solid var(--bs-blue);
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-google-reviews:hover,
.btn-google-reviews:focus {
  background: var(--bs-blue);
  color: #fff;
  transform: translateY(-2px);
}

.btn-google-reviews img {
  height: 20px;
  width: auto;
}

/* The review feed is a third-party embed whose internal layout has a minimum
   width wider than a 320px screen. Containing it here means it scrolls inside
   its own box instead of making the whole page scroll sideways. */
.bs-reviews-feed {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* When the third-party review feed fails to render, the section collapses
   instead of leaving an empty "Our Google Reviews" heading on the page.
   bluesaki.js sets this attribute after the feed has had a chance to load. */
[data-bs-reviews][data-bs-reviews-state="empty"] .bs-reviews-feed {
  display: none;
}

/* ==========================================================================
   Sticky mobile contact bar
   Phones get the bar; desktop keeps the existing floating circular buttons.
   ========================================================================== */

.bs-sticky-bar {
  display: none;
}

@media (max-width: 768px) {
  .bs-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bs-sticky-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .bs-sticky-bar a i {
    font-size: 1.15rem;
  }

  .bs-sticky-call {
    background: var(--bs-blue-dark);
  }

  .bs-sticky-wa {
    background: var(--bs-whatsapp);
  }

  /* Keep the bar off the page content. */
  body.bs-has-sticky-bar {
    padding-bottom: 62px;
  }

  /* The floating circles would sit on top of the bar, so on phones the bar
     replaces them. */
  body.bs-has-sticky-bar .floating-contact {
    display: none;
  }
}

/* ==========================================================================
   Homepage above-the-fold
   The long intro used to sit between the H1 and the call buttons, pushing
   CALL NOW below the fold on a phone. Credentials and the review link now
   take that space and the intro follows the buttons.
   ========================================================================== */

.hero-strap {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 18px 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-credentials {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 760px;
}

.hero-credentials li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #103c85;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;
}

.hero-credentials li i {
  color: #b8860b;
  font-size: 0.9rem;
}

.hero-reviews {
  margin: 0 0 22px 0;
}

.hero-reviews a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
}

.hero-reviews a:hover,
.hero-reviews a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

.hero-reviews .bs-g-stars {
  /* Keep the five stars on one line — they were breaking 4 + 1 at 320px. */
  white-space: nowrap;
  color: #ffcc00;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Supporting detail, not the first thing a customer has to read. */
.hero .hero-intro {
  max-width: 800px;
  margin: 30px auto 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.93;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .hero-strap {
    font-size: 1.02rem;
    margin-bottom: 14px;
  }
  .hero-credentials {
    gap: 7px;
    margin-bottom: 14px;
  }
  .hero-credentials li {
    font-size: 0.8rem;
    padding: 6px 11px;
  }
  .hero-reviews {
    margin-bottom: 18px;
  }
  /* Below the buttons the intro is reference detail — keep it from dominating
     the first screen on a phone. */
  .hero .hero-intro {
    font-size: 0.92rem;
    margin-top: 24px;
  }
}

/* ==========================================================================
   Genuine job photographs
   Used by the crawlable gallery grid and by the "Recent Locksmith Work in
   <Area>" sections. Photos and captions are in the page source, so the
   interactive gallery is an enhancement rather than the only way to see them.
   ========================================================================== */

.job-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin: 24px 0 34px 0;
}

.job-photo {
  margin: 0;
  background: #fff;
  border: 1px solid #e2e8f4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 60, 133, 0.07);
  display: flex;
  flex-direction: column;
}

.job-photo img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  background: #eef2f9;
}

.job-photo figcaption {
  padding: 13px 14px 15px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #3d4759;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.job-photo .job-service-link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: #103c85;
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 60, 133, 0.35);
  padding-bottom: 1px;
}

.job-photo .job-service-link:hover,
.job-photo .job-service-link:focus {
  border-bottom-color: #103c85;
}

.static-gallery {
  margin: 10px 0 30px 0;
}

@media (max-width: 600px) {
  .job-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  .job-photo img {
    height: 150px;
  }
  .job-photo figcaption {
    font-size: 0.8rem;
    padding: 10px 11px 12px 11px;
  }
}

/* ---------------------------------------------------------------------------
   Cache busting
   .htaccess caches CSS and JS for a year and these filenames carry no hash,
   so returning visitors would keep an old copy after an edit. Every page
   links these as bluesaki.css?v=N / bluesaki.js?v=N — bump N in every page
   when you change either file:

     grep -rl 'bluesaki\.\(css\|js\)?v=' *.html services/*.html \
       | xargs sed -i '' 's/bluesaki\.css?v=1/bluesaki.css?v=2/; s/bluesaki\.js?v=1/bluesaki.js?v=2/'
   --------------------------------------------------------------------------- */

/* Before-and-after jobs, flagged so they are findable rather than buried in
   the caption text. */
.job-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 3px 9px;
  background: #103c85;
  color: #fff;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   Mobile navigation tap targets
   The dropdown menu links rendered 34px tall, under the 44px minimum for a
   discrete control. Padding rather than font-size keeps the design unchanged
   while making them comfortable to hit. Applies only where the menu is a
   dropdown, so the desktop bar is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 12px;
  }
}


/* ---------------------------------------------------------------------------
   Very narrow phones (iPhone SE and similar, <=380px)
   At 2.5rem the homepage headline runs to five lines and pushes the call
   buttons off the first screen — the opposite of what the above-the-fold work
   is for. Scaling the headline and trimming the hero padding brings the
   credentials, rating and both buttons back into view.
   --------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 1.95rem;
    line-height: 1.16;
  }

  .hero {
    padding-top: 34px;
    padding-bottom: 44px;
  }

  .hero-strap {
    font-size: .94rem;
    margin-bottom: 12px;
  }

  .hero-credentials li {
    font-size: .76rem;
    padding: 5px 9px;
  }

  /* Stars above, label below, rather than a ragged two-line row. */
  .hero-reviews a {
    flex-direction: column;
    gap: 3px;
  }
}


/* ---------------------------------------------------------------------------
   Image aspect ratio
   Every image carries width/height attributes so the browser can reserve the
   right box before the file loads. Those attributes are presentational hints,
   so where the site's own CSS sizes an image on one axis only — .logo img sets
   height, .badge-logos img sets width — the hint pinned the other axis and
   squashed the image. Releasing both axes here lets the site's CSS size the
   axis it cares about and the browser derive the other from the attributes'
   aspect ratio. Type selector, so any class-based rule still wins.
   --------------------------------------------------------------------------- */
img {
  width: auto;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Trust strip / services overlap
   .services carries margin-top:-40px so the service cards ride up over the
   hero. With the trust strip moved between them, that negative margin was
   pulling the cards over the "Read Our Google Reviews" button instead. The
   overlap only ever made sense against the hero, so it is cancelled when the
   trust strip is what precedes them.
   --------------------------------------------------------------------------- */
.bs-trust + .services,
.bs-trust + section.services {
  margin-top: 0;
  background: var(--bg-light, #e4ebf3);
}