/* MemberLock's own brand layer over site-kit's blocks.css (designer round 1, doorman#12). Loaded last on every page. */

/* Header: the lock mark inline, left of the wordmark; the menu on the same row, even on a phone */
header.wp-block-group { padding-block: 0.75rem; }
header .wp-block-columns { flex-wrap: nowrap !important; gap: 0.75rem; justify-content: space-between; }
header .wp-block-column { flex: 0 1 auto; flex-basis: auto !important; }
header .wp-block-column:first-child { display: flex; align-items: center; gap: 0.5rem; }
header .wp-block-site-logo img { width: 28px; height: 28px; }
header .wp-block-navigation__container { justify-content: flex-end; gap: 0 1.25rem; flex-wrap: nowrap; }
@media (max-width: 30rem) {
  header .wp-block-site-title { font-size: 1.1rem; }
  header .wp-block-navigation__container { gap: 0 0.75rem; }
  header .wp-block-navigation a.wp-block-navigation-item__content { font-size: 0.95rem; }
}

/* Pictures as defined cards: one radius on all four corners and a faint edge */
.hero .wp-block-image img, #barbershop .wp-block-image img { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--st-ink) 14%, transparent); }
#barbershop .wp-block-image { background: #FAF7F2; border-radius: 12px; }   /* the sign-in picture is drawn on the page's own ground */

/* Dale, and the dark band: the hero's body size, a readable measure */
#barbershop .wp-block-columns { align-items: center; }
#barbershop p, #why-us p { font-size: 1.2rem; }
#why-us p { max-width: 40rem; }
@media (min-width: 48rem) {   /* the dark band: one centred block at the text's measure, not a left half and an empty right */
  #why-us .wp-block-columns { justify-content: center; }
  #why-us .wp-block-column { flex: 0 1 40rem; flex-basis: 40rem !important; text-align: center; }
  #why-us p { margin-inline: auto; }
}
@media (max-width: 48rem) { #barbershop .wp-block-columns { row-gap: 1rem; } }

/* What it does: four equal cards, 2x2 on a tablet, stacked on a phone */
.services > .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 48rem) { .services > .wp-block-columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .services > .wp-block-columns { grid-template-columns: repeat(4, 1fr); } }

/* On the way: one slim line under the cards, with its tag */
#on-the-way { padding-top: 0; }
#on-the-way > .wp-block-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
#on-the-way h3 { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.6rem;
  border-radius: 999px; background: var(--st-accent); color: var(--st-ink); }
#on-the-way p { margin: 0; }

/* FAQ: the open/close mark in ink, which meets AA on the page ground (amber does not) */
.wp-block-details summary::after { color: var(--st-ink); }

/* How this site is built: the hero's body size and measure */
#built p { font-size: 1.2rem; max-width: 40rem; }
/* a short page: the closing call follows the words and takes the rest of the room, so nothing sits in an empty gap */
main > #built + .cta:last-child, main > #thanks + .cta:last-child { margin-top: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }