/*
 * WordPress adaptations. home.css / hire.css / terms.css are the original design CSS, untouched;
 * everything needed to make WordPress markup render identically lives here instead.
 */

/* Hire cards link to real item pages, so some original <button>s are now <a>s: undo link styling. */
a.img-btn, a.name-btn { text-decoration: none; }
a.name-btn:hover { color: #0b0b0b; text-decoration: underline; text-underline-offset: 4px; }
a.name-btn { display: block; }
a.img-btn:hover { color: inherit; }

/* Product photos fill the placeholder areas they replace. */
.amuk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hidden views/elements toggled by the hire scripts. */
[hidden] { display: none !important; }

/* Keep sticky elements clear of the WordPress admin bar when logged in. */
.admin-bar .amuk-header { top: 32px !important; }
.admin-bar .amuk-sticky-offset { top: 144px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .amuk-header { top: 46px !important; }
  .admin-bar .amuk-sticky-offset { top: 158px !important; }
}
@media screen and (max-width: 600px) {
  .admin-bar .amuk-header { top: 0 !important; }
  .admin-bar .amuk-sticky-offset { top: 112px !important; }
}

/* Content written in the WordPress editor (About text, item descriptions, Terms clauses, other pages). */
.amuk-prose > *, .amuk-clause > * { margin: 0; }
.amuk-prose ul, .amuk-prose ol, .amuk-clause ul, .amuk-clause ol { padding-left: 1.3em; }
.amuk-prose li + li, .amuk-clause li + li { margin-top: 6px; }
.amuk-prose img { max-width: 100%; height: auto; }
.amuk-prose h2 { font-size: 26px; letter-spacing: -0.01em; color: #0b0b0b; line-height: 1.3; }
.amuk-prose h3 { font-size: 21px; color: #0b0b0b; line-height: 1.3; }
.amuk-about > * { margin: 0; font-size: 20px; line-height: 1.6; color: #2a2a2a; }
.amuk-item-about > :not(h2) { margin: 0; font-size: 18px; line-height: 1.6; color: #2a2a2a; }
.amuk-terms-mini > * { margin: 0; }
.amuk-terms-mini ul, .amuk-terms-mini ol { padding-left: 1.2em; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; margin: 0; left: 16px; top: 16px; z-index: 100; padding: 12px 16px; background: #ffffff; color: #0b0b0b; font-weight: 700; }

/* Page banners use the Home hero's stage photo and fade (same as .hero-bg in home.css). */
.amuk-photo-hero { background-color: #0a0a0a; background-image: linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.3) 100%), url("../img/hero.jpg"); background-size: cover; background-position: center; }

/* ---------- Header menu: links sit on a raised plate, lifted off the hex background ---------- */
@media (min-width: 768px) {
  .amuk-nav {
    gap: 4px !important;
    padding: 4px;
    background: linear-gradient(180deg, #1c1c1c 0%, #0e0e0e 100%);
    border: 1px solid #3a3a3a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  .amuk-nav > a.nav,
  .amuk-nav .dd > a.nav {
    min-height: 40px;
    padding: 0 16px;
    display: flex !important;
    align-items: center;
    color: #ffffff;
    transition: background-color .15s, color .15s, box-shadow .15s;
  }
  .amuk-nav > a.nav:hover,
  .amuk-nav .dd:hover > a.nav,
  .amuk-nav .dd:focus-within > a.nav,
  .amuk-nav > a.nav:focus-visible {
    background: #2a2a2a;
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  /* Current page: accent text with an accent bar along the bottom. */
  .amuk-nav a.nav.is-active { box-shadow: inset 0 -3px 0 var(--accent); }
  .amuk-nav a.nav.is-active:hover,
  .amuk-nav .dd:hover > a.nav.is-active { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  .amuk-nav .dd { min-height: 0; }
  .amuk-nav .dd-menu { left: 0; padding-top: 10px; }
}
/* Small tablets: tighter plate so the header stays on one line. */
@media (min-width: 768px) and (max-width: 899px) {
  .amuk-header-inner { gap: 14px !important; }
  .amuk-nav > a.nav, .amuk-nav .dd > a.nav { padding: 0 10px; }
}

/* ---------- Home page testimonials: horizontally scrolling cards (buttons wired in site.js) ---------- */
.amuk-tm-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(400px, 85%);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: #0b0b0b #d6d6d6;
}
.amuk-tm-track::-webkit-scrollbar { height: 6px; }
.amuk-tm-track::-webkit-scrollbar-track { background: #d6d6d6; }
.amuk-tm-track::-webkit-scrollbar-thumb { background: #0b0b0b; }
.amuk-tm-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.amuk-tm-card { scroll-snap-align: start; }
.amuk-tm-btn {
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; color: #0b0b0b; border: 1px solid #0b0b0b; cursor: pointer;
  transition: background-color .15s, color .15s, opacity .15s;
}
.amuk-tm-btn:hover:not(:disabled) { background: #0b0b0b; color: #ffffff; }
.amuk-tm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.amuk-tm-btn:disabled { opacity: .3; cursor: default; }
@media (prefers-reduced-motion: reduce) { .amuk-tm-track { scroll-behavior: auto; } }

/* ---------- Orderable feature-banner options (e.g. confetti cannon type / size / colour) ---------- */
.amuk-opt-btn {
  min-height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 1px solid #5a5a5a; background: rgba(0, 0, 0, 0.55); color: #ffffff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.amuk-opt-btn:hover { border-color: #ffffff; }
.amuk-opt-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0b0b0b; }
.amuk-opt-btn:focus-visible, .amuk-opt-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.amuk-opt-select.is-chosen { border-color: var(--accent); }
.amuk-xstep { background: #111; color: #ffffff; border-color: #5a5a5a; }
.amuk-xstep:hover { border-color: #ffffff; }
.amuk-promo-secondary:hover { color: var(--accent) !important; }

/* Flightcase thumbnail for orderable extras: the confetti illustration fitted into the square. */
.amuk-thumb-art { padding: 6px; }
.amuk-thumb-art svg { width: 100%; height: 100%; display: block; }
/* On the light board, the illustration's white and pale-grey pieces turn dark so they still show. */
.amuk-thumb-art [style*="fill:#ffffff"] { fill: #2a2a2a !important; }
.amuk-thumb-art [style*="stroke:#ffffff"] { stroke: #2a2a2a !important; }
.amuk-thumb-art [style*="fill:#bdbdbd"] { fill: #6a6a6a !important; }

/* Colour drop-down: the site's own chevron with proper spacing, instead of the browser's arrow
   (which sat tight against the right edge and looks different in every browser). */
.amuk-opt-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.amuk-opt-select:hover { border-color: #ffffff; }
.amuk-opt-select option { background: #111111; color: #ffffff; }
/* Options that aren't available for the choices made so far. */
.amuk-opt-btn:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; border-color: #3a3a3a; }
.amuk-opt-btn:disabled:hover { border-color: #3a3a3a; }
.amuk-opt-select:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Cookie consent banner (assets/js/consent.js) ---------- */
.amuk-consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  width: min(440px, calc(100% - 32px));
  color: #ffffff; border-bottom: 4px solid var(--accent);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.amuk-consent-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.amuk-consent-title { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--accent); }
.amuk-consent-text { margin: 0; font-size: 15px; line-height: 1.5; color: #d0d0d0; }
.amuk-consent-text a { color: #ffffff; text-underline-offset: 3px; }
.amuk-consent-prefs { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; border-top: 1px solid #3a3a3a; }
.amuk-consent-cat { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: #d0d0d0; cursor: pointer; }
.amuk-consent-cat strong { color: #ffffff; }
.amuk-consent-cat .check { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.amuk-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.amuk-consent-btn { min-height: 46px !important; padding: 0 18px !important; font-size: 13px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; flex: 1 1 120px; }
.amuk-consent-reject { background: transparent; color: #ffffff; border: 1px solid #ffffff; font-family: inherit; }
.amuk-consent-reject:hover { background: #ffffff; color: #0b0b0b; }
.amuk-consent-choose { background: none; border: 0; padding: 0 4px; color: #ffffff; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.amuk-consent-choose:hover { color: var(--accent); }
.amuk-consent button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.amuk-cookie-link { background: none; border: 0; padding: 0; font: inherit; color: #d6d6d6; text-decoration: underline; cursor: pointer; }
.amuk-cookie-link:hover { color: var(--accent); }
.amuk-consent .btn-accent { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #0b0b0b; border: 1px solid var(--accent); font-family: inherit; }
.amuk-consent .btn-accent:hover { filter: brightness(1.1); color: #0b0b0b; }

/* Click-to-load product video. */
.amuk-video-play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: none; border: 0; color: #ffffff; cursor: pointer; font-family: inherit; }
.amuk-video-icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #0b0b0b; padding-left: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .2s ease; }
.amuk-video-play:hover .amuk-video-icon { transform: scale(1.08); }
.amuk-video-label { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.amuk-video-note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #bdbdbd; }
.amuk-video-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }