/* Shared interaction states: used after each page's layout styles. */
:root {
  --action-green: #006644;
  --action-green-hover: #004d33;
  --action-gold: #d4af37;
  --action-gold-hover: #bf9724;
}

a, button, input {
  -webkit-tap-highlight-color: rgba(0, 102, 68, .15);
}

a, button, .btn, summary {
  transition: background-color .16s ease, color .16s ease,
    border-color .16s ease, box-shadow .16s ease;
}

button, .btn { cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border: 2px solid transparent;
  border-radius: 30px;
  background: var(--action-gold);
  color: #111;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.btn:hover, .btn:focus-visible {
  background: var(--action-gold-hover);
  color: #111;
  transform: none;
}

.btn-outline, .btn-secondary {
  border-color: var(--action-green);
  background: #fff;
  color: var(--action-green);
}

.btn-outline:hover, .btn-secondary:hover,
.btn-outline:focus-visible, .btn-secondary:focus-visible {
  border-color: var(--action-green);
  background: #e7f1eb;
  color: var(--action-green-hover);
}

.booking-header-link:hover, .booking-whatsapp-link:hover,
.booking-header-link:focus-visible, .booking-whatsapp-link:focus-visible {
  background: var(--action-green-hover);
  color: #fff;
}

.jajeam-nav ul li a:hover, .jajeam-nav ul li a:focus-visible {
  background: #dcece3;
  color: var(--action-green-hover);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.booking-estimate-link:hover, .booking-estimate-link:focus-visible,
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  border-color: var(--action-green);
  background: #e7f1eb;
  color: var(--action-green-hover);
}

.jajeam-home-link { border-radius: 6px; }
.jajeam-home-link:hover { background: #e7f1eb; }

/* The same red feedback for every WhatsApp booking button. */
a:is(.btn, .booking-header-link, .booking-whatsapp-link, .whatsapp-float)[href^="https://wa.me/"]:is(:hover, :focus-visible) {
  background: #bb0000;
  border-color: #bb0000;
  color: #fff;
}

main a:not(.btn), footer a {
  text-underline-offset: 4px;
}

main a:not(.btn):hover, main a:not(.btn):focus-visible,
footer a:hover, footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.service-content h3 a:hover, .text-link:hover,
.service-links a:hover, .breadcrumbs a:hover, .booking-help a:hover {
  color: var(--action-green-hover);
}

/* Service cards are one large link, with one keyboard stop each. */
main a.service-card, main a.overview-card {
  border: 1px solid #dce5df;
  color: #26352e;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
main a.service-card { display: block; }
main a.service-card:hover, main a.overview-card:hover,
main a.service-card:focus-visible, main a.overview-card:focus-visible {
  border-color: #006644;
  background: #f3f8f5;
  color: #26352e;
  text-decoration: none;
  transform: none;
}
main a.service-card:is(:hover, :focus-visible) h3,
main a.overview-card:is(:hover, :focus-visible) h3 { text-decoration: underline; text-underline-offset: 4px; }
main a.service-card:active, main a.overview-card:active { background: #dcece3; }
.service-link, .overview-card .text-link { display: inline-block; margin-top: 16px; color: #006644; font-weight: 700; }
.overview-card h3 { margin-top: 0; }
.fleet-card:hover { transform: none; }

@media (max-width: 760px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .service-content, .overview-card { padding: 20px; }
  .service-grid, .overview-grid { gap: 20px; }
  .hero .actions { gap: 12px; }
  .hero .actions .btn { width: 100%; }
  .hero:not(#home) { padding: 40px 0; }
  .hero:not(#home) h1 { font-size: clamp(2rem, 6.5vw, 2.6rem); }
  .hero:not(#home) p { font-size: 1rem; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
}

.fleet-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border: 2px solid #fff;
  background: #26352e;
  color: #fff;
}
.fleet-controls button:hover, .fleet-controls button:focus-visible {
  background: var(--action-green);
}

/* A white inner ring and dark outer ring work on photos and light surfaces. */
body :is(a[href], button, input, summary):focus-visible {
  outline: 3px solid #005438;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.btn:active, .booking-header-link:active, .booking-whatsapp-link:active,
.booking-estimate-link:active, .whatsapp-float:active,
.jajeam-nav ul li a:active, .fleet-controls button:active {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.jajeam-mobile-menu summary:hover,
.jajeam-mobile-menu summary:focus-visible { background: #dcece3; color: #004d33; }
.jajeam-mobile-menu summary:active { box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }

@media (prefers-reduced-motion: reduce) {
  a, button, .btn, summary, .service-card, .fleet-card { transition: none; }
}