/* AGM global mobile optimization — additive overrides only */

:root {
  --agm-safe-top: env(safe-area-inset-top, 0px);
  --agm-safe-right: env(safe-area-inset-right, 0px);
  --agm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --agm-safe-left: env(safe-area-inset-left, 0px);
  --agm-vh: 100vh;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  padding-left: var(--agm-safe-left);
  padding-right: var(--agm-safe-right);
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

video {
  object-fit: cover;
}

a,
button,
[role="button"],
.menu-label,
.menu a {
  -webkit-tap-highlight-color: transparent;
}

/* Appbar / navigation */
@media (max-width: 1024px) {
  #activeAppbar,
  .activeAppbar,
  .topbar,
  header[class*="appbar"] {
    padding-left: max(16px, var(--agm-safe-left)) !important;
    padding-right: max(16px, var(--agm-safe-right)) !important;
  }

  #activeAppbar img[src*="p61.svg"],
  .activeAppbar img[src*="p61.svg"],
  .topbar img[src*="p61.svg"] {
    max-height: 34px !important;
    width: auto !important;
  }

  .menu,
  .menu-label,
  nav a {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #activeAppbar .brand-text,
  .activeAppbar .brand-text {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    max-width: 52vw;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .menu a,
  .menu-label,
  .topbar .menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Island sections (services, fleet, about strip) */
@media (max-width: 900px) {
  #seaLiving,
  #range,
  #below,
  [data-hs-island] {
    max-width: 100vw;
    overflow-x: clip;
  }

  #seaLiving ._title_ty1x2_107,
  #range ._title_ty1x2_107,
  #below h2,
  #below h3 {
    font-size: clamp(22px, 6vw, 40px) !important;
    line-height: 1.15 !important;
  }

  #seaLiving p,
  #range p,
  #below p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.55 !important;
  }
}

/* Custom AGM content pages */
@media (max-width: 768px) {
  .page {
    padding: 36px 0 !important;
    max-width: 100% !important;
  }

  .body-wrapper.page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
  }

  .page h3 {
    font-size: 20px !important;
    margin-top: 28px !important;
  }

  .page p,
  .subtitle {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .values,
  .story-grid,
  .card {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .hero {
    min-height: 42vh !important;
    padding: 56px 18px 28px !important;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .footer {
    padding: 28px 16px calc(20px + var(--agm-safe-bottom)) !important;
    font-size: 12px !important;
  }

  .back a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* Prevent 100vw horizontal scroll on fixed HubSpot chrome */
.appbar-wrapper,
.appbar,
.overlay,
.brand-menu,
.models-menu,
.mobile-menu {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  .appbar > div {
    margin-left: max(16px, var(--agm-safe-left)) !important;
    margin-right: max(16px, var(--agm-safe-right)) !important;
  }

  .appbar img[alt="Logo"],
  .appbar img[src*="logo"] {
    max-height: 32px !important;
    width: auto !important;
  }

  #burger {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  .brand-menu,
  .models-menu {
    padding-left: max(20px, var(--agm-safe-left)) !important;
    padding-right: max(20px, var(--agm-safe-right)) !important;
    height: auto !important;
    max-height: min(100vh, 100dvh) !important;
    padding-top: calc(64px + var(--agm-safe-top)) !important;
  }

  .brand-menu-content,
  .models-menu-content {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .brand-menu .brand-imgWrapper,
  .models-imgWrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  body:has(.appbar-wrapper) > div:first-child {
    padding-top: calc(var(--agm-appbar-h, 60px) + var(--agm-safe-top));
  }
}

/* HubSpot page modules */
@media (max-width: 768px) {
  .hs_cos_wrapper,
  .row-fluid,
  .dnd-section,
  .widget-type-cell {
    max-width: 100% !important;
    overflow-x: clip;
  }

  .hs-featured-image {
    float: none !important;
    margin: 0 0 20px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Custom AGM cards */
@media (max-width: 768px) {
  .value-card,
  .service-card,
  .contact-card {
    padding: 24px 20px !important;
  }

  .contact-card strong {
    display: block !important;
    width: auto !important;
    margin-bottom: 4px;
  }

  .contact-card p {
    margin-bottom: 14px !important;
    line-height: 1.6 !important;
    word-break: break-word;
  }

  .service-card h3 {
    font-size: 20px !important;
  }

  .page ul {
    margin-left: 16px !important;
    padding-right: 4px;
  }
}

/* Embedded media */
.embed-responsive,
.video-wrapper,
.hs-video-widget {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.embed-responsive iframe,
.video-wrapper iframe,
.hs-video-widget iframe {
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 180px;
}

/* ── Mobile top appbar: logo + brand, then nav row ── */
@media (max-width: 1200px) {
  .appbar-wrapper {
    height: auto !important;
    min-height: 60px;
  }

  #appbar.appbar {
    height: auto !important;
    min-height: 60px;
    align-items: stretch !important;
  }

  #appbar > div {
    margin: 0 !important;
    padding: max(8px, var(--agm-safe-top)) max(12px, var(--agm-safe-right)) 8px
      max(12px, var(--agm-safe-left)) !important;
    gap: 0 !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #appbar .section:nth-child(2) {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: clamp(14px, 4vw, 24px) !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 0;
    font-size: inherit !important;
  }

  #appbar .section:nth-child(2) .a {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    cursor: pointer;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  #appbar .section:nth-child(3) {
    display: none !important;
  }

  #appbar .section:nth-child(4) {
    display: none !important;
  }

  #appbar .section:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    min-width: 0;
  }
}

/* ── Mobile appbar brand row ── */
@media (max-width: 768px) {
  #appbar .section:first-child a {
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    flex-shrink: 0;
  }

  #appbar .section:first-child a img {
    height: 32px !important;
    width: auto !important;
    max-width: 40px !important;
    flex-shrink: 0;
  }

  #appbar .section:first-child a span {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.15 !important;
    max-width: none !important;
    white-space: nowrap !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}