@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Fremtiden Pumps MobileMenu v1.0
   Dark Green #1a5236 | Accent #28a745 | Light #eaf2ea
   ============================================================ */

:root {
  --fpmm-dark:    #1a5236;
  --fpmm-dark2:   #2a6b47;
  --fpmm-green:   #28a745;
  --fpmm-green-lt:#34c05a;
  --fpmm-light:   #eaf2ea;
  --fpmm-white:   #ffffff;
  --fpmm-text:    #1a3328;
  --fpmm-muted:   #5a7a6a;
  --fpmm-border:  #c5dbc5;
  --fpmm-ease:    cubic-bezier(.22,1,.36,1);
  --font-main:    'Inter', system-ui, sans-serif;
}

/* ── Trigger / Burger ── */
.fpmm-trigger {
  display:-webkit-inline-flex; display:inline-flex;
  align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  padding:8px; color:inherit;
  -webkit-tap-highlight-color:transparent; outline:none;
}
.fpmm-burger  { display:flex; flex-direction:column; gap:6px; width:28px; }
.fpmm-burger span {
  display:block; height:2.5px; background:currentColor;
  border-radius:2px; transform-origin:left center;
  transition:transform .38s var(--fpmm-ease), opacity .25s, width .38s var(--fpmm-ease);
}
.fpmm-burger span:nth-child(2){ width:68%; }
.fpmm-burger span:nth-child(3){ width:84%; }

.fpmm-overlay[data-open] ~ * .fpmm-burger span:nth-child(1),
.fpmm-overlay[data-open] + .fpmm-backdrop ~ * .fpmm-burger span:nth-child(1)
  { transform:rotate(45deg) translateY(1px); width:100%; }
.fpmm-overlay[data-open] ~ * .fpmm-burger span:nth-child(2),
.fpmm-overlay[data-open] + .fpmm-backdrop ~ * .fpmm-burger span:nth-child(2)
  { opacity:0; transform:scaleX(0); }
.fpmm-overlay[data-open] ~ * .fpmm-burger span:nth-child(3),
.fpmm-overlay[data-open] + .fpmm-backdrop ~ * .fpmm-burger span:nth-child(3)
  { transform:rotate(-45deg) translateY(-1px); width:100%; }

/* ── Backdrop ── */
.fpmm-backdrop {
  position:fixed; inset:0; z-index:99998;
  background:rgba(10,30,18,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s; pointer-events:none;
}
.fpmm-backdrop.is-open { opacity:1; visibility:visible; pointer-events:auto; }

/* ── Overlay shell ── */
.fpmm-overlay { position:fixed; inset:0; z-index:99999; overflow:hidden; visibility:hidden; pointer-events:none; }
.fpmm-overlay.is-open { visibility:visible; pointer-events:auto; }

/* Elementor color protection */
.fpmm-overlay .fpmm-close         { color:#475569 !important; background:transparent !important; }
.fpmm-overlay .fpmm-back          { color:var(--fpmm-green) !important; background:transparent !important; }
.fpmm-overlay .fpmm-nav-label     { color:var(--fpmm-dark) !important; }
.fpmm-overlay .fpmm-nav-link      { color:var(--fpmm-dark) !important; }
.fpmm-overlay .fpmm-panel-heading { color:var(--fpmm-dark) !important; }
.fpmm-overlay .fpmm-cat-label     { color:var(--fpmm-dark) !important; }
.fpmm-overlay .fpmm-cat-desc      { color:var(--fpmm-muted) !important; }
.fpmm-overlay .fpmm-item-title    { color:var(--fpmm-dark) !important; }
.fpmm-overlay .fpmm-item-desc     { color:var(--fpmm-muted) !important; }
.fpmm-overlay .fpmm-panel         { background:var(--fpmm-white) !important; }
.fpmm-overlay .fpmm-cta-btn       { color:var(--fpmm-white) !important; background:var(--fpmm-green) !important; }
.fpmm-overlay .fpmm-social a      { color:rgba(255,255,255,.65) !important; }
.fpmm-overlay .fpmm-cta strong    { color:var(--fpmm-white) !important; }
.fpmm-overlay .fpmm-cta span      { color:rgba(255,255,255,.55) !important; }

/* ── 3-panel track ── */
.fpmm-track {
  display:flex; width:300%; height:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.fpmm-overlay.at-2 .fpmm-track { transform:translateX(-33.333%); }
.fpmm-overlay.at-3 .fpmm-track { transform:translateX(-66.666%); }

/* ── Panel ── */
.fpmm-panel {
  width:33.333%; height:100%; background:var(--fpmm-white);
  display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0;
  transform:translateY(-24px); opacity:0;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  font-family:var(--font-main);
}
.fpmm-overlay.is-open .fpmm-panel { transform:translateY(0); opacity:1; }

/* ── Top bar ── */
.fpmm-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--fpmm-border); flex-shrink:0;
}
.fpmm-logo { display:flex; align-items:center; }
.fpmm-logo img, .fpmm-logo .custom-logo { max-height:36px; width:auto; display:block; }

/* Wordmark fallback */
.fpmm-wordmark { display:flex; align-items:center; gap:10px; }
.fpmm-wordmark-icon {
  width:36px; height:36px; background:var(--fpmm-dark); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-main); font-size:18px; font-weight:800; color:var(--fpmm-green);
  border-radius:2px;
}
.fpmm-wordmark-name {
  display:block; font-family:var(--font-main);
  font-size:14px; font-weight:700; color:var(--fpmm-dark); line-height:1;
}
.fpmm-wordmark-sub {
  display:block; font-family:var(--font-main);
  font-size:9px; font-weight:400; color:var(--fpmm-muted);
  letter-spacing:1.4px; text-transform:uppercase; margin-top:3px;
}

.fpmm-close {
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid var(--fpmm-border); background:transparent;
  cursor:pointer; color:#475569; flex-shrink:0;
  transition:background .2s, color .2s, border-color .2s;
}
.fpmm-close svg { width:26px; height:26px; display:block; }
.fpmm-close:active { background:var(--fpmm-dark); border-color:var(--fpmm-dark); color:var(--fpmm-white); }

/* ── Back button ── */
.fpmm-back {
  display:flex; align-items:center; gap:5px;
  height:38px; padding:0 14px 0 8px;
  border:none; border-radius:0; cursor:pointer;
  color:var(--fpmm-green); background:transparent;
  font-family:var(--font-main); font-size:14px; font-weight:600;
  letter-spacing:.3px; transition:opacity .2s;
}
.fpmm-back svg { width:20px; height:20px; display:block; flex-shrink:0; }
.fpmm-back:active { opacity:.6; }

/* ── Panel heading ── */
.fpmm-panel-heading {
  font-family:var(--font-main);
  font-size:26px; font-weight:700; line-height:1.15;
  color:var(--fpmm-dark); padding:20px 24px 8px; flex-shrink:0;
}

/* ── Level 1: Nav ── */
.fpmm-nav {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:24px 24px 12px; gap:0;
}
.fpmm-nav-link {
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; color:var(--fpmm-dark);
  padding:14px 0; border-bottom:1px solid var(--fpmm-border);
  -webkit-tap-highlight-color:transparent;
  opacity:0; transform:translateY(14px);
}
.fpmm-nav-link:last-child { border-bottom:none; }

.fpmm-overlay.is-open .fpmm-nav-link { animation:fpmmIn .44s var(--fpmm-ease) both; }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(1){ animation-delay:.06s }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(2){ animation-delay:.11s }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(3){ animation-delay:.16s }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(4){ animation-delay:.21s }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(5){ animation-delay:.26s }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(6){ animation-delay:.31s }
.fpmm-overlay.is-open .fpmm-nav-link:nth-child(7){ animation-delay:.36s }

@keyframes fpmmIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.fpmm-nav-label {
  font-family:var(--font-main);
  font-size:30px; font-weight:700; line-height:1;
  color:var(--fpmm-dark); pointer-events:none;
  letter-spacing:-.02em;
}
.fpmm-nav-icon {
  flex-shrink:0; width:36px; height:36px;
  background:var(--fpmm-light);
  display:flex; align-items:center; justify-content:center;
  color:var(--fpmm-dark); pointer-events:none;
  border:1px solid var(--fpmm-border);
}
.fpmm-nav-icon svg { width:16px; height:16px; display:block; pointer-events:none; }

/* ── Level 2: Kategorier ── */
.fpmm-cat-list { flex:1; padding:8px 16px 20px; display:flex; flex-direction:column; gap:10px; }

.fpmm-cat-link {
  display:flex; align-items:center; gap:14px;
  padding:16px; border:1px solid var(--fpmm-border);
  background:var(--fpmm-light);
  text-decoration:none; color:var(--fpmm-dark);
  -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(10px);
}
.fpmm-cat-link::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--fpmm-green);
  transform:scaleY(0);
  transition:transform .25s var(--fpmm-ease);
}
.fpmm-overlay.at-2 .fpmm-cat-link { animation:fpmmIn .4s var(--fpmm-ease) both; }
.fpmm-overlay.at-2 .fpmm-cat-link:nth-child(1){ animation-delay:.06s }
.fpmm-overlay.at-2 .fpmm-cat-link:nth-child(2){ animation-delay:.11s }
.fpmm-overlay.at-2 .fpmm-cat-link:nth-child(3){ animation-delay:.16s }
.fpmm-overlay.at-2 .fpmm-cat-link:nth-child(4){ animation-delay:.21s }
.fpmm-cat-link:active::before { transform:scaleY(1); }
.fpmm-cat-link:active { background:rgba(40,167,69,.08); border-color:rgba(40,167,69,.35); }

.fpmm-cat-icon {
  flex-shrink:0; width:46px; height:46px;
  background:var(--fpmm-white);
  border:1px solid var(--fpmm-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--fpmm-dark);
}
.fpmm-cat-icon svg { width:22px; height:22px; display:block; }
.fpmm-cat-body  { flex:1; min-width:0; }
.fpmm-cat-label {
  display:block; font-family:var(--font-main);
  font-size:16px; font-weight:700; color:var(--fpmm-dark); line-height:1.2;
}
.fpmm-cat-desc  { display:block; font-family:var(--font-main); font-size:12.5px; color:var(--fpmm-muted); margin-top:3px; }
.fpmm-cat-chevron { flex-shrink:0; color:var(--fpmm-green); }
.fpmm-cat-chevron svg { width:16px; height:16px; display:block; }

/* ── Level 3: Underpunkter ── */
.fpmm-items-list { flex:1; padding:8px 16px 20px; display:flex; flex-direction:column; gap:10px; }

.fpmm-item-link {
  display:flex; align-items:center; gap:14px;
  padding:16px; border:1px solid var(--fpmm-border);
  background:var(--fpmm-light);
  text-decoration:none; color:var(--fpmm-dark);
  -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(10px);
}
.fpmm-item-link::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--fpmm-green);
  transform:scaleY(0);
  transition:transform .25s var(--fpmm-ease);
}
.fpmm-overlay.at-3 .fpmm-item-link { animation:fpmmIn .4s var(--fpmm-ease) both; }
.fpmm-overlay.at-3 .fpmm-item-link:nth-child(1){ animation-delay:.06s }
.fpmm-overlay.at-3 .fpmm-item-link:nth-child(2){ animation-delay:.11s }
.fpmm-overlay.at-3 .fpmm-item-link:nth-child(3){ animation-delay:.16s }
.fpmm-overlay.at-3 .fpmm-item-link:nth-child(4){ animation-delay:.21s }
.fpmm-overlay.at-3 .fpmm-item-link:nth-child(5){ animation-delay:.26s }
.fpmm-item-link:active::before { transform:scaleY(1); }
.fpmm-item-link:active { background:rgba(40,167,69,.08); border-color:rgba(40,167,69,.35); }

.fpmm-item-icon {
  flex-shrink:0; width:46px; height:46px;
  background:var(--fpmm-white);
  border:1px solid var(--fpmm-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--fpmm-dark);
}
.fpmm-item-icon svg { width:22px; height:22px; display:block; }
.fpmm-item-body  { flex:1; min-width:0; }
.fpmm-item-title {
  display:block; font-family:var(--font-main);
  font-size:15px; font-weight:600; color:var(--fpmm-dark); line-height:1.2;
}
.fpmm-item-desc  {
  display:block; font-family:var(--font-main);
  font-size:12.5px; color:var(--fpmm-muted); margin-top:3px; line-height:1.45;
}
.fpmm-item-chevron { flex-shrink:0; color:var(--fpmm-green); }
.fpmm-item-chevron svg { width:14px; height:14px; display:block; }

/* ── Footer ── */
.fpmm-footer {
  flex-shrink:0; border-top:1px solid var(--fpmm-border);
  padding:22px 24px 32px; background:var(--fpmm-dark);
}
.fpmm-cta         { margin-bottom:14px; }
.fpmm-cta strong  {
  display:block; font-family:var(--font-main);
  font-size:17px; font-weight:700; color:var(--fpmm-white);
}
.fpmm-cta span    {
  display:block; font-family:var(--font-main);
  font-size:12.5px; color:rgba(255,255,255,.55); margin-top:3px;
}
.fpmm-cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:12px 22px;
  background:var(--fpmm-green); color:var(--fpmm-white);
  font-family:var(--font-main); font-size:13.5px; font-weight:600;
  text-decoration:none; letter-spacing:.3px;
  position:relative; overflow:hidden; border-radius:2px;
}
.fpmm-cta-btn::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .5s;
}
.fpmm-cta-btn:active::after { left:150%; }
.fpmm-cta-btn svg { width:15px; height:15px; flex-shrink:0; }

.fpmm-social      { display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; }
.fpmm-social a    {
  font-family:var(--font-main); font-size:13px; font-weight:500;
  color:rgba(255,255,255,.5); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.fpmm-social a:active { color:var(--fpmm-green); }

/* ── Sub-panel top bar ── */
.fpmm-sub-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--fpmm-border); flex-shrink:0;
}