/* ==========================================================================
   Regal Yachting NY  —  Header navigation balance override
   Akatsuki Solutions (client work; NOT Luxuri)
   --------------------------------------------------------------------------
   Purpose: keep the centered logo visually centered with two symmetric nav
   groups hugging it on either side.

   Final header (after WATER TOYS removed and ABOUT moved to the left menu):
       DESTINATIONS · ABOUT  |  [ centered logo ]  |  NEWS · CONTACT   [ BOOK NOW ]

   The header is a 3-column flex row (.e-con-inner):
       [ left menu col db48f9e ] [ logo col 4118d54 ] [ right menu col 792c1a7 ]
   The three columns are equal/centered, so the logo is already centered.
   The two side menus render a `ul.e-n-menu-heading` (display:flex).
   By default the LEFT ul stretches the full column with justify:space-between,
   which pins its first item to the far-left edge and leaves a large gap before
   the logo. We instead make the LEFT items hug the logo (flex-end) and the
   RIGHT items hug the logo (flex-start), with a matched gap, so both groups
   sit symmetrically beside the centered logo.

   Widget element ids (stable across all 13 pages):
       left  menu  : .elementor-element-4cfdf77
       right menu  : .elementor-element-b128ea2
   Applied to both the .mi-menu desktop pair (only pair present in this NY
   mirror) and any sticky copy that shares the same ids.
   ========================================================================== */

/* ---- desktop / tablet (header nav visible) -------------------------------- */
@media (min-width: 1025px) {

  /* LEFT menu: cluster items toward the centered logo (right edge of the column) */
  .elementor-element-4cfdf77 ul.e-n-menu-heading {
    justify-content: flex-end !important;
    gap: 34px !important;
    column-gap: 34px !important;
  }

  /* RIGHT menu: cluster items toward the centered logo (left edge of the column) */
  .elementor-element-b128ea2 ul.e-n-menu-heading {
    justify-content: flex-start !important;
    gap: 34px !important;
    column-gap: 34px !important;
  }

  /* Even out the residual edge offset so the gap logo<->left matches logo<->right.
     The right column carries a small inner padding; nudge the left menu's trailing
     edge a touch closer to the logo so both inner gaps read the same (~32px). */
  .elementor-element-4cfdf77 ul.e-n-menu-heading {
    padding-right: 6px !important;
  }

  /* Kill any stray per-item margins that would skew the even spacing. */
  .elementor-element-4cfdf77 .e-n-menu-heading > li.e-n-menu-item,
  .elementor-element-b128ea2 .e-n-menu-heading > li.e-n-menu-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   Team page (team.html)  —  crew grid balance
   --------------------------------------------------------------------------
   Two crew members (Gabypao Barrera, Jason Wessel) were removed, leaving the
   6-column Elementor loop grid (widget id 957bf6a, .elementor-grid-6) with two
   empty ghost cards -> a hole mid-row and a lone card. The empty loop-items
   were deleted from team.html, leaving 6 real members. At 6 columns those 6
   members render as one thin strip of 153px cards. We re-balance to a clean
   3x2 grid of larger portraits, which reads as intentional and gap-free.
   Scoped to the unique team-grid widget id, desktop only; mobile/tablet keep
   their native elementor-grid-mobile-2 / -tablet-2 (2-up) layout untouched.
   ========================================================================== */
@media (min-width: 1025px) {
  .elementor-element-957bf6a .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    justify-content: center !important;
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
    row-gap: 48px !important;
  }
}

/* ==========================================================================
   Mobile menu  —  close (X) button for the Elementor popup mobile menu
   --------------------------------------------------------------------------
   The hamburger opens Elementor popup 6389 as a full-screen modal
   (.elementor-popup-modal). The Pro dialog close button never wires up in this
   static mirror, so js/main.js injects a `.ny-menu-close` button. Style it as a
   quiet navy circle with a gold X, pinned top-right, above the menu content.
   ========================================================================== */
/* High-specificity + !important so Elementor's global button styles can't
   inflate the padding/width or collapse the inline SVG icon. */
button.ny-menu-close,
.elementor-popup-modal button.ny-menu-close {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(167, 122, 75, 0.6) !important;  /* muted gold hairline */
  border-radius: 50% !important;
  background: #003D60 !important;                         /* brand navy */
  background-color: #003D60 !important;
  color: #D3AB80 !important;                              /* champagne gold X */
  cursor: pointer !important;
  z-index: 2147483647 !important;                         /* above the modal */
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}
button.ny-menu-close:hover,
button.ny-menu-close:focus-visible {
  background: #D3AB80 !important;                         /* invert on hover/focus */
  background-color: #D3AB80 !important;
  color: #003D60 !important;
  outline: none !important;
  transform: scale(1.05) !important;
}
button.ny-menu-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(167, 122, 75, 0.5) !important;
}
button.ny-menu-close svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  fill: none !important;
  pointer-events: none !important;       /* so clicks always hit the button */
}
button.ny-menu-close svg path {
  stroke: currentColor !important;
  stroke-width: 2.4px !important;
}

/* ---- mobile / off-canvas: leave the hamburger + drawer untouched ---------- */
/* No overrides below 1025px: the desktop menus are hidden and the mobile
   toggle/off-canvas menu handles navigation, so we must not touch it. */

/* ==========================================================================
   Desktop mega-menu dropdown panel  (paired with js/main.js hover shim)
   --------------------------------------------------------------------------
   Elementor's nested-menu handler stopped binding after the NY menu was
   restructured, so js/main.js re-adds `.e-active` on hover. Elementor's stretch
   JS also no longer runs, so the panel defaulted to the menu widget's narrow
   width and the inner columns overlapped.

   The ORIGINAL mega-menu is `content_width: full_width` (a full-bleed bar) with
   the content row using flex `align-self: stretch`, i.e. a full-width white bar:
   a full-height image bleeding to the left edge, the heading + copy in the
   middle, and the link list on the right. We restore exactly that:
     - the active panel spans the full viewport width, pinned under the header;
     - its content is centered to a 1280px reading column (image still bleeds left);
     - the left image fills the bar height (object-fit: cover).
   `--ny-mm-top` (the header's bottom edge) is set by main.js. Desktop only; the
   mobile hamburger popup is untouched.
   ========================================================================== */
@media (min-width: 1025px) {
  .elementor-widget-n-menu .e-active.e-n-menu-content {
    position: fixed !important;
    top: var(--ny-mm-top, 96px) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    /* no box-shadow: its 60px blur spread UP into the white header and read as a
       gray band between the two whites. Keep the header + dropdown one seamless white. */
    box-shadow: none !important;
    /* Elementor adds a transparent "title-distance-from-content" padding on top of
       the panel, which pushes the white box down and shows the hero through the gap.
       Zero it so the white content is flush against the nav bar. */
    padding-top: 0 !important;
    padding-block-start: 0 !important;
    --n-menu-title-distance-from-content: 0px !important;
  }
  /* center the content row to a max reading width; vertically center it and give
     it a comfortable minimum bar height */
  .elementor-widget-n-menu .e-active.e-n-menu-content > .e-con {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 300px !important;
    align-items: center !important;
  }
  /* the left image fills the bar height (the original's align-self:stretch) */
  .elementor-widget-n-menu .e-active.e-n-menu-content .elementor-widget-image,
  .elementor-widget-n-menu .e-active.e-n-menu-content .elementor-widget-image .elementor-widget-container {
    align-self: stretch !important;
    height: 100% !important;
  }
  .elementor-widget-n-menu .e-active.e-n-menu-content .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    object-fit: cover !important;
    max-width: none !important;
  }
  /* smooth open animation (the original mega-menu faded/slid in on hover) */
  .elementor-widget-n-menu .e-active.e-n-menu-content > .e-con {
    animation: nyMegaIn 0.28s ease both !important;
  }
}
/* fade only — no translateY, which was leaving a residual -12px offset that
   pulled the white box up over the bar */
@keyframes nyMegaIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Blog post pages (blog-*.html) — single-article layout
   ========================================================================== */
.ny-blog-post-wrap { background: #fff; }
.ny-blog-post { max-width: 820px; margin: 0 auto; padding: 8px 24px 96px; box-sizing: border-box; }
.ny-post-back { display: inline-block; margin: 0 0 30px; font-family: "Whitney Medium","Montserrat",sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #003D60; text-decoration: none; }
.ny-post-back:hover { opacity: .6; }
.ny-post-cat { display: inline-block; padding: 3px 16px 4px; border: 1px solid #003D60; border-radius: 300px; font-family: "Whitney Medium","Montserrat",sans-serif; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .7px; color: #003D60; }
.ny-post-title { margin: 16px 0 26px; font-family: "Zapf Humanist 601 Regular","Cormorant Garamond",Georgia,serif; font-size: clamp(30px,4.4vw,46px); font-weight: 300; line-height: 1.12; color: #0d0d0d; }
.ny-post-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 2px; margin: 0 0 40px; display: block; }
.ny-post-body p { margin: 0 0 1.15em; font-family: "Highgate_Rg","DM Sans",sans-serif; font-size: 18px; line-height: 1.75; color: #2c2c2c; }
.ny-post-body p:first-child { font-size: 21px; line-height: 1.6; color: #171717; }
.ny-post-cta { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; }
.ny-post-cta a { display: inline-block; padding: 15px 32px; font-family: "Whitney Medium","Montserrat",sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: opacity .25s ease; }
.ny-post-cta a.primary { background: #003D60; color: #fff; }
.ny-post-cta a.secondary { border: 1px solid #003D60; color: #003D60; }
.ny-post-cta a:hover { opacity: .82; }
@media (max-width: 600px) { .ny-post-body p { font-size: 16px; } .ny-post-body p:first-child { font-size: 18px; } }

/* ==========================================================================
   News (news.html) — blog grid was wedged into the filter's flex row and shrank
   to ~414px (cramped ~100px columns). Let the row wrap and force the grid onto
   its own full-width line below the filter, so it renders as a clean 3-up grid.
   Both ids/classes are unique to news.html, so this is inert elsewhere.
   ========================================================================== */
.elementor-element-78debbe { flex-wrap: wrap !important; }
.elementor-element-78debbe > .ny-blog-grid,
.ny-blog-grid { flex: 1 0 100% !important; width: 100% !important; }
.elementor-element-78debbe > .ny-blog-grid { margin-top: 40px !important; }

/* ==========================================================================
   Day Charter (day-charter.html) — remove the top image carousel/hero slideshow
   per request. The id 3b06f21 is unique to day-charter, so this rule is inert on
   every other page. The section below (5048f3c "Exceptional yachts…") already
   carries 100px top padding, which clears the fixed header once the hero is gone.
   ========================================================================== */
.elementor-element-3b06f21 { display: none !important; }

/* ==========================================================================
   Day Charter (day-charter.html) — hero text alignment + slideshow dots
   --------------------------------------------------------------------------
   The hero intro ("Exceptional yachts, extraordinary experiences" + subtext +
   BOOK NOW) was a 2-column flex row: heading pinned left (col f19eb71) while the
   paragraph + button floated right (col 530c917) at a different x — reading as
   disconnected/floating. Collapse it to a single centered column so the
   headline, subtext and button stack and align consistently.
   These three ids are UNIQUE to day-charter.
   ========================================================================== */
.elementor-element-2ab77a7 {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 760px;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  gap: 14px;
}
.elementor-element-f19eb71,
.elementor-element-530c917 {
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  text-align: center !important;
  padding-top: 0 !important;
}
.elementor-element-ec47963,
.elementor-element-ec47963 .elementor-widget-container,
.elementor-element-ec47963 h2,
.elementor-element-033d1f7,
.elementor-element-033d1f7 .elementor-widget-container,
.elementor-element-033d1f7 p {
  text-align: center !important;
  width: 100% !important;
}
/* center the BOOK NOW button block */
.elementor-element-530c917 .elementor-element-d7d08d0,
.elementor-element-d7d08d0 {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- NY hero slideshow dots: defeat Elementor's global button rules ------- */
.ny-hero-slideshow .ny-hero-dots button.ny-hero-dot,
button.ny-hero-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 0 !important;
  cursor: pointer !important;
}
.ny-hero-slideshow .ny-hero-dots button.ny-hero-dot.ny-hero-dot--active,
button.ny-hero-dot.ny-hero-dot--active {
  background: #D3AB80 !important;
  background-color: #D3AB80 !important;
  border-color: #D3AB80 !important;
  transform: scale(1.15) !important;
}
.ny-hero-slideshow .ny-hero-dots button.ny-hero-dot:hover {
  border-color: #D3AB80 !important;
}

/* ==========================================================================
   Destinations landing (destinations-landing.html) — "Chart your own course"
   --------------------------------------------------------------------------
   The intro was a 2-col row (image col c76b9ac | text col 27ad420). The image
   column has been removed from the markup; collapse the row to a single
   centered column and center the eyebrow / heading / paragraph / button so the
   text reads as one balanced centered block (no leftover gap).
   These ids are UNIQUE to destinations-landing.
   ========================================================================== */
.elementor-element-8c9c3c9 {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.elementor-element-27ad420 {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  align-items: center !important;
  text-align: center !important;
}
.elementor-element-27ad420 .elementor-widget,
.elementor-element-27ad420 .elementor-widget-container,
.elementor-element-27ad420 .elementor-heading-title,
.elementor-element-27ad420 .elementor-widget-text-editor,
.elementor-element-27ad420 p {
  text-align: center !important;
}
/* center the BOOK YOUR CHARTER button within the now-centered column */
.elementor-element-27ad420 .elementor-button-wrapper,
.elementor-element-27ad420 .elementor-widget-button {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   Contact (contact.html) — Press & Media image / footer breathing room
   --------------------------------------------------------------------------
   The Press & Media water/wake image (container b15f68b, unique to contact.html)
   butted directly against the dark navy footer with no gap. Add bottom spacing so
   the image is not flush against the footer; matches the site's section rhythm.
   ========================================================================== */
.elementor-element-b15f68b {
  padding-bottom: 90px !important;
}
@media (max-width: 767px) {
  .elementor-element-b15f68b {
    padding-bottom: 48px !important;
  }
}

/* clickable featured-card image -> detail page */
.ny-card-imglink{display:block;line-height:0;cursor:pointer;}
.ny-card-imglink img{display:block;width:100%;}

/* remove non-functional WooCommerce login / favourite icons (static site has no accounts) */
a.elementor-icon[href*="eyJpZCI6IjU0OTAi"]{display:none!important;}
.elementor-widget-icon:has(> .elementor-widget-container a[href*="eyJpZCI6IjU0OTAi"]){display:none!important;}

/* ==========================================================================
   Homepage (index.html): "5-STAR RATING" badge + tagline breathing room
   --------------------------------------------------------------------------
   The gold Google 5-star badge (widget e7afde4) and its tagline (widget
   33c3223) live inside the light review section 822164c, which sat cramped
   directly against the dark navy footer. Give that section generous vertical
   padding: air above the badge, and a deep gap between the last content and
   the footer. Keyed to 822164c so it only affects the homepage section.
   ========================================================================== */
.elementor-element-822164c {
  padding-top: 48px !important;
  padding-bottom: 112px !important;
}
/* extra air directly above the gold badge image */
.elementor-element-e7afde4 {
  margin-top: 40px !important;
}
@media (max-width: 767px) {
  .elementor-element-822164c {
    padding-top: 32px !important;
    padding-bottom: 72px !important;
  }
  .elementor-element-e7afde4 {
    margin-top: 28px !important;
  }
}


/* homepage "Turn your back on ordinary" card badge: match the canonical
   FEATURED badge styling (black text) used on the other yacht card */
.elementor-element-704d9a2 .elementor-heading-title { color: #000 !important; }