/* Matata Presence: the spacing and layout rules theme.json cannot express.
 *
 * theme.json styles blocks by TYPE. These rules style our composed sections
 * by the class the applier gives them, which is how one group block becomes
 * a hero and another becomes a contact card without either needing a plugin
 * or a custom block.
 */
.matata-hero, .matata-services, .matata-about, .matata-gallery,
.matata-quotes, .matata-hours, .matata-faq, .matata-contact,
.matata-products {
  padding-block: var(--wp--preset--spacing--50);
}
.matata-hero + *, .matata-services, .matata-about, .matata-gallery,
.matata-quotes, .matata-hours, .matata-faq, .matata-contact,
.matata-products {
  border-top: 1px solid var(--wp--preset--color--hair);
}
.matata-hero { padding-block-start: var(--wp--preset--spacing--60); border-top: 0; }
.matata-hero .lead, .matata-contact .lead {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  max-width: 60ch;
}
.matata-band {
  background: var(--wp--preset--color--tint);
  border-radius: 18px;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  text-align: center;
  margin-block: var(--wp--preset--spacing--50);
  border-top: 0;
}
/* Service cards. A tinted panel so three items read as three things rather
   than as one long column of headings. */
.matata-services .wp-block-column {
  background: var(--wp--preset--color--tint);
  border: 1px solid var(--wp--preset--color--hair);
  border-radius: 14px;
  padding: var(--wp--preset--spacing--30);
}
.matata-services .wp-block-column h3 { margin-block-start: 0; }
.matata-services .wp-block-column p { color: var(--wp--preset--color--muted); margin-block-end: 0; }
.matata-hours table { max-width: 420px; }
.matata-hours td:first-child { color: var(--wp--preset--color--muted); width: 50%; }
.matata-faq .wp-block-details summary { font-weight: 600; cursor: pointer; }
.matata-gallery img { aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.matata-footer { margin-block-start: var(--wp--preset--spacing--50); }

/* A skip link that is invisible until a keyboard user reaches it. */
.skip-link.screen-reader-text {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link.screen-reader-text:focus { left: 0; }

@media (max-width: 720px) {
  .matata-services .wp-block-columns,
  .matata-about .wp-block-columns { gap: var(--wp--preset--spacing--30); }
}

/* The hours table. WordPress's default table block draws a border on every
   cell, which reads as a spreadsheet rather than as opening hours. */
.matata-hours table, .matata-hours td, .matata-hours th { border: 0; }
.matata-hours tr { border-bottom: 1px solid var(--wp--preset--color--hair); }
.matata-hours td { padding-block: 0.55rem; }

/* A centred band means the button is centred too. Without this the heading
   centres and the button sits hard left, which looks like a mistake. */
.matata-band .wp-block-buttons { justify-content: center; }
.matata-band > * { margin-inline: auto; }