/* Layout shell (T03): skip link and main focus target. Colours come from the base tokens (T02). */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: Canvas;
  color: CanvasText;
  transform: translateY(-120%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* main is a focus target for the skip link only, not a control. */
.site-main:focus {
  outline: none;
}

/*
  The starter's cookie banner, Cookie settings dialog and cookie list (move 1, contract C3) in Boyd's colours.
  The starter's consent.css reads its colours from these --consent-* tokens; "html" makes Boyd's values win over its
  defaults, whatever order the stylesheets load in.
*/
html .site-consent-banner,
html .site-consent-dialog,
html .site-cookie-list {
  --consent-text: var(--c-slate);
  --consent-background: var(--c-white);
  --consent-accent: var(--c-blue-600);
  --consent-accent-text: var(--c-white);
  --consent-focus: var(--c-mid-blue);
  --consent-muted: var(--c-grey-600);
  --consent-line: var(--c-grey-300);
}

/*
  The starter's wave 4 markup in Boyd's style (move 2, BM2): the marketing blocks (Form section, Gated download,
  Newsletter signup, Office and map; Boyd's block list wraps them in a white section and the page gutter), Get directions
  and the click-to-load map, and the cookie list on the Privacy page (content-end slot). The starter's stylesheets
  (lead-capture.css, office-map.css, popup.css, forms.css) read --starter-* tokens; Boyd sets them from its own tokens
  here, and "html" makes Boyd's rules win whatever order the stylesheets load in. Tokens only, mobile first.
*/
:root {
  --starter-text: var(--c-deep-blue);
  --starter-background: var(--c-white);
  --starter-link: var(--c-mid-blue);
  --starter-focus: var(--c-mid-blue);
  --starter-muted: var(--c-grey-600);
}

html .marketing-section__inner > * { max-width: 760px; margin: 0; }
html .marketing-section h2,
html .site-privacy-cookies h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-heading);
}
html .marketing-section p { color: var(--color-text); line-height: var(--lh-body); }
html .lead-block__intro,
html .form-block__intro { font-size: var(--fs-body-lg); margin: 0 0 var(--space-6); }

/* Master's Gallery section (M22, BV-c part 8; Boyd's own Gallery block keeps css/blocks/gallery.css): the container's
   full width, Boyd's folder headings, photo corners and pill filters (Deep Blue when pressed). */
html .marketing-section__inner > .gallery { max-width: none; margin: 0; }
html .gallery[data-gallery] .gallery__folder-heading {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-heading);
}
html .gallery[data-gallery] .gallery__item { border-radius: var(--radius-media); }
html .gallery[data-gallery] .gallery__filters { gap: var(--space-2); margin: 0 0 var(--space-6); }
html .gallery[data-gallery] .gallery__filter,
html .gallery[data-gallery] .gallery__more {
  min-height: var(--tap-min);
  padding: 10px 22px;
  border: var(--border-width) solid var(--c-deep-blue);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  color: var(--c-deep-blue);
  background: var(--c-white);
}
html .gallery[data-gallery] .gallery__filter[aria-pressed="true"] { color: var(--c-white); background: var(--c-deep-blue); }
html .gallery[data-gallery] .gallery__filter:focus-visible,
html .gallery[data-gallery] .gallery__more:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }

/* The starter's Forms theme "site": the marketing blocks' partials render their forms in it (they name the theme
   themselves; reported to master, BM2), so it gets Boyd's field and button look here. */
html .site-form { gap: var(--space-6); }
html .site-form__label { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-heading); }
html .site-form__required { color: var(--color-muted); font-weight: var(--fw-regular); }
html .site-form__help,
html .site-form__privacy,
html .site-form__note p { color: var(--color-muted); font-size: var(--fs-body); }
html .site-form__control input[type="text"],
html .site-form__control input[type="email"],
html .site-form__control input[type="tel"],
html .site-form__control input[type="number"],
html .site-form__control input[type="url"],
html .site-form__control input[type="date"],
html .site-form__control select,
html .site-form__control textarea {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--c-grey-600);
  border-radius: var(--radius-input);
  color: var(--color-heading);
  font-size: var(--fs-body-md);
}
html .site-form__control input:focus-visible,
html .site-form__control select:focus-visible,
html .site-form__control textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
html .site-form__submit {
  min-height: var(--tap-min);
  padding: 14px 26px;
  border: var(--border-width) solid var(--btn-1-border, var(--btn-1-bg));
  border-radius: var(--radius-pill);
  background: var(--btn-1-bg);
  color: var(--btn-1-fg);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
html .site-form__submit:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }
html .site-form__submit:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Download ready panel and its button: a Boyd quiet panel and a primary pill. */
html .lead-ready {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-hairline);
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
}
html .lead-ready__title { font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--color-heading); }
html .lead-ready__note { color: var(--color-muted); font-size: var(--fs-body); }
html .lead-button {
  min-height: var(--tap-min);
  padding: 14px 26px;
  border: var(--border-width) solid var(--btn-1-border, var(--btn-1-bg));
  border-radius: var(--radius-pill);
  background: var(--btn-1-bg);
  color: var(--btn-1-fg);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
html .lead-button:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); text-decoration: none; }
html .lead-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Office and map block, Get directions, Show map. */
/* BF-1: an Office and map section (on a page or through a Shared section) sits in Boyd's section container and
   spacing like Boyd's other sections: page gutter, wide container, one section space; after another
   white section it drops its top space (same ground, one gap, base/layout.css). */
html .office-block {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--page-gutter);
}
html main:not(:has(.hero-carousel)) .surface-white + .office-block { padding-top: 0; }
html .office-block__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-heading);
}
html .office-block__details { max-width: 760px; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--color-text); }
html .office-block__details > * { margin: 0 0 var(--space-3); }
html .office-block__name { font-weight: var(--fw-medium); color: var(--color-heading); }
html .office-block__address { font-style: normal; color: var(--color-text); line-height: var(--lh-body); }
html .office-directions { color: var(--color-link); font-weight: var(--fw-medium); }
html .office-directions:hover { color: var(--color-link-hover); }
html .office-directions:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
html .office-map__placeholder {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-hairline);
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
}
html .office-map__button {
  min-height: var(--tap-min);
  padding: 12px 22px;
  border: var(--border-width) solid var(--c-blue-600);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-mid-blue);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
html .office-map__button:hover { background: var(--c-blue-050); }
html .office-map__button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
html .office-map iframe { border: 0; border-radius: var(--radius-media); }

/* The cookie list on the Privacy page (content-end slot): Boyd's page gutter and rich text column. */
html .site-privacy-cookies {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--section-space);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text);
}
html .site-privacy-cookies > * { max-width: 760px; }