/**
 * ALLOut Main Top Area — front-end styles.
 *
 * Ported verbatim from the approved standalone export, with every selector scoped under
 * #aomta so nothing can leak into Betheme. Do not hand-edit selectors to remove the
 * scope: the plugin renders inside a live Betheme page and shares the document with it.
 *
 * #aomta is display:contents on purpose — it scopes without generating a box, so the
 * sticky header keeps resolving against the document exactly as it does in the export.
 *
 * @author ALLOut Security
 * @link   https://alloutsecurity.com
 */

#aomta { display: contents; }

#aomta{--red-200:#FBC2C7; --red-400:#F0555F; --red-500:#E8323F; --red-600:#D11F2C;
  --navy-50:#EEF1F8; --navy-700:#14224A; --navy-900:#081634;
  --gray-50:#F7F8FB; --gray-100:#EFF1F6; --gray-200:#E3E7EF; --gray-300:#D2D8E4; --gray-500:#7B8499;
  --text-muted:var(--gray-500);
  --border-subtle:var(--gray-200); --border-default:var(--gray-300);
  --radius-md:4px; --radius-lg:4px; --radius-pill:999px;
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Mulish',system-ui,sans-serif;
  --shadow-sm:0 1px 2px rgba(8,22,52,.08),0 1px 3px rgba(8,22,52,.06);
  --shadow-md:0 4px 12px rgba(8,22,52,.10);
  --shadow-lg:0 12px 32px rgba(8,22,52,.16);
  --hero-grad:linear-gradient(115deg,#081634 0%,#0E1C40 46%,#1A2A52 100%);}
#aomta *{box-sizing:border-box;}
#aomta{font-family:var(--font-body);color:var(--gray-500);-webkit-font-smoothing:antialiased;}
#aomta a{color:inherit;text-decoration:none;}
#aomta button{font-family:inherit;}
#aomta img{max-width:100%;display:block;}
#aomta svg{display:block;}
#aomta .hdr{position:sticky;top:0;z-index:100;background:var(--aomta-hdr-bg,#fff);border-bottom:1px solid var(--border-subtle);}
/* Not sticky — the header scrolls away with the page. Sticky was hardcoded here, so this was
   previously only reachable by editing the stylesheet. .is-full stays sticky and simply never
   receives .shrink (the JS reads the same class), so it needs no rule of its own. */
#aomta .hdr.is-static{position:static;}
#aomta .hdr-in{margin:0 auto;max-width:var(--aomta-hdr-max,none);height:var(--aomta-hdr-h,88px);padding:0 var(--aomta-hdr-pad,24px);display:flex;align-items:center;gap:14px;transition:height .25s ease;}
#aomta .hdr.shrink{box-shadow:var(--shadow-md);}
#aomta .hdr.shrink .hdr-in{height:var(--aomta-hdr-h-shrink,64px);}
#aomta .logo,#aomta .nav,#aomta .navbtn,#aomta .navitem{transition:height .25s ease;}
#aomta .hdr.shrink .logo{height:44px;}
#aomta .hdr.shrink .nav,#aomta .hdr.shrink .navbtn,#aomta .hdr.shrink .navitem{height:var(--aomta-hdr-h-shrink,64px);}
#aomta .hdr.shrink .navbtn::after{bottom:16px;}
#aomta .hdr.shrink .panelwrap,#aomta .hdr.shrink .panelwrap.mega{top:64px;}
#aomta .hdr-in>a{flex:none;}
#aomta .logo{height:60px;display:block;flex:none;width:auto;}
#aomta .logo-fallback{height:60px;display:flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--navy-900);letter-spacing:-.01em;}
#aomta .logo-fallback span{color:var(--red-500);}
#aomta .nav{display:flex;align-items:stretch;gap:2px;height:var(--aomta-hdr-h,88px);margin-left:4px;}
#aomta .navitem{position:relative;display:flex;align-items:center;}
/* font-family/line-height are spelled out because a non-clickable item renders as a real <button>,
   and a button does not inherit either one — without this it drops to the browser's UI font and
   sits a pixel off its neighbours. Harmless on the <a>, which inherits them anyway. */
#aomta .navbtn{display:inline-flex;align-items:center;gap:7px;height:var(--aomta-hdr-h,88px);padding:0 12px;border:none;background:transparent;cursor:pointer;font-family:inherit;line-height:inherit;font-weight:var(--aomta-nav-weight,700);font-size:var(--aomta-nav-size,15px);color:var(--navy-700);position:relative;}
#aomta .navbtn .chev{transition:transform .25s ease;opacity:.55;}
#aomta .navbtn::after{content:"";position:absolute;left:12px;right:12px;bottom:24px;height:2.5px;border-radius:2px;background:var(--red-500);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
#aomta .navitem:hover .navbtn{color:var(--red-600);}
#aomta .navitem:hover .navbtn .chev{transform:rotate(180deg);opacity:1;}
#aomta .navitem:hover .navbtn::after{transform:scaleX(1);}
#aomta .spacer{flex:1;}
#aomta .util{display:flex;align-items:center;gap:10px;}
#aomta .btn-demo{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--radius-md);background:var(--red-500);color:#fff;font-weight:800;font-size:14px;line-height:1;white-space:nowrap;border:1px solid var(--red-500);cursor:pointer;transition:background .15s ease,transform .08s ease,box-shadow .15s ease;}
#aomta .btn-demo:hover{background:var(--red-600);box-shadow:var(--shadow-sm);}
#aomta .btn-demo:active{transform:translateY(1px);}
#aomta .btn-portal{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--radius-md);background:var(--navy-900);color:#fff;font-weight:800;font-size:14px;line-height:1;white-space:nowrap;border:1px solid var(--navy-900);cursor:pointer;transition:background .15s ease,transform .08s ease,box-shadow .15s ease;}
#aomta .btn-portal:hover{background:#14224A;box-shadow:var(--shadow-sm);color:#fff;}
#aomta .btn-portal:active{transform:translateY(1px);}
#aomta .flag{width:21px;height:15px;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(8,22,52,.1);}
#aomta .searchbtn{width:40px;height:40px;flex:none;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--aomta-hdr-bg,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy-700);transition:background .14s ease,color .14s ease,border-color .14s ease;}
#aomta .searchbtn:hover{background:var(--gray-50);color:var(--red-600);border-color:var(--red-200);}
#aomta .searchrow{position:absolute;left:0;right:0;top:100%;z-index:92;background:var(--aomta-panel-bg,#fff);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-md);display:none;animation:drop .2s cubic-bezier(.2,.7,.3,1);}
#aomta .searchrow.open{display:block;}
#aomta .searchrow .in{max-width:1000px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:14px;}
#aomta .searchrow input{flex:1;border:none;outline:none;font-family:var(--font-body);font-size:18px;color:var(--navy-700);background:transparent;}
#aomta .searchrow input::placeholder{color:var(--text-muted);}
#aomta .searchrow .sclose{border:none;background:var(--gray-100);color:var(--navy-700);width:34px;height:34px;border-radius:50%;cursor:pointer;flex:none;font-size:15px;}
#aomta .searchrow .sclose:hover{background:var(--gray-200);}
#aomta .langwrap{position:relative;}
#aomta .lang{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);font-weight:700;font-size:13px;color:var(--navy-700);cursor:pointer;background:var(--aomta-hdr-bg,#fff);}
#aomta .lang:hover{border-color:var(--red-200);color:var(--red-600);}
#aomta .lang--flags{gap:4px;padding:6px 8px;}
#aomta .lang--short .lang-txt{letter-spacing:.03em;}
#aomta .langmenu{position:absolute;top:100%;right:0;margin-top:8px;z-index:95;background:var(--aomta-panel-bg,#fff);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;min-width:184px;display:none;}
#aomta .langmenu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
#aomta .langwrap:hover .langmenu{display:block;}
#aomta .langmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);font-weight:600;font-size:14px;color:var(--navy-700);text-align:left;}
#aomta .langmenu button:hover{background:var(--gray-50);}
#aomta .langmenu button.on{color:var(--red-600);}
#aomta .langmenu button .code{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--text-muted);}
#aomta .panelwrap{position:absolute;top:88px;left:0;z-index:90;display:none;padding-top:0;}
#aomta .navitem:hover>.panelwrap{display:block;}
#aomta .panel{background:var(--aomta-panel-bg,#fff);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:drop .2s cubic-bezier(.2,.7,.3,1);}
@keyframes drop{from{transform:translateY(-6px);opacity:.6;}to{transform:translateY(0);opacity:1;}}
#aomta .panelwrap.mega{position:fixed;left:0;right:0;top:88px;}
#aomta .panelwrap.mega .panel{border-radius:0;border-left:none;border-right:none;}
#aomta .mega-inner{max-width:var(--aomta-mega-max,none);margin:0 auto;padding:0 var(--aomta-mega-pad,48px);}
#aomta .panelwrap.mega.learn .mega-inner{max-width:960px;padding:0 24px;}
#aomta .mega-grid{display:grid;}
#aomta .mega-col{padding:26px;border-right:1px solid var(--border-subtle);}
#aomta .mega-col:last-child{border-right:none;}
#aomta .drop{display:grid;}
#aomta .drop .mega-col{padding:20px;}
#aomta .col-head{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px;}
#aomta .mlink{display:flex;align-items:flex-start;gap:13px;padding:9px 10px;margin:0 -10px;border-radius:var(--radius-md);transition:background .14s ease;}
#aomta .mlink:hover{background:var(--gray-50);}
#aomta .icontile{flex:none;width:var(--aomta-icon-tile,38px);height:var(--aomta-icon-tile,38px);border-radius:var(--aomta-icon-radius,var(--radius-md));background:var(--aomta-icon-bg,var(--navy-50));color:var(--aomta-icon-color,var(--navy-700));display:flex;align-items:center;justify-content:center;}
#aomta .icontile svg{width:var(--aomta-icon-size,18px);height:var(--aomta-icon-size,18px);}
#aomta .ml-text{min-width:0;}
#aomta .ml-label{display:block;font-weight:700;font-size:14.5px;color:var(--navy-700);line-height:1.3;}
#aomta .mlink:hover .ml-label{color:var(--red-600);}
#aomta .ml-desc{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.4;}
#aomta .ml-arrow{margin-left:auto;align-self:center;width:17px;height:17px;color:var(--red-500);opacity:0;transform:translateX(-6px);transition:all .16s ease;}
#aomta .mlink:hover .ml-arrow{opacity:1;transform:translateX(0);}
/* Description-less links: one line of text has nothing to top-align against, so centre the row and
   shrink it. Sizes stay proportional to the design tokens rather than hard-coded, so a site that
   raised --aomta-icon-tile still gets a tile that is smaller here and not a fixed 32px. */
#aomta .mlink.is-nodesc{align-items:center;gap:10px;padding:6px 10px;}
#aomta .mlink.is-nodesc .icontile{width:calc(var(--aomta-icon-tile,38px) * .84);height:calc(var(--aomta-icon-tile,38px) * .84);}
#aomta .mlink.is-nodesc .icontile svg{width:calc(var(--aomta-icon-size,18px) * .88);height:calc(var(--aomta-icon-size,18px) * .88);}
#aomta .mlink.is-nodesc .ml-arrow{width:15px;height:15px;}
#aomta .m-actions{display:none;align-items:center;gap:6px;margin-left:auto;}
#aomta .m-act{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 13px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--aomta-hdr-bg,#fff);cursor:pointer;color:var(--navy-700);font-family:var(--font-display);font-weight:700;font-size:13.5px;white-space:nowrap;transition:background .14s ease,color .14s ease,border-color .14s ease;}
#aomta .m-act:hover{background:var(--gray-50);color:var(--red-600);border-color:var(--red-200);}
#aomta .m-act.portal{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
#aomta .m-act.portal:hover{background:#14224A;color:#fff;}
#aomta .m-act.demo{background:var(--red-500);border-color:var(--red-500);color:#fff;}
#aomta .m-act.demo:hover{background:var(--red-600);}
@media (max-width:480px){
#aomta .m-act.demo{display:none;}
}
@media (max-width:380px){
#aomta .m-actions{gap:4px;}
#aomta .m-act{padding:0 10px;font-size:12.5px;}
}
#aomta .m-langsel{position:relative;}
#aomta .m-flagbtn{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--aomta-hdr-bg,#fff);cursor:pointer;color:var(--navy-700);}
#aomta .m-flagbtn:hover{background:var(--gray-50);border-color:var(--red-200);}
#aomta .m-flagbtn .flag{width:22px;height:16px;}
#aomta .m-flagmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:130;background:var(--aomta-panel-bg,#fff);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;min-width:184px;display:none;}
#aomta .m-flagmenu.open{display:block;}
#aomta .m-flagmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);font-weight:600;font-size:14px;color:var(--navy-700);text-align:left;}
#aomta .m-flagmenu button:hover{background:var(--gray-50);}
#aomta .m-flagmenu button.on{color:var(--red-600);}
#aomta .m-flagmenu button .code{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--text-muted);}
#aomta .burger{display:none;width:44px;height:44px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--aomta-hdr-bg,#fff);cursor:pointer;align-items:center;justify-content:center;color:var(--navy-700);}
@media (max-width:1180px){
#aomta .util .lang{display:none;}
}
@media (max-width:1024px){
#aomta .nav,#aomta .util{display:none;}
#aomta .m-actions{display:flex;}
#aomta .burger{display:inline-flex;margin-left:6px;}
}
@media (prefers-reduced-motion:reduce){
#aomta .panel{animation:none;}
}
#aomta .m-scrim{position:fixed;inset:0;z-index:110;background:rgba(8,22,52,.5);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;}
#aomta .m-scrim.open{opacity:1;visibility:visible;}
#aomta .drawer{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(400px,88vw);background:var(--aomta-panel-bg,#fff);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#aomta .drawer.open{transform:translateX(0);}
#aomta .drawer-top{position:sticky;top:0;background:var(--aomta-panel-bg,#fff);display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border-subtle);}
#aomta .drawer-top .logo-fallback{height:34px;font-size:20px;}
#aomta .drawer-close{width:40px;height:40px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--aomta-panel-bg,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy-700);}
#aomta .drawer-body{padding:8px 0 0;flex:1;}
#aomta .m-item{border-bottom:1px solid var(--border-subtle);}
#aomta .m-row{display:flex;align-items:center;width:100%;}
/* .m-parent is the non-clickable variant of the drawer's top row — same type, no link. */
#aomta .m-row>a,#aomta .m-row>.m-parent{flex:1;padding:15px 20px;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--navy-700);}
#aomta .m-toggle{width:56px;align-self:stretch;border:none;background:transparent;cursor:pointer;color:var(--navy-700);display:flex;align-items:center;justify-content:center;border-left:1px solid var(--border-subtle);}
#aomta .m-toggle svg{transition:transform .22s ease;}
#aomta .m-item.open .m-toggle svg{transform:rotate(180deg);}
#aomta .m-sub{display:none;padding:2px 0 10px;background:var(--gray-50);}
#aomta .m-item.open .m-sub{display:block;}
#aomta .m-subhead{padding:12px 20px 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
#aomta .m-sub a{display:flex;flex-direction:column;padding:9px 20px 9px 28px;}
#aomta .m-sub a .l{font-weight:700;font-size:14.5px;color:var(--navy-700);}
#aomta .m-sub a .d{font-size:12px;color:var(--text-muted);margin-top:2px;}
#aomta .m-sub a:active{background:var(--gray-100);}
#aomta .drawer-cta{position:sticky;bottom:0;display:flex;flex-direction:column;gap:10px;padding:16px 20px;background:var(--aomta-panel-bg,#fff);border-top:1px solid var(--border-subtle);box-shadow:0 -6px 18px rgba(8,22,52,.08);}
#aomta .drawer-cta .btn-demo,#aomta .drawer-cta .btn-portal{justify-content:center;padding:13px 16px;font-size:15px;}
#aomta .m-lang{border-top:1px solid var(--border-subtle);}
#aomta .m-lang .m-row>button.m-langbtn{flex:1;display:flex;align-items:center;gap:10px;padding:15px 20px;border:none;background:transparent;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--navy-700);text-align:left;}
#aomta .m-langlist{display:none;padding:2px 0 10px;background:var(--gray-50);}
#aomta .m-lang.open .m-langlist{display:block;}
#aomta .m-lang.open .m-toggle svg{transform:rotate(180deg);}
#aomta .m-langlist button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 20px 11px 28px;border:none;background:transparent;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--navy-700);text-align:left;}
#aomta .m-langlist button:active{background:var(--gray-100);}
#aomta .m-langlist button .code{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--text-muted);}
#aomta .m-langlist button.on{color:var(--red-600);}

/* ---- Anchoring the header and the mega panel to reality -------------------------------
   The export owned the whole viewport, so it could hardcode "the header is 88px tall and
   starts at y=0" and position the full-width mega panel with position:fixed; top:88px.

   Inside a real WordPress page neither half of that holds:
     • The admin toolbar is 32px tall and shifts everything down (html{margin-top:32px}),
       so a panel fixed at top:88px lands ON TOP of the header and hides the nav. Since the
       preview is admin-only, every person previewing this hits it.
     • The site also renders a promo banner above the header (top_banner_public_allout).
     • A sticky top:0 header slides UNDER the toolbar when scrolled.

   So: the header sticks below the toolbar using the variable core exposes for exactly this,
   and the mega panel is positioned from the header's real measured bottom edge, published by
   the JS as --aomta-mega-top. The 88px fallback keeps it sane before the first measurement. */
#aomta .hdr{top:var(--wp-admin--admin-bar--height,0px);}
#aomta .panelwrap.mega,
#aomta .hdr.shrink .panelwrap.mega{top:var(--aomta-mega-top,88px);}

/* ---- Keyboard parity with the export's :hover states ---- */
#aomta .navitem.is-open>.panelwrap{display:block;}
#aomta .navitem.is-open .navbtn{color:var(--red-600);}
#aomta .navitem.is-open .navbtn .chev{transform:rotate(180deg);opacity:1;}
#aomta .navitem.is-open .navbtn::after{transform:scaleX(1);}

/* ---- Visible focus for keyboard users only (suppressed for mouse) ---- */
#aomta a:focus-visible,
#aomta button:focus-visible,
#aomta input:focus-visible{outline:2px solid var(--red-500);outline-offset:2px;border-radius:2px;}

/* ---- Screen-reader-only helper, used by the renderer for landmark labels ---- */
#aomta .aomta-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- Language menu items are buttons, not links ---------------------------------------
   Google Translate switches in place via the googtrans cookie, so there is no URL to link
   to. These rules give a <button> the same box the export's <a> had. */
#aomta .langmenu button.aomta-lang{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--navy-700);text-align:left;}
#aomta .langmenu button.aomta-lang:hover{background:var(--gray-50);}
#aomta .langmenu button.aomta-lang.on{color:var(--red-600);}
#aomta .langmenu button.aomta-lang .code{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--text-muted);}

/* ---- Login-state slot ----------------------------------------------------------------
   The export only ever drew the logged-out header, so it has no help / logout / account
   treatment to copy. These are built from the export's own tokens and sized to match
   .btn-portal exactly, so the slot stays visually of a piece with the approved design.
   The account PANEL is intentionally not styled here: it keeps the child theme's
   allout-acc__* classes and their existing CSS. */
/* Plain link, not a button: no border, no fill, no shadow. `border:1px solid transparent` rather
   than `border:0` so the box keeps the exact height it had and the utility row does not reflow;
   `box-shadow:none` and `background:none` are explicit because Betheme styles bare <a> and
   button-ish elements aggressively and would otherwise put the box back. */
#aomta .btn-help{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--radius-md);border:1px solid transparent;background:none;box-shadow:none;color:var(--navy-700);font-weight:700;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:color .14s ease;}
#aomta .btn-help:hover{background:none;box-shadow:none;color:var(--red-600);border-color:transparent;}
#aomta .btn-logout{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--aomta-hdr-bg,#fff);color:var(--gray-500);cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease;}
#aomta .btn-logout:hover{background:var(--gray-50);color:var(--red-600);border-color:var(--red-200);}

/* The account dropdown wrapper must establish the panel's positioning context. */
#aomta .allout-acc{position:relative;display:inline-flex;align-items:center;}

/* Below the desktop breakpoint the header collapses to .m-actions, so the desktop-only
   help/logout controls would otherwise crowd the burger. */
@media (max-width:1180px){
  #aomta .btn-help{display:none;}
}

/* ---------------------------------------------------------------------------
 * Emphasis, badges, panel alignment and shortcode slots.
 *
 * Added with the per-item control surface. Everything here is opt-in: a menu
 * item with no emphasis and no badge emits none of these classes, so the
 * approved design renders byte-for-byte as before.
 * ------------------------------------------------------------------------- */

/* Emphasis on a nav item or a panel link. */
#aomta .navbtn.is-accent{color:var(--red-600);}
#aomta .navitem:hover .navbtn.is-accent{color:var(--red-500);}

#aomta .navbtn.is-outline,#aomta .navbtn.is-solid{
  height:auto;align-self:center;padding:8px 14px;border-radius:var(--radius-md);
  line-height:1;}
/* The underline is the default item's hover affordance; a pill has its own. */
#aomta .navbtn.is-outline::after,#aomta .navbtn.is-solid::after{display:none;}

#aomta .navbtn.is-outline{border:1.5px solid var(--red-500);color:var(--red-600);}
#aomta .navitem:hover .navbtn.is-outline{background:var(--red-500);color:#fff;}

#aomta .navbtn.is-solid{background:var(--red-500);color:#fff;border:1.5px solid var(--red-500);}
#aomta .navitem:hover .navbtn.is-solid{background:var(--red-600);border-color:var(--red-600);color:#fff;}

#aomta .mlink.is-accent .ml-label{color:var(--red-600);}
#aomta .mlink.is-outline{border:1px solid var(--border-default);}
#aomta .mlink.is-solid{background:var(--gray-50);}

/* Badge pill. Sits inline in a nav item and after the label inside a panel. */
#aomta .aomta-badge{
  display:inline-block;margin-left:6px;padding:2px 6px;border-radius:var(--radius-pill);
  background:var(--red-500);color:#fff;
  font-family:var(--font-body);font-size:9.5px;font-weight:800;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;}
#aomta .navbtn.is-solid .aomta-badge,#aomta .navbtn.is-outline .aomta-badge{
  background:#fff;color:var(--red-600);}
#aomta .ml-label .aomta-badge{margin-left:5px;}

/* Dropdown position. Default is the left edge of the item — see .panelwrap. */
#aomta .panelwrap.align-center{left:50%;transform:translateX(-50%);}
#aomta .panelwrap.align-right{left:auto;right:0;}

/* Shortcode slots. Unstyled containers on purpose: whatever a shortcode renders
   brings its own design, and imposing ours on it would be a surprise. */
#aomta .aomta-slot{display:flex;align-items:center;}
#aomta .aomta-panel-sc{padding:0 26px 22px;}
#aomta .drop .aomta-panel-sc{padding:0 20px 18px;}
#aomta .drawer-cta .aomta-slot{display:block;margin-top:10px;}

/* ---------------------------------------------------------------------------
 * Keep the sticky header out of scroll anchoring.
 *
 * The header changes height as it shrinks, and it is in flow. If the browser
 * picks something inside it as the scroll anchor, that height change makes the
 * browser adjust scrollY to compensate — which moves the very number the shrink
 * threshold reads. The JS is already immune to this (two thresholds, 100px
 * apart), but there is no reason to let the header anchor the page at all: the
 * content below it is what a reader is anchored to.
 * ------------------------------------------------------------------------- */
#aomta .hdr { overflow-anchor: none; }

/* ---------------------------------------------------------------------------
 * Boxed mega panel.
 *
 * The full-width panel paints its background edge to edge, so capping the
 * CONTENT inside it only pushes the columns inward and leaves a wide white
 * band either side — which is more empty space, not less. This makes the PANEL
 * itself the given width and centres it: a wide card sized to its columns,
 * with the page visible around it.
 *
 * Still position:fixed and still anchored to --aomta-mega-top, so it clears the
 * admin bar and the promo banner exactly as the full-width one does. The width
 * falls back to 1200px when no per-panel width is set, and never exceeds the
 * viewport — a boxed panel wider than the screen would reintroduce the
 * horizontal scrollbar the fixed positioning exists to avoid.
 * ------------------------------------------------------------------------- */
/* The WRAP stays full width; only the CARD inside it is boxed.
 *
 * This centred the wrap itself, which made the panel unreachable. The panel
 * opens on .navitem:hover and is a child of the nav item, so hovering the
 * panel keeps it open — but a card centred on screen while its item sits at
 * the far left leaves a diagonal of dead space between the two. Crossing it
 * drops :hover, the panel closes, and the mouse never arrives. The option
 * existed, rendered correctly, and could not be used.
 *
 * Full width never had this problem because it spans the viewport: there is
 * no gap to cross. So boxed keeps that full-width wrap as an invisible
 * bridge and centres the card within it — same picture, reachable. */
#aomta .panelwrap.mega.boxed{
  left:0;right:0;
  transform:none;
  padding-top:10px;}

#aomta .panelwrap.mega.boxed .panel{
  width:min(var(--aomta-mega-max,1200px), calc(100vw - 32px));
  margin:0 auto;}

/* The full-bleed panel drops its side borders and corners because its edges are
   the screen's. A boxed panel has real edges again, so it gets them back. */
#aomta .panelwrap.mega.boxed .panel{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);}

/* .mega-inner is the centring device for the full-width panel. Inside a boxed
   panel the panel IS the container, so the inner must not cap or pad again. */
#aomta .panelwrap.mega.boxed .mega-inner{max-width:none;padding:0;}

/* ---------------------------------------------------------------------------
 * Natural mega panel.
 *
 * Boxed asks "how wide?" and takes a number. Natural asks the columns. The
 * panel is exactly as wide as its content needs and centres on the screen — so
 * a two-column panel is a small card and a four-column one is a wide one,
 * without anyone maintaining a px value per panel that goes stale the moment a
 * column is added.
 *
 * width:max-content sizes to the grid; the cap stops a panel with long
 * descriptions from growing past the screen and reintroducing the horizontal
 * scrollbar that fixed positioning exists to avoid. The tracks are `auto`
 * (set by the renderer), so when that cap bites the columns shrink to fit
 * rather than overflow.
 * ------------------------------------------------------------------------- */
#aomta .panelwrap.mega.natural{
  /* Under the item that opened it, not centred on the screen.
   *
   * This was modelled on .boxed, and inherited its left:50% centring without
   * earning it. Centring is boxed's POINT — it is defined as a centred card of
   * a stated width. Natural has no such claim: it is a panel the size of its
   * columns, and a panel the size of its columns belongs under the thing that
   * triggered it, exactly like a dropdown. Centred, it detached from its own
   * nav item and floated to the middle of the page.
   *
   * position:absolute puts it back in .navitem's coordinate space
   * (.navitem is position:relative), so top:100% is "directly below this item"
   * and it tracks the item on scroll for free — no --aomta-mega-top, which
   * only exists because a FIXED panel cannot see where its item is.
   *
   * right:auto and transform:none undo .panelwrap.mega's full-bleed
   * positioning; both are needed or left:0 fights left:0;right:0. */
  position:absolute;
  top:100%;
  left:0;
  right:auto;
  transform:none;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding-top:10px;}

/* A natural panel near the right edge would otherwise run off the screen —
   it is anchored to its item's left edge and sized by its content, so a
   late nav item plus a wide panel overflows. Anchoring to the right edge of
   the item instead keeps it on screen; the mega alignment control names this
   explicitly for anyone who wants it on a specific item. */
#aomta .panelwrap.mega.natural.mega-align-right{left:auto;right:0;}
#aomta .panelwrap.mega.natural.mega-align-spread,
#aomta .panelwrap.mega.natural.mega-align-left{left:0;right:auto;}

/* Same reasoning as boxed: its edges are real edges, so it gets them back. */
#aomta .panelwrap.mega.natural .panel{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);}

#aomta .panelwrap.mega.natural .mega-inner{max-width:none;padding:0;}

/* A column's natural width, stated.
 *
 * "Natural" cannot mean max-content: a column's max-content is its longest DESCRIPTION on one
 * unbroken line — ~300px of sentence plus 52px of padding — so four columns want ~1400px, more
 * than most screens. The viewport cap then bites every single time, and `auto` tracks answer a
 * cap by collapsing to min-content: the narrowest the text can possibly go. That is the cramped
 * panel — capped AND minimum-width at once, the worst of both.
 *
 * So the floor is stated here instead of inferred from the text. 250px leaves ~198px of content
 * after the padding, which fits the longest label in the design ("Security Change Control")
 * without wrapping and gives the descriptions a readable measure to wrap within. The tracks stay
 * `auto`, so a column still takes more when its content wants more — the floor only stops the
 * collapse. Four columns come to ~1000px and fit comfortably. */
#aomta .panelwrap.mega.natural .mega-col{min-width:250px;}

/* ---------------------------------------------------------------------------
 * Natural dropdown — the panel fits its content.
 *
 * The alternative was a px width, which is a number someone re-tunes by hand
 * every time a label changes, and which fails silently when it is wrong: the
 * labels wrap and the descriptions concertina with nothing saying why.
 *
 * Bounded on both sides, because unbounded max-content is the trap the mega
 * panel already fell into. A dropdown item's max-content is its longest
 * DESCRIPTION on one unbroken line, so a three-link menu would render a
 * 700px panel. 520px is a comfortable measure for a description and leaves
 * every label in the design unwrapped; 240px stops a menu of short words
 * rendering as a sliver. Between the two it is genuinely the content's width.
 * ------------------------------------------------------------------------- */
#aomta .panelwrap .panel.is-natural{
  width:max-content;
  min-width:240px;
  max-width:min(520px, calc(100vw - 32px));}

/* ---------------------------------------------------------------------------
 * Full-width mega alignment.
 *
 * The panel spans the screen; the block of columns inside it need not. Default
 * is centred, which is .mega-inner's own `margin:0 auto` — so no class is
 * emitted for it and today's panels are untouched.
 *
 * Named mega-align-*, NOT the dropdown's align-*: those set left/right to place
 * a panel against its nav item, carry the same specificity as
 * .panelwrap.mega's `left:0;right:0`, and sit later in this file. Sharing the
 * name would win the cascade and rip the panel off the side of the screen.
 * ------------------------------------------------------------------------- */
#aomta .panelwrap.mega.mega-align-left .mega-inner{margin-left:0;margin-right:auto;}
#aomta .panelwrap.mega.mega-align-right .mega-inner{margin-left:auto;margin-right:0;}

/* Spread does not move the block — it removes the cap, so the columns take the
   whole screen. This is what a panel with no container width already does; the
   option makes it sayable on a panel that HAS one, without clearing the width
   and losing it. */
#aomta .panelwrap.mega.mega-align-spread .mega-inner{max-width:none;}