/* MCM shared overrides: fonts + accents. Loads AFTER page CSS. */

/* Fonts: Industry headings, Schibsted Grotesk body */
body{font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif !important}
h1,h2,h3,.eyebrow,.btn,.num,.wordmark,.nav-links,.stat .n,.stat .l,.chip,.spec,.badge{
  font-family:'industry','Archivo',sans-serif !important;font-stretch:normal}
h1,h2{font-weight:800 !important}
.btn,.eyebrow,.nav-links,.chip,.badge{font-weight:700 !important}

/* Cyan selection */
::selection{background:rgba(34,195,230,.35);color:#F2F5F7}

/* Visible keyboard focus on every interactive element (WCAG 2.4.7).
   :focus-visible only, so mouse clicks stay clean. */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #22C3E6;outline-offset:3px;border-radius:4px}

/* Film grain, 2% */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.02;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Mouse halo, desktop only, whisper level */
#mcm-halo{position:fixed;left:0;top:0;width:700px;height:700px;margin:-350px 0 0 -350px;
pointer-events:none;z-index:1;border-radius:50%;
background:radial-gradient(circle,rgba(34,195,230,.05),transparent 60%);
opacity:0;transition:opacity .5s}
body:hover #mcm-halo{opacity:1}
@media (max-width:1000px),(prefers-reduced-motion:reduce){#mcm-halo{display:none}}

/* Lit hairlines on cards */
.card,.prod,.pac-card{position:relative}
.card::before,.prod::before,.pac-card::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
background:linear-gradient(90deg,transparent,rgba(242,245,247,.16),transparent);z-index:2;pointer-events:none}

/* Micro parallax target hygiene */
.hero-bg{will-change:transform}
@media (prefers-reduced-motion:reduce){.hero-bg{transform:none !important}}

/* Shared mobile menu, injected by mcm-accents.js on pages lacking their own */
#mcm-burger{display:none;background:none;border:1px solid #2C3742;border-radius:4px;width:44px !important;height:44px !important;min-width:44px;min-height:44px;box-sizing:border-box;cursor:pointer;padding:0;align-items:center;justify-content:center}
#mcm-burger span{display:block;width:20px;height:2px;background:#F2F5F7;position:relative;transition:background .2s}
#mcm-burger span::before,#mcm-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#F2F5F7;transition:transform .25s}
#mcm-burger span::before{top:-6px}#mcm-burger span::after{top:6px}
#mcm-burger[aria-expanded="true"] span{background:transparent}
#mcm-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
#mcm-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
#mcm-mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(11,14,17,.98);backdrop-filter:blur(12px);border-bottom:1px solid #2C3742;z-index:49;padding:16px 24px 24px}
#mcm-mobile-menu a{display:block;padding:14px 8px;min-height:44px;font-family:'industry','Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#F2F5F7;border-bottom:1px solid #2C3742;text-decoration:none}
#mcm-mobile-menu a:last-child{border-bottom:none}
#mcm-mobile-menu.open{display:block}
@media (max-width:1000px){#mcm-burger{display:flex}}

/* shared mobile menu panel (slides down under the nav) - used on every page */
#mcm-mmenu{position:fixed;left:0;right:0;top:72px;z-index:70;background:rgba(11,14,17,.98);
  border-top:1px solid #2C3742;border-bottom:1px solid #2C3742;
  display:flex;flex-direction:column;padding:14px 20px 22px;gap:2px;
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s}
#mcm-mmenu.open{transform:none;opacity:1;pointer-events:auto}
#mcm-mmenu a{font-family:'Archivo',sans-serif;font-stretch:85%;font-weight:600;font-size:15px;
  letter-spacing:.06em;color:#C9D1D8;padding:14px 4px;border-bottom:1px solid rgba(44,55,66,.6);text-decoration:none}
#mcm-mmenu a:last-child{border-bottom:0}
#mcm-mmenu a.mm-shop{color:#22C3E6}
#mcm-mmenu a.mm-book{margin-top:12px;background:#22C3E6;color:#04222B;text-align:center;border-radius:4px;
  border-bottom:0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;padding:14px}
#mcm-mmenu a.mm-phone{color:#F2F5F7;font-weight:700}
body.mcm-menu-open{overflow:hidden}
@media (min-width:1001px){#mcm-mmenu{display:none !important}}

/* desktop Shop nav link (replaces the shop bag icon) */
.nav-links a.nav-shop-link{color:var(--body,#C9D1D8)}
.nav-links a.nav-shop-link:hover{color:var(--cyan,#22C3E6)}

/* nav phone number, consistent on every page so the header CTA never shifts position */
.nav-phone{font-family:'Archivo',sans-serif;font-stretch:85%;font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--offwhite);transition:color .2s;margin-right:4px;text-decoration:none}
.nav-phone:hover{color:var(--cyan)}
@media(max-width:1000px){.nav-phone{display:none}}

/* Logo / home-link hover micro-interaction (council consensus).
   Brightness + faint cyan backlight on the link (filter never fights the JS morph transform).
   1px lift applied to the inner <img> so it does not conflict with the parent morph transform.
   Fast precision ease-in, softer ease-out. Reduced-motion keeps the light, drops the lift. */
.nav-logo,.hero-logo{cursor:pointer}
.nav-logo img,.hero-logo img{
  transition:filter .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1);
  transform-origin:left center;
  will-change:filter,transform}
.nav-logo:hover img,.hero-logo:hover img{
  transition-duration:.18s;
  filter:brightness(1.25) drop-shadow(0 0 6px rgba(34,195,230,.95)) drop-shadow(0 0 16px rgba(34,195,230,.7)) drop-shadow(0 0 30px rgba(34,195,230,.4));
  transform:scale(1.06) translateY(-1px)}
/* homepage hero img carries an inline drop-shadow (inline beats stylesheet),
   so restate its hover with the shadow preserved + strong brand glow, high specificity */
a.hero-logo:hover img[style]{
  filter:brightness(1.25) drop-shadow(0 10px 30px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(34,195,230,.95)) drop-shadow(0 0 16px rgba(34,195,230,.7)) drop-shadow(0 0 30px rgba(34,195,230,.4)) !important;
  transform:scale(1.05) translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .nav-logo:hover img,.hero-logo:hover img,a.hero-logo:hover img[style]{transform:none}}

/* Mobile: hero CTA buttons sit centred on the screen */
@media(max-width:640px){
  .hero-cta{justify-content:center}
}

/* ---- nav shop icon ---- */
.nav-shop{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:1px solid var(--hairline,#2C3742);border-radius:3px;color:var(--offwhite,#F2F5F7);transition:color .2s,border-color .2s,transform .25s}
.nav-shop:hover{color:var(--cyan,#22C3E6);border-color:var(--cyan,#22C3E6);transform:translateY(-2px)}
.nav-shop svg{display:block}
@media(max-width:640px){.nav-shop{width:34px;height:34px}}

/* ---- header logo: show the FULL logo, no wordmark fade, every header matches ---- */
nav .nav-in img[src*="mcm-horiz"]{-webkit-mask-image:none;mask-image:none}
#heroLogo img{-webkit-mask-image:none;mask-image:none}

/* homepage hero logo morphs into the SHORT mark as it docks - MOBILE ONLY.
   Desktop keeps the full Marsden Cove Marine lockup all the way into the header.
   fill-mode backwards so the intro animation's final opacity does not pin the fade. */
#heroLogo{position:relative}
#heroLogo img.lg-full{animation-fill-mode:backwards}
#heroLogo img.lg-short{animation:none;position:absolute;top:0;left:0;opacity:0}
@media(max-width:640px){
  #heroLogo img.lg-full{opacity:calc(1 - var(--mf,0))}
  #heroLogo img.lg-short{opacity:var(--mf,0)}
}

/* mobile headers on inner pages use the short logo (no long wordmark) */
@media(max-width:640px){
  nav .nav-in img[src*="mcm-horiz"]{content:url("/assets/logo/mcm-horiz-mobile.svg")}
}
@media(max-width:640px){
  /* mobile: show the WHOLE logo, just smaller, so it sits beside the burger.
     no width clip, no wordmark fade — the full mark stays visible. */
  nav .nav-in>a:first-child,nav .nav-in>span.nav-logo{width:auto !important;max-width:none !important;overflow:visible;flex:0 1 auto;min-width:0}
  nav .nav-in img[src*="mcm-horiz"],#heroLogo img{-webkit-mask-image:none !important;mask-image:none !important;height:24px !important;width:auto !important}
}
@media(max-width:400px){
  nav .nav-in img[src*="mcm-horiz"],#heroLogo img{height:21px !important}
}