/*
 * Phone and tablet sizing. Desktop (768px and wider for the header, 601px and wider for spacing)
 * is untouched, so the large-screen design stays exactly as designed.
 * !important is needed because the design's layout lives in inline styles.
 */

/* Menu button: phones only. */
.amuk-menu-toggle { display: none; }

/* Home page category tiles: balanced rows on desktop (column count set in parts/category-tiles.php). */
@media (min-width: 1088px) {
  .amuk-tiles { grid-template-columns: repeat(var(--amuk-tile-cols, 5), minmax(0, 1fr)) !important; }
}

/* ---------- Tablets and phones: no hero flightcase graphic (it would stack under the text) ---------- */
@media (max-width: 1087px) {
  .amuk-hero-case { display: none !important; }
}

/* ---------- Tablets: item page keeps the desktop layout, photo left and details right ---------- */
@media (min-width: 768px) and (max-width: 1079px) {
  .amuk-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 40px !important; }
}

/* Large phones: stop the stacked item photo filling the whole screen. */
@media (min-width: 601px) and (max-width: 767px) {
  .amuk-item-media { width: 100%; max-width: 560px; margin: 0 auto; }
}

/* ---------- Phones and small tablets: compact header with a menu button ---------- */
@media (max-width: 767px) {
  .amuk-header-inner { flex-wrap: nowrap !important; gap: 12px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .amuk-brand { gap: 10px !important; min-width: 0; margin-right: auto; }
  .amuk-brand img { width: 40px !important; height: 40px !important; }
  .amuk-brand span { font-size: 18px !important; }

  .amuk-case-btn { padding: 0 12px !important; gap: 8px !important; flex-shrink: 0; }
  .amuk-case-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

  .amuk-menu-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0; background: none; border: 1px solid #5a5a5a; cursor: pointer;
  }
  .amuk-menu-toggle span { display: block; width: 20px; height: 2px; background: #ffffff; transition: transform .15s, opacity .15s; }
  .amuk-nav-open .amuk-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .amuk-nav-open .amuk-menu-toggle span:nth-child(2) { opacity: 0; }
  .amuk-nav-open .amuk-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The menu drops down below the header bar as a full-width panel. */
  .amuk-nav {
    display: none !important; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 8px 20px 20px; background: #0b0b0b; border-bottom: 4px solid var(--accent);
    box-shadow: 0 24px 48px rgba(0,0,0,.45); max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .amuk-nav-open .amuk-nav { display: flex !important; }
  .amuk-nav > a.nav, .amuk-nav .dd > a.nav { min-height: 52px; display: flex !important; align-items: center; font-size: 17px; border-bottom: 1px solid #2a2a2a; }
  .amuk-nav .dd { flex-direction: column; align-items: stretch !important; }
  .amuk-nav .dd > a.nav svg { display: none; }
  /* Categories are listed openly under Hire Stock (no hover on touch screens). */
  .amuk-nav .dd-menu { display: block !important; position: static; padding: 0; }
  .amuk-nav .dd-panel { min-width: 0; padding: 4px 0 8px 16px; background: none; border: 0; box-shadow: none; }
  .amuk-nav .dd-panel a { min-height: 44px; padding: 0; color: #c9c9c9; font-size: 16px; }
  .amuk-nav .dd-panel a:hover, .amuk-nav .dd-panel a:focus-visible { background: none; color: var(--accent); }
  .amuk-nav .dd-panel .dd-all { font-weight: 400; border: 0; margin: 0; }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  /* Narrower side margins and less vertical space between sections. */
  .amuk-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .amuk-wrap--xl { padding-top: 72px !important; padding-bottom: 72px !important; }
  .amuk-wrap--hero { padding-top: 56px !important; padding-bottom: 72px !important; }
  .amuk-wrap--md { padding-top: 48px !important; padding-bottom: 48px !important; }
  .amuk-wrap--tail { padding-top: 32px !important; padding-bottom: 72px !important; }
  .amuk-wrap--foot { padding-top: 56px !important; padding-bottom: 32px !important; }

  /* Service cards: more room for the text inside the flightcase frame. */
  .amuk-svc-lid { padding: 28px 24px 72px !important; }
  .amuk-svc-title { font-size: 30px !important; }

  /* Coverage map: smaller labels so towns don't overlap or get cut off. */
  .map .town { font-size: 10px; gap: 4px; }
  .map .town i { width: 6px; height: 6px; }
  .map .town.l { transform: translate(calc(-100% + 3px), -50%); }
  .amuk-map-hq { padding: 3px 7px !important; transform: translate(-50%, calc(-100% - 16px)) !important; }
  .amuk-map-hq span:first-child { font-size: 12px !important; }
  .amuk-map-hq span:last-child { font-size: 8px !important; }
  .amuk-map-radius { font-size: 9px !important; padding: 1px 4px !important; }
  .map .town.amuk-l-phone { flex-direction: row-reverse; transform: translate(calc(-100% + 3px), -50%); }

  /* Hire dates sit side by side. */
  .amuk-date-field { flex: 1 1 130px; min-width: 0 !important; }
  .amuk-date-field .inp { padding-left: 10px; padding-right: 8px; }

  /* Category feature banner (e.g. confetti cannons). */
  .amuk-promo-inner { padding: 28px 22px 30px !important; gap: 24px !important; }
  .amuk-promo-media { min-height: 170px !important; }

  /* Hire Stock category titles. */
  .amuk-group-head h2 { font-size: 24px !important; }

  /* Kit list: name and prices beside the thumbnail. */
  .amuk-row-text { flex-basis: 140px !important; }

  /* Flightcase bar: one slim row. */
  .amuk-bar { padding: 0 12px !important; bottom: 12px !important; }
  .amuk-bar > div { flex-wrap: nowrap !important; gap: 10px !important; padding: 8px 8px 8px 14px !important; }
  .amuk-bar > div > span { font-size: 14px !important; line-height: 1.3; }
  .amuk-bar .btn-accent { min-height: 44px !important; padding: 0 14px !important; font-size: 13px !important; flex-shrink: 0; }
  .amuk-hide-phone { display: none; }
}

/* Very narrow phones: the smallest map labels. */
@media (max-width: 400px) {
  .map .town { font-size: 9px; }
  .amuk-map-hq span:last-child { display: none; }
  /* The map runs edge to edge so the labels have room. */
  .amuk-map-figure { width: calc(100% + 40px) !important; max-width: none !important; margin: 0 -20px !important; }
  .amuk-map-figure .map { border-left: 0 !important; border-right: 0 !important; }
  .amuk-map-caption { padding: 0 20px; }
}