/*
 * AOS visual fixes — 2026-10-19, updated 2026-10-22
 * Injected server-side into every streamed Astro page (see inc/aos-visual-fixes.php),
 * so it survives Astro rebuilds. Each block names the bug it fixes.
 */

/* 1. Insider List form (home): the consent label was auto-placed into the
 *    3-column grid, squeezing both inputs and pushing the button underneath.
 *    Row 1 = first name | email | button, row 2 = consent across the full width. */
.signup { align-items: stretch; }
.signup > label {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    display: block !important;
    justify-self: center;
    max-width: 100%;
    margin: 6px 0 0 !important;
    padding-left: 30px;
    color: var(--muted, #d8d2c5);
    font-size: .92rem;
    line-height: 1.55;
    text-align: left;
}
.signup > label a { color: #e2c48a; text-decoration: underline; }
.signup input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px !important;
    height: 18px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    accent-color: #c9a36a;
}
.signup button { white-space: nowrap; padding-inline: 28px; }
@media (width <= 900px) {
    .signup > label { grid-row: auto; justify-self: stretch; }
    .signup button { white-space: normal; }
}

/* 2. Home news teaser: one clear card (or the latest posts when WordPress has them). */
.news-grid--teaser, .news-grid--posts { background: transparent; gap: 18px; }
.news-grid--teaser { grid-template-columns: 1fr; }
.news-grid--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-grid--teaser .news-card, .news-grid--posts .news-card {
    display: flex; flex-direction: column; gap: 12px; min-height: 0;
    color: inherit; text-decoration: none;
    background: #f3eee5; border: 1px solid rgba(23, 22, 17, .14); border-top: 3px solid #c9a36a;
    box-shadow: 0 10px 26px rgba(23, 22, 17, .06);
    transition: transform .18s, box-shadow .18s;
}
.news-grid--teaser .news-card:hover, .news-grid--posts .news-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23, 22, 17, .1); }
.news-grid--teaser .news-card { max-width: 760px; }
.news-card .news-card-meta { font: 600 .74rem/1.4 Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a67c35; }
.news-card p { margin: 0; color: #4a463e; line-height: 1.6; }
.news-card .news-card-link { margin-top: auto; padding-top: 8px; font: 600 .82rem/1 Oswald, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #171611; }
.news-grid--posts .news-card h3 { font-size: 1.45rem; }
@media (width <= 900px) { .news-grid--posts { grid-template-columns: 1fr; } }

/* 3. Shop intro: "Read the relevant terms:" was dark text on a dark background,
 *    leaving three links floating. */
.shop-policy-links { color: var(--muted, #cfc8b9); }

/* 4. Product page mini basket: "BASKET(4)" → "BASKET (4)". */
#product-mini-basket-count:not(:empty) { margin-left: .35em; }

/* 5. Product page on phones: Buy Now / Add to Basket were 140px tall
 *    (flex-basis applied to height in a column), and details sat above the
 *    name, price and buttons. */
@media (width <= 950px) {
    .product-layout > .product-media:not([hidden]) { display: contents; }
    .product-layout .product-main-image { order: 1; }
    .product-layout .product-thumbnails { order: 2; }
    .product-layout > #product-info { order: 3; }
    .product-layout .product-description-section { order: 4; margin-top: 0; }
    .product-layout > #product-loading { order: 0; }
}
@media (width <= 620px) {
    .product-actions .product-buy,
    .product-actions .product-basket { flex: 0 0 auto; min-height: 50px; }
}

/* 6. Trader booking pages: the shell lost the container gutter at ≤900px, so the
 *    step bar and cards ran edge to edge (and the third step overflowed at tablet width). */
@media (width <= 900px) {
    .container.trader-pitch-shell { width: min(calc(100% - 30px), var(--content, 1180px)); }
}
@media (width <= 380px) {
    .container.trader-pitch-shell { width: min(calc(100% - 22px), var(--content, 1180px)); }
}

/* 7. Insider List confirmation page: the heading sat underneath the fixed header. */
main.aos-law {
    box-sizing: border-box;
    width: min(calc(100% - 30px), 760px);
    margin: 0 auto;
    padding: 150px 0 110px;
    min-height: 60vh;
    color: #ece6da;
}
main.aos-law h1 {
    margin: 0 0 18px;
    font: 600 clamp(2rem, 5vw, 3.2rem)/1.08 Oswald, "Arial Narrow", sans-serif;
    text-transform: uppercase;
    color: #fff8ec;
}
main.aos-law p { font-size: 1.05rem; line-height: 1.7; }
main.aos-law a { color: #e2c48a; }
@media (width <= 620px) { main.aos-law { padding-top: 120px; } }

/* 8. Interactive map filters on phones: the row scrolls sideways but hid its
 *    scrollbar, so filters past "Parking" looked cut off. Show a slim bar. */
@media (width <= 620px) {
    .show-map-filter-row {
        scrollbar-width: thin;
        scrollbar-color: #c9a36a transparent;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
    }
    .show-map-filter-row > * { scroll-snap-align: start; }
}

/* 9. Contact page: email links. */
.contact-email-list a { color: #e2c48a; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.contact-email-list strong { display: block; color: #fff8ec; font-weight: 600; }
.contact-email-list li + li { margin-top: 10px; }

/* 10. Product images that fail to load are swapped to the placeholder by
 *     aos-visual-fixes.js; keep the swapped image framed like a real one. */
img[data-aos-img-fallback] { object-fit: cover; background: #ddd5c6; }

/* 11. (2026-10-22) Shop listing: the category line above each product title is hidden. */
.shop-modern-card .shop-modern-meta { display: none !important; }

/* 12. (2026-10-22) Display Vehicles and Clubs: the side boxes were removed, so the
 *     intro runs as one column at a comfortable reading width. */
.prose-grid.prose-grid--single { grid-template-columns: minmax(0, 1fr); }
.prose-grid.prose-grid--single > .stack { max-width: 820px; }

/* 13. (2026-10-22) Interactive map: Elsan Point marker colour. */
.show-map-html-point[data-category="elsan"] { background: #b9d48c; }

/* 14. (2026-10-22) Your Cars carousel now sits at the bottom of Display Vehicles. */
.content-section + .community-car-section { border-top: 1px solid rgba(255, 248, 236, 0.08); }

/* 15. Exhibitors: the trader application card (moved here from the retired
 *     AOS Show Pages Fix plugin, unchanged). */
/* Scoped to the application card; no other page or form is changed. */
.exhibitor-application {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 56px auto 0 !important;
  padding: clamp(22px, 4vw, 42px) !important;
  border: 1px solid #8c7744 !important;
  border-top: 4px solid #c4a76b !important;
  border-radius: 0 !important;
  background: #29271e !important;
  box-shadow: none !important;
  color: #f5f0e5;
  min-width: 0;
  text-align: left;
}
.exhibitor-application::before {
  content: "TRADER APPLICATION";
  display: block;
  margin-bottom: 10px;
  color: #d0b578;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .15em;
}
.exhibitor-application > h2 {
  margin: 0 0 12px !important;
  color: #fff8e9 !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.15 !important;
  text-transform: uppercase;
}
.exhibitor-application > p {
  margin: 0 0 28px !important;
  color: #d4cebf;
  font-size: 14px;
  line-height: 1.65;
  max-width: 62ch;
}
#exhibitor-application {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-width: 0;
}
#exhibitor-application > * { grid-column: 1 / -1; min-width: 0; }
#exhibitor-application > label:has(input[name="email"]),
#exhibitor-application > label:has(input[name="website"]) { grid-column: auto; }
#exhibitor-application label {
  display: block !important;
  margin: 0 !important;
  padding: 0;
  min-width: 0;
  color: #f2eddf;
  font-size: 11px !important;
  font-weight: 750;
  line-height: 1.6;
  letter-spacing: .045em;
  text-transform: uppercase;
}
#exhibitor-application label strong,
#exhibitor-application label b { display: inline !important; color: #d7b976; margin-left: 3px; }
#exhibitor-application .exhibitor-name-row,
#exhibitor-application .exhibitor-field-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px !important;
}
#exhibitor-application input:not([type="hidden"]):not([type="checkbox"]),
#exhibitor-application textarea {
  display: block;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 9px 0 0 !important;
  padding: 13px 14px !important;
  border: 1px solid #8c8164 !important;
  border-radius: 0 !important;
  background: #19211f !important;
  color: #f8f5ed !important;
  font: inherit;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  color-scheme: dark;
}
#exhibitor-application input::placeholder,
#exhibitor-application textarea::placeholder { color: #adae9f; opacity: 1; }
#exhibitor-application input:focus-visible,
#exhibitor-application textarea:focus-visible,
#exhibitor-application button:focus-visible,
#exhibitor-application a:focus-visible {
  outline: 2px solid #e4c47f !important;
  outline-offset: 3px;
}
#exhibitor-application textarea { min-height: 174px; resize: vertical; }
#exhibitor-application small {
  display: block;
  margin-top: 8px;
  color: #d0c6ae;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  text-transform: none;
}
#exhibitor-application input[type="file"] { padding: 10px !important; font-size: 12px !important; }
#exhibitor-application input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: #c4a76b;
  color: #171b18;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
#exhibitor-application .exhibitor-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  color: #e7e0cf;
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
#exhibitor-application input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #c4a76b;
}
#exhibitor-application a { color: #e0bd73; text-decoration: underline; text-underline-offset: 3px; }
#exhibitor-application #exhibitor-submit {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 15px 20px;
  border: 1px solid #c4a76b !important;
  border-radius: 0 !important;
  background: #c4a76b !important;
  color: #151a17 !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
#exhibitor-application #exhibitor-submit:hover:not(:disabled) { background: #d6b879 !important; }
#exhibitor-application #exhibitor-submit:disabled { opacity: .6; cursor: wait; }
#exhibitor-application #exhibitor-message:not([hidden]) {
  margin: 0;
  padding: 14px;
  border: 1px solid #9a875b;
  background: #19211f;
  color: #f5f0e5;
  font-size: 14px;
  line-height: 1.6;
}
#exhibitor-application [hidden] { display: none !important; }
#exhibitor-application .exhibitor-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .exhibitor-application { margin-top: 36px !important; padding: 23px 20px !important; }
  #exhibitor-application { grid-template-columns: minmax(0, 1fr); gap: 21px !important; }
  #exhibitor-application .exhibitor-name-row,
  #exhibitor-application .exhibitor-field-row { grid-template-columns: minmax(0, 1fr); gap: 21px !important; }
}