/* Fixes for the standalone-migrated TNT Motion pages.
   Added 2026-05-02 during /applications/ pilot migration.
   These rules patch issues that exist in the underlying WP theme
   (theme.json missing layout.contentSize, generic content-link rule
   overrides hero button color). */

/* === FIX 1: layout constraint for Gutenberg block-group inner containers ===
   WP normally generates max-width via theme.json -> settings.layout.contentSize.
   The 'my-blank-page' theme has no theme.json so the rule never gets emitted.
   Without it, .is-layout-constrained does nothing and content bleeds full-width. */
.wp-block-group__inner-container.is-layout-constrained,
.wp-block-group.is-layout-constrained > .wp-block-group__inner-container,
.is-layout-constrained {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* alignwide blocks should be wider than the constrained max */
.is-layout-constrained > .alignwide,
.is-layout-constrained .wp-block-columns.alignwide {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* alignfull breaks out of the constraint entirely */
.is-layout-constrained > .alignfull {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* === FIX 2: hero button text colour ===
   .site-main__content a { color: var(--color-accent) } overrides
   .hero__button--primary { color: #fff } via specificity, making the
   white button text render in the same orange as the background = invisible. */
.site-main__content a.hero__button,
.site-main__content a.hero__button--primary,
.site-main__content a.hero__button--secondary {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* === FIX 3: keep all internal nav header/footer links unchanged from theme ===
   (The .site-main__content a rule shouldn't reach header/footer, just being safe) */
.site-header a,
.site-footer a {
    color: inherit;
}

/* === FIX 4: Constrain WP block images on migrated pages ===
   Old Gutenberg blocks use size-full with large intrinsic sizes (1920px+).
   Cap height so images don't dominate the page. */
.wp-block-image img,
.wp-block-image.size-full img,
.wp-block-image.size-large img {
    max-height: 350px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Gallery images on product pages (CNC, etc.) */
.gallery__item img {
    max-height: 280px;
    width: 100%;
    object-fit: cover;
}

/* Two-column service sections: images should not exceed their column */
.wp-block-columns .wp-block-image img {
    max-height: 300px;
}

/* Cover block images stay full (hero-style) */
.wp-block-cover__image-background {
    max-height: none !important;
    border-radius: 0 !important;
}

/* === FIX 5: Mobile hamburger nav collapse ===
   The theme wraps all 8 nav links to a second row at 960px, doubling
   header height on phones. Below 900px we hide the nav behind a
   hamburger toggle; .nav-open on <header> reveals it as a dropdown. */

/* Mobile only */ .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary, #123d5b);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Keep logo and burger on one row */
  .site-header__inner {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 0.6rem 1rem !important;
  }
  /* Mobile only */ .nav-toggle {
    display: flex;
  }
  /* Hide nav by default on mobile */
  .site-nav {
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    gap: 0 !important;
    padding: 0.25rem 0 0.5rem !important;
    border-top: 1px solid rgba(18, 61, 91, 0.08);
    order: 3;
  }
  /* Reveal when open */
  .site-header.nav-open .site-nav {
    display: flex !important;
  }
  /* Full-width tappable rows */
  .site-nav a {
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid rgba(18, 61, 91, 0.06);
    width: 100%;
    display: block;
    font-size: 1rem;
  }
  .site-nav a:last-child {
    border-bottom: none;
  }
  .site-nav__cta {
    margin-top: 0.4rem;
    text-align: center;
    border-radius: 8px !important;
  }
}

/* === FIX 5: Ensure nav-toggle is hidden on desktop ===
   Some viewports near breakpoint may show it */
@media (min-width: 901px) {
  .nav-toggle { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
}

/* === FIX 6: Full-width cover block images ===
   WP cover blocks need to span the full viewport width */
.wp-block-cover {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
}
.wp-block-cover img.wp-block-cover__image-background {
  max-height: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Constrained content inside cover stays centered */
.wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

/* Homepage-specific: keep lang-switcher on same row as hamburger on mobile */
@media (max-width: 900px) {
  .lang-switcher {
    margin-left: 0;
    order: 2;
  }
  .nav-toggle {
    order: 1;
  }
  .site-header__brand {
    order: 0;
  }
}