/* ============================================================================
   events-chrome.css
   Standard Managed247 site header (mega-menu) + footer, packaged as a small
   self-contained stylesheet for the bespoke events landing pages.

   Why this file exists: the immersive events pages (e.g. the Grove Golf Day)
   ship their own inline design system and deliberately do NOT load the full
   site.css, because they reuse many of the same class names (.hero, .eyebrow,
   .btn-primary, section, form fields) with different styling. Loading site.css
   would collide with that hand-built layout. This file carries ONLY the nav and
   footer rules (with their own tokens), so an events page can wear the standard
   site chrome without any clash. Pair it with the standard nav + footer markup
   and load /js/site.js for the mega-menu behaviour.

   The nav and footer rules are kept in step with /css/site.css. If the sitewide
   nav or footer changes there, mirror the change here.
   ============================================================================ */

:root {
  --c-bg:         #000000;
  --c-light-teal: #4cbac8;
  --c-golden:     #f5df4e;
  --c-golden-hi:  #fbe96b;
  --c-text:       #ffffff;
  --c-text-mute:  #c2cbd1;
  --c-text-dim:   #8a96a0;
  --c-surface:    #0a0a0a;
  --c-border:     rgba(255,255,255,.10);
  --max-w:        1240px;
  --ease:         cubic-bezier(.2,.7,.2,1);
}

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -10000px; top: 12px;
  background: var(--c-golden); color: var(--c-bg);
  padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 600;
}
.skip:focus { left: 12px; }

/* --- Layout helper ------------------------------------------------------ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 18px; } }
@media (max-width: 380px) { .wrap { padding: 0 14px; } }

/* --- Top nav ----------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
/* Compact, self-sufficient header CTA (a gold pill). Fully specified so a
   page's own .btn-primary cannot bleed into it. */
.nav-links a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 9px 20px;
  background: var(--c-golden); color: var(--c-bg);
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 500; font-size: 15px; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform .15s var(--ease), background .2s var(--ease);
}
.nav-links a.btn:hover { background: var(--c-golden-hi); color: var(--c-bg); transform: translateY(-1px); }
.nav-links a:not(.btn) {
  color: var(--c-text);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 4px;
  position: relative;
}
.nav-links a:not(.btn)::after {
  content: '';
  position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px;
  background: var(--c-light-teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--c-text); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-toggle { display: none; background: none; border: 0; color: var(--c-text); padding: 10px; cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    padding: 8px 18px 18px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--c-border); }
  .nav-links a:not(.btn):last-of-type { border-bottom: 0; }
  .nav-links a.btn { margin-top: 14px; align-self: stretch; }
  .nav.is-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* --- Mega-menu --------------------------------------------------------- */
.nav-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-caret { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
.nav-mega a::after { display: none !important; }
.nav-mega-col { display: flex; flex-direction: column; }
.nav-mega-link { display: block; }
.nav-mega-link strong { display: block; color: var(--c-text); font-weight: 600; font-size: 14px; }
.nav-mega-link span { display: block; color: var(--c-text-mute); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.nav-mega-link:hover strong { color: var(--c-light-teal); }

@media (min-width: 861px) {
  .nav-item { position: static; }
  .nav-mega {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 28px 60px rgba(0, 0, 0, .55);
    padding: 26px clamp(24px, 5vw, 56px) 30px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
    z-index: 55;
  }
  .nav-item:hover > .nav-mega,
  .nav-item.is-open > .nav-mega,
  .nav-item:focus-within > .nav-mega {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav-item:hover > .nav-trigger .nav-caret,
  .nav-item.is-open > .nav-trigger .nav-caret,
  .nav-item:focus-within > .nav-trigger .nav-caret { transform: rotate(180deg); }
  .nav-mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 40px; max-width: var(--max-w); margin: 0 auto; }
  .nav-mega-head {
    display: block; color: var(--c-text); font-size: 14px; font-weight: 600;
    padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--c-border);
  }
  .nav-mega-col a:not(.nav-mega-head) {
    color: var(--c-text-mute); font-size: 13.5px; line-height: 1.3; padding: 6px 0;
  }
  .nav-mega-col a:not(.nav-mega-head):hover { color: var(--c-light-teal); }
  .nav-mega--industries .nav-mega-inner { grid-template-columns: repeat(3, 1fr); gap: 10px 40px; }
  .nav-mega--resources .nav-mega-inner { grid-template-columns: minmax(340px, 440px) minmax(200px, 280px); gap: 10px 56px; }
  .nav-mega--resources .nav-mega-col:first-child {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto;
    column-gap: 40px; align-content: start;
  }
  .nav-mega--resources .nav-mega-col:first-child > .nav-mega-head { grid-column: 1 / -1; grid-row: 1; }
  .nav-mega--resources .nav-mega-col:first-child > .nav-mega-link:nth-child(2) { grid-column: 1; grid-row: 2; }
  .nav-mega--resources .nav-mega-col:first-child > .nav-mega-link:nth-child(3) { grid-column: 1; grid-row: 3; }
  .nav-mega--resources .nav-mega-col:first-child > .nav-mega-link:nth-child(4) { grid-column: 1; grid-row: 4; }
  .nav-mega--resources .nav-mega-col:first-child > .nav-mega-link:nth-child(5) { grid-column: 2; grid-row: 2; }
  .nav-mega--resources .nav-mega-col:first-child > .nav-mega-link:nth-child(6) { grid-column: 2; grid-row: 3; }
}

@media (max-width: 860px) {
  .nav-item { display: block; }
  .nav-trigger { display: flex; justify-content: space-between; width: 100%; }
  .nav-mega { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
  .nav-item.is-expanded > .nav-mega { max-height: 1600px; }
  .nav-item.is-expanded > .nav-trigger .nav-caret { transform: rotate(180deg); }
  .nav-mega-inner { padding: 2px 0 8px 14px; }
  .nav-mega a:not(.btn) { border-bottom: 0 !important; padding: 10px 4px !important; }
  .nav-mega-head { color: var(--c-light-teal) !important; font-weight: 600; padding-top: 12px !important; }
  .nav-mega-col a:not(.nav-mega-head) { color: var(--c-text-mute) !important; font-size: 15px; }
  .nav-mega-col > a:not(.nav-mega-head):not(.nav-mega-link) { display: none; }
  .nav-mega-col.is-active > a:not(.nav-mega-head):not(.nav-mega-link) {
    display: block; color: var(--c-text) !important;
  }
}

/* --- Cloud mega: "Microsoft" third-level expander ---------------------- */
.nav-mega-group { display: block; }
.nav-mega-sub-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; margin: 0; cursor: pointer; font: inherit;
  color: var(--c-text-mute); text-align: left;
}
.nav-mega-sub-toggle:hover { color: var(--c-light-teal); }
.nav-mega-sub-toggle .nav-caret { width: 13px; height: 13px; flex: none; }
.nav-mega-sub-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-mega-sub { display: none; }
.nav-mega-sub > a { display: block; }

@media (min-width: 861px) {
  .nav-mega-sub-toggle { padding: 6px 0; font-size: 13.5px; line-height: 1.3; }
  .nav-mega-sub { padding-left: 12px; margin: 2px 0 4px; border-left: 1px solid var(--c-border); }
  .nav-mega-group:hover > .nav-mega-sub,
  .nav-mega-group:focus-within > .nav-mega-sub,
  .nav-mega-sub-toggle[aria-expanded="true"] + .nav-mega-sub { display: block; }
  .nav-mega-group:hover .nav-mega-sub-toggle .nav-caret,
  .nav-mega-group:focus-within .nav-mega-sub-toggle .nav-caret { transform: rotate(180deg); }
}

@media (max-width: 860px) {
  .nav-mega-col > .nav-mega-group { display: none; }
  .nav-mega-col.is-active > .nav-mega-group { display: block; }
  .nav-mega-sub-toggle {
    display: flex; justify-content: space-between; width: 100%;
    color: var(--c-text) !important; font-size: 15px;
    min-height: 44px; padding: 10px 4px;
  }
  .nav-mega-sub-toggle .nav-caret { width: 16px; height: 16px; }
  .nav-mega-sub { padding-left: 14px; }
  .nav-mega-sub > a { color: var(--c-text) !important; min-height: 44px; display: flex; align-items: center; }
  .nav-mega-sub-toggle[aria-expanded="true"] + .nav-mega-sub { display: block; }
}

/* --- Footer ------------------------------------------------------------ */
footer {
  border-top: 1px solid var(--c-border);
  padding: 56px 0 28px;
  background: var(--c-bg);
}
.foot-address {
  font-style: normal;
  color: var(--c-text-mute);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 12px;
}
.foot-col a[href^="tel:"],
.foot-col a[href^="mailto:"] { word-break: break-word; }
.foot-grid {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; gap: 24px; } }
.foot-col h3 {
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25;
  font-weight: 500; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--c-text);
}
.foot-col a { display: block; color: var(--c-text-mute); padding: 4px 0; }
.foot-col a:hover { color: var(--c-golden); }
.foot-brand img { height: 36px; margin-bottom: 18px; }
.foot-brand p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-mute);
  max-width: 30ch;
  margin: 0 0 14px;
}
.foot-trustpilot { padding: 0 0 22px; margin-bottom: 8px; }
.foot-bottom {
  border-top: 1px solid var(--c-border);
  padding-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px;
  text-align: center;
  font-size: 13px; color: var(--c-text-dim);
}
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.foot-legal a { color: var(--c-text-dim); }
.foot-legal a:hover { color: var(--c-golden); }
.foot-social { display: flex; gap: 16px; margin-top: 20px; }
.foot-social a { display: inline-flex; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.foot-social a:hover { transform: translateY(-2px); opacity: .85; }
.foot-social svg { width: 22px; height: 22px; }
.foot-social a[href*="linkedin"] { color: #0a66c2; }
.foot-social a[href*="x.com"] { color: #ffffff; }
.foot-social a[href*="youtube"] { color: #ff0000; }
.foot-social a[href*="instagram"] { color: #e4405f; }