/* Shields the new header/footer from pre-redesign global rules (site.css, Bootstrap 4, page CSS).
   Remove together with site.css and the old page stylesheets. */

/* site.css drops the root to 14px below 768px; the design tokens assume 16px */
html { font-size: 16px; }
main { margin: 0; }

/* Bootstrap a:hover turns links blue */
:where(.site-header, .site-search, .mobile-menu, .footer) a:hover { color: inherit; }
.btn--primary:hover, .btn--primary:focus { color: #fff; }

/* site.css .footer: black, nowrap, 60px line-height */
.footer { background: var(--night); line-height: 1.6; white-space: normal; }

/* site.css forces 4vw text on every a/p below 768px */
@media (max-width: 768px) {
  .site-header a, .site-search a, .footer a, .footer p { font-size: inherit !important; white-space: normal; }
  .mobile-menu__contact a { font-size: var(--fs-sm) !important; }
  .mobile-menu__groups a { font-size: var(--fs-base) !important; }
  .mobile-menu__link { font-size: var(--fs-lg) !important; }
}

/* Bootstrap draws a focus ring on every focused button, including mouse clicks */
:where(.site-header, .mobile-menu) button:focus:not(:focus-visible) { outline: none; }

/* Home page sections: site.css greys all of <main> and forces 4vw text on a/p below 768px */
.groups { color: var(--ink); }
:where(.home-hero, .groups, .band-cta) a:hover { color: inherit; }
@media (max-width: 768px) {
  .home-hero .t-lead { font-size: var(--fs-lg) !important; }
  .groups .sec-head p, .band-cta p { font-size: var(--fs-base) !important; }
  .groups a, .home-hero a, .band-cta a { font-size: inherit !important; }
  .groups .btn, .band-cta .btn { font-size: var(--fs-sm) !important; }
}

/* Product pages: same site.css / Bootstrap overrides as the home sections */
:where(.page-title, .products-groups, .product-list, .filters) { color: var(--ink); }
:where(.page-title, .products-groups, .product-list, .filters) a:hover { color: inherit; text-decoration: none; }
.page-title .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.page-title .t-lead { color: var(--graphite); }
.page-title h1, .cat__custom h2 { margin-bottom: 0; }
.cat__custom { color: var(--on-night); }
.cat--custom:hover { color: var(--on-night); }
.groupnav a:hover { color: var(--ink); }
.filters .tab:focus:not(:focus-visible), .more .btn:focus:not(:focus-visible) { outline: none; }
.product-list .btn--secondary:hover { color: #fff; }
@media (max-width: 768px) {
  .page-title .t-lead { font-size: var(--fs-base) !important; }
  .page-title a, .products-groups a, .product-list a, .groupnav a { font-size: inherit !important; }
  .groupnav a { font-size: var(--fs-sm) !important; }
  .products-groups p, .product-list p { font-size: inherit !important; }
  .plate .plate__name { font-size: var(--fs-sm) !important; }
  .plate .plate__code { font-size: 1.625rem !important; }
  .products-groups .cat__custom p { font-size: var(--fs-base) !important; }
  .product-list .btn, .products-groups .btn, .grp-title .btn { font-size: var(--fs-sm) !important; }
}
@media (max-width: 520px) {
  .plate .plate__code { font-size: 1.25rem !important; }
}

/* Product detail: same site.css / Bootstrap overrides as the other product pages */
:where(.pdp-sec, .about-product, .pdp-series) { color: var(--ink); }
:where(.pdp-sec, .about-product, .pdp-series, .pdp-projects) a:hover { text-decoration: none; }
:where(.pdp-series, .pdp-projects) .btn--quiet:hover, .pdp-sec .dl:hover { color: inherit; }
.pdp-projects .pov:hover { color: #fff; }
.pdp-sec .btn--secondary:hover { color: #fff; }
.specs dt { font-weight: 400; }
.pdp-sec h1, .pdp-sec h2, .about-product h2, .pdp-series h2, .pdp-projects h2 { margin-bottom: 0; }
.pdp-sec .crumbs { margin-bottom: 0; }
.pdp__thumbs button:focus:not(:focus-visible) { outline: none; }
@media (max-width: 768px) {
  .pdp-sec a, .pdp-series a, .pdp-projects a { font-size: inherit !important; }
  .pdp-sec .crumbs a { font-size: var(--fs-xs) !important; }
  .pdp-sec .btn, .pdp-series .btn, .pdp-projects .btn { font-size: var(--fs-sm) !important; }
  .pdp-sec .pdp__name { font-size: var(--fs-lg) !important; }
  .about-product .prose p { font-size: var(--fs-lg) !important; }
  .pdp-sec .pdp__desc, .pdp-series .sec-head p, .pdp-projects .sec-head p { font-size: var(--fs-base) !important; }
  .pdp-series .plate .plate__name { font-size: var(--fs-sm) !important; }
  .pdp-series .plate .plate__code { font-size: 1.625rem !important; }
}

/* Projects: same site.css / Bootstrap overrides as the other pages */
:where(.projects, .pdlg) a:hover { text-decoration: none; }
.projects .pcard:hover, .projects .btn--secondary:hover { color: inherit; }
.projects .pcard:hover { color: #fff; }
.band-cta .btn--secondary:hover { color: var(--ink); }
.pdlg a.mini-plate:hover { color: var(--ink); }
.pdlg .btn--secondary:hover { color: #fff; }
.pdlg h2, .pdlg h3, .pcard__title { margin-bottom: 0; }
.pdlg .crumbs { margin-bottom: 0; }
.projects-filters .tab:focus:not(:focus-visible), .pdlg button:focus:not(:focus-visible) { outline: none; }
@media (max-width: 768px) {
  .projects a, .projects p, .pdlg a, .pdlg p, .band-cta__actions a { font-size: inherit !important; }
  .projects .btn, .pdlg .btn, .band-cta__actions .btn { font-size: var(--fs-sm) !important; }
  .pdlg .pdlg__place { font-size: var(--fs-base) !important; }
  .projects-title .t-lead { font-size: var(--fs-lg) !important; }
  .projects .projects__notice, .projects .projects__empty p { font-size: var(--fs-base) !important; }
}

/* About and legal pages: same site.css overrides as the other pages */
@media (max-width: 768px) {
  .about-hero a, .about-certs a, .offices a, .legal-title a, .legal-sec a { font-size: inherit !important; }
  .about-facts .btn { font-size: var(--fs-sm) !important; }
  .about-certs .cert, .legal__toc a { font-size: var(--fs-sm) !important; }
  .about-hero .t-lead, .sketchbook .t-lead { font-size: var(--fs-lg) !important; }
  .values p, .facts-row__text p, .about-certs .sec-head p, .policies p, .offices p, .legal__doc p { font-size: var(--fs-base) !important; }
}