/* Altermedia Mega Menu — frontend * Panel-chrome bewust minimaal; de Elementor-templates leveren hun eigen styling. * Accent (actieve tab) = Altermedia rood #E72B2B. */ :root { --amm-red: #E72B2B; --amm-panel-bg: #f5f5f5; --amm-tab-ink: #1a1a1a; --amm-shadow: 0 16px 40px rgba(0, 0, 0, .14); --amm-radius: 4px; --amm-anim: 180ms; } /* Container voor niet-geactiveerde panels: volledig verborgen. */ #amm-panels[hidden] { display: none !important; } /* ---- Panel (geteleporteerd naar ) ---- */ .amm-panel { position: fixed; z-index: 99990; background: var(--amm-panel-bg); box-shadow: var(--amm-shadow); border-radius: var(--amm-radius); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--amm-anim) ease, transform var(--amm-anim) ease, visibility 0s linear var(--amm-anim); box-sizing: border-box; max-height: calc(100vh - var(--amm-top, 80px) - 16px); overflow-y: auto; overscroll-behavior: contain; } .amm-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--amm-anim) ease, transform var(--amm-anim) ease, visibility 0s; } .amm-panel__inner { box-sizing: border-box; padding-bottom: 8px; } /* ---- Tabbalk ---- */ .amm-panel .amm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0 24px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .10); position: sticky; top: 0; z-index: 2; } /* Reset met hoge specificiteit: voorkomt dat thema- of Elementor-kit * knopstijlen (achtergrond, rand, vorm) op de tabs doorlekken. */ .amm-panel .amm-tabs button.amm-tab { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; width: auto; min-width: 0; height: auto; margin: 0; padding: 16px 16px; background: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--amm-tab-ink); font: inherit; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--amm-anim) ease, border-color var(--amm-anim) ease; } .amm-panel .amm-tabs button.amm-tab:hover, .amm-panel .amm-tabs button.amm-tab:focus-visible { color: var(--amm-red); background: transparent !important; } .amm-panel .amm-tabs button.amm-tab:focus-visible { outline: 2px solid var(--amm-red); outline-offset: -2px; } .amm-panel .amm-tabs button.amm-tab.is-active { color: var(--amm-red); border-bottom-color: var(--amm-red) !important; } /* ---- Panes ---- */ .amm-panes { position: relative; } .amm-pane[hidden] { display: none; } .amm-pane { padding: 18px 24px 24px; animation: amm-fade var(--amm-anim) ease; } @keyframes amm-fade { from { opacity: 0; } to { opacity: 1; } } /* Eén tab: geen tabbalk, panel toont alleen de template. */ .amm-panel--single .amm-panes { padding: 0; } /* ---- Mobiel: inline accordion onder de trigger ---- */ .amm-panel.amm-mode-inline { position: static; max-height: none; box-shadow: none; transform: none; opacity: 1; visibility: visible; width: 100% !important; left: auto !important; right: auto !important; border-top: 1px solid rgba(0, 0, 0, .08); } .amm-panel.amm-mode-inline:not(.is-open) { display: none; } .amm-panel.amm-mode-inline .amm-tabs { overflow-x: auto; } @media (prefers-reduced-motion: reduce) { .amm-panel, .amm-panel.is-open, .amm-pane { transition: none; animation: none; } }