/* ==========================================================================
   BRANCHES PAGE (branches.css)
   Companion to services.css (shared header/nav/footer) — page-specific styles
   ========================================================================== */

.branches-section { background: var(--color-bg-surface); }

.branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.branch-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(46, 111, 64, .14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.branch-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.branch-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.branch-card-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  font-size: 3rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(46, 111, 64, .14), transparent 60%),
    var(--color-primary-subtle);
}

.branch-card-body {
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.branch-card-body h3 {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: .6rem;
}

.branch-card-body p {
  color: var(--color-text-muted);
  font-size: .97rem;
  line-height: 1.7;
}

/* Address line — green panel with SVG location pin, distinct from the description */
.branch-card-body .branch-address {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #ffffff;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 1rem;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
}

.branch-address-icon {
  width: 13px;
  height: 18px;
  flex-shrink: 0;
}

/* Description keeps a minimum gap above the contact panel even when the
   flex auto-margin on the contact block has no spare space to distribute */
.branch-card-body .branch-desc {
  margin-bottom: 1.25rem;
}

/* Contact details block — green panel.
   margin-top: auto pins it (and the Book Appointment button after it) to the
   bottom of the equal-height cards, so both branches' contact details always
   sit at the same level regardless of how long each description is */
.branch-contact {
  list-style: none;
  margin: auto 0 1.5rem;
  padding: .9rem 1rem;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: grid;
  gap: .45rem;
}

.branch-contact li {
  font-size: .92rem;
  color: rgba(255, 255, 255, .92);
}

/* Contact rows — icon + value (phone / email / WhatsApp) */
.branch-contact li.branch-contact-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

.branch-contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: .18rem;
  color: #ffffff;
}

/* WhatsApp brand green so the click-to-chat row is instantly recognisable */
.branch-contact-icon--whatsapp { color: #25d366; }

.branch-contact a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.branch-contact a:hover {
  color: var(--color-primary-subtle);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Buttons — identical to the .btn / .btn-primary system in index.css so the
   "Book Appointment" CTAs match the "Learn More" button on the home page
   (index.css is not loaded on this page, so its base button styles are mirrored)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(31, 77, 141, 0.35);
}

.btn-primary:hover {
  background-color: var(--color-secondary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 77, 141, 0.45);
}

/* Booking CTA — same design as index.html's "Learn More" (.btn.btn-primary);
   only layout is added here so .btn-primary fully controls the appearance */
.branch-book-btn {
  align-self: flex-start;
}

@media (max-width: 768px) {
  .branch-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER — SHARED WITH services.css (page-specific override file)
   These styles mirror the footer system in services.css so the footer
   renders correctly even if this stylesheet is loaded independently.
   ========================================================================== */

.site-footer {
  background: var(--color-primary-dark);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding: 4.5rem 0 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-brand { display: flex; flex-direction: column; gap: 1rem; }

.site-footer .brand-logo { text-decoration: none; }

.site-footer .footer-brand-name {
  color: #fff;
  text-shadow: none;
  white-space: nowrap;
}

.footer-desc {
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 320px;
}

/* Social media icons (footer brand column) */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: all var(--transition-fast);
}

.footer-social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  display: block;
}

.footer-social-link:hover {
  background: #fff;
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.footer-heading {
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
  color: #fff;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   FOOTER RESPONSIVE — TABLET & MOBILE GRID COLLAPSE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --container-max-width: 540px; }

  .container { padding: 0 1.25rem; }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand { grid-column: 1 / -1; }

  .footer-social { gap: 0.45rem; }
  .footer-social-link {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
  }
  .footer-social-link svg { width: 15px; height: 15px; }
}

/* Small phones */
@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand { grid-column: auto; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding-top: 1.5rem;
  }

  .footer-social { gap: 0.4rem; }
  .footer-social-link {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
  }
  .footer-social-link svg { width: 14px; height: 14px; }
}