/*
Theme Name: Precision Driving School South
Theme URI: https://precisiondrivingschoolsouth.com
Author: DriveScout
Author URI: https://drivescout.com
Description: Theme for Precision Driving School South. Shop pages, packages, cart and checkout come from the DriveScout Shop plugin (drivescout-shop-page). See README.md in the theme's source folder.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.3
Text Domain: precision
*/

/*
Plain CSS, no build step. Sizes and colors follow the site as it looked before the
WordPress port (Tailwind + the legacy marketing stylesheet), with one brand red where it
used two.

Contents
  1. Tokens
  2. Base
  3. Header and navigation
  4. Page header (hero)
  5. Service area band
  6. Packages band and DriveScout product cards
  7. Page body and editor content
  8. Contact page and forms
  9. Shop pages
  10. Footer
*/

/* 1. Tokens ============================================================== */

:root {
  --pds-red: #bd272d;
  --pds-red-hover: #9a2024;
  --pds-red-light: #d43f45;
  --pds-green: #16a34a;
  --pds-green-hover: #15803d;

  --pds-ink: #111827;
  --pds-text: #4b5563;
  --pds-text-strong: #374151;
  --pds-line: #e5e7eb;
  --pds-input-line: #d1d5db;
  --pds-surface: #f9fafb;
  --pds-hover-surface: #f3f4f6;
  --pds-band: #4d4d4d;
  --pds-footer: #1a1a1a;
  --pds-footer-text: #d1d5db;
  --pds-shop-bg: #f1f5f9;

  --pds-font: Lato, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pds-radius: 0.5rem;
  --pds-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pds-overlay: rgb(0 0 0 / 0.4);
  --pds-shell: 80rem;
  --pds-shell-narrow: 56rem;

  /*
  The shop plugin colors its buttons, links and modals from these. It also sets them
  inline on <html> from DriveScout's shop settings, which default to purple for this
  school; !important here beats that inline value, so the shop stays Precision red.
  */
  --ds-accent: #bd272d !important;
  --ds-accent-hover: #9a2024 !important;
  --ds-accent-light: #d43f45 !important;
}

/* 2. Base ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--pds-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pds-ink);
  background: #fff;
}

/*
Links take their color from their context, as they did under the old site's Tailwind
reset. The shop plugin's buttons and links (Checkout, View cart) rely on that.
Body-text links get their red in section 7.
*/
a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site__main {
  flex: 1 0 auto;
}

.shell {
  width: 100%;
  max-width: var(--pds-shell);
  margin-inline: auto;
  padding-inline: 1rem;
}

.shell--narrow {
  max-width: var(--pds-shell-narrow);
}

@media (min-width: 640px) {
  .shell {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .shell {
    padding-inline: 2rem;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: -9999px;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #fff;
  color: var(--pds-ink);
  font-weight: 700;
}

.skip-link:focus {
  left: 0.5rem;
}

.button {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: var(--pds-radius);
  background: var(--pds-red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.button:hover,
.button:focus-visible {
  background: var(--pds-red-hover);
  color: #fff;
}

.button--green {
  background: var(--pds-green);
}

.button--green:hover,
.button--green:focus-visible {
  background: var(--pds-green-hover);
}

/* 3. Header and navigation =============================================== */

.site-header {
  position: relative;
  z-index: 20;
}

.site-header__bar {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: var(--pds-shadow);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  column-gap: 1rem;
}

.site-header__brand {
  padding: 0.5rem 0;
  color: var(--pds-ink);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--pds-red);
}

.site-nav-toggle {
  display: inline-flex;
  padding: 0.5rem;
  border: 0;
  background: none;
  color: var(--pds-text-strong);
  font-size: 1.5rem;
  cursor: pointer;
}

.site-nav-toggle:hover {
  color: var(--pds-red);
}

.site-nav-toggle__close,
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__open {
  display: none;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__close {
  display: inline-block;
}

.site-nav__menu,
.site-nav__menu .sub-menu,
.site-nav__social {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__menu a,
.site-nav__social a,
.submenu-toggle--label {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  color: var(--pds-text-strong);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.site-nav__menu a:hover,
.site-nav__social a:hover,
.submenu-toggle:hover,
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-ancestor > a,
.site-nav__menu .current-menu-ancestor > .submenu-toggle--label {
  color: var(--pds-red);
}

.submenu-toggle {
  border: 0;
  background: none;
  color: var(--pds-text-strong);
  cursor: pointer;
}

/* The arrow on a dropdown button: a rotated corner, so no icon is needed in the script. */
.submenu-toggle::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin: -0.25em 0 0 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.menu-item-has-children.is-open > .submenu-toggle::after {
  margin-top: 0.25em;
  transform: rotate(225deg);
}

/* Mobile: the menu drops down under the bar as a flat list. */
@media (max-width: 767px) {
  .site-nav {
    display: none;
    flex-basis: 100%;
    padding: 0.5rem 0 0.75rem;
  }

  .site-nav-is-open .site-nav {
    display: block;
  }

  .site-nav__menu a {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }

  .site-nav__menu a:hover {
    background: var(--pds-surface);
  }

  /* Dropdown children are listed inline, so the toggles have nothing to do. */
  .submenu-toggle {
    display: none;
  }

  .site-nav__social {
    display: flex;
    padding: 0 0.25rem;
  }

  .site-nav__social a {
    font-size: 1.125rem;
  }
}

@media (min-width: 768px) {
  .site-nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav__menu,
  .site-nav__social {
    display: flex;
    align-items: center;
  }

  .site-nav__menu {
    gap: 0 1rem;
  }

  .site-nav__social {
    margin-left: 1rem;
  }

  .menu-item-has-children {
    position: relative;
    display: flex;
    align-items: center;
  }

  .site-nav__menu .sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    display: none;
    width: 12rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
    border-radius: 0.375rem;
    background: #fff;
    box-shadow: var(--pds-shadow), 0 0 0 1px rgb(0 0 0 / 0.05);
  }

  .site-nav__menu .sub-menu a {
    padding: 0.5rem 1rem;
  }

  .site-nav__menu .sub-menu a:hover {
    background: var(--pds-hover-surface);
    color: var(--pds-text-strong);
  }

  .menu-item-has-children.is-open > .sub-menu,
  .site-nav:not(.is-enhanced) .menu-item-has-children:hover > .sub-menu,
  .site-nav:not(.is-enhanced) .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
}

@media (min-width: 1024px) {
  .site-nav__menu {
    gap: 0 2rem;
  }
}

.site-header__utility {
  border-top: 1px solid var(--pds-line);
  background: var(--pds-surface);
}

.site-header__utility-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-height: 3rem;
  column-gap: 0.25rem;
}

.site-header__utility a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--pds-text-strong);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.site-header__utility a:hover {
  color: var(--pds-red);
}

@media (min-width: 640px) {
  .site-header__utility-inner {
    column-gap: 1.5rem;
  }
}

/* 4. Page header (hero) ================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding: 2.5rem 0;
  background-color: var(--pds-band);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
}

.hero--home {
  min-height: 530px;
  padding-bottom: 6rem;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pds-overlay);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: 1rem;
}

.hero__title {
  margin: 0;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.5;
  text-shadow: 0 2px 7px #000;
}

.hero--home .hero__title {
  font-size: 36px;
}

.hero__subtitle {
  display: block;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
}

.hero__lead {
  margin: 0.5rem 0 0;
  color: #fff;
}

.hero__button {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 35px;
  background: var(--pds-red);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s;
}

.hero__button:hover,
.hero__button:focus-visible {
  border-color: var(--pds-red);
  background: transparent;
  color: #fafafa;
}

.hero__next {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 1;
  color: #fff;
  font-size: 70px;
  line-height: 1;
  transform: translateX(-50%);
}

.hero__anchor {
  display: block;
}

@media (min-width: 768px) {
  .hero__inner {
    width: 83.333%;
    max-width: 75rem;
    padding-inline: 0;
  }
}

@media (max-width: 1199px) {
  .hero--home .hero__title {
    font-size: 35px;
  }
}

@media (max-width: 991px) {
  .hero--home .hero__title {
    font-size: 30px;
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .hero__title,
  .hero--home .hero__title {
    font-size: 28px;
  }

  .hero__subtitle {
    font-size: 1.25rem;
  }
}

@media (max-width: 575px) {
  .hero__title,
  .hero--home .hero__title {
    font-size: 1.45rem;
  }

  .hero__lead {
    font-size: 0.9rem;
    font-weight: 500;
  }

  .hero__next {
    font-size: 48px;
  }
}

/* 5. Service area band =================================================== */

.service-area {
  padding: 50px 0;
  background: var(--pds-band);
  color: #fff;
  text-align: center;
}

.service-area__title {
  margin: 0 0 25px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
}

.service-area__towns {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-area__towns li {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 10px 0 5px;
  border-right: 1px solid #fff;
  line-height: 18px;
}

.service-area__towns li:last-child {
  border-right: 0;
}

@media (max-width: 991px) {
  .service-area__title {
    font-size: 25px;
  }
}

/* 6. Packages band and DriveScout product cards ========================== */

.packages {
  position: relative;
  padding: 3rem 0;
  background-color: var(--pds-band);
  background-position: center;
  background-size: cover;
  color: #fff;
}

.packages::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pds-overlay);
}

.packages > .shell {
  position: relative;
  z-index: 1;
}

.packages__header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.packages__title {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
}

.packages__intro {
  max-width: var(--pds-shell-narrow);
  margin: 0 auto 0.75rem;
}

.packages__intro:last-child {
  margin-bottom: 0;
}

.packages__intro a,
.packages__cta a {
  color: #fff;
  font-weight: 700;
}

.packages__cta a {
  text-decoration: none;
}

.packages__cta a:hover {
  text-decoration: underline;
}

.packages__cta {
  margin: 2rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

/* The theme's own fallback, or the plugin's (from the release after 0.2.33). */
.packages__notice,
.packages .drivescout-products-unavailable {
  max-width: var(--pds-shell-narrow);
  margin: 0 auto;
  padding: 1rem;
  border-radius: var(--pds-radius);
  background: #fff;
  color: var(--pds-ink);
  text-align: center;
}

.packages__notice a,
.packages .drivescout-products-unavailable a {
  color: var(--pds-red);
  font-weight: 700;
}

/*
The cards are the plugin's [drivescout_products] markup. Every rule carries the
#drivescout-app .drivescout-products prefix so it outranks the plugin's own
#drivescout-app rules (blue buttons, square corners, a blue top strip).
*/
#drivescout-app .drivescout-products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  #drivescout-app .drivescout-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #drivescout-app .drivescout-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #drivescout-app .drivescout-products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

#drivescout-app .drivescout-products .ds_card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--pds-radius);
  background: #fff;
  box-shadow: var(--pds-shadow);
  color: var(--pds-ink);
  text-align: left;
}

#drivescout-app .drivescout-products .ds_card-header {
  /* !important: the plugin sets a 15px height inline. */
  height: 0.5rem !important;
  background: var(--pds-red);
}

#drivescout-app .drivescout-products .ds_card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem 1.5rem 0;
}

#drivescout-app .drivescout-products .product-name {
  margin: 0 0 0.75rem;
  color: var(--pds-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
}

#drivescout-app .drivescout-products .product-description {
  margin: 0 0 1.5rem;
  color: var(--pds-text);
  font-size: 0.875rem;
  line-height: 1.625;
  /* A long email address in a description used to push past the card edge. */
  overflow-wrap: anywhere;
}

#drivescout-app .drivescout-products .product-description p {
  margin: 0 0 0.25rem;
}

/* The price sits at the foot of the body on the grey footer strip, as it always has. */
#drivescout-app .drivescout-products .price {
  margin: auto -1.5rem 0;
  padding: 1rem 1.5rem 0;
  background: var(--pds-surface);
  color: var(--pds-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: center;
}

#drivescout-app .drivescout-products .ds_card-footer {
  padding: 0.75rem 1.5rem 1rem;
  background: var(--pds-surface);
  text-align: center;
}

#drivescout-app .drivescout-products .add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background: var(--pds-red);
  box-shadow: none;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  cursor: pointer;
}

#drivescout-app .drivescout-products .add-to-cart:hover,
#drivescout-app .drivescout-products .add-to-cart:focus-visible {
  background: var(--pds-red-hover);
  color: #fff;
}

/* 7. Page body and editor content ======================================== */

.page-body {
  padding: 3rem 0;
  background: #fff url("assets/img/pattern.png");
}

.content-card {
  padding: 1.25rem;
  border-radius: var(--pds-radius);
  background: #fff;
  box-shadow: var(--pds-shadow);
}

.content-card + .content-card {
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .content-card {
    padding: 2rem;
  }
}

.entry-content > :first-child {
  margin-top: 0;
}

.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content h1,
.entry-content h2,
.content-card__title {
  margin: 1.5rem 0 1rem;
  color: var(--pds-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.content-card__title {
  margin-top: 0;
}

.entry-content h3 {
  margin: 1.5rem 0 0.5rem;
  color: var(--pds-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 1.25rem 0 0.5rem;
  color: var(--pds-ink);
  font-size: 1rem;
  font-weight: 700;
}

.entry-content p,
.entry-content address,
.entry-content ul,
.entry-content ol,
.entry-content figure,
.entry-content blockquote,
.entry-content details {
  margin: 0 0 1rem;
  color: var(--pds-text);
}

.entry-content address {
  font-style: normal;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}

.entry-content ul {
  list-style: disc;
}

.entry-content li {
  margin-bottom: 0.5rem;
}

.entry-content li > ul,
.entry-content li > ol {
  margin: 0.5rem 0 0;
}

.entry-content a {
  color: var(--pds-red);
  font-weight: 600;
  text-decoration: none;
}

.entry-content a:hover {
  color: var(--pds-red-hover);
  text-decoration: underline;
}

.entry-content strong,
.entry-content b {
  color: var(--pds-ink);
  font-weight: 600;
}

.entry-content blockquote {
  padding-left: 1rem;
  border-left: 4px solid var(--pds-red);
}

.entry-content hr,
.entry-content .wp-block-separator {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--pds-line);
}

/* The "tips" style: paragraphs separated by thin rules (Driving Tips page). */
.entry-content .is-style-pds-divided > p,
.entry-content p.is-style-pds-divided {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pds-line);
}

.entry-content .is-style-pds-divided > p:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.entry-content details summary {
  color: var(--pds-ink);
  font-weight: 600;
  cursor: pointer;
}

.entry-content .aligncenter {
  display: block;
  margin-inline: auto;
}

.entry-content .alignleft {
  float: left;
  margin: 0 1rem 1rem 0;
}

.entry-content .alignright {
  float: right;
  margin: 0 0 1rem 1rem;
}

.entry-content .has-text-align-center {
  text-align: center;
}

.entry-content .has-text-align-right {
  text-align: right;
}

/* 8. Contact page and forms ============================================== */

.contact {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .contact--with-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact__details p {
  margin: 0 0 1rem;
  color: var(--pds-text);
}

.contact__details a {
  color: var(--pds-red);
  font-weight: 600;
  text-decoration: none;
}

.contact__name {
  margin: 0 0 0.5rem;
  color: var(--pds-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.contact__list {
  margin: 0;
}

.contact__list dt {
  color: var(--pds-ink);
  font-weight: 600;
}

.contact__list dd {
  margin: 0;
  color: var(--pds-text);
}

.contact__list dd + dt {
  margin-top: 1rem;
}

.contact__map {
  aspect-ratio: 16 / 9;
}

.contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--pds-radius);
}

.contact__extra {
  margin-top: 2rem;
}

.contact-form {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pds-line);
  scroll-margin-top: 1rem;
}

.contact-form__title,
.course-form__title {
  margin: 0 0 1rem;
  color: var(--pds-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.course-forms {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .course-forms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.course-form__title {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/*
Inputs are styled explicitly because the shop plugin's stylesheet, loaded on every page,
restyles bare inputs site-wide (@tailwindcss/forms in base mode). .pds-form outranks it.
*/
.pds-form__row {
  display: grid;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .pds-form__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pds-form__field {
  margin: 0 0 1rem;
}

.pds-form label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--pds-text);
}

.pds-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.pds-form textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pds-input-line);
  border-radius: var(--pds-radius);
  background: #fff;
  box-shadow: none;
  color: var(--pds-ink);
  font: inherit;
  line-height: 1.5;
  appearance: none;
}

.pds-form input:focus,
.pds-form textarea:focus {
  border-color: var(--pds-red);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgb(189 39 45 / 0.35);
}

.pds-form [aria-invalid="true"] {
  border-color: var(--pds-red) !important;
}

.pds-form__error {
  display: block;
  margin-top: 0.25rem;
  color: var(--pds-red);
  font-size: 0.875rem;
}

.pds-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #a7f3d0;
  border-radius: var(--pds-radius);
  background: #ecfdf5;
  color: #065f46;
}

.form-notice p {
  margin: 0;
}

.form-notice--error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

/* 9. Shop pages ========================================================== */

/* The light background fills the space down to the footer on a short cart. */
.pds-shop-page .site__main,
.shop-page {
  background: var(--pds-shop-bg);
}

.shop-page {
  padding: 2.5rem 0;
}

/* The cart's Checkout button: the plugin ships it mint green. */
#drivescout-cart-wrapper .go-to-checkout {
  padding: 1rem;
  border-radius: var(--pds-radius);
  background: var(--pds-red);
  color: #fff;
  text-decoration: none;
  text-transform: none;
}

#drivescout-cart-wrapper .go-to-checkout:hover {
  background: var(--pds-red-hover);
}

/* Text an editor adds around the shortcodes, e.g. the order success message. */
.shop-page h1 {
  margin: 0 0 1rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.shop-page .has-text-align-center {
  text-align: center;
}

/* 10. Footer ============================================================= */

.site-footer {
  padding: 15px 0;
  background: var(--pds-footer);
  color: var(--pds-footer-text);
  font-size: 0.875rem;
  text-align: center;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 2rem;
}

.site-footer p {
  margin: 0;
}

.site-footer__tagline {
  color: #fff;
}

.site-footer__menu {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu li + li {
  margin-top: 0.5rem;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--pds-footer-text);
}

@media (min-width: 768px) {
  .site-footer {
    text-align: left;
  }

  .site-footer__inner {
    flex-direction: row;
  }

  .site-footer__copyright {
    flex: 2;
  }

  .site-footer__links {
    flex: 1;
    text-align: center;
  }
}