/* Shipping pages (/shipping/, /shipping/hawaii/). Loaded by inc/shipping.php. */

/* ---------- hero: text left, photo right ---------- */
.ship-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(72vh, 40rem); background: var(--surface); }
.ship-hero__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4.5rem) clamp(3rem, 5vw, 5rem) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.ship-hero__text .breadcrumbs { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ship-hero__text .eyebrow { margin-bottom: 1.1rem; }
.ship-hero__text .page-hero__title { max-width: 15ch; }
.ship-hero__lede { max-width: 34rem; margin: 1.5rem 0 0; color: var(--text); }
.ship-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.ship-hero__actions .link-arrow { min-width: 0; }
.ship-hero__media { position: relative; min-height: 22rem; }
.ship-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ship-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--surface) 0%, rgb(247 246 244 / 0) 18%); }

/* ---------- facts strip ---------- */
.ship-facts { border-bottom: 1px solid var(--line); }
.ship-facts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ship-facts__item { padding: clamp(1.5rem, 2.5vw, 2.25rem) 1.75rem clamp(1.5rem, 2.5vw, 2.25rem) 0; }
.ship-facts__item + .ship-facts__item { padding-left: 1.75rem; border-left: 1px solid var(--line); }
.ship-facts__big { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 2.4vw, 2.4rem); line-height: 1.1; color: var(--ink); }
.ship-facts__small { margin: .4rem 0 0; font-size: var(--fs-small); color: var(--muted); }

/* ---------- shared text ---------- */
.ship-intro { max-width: 46rem; margin: 1.25rem 0 0; color: var(--text); }
.ship-how .eyebrow, .ship-where .eyebrow, .ship-cols .eyebrow, .ship-quote .eyebrow { margin-bottom: 1rem; }

/* ---------- steps ---------- */
.ship-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.ship-steps__item { padding-top: 1.4rem; border-top: 1px solid var(--ink); }
.ship-steps__num { margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1; color: var(--gold); }
.ship-steps__title { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; }
.ship-steps__text { margin: 0; font-size: var(--fs-small); color: var(--muted); }

/* ---------- where we ship: text | map ---------- */
.ship-where__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.ship-map { display: block; width: 100%; height: auto; }
.ship-map .land { fill: #e6e1d7; stroke: #4a4a4a; stroke-width: .8; stroke-linejoin: round; }
.ship-map .borders { fill: none; stroke: #fff; stroke-width: 1.1; }
.ship-map .route { fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-dasharray: 2 6; stroke-linecap: round; }
.ship-map .dest { fill: var(--ink); }
.ship-map .origin { fill: var(--gold); }
.ship-map .origin-ring { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.ship-map .origin-label { font-family: var(--sans); font-size: 15px; font-weight: 500; fill: var(--ink); }
.ship-map .isl { font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 500; fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .ship-map .route { stroke-dashoffset: 240; animation: ship-draw 2.6s ease-out .3s both; }
  @keyframes ship-draw { from { stroke-dashoffset: 240; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
}

/* ---------- two columns: heading + photo | body ---------- */
.ship-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ship-cols__body p { color: var(--text); max-width: 40rem; }
.ship-cols__body p:last-child { margin-bottom: 0; }
.ship-fig { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.ship-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-img, 9px); }
.ship-fig__caption { margin: .65rem 0 0; font-size: .85rem; color: var(--muted); }
.ship-detail + .ship-detail { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.ship-detail__title { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 600; }

/* ---------- forklift: dark band ---------- */
.ship-dark { background: #1e1e1e radial-gradient(ellipse at 80% 20%, #2c2c2c 0%, transparent 60%); color: var(--white); }
.ship-dark .title { color: var(--white); }
.ship-dark .ship-cols__body p { color: #c9c9c9; }
.ship-dark .ship-cols__body p:first-child { color: var(--white); }
.ship-dark strong { color: var(--white); font-weight: 600; }

/* ---------- quote: text | form ---------- */
.ship-quote__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ship-form { padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--white); border-radius: var(--radius-img, 9px); min-height: 20rem; }
/* Nutshell embed (#peanut-container), restyled to the underline fields of the design */
.ship-form #peanut-container#peanut-container #form-fields-container { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.75rem; }
.ship-form #form-fields-container > * { grid-column: 1 / -1; min-width: 0; }
.ship-form #form-fields-container > [data-ship-field="count"], .ship-form #form-fields-container > [data-ship-field="size"],
.ship-form #form-fields-container > [data-ship-field="name"], .ship-form #form-fields-container > [data-ship-field="company"],
.ship-form #form-fields-container > [data-ship-field="email"], .ship-form #form-fields-container > [data-ship-field="phone"] { grid-column: auto; }
.ship-form #form-fields-container > div:not([class]) { display: contents; } /* hCaptcha holder */
.ship-form #peanut-container#peanut-container label, .ship-form #peanut-container#peanut-container legend { margin-bottom: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); }
.ship-form #peanut-container label > span:not(.ship-form__hint), .ship-form #peanut-container legend > span:not(.ship-form__hint) { color: var(--gold); }
.ship-form__hint { margin-left: .2rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted) !important; font-size: .8rem; }
.ship-form #peanut-container#peanut-container input[type="text"], .ship-form #peanut-container#peanut-container input[type="email"], .ship-form #peanut-container#peanut-container input[type="tel"], .ship-form #peanut-container#peanut-container [class*="-control"] { min-height: 2.6rem; padding: .55rem 0; border: 0; border-bottom: 1px solid #c9c4ba; border-radius: 0; background: transparent; font-size: .95rem; }
.ship-form #peanut-container#peanut-container [class*="-control"] input { min-height: 0; padding: 0; border: 0; }
.ship-form #peanut-container#peanut-container [class*="-control"] > div:first-child { padding: 0; }
.ship-form #peanut-container [class*="indicatorSeparator"] { display: none; }
.ship-form #peanut-container [class*="indicatorContainer"] { padding: 0 2px; color: var(--ink); }
.ship-form #peanut-container [class*="-menu"] { z-index: 5; border-radius: 0; box-shadow: 0 10px 30px rgb(0 0 0 / .12); font-size: .95rem; }
.ship-form #peanut-container [class*="-option"] { background-color: transparent !important; color: var(--ink) !important; }
.ship-form #peanut-container [class*="-option"].is-active, .ship-form #peanut-container [class*="-option"]:hover { background-color: var(--surface) !important; }
.ship-form #peanut-container#peanut-container textarea { min-height: 6rem; padding: .75rem; border: 1px solid #c9c4ba; border-radius: 0; font-size: .95rem; }
.ship-form #peanut-container#peanut-container input:focus, .ship-form #peanut-container#peanut-container textarea:focus, .ship-form #peanut-container#peanut-container [class*="-control"]:focus-within { border-color: var(--ink); }
.ship-form [data-ship-field="insurance"] legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ship-form #peanut-container#peanut-container [data-ship-field="insurance"] label { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.ship-form #peanut-container [data-ship-field="insurance"] input[type="checkbox"] { flex: none; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; }
.ship-form__note { display: none; padding: .9rem 1.1rem; border-left: 2px solid var(--gold); background: var(--surface); font-size: .9rem; line-height: 1.5; color: var(--text); }
.ship-form__note.is-shown { display: block; }
.ship-form [data-ship-field="submit"] > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 1rem 1.4rem; }
.ship-form #peanut-container#peanut-container input[type="submit"] { min-height: 3.1rem; padding: .85rem 2.1rem; font-size: .8rem; letter-spacing: .12em; }
.ship-form__foot { margin: 0; font-size: .85rem; color: var(--muted); }
.ship-form:not(.is-ready) .ship-form__foot { display: none; }
/* Nutshell's thank-you message */
.ship-form #peanut-container [class*="success"], .ship-form #peanut-container form > p { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.25; color: var(--ink); }

/* ---------- cross-link ---------- */
.ship-cross { padding-block: clamp(3rem, 5vw, 4.5rem); }
.ship-cross__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.75rem; }
.ship-cross__text { margin: 0; max-width: 30ch; font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.2; color: var(--ink); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .ship-hero { grid-template-columns: 1fr; min-height: 0; }
  .ship-hero__media { order: -1; min-height: 18rem; }
  .ship-hero__media::before { display: none; }
  .ship-hero__text { padding: 2rem var(--gutter) 2.5rem; }
  .ship-facts__grid { grid-template-columns: 1fr; }
  .ship-facts__item, .ship-facts__item + .ship-facts__item { padding: 1.25rem 0; border-left: 0; }
  .ship-facts__item + .ship-facts__item { border-top: 1px solid var(--line); }
  .ship-steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .ship-where__grid, .ship-cols, .ship-quote__grid { grid-template-columns: 1fr; }
  .ship-form #peanut-container#peanut-container #form-fields-container { grid-template-columns: 1fr; }
  .ship-form #form-fields-container > [data-ship-field] { grid-column: 1 / -1; }
}