/* Shipping page — core Gutenberg blocks + theme hooks (block library stays dequeued). */

.shipping-page {
  background: #fff;
  color: var(--text);
}

/* Production shipping: body has no top padding; hero starts at y=0 under the fixed header. */
body.shipping-page {
  padding-top: 0 !important;
}

/* Flatten Gutenberg wrappers so section/container grids still work */
.shipping-page .wp-block-group__inner-container {
  display: contents;
}
.shipping-page .section > .wp-block-group__inner-container,
.shipping-page .container > .wp-block-group__inner-container,
.shipping-page .shipping-hero > .wp-block-group__inner-container {
  display: block;
  width: 100%;
}

/* Hero must sit flush under the fixed header (no white band).
 * IMPORTANT: the hero section also carries id="main-content" (page-header pattern),
 * so never zero padding on a bare #main-content — that killed hero padding:150px
 * and left a white body/page strip above the navy background. */
body.shipping-page > main#main-content,
body.shipping-page main.wp-block-group.shipping-page,
main.wp-block-group.shipping-page {
  margin-top: 0;
  padding-top: 0;
}
.shipping-page > .shipping-hero,
.shipping-page .shipping-hero.wp-block-group,
.shipping-page .shipping-hero,
section.shipping-hero#main-content {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  /* Restore production hero padding (overrides any #main-content / group resets) */
  padding: 150px 0 84px !important;
}

/*
 * Reset default WP block margins only on in-card elements.
 * Do NOT zero .wp-block-columns / section intros — those carry production rhythm
 * (overview 42px, card-grid 40px, timeline 46px, section-sub 48px, etc.).
 */
.shipping-page .wp-block-group:not(.shipping-faq-list):not(.section):not(.shipping-hero):not(.container):not(.shipping-section-intro):not(.bg-light) {
  margin-block: 0;
}
.shipping-page .wp-block-paragraph:not(.section-tag):not(.section-sub):not(.breadcrumb):not(.shipping-card-mark):not(.shipping-highlight):not(.shipping-step-num):not(.shipping-step-time):not(.incoterm-code):not(.incoterm-best),
.shipping-page .wp-block-heading:not(.section-title),
.shipping-page .wp-block-column,
.shipping-page .wp-block-details {
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
}
/* Hero headings keep production rhythm (reset above would zero them). */
.shipping-page .shipping-hero .wp-block-heading:not(.section-title) {
  margin: 12px 0 16px !important;
}
.shipping-page .wp-block-columns {
  /* keep margin-top from grid rules; only kill WP default bottom gap */
  margin-bottom: 0;
  max-width: none;
}
.shipping-page .wp-block-table,
.shipping-page figure.wp-block-table {
  max-width: none;
}

/* Alternating section band (matches markup class used in production HTML) */
.shipping-page .bg-light {
  background: var(--bg);
}


/* Hero */
.shipping-hero {
  background: #071826; /* featured-image hero via marketing-hero.css */
  color: #fff;
  padding: 150px 0 84px;
}
.shipping-hero h1,
.shipping-hero .wp-block-heading,
.shipping-page .shipping-hero h1,
.shipping-page .shipping-hero .wp-block-heading {
  color: #fff !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  margin: 12px 0 16px !important;
  max-width: none;
}
.shipping-hero > .wp-block-group__inner-container > .container .wp-block-paragraph:not(.section-tag):not(.breadcrumb),
.shipping-hero p.wp-block-paragraph:not(.section-tag):not(.breadcrumb),
.shipping-hero .wp-block-paragraph:not(.section-tag):not(.breadcrumb),
.shipping-page .shipping-hero .wp-block-paragraph:not(.section-tag):not(.breadcrumb) {
  max-width: 620px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  margin: 0 0 24px !important;
}
.shipping-hero .section-tag,
.shipping-page .shipping-hero .section-tag,
.shipping-page .shipping-hero p.section-tag {
  color: var(--gold-light);
  background: transparent;
  border-color: rgba(232, 213, 163, 0.35);
  margin-bottom: 0;
}
.shipping-hero .breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  max-width: none;
  margin: 0;
}
.shipping-hero .breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

/* Section intros — shared tag/title/sub live in marketing-sections.css */
.shipping-page .shipping-section-intro {
  text-align: center;
}
.shipping-page .shipping-section-intro .section-sub,
.shipping-page .shipping-section-intro p.section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Overview — production: stretch so data-card + feature-grid share top AND height */
.shipping-page .wp-block-columns.shipping-overview,
.shipping-page .shipping-overview {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
  gap: 32px;
  margin-top: 42px;
  align-items: stretch !important;
  flex-wrap: unset !important;
}
.shipping-overview > .wp-block-column {
  margin: 0 !important;
  padding: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
  align-self: stretch;
  min-height: 0;
}
/* Gutenberg nests feature-grid in a right column; flatten to match prod siblings */
.shipping-page .shipping-overview > .wp-block-column:not(.shipping-data-card) {
  display: contents;
}
.shipping-page .shipping-overview .shipping-feature-grid,
.shipping-page .wp-block-columns.shipping-feature-grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: stretch;
  height: 100%;
}
/* data-card IS the left column — restore padding; kill WP column max-width:40% (flex leftover) that shrunk card to ~193px inside grid track */
.shipping-page .shipping-overview > .wp-block-column.shipping-data-card,
.shipping-page .shipping-data-card {
  padding: 28px !important;
  height: 100%;
  box-sizing: border-box;
  align-self: stretch;
  max-width: none !important;
  width: 100% !important;
}

.shipping-data-card,
.shipping-feature,
.shipping-card,
.incoterm-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(13, 27, 42, 0.06);
}
.shipping-data-card {
  padding: 28px;
}
.shipping-data-card h3,
.shipping-data-card .wp-block-heading {
  font-size: 20px;
  margin-bottom: 12px;
}

.shipping-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-mid);
}
.shipping-stat-row .wp-block-paragraph {
  margin: 0;
  font-size: 14px;
  color: var(--text-mid);
  /* Undo .wp-block-column { word-break:break-word } mid-word wraps ("Containe r", "25 day s") */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.shipping-stat-row .wp-block-paragraph:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.shipping-stat-row .wp-block-paragraph:last-child,
.shipping-stat-row .wp-block-paragraph strong {
  color: var(--navy);
  text-align: right;
  font-weight: 700;
}
.shipping-stat-row .wp-block-paragraph:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.shipping-page .wp-block-columns.shipping-feature-grid,
.shipping-page .shipping-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  flex-wrap: unset !important;
}
.shipping-feature-grid > .wp-block-column {
  margin: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
}
.shipping-feature {
  padding: 24px;
}
.shipping-feature h3,
.shipping-feature .wp-block-heading,
.shipping-card h3,
.shipping-card .wp-block-heading {
  font-size: 17px;
  margin: 0 0 8px;
}
.shipping-feature p,
.shipping-feature .wp-block-paragraph,
.shipping-card p,
.shipping-card .wp-block-paragraph,
.incoterm-card p:not(.incoterm-code):not(.incoterm-best),
.incoterm-card .wp-block-paragraph:not(.incoterm-code):not(.incoterm-best) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0;
}

/* Tables */
.shipping-page .wp-block-table.ship-table,
.shipping-page figure.ship-table {
  overflow-x: auto;
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: block;
}
.shipping-page .wp-block-table.ship-table table,
.shipping-page .ship-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
  border: none;
}
.shipping-page .ship-table th,
.shipping-page .ship-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  border-left: none;
  border-right: none;
}
.shipping-page .ship-table thead th {
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.shipping-page .ship-table tbody td:first-child,
.shipping-page .ship-table tbody td:first-child strong {
  color: var(--navy);
  font-weight: 700;
}
.shipping-page .ship-table tbody td {
  color: var(--text-mid);
}
.shipping-page .ship-table tbody tr:nth-child(even) {
  background: var(--bg);
}
.shipping-page .ship-table .wp-element-caption {
  display: none;
}

/* Card grids */
.shipping-page .wp-block-columns.shipping-card-grid,
.shipping-page .shipping-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
  flex-wrap: unset !important;
}
.shipping-card-grid > .wp-block-column {
  margin: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
}
/* card-grid stacks keep production 40px margin-top (no adjacent tighten) */

.shipping-card {
  padding: 24px;
}
.shipping-card-mark,
.shipping-card .shipping-card-mark,
.shipping-card p.shipping-card-mark,
.shipping-page .shipping-card-mark.wp-block-paragraph {
  display: inline-grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 0 16px !important;
  border-radius: 8px;
  background: var(--navy) !important;
  color: var(--gold-light) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400;
  padding: 0 !important;
  max-width: none;
}

/* Timeline */
.shipping-page .wp-block-columns.shipping-timeline,
.shipping-page .shipping-timeline {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 46px;
  flex-wrap: unset !important;
}
.shipping-timeline > .wp-block-column {
  margin: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
}
.shipping-step {
  text-align: center;
  position: relative;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.shipping-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 65%;
  width: 70%;
  height: 2px;
  background: var(--gold);
}
.shipping-step-num,
.shipping-page .shipping-step-num.wp-block-paragraph,
.shipping-step p.shipping-step-num {
  position: relative;
  z-index: 1;
  display: grid !important;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px !important;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--navy) !important;
  /* White numbers on navy (do not inherit paragraph text-mid) */
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(13, 27, 42, 0.15);
  padding: 0 !important;
}
.shipping-step h3,
.shipping-step .wp-block-heading {
  font-size: 15px;
  margin: 0 0 6px !important;
}
/* Description only — exclude number + duration badge */
.shipping-step > .wp-block-paragraph:not(.shipping-step-num):not(.shipping-step-time) {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0 0 8px !important;
}
.shipping-step-time,
.shipping-step .shipping-step-time,
.shipping-step p.shipping-step-time,
.shipping-page .shipping-step-time.wp-block-paragraph {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px;
  background: rgba(201, 169, 97, 0.14) !important;
  color: var(--steel) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  width: auto;
  max-width: none;
  line-height: 1.4;
}

/* Incoterms */
.shipping-page .wp-block-columns.incoterm-grid,
.shipping-page .incoterm-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
  flex-wrap: unset !important;
}
.incoterm-grid > .wp-block-column {
  margin: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
}
.incoterm-card {
  padding: 28px;
  border-top: 4px solid var(--gold);
}
/* Match live/static .incoterm-card>strong { font-size:22px } — beat .incoterm-card .wp-block-paragraph */
.incoterm-card .incoterm-code,
.incoterm-card .incoterm-code.wp-block-paragraph,
.shipping-page .incoterm-code {
  display: block;
  color: var(--steel);
  font-size: 22px !important;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 8px !important;
}
.incoterm-card .incoterm-code strong,
.shipping-page .incoterm-code strong {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.incoterm-card h3,
.incoterm-card .wp-block-heading {
  font-size: 19px;
  margin: 0 0 10px;
}
.incoterm-best {
  display: block;
  margin-top: 14px !important;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mid);
}

/* Highlights */
.shipping-highlight,
.shipping-card .shipping-highlight,
.shipping-card p.shipping-highlight,
.shipping-page .shipping-highlight.wp-block-paragraph {
  display: block !important;
  color: var(--steel) !important;
  font-size: 30px !important;
  margin: 0 0 8px !important;
  line-height: 1.6 !important;
  font-weight: 700;
  max-width: none;
}
.shipping-highlight strong,
.shipping-card .shipping-highlight strong {
  color: inherit !important;
  font-weight: 700;
  font-size: inherit;
}

/* FAQ (core/details) */
.shipping-page .wp-block-group.shipping-faq-list,
.shipping-page .shipping-faq-list {
  max-width: 860px;
  margin: 40px auto 0;
}
.shipping-faq-list .wp-block-details,
.shipping-faq-list details {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  margin: 0;
}
.shipping-faq-list summary {
  cursor: pointer;
  list-style: none;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  padding-right: 24px;
  position: relative;
}
.shipping-faq-list summary::-webkit-details-marker {
  display: none;
}
.shipping-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--gold-dark);
  font-size: 22px;
  font-weight: 400;
}
.shipping-faq-list details[open] summary::after {
  content: "\2212";
}
.shipping-faq-list details p,
.shipping-faq-list details .wp-block-paragraph {
  margin: 12px 28px 0 0;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.7;
}

/* Optional CTA hook (unused in current content, kept for parity) */
.shipping-cta {
  background: var(--navy);
  color: #fff;
}
.shipping-cta h2,
.shipping-cta .wp-block-heading {
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 14px;
}
.shipping-cta p,
.shipping-cta .wp-block-paragraph {
  max-width: 680px;
  margin: 0 auto 26px;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 960px) {
  .shipping-overview {
    grid-template-columns: 1fr;
  }
  .shipping-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shipping-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
  .shipping-step:nth-child(3)::after,
  .shipping-step:nth-child(6)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  section.shipping-hero,
  .shipping-hero {
    padding: 112px 0 60px !important;
  }
  .shipping-feature-grid,
  .shipping-card-grid,
  .incoterm-grid {
    grid-template-columns: 1fr;
  }
  .shipping-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 12px;
  }
  .shipping-step::after {
    display: none !important;
  }
  .shipping-page .section {
    padding: 58px 0;
  }
}


/* Overview widths come from grid (minmax(280px,0.8fr) 1.2fr) above.
   Do NOT re-apply flex 40%/60% max-width here — that crushed .shipping-data-card
   to ~193px inside the first grid track and mid-broke sidebar labels. */