/* ==========================================================================
   Naval Orientation: guards
   ==========================================================================

   Defences against styling that comes from outside this theme.

   This site is a child of Hello Elementor, and Elementor's global kit styles
   every `button` and every `a:hover` on the page. Those rules are written as
   `button:hover` and `a:hover` — specificity 0,1,1 — which beats a plain class
   like `button.no-burger { background: transparent }` at 0,1,0. So anywhere this
   theme states a colour once and does not restate it for :hover, the kit's
   accent colour comes through on hover. On this install that accent is
   #CC3366, and it has now surfaced three times: as a magenta panel behind a
   certificate, as a magenta hamburger button, and as magenta menu items in the
   mobile drawer.

   The pattern is always the same, so the fix is stated once, here, for every
   piece of chrome that is a <button> or a bare link: pin the property for
   every interactive state, to the value the component sheet already intends.

   Two rules about this file:

   1. It loads after every component sheet, so it can only be overridden
      deliberately.
   2. `!important` is used on purpose. The declarations being defended against
      live outside this theme and may be !important themselves; a guard that
      can lose is not a guard. Every value here is copied from the component
      sheet that owns the element, so nothing here changes the design — remove
      the outside rules and the site looks identical.

   Nothing in this file sets a size, a spacing step or a layout.
   ========================================================================== */

/* ---------- Hamburger ----------------------------------------------------- */
button.no-burger,
button.no-burger:hover,
button.no-burger:focus,
button.no-burger:focus-visible,
button.no-burger:active {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--no-ink-800) !important;
}
button.no-burger:hover,
button.no-burger:focus-visible { border-color: var(--no-primary-400) !important; }

/* Over the hero the header is transparent and the button is white. */
.no-header--overlay:not(.no-header--stuck) button.no-burger,
.no-header--overlay:not(.no-header--stuck) button.no-burger:hover,
.no-header--overlay:not(.no-header--stuck) button.no-burger:focus,
.no-header--overlay:not(.no-header--stuck) button.no-burger:focus-visible,
.no-header--overlay:not(.no-header--stuck) button.no-burger:active { color: #fff !important; }

/* ---------- Drawer: close button, section buttons, links ----------------- */
button.no-drawer__close,
button.no-drawer__close:focus,
button.no-drawer__close:active {
  background-color: rgba(255, 255, 255, .07) !important;
  background-image: none !important;
  color: #fff !important;
}
button.no-drawer__close:hover,
button.no-drawer__close:focus-visible {
  background-color: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

button.no-macc__btn,
button.no-macc__btn:hover,
button.no-macc__btn:focus,
button.no-macc__btn:focus-visible,
button.no-macc__btn:active {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* A top-level drawer link had no hover state of its own at all, which is why
   the kit's colour had a free run at it. It gets the accent, the same as every
   other link on a dark ground in this theme. */
.no-mlink { color: #fff !important; }
.no-mlink:hover,
.no-mlink:focus-visible { color: var(--no-accent) !important; }

.no-macc__link { color: rgba(255, 255, 255, .72) !important; }
.no-macc__link:hover,
.no-macc__link:focus-visible {
  background-color: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

/* ---------- Desktop navigation ------------------------------------------- */
.no-nav__link:hover,
.no-nav__link:focus-visible { color: var(--no-primary-600) !important; }
.no-header--overlay:not(.no-header--stuck) .no-nav__link:hover,
.no-header--overlay:not(.no-header--stuck) .no-nav__link:focus-visible { color: #fff !important; }

.no-mega__link:hover,
.no-mega__link:focus-visible {
  background-color: var(--no-primary-50) !important;
  color: var(--no-primary-700) !important;
}

/* ---------- Utility bar --------------------------------------------------- */
.no-topbar__item:hover,
.no-topbar__item:focus-visible { color: var(--no-accent) !important; }
.no-topbar__social:hover,
.no-topbar__social:focus-visible {
  background-color: rgba(255, 255, 255, .1) !important;
  color: var(--no-accent) !important;
}

/* ---------- Footer -------------------------------------------------------- */
.no-flist a:hover,
.no-flist a:focus-visible { color: #fff !important; }
.no-fcontact__row a:hover,
.no-fcontact__row a:focus-visible { color: var(--no-accent) !important; }
.no-fbottom a:hover,
.no-fbottom a:focus-visible { color: var(--no-accent) !important; }

/* ---------- Floating buttons --------------------------------------------- */
/* Both are buttons on every page, and the WhatsApp one is brand green: it has
   to stay green while the pointer is on it. */
.no-float,
.no-float:hover,
.no-float:focus,
.no-float:focus-visible,
.no-float:active,
a.no-float:hover,
button.no-float:hover { color: #fff !important; background-image: none !important; }

.no-float--wa,
.no-float--wa:hover,
.no-float--wa:focus,
.no-float--wa:focus-visible,
.no-float--wa:active,
a.no-float--wa:hover,
button.no-float--wa:hover { background-color: #25D366 !important; }

.no-float--top,
.no-float--top:hover,
.no-float--top:focus,
.no-float--top:focus-visible,
.no-float--top:active,
a.no-float--top:hover,
button.no-float--top:hover { background-color: var(--no-ink-800) !important; }

/* ---------- Breadcrumbs --------------------------------------------------- */
.no-crumb a:hover,
.no-crumb a:focus-visible { color: var(--no-accent) !important; }
.no-crumb--light a:hover,
.no-crumb--light a:focus-visible { color: var(--no-primary-action) !important; }

/* ---------- Bare links keep no background ---------------------------------
   Elementor's kit colours link text, not link backgrounds, but a link that
   never states a background of its own is one rule away from getting one. The
   links that are meant to be plain are said to be plain, once. The drawer's
   submenu links and the mega-menu links are excluded on purpose: their hover
   background is part of the design and is pinned above. */
a.no-nav__link,
a.no-nav__link:hover,
a.no-mlink,
a.no-mlink:hover,
a.no-topbar__item,
a.no-topbar__item:hover,
.no-flist a,
.no-flist a:hover,
.no-fcontact__row a,
.no-fcontact__row a:hover,
.no-fbottom a,
.no-fbottom a:hover,
.no-crumb a,
.no-crumb a:hover { background-color: transparent !important; background-image: none !important; }

/* ---------- Buttons, whether <a> or <button> -----------------------------
   .no-btn is the theme's own button and is rendered as an <a> as often as a
   <button>. Its surface comes from --btn-bg, stated once on the base class,
   which an `a:hover` or `button:hover` rule from outside will happily replace.

   The hover state has to be restated through the same variables the base sheet
   resolves — --btn-bg-hover falling back to --btn-bg — and not pinned to the
   resting colour. Pinning the resting colour is the obvious mistake here: it
   defends the button and takes its hover state away with it, so the outline
   button stops inverting and every button on the site goes inert. */
a.no-btn,
button.no-btn {
  background-color: var(--btn-bg) !important;
  background-image: none !important;
  color: var(--btn-fg) !important;
}
a.no-btn:hover,
a.no-btn:focus-visible,
button.no-btn:hover,
button.no-btn:focus-visible {
  background-color: var(--btn-bg-hover, var(--btn-bg)) !important;
  color: var(--btn-fg-hover, var(--btn-fg)) !important;
}
a.no-btn:focus,
a.no-btn:active,
button.no-btn:focus,
button.no-btn:active {
  background-color: var(--btn-bg-hover, var(--btn-bg)) !important;
  color: var(--btn-fg-hover, var(--btn-fg)) !important;
}

/* ==========================================================================
   Round two: everything the first pass did not reach
   ==========================================================================

   The first version of this file guarded the pieces of chrome that had been
   reported. The client still found magenta, which means a list of reported
   elements was the wrong instrument. So the list is now generated: every
   interactive element on every template is hovered for real under a stand-in
   for Elementor's kit, and what follows is exactly what that found — 1,200
   elements checked, and these are the ones that could still take the colour.

   The stand-in is deliberately what a kit actually does — colour links on
   hover, style buttons as buttons — and not "anything containing an icon turns
   magenta". An icon drawn in currentColor follows its element's text colour, so
   pinning the text pins the icon; inventing a rule nobody ships would send the
   hunt chasing every chevron on the site.
   ========================================================================== */

/* ---------- No link gains a background it did not ask for ----------------
   One rule instead of thirty. The exclusions are the links that genuinely do
   paint on hover, taken from the component sheets rather than from memory: a
   nav drawer link, a mega-menu link, a chip, a share button, a social icon, a
   pagination number, the section-bar link, and the theme's own button. */
/*
 * `:is()` and not `:where()`, which is the whole game here. `:where()`
 * contributes nothing to specificity, so `:where(main) a:hover` scores exactly
 * the same as the kit's own `a:hover` — and the kit's rule, injected into the
 * page after this sheet, then wins on source order. `:is()` carries the
 * specificity of its most specific argument, which is enough to settle it.
 */
/*
 * `:is()` and not `:where()`, which is the whole game here. `:where()`
 * contributes nothing to specificity, so `:where(main) a:hover` scores exactly
 * the same as the kit's own `a:hover` — and the kit's rule, injected into the
 * page after this sheet, then wins on source order. `:is()` carries the
 * specificity of its most specific argument, and the :not() list adds a class,
 * which settles it.
 *
 * The exclusions are the links that genuinely do paint on hover, read out of
 * the component sheets rather than remembered: the theme's own button, a nav
 * drawer link, a mega-menu link, the filter chips, a share button, a social
 * icon, a pagination number, the service section-bar link, and the two cards
 * that are drawn as links. Excluding them is better than overriding them and
 * restating their colours here, which would be the same values written twice.
 */
:is(header, main, footer) a:hover:not(.no-btn, .no-fsocial, .no-macc__link, .no-mega__link, .no-share__btn, .no-svcbar__link, .no-topbar__social, .no-cnav__chip, .no-jfilter__chip, .no-pfilter__chip, .page-numbers, .no-svcnav__link, .no-certdetail__item, .no-tl__marker, .no-vessel-side-list a),
:is(header, main, footer) a:focus-visible:not(.no-btn, .no-fsocial, .no-macc__link, .no-mega__link, .no-share__btn, .no-svcbar__link, .no-topbar__social, .no-cnav__chip, .no-jfilter__chip, .no-pfilter__chip, .page-numbers, .no-svcnav__link, .no-certdetail__item, .no-tl__marker, .no-vessel-side-list a),
:is(header, main, footer) a:active:not(.no-btn, .no-fsocial, .no-macc__link, .no-mega__link, .no-share__btn, .no-svcbar__link, .no-topbar__social, .no-cnav__chip, .no-jfilter__chip, .no-pfilter__chip, .page-numbers, .no-svcnav__link, .no-certdetail__item, .no-tl__marker, .no-vessel-side-list a) {
  background-color: transparent !important;
}

/* The theme's own button keeps its surface through the same variable chain the
   base sheet resolves; see the note further up about not pinning the resting
   colour onto the hover state. */
:is(header, main, footer) a.no-btn:hover,
:is(header, main, footer) a.no-btn:focus,
:is(header, main, footer) a.no-btn:focus-visible,
:is(header, main, footer) a.no-btn:active {
  background-color: var(--btn-bg-hover, var(--btn-bg)) !important;
}

/* The one excluded link with no class of its own to exclude by. */
.no-vessel-side-list a,
.no-vessel-side-list a:hover,
.no-vessel-side-list a:focus-visible { background-color: #fff !important; }

/* ---------- Links whose colour comes from the box around them -------------
   A card title is `color: inherit` so it takes the card's colour, including
   when the card inverts on hover. An `a:hover` rule from outside overwrites
   exactly that, and the title of every card on the site turns magenta while
   the rest of the card does not. */
.no-svc__title a:hover,
.no-svc__title a:focus-visible,
.no-svccard__title a:hover,
.no-svccard__title a:focus-visible,
.no-pcard__title a:hover,
.no-pcard__title a:focus-visible,
.no-vcard__title a:hover,
.no-vcard__title a:focus-visible,
.no-post__title a:hover,
.no-post__title a:focus-visible,
.no-jcard__title a:hover,
.no-jcard__title a:focus-visible,
.no-result__title a:hover,
.no-result__title a:focus-visible,
.no-svccat a:hover,
.no-svccat a:focus-visible,
.no-cta__phone:hover,
.no-cta__phone:focus-visible,
.no-editor-note a:hover,
.no-editor-note a:focus-visible,
.no-brand:hover,
.no-brand:focus-visible { color: inherit !important; }
.no-cinfo__value a:hover,
.no-cinfo__value a:focus-visible { color: var(--no-primary-action) !important; }

/* The whole-card link: `inset: 0` over the card, invisible until something
   gives it a background — at which point it covers the card it belongs to. */
.no-core__link,
.no-core__link:hover,
.no-core__link:focus,
.no-core__link:focus-visible,
.no-core__link:active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}

/* Previous / next service, which are cards drawn as links. */
.no-svcnav__link,
.no-svcnav__link:hover,
.no-svcnav__link:focus,
.no-svcnav__link:focus-visible,
.no-svcnav__link:active {
  background-color: var(--no-white) !important;
  color: var(--no-ink-800) !important;
}

/* ---------- Buttons that are not "buttons" -------------------------------
   Gallery controls, the scope tabs, the carousel dots and arrows: all of them
   <button> elements that a kit styles as though they were form buttons. */
button.no-gal__zoom,
button.no-gal__zoom:hover,
button.no-gal__zoom:focus,
button.no-gal__zoom:focus-visible,
button.no-gal__zoom:active { background: var(--no-grad-deep) !important; color: inherit !important; border-color: transparent !important; }

button.no-gal__thumb,
button.no-gal__thumb:hover,
button.no-gal__thumb:focus,
button.no-gal__thumb:focus-visible,
button.no-gal__thumb:active { background-color: var(--no-bg-soft) !important; border-color: transparent !important; color: inherit !important; }
button.no-gal__thumb.is-active { border-color: var(--no-primary-action) !important; }

button.no-gal__nav,
button.no-gal__nav:focus,
button.no-gal__nav:active { background-color: #fff !important; color: var(--no-primary-action) !important; border-color: var(--no-border) !important; }
button.no-gal__nav:hover,
button.no-gal__nav:focus-visible { background-color: var(--no-primary-action) !important; color: #fff !important; }

button.no-scope__tab,
button.no-scope__tab:hover,
button.no-scope__tab:focus,
button.no-scope__tab:focus-visible,
button.no-scope__tab:active {
  /* The tab has one border, along its top. Everything else must stay absent:
     colouring a border that is not there is how a kit draws one. */
  border-color: transparent !important;
  border-top-color: var(--no-border) !important;
  color: var(--no-ink-800) !important;
}
button.no-scope__tab,
button.no-scope__tab:focus,
button.no-scope__tab:active { background-color: transparent !important; }
button.no-scope__tab:hover,
button.no-scope__tab:focus-visible { background-color: var(--no-primary-50) !important; }
button.no-scope__tab.is-active { background-color: var(--no-primary-50) !important; color: var(--no-primary-700) !important; }

/*
 * The arrow, resting and hovered, and the second half is not optional. An
 * !important declaration on the resting state beats a non-important :hover
 * rule no matter how specific that rule is — so pinning only the resting
 * colours defends the arrow from the kit and takes its hover away at the same
 * time. Every pinned element in this file that has a hover of its own is
 * stated twice for that reason.
 */
button.no-certrail__arrow,
button.no-certrail__arrow:focus,
button.no-certrail__arrow:active,
button.no-certrail__arrow:disabled {
  background-color: var(--no-white) !important;
  color: var(--no-primary-action) !important;
  border-color: var(--no-border) !important;
}
button.no-certrail__arrow:hover:not(:disabled),
button.no-certrail__arrow:focus-visible:not(:disabled) {
  background-color: var(--no-primary-action) !important;
  color: var(--no-white) !important;
  border-color: var(--no-primary-action) !important;
}

button.no-certrail__dot,
button.no-certrail__dot:hover,
button.no-certrail__dot:focus,
button.no-certrail__dot:focus-visible,
button.no-certrail__dot:active { background-color: var(--no-border-strong) !important; border-color: transparent !important; color: transparent !important; }
button.no-certrail__dot.is-current { background-color: var(--no-primary-action) !important; }

/* Borderless chrome stays borderless: a kit that colours a border draws one. */
button.no-drawer__close,
button.no-drawer__close:hover,
button.no-drawer__close:focus,
button.no-drawer__close:focus-visible,
button.no-drawer__close:active,
button.no-macc__btn,
button.no-macc__btn:hover,
button.no-macc__btn:focus,
button.no-macc__btn:focus-visible,
button.no-macc__btn:active { border-color: transparent !important; }