/* My Moving Mate: the one stylesheet for the whole site. The design comes first, unchanged. Additions are at the end. */

:root {
  --navy: #253B67;
  --orange: #F26C21;
  --white: #fff;

  /* Three sizes, nothing else */
  --big: clamp(42px, 4.45vw, 88px);
  --text: clamp(19px, 1.5vw, 26px);
  --small: clamp(14px, 1.05vw, 17px);

  --edge: clamp(24px, 4.5vw, 88px);
  --gutter: clamp(32px, 6.6vw, 120px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Montserrat, sans-serif;
  font-size: var(--text);
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

h1, h2, h3 {
  font-size: var(--big);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-left: -0.04em;
}
.lines span { display: block; }
.phone-only { display: none; }

.button {
  display: inline-block;
  font-size: var(--text);
  font-weight: 700;
  line-height: 1;
  padding: 1em 2em;
  border-radius: 999px;
  text-decoration: none;
  text-shadow: none;
}
.button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.button.buy { background: var(--orange); color: var(--navy); }
.button.light { background: var(--white); color: var(--navy); }

/* Header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 var(--edge);
}
.top img { width: 200px; height: auto; }
.top nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: var(--small);
  font-weight: 600;
}
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.top nav .help {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
}

/* Hero: the words sit on the door */
.hero {
  position: relative;
  height: clamp(560px, calc(100vh - 88px), 66.667vw);
  height: clamp(560px, calc(100svh - 88px), 66.667vw);
  background: var(--navy);
  color: var(--white);
}
.hero-photo { position: absolute; inset: 0; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-words {
  position: absolute;
  left: 56.5%;
  right: 24px;
  top: calc(50% - 4.3vw);
  transform: translateY(-50%);
  text-shadow: 0 0 20px rgba(24, 32, 62, 0.6);
}
.lead { margin-top: 0.85em; }
.small { font-size: var(--small); margin-top: 0.45em; text-wrap: balance; }
.hero .button { margin-top: 22px; }

/* Bags */
.bags-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: end;
  padding: clamp(72px, 9vw, 160px) 0 clamp(40px, 5vw, 88px);
}
.bags-head h2, .bags-head p { padding-left: var(--edge); }
.bags-head p { grid-column: 1; margin-top: 0.7em; }
.badge {
  grid-column: 2;
  grid-row: 1;
  width: min(260px, 100% - var(--gutter));
  height: auto;
  margin: 0 0 0.45em var(--gutter);
}

.bag { display: grid; grid-template-columns: 3fr 2fr; align-items: center; }
.bag + .bag { margin-top: clamp(72px, 8vw, 140px); }
.bag-photo { position: relative; overflow: hidden; }
.bag-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.bag-words { padding: 0 var(--edge) 0 var(--gutter); }
.bag-words p { margin-top: 0.55em; }
.sizes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 1.3em;
  margin-top: 1.4em;
  font-weight: 600;
}
.sizes a {
  display: inline-block;
  padding: 10px 0;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.sizes a:hover { text-decoration-thickness: 4px; }

.bag.flip { grid-template-columns: 2fr 3fr; }
.bag.flip .bag-photo { order: 2; }
.bag.flip .bag-words { padding: 0 var(--gutter) 0 var(--edge); }

/* Help */
.help-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-top: clamp(96px, 10vw, 180px);
  padding: clamp(72px, 8vw, 140px) 0;
  background: var(--navy);
  color: var(--white);
}
.help-words { padding: 0 var(--gutter) 0 var(--edge); }
.help-words p { margin-top: 0.85em; }
.help-words .button { margin-top: 32px; }
.mate { justify-self: center; width: clamp(200px, 25vw, 420px); height: auto; }

/* Footer */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
  padding: 32px var(--edge);
  font-size: var(--small);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 32px; font-weight: 600; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* Tablet and phone: photo first, words on solid navy under it */
@media (max-width: 1240px) {
  .hero {
    height: auto;
    min-height: calc(100vh - 88px);
    min-height: calc(100svh - 88px);
    display: flex;
    flex-direction: column;
  }
  .hero-photo { position: relative; inset: auto; flex: 1 1 auto; min-height: max(200px, 34vw); }
  .hero-photo img { position: absolute; inset: 0; object-position: 26% 40%; }
  .hero-words { position: static; transform: none; padding: 24px var(--edge) 28px; text-shadow: none; }
}

/* Phone */
@media (max-width: 700px) {
  :root { --big: min(42px, 10.77vw); }
  .phone-only { display: inline; }

  .top { height: 64px; }
  .top img { width: 184px; }
  .top nav a:not(.help) { display: none; }
  .top nav .help { padding: 11px 20px; }

  .hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
  .hero .button { margin-top: 20px; }

  .bags-head { display: block; position: relative; }
  .badge { width: 160px; margin: 24px 0 0 var(--edge); }

  .bag, .bag.flip, .help-band { grid-template-columns: 1fr; }
  .bag.flip .bag-photo { order: 0; }
  .bag-words, .bag.flip .bag-words { padding: 24px var(--edge) 0; }
  .sizes { gap: 4px 18px; }

  .help-words { padding: 0 var(--edge); }
  .mate { order: -1; justify-self: start; margin: 0 0 24px var(--edge); width: 168px; }

  footer { flex-direction: column; align-items: flex-start; }
}

/* Added for the rest of the site */

[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Short pages keep the footer at the bottom */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* Skip link: only seen when reached with the keyboard */
.skip {
  position: absolute;
  top: -100px;
  left: var(--edge);
  z-index: 10;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: var(--small);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 8px; }

/* Every small link is a tap target of at least 44 px */
.top > a, .top nav a, footer a, .links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.sizes a { margin: 0 -5px; padding-left: 5px; padding-right: 5px; }

/* Two or three small plain text links in a row */
.links { display: flex; flex-wrap: wrap; gap: 0 1.6em; font-size: var(--small); font-weight: 600; }
.links a { text-underline-offset: 0.3em; }
.links a:hover { text-decoration-thickness: 2px; }

/* Footer: the company details sit under the links */
footer nav { gap: 0 32px; }
.legal { width: 100%; }
.legal p { max-width: 62em; }
.legal p + p { margin-top: 0.5em; }

/* Other pages: big h1 and one line, then the content, on the same side margins */
.page-head { padding: clamp(72px, 9vw, 160px) var(--edge) clamp(40px, 5vw, 88px); }
.page-head p { margin-top: 0.7em; }
.page-body { padding: 0 var(--edge) clamp(72px, 9vw, 160px); }

/* Simple form: label above a plain input, one column */
.form { max-width: 640px; }
.form label { display: block; margin-top: 1.4em; font-weight: 600; }
.form label:first-of-type { margin-top: 0; }
.form input, .form select, .form textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  padding: 12px 16px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: var(--white);
  color: inherit;
  font: inherit;
}
.form textarea { min-height: 200px; resize: vertical; }
.button { border: 0; font-family: inherit; cursor: pointer; }
.button.send { background: var(--navy); color: var(--white); }
.form .button { margin-top: 32px; }

/* Small text for notes */
.note { margin-top: 0.7em; font-size: var(--small); }

/* Wholesale and About pages: the big photo at the top, the same size as the homepage photo */
.page-photo img {
  width: 100%;
  height: clamp(560px, calc(100vh - 88px), 66.667vw);
  height: clamp(560px, calc(100svh - 88px), 66.667vw);
  object-fit: cover;
}
.photo-wholesale img { object-position: 50% 42%; }
.photo-about img { object-position: 50% 28%; }
.page-body > .note:first-child { margin: 0 0 32px; }
.story { padding-bottom: 0; }
.story p { max-width: 36em; text-wrap: pretty; }
.balance { text-wrap: balance; }
@media (max-width: 700px) { .page-photo img { height: 97vw; } }

/* Privacy page */
.reading h2 { font-size: var(--text); font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: clamp(40px, 4vw, 64px) 0 0; }
.reading h2:first-child { margin-top: 0; }
.reading p { max-width: 36em; margin-top: 0.7em; }
.reading a { display: inline-block; padding: 9px 0; margin: -9px 0; }

/* Get help page, plus the form errors and success words it shares with Wholesale */
.help-band:first-child { margin-top: 0; }
.help-band:first-child p { text-wrap: balance; }
.help-words .small { margin-top: 0.45em; }
.help-band + .page-body { padding-top: clamp(40px, 5vw, 88px); }
.form [data-when] p { margin-top: 12px; }
.form [data-when] .sizes { margin-top: 4px; }
.form input, .form select, .form textarea { scroll-margin-top: 96px; }
.form select { appearance: none; padding-right: 44px; text-overflow: ellipsis; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23253B67' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.form input[type="file"]::file-selector-button { margin-right: 12px; padding: 0 0 1px; border: 0; border-bottom: 2px solid var(--orange); background: none; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; }
.form [aria-invalid="true"] { border-bottom-color: var(--orange); }
[data-error]:not(:empty) { margin-top: 8px; font-size: var(--small); font-weight: 700; }
[data-success]:focus { outline: none; }
.roundel { display: grid; place-items: center; width: clamp(192px, 16vw, 272px); aspect-ratio: 1; margin-bottom: 24px; border-radius: 50%; background: var(--navy); overflow: hidden; }
.roundel img { width: 88%; height: auto; }
/* End of Get help page */

/* Sizes: each one a clear button with a small picture of the mattress, its name and measurements, and Buy. The whole button links to that size on Amazon. */
.size-grid { list-style: none; display: grid; gap: 8px; margin-top: 1.3em; }
.size {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 9px 12px 9px 14px;
  background: var(--white);
  border: 2px solid rgba(37, 59, 103, 0.2);
  border-radius: 14px;
  line-height: 1.25;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.size:hover { border-color: var(--navy); box-shadow: 0 6px 18px rgba(37, 59, 103, 0.14); }
.size:active { background: rgba(37, 59, 103, 0.05); }
.size-pic { flex: none; display: block; width: 50px; height: 50px; }
.size-pic .m { fill: var(--navy); transition: fill 0.12s; }
.size-pic .p { fill: var(--white); }
.size:hover .size-pic .m, .size:active .size-pic .m { fill: var(--orange); }
.size-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.size-name { font-weight: 600; }
.size-dims { font-size: var(--small); font-weight: 500; }
.size-buy { flex: none; padding: 0.62em 1.2em; }
.pick { font-size: var(--small); font-weight: 600; }

/* The label on the photo of our most popular bag */
.popular {
  position: absolute;
  top: clamp(12px, 1.6vw, 28px);
  left: clamp(12px, 1.6vw, 28px);
  padding: 0.55em 1em;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: var(--small);
  font-weight: 700;
  line-height: 1;
}

/* The Bags page: photo and words start on the same line, and every column of sizes lines up from one bag to the next */
.bag-block { display: grid; grid-template-columns: 2fr 3fr; align-items: start; gap: var(--gutter); }
.bag-block + .bag-block { margin-top: clamp(72px, 8vw, 140px); }
.bag-block-words h2 { margin-top: -0.14em; }
.bag-block-words p { margin-top: 0.55em; }
.size-help { margin-top: clamp(72px, 8vw, 140px); }
@media (min-width: 1101px) {
  .size-grid.full .size { display: grid; grid-template-columns: 50px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; column-gap: 16px; }
  .size-grid.full .size-text { display: contents; }
  .size-grid.full .size-buy { grid-column: 5; }
}
@media (max-width: 700px) {
  .bag-block { display: block; }
  .bag-block .bag-photo { margin: 0 calc(var(--edge) * -1); }
  .bag-block-words { padding-top: 24px; }
}
/* Tablets: photo and sizes half and half, so the size buttons have room */
@media (min-width: 701px) and (max-width: 1100px) { .bag, .bag.flip { grid-template-columns: 1fr 1fr; } }

/* Country selector, top right */
.country {
  appearance: none;
  -webkit-appearance: none;
  min-width: 58px;
  min-height: 44px;
  padding: 0 20px 0 8px;
  border: 0;
  border-radius: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23253B67' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 5px center;
  color: var(--navy);
  font: inherit;
  cursor: pointer;
}
.country:hover { background-color: rgba(37, 59, 103, 0.08); }

/* Made for phones */
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.top { position: sticky; top: 0; z-index: 20; background: var(--white); padding-top: env(safe-area-inset-top); height: calc(88px + env(safe-area-inset-top)); }
#bags { scroll-margin-top: 88px; }
.skip { z-index: 30; }
@media (max-width: 700px) {
  .top { height: calc(64px + env(safe-area-inset-top)); }
  #bags { scroll-margin-top: 64px; }
  .top img { width: min(148px, 100vw - 228px); }
  .top nav { gap: 8px; }
  .country { font-size: 16px; }
  .top nav a:not(.help) { display: none; }
}
@media (max-width: 349px) { .top img { width: 104px; } .top nav .help { padding-left: 14px; padding-right: 14px; } }
:root { --edge: max(clamp(24px, 4.5vw, 88px), env(safe-area-inset-left), env(safe-area-inset-right)); }
footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }


/* A small round close-up on the corner of each bag photo */
.bag-photo img.detail {
  position: absolute;
  right: clamp(12px, 1.6vw, 28px);
  bottom: clamp(12px, 1.6vw, 28px);
  width: clamp(104px, 11.5vw, 190px);
  aspect-ratio: 1;
  border: clamp(3px, 0.3vw, 5px) solid var(--white);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(24, 32, 62, 0.3);
}
.bag-block .bag-photo img.detail { width: clamp(84px, 8vw, 128px); }
.clear .detail { object-position: 75% 50%; }
.tarp .detail { object-position: 0 50%; }
.tarp img.detail { right: auto; left: clamp(12px, 1.6vw, 28px); }
.sofa .detail { object-position: 65% 50%; }
@media (max-width: 700px) { .bag-block .bag-photo img.detail { width: 104px; } }

/* Bag names stay on one line where there is room */
.bag-words h3 { margin-right: calc(24px - var(--edge)); }

/* The heading stays on one line where it fits */
@media (min-width: 1000px) { .bags-head h2 { white-space: nowrap; } }